thirdweb 5.105.8 → 5.105.10

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

@@ -1,286 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
-import type { Chain } from "../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
-import { getContract } from "../../../../../../contract/contract.js";
-import { decimals } from "../../../../../../extensions/erc20/read/decimals.js";
-import { shortenAddress } from "../../../../../../utils/address.js";
-import { formatNumber } from "../../../../../../utils/formatNumber.js";
-import { toTokens } from "../../../../../../utils/units.js";
-import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
-import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize, spacing } from "../../../../../core/design-system/index.js";
-import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
-import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
-import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
-import { useEnsName } from "../../../../../core/utils/wallet.js";
-import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
-import { Container, Line, ModalHeader } from "../../../components/basic.js";
-import { Button } from "../../../components/buttons.js";
-import { ChainIcon } from "../../../components/ChainIcon.js";
-import { Img } from "../../../components/Img.js";
-import { Spacer } from "../../../components/Spacer.js";
-import { TokenIcon } from "../../../components/TokenIcon.js";
-import { Text } from "../../../components/text.js";
-import { WalletImage } from "../../../components/WalletImage.js";
-import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
-import { ConnectButton } from "../../ConnectButton.js";
-import { PoweredByThirdweb } from "../../PoweredByTW.js";
-import { type ERC20OrNativeToken, isNativeToken } from "../nativeToken.js";
-import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
-
-export function DirectPaymentModeScreen(props: {
-  client: ThirdwebClient;
-  payUiOptions: Extract<PayUIOptions, { mode: "direct_payment" }>;
-  supportedDestinations: SupportedChainAndTokens;
-  payerAccount: Account | undefined;
-  connectOptions: PayEmbedConnectOptions | undefined;
-  onContinue: (
-    tokenAmount: string,
-    toChain: Chain,
-    toToken: ERC20OrNativeToken,
-  ) => void;
-}) {
-  const {
-    payUiOptions,
-    supportedDestinations,
-    client,
-    onContinue,
-    payerAccount,
-  } = props;
-  const theme = useCustomTheme();
-  const activeWallet = useActiveWallet();
-  const metadata = payUiOptions.metadata;
-  const paymentInfo = payUiOptions.paymentInfo;
-  const { data: chainData } = useChainMetadata(paymentInfo.chain);
-  const { data: sellerEns } = useEnsName({
-    address: paymentInfo.sellerAddress,
-    client,
-  });
-
-  const totalCostQuery = useQuery({
-    queryFn: async () => {
-      let tokenDecimals = 18;
-      if (paymentInfo.token && !isNativeToken(paymentInfo.token)) {
-        tokenDecimals = await decimals({
-          contract: getContract({
-            address: paymentInfo.token.address,
-            chain: paymentInfo.chain,
-            client,
-          }),
-        });
-      }
-      let cost: string;
-      if ("amountWei" in paymentInfo) {
-        cost = toTokens(paymentInfo.amountWei, tokenDecimals);
-      } else {
-        cost = paymentInfo.amount;
-      }
-      return cost;
-    },
-    queryKey: ["amount", paymentInfo],
-  });
-
-  const totalCost = totalCostQuery.data;
-  if (!chainData || totalCost === undefined) {
-    return <LoadingScreen />;
-  }
-
-  const token: TokenInfo = paymentInfo.token
-    ? {
-        address: paymentInfo.token.address || NATIVE_TOKEN_ADDRESS,
-        icon:
-          paymentInfo.token?.icon ||
-          supportedDestinations
-            .find((c) => c.chain.id === paymentInfo.chain.id)
-            ?.tokens.find(
-              (t) =>
-                t.address.toLowerCase() ===
-                paymentInfo.token?.address.toLowerCase(),
-            )?.icon,
-        name: paymentInfo.token.name || chainData.nativeCurrency.name,
-        symbol: paymentInfo.token.symbol || chainData.nativeCurrency.symbol,
-      }
-    : {
-        address: NATIVE_TOKEN_ADDRESS,
-        icon: chainData.icon?.url,
-        name: chainData.nativeCurrency.name,
-        symbol: chainData.nativeCurrency.symbol,
-      };
-
-  return (
-    <Container px="lg">
-      <Spacer y="lg" />
-      <ModalHeader title={metadata?.name || "Payment Details"} />
-
-      <Spacer y="lg" />
-      <Container>
-        {metadata?.image ? (
-          <Img
-            client={client}
-            src={metadata?.image}
-            style={{
-              backgroundColor: theme.colors.tertiaryBg,
-              borderRadius: spacing.md,
-              width: "100%",
-            }}
-          />
-        ) : activeWallet ? (
-          <Container
-            center="both"
-            flex="row"
-            style={{
-              backgroundColor: theme.colors.tertiaryBg,
-              borderRadius: spacing.md,
-              marginBottom: spacing.md,
-              padding: spacing.md,
-            }}
-          >
-            <WalletImage
-              client={client}
-              id={activeWallet.id}
-              size={iconSize.xl}
-            />
-            <div
-              style={{
-                borderBottom: "6px dotted",
-                borderColor: theme.colors.secondaryIconColor,
-                flexGrow: 1,
-                marginLeft: spacing.md,
-                marginRight: spacing.md,
-              }}
-            />
-            <ChainIcon
-              chainIconUrl={chainData.icon?.url}
-              client={client}
-              size={iconSize.xl}
-            />
-          </Container>
-        ) : null}
-        <Spacer y="md" />
-        <Container flex="row">
-          <Container expand flex="column">
-            <Text color="primaryText" size="md" weight={700}>
-              Price
-            </Text>
-          </Container>
-          <Container expand>
-            <Container
-              center="y"
-              flex="row"
-              gap="xs"
-              style={{ justifyContent: "right" }}
-            >
-              <TokenIcon
-                chain={paymentInfo.chain}
-                client={props.client}
-                size="sm"
-                token={token}
-              />
-              <Text color="primaryText" size="md" weight={700}>
-                {String(formatNumber(Number(totalCost), 6))} {token.symbol}
-              </Text>
-            </Container>
-          </Container>
-        </Container>
-        <Spacer y="md" />
-        <Line />
-        <Spacer y="md" />
-        <Container flex="row">
-          <Container expand flex="column">
-            <Text color="secondaryText" size="xs">
-              Network
-            </Text>
-          </Container>
-          <Container expand>
-            <Container
-              center="y"
-              flex="row"
-              gap="xs"
-              style={{ justifyContent: "right" }}
-            >
-              <ChainIcon
-                chainIconUrl={chainData.icon?.url}
-                client={props.client}
-                size="xs"
-              />
-              <Text
-                color="secondaryText"
-                size="xs"
-                style={{ textAlign: "right" }}
-              >
-                {chainData.name}
-              </Text>
-            </Container>
-          </Container>
-        </Container>
-        <Spacer y="sm" />
-        <Container flex="row">
-          <Container expand flex="column">
-            <Text color="secondaryText" size="xs">
-              Seller
-            </Text>
-          </Container>
-          <Container expand>
-            <Container
-              center="y"
-              flex="row"
-              gap="xs"
-              style={{ justifyContent: "right" }}
-            >
-              <Text
-                color="secondaryText"
-                size="xs"
-                style={{ textAlign: "right" }}
-              >
-                {sellerEns || shortenAddress(paymentInfo.sellerAddress)}
-              </Text>
-            </Container>
-          </Container>
-        </Container>
-      </Container>
-      <Spacer y="xl" />
-      {payerAccount ? (
-        <Button
-          fullWidth
-          onClick={() => {
-            trackPayEvent({
-              client,
-              event: "choose_payment_method_direct_payment_mode",
-              toChainId: paymentInfo.chain.id,
-              toToken: paymentInfo.token?.address,
-              walletAddress: payerAccount.address,
-              walletType: activeWallet?.id,
-            });
-            onContinue(totalCost, paymentInfo.chain, token);
-          }}
-          variant="accent"
-        >
-          Choose Payment Method
-        </Button>
-      ) : (
-        <div>
-          <ConnectButton
-            {...props.connectOptions}
-            client={client}
-            connectButton={{
-              style: {
-                width: "100%",
-              },
-            }}
-            theme={theme}
-          />
-        </div>
-      )}
-      <Spacer y="lg" />
-      {payUiOptions.showThirdwebBranding !== false && (
-        <>
-          <PoweredByThirdweb link="https://playground.thirdweb.com/connect/pay?utm_source=ub_text" />
-          <Spacer y="sm" />
-        </>
-      )}
-    </Container>
-  );
-}

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

