thirdweb 5.99.3 → 5.100.0

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

@@ -1,138 +0,0 @@
-import { useState } from "react";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type {
-  BuyWithFiatStatus,
-  ValidBuyWithFiatStatus,
-} from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import { useBuyWithFiatStatus } from "../../../../../../core/hooks/pay/useBuyWithFiatStatus.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
-import { OnRampTxDetailsTable } from "../fiat/FiatTxDetailsTable.js";
-import { PostOnRampSwapFlow } from "../fiat/PostOnRampSwapFlow.js";
-import type { PayerInfo } from "../types.js";
-import { getBuyWithFiatStatusMeta } from "./statusMeta.js";
-
-export function FiatDetailsScreen(props: {
-  title: string;
-  status: ValidBuyWithFiatStatus;
-  onBack: () => void;
-  client: ThirdwebClient;
-  onDone: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-  payer: PayerInfo;
-}) {
-  const initialStatus = props.status;
-  const [stopPolling, setStopPolling] = useState(false);
-
-  const statusQuery = useBuyWithFiatStatus(
-    stopPolling
-      ? undefined
-      : {
-          client: props.client,
-          intentId: initialStatus.intentId,
-        },
-  );
-
-  const status: ValidBuyWithFiatStatus =
-    (statusQuery.data?.status === "NOT_FOUND" ? undefined : statusQuery.data) ||
-    initialStatus;
-
-  const hasTwoSteps = isSwapRequiredAfterOnRamp(status);
-  const statusMeta = getBuyWithFiatStatusMeta(status);
-
-  if (hasTwoSteps) {
-    const fiatQuote = status.quote;
-    return (
-      <PostOnRampSwapFlow
-        title={props.title}
-        client={props.client}
-        status={status}
-        onBack={props.onBack}
-        transactionMode={props.transactionMode}
-        isEmbed={props.isEmbed}
-        quote={{
-          fromCurrencyAmount: fiatQuote.fromCurrencyWithFees.amount,
-          fromCurrencySymbol: fiatQuote.fromCurrencyWithFees.currencySymbol,
-          onRampTokenAmount: fiatQuote.estimatedOnRampAmount,
-          toTokenAmount: fiatQuote.estimatedToTokenAmount,
-          onRampToken: {
-            chainId: fiatQuote.onRampToken.chainId,
-            tokenAddress: fiatQuote.onRampToken.tokenAddress,
-            name: fiatQuote.onRampToken.name,
-            symbol: fiatQuote.onRampToken.symbol,
-          },
-          toToken: {
-            chainId: fiatQuote.toToken.chainId,
-            tokenAddress: fiatQuote.toToken.tokenAddress,
-            name: fiatQuote.toToken.name,
-            symbol: fiatQuote.toToken.symbol,
-          },
-        }}
-        onDone={props.onDone}
-        onSwapFlowStarted={() => {
-          setStopPolling(true);
-        }}
-        payer={props.payer}
-        // viewing history - ignore onSuccess
-        onSuccess={undefined}
-      />
-    );
-  }
-
-  return (
-    <Container>
-      <Container p="lg">
-        <ModalHeader title="Transaction Details" onBack={props.onBack} />
-      </Container>
-
-      <Line />
-
-      <Container p="lg">
-        <OnRampTxDetailsTable
-          client={props.client}
-          token={
-            status.source
-              ? {
-                  chainId: status.source.token.chainId,
-                  address: status.source.token.tokenAddress,
-                  symbol: status.source.token.symbol || "",
-                  amount: status.source.amount,
-                }
-              : {
-                  address: status.quote.onRampToken.tokenAddress,
-                  amount: status.quote.estimatedOnRampAmount,
-                  chainId: status.quote.onRampToken.chainId,
-                  symbol: status.quote.onRampToken.symbol || "",
-                }
-          }
-          fiat={{
-            amount: status.quote.fromCurrencyWithFees.amount,
-            currencySymbol: status.quote.fromCurrencyWithFees.currencySymbol,
-          }}
-          statusMeta={{
-            color: statusMeta.color,
-            text: statusMeta.status,
-            txHash: status.source?.transactionHash,
-          }}
-        />
-      </Container>
-    </Container>
-  );
-}
-
-// if the toToken is the same as the onRampToken, no swap is required
-function isSwapRequiredAfterOnRamp(buyWithFiatStatus: BuyWithFiatStatus) {
-  if (buyWithFiatStatus.status === "NOT_FOUND") {
-    return false;
-  }
-
-  const sameChain =
-    buyWithFiatStatus.quote.toToken.chainId ===
-    buyWithFiatStatus.quote.onRampToken.chainId;
-
-  const sameToken =
-    buyWithFiatStatus.quote.toToken.tokenAddress ===
-    buyWithFiatStatus.quote.onRampToken.tokenAddress;
-
-  return !(sameChain && sameToken);
-}

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

@@ -1,45 +0,0 @@
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type { PayerInfo } from "../types.js";
-import { FiatDetailsScreen } from "./FiatDetailsScreen.js";
-import { SwapDetailsScreen } from "./SwapDetailsScreen.js";
-import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
-
-export function TxDetailsScreen(props: {
-  title: string;
-  client: ThirdwebClient;
-  statusInfo: TxStatusInfo;
-  onBack: () => void;
-  onDone: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-  payer: PayerInfo;
-}) {
-  const { statusInfo } = props;
-
-  if (statusInfo.type === "swap") {
-    return (
-      <SwapDetailsScreen
-        client={props.client}
-        status={statusInfo.status}
-        onBack={props.onBack}
-      />
-    );
-  }
-
-  if (statusInfo.type === "fiat") {
-    return (
-      <FiatDetailsScreen
-        title={props.title}
-        client={props.client}
-        status={statusInfo.status}
-        onBack={props.onBack}
-        onDone={props.onDone}
-        transactionMode={props.transactionMode}
-        isEmbed={props.isEmbed}
-        payer={props.payer}
-      />
-    );
-  }
-
-  return null;
-}

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

