thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

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

@@ -0,0 +1,234 @@
+"use client";
+import type { Token } from "../../../../bridge/types/Token.js";
+import { defineChain } from "../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { type Address, shortenAddress } from "../../../../utils/address.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useEnsName } from "../../../core/utils/wallet.js";
+import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
+import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
+import { FiatValue } from "../ConnectWallet/screens/Buy/swap/FiatValue.js";
+import type { PayEmbedConnectOptions } from "../PayEmbed.js";
+import { ChainName } from "../components/ChainName.js";
+import { Spacer } from "../components/Spacer.js";
+import { Container, Line } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+import type { UIOptions } from "./BridgeOrchestrator.js";
+import { ChainIcon } from "./common/TokenAndChain.js";
+import { WithHeader } from "./common/WithHeader.js";
+
+export interface DirectPaymentProps {
+  /**
+   * Payment information for the direct payment
+   */
+  uiOptions: Extract<UIOptions, { mode: "direct_payment" }>;
+
+  /**
+   * ThirdwebClient for blockchain interactions
+   */
+  client: ThirdwebClient;
+
+  /**
+   * Called when user continues with the payment
+   */
+  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+
+  /**
+   * Connect options for wallet connection
+   */
+  connectOptions?: PayEmbedConnectOptions;
+}
+
+export function DirectPayment({
+  uiOptions,
+  client,
+  onContinue,
+  connectOptions,
+}: DirectPaymentProps) {
+  const activeAccount = useActiveAccount();
+  const chain = defineChain(uiOptions.paymentInfo.token.chainId);
+  const theme = useCustomTheme();
+  const handleContinue = () => {
+    onContinue(
+      uiOptions.paymentInfo.amount,
+      uiOptions.paymentInfo.token,
+      uiOptions.paymentInfo.sellerAddress,
+    );
+  };
+  const ensName = useEnsName({
+    address: uiOptions.paymentInfo.sellerAddress,
+    client,
+  });
+  const sellerAddress =
+    ensName.data || shortenAddress(uiOptions.paymentInfo.sellerAddress);
+
+  const buyNow = (
+    <Container flex="row" gap="3xs">
+      <Text size="md" color="primaryButtonText">
+        Buy Now ·
+      </Text>
+      <FiatValue
+        tokenAmount={uiOptions.paymentInfo.amount}
+        token={uiOptions.paymentInfo.token}
+        chain={chain}
+        client={client}
+        color="primaryButtonText"
+        size="md"
+      />
+    </Container>
+  );
+
+  return (
+    <WithHeader
+      uiOptions={uiOptions}
+      defaultTitle="Direct Payment"
+      client={client}
+    >
+      {/* Price section */}
+      <Container
+        flex="row"
+        center="y"
+        gap="3xs"
+        style={{
+          justifyContent: "space-between",
+        }}
+      >
+        <FiatValue
+          tokenAmount={uiOptions.paymentInfo.amount}
+          token={uiOptions.paymentInfo.token}
+          chain={chain}
+          client={client}
+          color="primaryText"
+          size="xl"
+          weight={700}
+        />
+        <Container flex="row" gap="3xs">
+          <Text
+            size="xs"
+            color="secondaryText"
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            One-time payment
+          </Text>
+        </Container>
+      </Container>
+
+      <Spacer y="md" />
+
+      <Line />
+
+      <Spacer y="md" />
+
+      {/* Seller section */}
+      <Container
+        flex="row"
+        style={{
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Text size="sm" color="secondaryText">
+          Sold by
+        </Text>
+        <Text
+          size="sm"
+          color="primaryText"
+          style={{
+            fontFamily: "monospace",
+          }}
+        >
+          {sellerAddress}
+        </Text>
+      </Container>
+
+      <Spacer y="xs" />
+
+      <Container
+        flex="row"
+        style={{
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Text size="sm" color="secondaryText">
+          Price
+        </Text>
+        <Text
+          size="sm"
+          color="primaryText"
+          style={{
+            fontFamily: "monospace",
+          }}
+        >
+          {`${uiOptions.paymentInfo.amount} ${uiOptions.paymentInfo.token.symbol}`}
+        </Text>
+      </Container>
+
+      <Spacer y="xs" />
+
+      {/* Network section */}
+      <Container
+        flex="row"
+        style={{
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Text size="sm" color="secondaryText">
+          Network
+        </Text>
+        <Container flex="row" gap="3xs" center="y">
+          <ChainIcon chain={chain} size={"xs"} client={client} />
+          <ChainName
+            chain={chain}
+            client={client}
+            size="sm"
+            color="primaryText"
+            short
+            style={{
+              fontFamily: "monospace",
+            }}
+          />
+        </Container>
+      </Container>
+
+      <Spacer y="md" />
+
+      <Line />
+
+      <Spacer y="lg" />
+
+      {/* Action button */}
+      <Container flex="column">
+        {activeAccount ? (
+          <Button variant="primary" fullWidth onClick={handleContinue}>
+            {buyNow}
+          </Button>
+        ) : (
+          <ConnectButton
+            client={client}
+            theme={theme}
+            connectButton={{
+              label: buyNow,
+              style: {
+                width: "100%",
+              },
+            }}
+            {...connectOptions}
+          />
+        )}
+
+        <Spacer y="md" />
+
+        <PoweredByThirdweb />
+        <Spacer y="lg" />
+      </Container>
+    </WithHeader>
+  );
+}

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