thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.1-nightly-bb09e20bcb1662c088bf8b61486df7d0d92da8d0-20250618000421

package/src/react/web/ui/Bridge/ErrorBanner.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { CrossCircledIcon } from "@radix-ui/react-icons";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { iconSize } from "../../../core/design-system/index.js";
+import { useBridgeError } from "../../../core/hooks/useBridgeError.js";
+import { Container } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+
+interface ErrorBannerProps {
+  /**
+   * The error to display
+   */
+  error: Error;
+
+  /**
+   * Called when user wants to retry
+   */
+  onRetry: () => void;
+
+  /**
+   * Called when user wants to cancel
+   */
+  onCancel?: () => void;
+}
+
+export function ErrorBanner({ error, onRetry, onCancel }: ErrorBannerProps) {
+  const theme = useCustomTheme();
+
+  const { userMessage } = useBridgeError({ error });
+
+  return (
+    <Container flex="column" gap="md" p="lg" fullHeight>
+      {/* Error Icon and Message */}
+      <Container flex="row" gap="md" style={{ alignItems: "flex-start" }}>
+        <Container
+          center="both"
+          style={{
+            width: "24px",
+            height: "24px",
+            borderRadius: "50%",
+            backgroundColor: theme.colors.tertiaryBg,
+            flexShrink: 0,
+          }}
+        >
+          <CrossCircledIcon
+            width={iconSize.md}
+            height={iconSize.md}
+            color={theme.colors.danger}
+          />
+        </Container>
+
+        <Container flex="column" gap="sm" style={{ flex: 1 }} fullHeight>
+          <Text size="lg" color="primaryText">
+            Error
+          </Text>
+          <Container
+            flex="column"
+            gap="sm"
+            style={{
+              minHeight: "100px",
+            }}
+          >
+            <Container flex="column" gap="sm" style={{ flex: 1 }}>
+              <Text size="sm" color="secondaryText">
+                {userMessage}
+              </Text>
+            </Container>
+          </Container>
+
+          {/* Action Buttons */}
+          <Container flex="row" gap="sm" style={{ justifyContent: "flex-end" }}>
+            <Button variant="primary" onClick={onRetry}>
+              Try Again
+            </Button>
+            {onCancel && (
+              <Button variant="secondary" onClick={onCancel}>
+                Cancel
+              </Button>
+            )}
+          </Container>
+        </Container>
+      </Container>
+    </Container>
+  );
+}

package/src/react/web/ui/Bridge/FundWallet.tsx

