hunt-mint-swap

A React component library for seamless token swapping and minting functionality, built with modern web3 technologies.

Features

- 🔄 MintSwap Component: Seamless token swapping interface
- 🏗️ HuntBuildingsModal: Building minting and management interface
- 🌐 Wagmi Integration: Robust wallet connection
- ⚡ Viem/Wagmi Support: Robust Web3 interactions
- 🎨 Modern UI with Tailwind CSS

Installation

``bash
npm install hunt-mint-swap


or

yarn add hunt-mint-swap

or

pnpm add hunt-mint-swap
`

Prerequisites

This package requires the following peer dependencies:

`json
{
"react": ">=19.1.0",
"react-dom": ">=19.1.0",
"viem": ">=2.29.2",
"wagmi": ">=2.15.3"
}
`

Setup

$3

The components use Tailwind CSS for styling. You must import the component styles in your application:

`tsx
// In your app's entry point (e.g., App.tsx or index.tsx)
import "hunt-mint-swap/style.css";
`

$3

If you're using Tailwind CSS in your project, add the component paths to your tailwind.config.js:

`js
/* @type {import('tailwindcss').Config} /
module.exports = {
content: [
// ... your other content paths
"./node_modules/hunt-mint-swap/*/.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
`

$3

The library requires specific providers to be set up in your app. Create a wrapper component like this:

`tsx
// App.tsx or your root component
import { WagmiProvider, createConfig, http } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { mainnet, base } from "viem/chains";
import { HuntMintSwapProvider } from "hunt-mint-swap";

// Get your project ID from WalletConnect Cloud
const projectId = "YOUR_WALLET_CONNECT_PROJECT_ID";

// Create wagmi config
const config = createConfig({
chains: [mainnet, base],
transports: {
[mainnet.id]: http(),
[base.id]: http(),
},
});

const queryClient = new QueryClient();

function App() {
return (


{/ Your app content /}


);
}

export default App;
`

$3

Make sure to set up the following environment variables in your .env file:

`env
VITE_DECENT_API_KEY=your_decent_api_key
`

Usage

$3

`tsx
import { MintSwap } from "hunt-mint-swap";

function App() {
const [isOpen, setIsOpen] = useState(false);

return (
isOpen={isOpen}
onClose={() => setIsOpen(false)}
className="custom-class"
/>
);
}
`

$3

`tsx
import { HuntBuildingsModal } from "hunt-mint-swap";

function App() {
const [isOpen, setIsOpen] = useState(false);

return (
isOpen={isOpen}
onClose={() => setIsOpen(false)}
className="custom-class"
/>
);
}
`

Component Props

$3

| Prop | Type | Description |
| --------- | ---------- | ------------------------------------------ |
| isOpen | boolean | Controls the visibility of the swap modal |
| onClose | () => void | Callback function when modal is closed |
| className | string? | Optional CSS class for custom on container |

$3

| Prop | Type | Description |
| --------- | ---------- | ---------------------------------------------- |
| isOpen | boolean | Controls the visibility of the buildings modal |
| onClose | () => void | Callback function when modal is closed |
| className | string? | Optional CSS class for custom on container |

Troubleshooting

$3

1. White Screen: If you see a white screen, make sure you have:

- Imported the CSS file
- Set up all required providers
- Set the WalletConnect project ID
- Set the DECENT API key in your environment variables

2. Provider Errors: Ensure your providers are in the correct order:

`tsx
WagmiProvider -> QueryClientProvider -> HuntMintSwapProvider
``

3. Style Issues: If styles are not loading:
- Check that you've imported the CSS file
- Verify your Tailwind configuration includes the package path
- Make sure PostCSS is properly configured in your build setup

Contributing

We welcome contributions! Please see our contributing guide for details.

License

MIT

Support

For support, please open an issue in the GitHub repository: https://github.com/yourusername/hunt-mint-swap/issues