thirdweb 5.107.0 → 5.107.1-nightly-d53f8a25b4978a9f92f494f50955765817e31bad-20250920000329

package/src/react/web/ui/Bridge/swap-widget/utils.ts

@@ -1,3 +1,9 @@
 export function cleanedChainName(name: string) {
   return name.replace("Mainnet", "");
 }
+
+export const tokenAmountFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 5,
+  minimumFractionDigits: 2,
+});

package/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsx

@@ -3,21 +3,21 @@ import type { IconFC } from "./types.js";
 export const ArrowUpDownIcon: IconFC = (props) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
       role="presentation"
       width={props.size}
       height={props.size}
     >
-      <path d="m21 16-4 4-4-4" />
-      <path d="M17 20V4" />
-      <path d="m3 8 4-4 4 4" />
-      <path d="M7 4v16" />
+      <g
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M9.599 2.4v11.2l3.2-3.476M6.4 13.6V2.4L3.2 5.875"></path>
+      </g>
     </svg>
   );
 };

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

@@ -84,7 +84,7 @@ export function Container(props: {
   expand?: boolean;
   center?: "x" | "y" | "both";
   gap?: keyof typeof spacing;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   style?: React.CSSProperties;
   p?: keyof typeof spacing;
   px?: keyof typeof spacing;

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

@@ -21,6 +21,7 @@ type ButtonProps = {
   fullWidth?: boolean;
   gap?: keyof typeof spacing;
   bg?: keyof Theme["colors"];
+  hoverBg?: keyof Theme["colors"];
 };
 
 export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
@@ -95,6 +96,9 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
     transition: "border 200ms ease",
     WebkitTapHighlightColor: "transparent",
     width: props.fullWidth ? "100%" : undefined,
+    "&:hover": {
+      background: props.hoverBg ? theme.colors[props.hoverBg] : undefined,
+    },
     ...(() => {
       if (props.variant === "outline") {
         return {
@@ -120,7 +124,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
       if (props.variant === "ghost-solid") {
         return {
           "&:hover": {
-            background: theme.colors.tertiaryBg,
+            background: theme.colors[props.hoverBg || "tertiaryBg"],
           },
           border: "1px solid transparent",
         };
@@ -137,7 +141,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
       if (props.variant === "secondary") {
         return {
           "&:hover": {
-            background: theme.colors.secondaryButtonHoverBg,
+            background: theme.colors[props.hoverBg || "secondaryButtonHoverBg"],
           },
         };
       }

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

@@ -2,6 +2,7 @@
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
+  media,
   radius,
   spacing,
   type Theme,
@@ -97,11 +98,14 @@ export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {
     color: theme.colors.primaryText,
     display: "block",
     fontFamily: "inherit",
-    fontSize: fontSize.md,
+    fontSize: fontSize.sm,
     outline: "none",
     padding: props.sm ? spacing.sm : fontSize.sm,
     WebkitAppearance: "none",
     width: "100%",
+    [media.mobile]: {
+      fontSize: fontSize.md,
+    },
   };
 });
 

package/src/react/web/ui/hooks/useisMobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 640;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/stories/Bridge/Swap/SelectChain.stories.tsx

@@ -16,13 +16,14 @@ const meta = {
 } satisfies Meta<typeof SelectBridgeChain>;
 export default meta;
 
-export function WithData() {
+export function WithDataDesktop() {
   const [selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
     undefined,
   );
   return (
     <SwapWidgetContainer theme="dark" className="w-full">
       <SelectBridgeChain
+        isMobile={false}
         client={storyClient}
         onSelectChain={setSelectedChain}
         onBack={() => {}}
@@ -32,13 +33,50 @@ export function WithData() {
   );
 }
 
-export function Loading() {
+export function LoadingDesktop() {
   const [selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
     undefined,
   );
   return (
     <SwapWidgetContainer theme="dark" className="w-full">
       <SelectBridgeChainUI
+        isMobile={false}
+        client={storyClient}
+        onSelectChain={setSelectedChain}
+        onBack={() => {}}
+        isPending={true}
+        chains={[]}
+        selectedChain={selectedChain}
+      />
+    </SwapWidgetContainer>
+  );
+}
+
+export function WithDataMobile() {
+  const [selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
+    undefined,
+  );
+  return (
+    <SwapWidgetContainer theme="dark" className="w-full">
+      <SelectBridgeChain
+        isMobile={true}
+        client={storyClient}
+        onSelectChain={setSelectedChain}
+        onBack={() => {}}
+        selectedChain={selectedChain}
+      />
+    </SwapWidgetContainer>
+  );
+}
+
+export function LoadingMobile() {
+  const [selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
+    undefined,
+  );
+  return (
+    <SwapWidgetContainer theme="dark" className="w-full">
+      <SelectBridgeChainUI
+        isMobile={true}
         client={storyClient}
         onSelectChain={setSelectedChain}
         onBack={() => {}}

package/src/stories/Bridge/Swap/SwapWidget.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta } from "@storybook/react";
 import { lightTheme } from "../../../react/core/design-system/index.js";
 import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
-import { ConnectButton } from "../../../react/web/ui/ConnectWallet/ConnectButton.js";
 import { storyClient } from "../../utils.js";
 
 const meta: Meta<typeof SwapWidget> = {
@@ -14,15 +13,6 @@ const meta: Meta<typeof SwapWidget> = {
       return (
         <div>
           <Story />
-          <div
-            style={{
-              position: "absolute",
-              bottom: "20px",
-              right: "20px",
-            }}
-          >
-            <ConnectButton client={storyClient} />
-          </div>
         </div>
       );
     },
@@ -31,15 +21,28 @@ const meta: Meta<typeof SwapWidget> = {
 export default meta;
 
 export function BasicUsage() {
-  return <SwapWidget client={storyClient} />;
+  return <SwapWidget client={storyClient} persistTokenSelections={false} />;
 }
 
 export function CurrencySet() {
-  return <SwapWidget client={storyClient} currency="JPY" />;
+  return (
+    <SwapWidget
+      client={storyClient}
+      currency="JPY"
+      persistTokenSelections={false}
+    />
+  );
 }
 
 export function LightMode() {
-  return <SwapWidget client={storyClient} currency="JPY" theme="light" />;
+  return (
+    <SwapWidget
+      client={storyClient}
+      currency="JPY"
+      theme="light"
+      persistTokenSelections={false}
+    />
+  );
 }
 
 export function NoThirdwebBranding() {
@@ -48,6 +51,7 @@ export function NoThirdwebBranding() {
       client={storyClient}
       currency="JPY"
       showThirdwebBranding={false}
+      persistTokenSelections={false}
     />
   );
 }
@@ -57,6 +61,7 @@ export function CustomTheme() {
     <SwapWidget
       client={storyClient}
       currency="JPY"
+      persistTokenSelections={false}
       theme={lightTheme({
         colors: {
           modalBg: "#FFFFF0",

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.107.0";
+export const version = "5.107.1-nightly-d53f8a25b4978a9f92f494f50955765817e31bad-20250920000329";

package/dist/cjs/react/web/ui/Bridge/swap-widget/common.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DecimalRenderer = DecimalRenderer;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const text_js_1 = require("../../components/text.js");
-function DecimalRenderer(props) {
-    if (Number(props.value) > 1000) {
-        return ((0, jsx_runtime_1.jsx)(text_js_1.Text, { size: props.integerSize, color: props.color, weight: props.weight, children: compactFormatter.format(Number(props.value)) }));
-    }
-    const [integerPart, fractionPart] = props.value.split(".");
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "baseline" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: props.integerSize, color: props.color, weight: props.weight, children: integerPart }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: props.fractionSize, color: props.color, weight: props.weight, children: [".", fractionPart || "00"] })] }));
-}
-const compactFormatter = new Intl.NumberFormat("en-US", {
-    notation: "compact",
-    maximumFractionDigits: 2,
-});
-//# sourceMappingURL=common.js.map

package/dist/cjs/react/web/ui/Bridge/swap-widget/common.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/common.tsx"],"names":[],"mappings":";;AAGA,0CA0BC;;AA5BD,sDAAgD;AAEhD,SAAgB,eAAe,CAAC,KAM/B;IACC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC;QAC/B,OAAO,CACL,uBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,YACpE,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GACxC,CACR,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3D,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aACrD,uBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,YACpE,WAAW,GACP,EACP,wBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,kBACpE,YAAY,IAAI,IAAI,IACjB,IACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;IACtD,QAAQ,EAAE,SAAS;IACnB,qBAAqB,EAAE,CAAC;CACzB,CAAC,CAAC"}

package/dist/esm/react/web/ui/Bridge/swap-widget/common.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from "../../components/text.js";
-export function DecimalRenderer(props) {
-    if (Number(props.value) > 1000) {
-        return (_jsx(Text, { size: props.integerSize, color: props.color, weight: props.weight, children: compactFormatter.format(Number(props.value)) }));
-    }
-    const [integerPart, fractionPart] = props.value.split(".");
-    return (_jsxs("div", { style: { display: "flex", alignItems: "baseline" }, children: [_jsx(Text, { size: props.integerSize, color: props.color, weight: props.weight, children: integerPart }), _jsxs(Text, { size: props.fractionSize, color: props.color, weight: props.weight, children: [".", fractionPart || "00"] })] }));
-}
-const compactFormatter = new Intl.NumberFormat("en-US", {
-    notation: "compact",
-    maximumFractionDigits: 2,
-});
-//# sourceMappingURL=common.js.map

package/dist/esm/react/web/ui/Bridge/swap-widget/common.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/common.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEhD,MAAM,UAAU,eAAe,CAAC,KAM/B;IACC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC;QAC/B,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,YACpE,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GACxC,CACR,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3D,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aACrD,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,YACpE,WAAW,GACP,EACP,MAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,kBACpE,YAAY,IAAI,IAAI,IACjB,IACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;IACtD,QAAQ,EAAE,SAAS;IACnB,qBAAqB,EAAE,CAAC;CACzB,CAAC,CAAC"}

package/dist/types/react/web/ui/Bridge/swap-widget/common.d.ts

@@ -1,9 +0,0 @@
-import type { Theme } from "../../../../core/design-system/index.js";
-export declare function DecimalRenderer(props: {
-    value: string;
-    color: keyof Theme["colors"];
-    weight: 400 | 500 | 600 | 700;
-    integerSize: "md" | "sm";
-    fractionSize: "sm" | "xs";
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=common.d.ts.map

package/dist/types/react/web/ui/Bridge/swap-widget/common.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/swap-widget/common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AAGrE,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC7B,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;CAC3B,2CAoBA"}

package/src/react/web/ui/Bridge/swap-widget/common.tsx

@@ -1,35 +0,0 @@
-import type { Theme } from "../../../../core/design-system/index.js";
-import { Text } from "../../components/text.js";
-
-export function DecimalRenderer(props: {
-  value: string;
-  color: keyof Theme["colors"];
-  weight: 400 | 500 | 600 | 700;
-  integerSize: "md" | "sm";
-  fractionSize: "sm" | "xs";
-}) {
-  if (Number(props.value) > 1000) {
-    return (
-      <Text size={props.integerSize} color={props.color} weight={props.weight}>
-        {compactFormatter.format(Number(props.value))}
-      </Text>
-    );
-  }
-  const [integerPart, fractionPart] = props.value.split(".");
-
-  return (
-    <div style={{ display: "flex", alignItems: "baseline" }}>
-      <Text size={props.integerSize} color={props.color} weight={props.weight}>
-        {integerPart}
-      </Text>
-      <Text size={props.fractionSize} color={props.color} weight={props.weight}>
-        .{fractionPart || "00"}
-      </Text>
-    </div>
-  );
-}
-
-const compactFormatter = new Intl.NumberFormat("en-US", {
-  notation: "compact",
-  maximumFractionDigits: 2,
-});