thirdweb 5.36.0 → 5.36.1-nightly-af4acc4319fdfb323778694bd8843bd695e52d6b-20240719161043

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

@@ -6,7 +6,7 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import type { GetBuyWithCryptoQuoteParams } from "../../../../../../pay/buyWithCrypto/getQuote.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
-import { toEther } from "../../../../../../utils/units.js";
+import { toEther, toTokens } from "../../../../../../utils/units.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import {
   type Theme,
@@ -469,6 +469,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   setPayer={setPayer}
                   // pass it even though we are passing payer, because payer might be different
                   activeAccount={activeAccount}
+                  setTokenAmount={setTokenAmount}
+                  setHasEditedAmount={setHasEditedAmount}
                 />
               )}
 
@@ -618,7 +620,10 @@ function MainScreen(props: {
           <Spacer y="lg" />
           <BuyForTxUI
             amountNeeded={String(
-              formatNumber(Number(toEther(amountNeeded)), 6),
+              formatNumber(
+                Number(toTokens(amountNeeded, props.buyForTx.tokenDecimals)),
+                6,
+              ),
             )}
             buyForTx={props.buyForTx}
             client={client}
@@ -826,6 +831,8 @@ function SwapScreenContent(props: {
   connectLocale: ConnectLocale;
   setPayer: (payer: PayerInfo) => void;
   activeAccount: Account;
+  setTokenAmount: (amount: string) => void;
+  setHasEditedAmount: (hasEdited: boolean) => void;
 }) {
   const {
     setScreen,
@@ -894,21 +901,39 @@ function SwapScreenContent(props: {
   const disableContinue = !quoteQuery.data || isNotEnoughBalance;
   const switchChainRequired = props.payer.chain.id !== fromChain.id;
 
-  function getErrorMessage(err: Error) {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  function getErrorMessage(err: any) {
+    type AmountTooLowError = {
+      code: "MINIMUM_PURCHASE_AMOUNT";
+      data: {
+        minimumAmountUSDCents: number;
+        requestedAmountUSDCents: number;
+        minimumAmountWei: string;
+        minimumAmountEth: string;
+      };
+    };
+
     const defaultMessage = "Unable to get price quote";
     try {
-      if (err instanceof Error) {
-        if (err.message.includes("Minimum")) {
-          const msg = err.message;
-          return msg.replace("Fetch failed: Error: ", "");
-        }
+      if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
+        const obj = err.error as AmountTooLowError;
+        const minAmountToken = obj.data.minimumAmountEth;
+        return {
+          minAmount: formatNumber(Number(minAmountToken), 6),
+        };
       }
-      return defaultMessage;
-    } catch {
-      return defaultMessage;
-    }
+    } catch {}
+
+    return {
+      msg: [defaultMessage],
+    };
   }
 
+  const errorMsg =
+    !quoteQuery.isLoading && quoteQuery.error
+      ? getErrorMessage(quoteQuery.error)
+      : undefined;
+
   function showSwapFlow() {
     if (!quoteQuery.data) {
       return;
@@ -1048,18 +1073,46 @@ function SwapScreenContent(props: {
         />
       </div>
 
-      {/* Error */}
-      {quoteQuery.error && (
-        <Text color="danger" size="sm" center>
-          {getErrorMessage(quoteQuery.error)}
-        </Text>
+      {/* Error message */}
+      {errorMsg && (
+        <div>
+          {errorMsg.minAmount && (
+            <Text color="danger" size="sm" center multiline>
+              Minimum amount is {errorMsg.minAmount}{" "}
+              <TokenSymbol
+                token={toToken}
+                chain={toChain}
+                size="sm"
+                inline
+                color="danger"
+              />
+            </Text>
+          )}
+
+          {errorMsg.msg?.map((msg) => (
+            <Text color="danger" size="sm" center multiline key={msg}>
+              {msg}
+            </Text>
+          ))}
+        </div>
       )}
 
       {/* Button */}
-      {switchChainRequired &&
-      !quoteQuery.isLoading &&
-      !isNotEnoughBalance &&
-      !quoteQuery.error ? (
+      {errorMsg?.minAmount ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => {
+            props.setTokenAmount(String(errorMsg.minAmount));
+            props.setHasEditedAmount(true);
+          }}
+        >
+          Set Minimum
+        </Button>
+      ) : switchChainRequired &&
+        !quoteQuery.isLoading &&
+        !isNotEnoughBalance &&
+        !quoteQuery.error ? (
         <SwitchNetworkButton
           variant="accent"
           fullWidth
@@ -1193,6 +1246,8 @@ function FiatScreenContent(props: {
       data: {
         minimumAmountUSDCents: number;
         requestedAmountUSDCents: number;
+        minimumAmountWei: string;
+        minimumAmountEth: string;
       };
     };
 
@@ -1200,27 +1255,9 @@ function FiatScreenContent(props: {
     try {
       if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
         const obj = err.error as AmountTooLowError;
-        const minAmountUSD = obj.data.minimumAmountUSDCents;
-        const currentAmountUSD = obj.data.requestedAmountUSDCents;
-
-        // avoid divide by zero
-        // if we can't calculate the minimum amount in # of tokens, don't show the button to set the minimum amount
-        if (obj.data.requestedAmountUSDCents === 0) {
-          return {
-            msg: [
-              "Purchase amount is too low",
-              "Increase the amount and try again",
-            ],
-          };
-        }
-
-        const currentAmountToken = Number(props.tokenAmount);
-        const minAmountToken =
-          (minAmountUSD * currentAmountToken) / currentAmountUSD;
-        const minAmountTokenWithBuffer = minAmountToken * 1.2; // 20% buffer
-
+        const minAmountToken = obj.data.minimumAmountEth;
         return {
-          minAmount: minAmountTokenWithBuffer,
+          minAmount: formatNumber(Number(minAmountToken), 6),
         };
       }
     } catch {}
@@ -1303,7 +1340,7 @@ function FiatScreenContent(props: {
         <div>
           {errorMsg.minAmount && (
             <Text color="danger" size="sm" center multiline>
-              Minimum amount is {formatNumber(errorMsg.minAmount, 6)}{" "}
+              Minimum amount is {errorMsg.minAmount}{" "}
               <TokenSymbol
                 token={toToken}
                 chain={toChain}

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

@@ -1,5 +1,6 @@
 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 { type NativeToken, isNativeToken } from "../nativeToken.js";
@@ -24,7 +25,9 @@ export function PayTokenIcon(props: {
   const tokenIcon = !isNativeToken(token)
     ? supportedDestinationsQuery.data
         ?.find((c) => c.chain.id === props.chain.id)
-        ?.tokens.find((t) => t.address === token.address)?.icon
+        ?.tokens.find(
+          (t) => getAddress(t.address) === getAddress(token.address),
+        )?.icon
     : undefined;
 
   return (

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

@@ -7,6 +7,7 @@ export type BuyForTx = {
   balance: bigint;
   tx: PreparedTransaction;
   tokenSymbol: string;
+  tokenDecimals: number;
 };
 
 export type SelectedScreen =

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

@@ -28,6 +28,11 @@ export function useBuyTxStates(options: {
 
     let mounted = true;
 
+    if (buyForTx.tx.erc20Value) {
+      // if erc20 value is set, we don't need to poll
+      return;
+    }
+
     async function pollTxCost() {
       if (!buyForTx || !mounted) {
         return;
@@ -50,7 +55,7 @@ export function useBuyTxStates(options: {
             setTokenAmount(toEther(totalCost - buyForTx.balance));
           }
         }
-      } catch {
+      } catch (error) {
         // no op
       }
 

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

@@ -36,6 +36,7 @@ import {
  * @internal
  */
 export function PayTxHistoryScreen(props: {
+  title: string;
   onBack?: () => void;
   client: ThirdwebClient;
   onDone: () => void;
@@ -60,6 +61,7 @@ export function PayTxHistoryScreen(props: {
   if (selectedTx) {
     return (
       <TxDetailsScreen
+        title={props.title}
         client={props.client}
         statusInfo={selectedTx}
         onBack={() => setSelectedTx(null)}

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

@@ -12,6 +12,7 @@ import type { PayerInfo } from "../types.js";
 import { getBuyWithFiatStatusMeta } from "./statusMeta.js";
 
 export function FiatDetailsScreen(props: {
+  title: string;
   status: ValidBuyWithFiatStatus;
   onBack: () => void;
   client: ThirdwebClient;
@@ -43,7 +44,7 @@ export function FiatDetailsScreen(props: {
     const fiatQuote = status.quote;
     return (
       <PostOnRampSwapFlow
-        title="Buy"
+        title={props.title}
         client={props.client}
         status={status}
         onBack={props.onBack}

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

@@ -5,6 +5,7 @@ import { SwapDetailsScreen } from "./SwapDetailsScreen.js";
 import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
 
 export function TxDetailsScreen(props: {
+  title: string;
   client: ThirdwebClient;
   statusInfo: TxStatusInfo;
   onBack: () => void;
@@ -28,6 +29,7 @@ export function TxDetailsScreen(props: {
   if (statusInfo.type === "fiat") {
     return (
       <FiatDetailsScreen
+        title={props.title}
         client={props.client}
         status={statusInfo.status}
         onBack={props.onBack}

package/src/react/web/ui/PayEmbed.tsx

@@ -213,6 +213,7 @@ export function PayEmbed(props: PayEmbedProps) {
         {/* this does not need to persist so we can just show-hide it with JS */}
         {screen === "tx-history" && (
           <PayTxHistoryScreen
+            title={props.metadata?.title || "Buy"}
             client={props.client}
             onBack={() => {
               setScreen("buy");

package/src/transaction/prepare-transaction.ts

@@ -23,6 +23,11 @@ export type StaticPrepareTransactionOptions = {
   // tw specific
   chain: Chain;
   client: ThirdwebClient;
+  // extras
+  erc20Value?: {
+    amountWei: bigint;
+    tokenAddress: Address;
+  };
 };
 
 export type EIP712TransactionOptions = {

package/src/utils/extensions/drops/get-claim-params.ts

@@ -127,6 +127,17 @@ export async function getClaimParams(options: GetClaimParamsOptions) {
       ? allowlistProof.pricePerToken
       : cc.pricePerToken;
 
+  const totalPrice =
+    (pricePerToken * options.quantity) / BigInt(10 ** tokenDecimals);
+  const value = isNativeTokenAddress(currency) ? totalPrice : 0n;
+  const erc20Value =
+    !isNativeTokenAddress(currency) && pricePerToken > 0n
+      ? {
+          amountWei: totalPrice,
+          tokenAddress: currency,
+        }
+      : undefined;
+
   return {
     receiver: options.to,
     tokenId: options.type === "erc1155" ? options.tokenId : undefined,
@@ -136,9 +147,8 @@ export async function getClaimParams(options: GetClaimParamsOptions) {
     allowlistProof,
     data: "0x" as Hex,
     overrides: {
-      value: isNativeTokenAddress(currency)
-        ? (pricePerToken * options.quantity) / BigInt(10 ** tokenDecimals)
-        : 0n,
+      value,
+      erc20Value,
     },
   };
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.36.0";
+export const version = "5.36.1-nightly-af4acc4319fdfb323778694bd8843bd695e52d6b-20240719161043";