thirdweb 5.87.4 → 5.88.0

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

@@ -0,0 +1,307 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
+import { isSwapRequiredPostOnramp } from "../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
+import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
+import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import {
+  type Theme,
+  iconSize,
+  spacing,
+} from "../../../../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
+import { useBuyWithFiatQuote } from "../../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
+import { PREFERRED_FIAT_PROVIDER_STORAGE_KEY } from "../../../../../../core/utils/storage.js";
+import {
+  defaultMessage,
+  getErrorMessage,
+} from "../../../../../utils/errors.js";
+import {
+  Drawer,
+  DrawerOverlay,
+  useDrawer,
+} from "../../../../components/Drawer.js";
+import { Spacer } from "../../../../components/Spacer.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 { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
+import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
+import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
+import { PayWithCreditCard } from "../PayWIthCreditCard.js";
+import type { SelectedScreen } from "../main/types.js";
+import { openOnrampPopup } from "../openOnRamppopup.js";
+import { FiatFees } from "../swap/Fees.js";
+import { addPendingTx } from "../swap/pendingSwapTx.js";
+import type { PayerInfo } from "../types.js";
+import { Providers } from "./Providers.js";
+import type { CurrencyMeta } from "./currencies.js";
+
+export function FiatScreenContent(props: {
+  setScreen: (screen: SelectedScreen) => void;
+  tokenAmount: string;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  selectedCurrency: CurrencyMeta;
+  showCurrencySelector: () => void;
+  payOptions: PayUIOptions;
+  theme: "light" | "dark" | Theme;
+  client: ThirdwebClient;
+  onDone: () => void;
+  isEmbed: boolean;
+  payer: PayerInfo;
+  setTokenAmount: (amount: string) => void;
+  setHasEditedAmount: (hasEdited: boolean) => void;
+}) {
+  const {
+    toToken,
+    tokenAmount,
+    payer,
+    client,
+    setScreen,
+    toChain,
+    showCurrencySelector,
+    selectedCurrency,
+  } = props;
+  const defaultRecipientAddress = (
+    props.payOptions as Extract<PayUIOptions, { mode: "direct_payment" }>
+  )?.paymentInfo?.sellerAddress;
+  const receiverAddress =
+    defaultRecipientAddress || props.payer.account.address;
+  const { drawerRef, drawerOverlayRef, isOpen, setIsOpen } = useDrawer();
+  const [drawerScreen, setDrawerScreen] = useState<"fees" | "providers">(
+    "fees",
+  );
+
+  const buyWithFiatOptions = props.payOptions.buyWithFiat;
+  const [preferredProvider, setPreferredProvider] = useState<
+    FiatProvider | undefined
+  >(
+    buyWithFiatOptions !== false
+      ? buyWithFiatOptions?.preferredProvider ||
+          ((localStorage.getItem(
+            PREFERRED_FIAT_PROVIDER_STORAGE_KEY,
+          ) as FiatProvider | null) ??
+            undefined)
+      : undefined,
+  );
+
+  const fiatQuoteQuery = useBuyWithFiatQuote(
+    buyWithFiatOptions !== false && tokenAmount
+      ? {
+          fromCurrencySymbol: selectedCurrency.shorthand,
+          toChainId: toChain.id,
+          toAddress: receiverAddress,
+          toTokenAddress: isNativeToken(toToken)
+            ? NATIVE_TOKEN_ADDRESS
+            : toToken.address,
+          toAmount: tokenAmount,
+          client,
+          isTestMode: buyWithFiatOptions?.testMode,
+          purchaseData: props.payOptions.purchaseData,
+          fromAddress: payer.account.address,
+          preferredProvider: preferredProvider,
+        }
+      : undefined,
+  );
+
+  function handleSubmit() {
+    if (!fiatQuoteQuery.data) {
+      return;
+    }
+
+    const hasTwoSteps = isSwapRequiredPostOnramp(fiatQuoteQuery.data);
+    let openedWindow: Window | null = null;
+
+    if (!hasTwoSteps) {
+      openedWindow = openOnrampPopup(
+        fiatQuoteQuery.data.onRampLink,
+        typeof props.theme === "string" ? props.theme : props.theme.type,
+      );
+
+      addPendingTx({
+        type: "fiat",
+        intentId: fiatQuoteQuery.data.intentId,
+      });
+    }
+
+    setScreen({
+      id: "fiat-flow",
+      quote: fiatQuoteQuery.data,
+      openedWindow,
+    });
+  }
+
+  function showFees() {
+    if (!fiatQuoteQuery.data) {
+      return;
+    }
+
+    setDrawerScreen("fees");
+    setIsOpen(true);
+  }
+
+  function showProviders() {
+    setDrawerScreen("providers");
+    setIsOpen(true);
+  }
+
+  const disableSubmit = !fiatQuoteQuery.data;
+
+  const errorMsg =
+    !fiatQuoteQuery.isLoading && fiatQuoteQuery.error
+      ? getErrorMessage(fiatQuoteQuery.error)
+      : undefined;
+
+  return (
+    <Container flex="column" gap="md" animate="fadein">
+      {isOpen && (
+        <>
+          <DrawerOverlay ref={drawerOverlayRef} />
+          <Drawer ref={drawerRef} close={() => setIsOpen(false)}>
+            {drawerScreen === "fees" && fiatQuoteQuery.data && (
+              <div>
+                <Text size="lg" color="primaryText">
+                  Fees
+                </Text>
+
+                <Spacer y="lg" />
+                <FiatFees quote={fiatQuoteQuery.data} />
+              </div>
+            )}
+            {drawerScreen === "providers" && (
+              <div>
+                <Text size="lg" color="primaryText">
+                  Providers
+                </Text>
+                <Spacer y="lg" />
+                <Providers
+                  preferredProvider={
+                    preferredProvider || fiatQuoteQuery.data?.provider
+                  }
+                  onSelect={(provider) => {
+                    setPreferredProvider(provider);
+                    // save the pref in local storage
+                    localStorage.setItem(
+                      PREFERRED_FIAT_PROVIDER_STORAGE_KEY,
+                      provider,
+                    );
+                    setIsOpen(false);
+                  }}
+                />
+              </div>
+            )}
+          </Drawer>
+        </>
+      )}
+
+      <div>
+        <PayWithCreditCard
+          isLoading={fiatQuoteQuery.isLoading}
+          value={fiatQuoteQuery.data?.fromCurrencyWithFees.amount}
+          client={client}
+          currency={selectedCurrency}
+          onSelectCurrency={showCurrencySelector}
+        />
+        <Container
+          bg="tertiaryBg"
+          flex="row"
+          borderColor="borderColor"
+          style={{
+            paddingLeft: spacing.md,
+            justifyContent: "space-between",
+            alignItems: "center",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderBottom: "none",
+          }}
+        >
+          <Text size="xs" color="secondaryText">
+            Provider
+          </Text>
+          <Button variant="ghost" onClick={showProviders}>
+            <Container flex="row" center="y" gap="xxs" color="secondaryText">
+              <Text size="xs">
+                {preferredProvider
+                  ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
+                  : fiatQuoteQuery.data?.provider
+                    ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
+                    : ""}
+              </Text>
+              <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+            </Container>
+          </Button>
+        </Container>
+        {/* Estimated time + View fees button */}
+        <EstimatedTimeAndFees
+          quoteIsLoading={fiatQuoteQuery.isLoading}
+          estimatedSeconds={fiatQuoteQuery.data?.estimatedDurationSeconds}
+          onViewFees={showFees}
+        />
+        <Spacer y="md" />
+      </div>
+
+      {/* Error message */}
+      {errorMsg && (
+        <div>
+          {errorMsg.data?.minimumAmountEth ? (
+            <Text color="danger" size="sm" center multiline>
+              Minimum amount is{" "}
+              {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
+              <TokenSymbol
+                token={toToken}
+                chain={toChain}
+                size="sm"
+                inline
+                color="danger"
+              />
+            </Text>
+          ) : (
+            <Text color="danger" size="sm" center multiline>
+              {errorMsg.message || defaultMessage}
+            </Text>
+          )}
+        </div>
+      )}
+
+      {errorMsg?.data?.minimumAmountEth ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => {
+            props.setTokenAmount(
+              formatNumber(
+                Number(errorMsg.data?.minimumAmountEth),
+                6,
+              ).toString(),
+            );
+            props.setHasEditedAmount(true);
+          }}
+        >
+          Set Minimum
+        </Button>
+      ) : (
+        <Button
+          variant={disableSubmit ? "outline" : "accent"}
+          data-disabled={disableSubmit}
+          disabled={disableSubmit}
+          fullWidth
+          onClick={handleSubmit}
+          gap="xs"
+        >
+          {fiatQuoteQuery.isLoading ? (
+            <>
+              Getting price quote
+              <Spinner size="sm" color="accentText" />
+            </>
+          ) : (
+            "Continue"
+          )}
+        </Button>
+      )}
+    </Container>
+  );
+}

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

