Cross-Chain Deposits

This guide demonstrates how to implement cross-chain deposits using Aarc’s FundKit SDK. The example shows how to create a dApp that allows users to deposit funds from any supported chain to a destination contract on any 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-cross-chain-deposit -- --template react-ts
cd my-cross-chain-deposit

2. Install required dependencies:

npm install @aarc-xyz/fundkit-web-sdk @aarc-xyz/eth-connector @rainbow-me/rainbowkit wagmi viem ethers @tanstack/react-query

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

VITE_AARC_API_KEY=your_api_key_here

Implementation Guide

1. Setup Aarc Configuration

Create a configuration file for Aarc’s FundKit SDK:

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

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

2. Create the Deposit Component

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

export const DepositComponent = ({ aarcModal }: { aarcModal: AarcFundKitModal }) => {
  const [amount, setAmount] = useState('20');
  const { address } = useAccount();
  const [isProcessing, setIsProcessing] = useState(false);

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

    try {
      setIsProcessing(true);

      // Create contract interface
      const contractInterface = new ethers.Interface([
        "function deposit(bytes32 address, bytes32 amount) external payable"
      ]);

      // Generate deposit payload
      const contractPayload = contractInterface.encodeFunctionData("deposit", [
        address,
        amount
      ]);

      const value = ethers.parseUnits(amount, 18).toString();

      // Update Aarc configuration
      aarcModal.updateRequestedAmount(Number(amount));
      aarcModal.updateDestinationContract({
        contractPayload,
      });

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

  return (
    <div className="deposit-container">
      <input
        type="text"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="Enter amount"
        disabled={!address}
      />

      <button
        onClick={handleDeposit}
        disabled={isProcessing || !address}
        className="deposit-button"
      >
        {isProcessing ? 'Processing...' : 'Deposit'}
      </button>
    </div>
  );
};

3. Setup App Component

import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AarcFundKitModal } from '@aarc-xyz/fundkit-web-sdk';
import { AarcEthWalletConnector } from '@aarc-xyz/eth-connector';
import { aarcConfig } from './config/aarcConfig';
import { DepositComponent } from './components/DepositComponent';

const queryClient = new QueryClient();

function App() {
  const aarcModalRef = useRef(new AarcFundKitModal(aarcConfig));
  const aarcModal = aarcModalRef.current;

  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <AarcEthWalletConnector aarcWebClient={aarcModal}>
          <DepositComponent aarcModal={aarcModal} />
        </AarcEthWalletConnector>
      </WagmiProvider>
    </QueryClientProvider>
  );
}

User Flow

1. User connects their wallet
2. User enters the amount they want to deposit
3. User clicks the “Deposit” button
4. Aarc modal opens showing available payment options
5. User selects their preferred payment method
6. Transaction is processed cross-chain
7. Funds are deposited to the destination contract

User selecting payment method in Aarc modal

Successfully depositing funds cross-chain

Example Implementation

You can find a complete working example at:

• GitHub: aarc-xyz/aarc-apex-omni-deposit
• Live Demo: aarc-apex-omni-deposit.netlify.app

Support

For additional queries contact support: