Skip to content

[SDK] Show injected wallet icon when available #6871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 29, 2025
Merged

[SDK] Show injected wallet icon when available #6871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f003738
[SDK] Show injected wallet icon when available
joaquim-verges Apr 27, 2025
e1b341a
Merge branch 'main' into _SDK_Show_injected_wallet_icon_when_available
joaquim-verges Apr 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tangy-bugs-feel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---

Show injected wallet icon when available
11 changes: 10 additions & 1 deletion packages/thirdweb/src/react/core/utils/wallet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,10 +194,19 @@
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(
Copy link
Member

@jnsdls jnsdls Apr 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same question RE async import

Copy link
Member Author

@joaquim-verges joaquim-verges Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same answer

"../../../wallets/injected/mipdStore.js"
);
const mipdImage = getInstalledWalletProviders().find(
(x) => x.info.rdns === id,
)?.info.icon;
if (mipdImage) {
return mipdImage;
}

Check warning on line 209 in packages/thirdweb/src/react/core/utils/wallet.ts

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/core/utils/wallet.ts#L208-L209 

Added lines #L208 - L209 were not covered by tests
return getWalletInfo(id, true);
},
retry: false,
Expand Down
13 changes: 10 additions & 3 deletions packages/thirdweb/src/react/core/utils/walletIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,15 @@
/**
* @internal Exported for tests only
*/
export async function fetchWalletImage(props: {
id: WalletId;
}) {
export async function fetchWalletImage(props: { id: WalletId }) {
const { getInstalledWalletProviders } = await import(
Copy link
Member

@jnsdls jnsdls Apr 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the async import here? this will ALWAYS be hit when the function is called (not in an optional branch) so it would be more efficient to have it as part of the main bundle regardless

Copy link
Member Author

@joaquim-verges joaquim-verges Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because this is core, which is imported by react native and i rather not trigger this import unless i import that function if im just grabbing an icon const

"../../../wallets/injected/mipdStore.js"
);
const mipdImage = getInstalledWalletProviders().find(
(x) => x.info.rdns === props.id,
)?.info.icon;
if (mipdImage) {
return mipdImage;
}

Check warning on line 141 in packages/thirdweb/src/react/core/utils/walletIcon.ts

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/core/utils/walletIcon.ts#L140-L141 

Added lines #L140 - L141 were not covered by tests
return getWalletInfo(props.id, true);
}
Loading