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 ? (
+
+ ) : (
+
+ )}
- {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