thirdweb 5.105.9 → 5.105.10

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

@@ -1,20 +0,0 @@
-import { CrossCircledIcon } from "@radix-ui/react-icons";
-import { iconSize } from "../../../../../../core/design-system/index.js";
-import { Container } from "../../../../components/basic.js";
-import { Text } from "../../../../components/text.js";
-
-export function ErrorText(props: { title: string; message: string }) {
-  return (
-    <Container flex="column" gap="xxs">
-      <Container center="both" color="danger" flex="row" gap="xxs">
-        <CrossCircledIcon height={iconSize.sm} width={iconSize.sm} />
-        <Text color="danger" size="sm">
-          {props.title}
-        </Text>
-      </Container>
-      <Text center size="xs">
-        {props.message}
-      </Text>
-    </Container>
-  );
-}

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

@@ -1,109 +0,0 @@
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { Container, Line } from "../../../../components/basic.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Text } from "../../../../components/text.js";
-
-/**
- * @internal
- */
-export function SwapFees(props: { quote: BuyWithCryptoQuote }) {
-  return (
-    <Container
-      flex="column"
-      gap="xs"
-      style={{
-        alignItems: "flex-start",
-      }}
-    >
-      {props.quote.processingFees.map((fee) => {
-        const feeAmount = formatNumber(Number(fee.amount), 6);
-        return (
-          <Container
-            flex="row"
-            gap="xxs"
-            key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-          >
-            <Text color="primaryText" size="sm">
-              {feeAmount === 0 ? "~" : ""}
-              {feeAmount} {fee.token.symbol}
-            </Text>
-            <Text color="secondaryText" size="sm">
-              (${(fee.amountUSDCents / 100).toFixed(2)})
-            </Text>
-          </Container>
-        );
-      })}
-    </Container>
-  );
-}
-
-/**
- * @internal
- */
-export function FiatFees(props: { quote: BuyWithFiatQuote }) {
-  return (
-    <Container flex="column" gap="xs">
-      {/* Amount ( without fees included ) */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <Text color="secondaryText" inline>
-          Amount
-        </Text>
-        <Text color="primaryText" inline>
-          {formatNumber(Number(props.quote.fromCurrency.amount), 2)}{" "}
-          {props.quote.fromCurrency.currencySymbol}
-        </Text>
-      </div>
-
-      {/* Processing Fees */}
-      {props.quote.processingFees.map((fee, i) => {
-        const feeAmount = formatNumber(Number(fee.amount), 6);
-
-        return (
-          <div
-            // biome-ignore lint/suspicious/noArrayIndexKey: index is ok
-            key={i}
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-            }}
-          >
-            <Text color="secondaryText" inline>
-              {fee.feeType === "NETWORK" ? "Network Fee" : "Processing Fee"}
-            </Text>
-
-            <Text color="primaryText" inline>
-              {feeAmount === 0 ? "~" : ""} {feeAmount} {fee.currencySymbol}
-            </Text>
-          </div>
-        );
-      })}
-
-      <Spacer y="xxs" />
-      <Line />
-      <Spacer y="xxs" />
-
-      {/* Total Amount  */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-        }}
-      >
-        <Text color="secondaryText" inline>
-          Total
-        </Text>
-        <Text color="primaryText" inline>
-          {formatNumber(Number(props.quote.fromCurrencyWithFees.amount), 6)}{" "}
-          {props.quote.fromCurrencyWithFees.currencySymbol}
-        </Text>
-      </div>
-    </Container>
-  );
-}

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

@@ -1,114 +0,0 @@
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  fontSize,
-  radius,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
-import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
-import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
-import { Container } from "../../../../components/basic.js";
-import { Skeleton } from "../../../../components/Skeleton.js";
-import { Text } from "../../../../components/text.js";
-import { TokenRow } from "../../../../components/token/TokenRow.js";
-import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import { formatTokenBalance } from "../../formatTokenBalance.js";
-import { isNativeToken, type NativeToken } from "../../nativeToken.js";
-import { WalletRow } from "./WalletRow.js";
-
-/**
- * Shows an amount "value" and renders the selected token and chain
- * It also renders the buttons to select the token and chain
- * It also renders the balance of active wallet for the selected token in selected chain
- * @internal
- */
-export function PayWithCryptoQuoteInfo(props: {
-  value: string;
-  chain: Chain | undefined;
-  token: TokenInfo | NativeToken | undefined;
-  isLoading: boolean;
-  client: ThirdwebClient;
-  freezeChainAndTokenSelection?: boolean;
-  payerAccount: Account;
-  swapRequired: boolean;
-  onSelectToken: () => void;
-}) {
-  const theme = useCustomTheme();
-  const balanceQuery = useWalletBalance(
-    {
-      address: props.payerAccount.address,
-      chain: props.chain,
-      client: props.client,
-      tokenAddress: isNativeToken(props.token)
-        ? undefined
-        : props.token?.address,
-    },
-    {
-      enabled: !!props.chain && !!props.token,
-    },
-  );
-
-  return (
-    <Container
-      bg="tertiaryBg"
-      style={{
-        border: `1px solid ${theme.colors.borderColor}`,
-        borderRadius: radius.lg,
-        ...(props.swapRequired
-          ? {
-              borderBottom: "none",
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-            }
-          : {}),
-      }}
-    >
-      {/* Wallet and balance */}
-      <Container
-        flex="row"
-        gap="sm"
-        style={{
-          borderBottom: `1px solid ${theme.colors.borderColor}`,
-          justifyContent: "space-between",
-          padding: spacing.sm,
-        }}
-      >
-        <WalletRow address={props.payerAccount.address} client={props.client} />
-        {props.token && props.chain && balanceQuery.data ? (
-          <Container center="y" flex="row" gap="3xs">
-            <Text color="secondaryText" size="xs" weight={500}>
-              {formatTokenBalance(balanceQuery.data, false, 4)}
-            </Text>
-            <TokenSymbol
-              chain={props.chain}
-              color="secondaryText"
-              size="xs"
-              token={props.token}
-            />
-          </Container>
-        ) : props.token && props.chain && balanceQuery.isLoading ? (
-          <Skeleton height={fontSize.xs} width="70px" />
-        ) : null}
-      </Container>
-      {/* Quoted price & token selector */}
-      <TokenRow
-        chain={props.chain}
-        client={props.client}
-        isLoading={props.isLoading}
-        onSelectToken={props.onSelectToken}
-        style={{
-          border: "none",
-          borderBottomLeftRadius:
-            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
-          borderBottomRightRadius:
-            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
-          borderRadius: 0,
-        }}
-        token={props.token}
-        value={props.value}
-      />
-    </Container>
-  );
-}

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

