thirdweb 5.106.1 → 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.106.1";
+export const version = "5.107.1-nightly-d53f8a25b4978a9f92f494f50955765817e31bad-20250920000329";

package/src/x402/facilitator.ts

@@ -0,0 +1,87 @@
+import type { FacilitatorConfig } from "x402/types";
+import type { ThirdwebClient } from "../client/client.js";
+
+export type ThirdwebX402FacilitatorConfig = {
+  client: ThirdwebClient;
+  serverWalletAddress: string;
+  vaultAccessToken?: string;
+  baseUrl?: string;
+};
+
+const DEFAULT_BASE_URL = "https://api.thirdweb.com/v1/payments/x402";
+
+/**
+ * Creates a facilitator for the x402 payment protocol.
+ * Use this with any x402 middleware to enable settling transactions with your thirdweb server wallet.
+ *
+ * @param config - The configuration for the facilitator
+ * @returns a x402 compatible FacilitatorConfig
+ *
+ * @example
+ * ```ts
+ * import { facilitator } from "thirdweb/x402";
+ * import { createThirdwebClient } from "thirdweb";
+ *
+ * const client = createThirdwebClient({
+ *   secretKey: "your-secret-key",
+ * });
+ * const thirdwebX402Facilitator = facilitator({
+ *   client: client,
+ *   serverWalletAddress: "0x1234567890123456789012345678901234567890",
+ * });
+ *
+ * // add the facilitator to any x402 payment middleware
+ * const middleware = paymentMiddleware(
+ *   "0x1234567890123456789012345678901234567890",
+ *   {
+ *     "/api/paywall": {
+ *       price: "$0.01",
+ *       network: "base-sepolia",
+ *       config: {
+ *         description: "Access to paid content",
+ *       },
+ *     },
+ *   },
+ *   thirdwebX402Facilitator,
+ * );
+ * ```
+ *
+ * @bridge x402
+ */
+export function facilitator(
+  config: ThirdwebX402FacilitatorConfig,
+): FacilitatorConfig {
+  const secretKey = config.client.secretKey;
+  if (!secretKey) {
+    throw new Error("Client secret key is required for the x402 facilitator");
+  }
+  const serverWalletAddress = config.serverWalletAddress;
+  if (!serverWalletAddress) {
+    throw new Error(
+      "Server wallet address is required for the x402 facilitator",
+    );
+  }
+  return {
+    url: (config.baseUrl ?? DEFAULT_BASE_URL) as `${string}://${string}`,
+    createAuthHeaders: async () => {
+      return {
+        verify: {
+          "x-secret-key": secretKey,
+        },
+        settle: {
+          "x-secret-key": secretKey,
+          "x-settlement-wallet-address": serverWalletAddress,
+          ...(config.vaultAccessToken
+            ? { "x-vault-access-token": config.vaultAccessToken }
+            : {}),
+        },
+        supported: {
+          "x-secret-key": secretKey,
+        },
+        list: {
+          "x-secret-key": secretKey,
+        },
+      };
+    },
+  };
+}

package/src/x402/fetchWithPayment.ts

