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

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:

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

Setup

1. Import Styles

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

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

2. Configure Tailwind CSS

If you're using Tailwind CSS in your project, add the component paths to your tailwind.config.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. Setup Required Providers

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

// 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 (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <HuntMintSwapProvider>{/* Your app content */}</HuntMintSwapProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default App;

4. Environment Variables

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

VITE_DECENT_API_KEY=your_decent_api_key

Usage

MintSwap Component

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

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

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

HuntBuildingsModal Component

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

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

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

Component Props

MintSwap Props

| 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 |

HuntBuildingsModal Props

| 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

Common Issues

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:

   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