​
Prerequisites

  • Node.js and npm installed
  • Basic understanding of React and Web3 development
  • An Aarc API key

You need to get your contract address whitelisted with Aarc. Contact our support team to request whitelisting.

​
Quick Start

  1. Create a new Vite React project:
npm create vite@latest my-nft-minting -- --template react-ts
cd my-nft-minting
  1. Install dependencies:
npm install
  1. Create a .env file with your Aarc API key:
VITE_AARC_API_KEY=your_api_key_here
  1. Start the development server:
npm run dev

​
Implementation Guide

​
1. Setup Aarc Configuration

Create a configuration file for Aarc’s FundKit SDK:

import { FKConfig, ThemeName } from "@aarc-xyz/fundkit-web-sdk";

export const aarcConfig: FKConfig = {
  appName: "Cross-Chain NFT Minting",
  module: {
    exchange: { enabled: true },
    onRamp: { enabled: true },
    bridgeAndSwap: {
      enabled: true,
      fetchOnlyDestinationBalance: false,
      routeType: "Value",
      connectors: [SourceConnectorName.ETHEREUM],
    },
  },
  destination: {
    contract: {
      contractAddress: "YOUR_CONTRACT_ADDRESS",
      contractName: "NFT Minting Contract",
      contractGasLimit: "200000",
      contractUri: "https://example.com/image.png"
    },
    chainId: "DESTINATION_CHAIN_ID",
    tokenAddress: "DESTINATION_TOKEN_ADDRESS", // token which is used to mint the NFT
  },
  appearance: {
    theme: ThemeName.DARK,
    roundness: 42,
  },
  apiKeys: {
    aarcSDK: import.meta.env.VITE_AARC_API_KEY,
  },
};

​
2. Create the Minting Component

import { useState } from 'react';
import { useAccount } from 'wagmi';
import { ethers } from 'ethers';
import { AarcFundKitModal } from '@aarc-xyz/fundkit-web-sdk';

export const NFTMintingComponent = ({ aarcModal }: { aarcModal: AarcFundKitModal }) => {
  const { address } = useAccount();
  const [isProcessing, setIsProcessing] = useState(false);

  const handleMint = async () => {
    if (!address) return;

    try {
      setIsProcessing(true);
      
      // Create contract interface
      const contractInterface = new ethers.Interface([
        "function mintTo(address recipient, uint256 quantity) external payable"
      ]);

      // Generate minting payload
      const contractPayload = contractInterface.encodeFunctionData("mintTo", [
        address,
        1
      ]);

      // Update Aarc configuration
      aarcModal.updateRequestedAmount(0.0001); // Mint price in ETH
      aarcModal.updateDestinationContract({
        contractPayload,
      });

      // Open Aarc modal
      aarcModal.openModal();
      setIsProcessing(false);
    } catch (error) {
      console.error("Minting error:", error);
      setIsProcessing(false);
    }
  };

  return (
    <button
      onClick={handleMint}
      disabled={isProcessing || !address}
      className="mint-button"
    >
      {isProcessing ? 'Processing...' : 'Mint NFT'}
    </button>
  );
};

​
3. User Flow

  1. User connects their wallet
  2. User selects their NFT & clicks the “Mint NFT” button
  3. Aarc modal opens showing available payment options
  4. User selects their preferred payment method
  5. Transaction is processed cross-chain
  6. NFT is minted directly to the user’s wallet

User selecting payment method in Aarc modal

Successfully minted NFT

​
Example Implementation

You can find a complete working example at:

​
Support

For additional queries contact support.