thirdweb 5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240708000345 → 5.34.0-nightly-95c9d3d92406de619cb1e4cccc61b0766dd2a0d4-20240708205331

package/src/extensions/erc1271/checkContractWalletSignature.ts

@@ -12,6 +12,7 @@ const MAGIC_VALUE = "0x1626ba7e";
 
 /**
  * Checks if a contract wallet signature is valid.
+ * @deprecated Use `verifySignature` instead
  * @param options - The options for the checkContractWalletSignature function.
  * @param options.contract - The contract to check the signature against.
  * @param options.message - The message to check the signature against.

package/src/extensions/erc1271/checkContractWalletSignedTypedData.ts

@@ -15,6 +15,7 @@ const MAGIC_VALUE = "0x1626ba7e";
 
 /**
  * Checks if a contract wallet signature is valid.
+ * @deprecated Use `verifyTypedData` instead
  * @param options - The options for the checkContractWalletSignature function.
  * @param options.contract - The contract to check the signature against.
  * @param options.message - The message to check the signature against.

package/src/extensions/erc20/write/transferBatch.ts

@@ -0,0 +1,78 @@
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import type { Prettify } from "../../../utils/type-utils.js";
+import { toUnits } from "../../../utils/units.js";
+import { multicall } from "../../common/__generated__/IMulticall/write/multicall.js";
+import { encodeTransfer } from "../__generated__/IERC20/write/transfer.js";
+/**
+ * Represents the parameters for a batch transfer operation.
+ */
+export type TransferBatchParams = Prettify<{
+  batch: Array<
+    { to: string } & (
+      | {
+          amount: number | string;
+        }
+      | {
+          amountWei: bigint;
+        }
+    )
+  >;
+}>;
+
+/**
+ * Transfers a batch of ERC20 tokens from the sender's address to the specified recipient address.
+ * @param options - The options for the batch transfer transaction.
+ * @returns A promise that resolves to the prepared transaction.
+ * @extension ERC20
+ * @example
+ * ```ts
+ * import { transferBatch } from "thirdweb/extensions/erc20";
+ * import { sendTransaction } from "thirdweb";
+ *
+ * const transaction = transferBatch({
+ *  contract,
+ *  batch: [
+ *    {
+ *      to: "0x...",
+ *      amount: 100,
+ *    },
+ *    {
+ *      to: "0x...",
+ *      amount: "0.1",
+ *    },
+ * ]);
+ *
+ * await sendTransaction({ transaction, account });
+ * ```
+ */
+export function transferBatch(
+  options: BaseTransactionOptions<TransferBatchParams>,
+) {
+  return multicall({
+    contract: options.contract,
+    asyncParams: async () => {
+      return {
+        data: await Promise.all(
+          options.batch.map(async (transfer) => {
+            let amount: bigint;
+            if ("amount" in transfer) {
+              // if we need to parse the amount from ether to gwei then we pull in the decimals extension
+              const { decimals } = await import("../read/decimals.js");
+              // it's OK to call this multiple times because the call is cached
+              // if this fails we fall back to `18` decimals
+              const d = await decimals(options).catch(() => 18);
+              // turn ether into gwei
+              amount = toUnits(transfer.amount.toString(), d);
+            } else {
+              amount = transfer.amountWei;
+            }
+            return encodeTransfer({
+              to: transfer.to,
+              value: amount,
+            });
+          }),
+        ),
+      };
+    },
+  });
+}

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

@@ -141,6 +141,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     id: "main",
   });
 
+  const [hasEditedAmount, setHasEditedAmount] = useState(false);
+
   // UI selection
   const {
     tokenAmount,
@@ -408,6 +410,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
             supportedDestinations={supportedDestinations}
             onBack={props.onBack}
             theme={props.theme}
+            hasEditedAmount={hasEditedAmount}
+            setHasEditedAmount={setHasEditedAmount}
           />
         )}
 
@@ -486,6 +490,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   }}
                   payer={payer}
                   setTokenAmount={setTokenAmount}
+                  setHasEditedAmount={setHasEditedAmount}
                 />
               )}
             </TokenSelectedLayout>
@@ -512,8 +517,8 @@ function SelectedTokenInfo(props: {
         }}
       >
         <Container flex="row" gap="xs" center="y">
