Topup your Wallet in PnP Web Modal SDK

For topping up the wallet of a user, you can use the initiateTopup() function. This method takes in the parameters of the selected payment provider and accordingly gives you the option to seemless add money to your user's wallet address directly.

info

This uses the Torus EVM Wallet UI Plugin and Torus Solana Wallet UI Plugin for the respective chains. Please install and configure the packages before using this function.

initiateTopup()

EVM

Initiates the Top Up flow with selected provider.

Arguments

Table

Parameter	Type	Description	Mandatory
provider	PAYMENT_PROVIDER_TYPE ["moonpay", "wyre", "rampnetwork", "xanpool", "mercuryo", "transak", "banxa"]	Payment Provider name	Yes
params	PaymentParams	Payment Params object	Yes

PaymentParams

Parameter	Type	Description	Mandatory
selectedAddress?	string	Address to send the funds to	No
selectedCurrency?	string	Default fiat currency for the user to make the payment in	No
fiatValue?	number	Amount to buy in the selectedCurrency	No
selectedCryptoCurrency?	string	Cryptocurrency to buy	No
chainNetwork?	SUPPORTED_PAYMENT_NETWORK_TYPE ["mainnet", "matic", "bsc_mainnet", "avalanche_mainnet", "xdai"]	Chain Network to use	No

Interface

async initiateTopup(provider: PAYMENT_PROVIDER_TYPE, params: PaymentParams): Promise<void> {
  if (!this.torusWalletInstance.isLoggedIn) throw TorusWalletPluginError.web3AuthNotConnected();
  await this.torusWalletInstance.initiateTopup(provider, params);
}

export interface PaymentParams {
  /**
   * Address to send the funds to
   */
  selectedAddress?: string;
  /**
   * Default fiat currency for the user to make the payment in
   */
  selectedCurrency?: string;
  /**
   * Amount to buy in the selectedCurrency
   */
  fiatValue?: number;
  /**
   * Cryptocurrency to buy
   */
  selectedCryptoCurrency?: string;
  /**
   * Chain Network to use
   */
  chainNetwork?: SUPPORTED_PAYMENT_NETWORK_TYPE;
}

export const PAYMENT_PROVIDER = {
  MOONPAY: "moonpay",
  WYRE: "wyre",
  RAMPNETWORK: "rampnetwork",
  XANPOOL: "xanpool",
  MERCURYO: "mercuryo",
  TRANSAK: "transak",
  BANXA: "banxa",
} as const;

export const SUPPORTED_PAYMENT_NETWORK = {
  MAINNET: "mainnet",
  MATIC: "matic",
  BSC_MAINNET: "bsc_mainnet",
  AVALANCHE_MAINNET: "avalanche_mainnet",
  XDAI: "xdai",
} as const;

Example

import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";

const torusPlugin = new TorusWalletConnectorPlugin({
  torusWalletOpts: {},
  walletInitOptions: {
    whiteLabel: {
      theme: { isDark: true, colors: { primary: "#00a8ff" } },
      logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
      logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
    },
    useWalletConnect: true,
    enableLogging: true,
  },
});

await web3auth.addPlugin(torusPlugin); // add plugin to web3auth instance

await torusPlugin.initiateTopup("moonpay", {
  selectedAddress: "wallet_address",
  selectedCurrency: "USD", // Fiat currency
  fiatValue: 100, // Fiat Value
  selectedCryptoCurrency: "ETH", // Cryptocurreny `SOL`, `MATIC` etc.
  chainNetwork: "mainnet", // Blockchain network
});

Solana

Initiates the Top Up flow with selected provider.

Arguments

Table

Parameter	Type	Description	Mandatory
provider	PAYMENT_PROVIDER_TYPE ["moonpay", "wyre", "rampnetwork", "xanpool", "mercuryo", "transak"]	Payment Provider name	Yes
params	PaymentParams	Payment Params object	Yes

PaymentParams

