thirdweb 5.105.9 → 5.105.10

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.test.ts

@@ -1,80 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import { getBuyWithCryptoStatusMeta } from "./statusMeta.js";
-
-describe("getBuyWithCryptoStatusMeta", () => {
-  it('returns "Unknown" for NOT_FOUND status', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      status: "NOT_FOUND",
-    } as BuyWithCryptoStatus);
-    expect(result).toEqual({
-      color: "secondaryText",
-      status: "Unknown",
-    });
-  });
-
-  it('returns "Bridging" for WAITING_BRIDGE subStatus', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      status: "PENDING",
-      subStatus: "WAITING_BRIDGE",
-    } as BuyWithCryptoStatus);
-    expect(result).toEqual({
-      color: "accentText",
-      loading: true,
-      status: "Bridging",
-    });
-  });
-
-  it('returns "Incomplete" for PARTIAL_SUCCESS subStatus', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      status: "COMPLETED",
-      subStatus: "PARTIAL_SUCCESS",
-    } as BuyWithCryptoStatus);
-    expect(result).toEqual({
-      color: "secondaryText",
-      status: "Incomplete",
-    });
-  });
-
-  it('returns "Pending" for PENDING status', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      status: "PENDING",
-    } as BuyWithCryptoStatus);
-    expect(result).toEqual({
-      color: "accentText",
-      loading: true,
-      status: "Pending",
-    });
-  });
-
-  it('returns "Failed" for FAILED status', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      status: "FAILED",
-    } as BuyWithCryptoStatus);
-    expect(result).toEqual({
-      color: "danger",
-      status: "Failed",
-    });
-  });
-
-  it('returns "Completed" for COMPLETED status', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      status: "COMPLETED",
-    } as BuyWithCryptoStatus);
-    expect(result).toEqual({
-      color: "success",
-      status: "Completed",
-    });
-  });
-
-  it('returns "Unknown" for unhandled status', () => {
-    const result = getBuyWithCryptoStatusMeta({
-      // @ts-ignore Test purpose
-      status: "Unknown",
-    });
-    expect(result).toEqual({
-      color: "secondaryText",
-      status: "Unknown",
-    });
-  });
-});

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.ts

@@ -1,77 +0,0 @@
-import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { Theme } from "../../../../../../core/design-system/index.js";
-
-export type StatusMeta = {
-  status: string;
-  color: keyof Theme["colors"];
-  loading?: true;
-};
-
-export function getBuyWithCryptoStatusMeta(
-  cryptoStatus: BuyWithCryptoStatus,
-): StatusMeta {
-  if (cryptoStatus.status === "NOT_FOUND") {
-    return {
-      color: "secondaryText",
-      status: "Unknown",
-    };
-  }
-
-  const subStatus = cryptoStatus.subStatus;
-  const status = cryptoStatus.status;
-
-  if (subStatus === "WAITING_BRIDGE") {
-    return {
-      color: "accentText",
-      loading: true,
-      status: "Bridging",
-    };
-  }
-
-  if (subStatus === "PARTIAL_SUCCESS") {
-    return {
-      color: "secondaryText",
-      status: "Incomplete",
-    };
-  }
-
-  if (status === "PENDING") {
-    return {
-      color: "accentText",
-      loading: true,
-      status: "Pending",
-    };
-  }
-
-  if (status === "FAILED") {
-    return {
-      color: "danger",
-      status: "Failed",
-    };
-  }
-
-  if (status === "COMPLETED") {
-    return {
-      color: "success",
-      status: "Completed",
-    };
-  }
-
-  return {
-    color: "secondaryText",
-    status: "Unknown",
-  };
-}
-
-export type FiatStatusMeta = {
-  status: string;
-  color: keyof Theme["colors"];
-  loading?: true;
-  step: 1 | 2;
-  progressStatus:
-    | "pending"
-    | "completed"
-    | "failed"
-    | "actionRequired"
-    | "unknown";
-};

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx

@@ -1,154 +0,0 @@
-import { useRef } from "react";
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { fontSize } from "../../../../../../core/design-system/index.js";
-import { Container } from "../../../../components/basic.js";
-import { Input } from "../../../../components/formElements.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { TokenRow } from "../../../../components/token/TokenRow.js";
-import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import type { ERC20OrNativeToken } from "../../nativeToken.js";
-import { getBuyTokenAmountFontSize } from "../utils.js";
-import { FiatValue } from "./FiatValue.js";
-
-/**
- * @internal
- */
-export function BuyTokenInput(props: {
-  token: ERC20OrNativeToken;
-  chain: Chain;
-  value: string;
-  onChange: (value: string) => void;
-  onSelectToken: () => void;
-  client: ThirdwebClient;
-  hideTokenSelector?: boolean;
-  freezeAmount?: boolean;
-  freezeChainAndToken?: boolean;
-}) {
-  const getWidth = () => {
-    let chars = props.value.replace(".", "").length;
-    const hasDot = props.value.includes(".");
-    if (hasDot) {
-      chars += 0.3;
-    }
-    return `calc(${`${Math.max(1, chars)}ch`} + 6px)`;
-  };
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <Container>
-      {/* Input */}
-      {/** biome-ignore lint/a11y/noStaticElementInteractions: TODO */}
-      {/** biome-ignore lint/a11y/useKeyWithClickEvents: TODO */}
-      <div
-        onClick={() => {
-          inputRef.current?.focus();
-        }}
-      >
-        <Container
-          center="both"
-          flex="row"
-          gap="xs"
-          style={{
-            flexWrap: "nowrap",
-          }}
-        >
-          <Input
-            data-placeholder={props.value === ""}
-            disabled={props.freezeAmount}
-            inputMode="decimal"
-            onChange={(e) => {
-              let value = e.target.value;
-
-              // Replace comma with period if it exists
-              value = value.replace(",", ".");
-
-              if (value.startsWith(".")) {
-                value = `0${value}`;
-              }
-
-              const numValue = Number(value);
-              if (Number.isNaN(numValue)) {
-                return;
-              }
-
-              if (value.startsWith("0") && !value.startsWith("0.")) {
-                props.onChange(value.slice(1));
-              } else {
-                props.onChange(value);
-              }
-            }}
-            onClick={(e) => {
-              // put cursor at the end of the input
-              if (props.value === "") {
-                e.currentTarget.setSelectionRange(
-                  e.currentTarget.value.length,
-                  e.currentTarget.value.length,
-                );
-              }
-            }}
-            pattern="^[0-9]*[.,]?[0-9]*$"
-            placeholder="0"
-            ref={inputRef}
-            style={{
-              border: "none",
-              borderRadius: "0",
-              boxShadow: "none",
-              fontSize: getBuyTokenAmountFontSize(props.value),
-              fontWeight: 600,
-              maxWidth: "calc(100% - 100px)",
-              padding: "0",
-              paddingBlock: "2px",
-              textAlign: "right",
-              width: getWidth(),
-            }}
-            tabIndex={-1}
-            type="text"
-            value={props.value || "0"}
-            variant="outline"
-          />
-          <TokenSymbol
-            chain={props.chain}
-            color="secondaryText"
-            size="lg"
-            token={props.token}
-          />
-        </Container>
-      </div>
-
-      <Container
-        center="both"
-        flex="row"
-        style={{
-          height: fontSize.xl,
-        }}
-      >
-        <FiatValue
-          chain={props.chain}
-          client={props.client}
-          size="md"
-          token={props.token}
-          tokenAmount={props.value}
-        />
-      </Container>
-
-      {!props.hideTokenSelector && (
-        <>
-          <Spacer y="md" />
-
-          {/* Token / Chain selector */}
-          <Container center="x" flex="row">
-            <TokenRow
-              chain={props.chain}
-              client={props.client}
-              freezeChainAndToken={props.freezeChainAndToken}
-              onSelectToken={props.onSelectToken}
-              token={props.token}
-            />
-          </Container>
-        </>
-      )}
-    </Container>
-  );
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -1,377 +0,0 @@
-import { useMemo, useState } from "react";
-import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { getContract } from "../../../../../../../contract/contract.js";
-import { approve } from "../../../../../../../extensions/erc20/write/approve.js";
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import { sendBatchTransaction } from "../../../../../../../transaction/actions/send-batch-transaction.js";
-import { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
-import {
-  type WaitForReceiptOptions,
-  waitForReceipt,
-} from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import { Container, ModalHeader } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Spinner } from "../../../../components/Spinner.js";
-import { StepBar } from "../../../../components/StepBar.js";
-import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
-import { Text } from "../../../../components/text.js";
-import { StyledDiv } from "../../../../design-system/elements.js";
-import type { ERC20OrNativeToken } from "../../nativeToken.js";
-import { Step } from "../Stepper.js";
-import type { PayerInfo } from "../types.js";
-import { ErrorText } from "./ErrorText.js";
-import { addPendingTx } from "./pendingSwapTx.js";
-import { SwapSummary } from "./SwapSummary.js";
-
-/**
- * @internal
- */
-export function SwapConfirmationScreen(props: {
-  title: string;
-  onBack?: () => void;
-  client: ThirdwebClient;
-  quote: BuyWithCryptoQuote;
-  setSwapTxHash: (txHash: string) => void;
-  onTryAgain: () => void;
-  toChain: Chain;
-  toAmount: string;
-  toTokenSymbol: string;
-  fromChain: Chain;
-  toToken: ERC20OrNativeToken;
-  fromAmount: string;
-  fromToken: ERC20OrNativeToken;
-  fromTokenSymbol: string;
-  isFiatFlow: boolean;
-  payer: PayerInfo;
-  preApprovedAmount?: bigint;
-}) {
-  const approveTxRequired =
-    props.quote.approvalData &&
-    props.preApprovedAmount !== undefined &&
-    props.preApprovedAmount < BigInt(props.quote.approvalData.amountWei);
-  const needsApprovalStep =
-    approveTxRequired && !props.payer.account.sendBatchTransaction;
-  const initialStep = needsApprovalStep ? "approval" : "swap";
-
-  const [step, setStep] = useState<"approval" | "swap">(initialStep);
-  const [error, setError] = useState<string | undefined>();
-  const [status, setStatus] = useState<
-    "pending" | "success" | "error" | "idle"
-  >("idle");
-
-  const receiver = props.quote.swapDetails.toAddress;
-  const sender = props.quote.swapDetails.fromAddress;
-
-  const uiErrorMessage = useMemo(() => {
-    if (step === "approval" && status === "error" && error) {
-      if (
-        error.toLowerCase().includes("user rejected") ||
-        error.toLowerCase().includes("user closed modal") ||
-        error.toLowerCase().includes("user denied")
-      ) {
-        return {
-          message: "Your wallet rejected the approval request.",
-          title: "Failed to Approve",
-        };
-      }
-      if (error.toLowerCase().includes("insufficient funds for gas")) {
-        return {
-          message:
-            "You do not have enough native funds to approve the transaction.",
-          title: "Insufficient Native Funds",
-        };
-      }
-      return {
-        message:
-          "Your wallet failed to approve the transaction for an unknown reason. Please try again or contact support.",
-        title: "Failed to Approve",
-      };
-    }
-
-    if (step === "swap" && status === "error" && error) {
-      if (
-        error.toLowerCase().includes("user rejected") ||
-        error.toLowerCase().includes("user closed modal") ||
-        error.toLowerCase().includes("user denied")
-      ) {
-        return {
-          message: "Your wallet rejected the confirmation request.",
-          title: "Failed to Confirm",
-        };
-      }
-      if (error.toLowerCase().includes("insufficient funds for gas")) {
-        return {
-          message:
-            "You do not have enough native funds to confirm the transaction.",
-          title: "Insufficient Native Funds",
-        };
-      }
-      return {
-        message:
-          "Your wallet failed to confirm the transaction for an unknown reason. Please try again or contact support.",
-        title: "Failed to Confirm",
-      };
-    }
-
-    return undefined;
-  }, [error, step, status]);
-
-  return (
-    <Container p="lg">
-      <ModalHeader onBack={props.onBack} title={props.title} />
-
-      {props.isFiatFlow ? (
-        <>
-          <Spacer y="lg" />
-          <StepBar currentStep={2} steps={2} />
-          <Spacer y="sm" />
-          <Text size="xs">
-            Step 2 of 2 - Converting {props.fromTokenSymbol} to{" "}
-            {props.toTokenSymbol}
-          </Text>
-          <Spacer y="md" />
-        </>
-      ) : (
-        <>
-          <Spacer y="lg" />
-          <Text size="sm">Confirm payment</Text>
-          <Spacer y="md" />
-        </>
-      )}
-
-      <SwapSummary
-        client={props.client}
-        fromAmount={props.fromAmount}
-        fromChain={props.fromChain}
-        fromToken={props.fromToken}
-        receiver={receiver}
-        sender={sender}
-        toAmount={props.toAmount}
-        toChain={props.toChain}
-        toToken={props.toToken}
-      />
-
-      <Spacer y="md" />
-
-      {/* Show 2 steps - Approve and confirm  */}
-      {needsApprovalStep && (
-        <>
-          <Spacer y="sm" />
-          <Container
-            center="y"
-            color="accentText"
-            flex="row"
-            gap="sm"
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            <Step
-              isActive={step === "approval"}
-              isDone={step === "swap"}
-              label={step === "approval" ? "Approve" : "Approved"}
-            />
-            <ConnectorLine />
-            <Step isActive={step === "swap"} isDone={false} label="Confirm" />
-          </Container>
-          <Spacer y="lg" />
-        </>
-      )}
-
-      {uiErrorMessage && (
-        <>
-          <ErrorText
-            message={uiErrorMessage.message}
-            title={uiErrorMessage.title}
-          />
-          <Spacer y="md" />
-        </>
-      )}
-
-      {props.payer.chain.id !== props.fromChain.id ? (
-        <>
-          <Spacer y="xs" />
-          <SwitchNetworkButton
-            fullWidth
-            switchChain={async () => {
-              await props.payer.wallet.switchChain(props.fromChain);
-            }}
-            variant="accent"
-          />
-        </>
-      ) : (
-        <>
-          <Spacer y="xs" />
-          <Button
-            disabled={status === "pending"}
-            fullWidth
-            gap="xs"
-            onClick={async () => {
-              const wallet = props.payer.wallet;
-
-              // in case the wallet is not on the same chain as the fromToken, switch to it
-              if (wallet.getChain()?.id !== props.fromChain.id) {
-                await wallet.switchChain(props.fromChain);
-              }
-
-              const account = wallet.getAccount();
-
-              if (!account) {
-                throw new Error("Payer wallet has no account");
-              }
-
-              if (step === "approval" && props.quote.approvalData) {
-                try {
-                  setStatus("pending");
-
-                  trackPayEvent({
-                    amountWei: props.quote.swapDetails.fromAmountWei,
-                    chainId: props.quote.swapDetails.fromToken.chainId,
-                    client: props.client,
-                    event: "prompt_swap_approval",
-                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    toChainId: props.quote.swapDetails.toToken.chainId,
-                    toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    walletAddress: account.address,
-                    walletType: wallet.id,
-                  });
-
-                  const transaction = approve({
-                    amountWei: BigInt(props.quote.approvalData.amountWei),
-                    contract: getContract({
-                      address: props.quote.swapDetails.fromToken.tokenAddress,
-                      chain: props.fromChain,
-                      client: props.client,
-                    }),
-                    spender: props.quote.approvalData.spenderAddress,
-                  });
-
-                  const tx = await sendTransaction({
-                    account: account,
-                    transaction,
-                  });
-
-                  await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
-
-                  trackPayEvent({
-                    amountWei: props.quote.swapDetails.fromAmountWei,
-                    chainId: props.quote.swapDetails.fromToken.chainId,
-                    client: props.client,
-                    event: "swap_approval_success",
-                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    toChainId: props.quote.swapDetails.toToken.chainId,
-                    toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    walletAddress: account.address,
-                    walletType: wallet.id,
-                  });
-
-                  setStep("swap");
-                  setStatus("idle");
-                } catch (e) {
-                  console.error(e);
-                  setError((e as Error).message);
-                  setStatus("error");
-                }
-              }
-
-              if (step === "swap") {
-                setStatus("pending");
-                try {
-                  trackPayEvent({
-                    amountWei: props.quote.swapDetails.fromAmountWei,
-                    chainId: props.quote.swapDetails.fromToken.chainId,
-                    client: props.client,
-                    event: "prompt_swap_execution",
-                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    toChainId: props.quote.swapDetails.toToken.chainId,
-                    toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    walletAddress: account.address,
-                    walletType: wallet.id,
-                  });
-                  const tx = props.quote.transactionRequest;
-                  let _swapTx: WaitForReceiptOptions;
-                  // check if we can batch approval and swap
-                  const canBatch = account.sendBatchTransaction;
-                  if (
-                    canBatch &&
-                    props.quote.approvalData &&
-                    approveTxRequired
-                  ) {
-                    const approveTx = approve({
-                      amountWei: BigInt(props.quote.approvalData.amountWei),
-                      contract: getContract({
-                        address: props.quote.swapDetails.fromToken.tokenAddress,
-                        chain: props.fromChain,
-                        client: props.client,
-                      }),
-                      spender: props.quote.approvalData.spenderAddress,
-                    });
-
-                    _swapTx = await sendBatchTransaction({
-                      account: account,
-                      transactions: [approveTx, tx],
-                    });
-                  } else {
-                    _swapTx = await sendTransaction({
-                      account: account,
-                      transaction: tx,
-                    });
-                  }
-
-                  trackPayEvent({
-                    amountWei: props.quote.swapDetails.fromAmountWei,
-                    chainId: props.quote.swapDetails.fromToken.chainId,
-                    client: props.client,
-                    event: "swap_execution_success",
-                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    toChainId: props.quote.swapDetails.toToken.chainId,
-                    toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    walletAddress: account.address,
-                    walletType: wallet.id,
-                  });
-
-                  // do not add pending tx if the swap is part of fiat flow
-                  if (!props.isFiatFlow) {
-                    addPendingTx({
-                      chainId: _swapTx.chain.id,
-                      txHash: _swapTx.transactionHash,
-                      type: "swap",
-                    });
-                  }
-
-                  props.setSwapTxHash(_swapTx.transactionHash);
-                } catch (e) {
-                  console.error(e);
-                  setStatus("error");
-                  setError((e as Error).message);
-                }
-              }
-            }}
-            variant="accent"
-          >
-            {step === "approval" &&
-              (status === "pending" ? "Approving" : "Approve")}
-            {step === "swap" &&
-              (status === "pending" ? "Confirming" : "Confirm")}
-            {status === "pending" && (
-              <Spinner color="accentButtonText" size="sm" />
-            )}
-          </Button>
-        </>
-      )}
-    </Container>
-  );
-}
-
-export const ConnectorLine = /* @__PURE__ */ StyledDiv(() => {
-  const theme = useCustomTheme();
-  return {
-    background: theme.colors.borderColor,
-    flex: 1,
-    height: "4px",
-  };
-});