@@ -1,85 +0,0 @@
-import { ClockIcon } from "@radix-ui/react-icons";
-import {
-  fontSize,
-  iconSize,
-  radius,
-} from "../../../../../core/design-system/index.js";
-import { Container } from "../../../components/basic.js";
-import { Button } from "../../../components/buttons.js";
-import { Skeleton } from "../../../components/Skeleton.js";
-import { Text } from "../../../components/text.js";
-import type { IconFC } from "../../icons/types.js";
-import { formatSeconds } from "./swap/formatSeconds.js";
-
-export function EstimatedTimeAndFees(props: {
-  estimatedSeconds?: number | undefined;
-  quoteIsLoading: boolean;
-  onViewFees: () => void;
-}) {
-  const { estimatedSeconds, quoteIsLoading } = props;
-
-  return (
-    <Container
-      bg="tertiaryBg"
-      borderColor="borderColor"
-      flex="row"
-      style={{
-        alignItems: "center",
-        borderRadius: radius.md,
-        borderStyle: "solid",
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0,
-        borderWidth: "1px",
-        justifyContent: "space-between",
-      }}
-    >
-      <Container center="y" color="accentText" flex="row" gap="xxs" p="sm">
-        <ClockIcon height={iconSize.sm} width={iconSize.sm} />
-        {quoteIsLoading ? (
-          <Skeleton color="borderColor" height={fontSize.xs} width="50px" />
-        ) : (
-          <Text color="secondaryText" size="xs">
-            {estimatedSeconds !== undefined
-              ? `~${formatSeconds(estimatedSeconds)}`
-              : "--"}
-          </Text>
-        )}
-      </Container>
-
-      <Button gap="xs" onClick={props.onViewFees} variant="ghost">
-        <Container center="both" color="accentText" flex="row">
-          <ViewFeeIcon size={iconSize.sm} />
-        </Container>
-        <Text color="secondaryText" size="xs">
-          View Fees
-        </Text>
-      </Button>
-    </Container>
-  );
-}
-
-const ViewFeeIcon: IconFC = (props) => {
-  return (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height={props.size}
-      viewBox="0 0 12 12"
-      width={props.size}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M4.5 7.5L7.5 4.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};

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

@@ -1,13 +0,0 @@
-import { lazy, Suspense } from "react";
-import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
-import type { BuyScreenProps } from "./BuyScreen.js";
-
-const BuyScreen = lazy(() => import("./BuyScreen.js"));
-
-export function LazyBuyScreen(props: BuyScreenProps) {
-  return (
-    <Suspense fallback={<LoadingScreen />}>
-      <BuyScreen {...props} />
-    </Suspense>
-  );
-}

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

@@ -1,68 +0,0 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import type { FiatProvider } from "../../../../../../pay/utils/commonTypes.js";
-import { iconSize, spacing } from "../../../../../core/design-system/index.js";
-import { Container } from "../../../components/basic.js";
-import { Button } from "../../../components/buttons.js";
-import { Text } from "../../../components/text.js";
-import { getProviderLabel } from "./utils.js";
-
-/**
- * Shows the selected payment provider based on the preferred provider OR the quoted provider.
- * @internal
- */
-export const PayProviderSelection = (props: {
-  onShowProviders: () => void;
-  quotedProvider?: FiatProvider;
-  preferredProvider?: FiatProvider;
-  supportedProviders: FiatProvider[];
-}) => {
-  const ProviderItem = (
-    <Container
-      center="y"
-      color="secondaryText"
-      flex="row"
-      gap="xxs"
-      style={{ padding: spacing.md }}
-    >
-      <Text size="xs">
-        {getProviderLabel(
-          props.preferredProvider ?? props.quotedProvider ?? "",
-        )}
-      </Text>
-      {props.supportedProviders.length > 1 && (
-        <ChevronDownIcon height={iconSize.sm} width={iconSize.sm} />
-      )}
-    </Container>
-  );
-
-  return (
-    <Container
-      bg="tertiaryBg"
-      borderColor="borderColor"
-      flex="row"
-      style={{
-        alignItems: "center",
-        borderBottom: "none",
-        borderStyle: "solid",
-        borderWidth: "1px",
-        justifyContent: "space-between",
-        paddingLeft: spacing.md,
-      }}
-    >
-      <Text color="secondaryText" size="xs">
-        Provider
-      </Text>
-      {props.supportedProviders.length > 1 ? (
-        <Button
-          onClick={props.onShowProviders}
-          style={{ padding: 0 }}
-          variant="ghost" // Padding is managed within children as the button is conditional
-        >
-          {ProviderItem}
-        </Button>
-      ) : (
-        ProviderItem
-      )}
-    </Container>
-  );
-};

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

@@ -1,48 +0,0 @@
-import type { Chain } from "../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../client/client.js";
-import { getAddress } from "../../../../../../utils/address.js";
-import type { iconSize } from "../../../../../core/design-system/index.js";
-import { TokenIcon } from "../../../components/TokenIcon.js";
-import { isNativeToken, type NativeToken } from "../nativeToken.js";
-import { useBuySupportedDestinations } from "./swap/useSwapSupportedChains.js";
-
-// This is a temporary solution to get the token icon working for ERC20 tokens
-// TODO: The proper solutioon is to include the token icon in the quotes / status response objects, currently it is missing.
-
-export function PayTokenIcon(props: {
-  token:
-    | {
-        address: string;
-        icon?: string;
-      }
-    | NativeToken;
-  chain: Chain;
-  client: ThirdwebClient;
-  size: keyof typeof iconSize;
-}) {
-  const supportedDestinationsQuery = useBuySupportedDestinations(props.client);
-  const token = props.token;
-  const tokenIcon = !isNativeToken(token)
-    ? supportedDestinationsQuery.data
-        ?.find((c) => c.chain.id === props.chain.id)
-        ?.tokens.find(
-          (t) => getAddress(t.address) === getAddress(token.address),
-        )?.icon
-    : undefined;
-
-  return (
-    <TokenIcon
-      chain={props.chain}
-      client={props.client}
-      size={props.size}
-      token={
-        isNativeToken(token)
-          ? { nativeToken: true }
-          : {
-              address: token.address,
-              icon: token.icon || tokenIcon,
-            }
-      }
-    />
-  );
-}

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

@@ -1,104 +0,0 @@
-import styled from "@emotion/styled";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import type { ThirdwebClient } from "../../../../../../client/client.js";
-import { formatNumber } from "../../../../../../utils/formatNumber.js";
-import {
-  fontSize,
-  iconSize,
-  radius,
-  spacing,
-} from "../../../../../core/design-system/index.js";
-import { Container } from "../../../components/basic.js";
-import { Button } from "../../../components/buttons.js";
-import { Skeleton } from "../../../components/Skeleton.js";
-import { Text } from "../../../components/text.js";
-import { type CurrencyMeta, getFiatIcon } from "./fiat/currencies.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 PayWithCreditCard(props: {
-  value?: string;
-  isLoading: boolean;
-  client: ThirdwebClient;
-  currency: CurrencyMeta;
-  onSelectCurrency: () => void;
-}) {
-  return (
-    <Container
-      bg="tertiaryBg"
-      borderColor="borderColor"
-      flex="row"
-      style={{
-        alignItems: "center",
-        borderBottom: "none",
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        borderRadius: radius.md,
-        borderStyle: "solid",
-        borderWidth: "1px",
-        flexWrap: "nowrap",
-        justifyContent: "space-between",
-      }}
-    >
-      {/* Left */}
-      <CurrencyButton
-        gap="sm"
-        onClick={props.onSelectCurrency}
-        style={{
-          justifyContent: "flex-start",
-          minHeight: "64px",
-          minWidth: "50%",
-        }}
-        variant="ghost"
-      >
-        {getFiatIcon(props.currency, "md")}
-        <Container center="y" color="secondaryText" flex="row" gap="xxs">
-          <Text color="primaryText">{props.currency.shorthand}</Text>
-          <ChevronDownIcon height={iconSize.sm} width={iconSize.sm} />
-        </Container>
-      </CurrencyButton>
-
-      {/* Right */}
-      <div
-        style={{
-          alignItems: "flex-end",
-          display: "flex",
-          flexDirection: "column",
-          flexGrow: 1,
-          flexShrink: 1,
-          gap: spacing.xxs,
-          justifyContent: "center",
-          overflow: "hidden",
-          paddingRight: spacing.sm,
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {props.isLoading ? (
-          <Skeleton height={fontSize.lg} width="100px" />
-        ) : (
-          <Text color={props.value ? "primaryText" : "secondaryText"} size="lg">
-            {props.value
-              ? `${props.currency.symbol}${formatNumber(
-                  Number(props.value),
-                  2,
-                )}`
-              : "--"}
-          </Text>
-        )}
-      </div>
-    </Container>
-  );
-}
-
-const CurrencyButton = /* @__PURE__ */ styled(Button)(() => {
-  return {
-    "&[disabled]:hover": {
-      borderColor: "transparent",
-    },
-  };
-});

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

@@ -1,91 +0,0 @@
-import { keyframes } from "@emotion/react";
-import { CheckIcon } from "@radix-ui/react-icons";
-import { fontSize, iconSize } from "../../../../../core/design-system/index.js";
-import { Container } from "../../../components/basic.js";
-import { StyledDiv } from "../../../design-system/elements.js";
-
-export function StepIcon(props: { isDone: boolean; isActive: boolean }) {
-  return (
-    <Container
-      center="both"
-      color={
-        props.isDone
-          ? "success"
-          : props.isActive
-            ? "accentText"
-            : "secondaryText"
-      }
-      flex="row"
-    >
-      <Circle>
-        {props.isDone ? (
-          <CheckIcon height={iconSize.sm} width={iconSize.sm} />
-        ) : (
-          <PulsingDot data-active={props.isActive} />
-        )}
-      </Circle>
-    </Container>
-  );
-}
-
-export function Step(props: {
-  isDone: boolean;
-  label: string;
-  isActive: boolean;
-}) {
-  return (
-    <Container
-      center="y"
-      color={
-        props.isDone
-          ? "success"
-          : props.isActive
-            ? "accentText"
-            : "secondaryText"
-      }
-      flex="row"
-      gap="xs"
-      style={{
-        fontSize: fontSize.sm,
-      }}
-    >
-      <StepIcon isActive={props.isActive} isDone={props.isDone} />
-      {props.label}
-    </Container>
-  );
-}
-
-const pulseAnimation = keyframes`
-0% {
-  opacity: 1;
-  transform: scale(0.5);
-}
-100% {
-  opacity: 0;
-  transform: scale(1.5);
-}
-`;
-
-const PulsingDot = /* @__PURE__ */ StyledDiv(() => {
-  return {
-    '&[data-active="true"]': {
-      animation: `${pulseAnimation} 1s infinite`,
-    },
-    background: "currentColor",
-    borderRadius: "50%",
-    height: "10px",
-    width: "10px",
-  };
-});
-
-const Circle = /* @__PURE__ */ StyledDiv(() => {
-  return {
-    alignItems: "center",
-    border: "1px solid currentColor",
-    borderRadius: "50%",
-    display: "flex",
-    height: "20px",
-    justifyContent: "center",
-    width: "20px",
-  };
-});