diff --git a/.changeset/fuzzy-paws-fix.md b/.changeset/fuzzy-paws-fix.md new file mode 100644 index 00000000000..3d5ccf781f2 --- /dev/null +++ b/.changeset/fuzzy-paws-fix.md @@ -0,0 +1,5 @@ +--- +"@thirdweb-dev/wagmi-adapter": patch +--- + +Respect inAppWallet metadata props diff --git a/.changeset/solid-numbers-return.md b/.changeset/solid-numbers-return.md new file mode 100644 index 00000000000..ce4686a8d44 --- /dev/null +++ b/.changeset/solid-numbers-return.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Add name and icon to inAppWallet metadata props to customize in-app wallets inside the connect modal diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx index a7f82da0bed..10dc8c848c7 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx @@ -130,6 +130,7 @@ function AllWalletsUI(props: { > {walletInfosToShow.map((walletInfo, i) => { const isLast = i === walletInfosToShow.length - 1; + const wallet = createWallet(walletInfo.id); return (
  • { - const wallet = createWallet(walletInfo.id); props.onSelect(wallet); if (!props.disableSelectionDataReset) { setSelectionData({}); diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx index 8a551006f67..38c4e54aac3 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx @@ -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, @@ -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"; @@ -22,7 +23,7 @@ import type { ConnectLocale } from "./locale/types.js"; * @internal */ export function WalletEntryButton(props: { - walletId: WalletId; + wallet: Wallet; selectWallet: () => void; connectLocale: ConnectLocale; recommendedWallets: Wallet[] | undefined; @@ -30,7 +31,8 @@ export function WalletEntryButton(props: { 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, ); @@ -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 ( - + {iconOverride ? ( + {nameOverride} + ) : ( + + )} - {walletName ? ( + {nameOverride ? ( - {walletName} + {nameOverride} ) : ( )} - {props.badge ? ( {props.badge} ) : isRecommended ? ( diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx index 38dae050211..e0c485c69c7 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx @@ -218,9 +218,6 @@ const WalletSelectorInner: React.FC = (props) => { ); const handleSelect = async (wallet: Wallet) => { - // if (connectionStatus !== "disconnected") { - // await disconnect(); - // } props.selectWallet(wallet); }; @@ -640,7 +637,7 @@ const WalletSelection: React.FC<{ ) : ( { if (!props.diableSelectionDataReset) { setSelectionData({}); diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx index 966cf6814fd..363ea06630b 100644 --- a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx +++ b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx @@ -41,7 +41,7 @@ function InAppWalletSelectionUI(props: { ) { return ( { setData({}); props.select(); diff --git a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts b/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts index f46e767d3c7..1f9d560e218 100644 --- a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts +++ b/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts @@ -69,6 +69,8 @@ export type InAppWalletCreationOptions = * Metadata to display in the Connect Modal */ metadata?: { + name?: string; + icon?: string; image?: { src: string; width?: number; diff --git a/packages/wagmi-adapter/src/connector.ts b/packages/wagmi-adapter/src/connector.ts index cee0dea7ed5..61e2ed2693b 100644 --- a/packages/wagmi-adapter/src/connector.ts +++ b/packages/wagmi-adapter/src/connector.ts @@ -94,8 +94,9 @@ export function inAppWalletConnector( const client = args.client; return createConnector((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