thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

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

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

@@ -0,0 +1,417 @@
+"use client";
+import { CheckIcon, ClockIcon, Cross1Icon } from "@radix-ui/react-icons";
+import type { RouteStep } from "../../../../bridge/types/Route.js";
+import type { Chain } from "../../../../chains/types.js";
+import { defineChain } from "../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { WindowAdapter } from "../../../core/adapters/WindowAdapter.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+  spacing,
+} from "../../../core/design-system/index.js";
+import type { BridgePrepareRequest } from "../../../core/hooks/useBridgePrepare.js";
+import {
+  type CompletedStatusResult,
+  useStepExecutor,
+} from "../../../core/hooks/useStepExecutor.js";
+import { ChainName } from "../components/ChainName.js";
+import { Spacer } from "../components/Spacer.js";
+import { Spinner } from "../components/Spinner.js";
+import { Container, ModalHeader } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+
+interface StepRunnerProps {
+  request: BridgePrepareRequest;
+
+  /**
+   * Wallet instance for executing transactions
+   */
+  wallet: Wallet;
+
+  /**
+   * Thirdweb client for API calls
+   */
+  client: ThirdwebClient;
+
+  /**
+   * Window adapter for opening URLs (web/RN)
+   */
+  windowAdapter: WindowAdapter;
+
+  /**
+   * Whether to automatically start the transaction process
+   */
+  autoStart?: boolean;
+
+  /**
+   * Called when all steps are completed - receives array of completed status results
+   */
+  onComplete: (completedStatuses: CompletedStatusResult[]) => void;
+
+  /**
+   * Called when user cancels the flow
+   */
+  onCancel?: () => void;
+
+  /**
+   * Called when user clicks the back button
+   */
+  onBack?: () => void;
+}
+
+export function StepRunner({
+  request,
+  wallet,
+  client,
+  windowAdapter,
+  onComplete,
+  onCancel,
+  onBack,
+  autoStart,
+}: StepRunnerProps) {
+  const theme = useCustomTheme();
+
+  // Use the real step executor hook
+  const {
+    currentStep,
+    progress,
+    executionState,
+    onrampStatus,
+    steps,
+    error,
+    start,
+    cancel,
+    retry,
+  } = useStepExecutor({
+    request,
+    wallet,
+    client,
+    windowAdapter,
+    autoStart,
+    onComplete: (completedStatuses: CompletedStatusResult[]) => {
+      onComplete(completedStatuses);
+    },
+  });
+
+  const handleCancel = () => {
+    cancel();
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  const handleRetry = () => {
+    retry();
+  };
+
+  const getStepStatus = (
+    stepIndex: number,
+  ): "pending" | "executing" | "completed" | "failed" => {
+    if (!currentStep || !steps) {
+      // Not started yet
+      return stepIndex === 0 ? (error ? "failed" : "pending") : "pending";
+    }
+
+    const currentStepIndex = steps.findIndex((step) => step === currentStep);
+
+    if (stepIndex < currentStepIndex) return "completed";
+    if (stepIndex === currentStepIndex && executionState === "executing")
+      return "executing";
+    if (stepIndex === currentStepIndex && error) return "failed";
+    if (
+      stepIndex === currentStepIndex &&
+      executionState === "idle" &&
+      progress === 100
+    )
+      return "completed";
+
+    return "pending";
+  };
+
+  const getStatusIcon = (
+    status: "pending" | "executing" | "completed" | "failed",
+  ) => {
+    switch (status) {
+      case "completed":
+        return (
+          <CheckIcon
+            width={iconSize.sm}
+            height={iconSize.sm}
+            color={theme.colors.accentButtonText}
+          />
+        );
+      case "executing":
+        return <Spinner size="sm" color={"accentButtonText"} />;
+      case "failed":
+        return (
+          <Cross1Icon width={iconSize.sm} height={iconSize.sm} color="white" />
+        );
+      default:
+        return (
+          <ClockIcon
+            width={iconSize.sm}
+            height={iconSize.sm}
+            color={theme.colors.primaryText}
+          />
+        );
+    }
+  };
+
+  const getStepBackgroundColor = (
+    status: "pending" | "executing" | "completed" | "failed",
+  ) => {
+    switch (status) {
+      case "completed":
+        return theme.colors.tertiaryBg;
+      case "executing":
+        return theme.colors.tertiaryBg;
+      case "failed":
+        return theme.colors.tertiaryBg;
+      default:
+        return theme.colors.tertiaryBg;
+    }
+  };
+
+  const getIconBackgroundColor = (
+    status: "pending" | "executing" | "completed" | "failed",
+  ) => {
+    switch (status) {
+      case "completed":
+        return theme.colors.success;
+      case "executing":
+        return theme.colors.accentButtonBg;
+      case "failed":
+        return theme.colors.danger;
+      default:
+        return theme.colors.borderColor;
+    }
+  };
+
+  const getStepDescription = (step: RouteStep) => {
+    const { originToken, destinationToken } = step;
+
+    // If tokens are the same, it's likely a bridge operation
+    if (originToken.chainId !== destinationToken.chainId) {
+      return (
+        <Container flex="row" gap="3xs">
+          <Text size="sm" color="primaryText">
+            Bridge {originToken.symbol} to{" "}
+          </Text>
+          <ChainName
+            chain={getDestinationChain(request)}
+            size="sm"
+            client={client}
+            short
+            color="primaryText"
+          />
+        </Container>
+      );
+    }
+
+    // If different tokens on same chain, it's a swap
+    if (originToken.symbol !== destinationToken.symbol) {
+      return (
+        <Text size="sm" color="primaryText">
+          Swap {originToken.symbol} to {destinationToken.symbol}
+        </Text>
+      );
+    }
+
+    // Fallback to step number
+    return (
+      <Text size="sm" color="primaryText">
+        Process transaction
+      </Text>
+    );
+  };
+
+  const getStepStatusText = (
+    status: "pending" | "executing" | "completed" | "failed",
+  ) => {
+    switch (status) {
+      case "executing":
+        return "Processing...";
+      case "completed":
+        return "Completed";
+      case "pending":
+        return "Waiting...";
+      case "failed":
+        return "Failed";
+      default:
+        return "Unknown";
+    }
+  };
+
+  return (
+    <Container flex="column" fullHeight p="lg">
+      <ModalHeader title="Processing Payment" onBack={onBack} />
+
+      <Spacer y="xl" />
+
+      <Container flex="column">
+        {/* Progress Bar */}
+        <Container flex="column" gap="sm">
+          <Container flex="row" center="y">
+            <Text size="sm" color="secondaryText" style={{ flex: 1 }}>
+              Progress
+            </Text>
+            <Text size="sm" color="primaryText">
+              {progress}%
+            </Text>
+          </Container>
+
+          <Container
+            style={{
+              width: "100%",
+              height: "8px",
+              backgroundColor: theme.colors.tertiaryBg,
+              border: `1px solid ${theme.colors.borderColor}`,
+              borderRadius: "4px",
+              overflow: "hidden",
+            }}
+          >
+            <Container
+              style={{
+                width: `${progress}%`,
+                height: "100%",
+                backgroundColor: error
+                  ? theme.colors.danger
+                  : theme.colors.accentButtonBg,
+                transition: "width 0.3s ease",
+              }}
+            >
+              <Text />
+            </Container>
+          </Container>
+        </Container>
+
+        <Spacer y="lg" />
+
+        {/* Steps List */}
+        <Container flex="column" gap="sm">
+          {request.type === "onramp" && onrampStatus ? (
+            <Container
+              flex="row"
+              gap="md"
+              style={{
+                alignItems: "center",
+                padding: `${spacing.sm} ${spacing.md}`,
+                borderRadius: radius.md,
+                backgroundColor: getStepBackgroundColor(onrampStatus),
+                border: `1px solid ${theme.colors.borderColor}`,
+              }}
+            >
+              <Container
+                center="both"
+                flex="row"
+                style={{
+                  width: `${iconSize.lg}px`,
+                  height: `${iconSize.lg}px`,
+                  borderRadius: "50%",
+                  backgroundColor: getIconBackgroundColor(onrampStatus),
+                  color: theme.colors.primaryButtonText,
+                  flexShrink: 0,
+                }}
+              >
+                {getStatusIcon(onrampStatus)}
+              </Container>
+
+              <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                <Text size="sm" color="primaryText">
+                  TEST
+                </Text>
+                <Text size="xs" color="secondaryText">
+                  {getStepStatusText(onrampStatus)}
+                </Text>
+              </Container>
+            </Container>
+          ) : null}
+          {steps?.map((step, index) => {
+            const status = getStepStatus(index);
+
+            return (
+              <Container
+                key={`${step.originToken.chainId}-${step.destinationToken.chainId}-${index}`}
+                flex="row"
+                gap="md"
+                style={{
+                  alignItems: "center",
+                  padding: `${spacing.sm} ${spacing.md}`,
+                  borderRadius: radius.md,
+                  backgroundColor: getStepBackgroundColor(status),
+                  border: `1px solid ${theme.colors.borderColor}`,
+                }}
+              >
+                <Container
+                  center="both"
+                  flex="row"
+                  style={{
+                    width: `${iconSize.lg}px`,
+                    height: `${iconSize.lg}px`,
+                    borderRadius: "50%",
+                    backgroundColor: getIconBackgroundColor(status),
+                    color: theme.colors.primaryButtonText,
+                    flexShrink: 0,
+                  }}
+                >
+                  {getStatusIcon(status)}
+                </Container>
+
+                <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                  {getStepDescription(step)}
+                  <Text size="xs" color="secondaryText">
+                    {getStepStatusText(status)}
+                  </Text>
+                </Container>
+              </Container>
+            );
+          })}
+        </Container>
+
+        <Spacer y="md" />
+        <Text size="xs" color="secondaryText" center>
+          Keep this window open until all
+          <br /> transactions are complete.
+        </Text>
+
+        <Spacer y="lg" />
+
+        {/* Action Buttons */}
+        {error ? (
+          <Container flex="row" gap="md">
+            <Button variant="primary" fullWidth onClick={handleRetry}>
+              Retry
+            </Button>
+          </Container>
+        ) : executionState === "idle" && progress === 0 ? (
+          <Button variant="accent" fullWidth onClick={start}>
+            Start Transaction
+          </Button>
+        ) : executionState === "executing" ||
+          executionState === "auto-starting" ? (
+          <Button variant="secondary" fullWidth onClick={handleCancel}>
+            Cancel Transaction
+          </Button>
+        ) : null}
+      </Container>
+    </Container>
+  );
+}
+
+function getDestinationChain(request: BridgePrepareRequest): Chain {
+  switch (request.type) {
+    case "onramp":
+      return defineChain(request.chainId);
+    case "buy":
+    case "sell":
+      return defineChain(request.destinationChainId);
+    case "transfer":
+      return defineChain(request.chainId);
+    default:
+      throw new Error("Invalid quote type");
+  }
+}