@@ -1,117 +0,0 @@
-import { useMemo, useState } from "react";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
-import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
-import type { PayerInfo } from "../types.js";
-import { SwapConfirmationScreen } from "./ConfirmationScreen.js";
-import { SwapStatusScreen } from "./SwapStatusScreen.js";
-
-type SwapFlowProps = {
-  title: string;
-  onBack?: () => void;
-  buyWithCryptoQuote: BuyWithCryptoQuote;
-  payer: PayerInfo;
-  client: ThirdwebClient;
-  isFiatFlow: boolean;
-  onDone: () => void;
-  onTryAgain: () => void;
-  transactionMode: boolean;
-  isEmbed: boolean;
-  onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
-  approvalAmount?: bigint;
-};
-
-export function SwapFlow(props: SwapFlowProps) {
-  const [swapTxHash, setSwapTxHash] = useState<string | undefined>();
-
-  const quote = props.buyWithCryptoQuote;
-
-  const fromChain = useMemo(
-    () => getCachedChain(quote.swapDetails.fromToken.chainId),
-    [quote],
-  );
-
-  const toChain = useMemo(
-    () => getCachedChain(quote.swapDetails.toToken.chainId),
-    [quote],
-  );
-
-  const fromTokenSymbol = quote.swapDetails.fromToken.symbol || "";
-  const toTokenSymbol = quote.swapDetails.toToken.symbol || "";
-
-  const fromAmount = quote.swapDetails.fromAmount;
-  const toAmount = quote.swapDetails.toAmount;
-
-  const _toToken = quote.swapDetails.toToken;
-  const _fromToken = quote.swapDetails.fromToken;
-
-  const toToken: ERC20OrNativeToken = useMemo(() => {
-    if (_toToken.tokenAddress === NATIVE_TOKEN_ADDRESS) {
-      return NATIVE_TOKEN;
-    }
-
-    const tokenInfo: TokenInfo = {
-      address: _toToken.tokenAddress,
-      name: _toToken.name || "",
-      symbol: _toToken.symbol || "",
-    };
-    return tokenInfo;
-  }, [_toToken]);
-
-  const fromToken: ERC20OrNativeToken = useMemo(() => {
-    if (_fromToken.tokenAddress === NATIVE_TOKEN_ADDRESS) {
-      return NATIVE_TOKEN;
-    }
-
-    const tokenInfo: TokenInfo = {
-      address: _fromToken.tokenAddress,
-      name: _fromToken.name || "",
-      symbol: _fromToken.symbol || "",
-    };
-    return tokenInfo;
-  }, [_fromToken]);
-
-  if (swapTxHash) {
-    return (
-      <SwapStatusScreen
-        client={props.client}
-        fromChain={fromChain}
-        isEmbed={props.isEmbed}
-        onBack={props.onBack}
-        onDone={props.onDone}
-        onSuccess={props.onSuccess}
-        onTryAgain={props.onTryAgain}
-        quote={quote}
-        swapTxHash={swapTxHash}
-        title={props.title}
-        transactionMode={props.transactionMode}
-      />
-    );
-  }
-
-  return (
-    <SwapConfirmationScreen
-      client={props.client}
-      fromAmount={fromAmount}
-      fromChain={fromChain}
-      fromToken={fromToken}
-      fromTokenSymbol={fromTokenSymbol}
-      isFiatFlow={props.isFiatFlow}
-      onBack={props.onBack}
-      onTryAgain={props.onTryAgain}
-      payer={props.payer}
-      preApprovedAmount={props.approvalAmount}
-      quote={quote}
-      setSwapTxHash={setSwapTxHash}
-      title={props.title}
-      toAmount={toAmount}
-      toChain={toChain}
-      toToken={toToken}
-      toTokenSymbol={toTokenSymbol}
-    />
-  );
-}