> ## Documentation Index
> Fetch the complete documentation index at: https://aarc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Warning>
  You need to get your contract address whitelisted with Aarc. Contact our [support team](/introduction/support) to request whitelisting.
</Warning>

## Quick Start

1. Create a new Vite React project:

```bash theme={null}
npm create vite@latest my-nft-minting -- --template react-ts
cd my-nft-minting
```

2. Install dependencies:

```bash theme={null}
npm install
```

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

```env theme={null}
VITE_AARC_API_KEY=your_api_key_here
```

4. Start the development server:

```bash theme={null}
npm run dev
```

## Implementation Guide

### 1. Setup Aarc Configuration

Create a configuration file for Aarc's FundKit SDK:

```typescript theme={null}
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

```typescript theme={null}
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

<img src="https://mintcdn.com/aarc/huQ1Ru5IYW7RQl1R/images/minting-progress.png?fit=max&auto=format&n=huQ1Ru5IYW7RQl1R&q=85&s=5ec508b19224f5ec9baf67915645e2dd" alt="Minting in Progress" width="930" height="834" data-path="images/minting-progress.png" />

*User selecting payment method in Aarc modal*

<img src="https://mintcdn.com/aarc/huQ1Ru5IYW7RQl1R/images/minting-complete.png?fit=max&auto=format&n=huQ1Ru5IYW7RQl1R&q=85&s=804b1cba5d426a6ccea6f1c6e8ab7763" alt="Minting Complete" width="932" height="810" data-path="images/minting-complete.png" />

*Successfully minted NFT*

## Example Implementation

You can find a complete working example at:

* GitHub: [aarc-xyz/aarc-rampx-nft-minting](https://github.com/aarc-xyz/aarc-rampx-nft-minting)
* Live Demo: [aarc-rampx-mint.netlify.app](https://aarc-rampx-mint.netlify.app/)

## Support

For additional queries contact [support](/introduction/support):