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

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