@@ -0,0 +1,341 @@
+"use client";
+import { useState } from "react";
+import type { Token } from "../../../../bridge/types/Token.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { type Address, getAddress } from "../../../../utils/address.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  iconSize,
+  radius,
+  spacing,
+} from "../../../core/design-system/index.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
+import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
+import { OutlineWalletIcon } from "../ConnectWallet/icons/OutlineWalletIcon.js";
+import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
+import type { PayEmbedConnectOptions } from "../PayEmbed.js";
+import { Spacer } from "../components/Spacer.js";
+import { Container } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Input } from "../components/formElements.js";
+import { Text } from "../components/text.js";
+import type { UIOptions } from "./BridgeOrchestrator.js";
+import { TokenAndChain } from "./common/TokenAndChain.js";
+import { WithHeader } from "./common/WithHeader.js";
+
+export interface FundWalletProps {
+  /**
+   * UI configuration and mode
+   */
+  uiOptions: Extract<UIOptions, { mode: "fund_wallet" }>;
+
+  /**
+   * The receiver address, defaults to the connected wallet address
+   */
+  receiverAddress?: Address;
+  /**
+   * ThirdwebClient for price fetching
+   */
+  client: ThirdwebClient;
+
+  /**
+   * Called when continue is clicked with the resolved requirements
+   */
+  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+
+  /**
+   * Quick buy amounts
+   */
+  presetOptions?: [number, number, number];
+
+  /**
+   * Connect options for wallet connection
+   */
+  connectOptions?: PayEmbedConnectOptions;
+}
+
+export function FundWallet({
+  client,
+  receiverAddress,
+  uiOptions,
+  onContinue,
+  presetOptions = [5, 10, 20],
+  connectOptions,
+}: FundWalletProps) {
+  const [amount, setAmount] = useState(uiOptions.initialAmount ?? "");
+  const theme = useCustomTheme();
+  const account = useActiveAccount();
+  const receiver = receiverAddress ?? account?.address;
+  const handleAmountChange = (inputValue: string) => {
+    let processedValue = inputValue;
+
+    // Replace comma with period if it exists
+    processedValue = processedValue.replace(",", ".");
+
+    if (processedValue.startsWith(".")) {
+      processedValue = `0${processedValue}`;
+    }
+
+    const numValue = Number(processedValue);
+    if (Number.isNaN(numValue)) {
+      return;
+    }
+
+    if (processedValue.startsWith("0") && !processedValue.startsWith("0.")) {
+      setAmount(processedValue.slice(1));
+    } else {
+      setAmount(processedValue);
+    }
+  };
+
+  const getAmountFontSize = () => {
+    const length = amount.length;
+    if (length > 12) return fontSize.md;
+    if (length > 8) return fontSize.lg;
+    return fontSize.xl;
+  };
+
+  const isValidAmount = amount && Number(amount) > 0;
+
+  const focusInput = () => {
+    const input = document.querySelector("#amount-input") as HTMLInputElement;
+    input?.focus();
+  };
+
+  const handleQuickAmount = (usdAmount: number) => {
+    if (uiOptions.destinationToken.priceUsd === 0) {
+      return;
+    }
+    // Convert USD amount to token amount using token price
+    const tokenAmount = usdAmount / uiOptions.destinationToken.priceUsd;
+    // Format to reasonable decimal places (up to 6 decimals, remove trailing zeros)
+    const formattedAmount = Number.parseFloat(
+      tokenAmount.toFixed(6),
+    ).toString();
+    setAmount(formattedAmount);
+  };
+
+  return (
+    <WithHeader
+      uiOptions={uiOptions}
+      defaultTitle={`Buy ${uiOptions.destinationToken.symbol}`}
+      client={client}
+    >
+      <Container flex="column">
+        {/* Token Info */}
+        <Container
+          flex="row"
+          center="both"
+          gap="3xs"
+          p="md"
+          style={{
+            flexWrap: "nowrap",
+            border: `1px solid ${theme.colors.borderColor}`,
+            borderRadius: radius.md,
+            backgroundColor: theme.colors.tertiaryBg,
+          }}
+        >
+          <TokenAndChain
+            token={uiOptions.destinationToken}
+            client={client}
+            size="xl"
+          />
+          {/* Amount Input */}
+          <Container
+            flex="column"
+            gap="3xs"
+            center="x"
+            expand
+            style={{
+              justifyContent: "flex-end",
+              alignItems: "flex-end",
+            }}
+          >
+            <div
+              style={{ cursor: "text" }}
+              onClick={focusInput}
+              onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  focusInput();
+                }
+              }}
+              role="button"
+              tabIndex={0}
+            >
+              <Container
+                flex="row"
+                center="y"
+                gap="xs"
+                style={{
+                  flexWrap: "nowrap",
+                  justifyContent: "flex-end",
+                }}
+              >
+                <Input
+                  id="amount-input"
+                  variant="transparent"
+                  pattern="^[0-9]*[.,]?[0-9]*$"
+                  inputMode="decimal"
+                  placeholder="0"
+                  type="text"
+                  data-placeholder={amount === ""}
+                  value={amount || "0"}
+                  onClick={(e) => {
+                    // put cursor at the end of the input
+                    if (amount === "") {
+                      e.currentTarget.setSelectionRange(
+                        e.currentTarget.value.length,
+                        e.currentTarget.value.length,
+                      );
+                    }
+                  }}
+                  onChange={(e) => {
+                    handleAmountChange(e.target.value);
+                  }}
+                  style={{
+                    fontSize: getAmountFontSize(),
+                    fontWeight: 600,
+                    textAlign: "right",
+                    padding: "0",
+                    border: "none",
+                    boxShadow: "none",
+                  }}
+                />
+              </Container>
+            </div>
+
+            {/* Fiat Value */}
+            <Container
+              flex="row"
+              center="both"
+              style={{ height: fontSize.lg, flexWrap: "nowrap" }}
+            >
+              <Text
+                size="md"
+                color="secondaryText"
+                style={{ textWrap: "nowrap" }}
+              >
+                ≈ $
+                {(Number(amount) * uiOptions.destinationToken.priceUsd).toFixed(
+                  2,
+                )}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+
+        {/* Quick Amount Buttons */}
+        {presetOptions && (
+          <>
+            <Spacer y="md" />
+            <Container
+              flex="row"
+              center="x"
+              gap="xs"
+              style={{
+                justifyContent: "space-evenly",
+              }}
+            >
+              {presetOptions?.map((amount) => (
+                <Button
+                  variant="outline"
+                  onClick={() => handleQuickAmount(Number(amount))}
+                  key={amount}
+                  style={{
+                    padding: `${spacing.sm} ${spacing.md}`,
+                    fontSize: fontSize.sm,
+                    flex: 1,
+                    backgroundColor: theme.colors.tertiaryBg,
+                  }}
+                >
+                  ${amount}
+                </Button>
+              ))}
+            </Container>
+          </>
+        )}
+
+        <Spacer y="md" />
+
+        <Container
+          flex="row"
+          gap="sm"
+          px="md"
+          py="sm"
+          center="y"
+          color="secondaryText"
+          style={{
+            border: `1px solid ${theme.colors.borderColor}`,
+            backgroundColor: theme.colors.tertiaryBg,
+            borderRadius: radius.md,
+          }}
+        >
+          {receiver ? (
+            <WalletRow
+              address={receiver}
+              client={client}
+              iconSize="md"
+              textSize="sm"
+            />
+          ) : (
+            <>
+              <OutlineWalletIcon size={iconSize.md} />
+              <Text
+                size="sm"
+                color="secondaryText"
+                style={{
+                  flex: 1,
+                }}
+              >
+                No Wallet Connected
+              </Text>
+            </>
+          )}
+        </Container>
+      </Container>
+
+      <Spacer y="lg" />
+
+      {/* Continue Button */}
+      {receiver ? (
+        <Button
+          variant="primary"
+          fullWidth
+          disabled={!isValidAmount}
+          onClick={() => {
+            if (isValidAmount) {
+              onContinue(
+                amount,
+                uiOptions.destinationToken,
+                getAddress(receiver),
+              );
+            }
+          }}
+          style={{
+            padding: `${spacing.sm} ${spacing.md}`,
+            fontSize: fontSize.md,
+          }}
+        >
+          Buy {amount} {uiOptions.destinationToken.symbol}
+        </Button>
+      ) : (
+        <ConnectButton
+          client={client}
+          theme={theme}
+          connectButton={{
+            label: `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
+          }}
+          {...connectOptions}
+        />
+      )}
+
+      <Spacer y="md" />
+
+      <PoweredByThirdweb />
+      <Spacer y="lg" />
+    </WithHeader>
+  );
+}

package/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -0,0 +1,219 @@
+"use client";
+import { useEffect } from "react";
+import type { Token } from "../../../../bridge/types/Token.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { toUnits } from "../../../../utils/units.js";
+import {
+  type BridgePrepareRequest,
+  type BridgePrepareResult,
+  type UseBridgePrepareParams,
+  useBridgePrepare,
+} from "../../../core/hooks/useBridgePrepare.js";
+import type { PaymentMethod } from "../../../core/machines/paymentMachine.js";
+import { Spacer } from "../components/Spacer.js";
+import { Spinner } from "../components/Spinner.js";
+import { Container } from "../components/basic.js";
+import { Text } from "../components/text.js";
+
+interface QuoteLoaderProps {
+  /**
+   * The destination token to bridge to
+   */
+  destinationToken: Token;
+
+  /**
+   * The payment method to use
+   */
+  paymentMethod: PaymentMethod;
+
+  /**
+   * The amount to bridge (as string)
+   */
+  amount: string;
+
+  /**
+   * The sender address
+   */
+  sender?: string;
+
+  /**
+   * The receiver address (defaults to sender for fund_wallet mode)
+   */
+  receiver: string;
+
+  /**
+   * ThirdwebClient for API calls
+   */
+  client: ThirdwebClient;
+
+  /**
+   * Called when a quote is successfully received
+   */
+  onQuoteReceived: (
+    preparedQuote: BridgePrepareResult,
+    request: BridgePrepareRequest,
+  ) => void;
+
+  /**
+   * Called when an error occurs
+   */
+  onError: (error: Error) => void;
+
+  /**
+   * Called when user wants to go back
+   */
+  onBack?: () => void;
+
+  /**
+   * Optional purchase data for the payment
+   */
+  purchaseData?: object;
+
+  /**
+   * Optional payment link ID for the payment
+   */
+  paymentLinkId?: string;
+
+  /**
+   * Fee payer for direct transfers (defaults to sender)
+   */
+  feePayer?: "sender" | "receiver";
+}
+
+export function QuoteLoader({
+  destinationToken,
+  paymentMethod,
+  amount,
+  sender,
+  receiver,
+  client,
+  onQuoteReceived,
+  onError,
+  purchaseData,
+  paymentLinkId,
+  feePayer,
+}: QuoteLoaderProps) {
+  // For now, we'll use a simple buy operation
+  // This will be expanded to handle different bridge types based on the payment method
+  const request: BridgePrepareRequest = getBridgeParams({
+    paymentMethod,
+    amount,
+    destinationToken,
+    receiver,
+    sender,
+    client,
+    purchaseData,
+    paymentLinkId,
+    feePayer,
+  });
+  const prepareQuery = useBridgePrepare(request);
+
+  // Handle successful quote
+  useEffect(() => {
+    if (prepareQuery.data) {
+      onQuoteReceived(prepareQuery.data, request);
+    }
+  }, [prepareQuery.data, onQuoteReceived, request]);
+
+  // Handle errors
+  useEffect(() => {
+    if (prepareQuery.error) {
+      onError(prepareQuery.error as Error);
+    }
+  }, [prepareQuery.error, onError]);
+
+  return (
+    <Container
+      flex="column"
+      center="both"
+      p="lg"
+      fullHeight
+      style={{ minHeight: "350px" }}
+    >
+      <Spinner size="xl" color="secondaryText" />
+      <Spacer y="md" />
+      <Text size="lg" color="primaryText" center style={{ fontWeight: 600 }}>
+        Finding the best route...
+      </Text>
+      <Spacer y="sm" />
+      <Text size="sm" color="secondaryText" center>
+        We're searching for the most efficient path for this payment.
+      </Text>
+    </Container>
+  );
+}
+
+function getBridgeParams(args: {
+  paymentMethod: PaymentMethod;
+  amount: string;
+  destinationToken: Token;
+  receiver: string;
+  client: ThirdwebClient;
+  sender?: string;
+  feePayer?: "sender" | "receiver";
+  purchaseData?: object;
+  paymentLinkId?: string;
+}): UseBridgePrepareParams {
+  const { paymentMethod, amount, destinationToken, receiver, client, sender } =
+    args;
+
+  switch (paymentMethod.type) {
+    case "fiat":
+      return {
+        type: "onramp",
+        client,
+        amount: toUnits(amount, destinationToken.decimals),
+        receiver,
+        sender,
+        chainId: destinationToken.chainId,
+        tokenAddress: destinationToken.address,
+        onramp: paymentMethod.onramp || "coinbase",
+        purchaseData: args.purchaseData,
+        currency: paymentMethod.currency,
+        onrampTokenAddress: NATIVE_TOKEN_ADDRESS, // always onramp to native token
+        paymentLinkId: args.paymentLinkId,
+        enabled: !!(destinationToken && amount && client),
+      };
+    case "wallet":
+      // if the origin token is the same as the destination token, use transfer type
+      if (
+        paymentMethod.originToken.chainId === destinationToken.chainId &&
+        paymentMethod.originToken.address.toLowerCase() ===
+          destinationToken.address.toLowerCase()
+      ) {
+        return {
+          type: "transfer",
+          client,
+          chainId: destinationToken.chainId,
+          tokenAddress: destinationToken.address,
+          feePayer: args.feePayer || "sender",
+          amount: toUnits(amount, destinationToken.decimals),
+          sender:
+            sender ||
+            paymentMethod.payerWallet.getAccount()?.address ||
+            receiver,
+          receiver,
+          purchaseData: args.purchaseData,
+          paymentLinkId: args.paymentLinkId,
+          enabled: !!(destinationToken && amount && client),
+        };
+      }
+
+      return {
+        type: "buy",
+        client,
+        originChainId: paymentMethod.originToken.chainId,
+        originTokenAddress: paymentMethod.originToken.address,
+        destinationChainId: destinationToken.chainId,
+        destinationTokenAddress: destinationToken.address,
+        amount: toUnits(amount, destinationToken.decimals),
+        sender:
+          sender || paymentMethod.payerWallet.getAccount()?.address || receiver,
+        receiver,
+        purchaseData: args.purchaseData,
+        paymentLinkId: args.paymentLinkId,
+        enabled: !!(destinationToken && amount && client),
+      };
+  }
+}