[MNY-348] SDK: Remove in-app wallet from default wallet list for bridge widgets (#8579)

<!--

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

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Remove in-app wallet from default wallet list for bridge widgets"

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

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,
+            })
+          }
         />
       )}
 

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

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>
+  );
+}

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

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,

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

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"),
   ];
 }