Skip to content

[SDK] Fix: Add custom title & icon to wagmi connectors #6858

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 3 commits into from
Apr 26, 2025
Merged

[SDK] Fix: Add custom title & icon to wagmi connectors #6858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0740eb3
Add custom title & icon to wagmi connectors
mmahdigh Apr 25, 2025
f032cc8
add icon metadata prop, apply in connect modal
joaquim-verges Apr 26, 2025
9a0199f
changeset
joaquim-verges Apr 26, 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/fuzzy-paws-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@thirdweb-dev/wagmi-adapter": patch
---

Respect inAppWallet metadata props
5 changes: 5 additions & 0 deletions .changeset/solid-numbers-return.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---

Add name and icon to inAppWallet metadata props to customize in-app wallets inside the connect modal
4 changes: 2 additions & 2 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@
>
{walletInfosToShow.map((walletInfo, i) => {
const isLast = i === walletInfosToShow.length - 1;
const wallet = createWallet(walletInfo.id);

Check warning on line 133 in packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx#L133 

Added line #L133 was not covered by tests

return (
<li
Expand All @@ -140,9 +141,8 @@
}}
>
<WalletEntryButton
walletId={walletInfo.id}
wallet={wallet}

Check warning on line 144 in packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx#L144 

Added line #L144 was not covered by tests
selectWallet={() => {
const wallet = createWallet(walletInfo.id);
props.onSelect(wallet);
if (!props.disableSelectionDataReset) {
setSelectionData({});
Expand Down
32 changes: 25 additions & 7 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
"use client";
import type { ThirdwebClient } from "../../../../client/client.js";
import type { InAppWalletCreationOptions } from "../../../../wallets/in-app/core/wallet/types.js";
import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
import type { WalletId } from "../../../../wallets/wallet-types.js";
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
import {
fontSize,
Expand All @@ -11,6 +11,7 @@
spacing,
} from "../../../core/design-system/index.js";
import { useWalletInfo } from "../../../core/utils/wallet.js";
import { Img } from "../components/Img.js";
import { Skeleton } from "../components/Skeleton.js";
import { WalletImage } from "../components/WalletImage.js";
import { Container } from "../components/basic.js";
Expand All @@ -22,15 +23,16 @@
* @internal
*/
export function WalletEntryButton(props: {
walletId: WalletId;
wallet: Wallet;
selectWallet: () => void;
connectLocale: ConnectLocale;
recommendedWallets: Wallet[] | undefined;
client: ThirdwebClient;
isActive: boolean;
badge: string | undefined;
}) {
const { walletId, selectWallet } = props;
const { selectWallet, wallet } = props;
const walletId = wallet.id;

Check warning on line 35 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx#L34-L35 

Added lines #L34 - L35 were not covered by tests
const isRecommended = props.recommendedWallets?.find(
(w) => w.id === walletId,
);
Expand All @@ -45,23 +47,39 @@
(p) => p.info.rdns === walletId,
);

const customMeta =
wallet && walletId === "inApp"
? (wallet.getConfig() as InAppWalletCreationOptions)?.metadata
: undefined;
const nameOverride = customMeta?.name || walletName;
const iconOverride = customMeta?.icon;

Check warning on line 55 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx#L50-L55 

Added lines #L50 - L55 were not covered by tests

return (
<WalletButtonEl
type="button"
onClick={selectWallet}
data-active={props.isActive}
>
<WalletImage id={walletId} size={iconSize.xl} client={props.client} />
{iconOverride ? (
<Img
client={props.client}
src={iconOverride}
alt={nameOverride}
width={`${iconSize.xl}`}
height={`${iconSize.xl}`}
/>

Check warning on line 70 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx#L63-L70 

Added lines #L63 - L70 were not covered by tests
) : (
<WalletImage id={walletId} size={iconSize.xl} client={props.client} />

Check warning on line 72 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx#L72 

Added line #L72 was not covered by tests
)}

<Container flex="column" gap="xxs" expand>
{walletName ? (
{nameOverride ? (

Check warning on line 76 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx#L76 

Added line #L76 was not covered by tests
<Text color="primaryText" weight={600}>
{walletName}
{nameOverride}

Check warning on line 78 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx#L78 

Added line #L78 was not covered by tests
</Text>
) : (
<Skeleton width="100px" height={fontSize.md} />
)}

{props.badge ? (
<Text size="sm">{props.badge}</Text>
) : isRecommended ? (
Expand Down
5 changes: 1 addition & 4 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,9 +218,6 @@
);

const handleSelect = async (wallet: Wallet) => {
// if (connectionStatus !== "disconnected") {
// await disconnect();
// }
props.selectWallet(wallet);
};

Expand Down Expand Up @@ -640,7 +637,7 @@
</Suspense>
) : (
<WalletEntryButton
walletId={wallet.id}
wallet={wallet}

Check warning on line 640 in packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx#L640 

Added line #L640 was not covered by tests
selectWallet={() => {
if (!props.diableSelectionDataReset) {
setSelectionData({});
Expand Down
2 changes: 1 addition & 1 deletion packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function InAppWalletSelectionUI(props: {
) {
return (
<WalletEntryButton
walletId={props.wallet.id}
wallet={props.wallet}
selectWallet={() => {
setData({});
props.select();
Expand Down
2 changes: 2 additions & 0 deletions packages/thirdweb/src/wallets/in-app/core/wallet/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ export type InAppWalletCreationOptions =
* Metadata to display in the Connect Modal
*/
metadata?: {
name?: string;
Copy link
Member

Choose a reason for hiding this comment

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

Nice!

This is actually useful for our own connect modal too.

Could replace the "social login" default name that we show in the wide modal.

As for the icon, can you actually add a separate prop for it instead of overloading image?

So name / icon / image.

That way we can also use it in the connect modal to let you replace the icon separately to the image that shows above the sign in options.

Copy link
Member

Choose a reason for hiding this comment

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

did it for you :) merging shortly

icon?: string;
image?: {
src: string;
width?: number;
Expand Down
3 changes: 2 additions & 1 deletion packages/wagmi-adapter/src/connector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,9 @@ export function inAppWalletConnector(
const client = args.client;
return createConnector<Provider, Properties, StorageItem>((config) => ({
id: "in-app-wallet",
name: "In-App wallet",
name: args.metadata?.name || "In-App wallet",
type: "in-app",
icon: args.metadata?.icon,
connect: async (params) => {
const rawStorage =
typeof window !== "undefined" && window.localStorage
Expand Down
Loading