Deposit into Apex Omni (a Perpetual DEX)

npm create vite@latest my-cross-chain-deposit -- --template react-ts
cd my-cross-chain-deposit

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

VITE_AARC_API_KEY=your_api_key_here

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,
  },
};

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>
  );
};

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>
  );
}