thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/src/react/web/ui/components/ChainName.tsx

@@ -11,14 +11,16 @@ import { Text } from "./text.js";
 export const ChainName: React.FC<{
   chain: Chain;
   size: "xs" | "sm" | "md" | "lg";
+  color?: "primaryText" | "secondaryText";
   client: ThirdwebClient;
   short?: boolean;
+  style?: React.CSSProperties;
 }> = (props) => {
   const { name } = useChainName(props.chain);
 
   if (name) {
     return (
-      <Text size={props.size}>
+      <Text size={props.size} color={props.color} style={props.style}>
         {props.short ? shorterChainName(name) : name}
       </Text>
     );
@@ -27,7 +29,7 @@ export const ChainName: React.FC<{
   return <Skeleton width="50px" height={fontSize[props.size]} />;
 };
 
-function shorterChainName(name: string) {
+export function shorterChainName(name: string) {
   const split = name.split(" ");
   const wordsToRemove = new Set(["mainnet", "testnet", "chain"]);
   return split

package/src/react/web/ui/components/TokenIcon.tsx

@@ -4,7 +4,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { iconSize } from "../../../core/design-system/index.js";
-import { useChainIconUrl } from "../../../core/hooks/others/useChainQuery.js";
+import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { genericTokenIcon } from "../../../core/utils/walletIcon.js";
 import { CoinsIcon } from "../ConnectWallet/icons/CoinsIcon.js";
 import {
@@ -27,17 +27,20 @@ export function TokenIcon(props: {
   size: keyof typeof iconSize;
   client: ThirdwebClient;
 }) {
-  const chainIconQuery = useChainIconUrl(props.chain);
+  const chainMeta = useChainMetadata(props.chain).data;
 
   const tokenImage = useMemo(() => {
     if (
       isNativeToken(props.token) ||
       props.token.address === NATIVE_TOKEN_ADDRESS
     ) {
-      return chainIconQuery.url;
+      if (chainMeta?.nativeCurrency.symbol === "ETH") {
+        return "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/ethereum/512.png"; // ETH icon
+      }
+      return chainMeta?.icon?.url;
     }
     return props.token.icon;
-  }, [props.token, chainIconQuery.url]);
+  }, [props.token, chainMeta?.icon?.url, chainMeta?.nativeCurrency.symbol]);
 
   return tokenImage ? (
     <Img

package/src/react/web/ui/components/buttons.tsx

@@ -93,7 +93,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
           border: `1px solid ${theme.colors.borderColor}`,
           "&:hover": {
             borderColor: theme.colors.accentText,
-            transform: "scale(1.01)",
           },
           '&[aria-selected="true"]': {
             borderColor: theme.colors.accentText,
@@ -106,7 +105,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
           border: "1px solid transparent",
           "&:hover": {
             borderColor: theme.colors.accentText,
-            transform: "scale(1.01)",
           },
         };
       }
@@ -114,7 +112,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
       if (props.variant === "accent") {
         return {
           "&:hover": {
-            transform: "scale(1.01)",
+            opacity: 0.8,
           },
         };
       }
@@ -123,7 +121,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
         return {
           "&:hover": {
             background: theme.colors.secondaryButtonHoverBg,
-            transform: "scale(1.01)",
           },
         };
       }
@@ -133,7 +130,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
           padding: 0,
           "&:hover": {
             color: theme.colors.primaryText,
-            transform: "scale(1.01)",
           },
         };
       }

package/src/stories/Bridge/BridgeOrchestrator.stories.tsx

@@ -0,0 +1,267 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {} from "../../react/core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../../react/core/design-system/index.js";
+import {
+  BridgeOrchestrator,
+  type BridgeOrchestratorProps,
+} from "../../react/web/ui/Bridge/BridgeOrchestrator.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
+import {
+  DIRECT_PAYMENT_UI_OPTIONS,
+  FUND_WALLET_UI_OPTIONS,
+  TRANSACTION_UI_OPTIONS,
+} from "./fixtures.js";
+
+/**
+ * BridgeOrchestrator is the main orchestrator component for the Bridge payment flow.
+ * It manages the complete state machine navigation between different screens and
+ * handles the coordination of payment methods, routes, and execution.
+ */
+
+// Props interface for the wrapper component
+interface BridgeOrchestratorWithThemeProps extends BridgeOrchestratorProps {
+  theme: "light" | "dark" | Theme;
+}
+
+// Wrapper component to provide theme context
+const BridgeOrchestratorWithTheme = (
+  props: BridgeOrchestratorWithThemeProps,
+) => {
+  const { theme, ...componentProps } = props;
+  return (
+    <ModalThemeWrapper theme={theme}>
+      <BridgeOrchestrator {...componentProps} />
+    </ModalThemeWrapper>
+  );
+};
+
+const meta = {
+  title: "Bridge/BridgeOrchestrator",
+  component: BridgeOrchestratorWithTheme,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "**BridgeOrchestrator** is the main orchestrator component that manages the complete Bridge payment flow using XState FSM.\n\n" +
+          "## Features\n" +
+          "- **State Machine Navigation**: Uses XState v5 for predictable state transitions\n" +
+          "- **Payment Method Selection**: Supports wallet and fiat payment methods\n" +
+          "- **Route Preview**: Shows detailed transaction steps and fees\n" +
+          "- **Step Execution**: Real-time progress tracking\n" +
+          "- **Error Handling**: Comprehensive error states with retry functionality\n" +
+          "- **Theme Support**: Works with both light and dark themes\n\n" +
+          "## State Flow\n" +
+          "1. **Resolve Requirements** → 2. **Method Selection** → 3. **Quote** → 4. **Preview** → 5. **Prepare** → 6. **Execute** → 7. **Success**\n\n" +
+          "Each state can transition to the **Error** state, which provides retry functionality.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    client: storyClient,
+    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+    onComplete: () => {},
+    onError: (error) => console.error("Bridge error:", error),
+    onCancel: () => {},
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    presetOptions: {
+      control: "object",
+      description: "Quick buy options",
+    },
+    onComplete: { action: "flow completed" },
+    onError: { action: "error occurred" },
+    onCancel: { action: "flow cancelled" },
+  },
+} satisfies Meta<typeof BridgeOrchestratorWithTheme>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default BridgeOrchestrator in light theme.
+ */
+export const Light: Story = {
+  args: {
+    theme: "light",
+    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+    presetOptions: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+/**
+ * BridgeOrchestrator in dark theme.
+ */
+export const Dark: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+    presetOptions: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+/**
+ * Direct payment mode for purchasing a specific product/service.
+ */
+export const DirectPayment: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+    presetOptions: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Direct payment mode shows a product purchase interface with the item image, price, seller address, and network information. The user can connect their wallet and proceed with the payment.",
+      },
+    },
+  },
+};
+
+/**
+ * Direct payment mode in light theme.
+ */
+export const DirectPaymentLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
+    presetOptions: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Light theme version of direct payment mode, showing a different product example with USDC payment.",
+      },
+    },
+  },
+};
+
+/**
+ * Transaction mode showing a complex contract interaction.
+ */
+export const Transaction: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+    presetOptions: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Transaction mode showing a complex contract interaction (claimTo function) with function name extraction from contract ABI and detailed cost breakdown.",
+      },
+    },
+  },
+};
+
+/**
+ * Transaction mode in light theme showing an ERC20 token transfer.
+ */
+export const TransactionLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
+    presetOptions: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Light theme version of transaction mode showing an ERC20 token transfer with proper token amount formatting and USD conversion.",
+      },
+    },
+  },
+};
+
+export const CustompresetOptions: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+    presetOptions: [1, 2, 3],
+    onComplete: undefined,
+    onError: undefined,
+    onCancel: undefined,
+    receiverAddress: undefined,
+    connectOptions: undefined,
+    connectLocale: undefined,
+    purchaseData: undefined,
+    paymentLinkId: undefined,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Fund wallet mode with custom quick options showing ETH with [1, 2, 3] preset amounts.",
+      },
+    },
+  },
+};