-          <Text color="primaryText" data-testid="tokenAmount" size="xxl">
-            {formatNumber(Number(props.tokenAmount), 5)}
+          <Text color="primaryText" data-testid="tokenAmount" size="xl">
+            {formatNumber(Number(props.tokenAmount), 6)}
           </Text>
 
           <Container flex="row" gap="xxs" center="y">
@@ -559,6 +564,8 @@ function MainScreen(props: {
   supportedDestinations: SupportedChainAndTokens;
   onBack: (() => void) | undefined;
   theme: "light" | "dark" | Theme;
+  hasEditedAmount: boolean;
+  setHasEditedAmount: (hasEdited: boolean) => void;
 }) {
   const { showPaymentSelection, buyWithCryptoEnabled, buyWithFiatEnabled } =
     useEnabledPaymentMethods({
@@ -568,7 +575,6 @@ function MainScreen(props: {
       toToken: props.toToken,
     });
 
-  const [hasEditedAmount, setHasEditedAmount] = useState(false);
   const {
     buyForTx,
     setTokenAmount,
@@ -584,7 +590,7 @@ function MainScreen(props: {
   const { amountNeeded } = useBuyTxStates({
     setTokenAmount,
     buyForTx: buyForTx || null,
-    hasEditedAmount,
+    hasEditedAmount: props.hasEditedAmount,
     account: payerAccount || null,
   });
 
@@ -605,7 +611,7 @@ function MainScreen(props: {
           <Spacer y="lg" />
           <BuyForTxUI
             amountNeeded={String(
-              formatNumber(Number(toEther(amountNeeded)), 4),
+              formatNumber(Number(toEther(amountNeeded)), 6),
             )}
             buyForTx={props.buyForTx}
             client={client}
@@ -619,7 +625,7 @@ function MainScreen(props: {
       <BuyTokenInput
         value={tokenAmount}
         onChange={async (value) => {
-          setHasEditedAmount(true);
+          props.setHasEditedAmount(true);
           setTokenAmount(value);
         }}
         freezeAmount={payOptions.prefillBuy?.allowEdits?.amount === false}
@@ -1094,6 +1100,7 @@ function FiatScreenContent(props: {
   isEmbed: boolean;
   payer: PayerInfo;
   setTokenAmount: (amount: string) => void;
+  setHasEditedAmount: (hasEdited: boolean) => void;
 }) {
   const [receiverAddress, setReceiverAddress] = useState(
     props.payer.account.address,
@@ -1182,18 +1189,27 @@ 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 formattedNum = formatNumber(minAmountTokenWithBuffer, 3);
 
         return {
-          msg: [`Minimum purchase amount is ${formattedNum}`],
-          minAmount: formattedNum,
+          minAmount: minAmountTokenWithBuffer,
         };
       }
     } catch {}
@@ -1279,7 +1295,20 @@ function FiatScreenContent(props: {
       {/* Error message */}
       {errorMsg && (
         <div>
-          {errorMsg.msg.map((msg) => (
+          {errorMsg.minAmount && (
+            <Text color="danger" size="sm" center multiline>
+              Minimum amount is {formatNumber(errorMsg.minAmount, 6)}{" "}
+              <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>
@@ -1293,6 +1322,7 @@ function FiatScreenContent(props: {
           fullWidth
           onClick={() => {
             props.setTokenAmount(String(errorMsg.minAmount));
+            props.setHasEditedAmount(true);
           }}
         >
           Set Minimum
@@ -1376,7 +1406,7 @@ function BuyForTxUI(props: {
         <Text size="sm">Your Balance</Text>
         <Container flex="row" gap="xs">
           <Text color="primaryText" size="sm">
-            {formatNumber(Number(toEther(props.buyForTx.balance)), 4)}{" "}
+            {formatNumber(Number(toEther(props.buyForTx.balance)), 6)}{" "}
             {props.buyForTx.tokenSymbol}
           </Text>
           <TokenIcon

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

@@ -82,7 +82,7 @@ export function PayWithCreditCard(props: {
           <Skeleton width="100px" height={fontSize.lg} />
         ) : (
           <Text size="lg" color={props.value ? "primaryText" : "secondaryText"}>
-            {props.value ? `${formatNumber(Number(props.value), 4)}` : "--"}
+            {props.value ? `${formatNumber(Number(props.value), 6)}` : "--"}
           </Text>
         )}
       </div>

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

@@ -163,7 +163,7 @@ export function FiatSteps(props: {
   const onRampTokenInfo = (
     <div>
       <Text color="primaryText" size="sm">
-        {formatNumber(Number(onRampTokenAmount), 4)}{" "}
+        {formatNumber(Number(onRampTokenAmount), 6)}{" "}
         <TokenSymbol token={onRampToken} chain={onRampChain} size="sm" inline />
       </Text>
     </div>
@@ -203,7 +203,7 @@ export function FiatSteps(props: {
             textDecoration: "line-through",
           }}
         >
-          {formatNumber(Number(toTokenAmount), 4)}{" "}
+          {formatNumber(Number(toTokenAmount), 6)}{" "}
           <TokenSymbol
             token={toToken}
             chain={toChain}
@@ -213,7 +213,7 @@ export function FiatSteps(props: {
           />
         </Text>{" "}
         <Text color="danger" size="sm" inline>
-          {formatNumber(Number(props.status.destination.amount), 4)}{" "}
+          {formatNumber(Number(props.status.destination.amount), 6)}{" "}
           <TokenSymbol
             token={{
               address: props.status.destination.token.tokenAddress,
@@ -231,7 +231,7 @@ export function FiatSteps(props: {
 
   const toTokenInfo = partialSuccessToTokenInfo || (
     <Text color="primaryText" size="sm">
-      {formatNumber(Number(toTokenAmount), 4)}{" "}
+      {formatNumber(Number(toTokenAmount), 6)}{" "}
       <TokenSymbol token={toToken} chain={toChain} size="sm" inline />
     </Text>
   );
@@ -330,7 +330,7 @@ export function FiatSteps(props: {
           icon: fiatIcon,
           primaryText: (
             <Text color="primaryText" size="sm">
-              {formatNumber(Number(fromCurrencyAmount), 4)} {fromCurrencySymbol}
+              {formatNumber(Number(fromCurrencyAmount), 6)} {fromCurrencySymbol}
             </Text>
           ),
         }}

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

@@ -75,7 +75,7 @@ export function OnRampTxDetailsTable(props: {
           <Container flex="row" gap="xs" center="y">
             <currencyMeta.icon size={iconSize.sm} />
             <Text color="primaryText">
-              {formatNumber(Number(props.fiat.amount), 4)}{" "}
+              {formatNumber(Number(props.fiat.amount), 2)}{" "}
               {props.fiat.currencySymbol}
             </Text>
           </Container>

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

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { toEther } from "../../../../../../../utils/units.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { getTotalTxCostForBuy } from "../../../../../../core/hooks/transaction/useSendTransaction.js";
@@ -48,10 +47,7 @@ export function useBuyTxStates(options: {
 
         if (shouldRefreshTokenAmount) {
           if (totalCost > buyForTx.balance) {
-            const _tokenAmount = String(
-              formatNumber(Number(toEther(totalCost - buyForTx.balance)), 4),
-            );
-            setTokenAmount(_tokenAmount);
+            setTokenAmount(toEther(totalCost - buyForTx.balance));
           }
         }
       } catch {

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

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { polygon } from "../../../../../../../chains/chain-definitions/polygon.js";
 import type { Chain } from "../../../../../../../chains/types.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { toEther } from "../../../../../../../utils/units.js";
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
@@ -24,11 +23,7 @@ export function useUISelectionStates(options: {
   // buy token amount ---------------------------------------------------------
   const initialTokenAmount =
     payOptions.prefillBuy?.amount ||
-    (buyForTx
-      ? String(
-          formatNumber(Number(toEther(buyForTx.cost - buyForTx.balance)), 4),
-        )
-      : "");
+    (buyForTx ? String(toEther(buyForTx.cost - buyForTx.balance)) : "");
 
   const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);

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

@@ -84,7 +84,7 @@ export function SwapConfirmationScreen(props: {
       <ConfirmItem label="Pay">
         <RenderTokenInfo
           chain={props.fromChain}
-          amount={String(formatNumber(Number(props.fromAmount), 4))}
+          amount={String(formatNumber(Number(props.fromAmount), 6))}
           symbol={props.fromTokenSymbol || ""}
           token={props.fromToken}
           client={props.client}
@@ -95,7 +95,7 @@ export function SwapConfirmationScreen(props: {
       <ConfirmItem label="Receive">
         <RenderTokenInfo
           chain={props.toChain}
-          amount={String(formatNumber(Number(props.toAmount), 4))}
+          amount={String(formatNumber(Number(props.toAmount), 6))}
           symbol={props.toTokenSymbol}
           token={props.toToken}
           client={props.client}

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

@@ -21,7 +21,7 @@ export function SwapFees(props: {
       }}
     >
       {props.quote.processingFees.map((fee) => {
-        const feeAmount = formatNumber(Number(fee.amount), 4);
+        const feeAmount = formatNumber(Number(fee.amount), 6);
         return (
           <Container
             key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
@@ -61,14 +61,14 @@ export function FiatFees(props: {
           Amount
         </Text>
         <Text color="primaryText" inline>
-          {formatNumber(Number(props.quote.fromCurrency.amount), 4)}{" "}
+          {formatNumber(Number(props.quote.fromCurrency.amount), 2)}{" "}
           {props.quote.fromCurrency.currencySymbol}
         </Text>
       </div>
 
       {/* Processing Fees */}
       {props.quote.processingFees.map((fee, i) => {
-        const feeAmount = formatNumber(Number(fee.amount), 4);
+        const feeAmount = formatNumber(Number(fee.amount), 6);
 
         return (
           <div
@@ -106,7 +106,7 @@ export function FiatFees(props: {
           Total
         </Text>
         <Text color="primaryText" inline>
-          {formatNumber(Number(props.quote.fromCurrencyWithFees.amount), 4)}{" "}
+          {formatNumber(Number(props.quote.fromCurrencyWithFees.amount), 6)}{" "}
           {props.quote.fromCurrencyWithFees.currencySymbol}
         </Text>
       </div>

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

@@ -118,7 +118,7 @@ export function PayWithCrypto(props: {
             color={props.value ? "primaryText" : "secondaryText"}
             style={{}}
           >
-            {formatNumber(Number(props.value), 4) || "--"}
+            {formatNumber(Number(props.value), 6) || "--"}
           </Text>
         )}
 

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistoryButton.tsx

@@ -79,7 +79,7 @@ export function BuyTxHistoryButton(props: {
                     ? props.txInfo.status.quote.toAmount
                     : props.txInfo.status.quote.estimatedToTokenAmount,
                 ),
-                4,
+                6,
               )}{" "}
               {props.txInfo.status.quote.toToken.symbol}
             </Text>{" "}

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TokenInfoRow.tsx

@@ -46,7 +46,7 @@ export function TokenInfoRow(props: {
             client={props.client}
           />
           <Text color="primaryText">
-            {formatNumber(Number(props.tokenAmount), 4)} {props.tokenSymbol}
+            {formatNumber(Number(props.tokenAmount), 6)} {props.tokenSymbol}
           </Text>
         </Container>
         <Text size="sm">{name}</Text>

package/src/utils/hashing/hashTypedData.test.ts

@@ -0,0 +1,207 @@
+import { expect, test } from "vitest";
+
+import { pad } from "viem";
+import { typedData } from "../../../test/src/typed-data.js";
+import { toHex } from "../encoding/hex.js";
+import { hashTypedData } from "./hashTypedData.js";
+
+test("default", () => {
+  expect(
+    hashTypedData({
+      ...typedData.basic,
+      primaryType: "Mail",
+    }),
+  ).toMatchInlineSnapshot(
+    '"0x448f54762ef8ecccdc4d19bb7d467161383cd4b271617a8cee05c790eb745d74"',
+  );
+});
+
+test("complex", () => {
+  expect(
+    hashTypedData({
+      ...typedData.complex,
+      primaryType: "Mail",
+    }),
+  ).toMatchInlineSnapshot(
+    '"0x9a74cb859ad30835ffb2da406423233c212cf6dd78e6c2c98b0c9289568954ae"',
+  );
+});
+
+test("no domain", () => {
+  expect(
+    hashTypedData({
+      ...typedData.complex,
+      domain: undefined,
+      primaryType: "Mail",
+    }),
+  ).toMatchInlineSnapshot(
+    '"0x14ed1dbbfecbe5de3919f7ea47daafdf3a29dfbb60dd88d85509f79773d503a5"',
+  );
+  expect(
+    hashTypedData({
+      ...typedData.complex,
+      domain: {},
+      primaryType: "Mail",
+    }),
+  ).toMatchInlineSnapshot(
+    '"0x14ed1dbbfecbe5de3919f7ea47daafdf3a29dfbb60dd88d85509f79773d503a5"',
+  );
+});
+
+test("domain: empty name", () => {
+  expect(
+    hashTypedData({
+      ...typedData.complex,
+      domain: { name: "" },
+      primaryType: "Mail",
+    }),
+  ).toMatchInlineSnapshot(
+    '"0xc3f4f9ebd774352940f60aebbc83fcee20d0b17eb42bd1b20c91a748001ecb53"',
+  );
+});
+
+test("minimal valid typed message", () => {
+  const hash = hashTypedData({
+    types: {
+      EIP712Domain: [],
+    },
+    primaryType: "EIP712Domain",
+    domain: {},
+  });
+
+  expect(hash).toMatchInlineSnapshot(
+    '"0x8d4a3f4082945b7879e2b55f181c31a77c8c0a464b70669458abbaaf99de4c38"',
+  );
+});
+
+test("typed message with a domain separator that uses all fields.", () => {
+  const hash = hashTypedData({
+    types: {
+      EIP712Domain: [
+        {
+          name: "name",
+          type: "string",
+        },
+        {
+          name: "version",
+          type: "string",
+        },
+        {
+          name: "chainId",
+          type: "uint256",
+        },
+        {
+          name: "verifyingContract",
+          type: "address",
+        },
+        {
+          name: "salt",
+          type: "bytes32",
+        },
+      ],
+    },
+    primaryType: "EIP712Domain",
+    domain: {
+      name: "example.metamask.io",
+      version: "1",
+      chainId: 1n,
+      verifyingContract: "0x0000000000000000000000000000000000000000",
+      salt: pad(toHex(new Uint8Array([1, 2, 3])), { dir: "right" }),
+    },
+  });
+
+  expect(hash).toMatchInlineSnapshot(
+    '"0x54ffed5209a17ac210ef3823740b3852ee9cd518b84ee39f0a3fa7f2f9b4205b"',
+  );
+});
+
+test("typed message with only custom domain separator fields", () => {
+  const hash = hashTypedData({
+    types: {
+      EIP712Domain: [
+        {
+          name: "customName",
+          type: "string",
+        },
+        {
+          name: "customVersion",
+          type: "string",
+        },
+        {
+          name: "customChainId",
+          type: "uint256",
+        },
+        {
+          name: "customVerifyingContract",
+          type: "address",
+        },
+        {
+          name: "customSalt",
+          type: "bytes32",
+        },
+        {
+          name: "extraField",
+          type: "string",
+        },
+      ],
+    },
+    primaryType: "EIP712Domain",
+    domain: {
+      customName: "example.metamask.io",
+      customVersion: "1",
+      customChainId: 1n,
+      customVerifyingContract: "0x0000000000000000000000000000000000000000",
+      customSalt: pad(toHex(new Uint8Array([1, 2, 3])), { dir: "right" }),
+      extraField: "stuff",
+    },
+  });
+
+  expect(hash).toMatchInlineSnapshot(
+    '"0x3efa3ef0305f56ba5bba62000500e29fe82c5314bca2f958c64e31b2498560f8"',
+  );
+});
+
+test("typed message with data", () => {
+  const hash = hashTypedData({
+    types: {
+      EIP712Domain: [
+        {
+          name: "name",
+          type: "string",
+        },
+        {
+          name: "version",
+          type: "string",
+        },
+        {
+          name: "chainId",
+          type: "uint256",
+        },
+        {
+          name: "verifyingContract",
+          type: "address",
+        },
+        {
+          name: "salt",
+          type: "bytes32",
+        },
+      ],
+      Message: [{ name: "data", type: "string" }],
+    },
+    primaryType: "Message",
+    domain: {
+      name: "example.metamask.io",
+      version: "1",
+      chainId: 1n,
+      verifyingContract: "0x0000000000000000000000000000000000000000",
+      salt: pad(toHex(new Uint8Array([1, 2, 3])), { dir: "right" }),
+    },
+    message: {
+      data: "Hello!",
+    },
+  });
+
+  expect(hash).toMatchInlineSnapshot(
+    '"0xd2669f23b7849020ad41bcbff5b51372793f91320e0f901641945568ed7322be"',
+  );
+});