thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/src/stories/TokenBalanceRow.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Token } from "../bridge/index.js";
+import { ethereum } from "../chains/chain-definitions/ethereum.js";
+import type { Chain } from "../chains/types.js";
+import type { ThirdwebClient } from "../client/client.js";
+import { CustomThemeProvider } from "../react/core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../react/core/design-system/index.js";
+import { TokenBalanceRow } from "../react/web/ui/Bridge/common/TokenBalanceRow.js";
+import { ETH, UNI, USDC } from "./Bridge/fixtures.js";
+import { storyClient } from "./utils.js";
+
+// Props interface for the wrapper component
+interface TokenBalanceRowWithThemeProps {
+  client: ThirdwebClient;
+  token: Token;
+  chain: Chain;
+  amount: string;
+  onClick: (token: Token) => void;
+  style?: React.CSSProperties;
+  theme: "light" | "dark" | Theme;
+}
+
+const dummyBalanceETH: string = "1.2345";
+
+const dummyBalanceUSDC: string = "1234.56";
+
+const dummyBalanceLowUNI: string = "0.0012";
+
+// Wrapper component to provide theme context
+const TokenBalanceRowWithTheme = (props: TokenBalanceRowWithThemeProps) => {
+  const { theme, ...tokenBalanceRowProps } = props;
+  return (
+    <CustomThemeProvider theme={theme}>
+      <TokenBalanceRow {...tokenBalanceRowProps} />
+    </CustomThemeProvider>
+  );
+};
+
+const meta = {
+  title: "Bridge/TokenBalanceRow",
+  component: TokenBalanceRowWithTheme,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A row component that displays token balance information including token icon, symbol, chain, balance amount and fiat value. Used in bridge interfaces for token selection.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    client: storyClient,
+    token: ETH,
+    chain: ethereum,
+    amount: dummyBalanceETH,
+    onClick: (_token: Token) => {},
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    onClick: {
+      action: "clicked",
+      description: "Callback function when token row is clicked",
+    },
+  },
+} satisfies Meta<typeof TokenBalanceRowWithTheme>;
+
+type Story = StoryObj<typeof meta>;
+
+export const TokenList: Story = {
+  render: (args) => (
+    <CustomThemeProvider theme={args.theme}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          minWidth: "400px",
+          maxWidth: "500px",
+        }}
+      >
+        <TokenBalanceRow
+          client={args.client}
+          token={ETH}
+          amount={dummyBalanceETH}
+          onClick={args.onClick}
+        />
+        <TokenBalanceRow
+          client={args.client}
+          token={ETH}
+          amount={dummyBalanceETH}
+          onClick={args.onClick}
+        />
+        <TokenBalanceRow
+          client={args.client}
+          token={USDC}
+          amount={dummyBalanceUSDC}
+          onClick={args.onClick}
+        />
+        <TokenBalanceRow
+          client={args.client}
+          token={UNI}
+          amount={dummyBalanceLowUNI}
+          onClick={args.onClick}
+        />
+      </div>
+    </CustomThemeProvider>
+  ),
+  args: {
+    theme: "light",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const DarkTokenList: Story = {
+  render: (args) => (
+    <CustomThemeProvider theme={args.theme}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          minWidth: "400px",
+          maxWidth: "500px",
+        }}
+      >
+        <TokenBalanceRow
+          client={args.client}
+          token={ETH}
+          amount={dummyBalanceETH}
+          onClick={args.onClick}
+        />
+        <TokenBalanceRow
+          client={args.client}
+          token={ETH}
+          amount={dummyBalanceETH}
+          onClick={args.onClick}
+        />
+        <TokenBalanceRow
+          client={args.client}
+          token={USDC}
+          amount={dummyBalanceUSDC}
+          onClick={args.onClick}
+        />
+        <TokenBalanceRow
+          client={args.client}
+          token={UNI}
+          amount={dummyBalanceLowUNI}
+          onClick={args.onClick}
+        />
+      </div>
+    </CustomThemeProvider>
+  ),
+  args: {
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export default meta;

package/src/stories/WalletRow.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ThirdwebClient } from "../client/client.js";
+import { CustomThemeProvider } from "../react/core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../react/core/design-system/index.js";
+import { WalletRow } from "../react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.js";
+import { storyClient } from "./utils.js";
+
+// Props interface for the wrapper component
+interface WalletRowWithThemeProps {
+  client: ThirdwebClient;
+  address: string;
+  iconSize?: "xs" | "sm" | "md" | "lg" | "xl";
+  textSize?: "xs" | "sm" | "md" | "lg" | "xl";
+  label?: string;
+  theme: "light" | "dark" | Theme;
+}
+
+// Wrapper component to provide theme context
+const WalletRowWithTheme = (props: WalletRowWithThemeProps) => {
+  const { theme, ...walletRowProps } = props;
+  return (
+    <CustomThemeProvider theme={theme}>
+      <WalletRow {...walletRowProps} />
+    </CustomThemeProvider>
+  );
+};
+
+const meta = {
+  title: "Connect/WalletRow",
+  component: WalletRowWithTheme,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A reusable component that displays wallet information including address, wallet type, and optional ENS name or email.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    client: storyClient,
+    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", // Vitalik's address for ENS demo
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    iconSize: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Size of the wallet icon",
+    },
+    textSize: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Size of the main address text",
+    },
+    label: {
+      control: "text",
+      description: "Optional label to display above the address",
+    },
+    address: {
+      control: "text",
+      description: "Wallet address to display",
+    },
+  },
+} satisfies Meta<typeof WalletRowWithTheme>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+  args: {
+    theme: "light",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    theme: "dark",
+    label: "Recipient Wallet",
+    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    theme: "light",
+    iconSize: "lg",
+    textSize: "md",
+    label: "Primary Wallet",
+    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    theme: "dark",
+    iconSize: "sm",
+    textSize: "xs",
+    address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const DifferentAddresses: Story = {
+  render: (args) => (
+    <CustomThemeProvider theme={args.theme}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          minWidth: "300px",
+        }}
+      >
+        <WalletRow
+          client={args.client}
+          address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
+          label="ENS Example (vitalik.eth)"
+        />
+        <WalletRow
+          client={args.client}
+          address="0x4fA9230f4E8978462cE7Bf8e6b5a2588da5F4264"
+          label="Regular Address"
+        />
+        <WalletRow
+          client={args.client}
+          address="0x4fA9230f4E8978462cE7Bf8e6b5a2588da5F4264"
+          label="Short Address"
+        />
+      </div>
+    </CustomThemeProvider>
+  ),
+  args: {
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export default meta;

package/src/stories/utils.tsx

@@ -1,4 +1,10 @@
 import { createThirdwebClient } from "../client/client.js";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../react/core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../react/core/design-system/index.js";
+import { radius } from "../react/native/design-system/index.js";
 
 const clientId = process.env.STORYBOOK_CLIENT_ID;
 
@@ -9,3 +15,32 @@ if (!clientId) {
 export const storyClient = createThirdwebClient({
   clientId: clientId,
 });
+
+export const ModalThemeWrapper = (props: {
+  children: React.ReactNode;
+  theme: "light" | "dark" | Theme;
+}) => {
+  const { theme } = props;
+  return (
+    <CustomThemeProvider theme={theme}>
+      <ModalWrapper>{props.children}</ModalWrapper>
+    </CustomThemeProvider>
+  );
+};
+
+const ModalWrapper = (props: { children: React.ReactNode }) => {
+  const theme = useCustomTheme();
+  return (
+    <div
+      style={{
+        width: 400,
+        margin: "16px auto",
+        backgroundColor: theme.colors.modalBg,
+        borderRadius: radius.md,
+        boxShadow: `0 0 0 1px ${theme.colors.borderColor}`,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426";
+export const version = "5.103.0";

package/src/wallets/connection/autoConnectCore.test.ts

@@ -90,59 +90,6 @@ describe("useAutoConnectCore", () => {
     ).toBe(false);
   });
 
-  it("should call onTimeout on ... timeout", async () => {
-    vi.mocked(getUrlToken).mockReturnValue({});
-
-    const wallet = createWalletAdapter({
-      adaptedAccount: TEST_ACCOUNT_A,
-      client: TEST_CLIENT,
-      chain: ethereum,
-      onDisconnect: () => {},
-      switchChain: () => {},
-    });
-    mockStorage.setItem("thirdweb:active-wallet-id", wallet.id);
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const infoSpy = vi.spyOn(console, "info").mockImplementation(() => {});
-    // Purposefully mock the wallet.autoConnect method to test the timeout logic
-    wallet.autoConnect = () =>
-      new Promise((resolve) => {
-        setTimeout(() => {
-          // @ts-ignore Mock purpose
-          resolve("Connection successful");
-        }, 2100);
-      });
-
-    await autoConnectCore({
-      force: true,
-      storage: mockStorage,
-      props: {
-        wallets: [wallet],
-        client: TEST_CLIENT,
-        onTimeout: () => console.info("TIMEOUTTED"),
-        timeout: 0,
-      },
-      createWalletFn: (id: WalletId) =>
-        createWalletAdapter({
-          adaptedAccount: TEST_ACCOUNT_A,
-          client: TEST_CLIENT,
-          chain: ethereum,
-          onDisconnect: () => {
-            console.warn(id);
-          },
-          switchChain: () => {},
-        }),
-      manager,
-    });
-
-    expect(warnSpy).toHaveBeenCalled();
-    expect(warnSpy).toHaveBeenCalledWith(
-      "AutoConnect timeout: 0ms limit exceeded.",
-    );
-    expect(infoSpy).toHaveBeenCalled();
-    expect(infoSpy).toHaveBeenCalledWith("TIMEOUTTED");
-    warnSpy.mockRestore();
-  });
-
   it("should handle auth cookie storage correctly", async () => {
     const mockAuthCookie = "mock-auth-cookie";
     const wallet = createWalletAdapter({