Troubleshooting: Custom Token Visibility in the "Send Funds" Section

Description

Problem

Note: In this guide, we are using the Thirdweb (TW) token as an example. You can apply the same steps for any custom token deployed on any chain, such as Ethereum, Binance Smart Chain, or other supported networks.

Solution

Steps to Resolve:

1. Configure the Token and Chain ID: Ensure the correct configuration for your custom token, including its contract address, name, symbol, and the correct chain ID. For example, if your token is deployed on Polygon with chain ID 137, the configuration should look like this:

javascript
Copy code
walletDetailsModal.open({
  client: client,
  connectedAccountAvatarUrl: makeBlockie(account?.address ?? ""),
  theme: theme == "dark" ? thirdwebDarkTheme : thirdwebLightTheme,
  displayBalanceToken: {
    137: process.env.NEXT_PUBLIC_TOKEN_CONTRACT_ADDRESS ?? "", // Polygon chain ID 137
  },
  supportedTokens: {
    137: [  // Polygon network (chain ID 137)
      {
        address: "0xYourTokenAddressHere",  // Replace with your custom token's address
        name: "Thirdweb",                   // Token name
        symbol: "TW",                       // Token symbol
      },
    ],
  },
});

Tip: Replace the token address, name, and symbol with your custom token details, and change the chain ID to the correct one for your network.

2. Clear Cache and Rebuild: If the token still doesn't appear, try clearing the cache in your project and rebuilding it. Sometimes, cached assets may prevent the new tokens from displaying.
• To clear the cache, delete any .next folders or the equivalent build folder in your project.
• Rebuild the project using your typical build commands (e.g., npm run build or yarn build).

3. Test the Changes: After making these changes, test the modal again to see if the custom token appears correctly. If the issue persists, please reach out for further support or provide a minimal reproducible example for internal investigation.

Additional Tips

• Ensure Token Address is Correct: Always double-check that the token address is correct, especially when working with custom tokens or custom chains. Even a small error in the address can prevent the token from appearing.

• Use Minimal Version for Debugging: If you're still facing issues, consider isolating the token configuration into a minimal example project. This can help identify whether the problem lies with the token configuration or elsewhere in your project.