diff --git a/.changeset/tangy-bugs-feel.md b/.changeset/tangy-bugs-feel.md new file mode 100644 index 00000000000..b866a229d8f --- /dev/null +++ b/.changeset/tangy-bugs-feel.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Show injected wallet icon when available diff --git a/packages/thirdweb/src/react/core/utils/wallet.ts b/packages/thirdweb/src/react/core/utils/wallet.ts index 37b63c3647a..5f96795c86d 100644 --- a/packages/thirdweb/src/react/core/utils/wallet.ts +++ b/packages/thirdweb/src/react/core/utils/wallet.ts @@ -194,10 +194,19 @@ export function useWalletInfo(id: WalletId | undefined) { export function useWalletImage(id: WalletId | undefined) { return useQuery({ queryKey: ["wallet-image", id], - queryFn: () => { + queryFn: async () => { if (!id) { throw new Error("Wallet id is required"); } + const { getInstalledWalletProviders } = await import( + "../../../wallets/injected/mipdStore.js" + ); + const mipdImage = getInstalledWalletProviders().find( + (x) => x.info.rdns === id, + )?.info.icon; + if (mipdImage) { + return mipdImage; + } return getWalletInfo(id, true); }, retry: false, diff --git a/packages/thirdweb/src/react/core/utils/walletIcon.ts b/packages/thirdweb/src/react/core/utils/walletIcon.ts index aecd4a8c1a9..37f67398376 100644 --- a/packages/thirdweb/src/react/core/utils/walletIcon.ts +++ b/packages/thirdweb/src/react/core/utils/walletIcon.ts @@ -129,8 +129,15 @@ export function useWalletIcon(props: { /** * @internal Exported for tests only */ -export async function fetchWalletImage(props: { - id: WalletId; -}) { +export async function fetchWalletImage(props: { id: WalletId }) { + const { getInstalledWalletProviders } = await import( + "../../../wallets/injected/mipdStore.js" + ); + const mipdImage = getInstalledWalletProviders().find( + (x) => x.info.rdns === props.id, + )?.info.icon; + if (mipdImage) { + return mipdImage; + } return getWalletInfo(props.id, true); }