thirdweb 5.105.9 → 5.105.10

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

@@ -1,54 +0,0 @@
-import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Link } from "../../../../components/text.js";
-import { getProviderLabel } from "../utils.js";
-/**
- * @internal
- */
-
-export function Providers(props: {
-  supportedProviders: FiatProvider[];
-  preferredProvider?: FiatProvider;
-  onSelect: (provider: FiatProvider) => void;
-}) {
-  return (
-    <Container
-      expand
-      flex="column"
-      gap="sm"
-      style={{
-        alignItems: "flex-start",
-      }}
-    >
-      {props.supportedProviders.map((provider) => (
-        <Container
-          expand
-          flex="row"
-          key={provider}
-          style={{
-            justifyContent: "space-between",
-          }}
-        >
-          <Button
-            fullWidth
-            onClick={() => props.onSelect(provider)}
-            variant={"link"}
-          >
-            <Link
-              color={
-                props.preferredProvider === provider
-                  ? "primaryText"
-                  : "secondaryText"
-              }
-              hoverColor="primaryText"
-              size="sm"
-            >
-              {getProviderLabel(provider)}
-            </Link>
-          </Button>
-        </Container>
-      ))}
-    </Container>
-  );
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useEnabledPaymentMethods.ts

@@ -1,65 +0,0 @@
-import type { Chain } from "../../../../../../../chains/types.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
-import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
-
-// Based on what toToken, toChain, and supportedDestinations are, determine which payment methods should be enabled
-// change the current method if it should be disabled
-// return whether the payment selection should be shown or not ( if only one payment method is enabled, don't show the selection )
-export type PaymentMethods = {
-  buyWithFiatEnabled: boolean;
-  buyWithCryptoEnabled: boolean;
-};
-
-export function useEnabledPaymentMethods(options: {
-  payOptions: PayUIOptions;
-  supportedDestinations: SupportedChainAndTokens;
-  toChain: Chain;
-  toToken: ERC20OrNativeToken;
-}): PaymentMethods {
-  const { payOptions, supportedDestinations, toChain, toToken } = options;
-
-  function getEnabledPayMethodsForSelectedToken(): {
-    fiat: boolean;
-    swap: boolean;
-  } {
-    const chain = supportedDestinations.find((c) => c.chain.id === toChain.id);
-    if (!chain) {
-      return {
-        fiat: false,
-        swap: false,
-      };
-    }
-
-    const toTokenAddress = isNativeToken(toToken)
-      ? NATIVE_TOKEN_ADDRESS
-      : toToken.address;
-
-    const tokenInfo = chain.tokens.find(
-      (t) => t.address.toLowerCase() === toTokenAddress.toLowerCase(),
-    );
-
-    if (!tokenInfo) {
-      return {
-        fiat: true,
-        swap: true,
-      };
-    }
-
-    return {
-      fiat: tokenInfo.buyWithFiatEnabled,
-      swap: tokenInfo.buyWithCryptoEnabled,
-    };
-  }
-
-  const { fiat, swap } = getEnabledPayMethodsForSelectedToken();
-
-  const buyWithFiatEnabled = payOptions.buyWithFiat !== false && fiat;
-  const buyWithCryptoEnabled = payOptions.buyWithCrypto !== false && swap;
-
-  return {
-    buyWithCryptoEnabled,
-    buyWithFiatEnabled,
-  };
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -1,193 +0,0 @@
-import { useEffect, useState } from "react";
-import { polygon } from "../../../../../../../chains/chain-definitions/polygon.js";
-import type { Chain } from "../../../../../../../chains/types.js";
-import type {
-  FundWalletOptions,
-  PayUIOptions,
-} from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/useActiveWalletChain.js";
-import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
-import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
-import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
-import {
-  type CurrencyMeta,
-  currencies,
-  usdCurrency,
-} from "../fiat/currencies.js";
-import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
-
-type SupportedSourcesInputData = {
-  chain: Chain;
-  tokens: {
-    address: string;
-    buyWithCryptoEnabled: boolean;
-    buyWithFiatEnabled: boolean;
-    name: string;
-    symbol: string;
-  }[];
-};
-
-// handle states for token and chain selection
-export function useToTokenSelectionStates(options: {
-  payOptions: PayUIOptions;
-  supportedDestinations: SupportedChainAndTokens;
-}) {
-  const { payOptions, supportedDestinations } = options;
-  // --------------------------------------------------------------------------
-  // buy token amount ---------------------------------------------------------
-  // NOTE - for transaction / direct payment modes, the token amount is set when the user tap continue
-  const prefillBuy = (payOptions as FundWalletOptions)?.prefillBuy;
-  const activeChain = useActiveWalletChain();
-  const initialTokenAmount = prefillBuy?.amount || "";
-  const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
-  const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
-
-  useEffect(() => {
-    if (prefillBuy?.amount) {
-      setTokenAmount(prefillBuy.amount);
-    }
-    if (prefillBuy?.chain) {
-      setToChain(prefillBuy.chain);
-    }
-    if (prefillBuy?.token) {
-      setToToken(prefillBuy.token as TokenInfo);
-    }
-  }, [prefillBuy?.amount, prefillBuy?.chain, prefillBuy?.token]);
-
-  // Destination chain and token selection -----------------------------------
-  const [toChain, setToChain] = useState<Chain>(
-    // use prefill chain if available
-    prefillBuy?.chain ||
-      (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain) ||
-      // use active chain if its supported as destination
-      supportedDestinations.find((x) => x.chain.id === activeChain?.id)
-        ?.chain ||
-      // default to the first chain in supportedDestinations, or polygon if nothing is found at all
-      supportedDestinations[0]?.chain ||
-      polygon,
-  );
-
-  const [toToken, setToToken] = useState<ERC20OrNativeToken>(
-    (prefillBuy?.token as TokenInfo) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
-      NATIVE_TOKEN,
-  );
-
-  return {
-    deferredTokenAmount,
-    setToChain,
-    setTokenAmount,
-    setToToken,
-    toChain,
-    tokenAmount,
-    toToken,
-  };
-}
-
-export function useFromTokenSelectionStates(options: {
-  payOptions: PayUIOptions;
-  supportedSources: SupportedSourcesInputData[];
-}) {
-  const { payOptions } = options;
-
-  // TODO (pay) - auto select token based on connected wallet balances
-
-  // Source token and chain selection ---------------------------------------------------
-  const [fromChain_, setFromChain] = useState<Chain>();
-
-  // use prefill chain if available
-  const fromChainDevSpecified =
-    (payOptions.buyWithCrypto !== false &&
-      payOptions.buyWithCrypto?.prefillSource?.chain) ||
-    (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
-    (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
-
-  const fromChain = fromChain_ || fromChainDevSpecified || undefined;
-
-  const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
-
-  // use prefill token if available
-  const fromTokenDevSpecified =
-    (payOptions.buyWithCrypto !== false &&
-      payOptions.buyWithCrypto?.prefillSource?.token) ||
-    (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
-
-  // supported tokens query in here
-  const fromToken = fromToken_ || fromTokenDevSpecified || undefined;
-
-  return {
-    fromChain,
-    fromToken,
-    setFromChain,
-    setFromToken,
-  };
-}
-
-export function useFiatCurrencySelectionStates(options: {
-  payOptions: PayUIOptions;
-}) {
-  const { payOptions } = options;
-
-  // --------------------------------------------------------------------------
-  const devSpecifiedDefaultCurrency =
-    payOptions.buyWithFiat !== false
-      ? payOptions.buyWithFiat?.prefillSource?.currency
-      : undefined;
-
-  const defaultSelectedCurrencyShorthand =
-    devSpecifiedDefaultCurrency || getDefaultCurrencyBasedOnLocation();
-
-  const [selectedCurrency, setSelectedCurrency] = useState(
-    currencies.find((x) => x.shorthand === defaultSelectedCurrencyShorthand) ||
-      usdCurrency,
-  );
-
-  return {
-    selectedCurrency,
-    setSelectedCurrency,
-  };
-}
-
-function getDefaultCurrencyBasedOnLocation(): CurrencyMeta["shorthand"] {
-  // if Intl is not supported - browser throws
-  try {
-    const timeZone = Intl.DateTimeFormat()
-      .resolvedOptions()
-      .timeZone.toLowerCase();
-
-    // Europe/London -> GBP
-    if (timeZone.includes("london")) {
-      return "GBP";
-    }
-
-    // Europe/* -> EUR
-    if (timeZone.includes("europe")) {
-      return "EUR";
-    }
-
-    // Japan
-    if (timeZone.includes("japan")) {
-      return "JPY";
-    }
-
-    // canada
-    if (timeZone.includes("canada")) {
-      return "CAD";
-    }
-
-    // australia
-    if (timeZone.includes("australia")) {
-      return "AUD";
-    }
-
-    // new zealand
-    if (timeZone.includes("new zealand")) {
-      return "NZD";
-    }
-
-    return "USD";
-  } catch {
-    return "USD";
-  }
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/openOnRamppopup.tsx

@@ -1,12 +0,0 @@
-export function openOnrampPopup(link: string, theme: string) {
-  const height = 750;
-  const width = 500;
-  const top = (window.innerHeight - height) / 2;
-  const left = (window.innerWidth - width) / 2;
-
-  return window.open(
-    `${link}&theme=${theme}`,
-    "thirdweb Pay",
-    `width=${width}, height=${height}, top=${top}, left=${left}`,
-  );
-}

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

@@ -1,294 +0,0 @@
-import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
-import {
-  fontSize,
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
-import {
-  useChainExplorers,
-  useChainName,
-} from "../../../../../../core/hooks/others/useChainQuery.js";
-import { Container, Line } from "../../../../components/basic.js";
-import { ButtonLink } from "../../../../components/buttons.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Text } from "../../../../components/text.js";
-import { WalletRow } from "../swap/WalletRow.js";
-import { getBuyWithCryptoStatusMeta, type StatusMeta } from "./statusMeta.js";
-import { TokenInfoRow } from "./TokenInfoRow.js";
-
-type SwapTxDetailsData = {
-  fromToken: {
-    chainId: number;
-    symbol: string;
-    address: string;
-    amount: string;
-  };
-  quotedToToken: {
-    chainId: number;
-    symbol: string;
-    address: string;
-    amount: string;
-  };
-  gotToken?: {
-    chainId: number;
-    symbol: string;
-    address: string;
-    amount: string;
-  };
-  statusMeta?: StatusMeta;
-  sourceTxHash?: string;
-  destinationTxHash?: string;
-  isPartialSuccess: boolean;
-  estimatedDuration: number;
-  fromAddress: string;
-  toAddress: string;
-};
-
-export function SwapTxDetailsTable(
-  props:
-    | {
-        type: "quote";
-        quote: BuyWithCryptoQuote;
-        client: ThirdwebClient;
-      }
-    | {
-        client: ThirdwebClient;
-        type: "status";
-        status: ValidBuyWithCryptoStatus;
-        hideStatusRow?: boolean;
-      },
-) {
-  let uiData: SwapTxDetailsData;
-  let showStatusRow = true;
-  if (props.type === "status") {
-    const status = props.status;
-    if (props.hideStatusRow) {
-      showStatusRow = false;
-    }
-
-    const isPartialSuccess =
-      status.status === "COMPLETED" && status.subStatus === "PARTIAL_SUCCESS";
-
-    uiData = {
-      destinationTxHash: status.destination?.transactionHash,
-      estimatedDuration: status.quote.estimated.durationSeconds || 0,
-      fromAddress: status.fromAddress,
-      fromToken: {
-        address: status.quote.fromToken.tokenAddress,
-        amount: status.quote.fromAmount,
-        chainId: status.quote.fromToken.chainId,
-        symbol: status.quote.fromToken.symbol || "",
-      },
-      gotToken: status.destination
-        ? {
-            address: status.destination.token.tokenAddress,
-            amount: status.destination.amount,
-            chainId: status.destination.token.chainId,
-            symbol: status.destination.token.symbol || "",
-          }
-        : undefined,
-      isPartialSuccess,
-      quotedToToken: {
-        address: status.quote.toToken.tokenAddress,
-        amount: status.quote.toAmount,
-        chainId: status.quote.toToken.chainId,
-        symbol: status.quote.toToken.symbol || "",
-      },
-      sourceTxHash: status.source?.transactionHash,
-      statusMeta: getBuyWithCryptoStatusMeta(status),
-      toAddress: status.toAddress,
-    };
-  } else {
-    const quote = props.quote;
-    uiData = {
-      estimatedDuration: quote.swapDetails.estimated.durationSeconds || 0,
-      fromAddress: quote.swapDetails.fromAddress,
-      fromToken: {
-        address: quote.swapDetails.fromToken.tokenAddress,
-        amount: quote.swapDetails.fromAmount,
-        chainId: quote.swapDetails.fromToken.chainId,
-        symbol: quote.swapDetails.fromToken.symbol || "",
-      },
-      isPartialSuccess: false,
-      quotedToToken: {
-        address: quote.swapDetails.toToken.tokenAddress,
-        amount: quote.swapDetails.toAmount,
-        chainId: quote.swapDetails.toToken.chainId,
-        symbol: quote.swapDetails.toToken.symbol || "",
-      },
-      toAddress: quote.swapDetails.toAddress,
-    };
-  }
-
-  const { client } = props;
-
-  const {
-    fromToken,
-    quotedToToken: toToken,
-    statusMeta,
-    sourceTxHash,
-    destinationTxHash,
-    isPartialSuccess,
-    gotToken,
-  } = uiData;
-
-  const fromChainId = fromToken.chainId;
-  const toChainId = toToken.chainId;
-
-  const fromChainName = useChainName(getCachedChain(fromChainId));
-  const fromChainExplorers = useChainExplorers(getCachedChain(fromChainId));
-  const toChainName = useChainName(getCachedChain(toChainId));
-  const toChainExplorers = useChainExplorers(getCachedChain(toChainId));
-
-  const lineSpacer = (
-    <>
-      <Spacer y="md" />
-      <Line />
-      <Spacer y="md" />
-    </>
-  );
-
-  return (
-    <div>
-      {/* Pay */}
-      <TokenInfoRow
-        chainId={fromToken.chainId}
-        client={client}
-        label="Paid"
-        tokenAddress={fromToken.address}
-        tokenAmount={fromToken.amount}
-        tokenSymbol={fromToken.symbol || ""}
-      />
-
-      {lineSpacer}
-      {isPartialSuccess && gotToken ? (
-        // Expected + Got
-        <>
-          {/* Expected */}
-          <TokenInfoRow
-            chainId={toToken.chainId}
-            client={client}
-            label={isPartialSuccess ? "Expected" : "Received"}
-            tokenAddress={toToken.address}
-            tokenAmount={toToken.amount}
-            tokenSymbol={toToken.symbol || ""}
-          />
-
-          {lineSpacer}
-
-          {/* Got */}
-          <TokenInfoRow
-            chainId={gotToken.chainId}
-            client={client}
-            label="Got"
-            tokenAddress={gotToken.address}
-            tokenAmount={gotToken.amount}
-            tokenSymbol={gotToken.symbol || ""}
-          />
-        </>
-      ) : (
-        // Receive
-        <TokenInfoRow
-          chainId={toToken.chainId}
-          client={client}
-          label="Received"
-          tokenAddress={toToken.address}
-          tokenAmount={toToken.amount}
-          tokenSymbol={toToken.symbol || ""}
-        />
-      )}
-
-      {lineSpacer}
-      <Container
-        flex="row"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm">Recipient</Text>
-        <WalletRow address={uiData.toAddress} client={client} iconSize="sm" />
-      </Container>
-
-      {/* Status */}
-      {statusMeta && showStatusRow && (
-        <>
-          {lineSpacer}
-          <Container
-            flex="row"
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            <Text size="sm">Status</Text>
-            <Container
-              center="y"
-              flex="column"
-              gap="3xs"
-              style={{
-                alignItems: "flex-end",
-              }}
-            >
-              <Text color={statusMeta.color} size="sm">
-                {statusMeta.status}
-              </Text>
-            </Container>
-          </Container>
-        </>
-      )}
-
-      <Spacer y="lg" />
-
-      {/* source chain Tx hash link */}
-      {fromChainExplorers.explorers?.[0]?.url && sourceTxHash && (
-        <ButtonLink
-          fullWidth
-          gap="xs"
-          href={formatExplorerTxUrl(
-            fromChainExplorers.explorers[0]?.url,
-            sourceTxHash,
-          )}
-          style={{
-            fontSize: fontSize.sm,
-            padding: spacing.sm,
-          }}
-          target="_blank"
-          variant="outline"
-        >
-          View on {fromChainName.name} Explorer
-          <ExternalLinkIcon height={iconSize.sm} width={iconSize.sm} />
-        </ButtonLink>
-      )}
-
-      {/* destination chain tx hash link */}
-      {destinationTxHash &&
-        sourceTxHash !== destinationTxHash &&
-        toChainExplorers?.explorers?.[0]?.url && (
-          <>
-            <Spacer y="sm" />
-            <ButtonLink
-              fullWidth
-              gap="xs"
-              href={formatExplorerTxUrl(
-                toChainExplorers.explorers[0]?.url,
-                destinationTxHash,
-              )}
-              style={{
-                fontSize: fontSize.sm,
-                padding: spacing.sm,
-              }}
-              target="_blank"
-              variant="outline"
-            >
-              View on {toChainName.name} Explorer
-              <ExternalLinkIcon height={iconSize.sm} width={iconSize.sm} />
-            </ButtonLink>
-          </>
-        )}
-    </div>
-  );
-}

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

@@ -1,56 +0,0 @@
-import { useMemo } from "react";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { Container } from "../../../../components/basic.js";
-import { Text } from "../../../../components/text.js";
-import { PayTokenIcon } from "../PayTokenIcon.js";
-
-export function TokenInfoRow(props: {
-  tokenSymbol: string;
-  tokenAmount: string;
-  tokenAddress: string;
-  chainId: number;
-  label: string;
-  client: ThirdwebClient;
-}) {
-  const chainObj = useMemo(
-    () => getCachedChain(props.chainId),
-    [props.chainId],
-  );
-  const { name } = useChainName(chainObj);
-
-  return (
-    <Container
-      flex="row"
-      style={{
-        justifyContent: "space-between",
-      }}
-    >
-      <Text size="sm">{props.label}</Text>
-      <Container
-        flex="column"
-        gap="3xs"
-        style={{
-          alignItems: "flex-end",
-        }}
-      >
-        <Container center="y" flex="row" gap="xs">
-          <PayTokenIcon
-            chain={chainObj}
-            client={props.client}
-            size="sm"
-            token={{
-              address: props.tokenAddress,
-            }}
-          />
-          <Text color="primaryText" size="sm">
-            {formatNumber(Number(props.tokenAmount), 6)} {props.tokenSymbol}
-          </Text>
-        </Container>
-        <Text size="xs">{name}</Text>
-      </Container>
-    </Container>
-  );
-}