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 2 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
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 @@ function AllWalletsUI(props: {
>
{walletInfosToShow.map((walletInfo, i) => {
const isLast = i === walletInfosToShow.length - 1;
const wallet = createWallet(walletInfo.id);

return (
<li
Expand All @@ -140,9 +141,8 @@ function AllWalletsUI(props: {
}}
>
<WalletEntryButton
walletId={walletInfo.id}
wallet={wallet}
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 @@ import {
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 @@ import type { ConnectLocale } from "./locale/types.js";
* @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;
const isRecommended = props.recommendedWallets?.find(
(w) => w.id === walletId,
);
Expand All @@ -45,23 +47,39 @@ export function WalletEntryButton(props: {
(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;

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}`}
/>
) : (
<WalletImage id={walletId} size={iconSize.xl} client={props.client} />
)}

<Container flex="column" gap="xxs" expand>
{walletName ? (
{nameOverride ? (
<Text color="primaryText" weight={600}>
{walletName}
{nameOverride}
</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 WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
);

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

Expand Down Expand Up @@ -640,7 +637,7 @@ const WalletSelection: React.FC<{
</Suspense>
) : (
<WalletEntryButton
walletId={wallet.id}
wallet={wallet}
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

@joaquim-verges joaquim-verges Apr 25, 2025

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

@joaquim-verges joaquim-verges Apr 26, 2025

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