@@ -1,191 +0,0 @@
-import { type UseQueryOptions, useQueries } from "@tanstack/react-query";
-import { useState, useSyncExternalStore } from "react";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import {
-  type ValidBuyWithCryptoStatus,
-  getBuyWithCryptoStatus,
-} from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import {
-  type ValidBuyWithFiatStatus,
-  getBuyWithFiatStatus,
-} from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import { useBuyHistory } from "../../../../../../core/hooks/pay/useBuyHistory.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
-import { pendingTransactions } from "../swap/pendingSwapTx.js";
-
-export type TxStatusInfo =
-  | {
-      type: "swap";
-      status: ValidBuyWithCryptoStatus;
-    }
-  | {
-      type: "fiat";
-      status: ValidBuyWithFiatStatus;
-    };
-
-export function useBuyTransactionsToShow(client: ThirdwebClient) {
-  const account = useActiveAccount();
-  const [pageIndex, setPageIndex] = useState(0);
-  const txStatusList: TxStatusInfo[] = [];
-  const PAGE_SIZE = 10;
-
-  const buyHistory = useBuyHistory(
-    {
-      walletAddress: account?.address || "",
-      start: pageIndex * PAGE_SIZE,
-      count: PAGE_SIZE,
-      client,
-    },
-    {
-      refetchInterval: 10 * 1000, // 10 seconds
-    },
-  );
-
-  const pendingTxStoreValue = useSyncExternalStore(
-    pendingTransactions.subscribe,
-    pendingTransactions.getValue,
-  );
-
-  const pendingStatusQueries = useQueries<
-    UseQueryOptions<TxStatusInfo | null>[]
-  >({
-    queries: pendingTxStoreValue.map((tx) => {
-      return {
-        queryKey: ["pending-tx-status", tx],
-        queryFn: async () => {
-          if (tx.type === "swap") {
-            const swapStatus = await getBuyWithCryptoStatus({
-              client: client,
-              transactionHash: tx.txHash,
-              chainId: tx.chainId,
-            });
-
-            if (
-              swapStatus.status === "NOT_FOUND" ||
-              swapStatus.status === "NONE"
-            ) {
-              return null;
-            }
-
-            return {
-              type: "swap",
-              status: swapStatus,
-            };
-          }
-
-          const fiatStatus = await getBuyWithFiatStatus({
-            client: client,
-            intentId: tx.intentId,
-          });
-
-          if (
-            fiatStatus.status === "NOT_FOUND" ||
-            fiatStatus.status === "NONE"
-          ) {
-            return null;
-          }
-
-          return {
-            type: "fiat",
-            status: fiatStatus,
-          };
-        },
-        refetchInterval: 10 * 1000, // 10 seconds
-      };
-    }),
-  });
-
-  if (pendingStatusQueries.length > 0 && pageIndex === 0) {
-    for (const query of pendingStatusQueries) {
-      if (query.data) {
-        const txStatusInfo = query.data;
-
-        // if already present in endpoint - don't add it
-        if (buyHistory.data) {
-          if (txStatusInfo.type === "swap") {
-            const isPresent = buyHistory.data.page.find((tx) => {
-              if (
-                "buyWithCryptoStatus" in tx &&
-                tx.buyWithCryptoStatus.status !== "NOT_FOUND"
-              ) {
-                return (
-                  tx.buyWithCryptoStatus.source?.transactionHash ===
-                  txStatusInfo.status.source?.transactionHash
-                );
-              }
-              return false;
-            });
-
-            if (!isPresent) {
-              txStatusList.push(txStatusInfo);
-            }
-          }
-
-          if (txStatusInfo.type === "fiat") {
-            const isPresent = buyHistory.data.page.find((tx) => {
-              if (
-                "buyWithFiatStatus" in tx &&
-                tx.buyWithFiatStatus.status !== "NOT_FOUND"
-              ) {
-                return (
-                  tx.buyWithFiatStatus.intentId === txStatusInfo.status.intentId
-                );
-              }
-              return false;
-            });
-
-            if (!isPresent) {
-              txStatusList.push(txStatusInfo);
-            }
-          }
-        } else {
-          // if no buy history available for this walllet - add without duplicate check
-          txStatusList.push(txStatusInfo);
-        }
-      }
-    }
-  }
-
-  if (buyHistory.data) {
-    for (const tx of buyHistory.data.page) {
-      if ("buyWithCryptoStatus" in tx) {
-        if (
-          tx.buyWithCryptoStatus.status !== "NOT_FOUND" &&
-          tx.buyWithCryptoStatus.status !== "NONE"
-        ) {
-          txStatusList.push({
-            type: "swap",
-            status: tx.buyWithCryptoStatus,
-          });
-        }
-      } else {
-        if (
-          tx.buyWithFiatStatus.status !== "NOT_FOUND" &&
-          tx.buyWithFiatStatus.status !== "NONE"
-        ) {
-          txStatusList.push({
-            type: "fiat",
-            status: tx.buyWithFiatStatus,
-          });
-        }
-      }
-    }
-  }
-
-  const hidePagination =
-    !buyHistory.data ||
-    (buyHistory.data && !buyHistory.data.hasNextPage && pageIndex === 0);
-
-  return {
-    pageIndex,
-    setPageIndex,
-    txInfosToShow: txStatusList,
-    hidePagination,
-    isLoading: buyHistory.isLoading,
-    pagination: buyHistory.data
-      ? {
-          hasNextPage: buyHistory.data.hasNextPage,
-        }
-      : undefined,
-  };
-}