Deposit with Exchange - React

Deposit with Exchange gives your users a seamless way to fund their connected wallets directly from centralized exchange accounts like Coinbase and Binance (with more exchanges coming soon). Instead of forcing users to leave your app, log into their exchange, and manually handle withdrawals, you can offer a guided in-app flow that keeps them engaged and ready to transact.

Quickstart

This feature will start working as soon as your team is on the allowed-list. Please, contact [e-mail] to get started.

Projects first need to install and set up Reown AppKit before integrating AppKit Pay. If you haven’t done so, please refer to the Reown AppKit docs.

Clicking on Fund your wallet will show the modal below:

Start Deposit with Exchange from a button

Install the library

npm

npm install @reown/appkit-pay

Usage

Import the baseUSDC asset, the pay function and the useAppKitAccount hook to get the address of the connected wallet.

import { baseUSDC, pay } from '@reown/appkit-pay';
import { useAppKitAccount  } from '@reown/appkit/react'

Get the address of the connected wallet using the useAppKitAccount hook. You can also check if the user is connected using the isConnected boolean.

const { address, isConnected } = useAppKitAccount()

In order to run the deposit, use the function pay. This function receives three parameters.

// pay function returns a PaymentResult object
const result = await pay({ 
    recipient: address,
    amount: 0.0001,
    paymentAsset: baseUSDC
});

if (result.success) {
    console.log("Payment successful: "+ result.result);
} else {
    console.error("Payment error: "+ result.error);
}

Supported Networks and Assets

For a complete list of supported networks and assets across different exchanges (Coinbase, Binance), please refer to the Networks and Assets Supported section in our Pay with Exchange documentation.

Assets Configuration

For the moment, AppKit Pay has pre-configured these assets:

• baseETH, baseSepoliaETH, and baseUSDC
• ethereumUSDC, optimismUSDC, arbitrumUSDC, polygonUSDC and solanaUSDC
• ethereumUSDT, optimismUSDT, arbitrumUSDT, polygonUSDT and solanaUSDT

import { baseETH } from '@reown/appkit-pay' 

For custom assets, you can create a paymentAsset object with all the information:

// Configure the paymentAsset
const paymentAssetDetails = {
    network: 'eip155:8453', // Base Mainnet
    asset: 'native', // Or USDC in Base: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
    metadata: {
        name: 'Ethereum', // Or 'USD Coin'
        symbol: 'ETH',    // Or 'USDC'
        decimals: 18      // Or 6 for USDC
    }
};