@@ -0,0 +1,173 @@
+import { createPaymentHeader } from "x402/client";
+import {
+  ChainIdToNetwork,
+  EvmNetworkToChainId,
+  type PaymentRequirements,
+  PaymentRequirementsSchema,
+  type Signer,
+} from "x402/types";
+import { viemAdapter } from "../adapters/viem.js";
+import { getCachedChain } from "../chains/utils.js";
+import type { ThirdwebClient } from "../client/client.js";
+import type { Wallet } from "../wallets/interfaces/wallet.js";
+
+/**
+ * Enables the payment of APIs using the x402 payment protocol.
+ *
+ * This function wraps the native fetch API to automatically handle 402 Payment Required responses
+ * by creating and sending a payment header. It will:
+ * 1. Make the initial request
+ * 2. If a 402 response is received, parse the payment requirements
+ * 3. Verify the payment amount is within the allowed maximum
+ * 4. Create a payment header using the provided wallet client
+ * 5. Retry the request with the payment header
+ *
+ * @param fetch - The fetch function to wrap (typically globalThis.fetch)
+ * @param client - The thirdweb client used to access RPC infrastructure
+ * @param wallet - The wallet used to sign payment messages
+ * @param maxValue - The maximum allowed payment amount in base units (defaults to 1 USDC)
+ * @returns A wrapped fetch function that handles 402 responses automatically
+ *
+ * @example
+ * ```typescript
+ * import { wrapFetchWithPayment } from "thirdweb/x402";
+ * import { createThirdwebClient } from "thirdweb";
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * const client = createThirdwebClient({ clientId: "your-client-id" });
+ * const wallet = createWallet("io.metamask");
+ * await wallet.connect({ client })
+ *
+ * const fetchWithPay = wrapFetchWithPayment(fetch, client, wallet);
+ *
+ * // Make a request that may require payment
+ * const response = await fetchWithPay('https://api.example.com/paid-endpoint');
+ * ```
+ *
+ * @throws {Error} If the payment amount exceeds the maximum allowed value
+ * @throws {Error} If a payment has already been attempted for this request
+ * @throws {Error} If there's an error creating the payment header
+ *
+ * @bridge x402
+ */
+export function wrapFetchWithPayment(
+  fetch: typeof globalThis.fetch,
+  client: ThirdwebClient,
+  wallet: Wallet,
+  maxValue: bigint = BigInt(1 * 10 ** 6), // Default to 1 USDC
+) {
+  return async (input: RequestInfo, init?: RequestInit) => {
+    const response = await fetch(input, init);
+
+    if (response.status !== 402) {
+      return response;
+    }
+
+    const { x402Version, accepts } = (await response.json()) as {
+      x402Version: number;
+      accepts: unknown[];
+    };
+    const parsedPaymentRequirements = accepts
+      .map((x) => PaymentRequirementsSchema.parse(x))
+      .filter((x) => x.scheme === "exact"); // TODO (402): accept other schemes
+
+    const account = wallet.getAccount();
+    let chain = wallet.getChain();
+
+    if (!account || !chain) {
+      throw new Error(
+        "Wallet not connected. Please connect your wallet to continue.",
+      );
+    }
+    const selectedPaymentRequirements = defaultPaymentRequirementsSelector(
+      parsedPaymentRequirements,
+      chain.id,
+      "exact",
+    );
+
+    if (BigInt(selectedPaymentRequirements.maxAmountRequired) > maxValue) {
+      throw new Error("Payment amount exceeds maximum allowed");
+    }
+
+    const paymentChainId = EvmNetworkToChainId.get(
+      selectedPaymentRequirements.network,
+    );
+
+    if (!paymentChainId) {
+      throw new Error(
+        `No chain found for the selected payment requirement: ${selectedPaymentRequirements.network}`,
+      );
+    }
+
+    // switch to the payment chain if it's not the current chain
+    if (paymentChainId !== chain.id) {
+      await wallet.switchChain(getCachedChain(paymentChainId));
+      chain = wallet.getChain();
+      if (!chain) {
+        throw new Error(`Failed to switch chain (${paymentChainId})`);
+      }
+    }
+
+    const walletClient = viemAdapter.wallet.toViem({
+      wallet: wallet,
+      chain,
+      client,
+    }) as Signer;
+
+    const paymentHeader = await createPaymentHeader(
+      walletClient,
+      x402Version,
+      selectedPaymentRequirements,
+    );
+
+    const initParams = init || {};
+
+    if ((initParams as { __is402Retry?: boolean }).__is402Retry) {
+      throw new Error("Payment already attempted");
+    }
+
+    const newInit = {
+      ...initParams,
+      headers: {
+        ...(initParams.headers || {}),
+        "X-PAYMENT": paymentHeader,
+        "Access-Control-Expose-Headers": "X-PAYMENT-RESPONSE",
+      },
+      __is402Retry: true,
+    };
+
+    const secondResponse = await fetch(input, newInit);
+    return secondResponse;
+  };
+}
+
+function defaultPaymentRequirementsSelector(
+  paymentRequirements: PaymentRequirements[],
+  chainId: number,
+  scheme: "exact",
+) {
+  if (!paymentRequirements.length) {
+    throw new Error(
+      "No valid payment requirements found in server 402 response",
+    );
+  }
+  const currentWalletNetwork = ChainIdToNetwork[chainId];
+  // find the payment requirements matching the connected wallet chain
+  const matchingPaymentRequirements = paymentRequirements.find(
+    (x) => x.network === currentWalletNetwork && x.scheme === scheme,
+  );
+
+  if (matchingPaymentRequirements) {
+    return matchingPaymentRequirements;
+  } else {
+    // if no matching payment requirements, use the first payment requirement
+    // and switch the wallet to that chain
+    const firstPaymentRequirement = paymentRequirements.find(
+      (x) => x.scheme === scheme,
+    );
+    if (!firstPaymentRequirement) {
+      throw new Error("No suitable payment requirements found");
+    }
+    return firstPaymentRequirement;
+  }
+}

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