thirdweb 5.99.3 → 5.100.0

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx

@@ -1,142 +0,0 @@
-import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
-import {
-  fontSize,
-  iconSize,
-} from "../../../../../../core/design-system/index.js";
-import { useChainExplorers } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Container, Line } from "../../../../components/basic.js";
-import { ButtonLink } from "../../../../components/buttons.js";
-import { Text } from "../../../../components/text.js";
-import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
-import type { FiatStatusMeta } from "../pay-transactions/statusMeta.js";
-import { getCurrencyMeta, getFiatIcon } from "./currencies.js";
-
-/**
- * Show a table with the details of a "OnRamp" transaction step in the "Buy with Fiat" flow.
- * - Show OnRamp token as "Receive"
- * - Show fiat amount as "Pay"
- */
-export function OnRampTxDetailsTable(props: {
-  client: ThirdwebClient;
-  token: {
-    chainId: number;
-    address: string;
-    symbol: string;
-    amount: string;
-  };
-  fiat: {
-    currencySymbol: string;
-    amount: string;
-  };
-  statusMeta?: {
-    color: FiatStatusMeta["color"];
-    text: FiatStatusMeta["status"];
-    txHash?: string;
-  };
-}) {
-  const onRampExplorers = useChainExplorers(
-    getCachedChain(props.token.chainId),
-  );
-  const onrampTxHash = props.statusMeta?.txHash;
-  const currencyMeta = getCurrencyMeta(props.fiat.currencySymbol);
-
-  const lineSpacer = (
-    <>
-      <Spacer y="md" />
-      <Line />
-      <Spacer y="md" />
-    </>
-  );
-
-  return (
-    <div>
-      {/* Pay */}
-      <Container
-        flex="row"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm">Pay</Text>
-        <Container
-          flex="column"
-          gap="xxs"
-          style={{
-            alignItems: "flex-end",
-          }}
-        >
-          <Container flex="row" gap="xs" center="y">
-            {getFiatIcon(currencyMeta, "sm")}
-            <Text color="primaryText">
-              {formatNumber(Number(props.fiat.amount), 2)}{" "}
-              {props.fiat.currencySymbol}
-            </Text>
-          </Container>
-        </Container>
-      </Container>
-
-      {lineSpacer}
-
-      {/* Receive */}
-      <TokenInfoRow
-        chainId={props.token.chainId}
-        client={props.client}
-        label="Receive"
-        tokenAmount={props.token.amount}
-        tokenSymbol={props.token.symbol}
-        tokenAddress={props.token.address}
-      />
-
-      {/* Status */}
-      {props.statusMeta && (
-        <>
-          {lineSpacer}
-          <Container
-            flex="row"
-            center="y"
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            <Text>Status</Text>
-            <Container flex="row" gap="xs" center="y">
-              <Text color={props.statusMeta.color}>
-                {props.statusMeta.text}
-              </Text>
-            </Container>
-          </Container>
-        </>
-      )}
-
-      {lineSpacer}
-
-      {/* Transaction Hash link */}
-      {onrampTxHash && onRampExplorers.explorers?.[0]?.url && (
-        <>
-          <Spacer y="md" />
-          <ButtonLink
-            fullWidth
-            variant="outline"
-            href={formatExplorerTxUrl(
-              onRampExplorers.explorers[0]?.url,
-              onrampTxHash,
-            )}
-            target="_blank"
-            gap="xs"
-            style={{
-              fontSize: fontSize.sm,
-            }}
-          >
-            View on Explorer
-            <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
-          </ButtonLink>
-        </>
-      )}
-    </div>
-  );
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx

@@ -1,170 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { getContract } from "../../../../../../../contract/contract.js";
-import { allowance } from "../../../../../../../extensions/erc20/__generated__/IERC20/read/allowance.js";
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import { iconSize } from "../../../../../../core/design-system/index.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";
-import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
-import { SwapFlow } from "../swap/SwapFlow.js";
-import type { PayerInfo } from "../types.js";
-
-export function PostOnRampSwap(props: {
-  title: string;
-  client: ThirdwebClient;
-  buyWithFiatStatus: BuyWithFiatStatus;
-  onBack?: () => void;
-  onDone: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-  payer: PayerInfo;
-  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
-}) {
-  const [lockedOnRampQuote, setLockedOnRampQuote] = useState<
-    BuyWithCryptoQuote | undefined
-  >(undefined);
-
-  const postOnRampQuoteQuery = useQuery({
-    queryKey: ["getPostOnRampQuote", props.buyWithFiatStatus],
-    queryFn: async () => {
-      return await getPostOnRampQuote({
-        client: props.client,
-        buyWithFiatStatus: props.buyWithFiatStatus,
-      });
-    },
-    // stop fetching if a quote is already locked
-    enabled: !lockedOnRampQuote,
-    refetchOnWindowFocus: false,
-  });
-
-  const allowanceQuery = useQuery({
-    queryKey: [
-      "allowance",
-      props.payer.account.address,
-      postOnRampQuoteQuery.data?.approvalData,
-    ],
-    queryFn: () => {
-      if (!postOnRampQuoteQuery.data?.approvalData) {
-        return null;
-      }
-      return allowance({
-        contract: getContract({
-          client: props.client,
-          address: postOnRampQuoteQuery.data.swapDetails.fromToken.tokenAddress,
-          chain: getCachedChain(
-            postOnRampQuoteQuery.data.swapDetails.fromToken.chainId,
-          ),
-        }),
-        spender: postOnRampQuoteQuery.data.approvalData.spenderAddress,
-        owner: props.payer.account.address,
-      });
-    },
-    enabled: !!postOnRampQuoteQuery.data?.approvalData,
-    refetchOnMount: true,
-  });
-
-  useEffect(() => {
-    if (
-      postOnRampQuoteQuery.data &&
-      !lockedOnRampQuote &&
-      !postOnRampQuoteQuery.isRefetching &&
-      !allowanceQuery.isLoading
-    ) {
-      setLockedOnRampQuote(postOnRampQuoteQuery.data);
-    }
-  }, [
-    postOnRampQuoteQuery.data,
-    lockedOnRampQuote,
-    postOnRampQuoteQuery.isRefetching,
-    allowanceQuery.isLoading,
-  ]);
-
-  if (postOnRampQuoteQuery.isError) {
-    return (
-      <Container fullHeight>
-        <Container p="lg">
-          <ModalHeader title={props.title} onBack={props.onBack} />
-        </Container>
-
-        <Container
-          style={{
-            minHeight: "300px",
-          }}
-          flex="column"
-          center="both"
-          p="lg"
-        >
-          <AccentFailIcon size={iconSize["3xl"]} />
-          <Spacer y="xl" />
-          <Text color="primaryText">Failed to get a price quote</Text>
-          <Spacer y="lg" />
-
-          <Button
-            fullWidth
-            variant="primary"
-            onClick={() => {
-              postOnRampQuoteQuery.refetch();
-            }}
-          >
-            Try Again
-          </Button>
-        </Container>
-
-        <Spacer y="xxl" />
-      </Container>
-    );
-  }
-
-  if (!lockedOnRampQuote) {
-    return (
-      <Container fullHeight>
-        <Container p="lg">
-          <ModalHeader title={props.title} onBack={props.onBack} />
-        </Container>
-
-        <Container
-          style={{
-            minHeight: "300px",
-          }}
-          flex="column"
-          center="both"
-        >
-          <Spinner size="xxl" color="accentText" />
-          <Spacer y="xl" />
-          <Text color="primaryText">Getting price quote</Text>
-        </Container>
-
-        <Spacer y="xxl" />
-      </Container>
-    );
-  }
-
-  return (
-    <SwapFlow
-      title={props.title}
-      payer={props.payer}
-      buyWithCryptoQuote={lockedOnRampQuote}
-      client={props.client}
-      onBack={props.onBack}
-      isFiatFlow={true}
-      onDone={props.onDone}
-      onTryAgain={() => {
-        setLockedOnRampQuote(undefined);
-        postOnRampQuoteQuery.refetch();
-      }}
-      transactionMode={props.transactionMode}
-      isEmbed={props.isEmbed}
-      onSuccess={props.onSuccess}
-      approvalAmount={allowanceQuery.data ?? undefined}
-    />
-  );
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx

@@ -1,63 +0,0 @@
-import { useState } from "react";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import type { PayerInfo } from "../types.js";
-import { type BuyWithFiatPartialQuote, FiatSteps } from "./FiatSteps.js";
-import { PostOnRampSwap } from "./PostOnRampSwap.js";
-
-// Note: It is necessary to lock in the fiat-status in state and only pass that to <PostOnRampSwap /> so it does not suddenly change during the swap process.
-
-/**
- * - Show 2 steps UI with step 2 highlighted, on continue button click:
- * - Show swap flow
- */
-export function PostOnRampSwapFlow(props: {
-  title: string;
-  status: BuyWithFiatStatus;
-  quote: BuyWithFiatPartialQuote;
-  client: ThirdwebClient;
-  onBack: () => void;
-  onDone: () => void;
-  onSwapFlowStarted: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-  payer: PayerInfo;
-  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
-}) {
-  const [statusForSwap, setStatusForSwap] = useState<
-    BuyWithFiatStatus | undefined
-  >();
-
-  // step 2 flow
-  if (statusForSwap) {
-    return (
-      <PostOnRampSwap
-        title={props.title}
-        buyWithFiatStatus={statusForSwap}
-        client={props.client}
-        onDone={props.onDone}
-        transactionMode={props.transactionMode}
-        isEmbed={props.isEmbed}
-        payer={props.payer}
-        onSuccess={props.onSuccess}
-      />
-    );
-  }
-
-  // show step 1 and step 2 details
-  return (
-    <FiatSteps
-      title={props.title}
-      client={props.client}
-      onBack={props.onBack}
-      partialQuote={props.quote}
-      step={2}
-      onContinue={() => {
-        props.onSwapFlowStarted();
-        setStatusForSwap(props.status);
-      }}
-      status={props.status}
-    />
-  );
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.tsx

@@ -1,163 +0,0 @@
-"use client";
-import { ArrowRightIcon, CrossCircledIcon } from "@radix-ui/react-icons";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import {
-  fontSize,
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
-import { Skeleton } from "../../../../components/Skeleton.js";
-import { Spinner } from "../../../../components/Spinner.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Text } from "../../../../components/text.js";
-import {
-  BuyTxHistoryButton,
-  BuyTxHistoryButtonHeight,
-} from "./BuyTxHistoryButton.js";
-import {
-  type TxStatusInfo,
-  useBuyTransactionsToShow,
-} from "./useBuyTransactionsToShow.js";
-
-/**
- * @internal
- */
-export function PayTxHistoryList(props: {
-  client: ThirdwebClient;
-  onSelectTx: (tx: TxStatusInfo) => void;
-}) {
-  const {
-    pageIndex,
-    setPageIndex,
-    txInfosToShow,
-    hidePagination,
-    isLoading,
-    pagination,
-  } = useBuyTransactionsToShow(props.client);
-
-  const noTransactions = txInfosToShow.length === 0;
-
-  return (
-    <Container
-      scrollY
-      flex="column"
-      fullHeight
-      style={{
-        width: "100%",
-        minHeight: "250px",
-        maxHeight: "370px",
-        paddingBottom: spacing.lg,
-      }}
-    >
-      <Container flex="column" gap="xs" expand>
-        {noTransactions && !isLoading && (
-          <Container
-            flex="column"
-            gap="md"
-            center="both"
-            color="secondaryText"
-            style={{
-              minHeight: "250px",
-            }}
-          >
-            <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
-            <Text>No Transactions</Text>
-          </Container>
-        )}
-
-        {noTransactions && isLoading && (
-          <Container
-            flex="row"
-            center="both"
-            style={{
-              minHeight: "250px",
-            }}
-          >
-            <Spinner size="xl" color="accentText" />
-          </Container>
-        )}
-
-        {txInfosToShow.length > 0 && (
-          <Container animate="fadein" flex="column" gap="xs">
-            {txInfosToShow.map((txInfo) => {
-              return (
-                <BuyTxHistoryButton
-                  key={
-                    txInfo.type === "swap"
-                      ? txInfo.status.source?.transactionHash
-                      : txInfo.status.intentId
-                  }
-                  txInfo={txInfo}
-                  client={props.client}
-                  onClick={() => {
-                    props.onSelectTx(txInfo);
-                  }}
-                />
-              );
-            })}
-          </Container>
-        )}
-
-        {isLoading && txInfosToShow.length > 0 && (
-          <>
-            <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
-            <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
-            <Skeleton width="100%" height={BuyTxHistoryButtonHeight} />
-          </>
-        )}
-      </Container>
-
-      {pagination && !hidePagination && (
-        <Container py="md">
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: spacing.sm,
-            }}
-          >
-            <Button
-              variant="outline"
-              gap="xs"
-              disabled={pageIndex === 0}
-              data-disabled={pageIndex === 0}
-              style={{
-                fontSize: fontSize.sm,
-                paddingBlock: spacing.sm,
-              }}
-              onClick={() => {
-                setPageIndex((prev) => prev - 1);
-              }}
-            >
-              <ArrowRightIcon
-                width={iconSize.sm}
-                height={iconSize.sm}
-                style={{
-                  transform: "rotate(180deg)",
-                }}
-              />
-              Prev
-            </Button>
-            <Button
-              variant="outline"
-              gap="xs"
-              disabled={!pagination.hasNextPage}
-              data-disabled={!pagination.hasNextPage}
-              style={{
-                fontSize: fontSize.sm,
-                paddingBlock: spacing.sm,
-              }}
-              onClick={() => {
-                setPageIndex((prev) => prev + 1);
-              }}
-            >
-              Next
-              <ArrowRightIcon width={iconSize.sm} height={iconSize.sm} />
-            </Button>
-          </div>
-        </Container>
-      )}
-    </Container>
-  );
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx

@@ -1,127 +0,0 @@
-import styled from "@emotion/styled";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import { spacing } from "../../../../../../core/design-system/index.js";
-import { ChainName } from "../../../../components/ChainName.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 { PayTokenIcon } from "../PayTokenIcon.js";
-import {
-  getBuyWithCryptoStatusMeta,
-  getBuyWithFiatStatusMeta,
-} from "./statusMeta.js";
-import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
-
-export const BuyTxHistoryButtonHeight = "62px";
-
-export function BuyTxHistoryButton(props: {
-  txInfo: TxStatusInfo;
-  client: ThirdwebClient;
-  onClick?: () => void;
-}) {
-  const statusMeta =
-    props.txInfo.type === "swap"
-      ? getBuyWithCryptoStatusMeta(props.txInfo.status)
-      : getBuyWithFiatStatusMeta(props.txInfo.status);
-
-  return (
-    <TxButton
-      onClick={props.onClick}
-      variant="secondary"
-      fullWidth
-      style={{
-        paddingBlock: spacing.sm,
-      }}
-    >
-      <Container
-        flex="row"
-        center="y"
-        gap="sm"
-        style={{
-          flex: 1,
-        }}
-      >
-        <PayTokenIcon
-          client={props.client}
-          chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
-          size="md"
-          token={{
-            address: props.txInfo.status.quote.toToken.tokenAddress,
-          }}
-        />
-
-        <div
-          style={{
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-          }}
-        >
-          {/* Row 1 */}
-          <Container
-            flex="row"
-            gap="xs"
-            center="y"
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            <Text size="sm" color="primaryText">
-              Buy{" "}
-              {formatNumber(
-                Number(
-                  props.txInfo.type === "swap"
-                    ? props.txInfo.status.quote.toAmount
-                    : props.txInfo.status.quote.estimatedToTokenAmount,
-                ),
-                6,
-              )}{" "}
-              {props.txInfo.status.quote.toToken.symbol}
-            </Text>
-          </Container>
-
-          <Spacer y="xxs" />
-
-          {/* Row 2 */}
-          <Container
-            flex="row"
-            center="y"
-            gap="xxs"
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            <ChainName
-              chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
-              size="xs"
-              client={props.client}
-            />
-          </Container>
-        </div>
-      </Container>
-
-      {/* Status */}
-      <Container flex="row" gap="xxs" center="y">
-        <Text size="xs" color={statusMeta.color}>
-          {statusMeta.status}
-        </Text>
-      </Container>
-    </TxButton>
-  );
-}
-
-const TxButton = /* @__PURE__ */ styled(Button)(() => {
-  const theme = useCustomTheme();
-  return {
-    background: theme.colors.tertiaryBg,
-    "&:hover": {
-      background: theme.colors.secondaryButtonBg,
-    },
-    height: BuyTxHistoryButtonHeight,
-  };
-});