ERC-20 balance visible in onramp aggegator?

When asking for help in this category, please make sure to provide the following details:

  • SDK Version(package.json): 10.2.0
  • Platform: React
  • Browser Console Screenshots:
  • If the issue is related to Custom Authentication, please include the following information (optional):
    • Verifier Name:
    • JWKS Endpoint:
    • Sample idToken (JWT):

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

Web3Auth Configuration (lib/web3authConfig.ts)

import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from “@web3auth/modal”;
import { CHAIN_NAMESPACES, CustomChainConfig } from “@web3auth/base”;

export const createWeb3AuthConfig = (config) => {
const chainConfig: CustomChainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: 0x${config.chainId.toString(16)}, // Convert to hex
rpcTarget: config.rpcUrl,
displayName: getNetworkDisplayName(),
blockExplorerUrl: config.snowtraceBaseUrl,
ticker: ‘AVAX’,
tickerName: ‘Avalanche’,
};

return {
  web3AuthOptions: {
    clientId: config.web3AuthClientId,
    web3AuthNetwork: config.web3AuthNetwork,
    chainConfig,
    uiConfig: {
      appName: "Conduit UCPI",
      theme: { primary: "#0364ff" },
      mode: "auto",
      defaultLanguage: "en",
      loginGridCol: 3,
      primaryButton: "externalLogin",
    },
    modalConfig: {
      connectors: {
        [WALLET_CONNECTORS.AUTH]: {
          loginMethods: {
            google: { showOnModal: true },
            facebook: { showOnModal: true },
            email_passwordless: { showOnModal: true },
          },
          showOnModal: true,
        },
      },
    },
  },
};

};

Web3Auth Provider Setup (_app.tsx)

Login Implementation (ConnectWallet.tsx)

import { useWeb3Auth, useWeb3AuthConnect, useIdentityToken } from ‘@web3auth/modal/react’;
import { ethers } from ‘ethers’;

const connectWallet = async () => {
// Connect using Web3Auth React hook
const web3authProvider = await connect();

// Get wallet address using ethers.js
const ethersProvider = new ethers.BrowserProvider(web3authProvider);
const signer = await ethersProvider.getSigner();
const walletAddress = await signer.getAddress();

// For social logins, get identity token
const web3authInstance = (window as any).web3auth;
if (web3authInstance?.connectedConnectorName === 'auth') {
  const authUser = await web3authInstance.getIdentityToken();
  if (authUser?.idToken) {
    await login(authUser.idToken, walletAddress, web3authProvider);
  }
}

};

Question:
The onramp aggregator widget is only showing the native coin balance of my wallet. I need my users to be able to see their USDC balance. Am I missing some step to make this happen, or is it not possible in the onramp aggregator?

Thank you for providing detailed information about your setup and your question!

Summary of Your Question:

  • SDK: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Version: 10.2.0
  • Platform: React
  • Issue: The Fiat Onramp Aggregator widget only shows the native coin (e.g., AVAX) balance, but you want your users to also see their USDC (ERC-20 token) balance. You’re asking if this is possible or if you’re missing a configuration step.

Current Web3Auth Onramp Aggregator Capabilities

Based on the Web3Auth Documentation for Fiat Onramp Aggregator, the aggregator is designed to show the native coin balance for supported blockchains. The documentation and public demos currently indicate that only the native token (e.g., ETH for Ethereum, AVAX for Avalanche) is displayed as the wallet balance in the aggregator widget.

ERC-20 Token Support:
At this time, the aggregator does not natively display ERC-20 token balances (such as USDC) in the widget UI. It is focused on the native asset for the selected chain. This is a common limitation in many onramp widgets, as onramps typically convert fiat directly into the native token, and ERC-20 support (for both display and direct onramping) is less common and often requires additional integration.


What Can You Do?

  • Custom Display (Workaround):
    If you want to show USDC balances to your users, you will need to fetch and display the USDC balance separately in your own UI using ethers.js or web3.js.
    Example (using ethers.js):

    const usdcContract = new ethers.Contract(
      USDC_ADDRESS,
      ["function balanceOf(address owner) view returns (uint256)"],
      signer
    );
    const usdcBalance = await usdcContract.balanceOf(walletAddress);
    
  • Onramp Direct to USDC:
    Some onramp providers (like MoonPay, Ramp, etc.) do support direct fiat-to-USDC purchases on certain chains, but this is dependent on the provider, region, and chain. The Web3Auth aggregator may expose these options if available, but the balance display in the widget will still be limited to the native asset.


Feature Request

If displaying ERC-20 (like USDC) balances in the aggregator widget is critical for your use case, this would be a feature request. You can submit a feature request here or let us know, and we can escalate it to the product team for consideration.


References


Summary:
You are not missing a configuration step; currently, the Web3Auth Onramp Aggregator widget only displays the native coin balance, not ERC-20 tokens like USDC. For now, you can display USDC balances in your own UI, or request this as a new feature.

Let me know if you’d like help with sample code to fetch and display USDC balances, or if you want to submit this as a feature request!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

I am fine displaying the ERC20 balance in my dapp separately (I already do this, in fact). It also looks like the onramp aggregator does allow my users to buy USDC directly, which is great. But the fact that when they open the widget, the first thing they see is a balance for a coin they know nothing about (AVAX), and no balance for the one they do care about (USDC) is immediately going to put them off using the service. I can’t be the first person to ask for this feature.

1 Like

Thanks for your feedback, we’ll share with the team

The on ramp aggregator section of WalletService doesn’t show any balance to me. Please see below:

I am trying it out on our demo at https://demo.web3auth.io/. Please let me know if this is the section you’re looking at as well.

Here’s the one I’m seeing - AVAX balance but no USDC

This should show I believe if you have a USDC balance.

Please join the office hours happening today for dedicated support: Web3Auth Developer Office Hours

Well, it doesn’t. Current balance in that wallet is 3.05usdc