thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.0

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

@@ -34,13 +34,12 @@ export function OnrampStatusScreen(props: {
   client: ThirdwebClient;
   onBack: () => void;
   intentId: string;
-  onViewPendingTx: () => void;
   hasTwoSteps: boolean;
   openedWindow: Window | null;
   quote: BuyWithFiatQuote;
   onDone: () => void;
   onShowSwapFlow: (status: BuyWithFiatStatus) => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
 }) {
   const queryClient = useQueryClient();
@@ -117,7 +116,7 @@ export function OnrampStatusScreen(props: {
         onDone={props.onDone}
         fiatStatus={statusQuery.data}
         client={props.client}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         quote={props.quote}
         isEmbed={props.isEmbed}
       />
@@ -130,7 +129,7 @@ function OnrampStatusScreenUI(props: {
   fiatStatus?: BuyWithFiatStatus;
   onDone: () => void;
   client: ThirdwebClient;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   quote: BuyWithFiatQuote;
 }) {
@@ -189,7 +188,7 @@ function OnrampStatusScreenUI(props: {
         <>
           <Spacer y="md" />
           <Container flex="row" center="x">
-            <Spinner size="3xl" color="accentText" />
+            <Spinner size="xxl" color="accentText" />
           </Container>
           <Spacer y="md" />
           <Text color="primaryText" size="lg" center>
@@ -240,7 +239,7 @@ function OnrampStatusScreenUI(props: {
 
           {!props.isEmbed && (
             <Button variant="accent" fullWidth onClick={props.onDone}>
-              {props.isBuyForTx ? "Continue Transaction" : "Done"}
+              {props.transactionMode ? "Continue Transaction" : "Done"}
             </Button>
           )}
         </>

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

@@ -19,9 +19,8 @@ export function PostOnRampSwap(props: {
   client: ThirdwebClient;
   buyWithFiatStatus: BuyWithFiatStatus;
   onBack?: () => void;
-  onViewPendingTx: () => void;
   onDone: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
 }) {
@@ -123,14 +122,13 @@ export function PostOnRampSwap(props: {
       buyWithCryptoQuote={lockedOnRampQuote}
       client={props.client}
       onBack={props.onBack}
-      onViewPendingTx={props.onViewPendingTx}
       isFiatFlow={true}
       onDone={props.onDone}
       onTryAgain={() => {
         setLockedOnRampQuote(undefined);
         postOnRampQuoteQuery.refetch();
       }}
-      isBuyForTx={props.isBuyForTx}
+      transactionMode={props.transactionMode}
       isEmbed={props.isEmbed}
     />
   );

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

@@ -17,10 +17,9 @@ export function PostOnRampSwapFlow(props: {
   quote: BuyWithFiatPartialQuote;
   client: ThirdwebClient;
   onBack: () => void;
-  onViewPendingTx: () => void;
   onDone: () => void;
   onSwapFlowStarted: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
 }) {
@@ -35,9 +34,8 @@ export function PostOnRampSwapFlow(props: {
         title={props.title}
         buyWithFiatStatus={statusForSwap}
         client={props.client}
-        onViewPendingTx={props.onViewPendingTx}
         onDone={props.onDone}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         payer={props.payer}
       />

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

@@ -1,22 +1,23 @@
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
-import type { PreparedTransaction } from "../../../../../../../transaction/prepare-transaction.js";
+import type { GetWalletBalanceResult } from "../../../../../../../wallets/utils/getWalletBalance.js";
+import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 
-export type BuyForTx = {
-  cost: bigint;
-  balance: bigint;
-  tx: PreparedTransaction;
-  tokenSymbol: string;
-  tokenDecimals: number;
+export type TransactionCostAndData = {
+  token: TokenInfo;
+  decimals: number;
+  walletBalance: GetWalletBalanceResult;
+  transactionValueWei: bigint;
+  gasCostWei: bigint;
 };
 
 export type SelectedScreen =
   | {
-      id:
-        | "main"
-        | "select-payment-method"
-        | "buy-with-fiat"
-        | "buy-with-crypto";
+      id: "main" | "select-payment-method" | "buy-with-fiat" | "select-wallet";
+    }
+  | {
+      id: "buy-with-crypto";
+      payDisabled?: boolean;
     }
   | {
       id: "select-from-token";
@@ -39,6 +40,9 @@ export type SelectedScreen =
       quote: BuyWithFiatQuote;
       openedWindow: Window | null;
     }
+  | {
+      id: "transfer-flow";
+    }
   | {
       id: "connect-payer-wallet";
       backScreen: SelectedScreen;

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

@@ -1,76 +1,171 @@
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
-import { toEther } from "../../../../../../../utils/units.js";
+import { getChainMetadata } from "../../../../../../../chains/utils.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
+import { getContract } from "../../../../../../../contract/contract.js";
+import { getCurrencyMetadata } from "../../../../../../../extensions/erc20/read/getCurrencyMetadata.js";
+import { getGasPrice } from "../../../../../../../gas/get-gas-price.js";
+import { encode } from "../../../../../../../transaction/actions/encode.js";
+import { estimateGasCost } from "../../../../../../../transaction/actions/estimate-gas-cost.js";
+import type { PreparedTransaction } from "../../../../../../../transaction/prepare-transaction.js";
+import type { Hex } from "../../../../../../../utils/encoding/hex.js";
+import { resolvePromisedValue } from "../../../../../../../utils/promise/resolve-promised-value.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
-import { getTotalTxCostForBuy } from "../../../../../../core/hooks/transaction/useSendTransaction.js";
-import { wait } from "../../../../../../core/utils/wait.js";
-import type { BuyForTx } from "./types.js";
+import { getWalletBalance } from "../../../../../../../wallets/utils/getWalletBalance.js";
+import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
+import type { TransactionCostAndData } from "./types.js";
 
-export function useBuyTxStates(options: {
-  setTokenAmount: (value: string) => void;
-  buyForTx: BuyForTx | null;
-  hasEditedAmount: boolean;
-  account: Account | null;
+export function useTransactionCostAndData(args: {
+  transaction: PreparedTransaction;
+  account: Account | undefined;
+  supportedDestinations: SupportedChainAndTokens;
 }) {
-  const { buyForTx, hasEditedAmount, setTokenAmount, account } = options;
-  const shouldRefreshTokenAmount = !hasEditedAmount;
-
-  const [amountNeeded, setAmountNeeded] = useState<bigint | undefined>(
-    buyForTx?.cost,
-  );
-
-  // update amount needed every 30 seconds
-  // also update the token amount if allowed
-  // ( Can't use useQuery because tx can't be added to queryKey )
+  const { transaction, account, supportedDestinations } = args;
+  // Compute query key of the transaction first
+  const [txQueryKey, setTxQueryKey] = useState<
+    | {
+        value: string | undefined;
+        erc20Value: string | undefined;
+        erc20Currency: string | undefined;
+        to: string | undefined;
+        data: Hex | undefined;
+      }
+    | undefined
+  >();
   useEffect(() => {
-    if (!buyForTx) {
-      return;
-    }
-
-    let mounted = true;
-
-    if (buyForTx.tx.erc20Value) {
-      // if erc20 value is set, we don't need to poll
-      return;
-    }
+    Promise.all([
+      resolvePromisedValue(transaction.value),
+      resolvePromisedValue(transaction.erc20Value),
+      resolvePromisedValue(transaction.to),
+      encode(transaction),
+    ]).then(([value, erc20Value, to, data]) => {
+      setTxQueryKey({
+        value: value?.toString(),
+        erc20Value: erc20Value?.amountWei?.toString(),
+        erc20Currency: erc20Value?.tokenAddress,
+        to,
+        data,
+      });
+    });
+  }, [transaction]);
 
-    async function pollTxCost() {
-      if (!buyForTx || !mounted) {
-        return;
+  return useQuery({
+    queryKey: [
+      "transaction-cost",
+      transaction.chain.id,
+      account?.address,
+      txQueryKey,
+    ],
+    queryFn: async () => {
+      if (!account) {
+        throw new Error("No account");
       }
 
-      try {
-        const totalCost = await getTotalTxCostForBuy(
-          buyForTx.tx,
-          account?.address,
-        );
-
-        if (!mounted) {
-          return;
-        }
+      const erc20Value = await resolvePromisedValue(transaction.erc20Value);
+      if (erc20Value) {
+        const [tokenBalance, tokenMeta, gasCostWei] = await Promise.all([
+          getWalletBalance({
+            address: account.address,
+            chain: transaction.chain,
+            client: transaction.client,
+            tokenAddress: erc20Value.tokenAddress,
+          }),
+          getCurrencyMetadata({
+            contract: getContract({
+              address: erc20Value.tokenAddress,
+              chain: transaction.chain,
+              client: transaction.client,
+            }),
+          }),
+          getTransactionGasCost(transaction, account?.address),
+        ]);
+        const transactionValueWei = erc20Value.amountWei;
+        const walletBalance = tokenBalance;
+        const currency = {
+          address: erc20Value.tokenAddress,
+          name: tokenMeta.name,
+          symbol: tokenMeta.symbol,
+          icon: supportedDestinations
+            .find((c) => c.chain.id === transaction.chain.id)
+            ?.tokens.find(
+              (t) =>
+                t.address.toLowerCase() ===
+                erc20Value.tokenAddress.toLowerCase(),
+            )?.icon,
+        };
+        return {
+          token: currency,
+          decimals: tokenMeta.decimals,
+          walletBalance,
+          gasCostWei,
+          transactionValueWei,
+        } satisfies TransactionCostAndData;
+      }
 
-        setAmountNeeded(totalCost);
+      const [nativeWalletBalance, chainMetadata, gasCostWei] =
+        await Promise.all([
+          getWalletBalance({
+            address: account.address,
+            chain: transaction.chain,
+            client: transaction.client,
+          }),
+          getChainMetadata(transaction.chain),
+          getTransactionGasCost(transaction, account?.address),
+        ]);
 
-        if (shouldRefreshTokenAmount) {
-          if (totalCost > buyForTx.balance) {
-            setTokenAmount(toEther(totalCost - buyForTx.balance));
-          }
-        }
-      } catch (error) {
-        // no op
+      const walletBalance = nativeWalletBalance;
+      const transactionValueWei =
+        (await resolvePromisedValue(transaction.value)) || 0n;
+      return {
+        token: {
+          address: NATIVE_TOKEN_ADDRESS,
+          name: chainMetadata.nativeCurrency.name,
+          symbol: chainMetadata.nativeCurrency.symbol,
+          icon: chainMetadata.icon?.url,
+        },
+        decimals: 18,
+        walletBalance,
+        gasCostWei,
+        transactionValueWei,
+      } satisfies TransactionCostAndData;
+    },
+    enabled: !!transaction && !!account && !!txQueryKey,
+    refetchInterval: () => {
+      if (transaction.erc20Value) {
+        // if erc20 value is set, we don't need to poll
+        return undefined;
       }
+      return 30_000;
+    },
+  });
+}
 
-      await wait(30000);
-      pollTxCost();
-    }
+export async function getTransactionGasCost(
+  tx: PreparedTransaction,
+  from?: string,
+) {
+  try {
+    const gasCost = await estimateGasCost({
+      transaction: tx,
+      from,
+    });
 
-    pollTxCost();
+    const bufferCost = gasCost.wei / 10n;
 
-    return () => {
-      mounted = false;
-    };
-  }, [buyForTx, shouldRefreshTokenAmount, setTokenAmount, account]);
+    // Note: get tx.value AFTER estimateGasCost
+    // add 10% extra gas cost to the estimate to ensure user buys enough to cover the tx cost
+    return gasCost.wei + bufferCost;
+  } catch (e) {
+    if (from) {
+      // try again without passing from
+      return await getTransactionGasCost(tx);
+    }
+    // fallback if both fail, use the tx value + 2M * gas price
+    const gasPrice = await getGasPrice({
+      client: tx.client,
+      chain: tx.chain,
+    });
 
-  return {
-    amountNeeded,
-  };
+    return 2_000_000n * gasPrice;
+  }
 }

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

@@ -7,13 +7,18 @@ 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 = {
+  showPaymentSelection: boolean;
+  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(): {
@@ -23,8 +28,8 @@ export function useEnabledPaymentMethods(options: {
     const chain = supportedDestinations.find((c) => c.chain.id === toChain.id);
     if (!chain) {
       return {
-        fiat: true,
-        swap: true,
+        fiat: false,
+        swap: false,
       };
     }
 

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

@@ -1,29 +1,29 @@
 import { useState } from "react";
 import { polygon } from "../../../../../../../chains/chain-definitions/polygon.js";
 import type { Chain } from "../../../../../../../chains/types.js";
-import { toEther } from "../../../../../../../utils/units.js";
-import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
+import type {
+  FundWalletOptions,
+  PayUIOptions,
+} from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import { defaultSelectedCurrency } from "../fiat/currencies.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
-import type { BuyForTx } from "./types.js";
 
 // handle states for token and chain selection
 
 export function useUISelectionStates(options: {
   payOptions: PayUIOptions;
-  buyForTx?: BuyForTx;
   supportedDestinations: SupportedChainAndTokens;
 }) {
   const activeChain = useActiveWalletChain();
-  const { payOptions, buyForTx, supportedDestinations } = options;
+  const { payOptions, supportedDestinations } = options;
 
   // buy token amount ---------------------------------------------------------
-  const initialTokenAmount =
-    payOptions.prefillBuy?.amount ||
-    (buyForTx ? String(toEther(buyForTx.cost - buyForTx.balance)) : "");
+  // NOTE - for transaction / direct payment modes, the token amount is set when the user tap continue
+  const prefillBuy = (payOptions as FundWalletOptions)?.prefillBuy;
+  const initialTokenAmount = prefillBuy?.amount || "";
 
   const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
@@ -33,9 +33,9 @@ export function useUISelectionStates(options: {
   // Destination chain and token selection -----------------------------------
   const [toChain, setToChain] = useState<Chain>(
     // use prefill chain if available
-    payOptions.prefillBuy?.chain ||
-      // use buyForTx chain if available
-      buyForTx?.tx.chain ||
+    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 ||
@@ -44,7 +44,9 @@ export function useUISelectionStates(options: {
   );
 
   const [toToken, setToToken] = useState<ERC20OrNativeToken>(
-    payOptions.prefillBuy?.token || NATIVE_TOKEN,
+    prefillBuy?.token ||
+      (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
+      NATIVE_TOKEN,
   );
   // --------------------------------------------------------------------------
 
@@ -53,6 +55,8 @@ export function useUISelectionStates(options: {
     // use prefill chain if available
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.chain) ||
+      (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
+      (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain) ||
       // default to polygon
       polygon,
   );
@@ -61,6 +65,7 @@ export function useUISelectionStates(options: {
     // use prefill token if available
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.token) ||
+      (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
       // default to native token
       NATIVE_TOKEN,
   );

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

@@ -40,7 +40,7 @@ export function PayTxHistoryScreen(props: {
   onBack?: () => void;
   client: ThirdwebClient;
   onDone: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
 }) {
   const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
@@ -66,7 +66,7 @@ export function PayTxHistoryScreen(props: {
         statusInfo={selectedTx}
         onBack={() => setSelectedTx(null)}
         onDone={props.onDone}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         payer={payer}
       />

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

@@ -17,7 +17,7 @@ export function FiatDetailsScreen(props: {
   onBack: () => void;
   client: ThirdwebClient;
   onDone: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
 }) {
@@ -48,8 +48,7 @@ export function FiatDetailsScreen(props: {
         client={props.client}
         status={status}
         onBack={props.onBack}
-        onViewPendingTx={props.onBack}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         quote={{
           fromCurrencyAmount: fiatQuote.fromCurrencyWithFees.amount,

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

@@ -289,7 +289,7 @@ export function SwapTxDetailsTable(
           >
             <Text>Send to</Text>
             <Container flex="row" gap="xs" center="y">
-              <Text color="primaryText">
+              <Text color="primaryText" size="sm">
                 {shortenAddress(uiData.toAddress)}
               </Text>
             </Container>

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

@@ -28,7 +28,7 @@ export function TokenInfoRow(props: {
         justifyContent: "space-between",
       }}
     >
-      <Text>{props.label}</Text>
+      <Text size="sm">{props.label}</Text>
       <Container
         flex="column"
         gap="xxs"

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

@@ -10,7 +10,7 @@ export function TxDetailsScreen(props: {
   statusInfo: TxStatusInfo;
   onBack: () => void;
   onDone: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
 }) {
@@ -34,7 +34,7 @@ export function TxDetailsScreen(props: {
         status={statusInfo.status}
         onBack={props.onBack}
         onDone={props.onDone}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         payer={props.payer}
       />