From 304e4e5be860e4989abf0493cb737f46e050a697 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 19 Dec 2025 19:29:48 +0000
Subject: [PATCH] [MNY-348] SDK: Remove in-app wallet from default wallet list
 for bridge widgets (#8579)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing wallet integration in bridge components by introducing custom wallet options and modifying default wallet selections for various widgets.

### Detailed summary
- Removed in-app wallet from default wallet list for bridge widgets.
- Added `CustomWallets` component in `BuyWidget.stories.tsx` and `SwapWidget.stories.tsx`.
- Implemented `getDefaultWalletsForBridgeComponents` to return a list of wallets.
- Updated `FundWallet`, `SwapUI`, and `TransactionPayment` components to use custom wallet options.
- Introduced new wallet options in `TransactionWidget.stories.tsx`.
- Added `CustomWallets` functionality in `BridgeWidget` stories.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .changeset/plain-maps-care.md                 |  5 +
 .../src/react/web/ui/Bridge/FundWallet.tsx    |  8 ++
 .../web/ui/Bridge/TransactionPayment.tsx      |  8 ++
 .../web/ui/Bridge/swap-widget/swap-ui.tsx     |  8 ++
 .../BridgeWidget/bridge-widget.stories.tsx    | 98 +++++++++++++++++++
 .../Bridge/Swap/SwapWidget.stories.tsx        | 14 +++
 .../Transaction/TransactionWidget.stories.tsx | 10 ++
 .../src/stories/BuyWidget.stories.tsx         | 12 +++
 .../thirdweb/src/wallets/defaultWallets.ts    | 22 +++++
 9 files changed, 185 insertions(+)
 create mode 100644 .changeset/plain-maps-care.md
 create mode 100644 packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx

diff --git a/.changeset/plain-maps-care.md b/.changeset/plain-maps-care.md
new file mode 100644
index 00000000000..b6884215e2c
--- /dev/null
+++ b/.changeset/plain-maps-care.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Remove in-app wallet from default wallet list for bridge widgets"
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
index 49ab3176391..b0c133a0619 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
@@ -15,6 +15,7 @@ import {
   isAddress,
   shortenAddress,
 } from "../../../../utils/address.js";
+import { getDefaultWalletsForBridgeComponents } from "../../../../wallets/defaultWallets.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -299,6 +300,13 @@ export function FundWallet(props: FundWalletProps) {
           theme={theme}
           {...props.connectOptions}
           autoConnect={false}
+          wallets={
+            props.connectOptions?.wallets ||
+            getDefaultWalletsForBridgeComponents({
+              appMetadata: props.connectOptions?.appMetadata,
+              chains: props.connectOptions?.chains,
+            })
+          }
         />
       ) : (
         <Button
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
index 9cca1234a8f..ee3239b4d18 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
@@ -11,6 +11,7 @@ import {
   shortenAddress,
 } from "../../../../utils/address.js";
 import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
+import { getDefaultWalletsForBridgeComponents } from "../../../../wallets/defaultWallets.js";
 import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -445,6 +446,13 @@ export function TransactionPayment({
           }}
           theme={theme}
           {...connectOptions}
+          wallets={
+            connectOptions?.wallets ||
+            getDefaultWalletsForBridgeComponents({
+              appMetadata: connectOptions?.appMetadata,
+              chains: connectOptions?.chains,
+            })
+          }
         />
       )}
 
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
index 2e5bdf460d8..81f48aee741 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -11,6 +11,7 @@ import { getToken } from "../../../../../pay/convert/get-token.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { getAddress } from "../../../../../utils/address.js";
 import { toTokens, toUnits } from "../../../../../utils/units.js";
+import { getDefaultWalletsForBridgeComponents } from "../../../../../wallets/defaultWallets.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -456,6 +457,13 @@ export function SwapUI(props: SwapUIProps) {
           }}
           theme={props.theme}
           {...props.connectOptions}
