Cross-Chain NFT Minting

This guide demonstrates how to implement cross-chain NFT minting using Aarc’s FundKit SDK. We’ll create a simple dApp that allows users to mint NFTs on any chain using funds from any supported chain.

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

2. Install dependencies:

npm install

3. Create a .env file with your Aarc API key:

VITE_AARC_API_KEY=your_api_key_here

4. 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:

• GitHub: aarc-xyz/aarc-rampx-nft-minting
• Live Demo: aarc-rampx-mint.netlify.app

Support

For additional queries contact support: