thirdweb 5.105.9 → 5.105.10

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

@@ -1,359 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
-import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
-import type { Chain } from "../../../../../../../chains/types.js";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import { getContract } from "../../../../../../../contract/contract.js";
-import { allowance } from "../../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js";
-import type { GetBuyWithCryptoQuoteParams } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
-import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
-import { useBuyWithCryptoQuote } from "../../../../../../core/hooks/pay/useBuyWithCryptoQuote.js";
-import { getErrorMessage } from "../../../../../utils/errors.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import {
-  Drawer,
-  DrawerOverlay,
-  useDrawer,
-} from "../../../../components/Drawer.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Spinner } from "../../../../components/Spinner.js";
-import { Text } from "../../../../components/text.js";
-import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import type { PayEmbedConnectOptions } from "../../../../PayEmbed.js";
-import type { ConnectLocale } from "../../../locale/types.js";
-import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
-import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
-import type { SelectedScreen } from "../main/types.js";
-import type { PayerInfo } from "../types.js";
-import { SwapFees } from "./Fees.js";
-import { PayWithCryptoQuoteInfo } from "./PayWithCrypto.js";
-
-export function SwapScreenContent(props: {
-  setScreen: (screen: SelectedScreen) => void;
-  tokenAmount: string;
-  toToken: ERC20OrNativeToken;
-  toChain: Chain;
-  fromChain: Chain | undefined;
-  fromToken: ERC20OrNativeToken | undefined;
-  showFromTokenSelector: () => void;
-  payer: PayerInfo;
-  client: ThirdwebClient;
-  payOptions: PayUIOptions;
-  isEmbed: boolean;
-  onDone: () => void;
-  connectOptions: PayEmbedConnectOptions | undefined;
-  connectLocale: ConnectLocale;
-  setPayer: (payer: PayerInfo) => void;
-  activeAccount: Account;
-  setTokenAmount: (amount: string) => void;
-  setHasEditedAmount: (hasEdited: boolean) => void;
-  disableTokenSelection: boolean;
-  paymentLinkId: undefined | string;
-}) {
-  const {
-    setScreen,
-    payer,
-    client,
-    toChain,
-    tokenAmount,
-    toToken,
-    fromChain,
-    fromToken,
-    payOptions,
-    disableTokenSelection,
-  } = props;
-
-  const defaultRecipientAddress = (
-    props.payOptions as Extract<PayUIOptions, { mode: "direct_payment" }>
-  )?.paymentInfo?.sellerAddress;
-  const receiverAddress =
-    defaultRecipientAddress || props.activeAccount.address;
-  const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
-  const [drawerScreen, setDrawerScreen] = useState<
-    "fees" | "receiver" | "payer"
-  >("fees");
-
-  const fromTokenBalanceQuery = useWalletBalance(
-    {
-      address: payer.account.address,
-      chain: fromChain,
-      client,
-      tokenAddress: isNativeToken(fromToken) ? undefined : fromToken?.address,
-    },
-    {
-      enabled: !!fromChain && !!fromToken,
-    },
-  );
-
-  const fromTokenId = isNativeToken(fromToken)
-    ? NATIVE_TOKEN_ADDRESS
-    : fromToken?.address?.toLowerCase();
-  const toTokenId = isNativeToken(toToken)
-    ? NATIVE_TOKEN_ADDRESS
-    : toToken.address.toLowerCase();
-  const swapRequired =
-    !!tokenAmount &&
-    !!fromChain &&
-    !!fromTokenId &&
-    !(fromChain?.id === toChain.id && fromTokenId === toTokenId);
-  const quoteParams: GetBuyWithCryptoQuoteParams | undefined =
-    fromChain && fromToken && swapRequired
-      ? {
-          client,
-          // wallets
-          fromAddress: payer.account.address,
-          // from
-          fromChainId: fromChain.id,
-          fromTokenAddress: isNativeToken(fromToken)
-            ? NATIVE_TOKEN_ADDRESS
-            : fromToken.address,
-          paymentLinkId: props.paymentLinkId,
-          purchaseData: payOptions.purchaseData,
-          toAddress: receiverAddress,
-          toAmount: tokenAmount,
-          // to
-          toChainId: toChain.id,
-          toTokenAddress: isNativeToken(toToken)
-            ? NATIVE_TOKEN_ADDRESS
-            : toToken.address,
-        }
-      : undefined;
-
-  const quoteQuery = useBuyWithCryptoQuote(quoteParams, {
-    gcTime: 30 * 1000,
-    refetchInterval: 30 * 1000,
-    // refetch every 30 seconds
-    staleTime: 30 * 1000,
-  });
-
-  const allowanceQuery = useQuery({
-    enabled: !!quoteQuery.data?.approvalData,
-    queryFn: () => {
-      if (!quoteQuery.data?.approvalData) {
-        return null;
-      }
-      return allowance({
-        contract: getContract({
-          address: quoteQuery.data.swapDetails.fromToken.tokenAddress,
-          chain: getCachedChain(quoteQuery.data.swapDetails.fromToken.chainId),
-          client: props.client,
-        }),
-        owner: props.payer.account.address,
-        spender: quoteQuery.data.approvalData.spenderAddress,
-      });
-    },
-    queryKey: [
-      "allowance",
-      payer.account.address,
-      quoteQuery.data?.approvalData,
-    ],
-    refetchOnMount: true,
-  });
-
-  const sourceTokenAmount = swapRequired
-    ? quoteQuery.data?.swapDetails.fromAmount
-    : tokenAmount;
-
-  const isNotEnoughBalance =
-    !!sourceTokenAmount &&
-    !!fromTokenBalanceQuery.data &&
-    Number(fromTokenBalanceQuery.data.displayValue) < Number(sourceTokenAmount);
-
-  const disableContinue =
-    !fromChain ||
-    !fromToken ||
-    (swapRequired && !quoteQuery.data) ||
-    isNotEnoughBalance ||
-    allowanceQuery.isLoading;
-
-  const errorMsg =
-    !quoteQuery.isLoading && quoteQuery.error
-      ? getErrorMessage(quoteQuery.error)
-      : undefined;
-
-  function showSwapFlow() {
-    if (
-      (props.payOptions.mode === "direct_payment" ||
-        props.payOptions.mode === "fund_wallet") &&
-      !isNotEnoughBalance &&
-      !swapRequired
-    ) {
-      // same currency, just direct transfer
-      setScreen({
-        id: "transfer-flow",
-      });
-    } else if (
-      props.payOptions.mode === "transaction" &&
-      !isNotEnoughBalance &&
-      !swapRequired
-    ) {
-      if (payer.account.address !== receiverAddress) {
-        // needs transfer from another wallet before executing the transaction
-        setScreen({
-          id: "transfer-flow",
-        });
-      } else {
-        // has enough balance to just do the transaction directly
-        props.onDone();
-      }
-
-      return;
-    }
-
-    if (!quoteQuery.data) {
-      return;
-    }
-
-    setScreen({
-      approvalAmount: allowanceQuery.data ?? undefined,
-      id: "swap-flow",
-      quote: quoteQuery.data,
-    });
-  }
-
-  function showFees() {
-    if (!quoteQuery.data) {
-      return;
-    }
-
-    setIsOpen(true);
-    setDrawerScreen("fees");
-  }
-
-  return (
-    <Container animate="fadein" flex="column" gap="lg">
-      {isOpen && (
-        <>
-          <DrawerOverlay ref={drawerOverlayRef} />
-          <Drawer close={() => setIsOpen(false)} ref={drawerRef}>
-            {drawerScreen === "fees" && quoteQuery.data && (
-              <div>
-                <Text color="primaryText" size="lg">
-                  Fees
-                </Text>
-                <Spacer y="lg" />
-                <SwapFees quote={quoteQuery.data} />
-              </div>
-            )}
-          </Drawer>
-        </>
-      )}
-
-      {/* Quote info */}
-      <Container flex="column" gap="sm">
-        <Container center="y" flex="row" gap="xxs">
-          <Text size="sm">Pay with</Text>
-          {fromToken && fromChain ? (
-            <TokenSymbol
-              chain={fromChain}
-              color="secondaryText"
-              size="sm"
-              token={fromToken}
-            />
-          ) : (
-            "crypto"
-          )}
-        </Container>
-        <div>
-          <PayWithCryptoQuoteInfo
-            chain={fromChain}
-            client={client}
-            freezeChainAndTokenSelection={disableTokenSelection}
-            isLoading={quoteQuery.isLoading && !sourceTokenAmount}
-            onSelectToken={props.showFromTokenSelector}
-            payerAccount={props.payer.account}
-            swapRequired={swapRequired}
-            token={fromToken}
-            value={sourceTokenAmount || ""}
-          />
-          {swapRequired && fromChain && fromToken && (
-            <EstimatedTimeAndFees
-              estimatedSeconds={
-                quoteQuery.data?.swapDetails.estimated.durationSeconds
-              }
-              onViewFees={showFees}
-              quoteIsLoading={quoteQuery.isLoading}
-            />
-          )}
-        </div>
-        {/* Error message */}
-        {errorMsg && (
-          <div>
-            <div>
-              <Text center color="danger" multiline size="xs">
-                {errorMsg.title}
-              </Text>
-              <Text center multiline size="xs">
-                {errorMsg.message}
-              </Text>
-            </div>
-          </div>
-        )}
-
-        {!errorMsg && isNotEnoughBalance && (
-          <div>
-            <Text center color="danger" multiline size="xs">
-              Insufficient Funds
-            </Text>
-            <Text center multiline size="xs">
-              Select another token or pay with card.
-            </Text>
-          </div>
-        )}
-      </Container>
-
-      {/* Button */}
-      {isNotEnoughBalance || errorMsg ? (
-        <Button
-          fullWidth
-          onClick={() => props.showFromTokenSelector()}
-          variant="accent"
-        >
-          Pay with another token
-        </Button>
-      ) : (
-        <Button
-          data-disabled={disableContinue}
-          disabled={disableContinue}
-          fullWidth
-          gap="xs"
-          onClick={async () => {
-            if (!disableContinue) {
-              if (props.payer.wallet.getChain()?.id !== fromChain?.id) {
-                await props.payer.wallet.switchChain(fromChain);
-              }
-              showSwapFlow();
-              trackPayEvent({
-                chainId: fromChain.id,
-                client: client,
-                event: "confirm_swap_quote",
-                fromToken: isNativeToken(fromToken)
-                  ? undefined
-                  : fromToken.address,
-                toChainId: toChain.id,
-                toToken: isNativeToken(toToken) ? undefined : toToken.address,
-                walletAddress: payer.account.address,
-                walletType: payer.wallet.id,
-              });
-            }
-          }}
-          variant={disableContinue ? "outline" : "accent"}
-        >
-          {quoteQuery.isLoading ? (
-            <>
-              Getting price quote
-              <Spinner size="sm" />
-            </>
-          ) : (
-            "Continue"
-          )}
-        </Button>
-      )}
-    </Container>
-  );
-}

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

@@ -1,232 +0,0 @@
-import { CheckCircledIcon } from "@radix-ui/react-icons";
-import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import { iconSize } from "../../../../../../core/design-system/index.js";
-import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js";
-import { invalidateWalletBalance } from "../../../../../../core/providers/invalidateWalletBalance.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 { Text } from "../../../../components/text.js";
-import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
-import { SwapTxDetailsTable } from "../pay-transactions/SwapDetailsScreen.js";
-
-type UIStatus = "pending" | "success" | "failed" | "partialSuccess";
-
-export function SwapStatusScreen(props: {
-  title: string;
-  onBack?: () => void;
-  swapTxHash: string;
-  fromChain: Chain;
-  client: ThirdwebClient;
-  onTryAgain: () => void;
-  onDone: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-  quote: BuyWithCryptoQuote | undefined;
-  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
-}) {
-  const { onSuccess } = props;
-  const [showDetails, setShowDetails] = useState(false);
-
-  const swapStatus = useBuyWithCryptoStatus({
-    chainId: props.fromChain.id,
-    client: props.client,
-    transactionHash: props.swapTxHash,
-  });
-
-  let uiStatus: UIStatus = "pending";
-  if (swapStatus.data?.status === "COMPLETED") {
-    uiStatus = "success";
-  } else if (swapStatus.data?.status === "FAILED") {
-    uiStatus = "failed";
-  }
-
-  if (
-    swapStatus.data?.status === "COMPLETED" &&
-    swapStatus.data?.subStatus === "PARTIAL_SUCCESS"
-  ) {
-    uiStatus = "partialSuccess";
-  }
-
-  const purchaseCbCalled = useRef(false);
-  useEffect(() => {
-    if (purchaseCbCalled.current || !onSuccess) {
-      return;
-    }
-
-    if (swapStatus.data?.status === "COMPLETED") {
-      purchaseCbCalled.current = true;
-      onSuccess(swapStatus.data);
-    }
-  }, [onSuccess, swapStatus]);
-
-  const queryClient = useQueryClient();
-  const balanceInvalidated = useRef(false);
-  useEffect(() => {
-    if (
-      (uiStatus === "success" || uiStatus === "partialSuccess") &&
-      !balanceInvalidated.current
-    ) {
-      balanceInvalidated.current = true;
-      invalidateWalletBalance(queryClient);
-    }
-  }, [queryClient, uiStatus]);
-
-  const swapDetails =
-    swapStatus.data && swapStatus.data.status !== "NOT_FOUND" ? (
-      <SwapTxDetailsTable
-        client={props.client}
-        status={swapStatus.data}
-        type="status"
-      />
-    ) : props.quote ? (
-      <SwapTxDetailsTable
-        client={props.client}
-        quote={props.quote}
-        type="quote"
-      />
-    ) : null;
-
-  if (showDetails) {
-    return (
-      <Container animate="fadein">
-        <Container p="lg">
-          <ModalHeader
-            onBack={() => setShowDetails(false)}
-            title={"Transaction Details"}
-          />
-          <Spacer y="xl" />
-          {swapDetails}
-        </Container>
-      </Container>
-    );
-  }
-
-  return (
-    <Container animate="fadein">
-      <Container p="lg">
-        <ModalHeader onBack={props.onBack} title={props.title} />
-        <Spacer y="sm" />
-
-        {uiStatus === "success" && (
-          <>
-            <Spacer y="md" />
-            <Container center="x" color="success" flex="column">
-              <CheckCircledIcon
-                height={iconSize["3xl"]}
-                width={iconSize["3xl"]}
-              />
-              <Spacer y="sm" />
-              <Text color="primaryText" size="lg">
-                Buy Complete
-              </Text>
-            </Container>
-
-            <Spacer y="xl" />
-            <Button
-              fullWidth
-              onClick={() => setShowDetails(true)}
-              variant="outline"
-            >
-              View transaction details
-            </Button>
-            <Spacer y="sm" />
-            <Button fullWidth onClick={props.onDone} variant="accent">
-              {props.transactionMode ? "Continue Transaction" : "Done"}
-            </Button>
-          </>
-        )}
-
-        {uiStatus === "partialSuccess" &&
-          swapStatus.data?.status !== "NOT_FOUND" &&
-          swapStatus.data?.destination && (
-            <>
-              <Spacer y="lg" />
-              <Container center="x" color="success" flex="column">
-                <AccentFailIcon size={iconSize["3xl"]} />
-                <Spacer y="xl" />
-                <Text color="primaryText" size="lg">
-                  Incomplete
-                </Text>
-                <Spacer y="sm" />
-                <Text color="danger" size="sm">
-                  Expected {swapStatus.data.quote.toToken.symbol}, Got{" "}
-                  {swapStatus.data.destination.token.symbol} instead
-                </Text>
-              </Container>
-              <Spacer y="xl" />
-            </>
-          )}
-
-        {uiStatus === "failed" && (
-          <>
-            <Spacer y="xxl" />
-
-            <Container flex="column">
-              <Container center="both" flex="column">
-                <AccentFailIcon size={iconSize["3xl"]} />
-                <Spacer y="xl" />
-                <Text color="primaryText" size="lg">
-                  Transaction Failed
-                </Text>
-
-                <Spacer y="sm" />
-                <Text size="sm">
-                  Your transaction {`couldn't`} be processed
-                </Text>
-              </Container>
-
-              <Spacer y="xl" />
-              <Button
-                fullWidth
-                onClick={() => setShowDetails(true)}
-                variant="outline"
-              >
-                View transaction details
-              </Button>
-
-              <Spacer y="sm" />
-
-              <Button fullWidth onClick={props.onTryAgain} variant="accent">
-                Try Again
-              </Button>
-            </Container>
-          </>
-        )}
-
-        {uiStatus === "pending" && (
-          <>
-            <Spacer y="xl" />
-            <Container animate="fadein" center="both" flex="column">
-              <div
-                style={{
-                  alignItems: "center",
-                  display: "flex",
-                  justifyContent: "center",
-                  position: "relative",
-                }}
-              >
-                <Spinner color="accentText" size="3xl" />
-              </div>
-              <Spacer y="lg" />
-              <Text color="primaryText" size="lg">
-                Buy Pending
-              </Text>
-              <Spacer y="sm" />
-              <Text color="secondaryText" size="sm">
-                This may take a minute to complete
-              </Text>
-            </Container>
-            <Spacer y="xl" />
-          </>
-        )}
-      </Container>
-    </Container>
-  );
-}

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

@@ -1,111 +0,0 @@
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import { radius } from "../../../../../../core/design-system/index.js";
-import { Container } from "../../../../components/basic.js";
-import { TokenRow } from "../../../../components/token/TokenRow.js";
-import type { ERC20OrNativeToken } from "../../nativeToken.js";
-import { StepConnectorArrow } from "./StepConnector.js";
-import { WalletRow } from "./WalletRow.js";
-
-export function SwapSummary(props: {
-  sender: string;
-  receiver: string;
-  client: ThirdwebClient;
-  fromToken: ERC20OrNativeToken;
-  fromChain: Chain;
-  toToken: ERC20OrNativeToken;
-  toChain: Chain;
-  fromAmount: string;
-  toAmount: string;
-}) {
-  const theme = useCustomTheme();
-  const isDifferentRecipient =
-    props.receiver.toLowerCase() !== props.sender.toLowerCase();
-  return (
-    <Container>
-      {/* Sell */}
-      <Container
-        bg="tertiaryBg"
-        flex="column"
-        style={{
-          border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.lg,
-        }}
-      >
-        <Container
-          flex="row"
-          gap="sm"
-          p="sm"
-          style={{
-            borderBottom: `1px solid ${theme.colors.borderColor}`,
-          }}
-        >
-          <WalletRow
-            address={props.sender}
-            client={props.client}
-            iconSize="md"
-            textSize="sm"
-          />
-        </Container>
-        <TokenRow
-          chain={props.fromChain}
-          client={props.client}
-          freezeChainAndToken={true}
-          isLoading={false}
-          onSelectToken={() => {}}
-          style={{
-            background: "transparent",
-            border: "none",
-            borderRadius: 0,
-          }}
-          token={props.fromToken}
-          value={props.fromAmount}
-        />
-      </Container>
-      {/* Connector Icon */}
-      <StepConnectorArrow />
-      {/* Buy */}
-      <Container
-        bg="tertiaryBg"
-        flex="column"
-        style={{
-          border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.lg,
-        }}
-      >
-        {isDifferentRecipient && (
-          <Container
-            flex="row"
-            gap="sm"
-            p="sm"
-            style={{
-              borderBottom: `1px solid ${theme.colors.borderColor}`,
-            }}
-          >
-            <WalletRow
-              address={props.receiver}
-              client={props.client}
-              iconSize="md"
-              textSize="sm"
-            />
-          </Container>
-        )}
-        <TokenRow
-          chain={props.toChain}
-          client={props.client}
-          freezeChainAndToken={true}
-          isLoading={false}
-          onSelectToken={() => {}}
-          style={{
-            background: "transparent",
-            border: "none",
-            borderRadius: 0,
-          }}
-          token={props.toToken}
-          value={props.toAmount}
-        />
-      </Container>
-    </Container>
-  );
-}