thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -0,0 +1,268 @@
+"use client";
+import { useEffect, useState } from "react";
+import type { Token } from "../../../../../bridge/types/Token.js";
+import { defineChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { Address } from "../../../../../utils/address.js";
+import { toUnits } from "../../../../../utils/units.js";
+import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
+import { usePaymentMethods } from "../../../../core/hooks/usePaymentMethods.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useConnectedWallets } from "../../../../core/hooks/wallets/useConnectedWallets.js";
+import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
+import type { ConnectLocale } from "../../ConnectWallet/locale/types.js";
+import { WalletSwitcherConnectionScreen } from "../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js";
+import type { PayEmbedConnectOptions } from "../../PayEmbed.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, ModalHeader } from "../../components/basic.js";
+import { FiatProviderSelection } from "./FiatProviderSelection.js";
+import { TokenSelection } from "./TokenSelection.js";
+import { WalletFiatSelection } from "./WalletFiatSelection.js";
+
+export interface PaymentSelectionProps {
+  /**
+   * The destination token to bridge to
+   */
+  destinationToken: Token;
+
+  /**
+   * The destination amount to bridge
+   */
+  destinationAmount: string;
+
+  /**
+   * The receiver address
+   */
+  receiverAddress?: Address;
+
+  /**
+   * ThirdwebClient for API calls
+   */
+  client: ThirdwebClient;
+
+  /**
+   * Called when user selects a payment method
+   */
+  onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void;
+
+  /**
+   * Called when an error occurs
+   */
+  onError: (error: Error) => void;
+
+  /**
+   * Called when user wants to go back
+   */
+  onBack?: () => void;
+
+  /**
+   * Connect options for wallet connection
+   */
+  connectOptions?: PayEmbedConnectOptions;
+
+  /**
+   * Locale for connect UI
+   */
+  connectLocale: ConnectLocale;
+
+  /**
+   * Whether to include the destination token in the payment methods
+   */
+  includeDestinationToken?: boolean;
+}
+
+type Step =
+  | { type: "walletSelection" }
+  | { type: "tokenSelection"; selectedWallet: Wallet }
+  | { type: "fiatProviderSelection" }
+  | { type: "walletConnection" };
+
+export function PaymentSelection({
+  destinationToken,
+  client,
+  destinationAmount,
+  receiverAddress,
+  onPaymentMethodSelected,
+  onError,
+  onBack,
+  connectOptions,
+  connectLocale,
+  includeDestinationToken,
+}: PaymentSelectionProps) {
+  const connectedWallets = useConnectedWallets();
+  const activeWallet = useActiveWallet();
+
+  const [currentStep, setCurrentStep] = useState<Step>({
+    type: "walletSelection",
+  });
+
+  const payerWallet =
+    currentStep.type === "tokenSelection"
+      ? currentStep.selectedWallet
+      : activeWallet;
+  const {
+    data: paymentMethods,
+    isLoading: paymentMethodsLoading,
+    error: paymentMethodsError,
+  } = usePaymentMethods({
+    destinationToken,
+    destinationAmount,
+    client,
+    includeDestinationToken:
+      includeDestinationToken ||
+      receiverAddress?.toLowerCase() !==
+        payerWallet?.getAccount()?.address?.toLowerCase(),
+    payerWallet,
+  });
+
+  // Handle error from usePaymentMethods
+  useEffect(() => {
+    if (paymentMethodsError) {
+      onError(paymentMethodsError as Error);
+    }
+  }, [paymentMethodsError, onError]);
+
+  const handlePaymentMethodSelected = (paymentMethod: PaymentMethod) => {
+    try {
+      onPaymentMethodSelected(paymentMethod);
+    } catch (error) {
+      onError(error as Error);
+    }
+  };
+
+  const handleWalletSelected = (wallet: Wallet) => {
+    setCurrentStep({ type: "tokenSelection", selectedWallet: wallet });
+  };
+
+  const handleConnectWallet = async () => {
+    setCurrentStep({ type: "walletConnection" });
+  };
+
+  const handleFiatSelected = () => {
+    setCurrentStep({ type: "fiatProviderSelection" });
+  };
+
+  const handleBackToWalletSelection = () => {
+    setCurrentStep({ type: "walletSelection" });
+  };
+
+  const handleOnrampProviderSelected = (
+    provider: "coinbase" | "stripe" | "transak",
+  ) => {
+    if (!payerWallet) {
+      onError(new Error("No wallet available for fiat payment"));
+      return;
+    }
+
+    const fiatPaymentMethod: PaymentMethod = {
+      type: "fiat",
+      payerWallet,
+      currency: "USD", // Default to USD for now
+      onramp: provider,
+    };
+    handlePaymentMethodSelected(fiatPaymentMethod);
+  };
+
+  const getStepTitle = () => {
+    switch (currentStep.type) {
+      case "walletSelection":
+        return "Choose Payment Method";
+      case "tokenSelection":
+        return "Select Token";
+      case "fiatProviderSelection":
+        return "Select Payment Provider";
+      case "walletConnection":
+        return "Connect Wallet";
+    }
+  };
+
+  const getBackHandler = () => {
+    switch (currentStep.type) {
+      case "walletSelection":
+        return onBack;
+      case "tokenSelection":
+      case "fiatProviderSelection":
+      case "walletConnection":
+        return handleBackToWalletSelection;
+    }
+  };
+
+  // Handle rendering WalletSwitcherConnectionScreen
+  if (currentStep.type === "walletConnection") {
+    const destinationChain = destinationToken
+      ? defineChain(destinationToken.chainId)
+      : undefined;
+    const chains = destinationChain
+      ? [destinationChain, ...(connectOptions?.chains || [])]
+      : connectOptions?.chains;
+
+    return (
+      <WalletSwitcherConnectionScreen
+        accountAbstraction={connectOptions?.accountAbstraction}
+        appMetadata={connectOptions?.appMetadata}
+        chain={destinationChain || connectOptions?.chain}
+        chains={chains}
+        client={client}
+        connectLocale={connectLocale}
+        isEmbed={false}
+        onBack={handleBackToWalletSelection}
+        onSelect={handleWalletSelected}
+        hiddenWallets={[]}
+        recommendedWallets={connectOptions?.recommendedWallets}
+        showAllWallets={
+          connectOptions?.showAllWallets === undefined
+            ? true
+            : connectOptions?.showAllWallets
+        }
+        walletConnect={connectOptions?.walletConnect}
+        wallets={connectOptions?.wallets?.filter((w) => w.id !== "inApp")}
+      />
+    );
+  }
+
+  return (
+    <Container flex="column" p="lg">
+      <ModalHeader title={getStepTitle()} onBack={getBackHandler()} />
+
+      <Spacer y="xl" />
+
+      <Container flex="column">
+        {currentStep.type === "walletSelection" && (
+          <WalletFiatSelection
+            connectedWallets={connectedWallets}
+            client={client}
+            onWalletSelected={handleWalletSelected}
+            onFiatSelected={handleFiatSelected}
+            onConnectWallet={handleConnectWallet}
+          />
+        )}
+
+        {currentStep.type === "tokenSelection" && (
+          <TokenSelection
+            paymentMethods={paymentMethods}
+            paymentMethodsLoading={paymentMethodsLoading}
+            client={client}
+            onPaymentMethodSelected={handlePaymentMethodSelected}
+            onBack={handleBackToWalletSelection}
+            destinationToken={destinationToken}
+            destinationAmount={toUnits(
+              destinationAmount,
+              destinationToken.decimals,
+            )}
+          />
+        )}
+
+        {currentStep.type === "fiatProviderSelection" && (
+          <FiatProviderSelection
+            client={client}
+            onProviderSelected={handleOnrampProviderSelected}
+            toChainId={destinationToken.chainId}
+            toTokenAddress={destinationToken.address}
+            toAddress={receiverAddress || ""}
+            toAmount={destinationAmount}
+          />
+        )}
+      </Container>
+    </Container>
+  );
+}

package/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx

@@ -0,0 +1,282 @@
+"use client";
+import type { Token } from "../../../../../bridge/types/Token.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../../core/design-system/index.js";
+import { useBridgeQuote } from "../../../../core/hooks/useBridgeQuote.js";
+import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
+import { formatTokenAmount } from "../../ConnectWallet/screens/formatTokenBalance.js";
+import { Skeleton } from "../../components/Skeleton.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import { TokenAndChain } from "../common/TokenAndChain.js";
+
+interface TokenSelectionProps {
+  paymentMethods: PaymentMethod[];
+  paymentMethodsLoading: boolean;
+  client: ThirdwebClient;
+  onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void;
+  onBack: () => void;
+  destinationToken: Token;
+  destinationAmount: bigint;
+}
+
+// Individual payment method token row component
+interface PaymentMethodTokenRowProps {
+  paymentMethod: PaymentMethod & { type: "wallet" };
+  destinationToken: Token;
+  destinationAmount: bigint;
+  client: ThirdwebClient;
+  onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void;
+}
+
+function PaymentMethodTokenRow({
+  paymentMethod,
+  destinationToken,
+  destinationAmount,
+  client,
+  onPaymentMethodSelected,
+}: PaymentMethodTokenRowProps) {
+  const theme = useCustomTheme();
+
+  // Fetch individual quote for this specific token pair
+  const {
+    data: quote,
+    isLoading: quoteLoading,
+    error: quoteError,
+  } = useBridgeQuote({
+    originToken: paymentMethod.originToken,
+    destinationToken,
+    destinationAmount,
+    client,
+  });
+
+  // Use the fetched originAmount if available, otherwise fall back to the one from paymentMethod
+  const displayOriginAmount = quote?.originAmount;
+  const hasEnoughBalance = displayOriginAmount
+    ? paymentMethod.balance >= displayOriginAmount
+    : false;
+
+  return (
+    <Button
+      key={`${paymentMethod.originToken.address}-${paymentMethod.originToken.chainId}`}
+      variant="secondary"
+      fullWidth
+      onClick={() => onPaymentMethodSelected(paymentMethod)}
+      disabled={!hasEnoughBalance}
+      style={{
+        border: `1px solid ${theme.colors.borderColor}`,
+        borderRadius: radius.md,
+        padding: `${spacing.sm} ${spacing.md}`,
+        backgroundColor: theme.colors.tertiaryBg,
+        opacity: hasEnoughBalance ? 1 : 0.5,
+        textAlign: "left",
+      }}
+    >
+      <Container
+        flex="row"
+        gap="md"
+        style={{ width: "100%", alignItems: "center" }}
+      >
+        <TokenAndChain
+          token={paymentMethod.originToken}
+          client={client}
+          size="lg"
+          style={{
+            maxWidth: "50%",
+          }}
+        />
+        <Container
+          flex="column"
+          gap="3xs"
+          style={{ flex: 1, alignItems: "flex-end" }}
+        >
+          {quoteLoading ? (
+            <>
+              {/* Price amount skeleton */}
+              <Skeleton width="80px" height="16px" />
+              {/* Balance skeleton */}
+              <Container flex="row" gap="3xs">
+                <Skeleton width="50px" height="12px" />
+                <Skeleton width="40px" height="12px" />
+              </Container>
+            </>
+          ) : quoteError ? (
+            <Text size="sm" color="danger" style={{ fontWeight: 600 }}>
+              Quote failed
+            </Text>
+          ) : displayOriginAmount ? (
+            <Text
+              size="sm"
+              color="primaryText"
+              style={{ fontWeight: 600, textWrap: "nowrap" }}
+            >
+              {formatTokenAmount(
+                displayOriginAmount,
+                paymentMethod.originToken.decimals,
+              )}{" "}
+              {paymentMethod.originToken.symbol}
+            </Text>
+          ) : (
+            "--.--"
+          )}
+          {!quoteLoading && (
+            <Container flex="row" gap="3xs">
+              <Text size="xs" color="secondaryText">
+                Balance:{" "}
+              </Text>
+              <Text
+                size="xs"
+                color={
+                  !quoteLoading
+                    ? hasEnoughBalance
+                      ? "success"
+                      : "danger"
+                    : "secondaryText"
+                }
+              >
+                {formatTokenAmount(
+                  paymentMethod.balance,
+                  paymentMethod.originToken.decimals,
+                )}
+              </Text>
+            </Container>
+          )}
+        </Container>
+      </Container>
+    </Button>
+  );
+}
+
+export function TokenSelection({
+  paymentMethods,
+  paymentMethodsLoading,
+  client,
+  onPaymentMethodSelected,
+  onBack,
+  destinationToken,
+  destinationAmount,
+}: TokenSelectionProps) {
+  const theme = useCustomTheme();
+
+  if (paymentMethodsLoading) {
+    return (
+      <>
+        <Text size="md" color="primaryText">
+          Loading your tokens
+        </Text>
+        <Spacer y="sm" />
+        <Container flex="column" gap="sm">
+          {/* Skeleton rows matching PaymentMethodTokenRow structure */}
+          {[1, 2, 3].map((i) => (
+            <Container
+              key={i}
+              style={{
+                border: `1px solid ${theme.colors.borderColor}`,
+                borderRadius: radius.md,
+                padding: `${spacing.sm} ${spacing.md}`,
+                backgroundColor: theme.colors.tertiaryBg,
+              }}
+            >
+              <Container
+                flex="row"
+                gap="md"
+                style={{ width: "100%", alignItems: "center" }}
+              >
+                {/* Left side: Token icon and name skeleton */}
+                <Container
+                  flex="row"
+                  gap="sm"
+                  center="y"
+                  style={{ maxWidth: "50%" }}
+                >
+                  {/* Token icon skeleton */}
+                  <div
+                    style={{
+                      width: "32px",
+                      height: "32px",
+                      backgroundColor: theme.colors.skeletonBg,
+                      borderRadius: "50%",
+                    }}
+                  />
+                  <Container flex="column" gap="3xs">
+                    {/* Token name skeleton */}
+                    <Skeleton width="60px" height="14px" />
+                    {/* Chain name skeleton */}
+                    <Skeleton width="40px" height="12px" />
+                  </Container>
+                </Container>
+
+                {/* Right side: Price and balance skeleton */}
+                <Container
+                  flex="column"
+                  gap="3xs"
+                  style={{ flex: 1, alignItems: "flex-end" }}
+                >
+                  {/* Price amount skeleton */}
+                  <Skeleton width="80px" height="16px" />
+                  {/* Balance skeleton */}
+                  <Container flex="row" gap="3xs">
+                    <Skeleton width="50px" height="12px" />
+                    <Skeleton width="40px" height="12px" />
+                  </Container>
+                </Container>
+              </Container>
+            </Container>
+          ))}
+        </Container>
+      </>
+    );
+  }
+
+  if (paymentMethods.length === 0) {
+    return (
+      <Container flex="column" center="both" style={{ minHeight: "250px" }}>
+        <Text size="md" color="primaryText" center>
+          No available tokens found for this wallet
+        </Text>
+        <Spacer y="sm" />
+        <Text size="sm" color="secondaryText" center>
+          Try connecting a different wallet or pay with card
+        </Text>
+        <Spacer y="lg" />
+        <Button variant="primary" onClick={onBack}>
+          Select another payment method
+        </Button>
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Text size="md" color="primaryText">
+        Select payment token
+      </Text>
+      <Spacer y="sm" />
+      <Container
+        flex="column"
+        gap="sm"
+        style={{
+          maxHeight: "400px",
+          overflowY: "auto",
+          scrollbarWidth: "none",
+        }}
+      >
+        {paymentMethods
+          .filter((method) => method.type === "wallet")
+          .map((method) => (
+            <PaymentMethodTokenRow
+              key={`${method.originToken.address}-${method.originToken.chainId}`}
+              paymentMethod={method}
+              destinationToken={destinationToken}
+              destinationAmount={destinationAmount}
+              client={client}
+              onPaymentMethodSelected={onPaymentMethodSelected}
+            />
+          ))}
+      </Container>
+    </>
+  );
+}