package/src/stories/Bridge/DirectPayment.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Theme } from "../../react/core/design-system/index.js";
+import {
+  DirectPayment,
+  type DirectPaymentProps,
+} from "../../react/web/ui/Bridge/DirectPayment.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
+import { DIRECT_PAYMENT_UI_OPTIONS } from "./fixtures.js";
+
+// Props interface for the wrapper component
+interface DirectPaymentWithThemeProps extends DirectPaymentProps {
+  theme: "light" | "dark" | Theme;
+}
+
+// Wrapper component to provide theme context
+const DirectPaymentWithTheme = (props: DirectPaymentWithThemeProps) => {
+  const { theme, ...componentProps } = props;
+  return (
+    <ModalThemeWrapper theme={theme}>
+      <DirectPayment {...componentProps} />
+    </ModalThemeWrapper>
+  );
+};
+
+const meta = {
+  title: "Bridge/DirectPayment",
+  component: DirectPaymentWithTheme,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "DirectPayment component displays a product/service purchase interface with payment details.\n\n" +
+          "## Features\n" +
+          "- **Product Display**: Shows product name, image, and pricing\n" +
+          "- **Payment Details**: Token amount, network information, and seller address\n" +
+          "- **Wallet Integration**: Connect button or continue with active wallet\n" +
+          "- **Responsive Design**: Adapts to different screen sizes and themes\n" +
+          "- **Fee Configuration**: Support for sender or receiver paying fees\n\n" +
+          "This component is used in the 'direct_payment' mode of BridgeOrchestrator for purchasing specific items or services. It now accepts uiOptions directly to configure payment info and metadata.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    client: storyClient,
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+    onContinue: (_amount, _token, _receiverAddress) => {},
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    onContinue: {
+      action: "continue clicked",
+      description: "Called when user continues with the payment",
+    },
+    uiOptions: {
+      description:
+        "UI configuration for direct payment mode including payment info and metadata",
+    },
+  },
+} satisfies Meta<typeof DirectPaymentWithTheme>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DigitalArt: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Example of purchasing a digital art NFT with ETH payment. Shows the product image, pricing in ETH, and seller information with sender paying fees.",
+      },
+    },
+  },
+};
+
+export const DigitalArtLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version of the digital art purchase interface.",
+      },
+    },
+  },
+};
+
+export const ConcertTicket: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Example of purchasing a concert ticket with USDC payment. Shows different product type, stable token pricing, and receiver paying fees.",
+      },
+    },
+  },
+};
+
+export const ConcertTicketLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version of the concert ticket purchase.",
+      },
+    },
+  },
+};
+
+export const SubscriptionService: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.subscription,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Example of a subscription service payment with detailed description. Shows how the component works for recurring service payments with comprehensive product information.",
+      },
+    },
+  },
+};
+
+export const SubscriptionServiceLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.subscription,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Light theme version of subscription service payment with full description text.",
+      },
+    },
+  },
+};
+
+export const PhysicalProduct: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.sneakers,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Example of purchasing physical products with crypto payments. Shows how the component adapts to different product types with ETH payment.",
+      },
+    },
+  },
+};
+
+export const PhysicalProductLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.sneakers,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version of physical product purchase.",
+      },
+    },
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.credits,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Example of purchasing digital credits without product image. Shows how the component handles text-only products with description fallback.",
+      },
+    },
+  },
+};
+
+export const NoImageLight: Story = {
+  args: {
+    theme: "light",
+    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.credits,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story: "Light theme version of credits purchase without image.",
+      },
+    },
+  },
+};