Funding Wallets

Openfort makes it easy for your users to fund their wallets with a variety of assets, including a network's native currency (e.g. ETH), USDC, and other ERC20 tokens. This makes it seamless to take onchain actions within your apps such as purchasing goods, swapping tokens, minting NFTs, and more.

Openfort enables users to fund their wallets by:

• transferring assets from an external wallet (e.g. Rabbit Wallet)
• purchasing assets from MoonPay with fiat currency
• purchasing assets from Coinbase Onramp or transferring from Coinbase accounts

External wallets

The external wallets funding option enables users to transfer funds from an external wallet (e.g. MetaMask) to their embedded wallet within your app.

If users don't want to connect an external wallet, Openfort will also give the users to copy their embedded wallet address, and manually transfer funds from their external wallet to their embedded wallet.

Coinbase Onramp

The Coinbase Onramp funding option enables users to purchase assets from Coinbase or transfer assets from an existing Coinbase account, directly within your app. If users have already completed KYC and identity verification with Coinbase for an existing Coinbase account, they will not need to do so again, streamlining their asset purchase/transfer experience.

Please note that these purchases are not immediate and it may take a few minutes for funds to arrive in your user's wallet.

MoonPay

The MoonPay funding option enables users to purchase assets with fiat payments including bank transfer, credit cards, and debit cards. This is particularly useful for users that may not hold crypto outside of your application and are purchasing crypto for the first time.

Please note that these purchases are not immediate, and depending on the payment method selected by your users, it may take a few days for funds to arrive in your user's wallet. Generally, paying with bank transfer has the highest approval rates for cryptocurrency purchases.

Integrating a custom fiat on-ramp

To start, you'll need to choose a fiat on-ramp provider that meets your app's requirements. Different on-ramp providers vary in their support of:

• different tokens (ETH, USDC, Dai, POL, etc.)
• different networks (Ethereum, Polygon, Optimism, etc.)
• different regions (US, Europe, Brazil, South Korea, India, etc.).
• different payment methods (credit cards, debit cards, ACH, instant ACH, etc. )

Once you have chosen an on-ramp provider for your app, set up an account with that provider and retrieve your sandbox API keys to build an integration. For example, after setting up a Moonpay account, you can retrieve your API keys from their developer dashboard like below:

Most providers will provision you with a public API key that can be exposed to your frontend, and a secret API key that should only exist on your server. Some providers may also offer a webhook API key so you can subscribe to updates on your users' transactions.

Integrating the provider

For the remainder of this guide, we will focus on integrating Moonpay as your fiat on-ramp provider. The integration follows three main steps:

1. Collect user details in your frontend
2. Generate the Moonpay URL with proper parameters
3. Handle the purchase flow and monitor transactions

1. Collect User Information in Your Frontend

First, we need to collect information about the user and their desired purchase. Using wagmi, we can easily get the user's wallet address:

import { useAccount } from "wagmi";
 
function App() {
  const { address } = useAccount();
}

2. Generate the Moonpay URL

Once we have the user's information, we can generate the Moonpay URL. You'll need your Moonpay API key for this step:

// Generate a unique transaction ID for tracking
const txId = 'openfort-' + window.crypto.randomUUID();
 
// Construct the Moonpay URL with all necessary parameters
const moonpayLink = `https://buy-sandbox.moonpay.com/` +
  `?externalTransactionId=${txId}` +
  `&apiKey=${process.env.NEXT_PUBLIC_MOONPAY_API_KEY}` +
  `&walletAddress=${address}` +
  `&currencyCode=ETH` +
  `&quoteCurrencyAmount=${fundAmount}`;

Important parameters in the URL:

• externalTransactionId: A unique identifier for tracking the transaction
• apiKey: Your Moonpay public API key
• walletAddress: The user's wallet address
• currencyCode: The cryptocurrency to purchase (e.g., 'ETH')
• quoteCurrencyAmount: The amount to purchase

3. Redirect your user to the on-ramp URL

Once you have generated the Moonpay URL, you can redirect your user to complete their purchase. The following code handles the redirection and monitors the transaction status:

const handleFund = async (service: any) => {
  // Update UI state to show progress
  setStep(StepEnum.SERVICE_PROGRESS);
  setService(service);
  
  // Open Moonpay in a new window
  window.open(service.link, '_blank');
  
  // Start monitoring the transaction
  const intervalFund = setInterval(
    () => checkFunding(() => service.checkTxResult(service.verifyUrl)),
    2000
  );
  intervalFundingId.current = intervalFund;
};
 
// Function to check funding status
const checkFunding = async (txResult: any) => {
  if (await txResult() === 'completed') {
    clearInterval(intervalFundingId.current);
    setStep(StepEnum.COMPLETED);
    handleSetMessage('Funds added successfully!');
  }
};
 
// Function to check transaction status
const checkMoonpayTransaction = async (txId: string) => {
  const verifyUrl = `https://api.moonpay.com/v1/transactions/ext/${txId}?apiKey=${process.env.NEXT_PUBLIC_MOONPAY_API_KEY}`;
  
  try {
    const response = await fetch(verifyUrl);
    if (!response.ok) return 'pending';
    
    const json = await response.json();
    switch (json[0].status) {
      case 'completed':
        return 'completed';
      case 'failed':
        return 'failed';
      default:
        return 'pending';
    }
  } catch (error) {
    console.error('Error checking transaction status:', error);
    return 'pending';
  }
};