TokenIcon issue

[aiaug]

Thank you for providing this awesome service!

I’ve encountered an issue while using the TokenIcon component.

Here’s the code I’m working with (from the Thirdweb Playground example):

https://playground.thirdweb.com/connect/ui/token

tokenname and tokensymbol is working well, but tokenicon is not working.

import { TokenProvider, TokenIcon } from "thirdweb/react";

function App() {
  const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
  return (
    <TokenProvider
      address={USDC_ADDRESS}
      client={THIRDWEB_CLIENT}
      chain={ethereum}
    >
      <TokenIcon
        className="h-auto w-20 rounded-full"
        iconResolver="/usdc.svg"
      />
    </TokenProvider>
  );
}

The TokenIcon doesn’t seem to be working, even though my client is set up correctly. Is anyone else experiencing this issue?

I am using version 5.85.0
Looking forward to your insights!

[linear]

TOOL-3148 TokenIcon issue

[gregfromstl]

Hey @aiaug,

When you say the TokenIcon component isn't working what do you mean? What exact behavior do you see and what would you expect to see?

[aiaug]

Hey @gregfromstl
The icon is not displayed

[gregfromstl]

Are you sure your image is available at the path /usdc.svg? Does it work when using a normal image tag?

[aiaug]

yes, that worked

[gregfromstl]

Excellent, we'll get this triaged and looked into

[aiaug]

Great!

[MananTank]

Hey @aiaug - I can't replicate the issue you mentioned. You can see it working as expected here: https://codesandbox.io/p/devbox/nmdrvg?file=%2Fsrc%2FApp.tsx

If you are still facing this issue - Please send a minimal reproduction (either a github repository or sandbox link)

Note that if you are just passing a string as iconResolver prop - The TokenIcon component simply renders an <img /> with given string set as src attribute - so you can just directly render an <img src={yourString} /> instead

[aiaug]

bro, I don't want customized image instead of default token Icon

but yours display example.svg in all case
this is problem

[aiaug]

in your case,

import "./App.css";

import { TokenProvider, TokenIcon, ThirdwebProvider } from "thirdweb/react";
import { ethereum } from "thirdweb/chains";
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
clientId: "746eaf0791cf641e1360dbe7d52722d2",
});

const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";

function App() {
return (

<div
style={{
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>

    {/* <TokenProvider address={USDC_ADDRESS} client={client} chain={ethereum}>
      <TokenIcon
        className="my-token-icon"
        fallbackComponent={<div className="fallback-icon"> </div>}
        loadingComponent={<div className="loading-icon"> </div>}
      />
    </TokenProvider> */}
  </div>
</ThirdwebProvider>

);
}

export default App;

this result displays start image instead of usdc icon.

[MananTank]

@aiaug Its not clear what exactly are you expecting here - Please elaborate.

Here's whats happening in this example:

The TokenIcon component fails to resolve an icon url for 0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48 address - so nothing is rendered if fallback is not provided. (If fallback is provided - the fallback is rendered if resolving fails)

• If no iconResolver is passed - icon is fetched by looking at the contract metadata

• If you pass an iconResolver function - that function is used for fetching the token icon instead of above method

• If you pass a string as iconResolver - no fetching/resolving is done and the given url is used directly for rendering the icon

If you want to resolve the icon using default method and only render a custom icon when resolving fails - you should render the custom icon using fallbackComponent prop