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

Co-authored-by: Joaquim Verges <[email protected]>

Author: mmahdigh

.changeset/fuzzy-paws-fix.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/wagmi-adapter": patch
+---
+
+Respect inAppWallet metadata props

.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

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 (
                   <li
@@ -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({});

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,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,
   );
@@ -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 ? (

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

@@ -218,9 +218,6 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
   );
 
   const handleSelect = async (wallet: Wallet) => {
-    // if (connectionStatus !== "disconnected") {
-    //   await disconnect();
-    // }
     props.selectWallet(wallet);
   };
 
@@ -640,7 +637,7 @@ const WalletSelection: React.FC<{
               </Suspense>
             ) : (
               <WalletEntryButton
-                walletId={wallet.id}
+                wallet={wallet}
                 selectWallet={() => {
                   if (!props.diableSelectionDataReset) {
                     setSelectionData({});

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx

@@ -41,7 +41,7 @@ function InAppWalletSelectionUI(props: {
   ) {
     return (
       <WalletEntryButton
-        walletId={props.wallet.id}
+        wallet={props.wallet}
         selectWallet={() => {
           setData({});
           props.select();

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;

packages/wagmi-adapter/src/connector.ts

@@ -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