+          wallets={
+            props.connectOptions?.wallets ||
+            getDefaultWalletsForBridgeComponents({
+              appMetadata: props.connectOptions?.appMetadata,
+              chains: props.connectOptions?.chains,
+            })
+          }
         />
       ) : (
         <Button
diff --git a/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx b/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx
new file mode 100644
index 00000000000..50e4ca01040
--- /dev/null
+++ b/packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta } from "@storybook/react";
+import { lightTheme } from "../../../react/core/design-system/index.js";
+import {
+  BridgeWidget,
+  type BridgeWidgetProps,
+} from "../../../react/web/ui/Bridge/bridge-widget/bridge-widget.js";
+import { createWallet } from "../../../wallets/create-wallet.js";
+import { storyClient } from "../../utils.js";
+
+const meta: Meta<typeof BridgeWidget> = {
+  title: "Bridge/BridgeWidget",
+};
+export default meta;
+
+export function BasicUsage() {
+  return (
+    <Variant client={storyClient} buy={{ chainId: 8453, amount: "0.1" }} />
+  );
+}
+
+export function CurrencySet() {
+  return (
+    <Variant
+      client={storyClient}
+      currency="JPY"
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function NoThirdwebBranding() {
+  return (
+    <Variant
+      client={storyClient}
+      theme="light"
+      buy={{ chainId: 8453, amount: "0.1" }}
+      showThirdwebBranding={false}
+    />
+  );
+}
+
+export function CustomTheme() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <BridgeWidget
+        client={storyClient}
+        currency="JPY"
+        buy={{ chainId: 8453, amount: "0.1" }}
+        showThirdwebBranding={false}
+        theme={lightTheme({
+          colors: {
+            modalBg: "#FFFFF0",
+            tertiaryBg: "#DBE4C9",
+            borderColor: "#8AA624",
+            secondaryText: "#3E3F29",
+            accentText: "#E43636",
+          },
+        })}
+      />
+    </div>
+  );
+}
+
+export function CustomWallets() {
+  return (
+    <Variant
+      client={storyClient}
+      currency="JPY"
+      buy={{ chainId: 8453, amount: "0.1" }}
+      connectOptions={{
+        wallets: [createWallet("io.metamask"), createWallet("me.rainbow")],
+      }}
+    />
+  );
+}
+
+function Variant(props: BridgeWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <BridgeWidget {...props} theme="dark" />
+      <BridgeWidget {...props} theme="light" />
+    </div>
+  );
+}
diff --git a/packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx b/packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx
index d8726b05cbb..bfefee81f61 100644
--- a/packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx
+++ b/packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx
@@ -4,6 +4,7 @@ import {
   SwapWidget,
   type SwapWidgetProps,
 } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import { createWallet } from "../../../wallets/create-wallet.js";
 import { storyClient } from "../../utils.js";
 
 const meta: Meta<typeof SwapWidget> = {
@@ -66,6 +67,19 @@ export function CustomTheme() {
   );
 }
 
+export function CustomWallets() {
+  return (
+    <Variant
+      client={storyClient}
+      currency="JPY"
+      persistTokenSelections={false}
+      connectOptions={{
+        wallets: [createWallet("io.metamask"), createWallet("me.rainbow")],
+      }}
+    />
+  );
+}
+
 function Variant(props: SwapWidgetProps) {
   return (
     <div
diff --git a/packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx b/packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx
index 3492abc7dd2..ae6ff80a061 100644
--- a/packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx
+++ b/packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx
@@ -3,6 +3,7 @@ import {
   TransactionWidget,
   type TransactionWidgetProps,
 } from "../../../react/web/ui/Bridge/TransactionWidget.js";
+import { createWallet } from "../../../wallets/create-wallet.js";
 import { storyClient } from "../../utils.js";
 import { TRANSACTION_UI_OPTIONS } from "../fixtures.js";
 
@@ -28,6 +29,15 @@ export const EthereumTransfer: Story = {
   },
 };
 
+export const EthereumTransferCustomWallets: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.ethTransfer,
+    connectOptions: {
+      wallets: [createWallet("io.metamask"), createWallet("me.rainbow")],
+    },
+  },
+};
+
 export const ERC20TokenTransfer: Story = {
   args: {
     ...TRANSACTION_UI_OPTIONS.erc20Transfer,
diff --git a/packages/thirdweb/src/stories/BuyWidget.stories.tsx b/packages/thirdweb/src/stories/BuyWidget.stories.tsx
index 1ea55b81768..e686ea8d701 100644
--- a/packages/thirdweb/src/stories/BuyWidget.stories.tsx
+++ b/packages/thirdweb/src/stories/BuyWidget.stories.tsx
@@ -6,6 +6,7 @@ import {
   BuyWidget,
   type BuyWidgetProps,
 } from "../react/web/ui/Bridge/BuyWidget.js";
+import { createWallet } from "../wallets/create-wallet.js";
 import { storyClient } from "./utils.js";
 
 const meta = {
@@ -152,6 +153,17 @@ export function NoAutoConnect() {
   );
 }
 
+export function CustomWallets() {
+  return (
+    <Variant
+      client={storyClient}
+      connectOptions={{
+        wallets: [createWallet("io.metamask"), createWallet("me.rainbow")],
+      }}
+    />
+  );
+}
+
 function Variant(props: BuyWidgetProps) {
   return (
     <div
diff --git a/packages/thirdweb/src/wallets/defaultWallets.ts b/packages/thirdweb/src/wallets/defaultWallets.ts
index 45dfa4c1d9c..fe5172a1b09 100644
--- a/packages/thirdweb/src/wallets/defaultWallets.ts
+++ b/packages/thirdweb/src/wallets/defaultWallets.ts
@@ -25,5 +25,27 @@ export function getDefaultWallets(options?: {
     createWallet(RAINBOW),
     createWallet("io.rabby"),
     createWallet(ZERION),
+    createWallet("com.okex.wallet"),
+  ];
+}
+
+/**
+ * @internal
+ */
+export function getDefaultWalletsForBridgeComponents(options?: {
+  appMetadata?: AppMetadata;
+  chains?: Chain[];
+  executionMode?: ExecutionModeOptions;
+}): Wallet[] {
+  return [
+    createWallet(METAMASK),
+    createWallet(COINBASE, {
+      appMetadata: options?.appMetadata,
+      chains: options?.chains,
+    }),
+    createWallet(RAINBOW),
+    createWallet("io.rabby"),
+    createWallet(ZERION),
+    createWallet("com.okex.wallet"),
   ];
 }