@@ -1,6 +1,9 @@
 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";
@@ -43,11 +46,38 @@ export function PostOnRampSwap(props: {
     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
+      !postOnRampQuoteQuery.isRefetching &&
+      !allowanceQuery.isLoading
     ) {
       setLockedOnRampQuote(postOnRampQuoteQuery.data);
     }
@@ -55,6 +85,7 @@ export function PostOnRampSwap(props: {
     postOnRampQuoteQuery.data,
     lockedOnRampQuote,
     postOnRampQuoteQuery.isRefetching,
+    allowanceQuery.isLoading,
   ]);
 
   if (postOnRampQuoteQuery.isError) {
@@ -133,6 +164,7 @@ export function PostOnRampSwap(props: {
       transactionMode={props.transactionMode}
       isEmbed={props.isEmbed}
       onSuccess={props.onSuccess}
+      approvalAmount={allowanceQuery.data ?? undefined}
     />
   );
 }

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

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

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

@@ -34,6 +34,7 @@ export type SelectedScreen =
   | {
       id: "swap-flow";
       quote: BuyWithCryptoQuote;
+      approvalAmount?: bigint;
     }
   | {
       id: "fiat-flow";

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

@@ -19,6 +19,7 @@ import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { getBuyTokenAmountFontSize } from "../utils.js";
+import { FiatValue } from "./FiatValue.js";
 
 /**
  * @internal
@@ -35,7 +36,6 @@ export function BuyTokenInput(props: {
   freezeChainAndToken?: boolean;
 }) {
   const { name } = useChainName(props.chain);
-
   const getWidth = () => {
     let chars = props.value.replace(".", "").length;
     const hasDot = props.value.includes(".");
@@ -122,9 +122,19 @@ export function BuyTokenInput(props: {
         </Container>
       </div>
 
+      <Container flex="row" center="both">
+        <FiatValue
+          tokenAmount={props.value}
+          token={props.token}
+          chain={props.chain}
+          client={props.client}
+          size="md"
+        />
+      </Container>
+
       {!props.hideTokenSelector && (
         <>
-          <Spacer y="sm" />
+          <Spacer y="md" />
 
           {/* Token / Chain selector */}
           <Container flex="row" center="x">

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

@@ -3,6 +3,8 @@ import { useState } from "react";
 import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { getContract } from "../../../../../../../contract/contract.js";
+import { approve } from "../../../../../../../extensions/erc20/write/approve.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
 import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
@@ -51,9 +53,13 @@ export function SwapConfirmationScreen(props: {
   fromTokenSymbol: string;
   isFiatFlow: boolean;
   payer: PayerInfo;
+  preApprovedAmount?: bigint;
 }) {
-  const isApprovalRequired = props.quote.approval !== undefined;
-  const initialStep = isApprovalRequired ? "approval" : "swap";
+  const needsApproval =
+    props.quote.approvalData &&
+    props.preApprovedAmount !== undefined &&
+    props.preApprovedAmount < BigInt(props.quote.approvalData.amountWei);
+  const initialStep = needsApproval ? "approval" : "swap";
 
   const [step, setStep] = useState<"approval" | "swap">(initialStep);
   const [status, setStatus] = useState<
@@ -136,7 +142,7 @@ export function SwapConfirmationScreen(props: {
       <Spacer y="xl" />
 
       {/* Show 2 steps - Approve and confirm  */}
-      {isApprovalRequired && (
+      {needsApproval && (
         <>
           <Spacer y="sm" />
           <Container
@@ -187,7 +193,7 @@ export function SwapConfirmationScreen(props: {
           fullWidth
           disabled={status === "pending"}
           onClick={async () => {
-            if (step === "approval" && props.quote.approval) {
+            if (step === "approval" && props.quote.approvalData) {
               try {
                 setStatus("pending");
 
@@ -204,13 +210,22 @@ export function SwapConfirmationScreen(props: {
                   dstChainId: props.quote.swapDetails.toToken.chainId,
                 });
 
+                const transaction = approve({
+                  contract: getContract({
+                    client: props.client,
+                    address: props.quote.swapDetails.fromToken.tokenAddress,
+                    chain: props.fromChain,
+                  }),
+                  spender: props.quote.approvalData.spenderAddress,
+                  amountWei: BigInt(props.quote.approvalData.amountWei),
+                });
+
                 const tx = await sendTransaction({
                   account: props.payer.account,
-                  transaction: props.quote.approval,
+                  transaction,
                 });
 
                 await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
-                // props.onQuoteFinalized(props.quote);
 
                 trackPayEvent({
                   event: "swap_approval_success",

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

@@ -0,0 +1,51 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Chain } from "../../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { convertCryptoToFiat } from "../../../../../../../pay/convert/cryptoToFiat.js";
+import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import { fontSize } from "../../../../../../core/design-system/index.js";
+import { Skeleton } from "../../../../components/Skeleton.js";
+import { Text } from "../../../../components/text.js";
+import type { TextProps } from "../../../../components/text.js";
+import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
+import type { ERC20OrNativeToken } from "../../nativeToken.js";
+import { getTokenAddress } from "../../nativeToken.js";
+
+export function FiatValue(
+  props: {
+    tokenAmount: string;
+    token: ERC20OrNativeToken;
+    chain: Chain;
+    client: ThirdwebClient;
+  } & TextProps,
+) {
+  const deferredTokenAmount = useDebouncedValue(props.tokenAmount, 500);
+  const cryptoToFiatQuery = useQuery({
+    queryKey: [
+      "cryptoToFiat",
+      props.chain.id,
+      getTokenAddress(props.token),
+      deferredTokenAmount,
+    ],
+    queryFn: () =>
+      convertCryptoToFiat({
+        client: props.client,
+        chain: props.chain,
+        fromTokenAddress: getTokenAddress(props.token),
+        fromAmount: Number(deferredTokenAmount),
+        to: "USD",
+      }),
+  });
+
+  if (cryptoToFiatQuery.isLoading) {
+    return <Skeleton width={"50px"} height={fontSize.lg} />;
+  }
+
+  return (
+    <Text {...props}>
+      {cryptoToFiatQuery.data?.result
+        ? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}`
+        : "$0.00"}
+    </Text>
+  );
+}

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

@@ -22,6 +22,7 @@ type SwapFlowProps = {
   transactionMode: boolean;
   isEmbed: boolean;
   onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
+  approvalAmount?: bigint;
 };
 
 export function SwapFlow(props: SwapFlowProps) {
@@ -109,6 +110,7 @@ export function SwapFlow(props: SwapFlowProps) {
       quote={quote}
       isFiatFlow={props.isFiatFlow}
       payer={props.payer}
+      preApprovedAmount={props.approvalAmount}
     />
   );
 }