Parameter	Type	Description	Mandatory
selectedAddress?	string	Address to send the funds to	No
selectedCurrency?	string	Default fiat currency for the user to make the payment in	No
fiatValue?	number	Amount to buy in the selectedCurrency	No
selectedCryptoCurrency?	string	Cryptocurrency to buy	No
cyptoAmount?	number	Amount Cryptocurrency to buy	No

Interface

async initiateTopup(provider: PAYMENT_PROVIDER_TYPE, params: PaymentParams): Promise<void> {
  if (!this.torusWalletInstance.isLoggedIn) throw TorusWalletPluginError.web3AuthNotConnected();
  await this.torusWalletInstance.initiateTopup(provider, params);
}

export interface PaymentParams {
  /**
   * Address to send the funds to
   */
  selectedAddress?: string;
  /**
   * Default fiat currency for the user to make the payment in
   */
  selectedCurrency?: string;
  /**
   * Amount to buy in the selectedCurrency
   */
  fiatValue?: number;
  /**
   * Cryptocurrency to buy
   */
  selectedCryptoCurrency?: string;
  /**
   * Amount Cryptocurrency to buy
   */
  cryptoAmount?: number;
}

export const PAYMENT_PROVIDER = {
  MOONPAY: "moonpay",
  WYRE: "wyre",
  RAMPNETWORK: "rampnetwork",
  XANPOOL: "xanpool",
  MERCURYO: "mercuryo",
  TRANSAK: "transak",
} as const;

Example

import { SolanaWalletConnectorPlugin } from "@web3auth/solana-wallet-connector-plugin";

const torusPlugin = new SolanaWalletConnectorPlugin({
  torusWalletOpts: {},
  walletInitOptions: {
    whiteLabel: {
      theme: { isDark: true, colors: { primary: "#00a8ff" } },
      logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
      logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
    },
  },
});

await web3auth.addPlugin(torusPlugin); // add plugin to web3auth instance

await torusPlugin.initiateTopup("moonpay", {
  selectedAddress: "wallet_address",
  selectedCurrency: "USD", // Fiat currency
  fiatValue: 100, // Fiat Value
  selectedCryptoCurrency: "ETH", // Cryptocurreny `SOL`, `MATIC` etc.
});

Supported Cryptocurrency

Supported Cryptocurrency for each Payment Provider by Network

MOONPAY

Network	Supported Cryptocurrency
mainnet	AAVE, BAT, DAI, ETH, MKR, MATIC, USDT , USDC
matic	ETH: eth_polygon, MATIC: matic_polygon, USDC: usdc_polygon
bsc_mainnet	BNB: bnb_bsc, BUSD: busd_bsc
avalanche_mainnet	AVAX: avax_cchain

WYRE

Network	Supported Cryptocurrency
mainnet	AAVE, BAT, BUSD, DAI, ETH, MKR, UNI , USDC, USDT
matic	USDC: MUSDC
avalanche_mainnet	AVAX

RAMPNETWORK

Network	Supported Cryptocurrency
mainnet	ETH, DAI, USDC, USDT
matic	MATIC_DAI, MATIC_MATIC , MATIC_USDC
avalanche_mainnet	AVAX

XANPOOL

Network	Supported Cryptocurrency
mainnet	ETH, USDT

MERCURYO

Network	Supported Cryptocurrency
mainnet	ETH, BAT, USDT, DAI
bsc_mainnet	BNB, BUSD, 1INCH

TRANSAK

Network	Supported Cryptocurrency
mainnet	AAVE, DAI, ETH, USDC, USDT , CHAIN
matic	AAVE, DAI, MATIC, USDC, USDT , WETH, CHAIN
bsc_mainnet	BNB, BUSD
avalanche_mainnet	AVAX

BANXA

Network	Supported Cryptocurrency
mainnet	ETH, USDT, BUSD, LINK, USDC, CHZ, BAT, MANA, AAVE, COMP, ENJ
matic	MATIC