thirdweb 5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240708000345 → 5.34.0-nightly-325416ea19905901f30e795cbf93cb8a085be02f-20240708203622

package/src/auth/verify-signature.ts

@@ -1,27 +1,10 @@
-import { equalBytes } from "@noble/curves/abstract/utils";
-import {
-  type Signature,
-  encodeDeployData,
-  recoverAddress,
-  serializeSignature,
-} from "viem";
+import { type Signature, recoverAddress } from "viem";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
-import { getContract } from "../contract/contract.js";
-import { eth_call } from "../rpc/actions/eth_call.js";
-import { getRpcClient } from "../rpc/rpc.js";
-import { fromBytes } from "../utils/encoding/from-bytes.js";
 import { type Hex, isHex } from "../utils/encoding/hex.js";
-import { toBytes } from "../utils/encoding/to-bytes.js";
 import { hashMessage } from "../utils/hashing/hashMessage.js";
 import type { Prettify } from "../utils/type-utils.js";
-import { DEFAULT_ACCOUNT_FACTORY } from "../wallets/smart/lib/constants.js";
-import {
-  universalSignatureValidatorAbi,
-  universalSignatureValidatorByteCode,
-} from "./constants.js";
-import { isErc6492Signature } from "./is-erc6492-signature.js";
-import { serializeErc6492Signature } from "./serialize-erc6492-signature.js";
+import { verifyHash } from "./verify-hash.js";
 
 export type VerifyEOASignatureParams = {
   message: string;
@@ -113,69 +96,15 @@ export async function verifyContractWalletSignature({
   client,
   accountFactory,
 }: VerifyContractWalletSignatureParams) {
-  console.log("verifyContractWalletSignature");
   const messageHash = hashMessage(message);
-
-  const signatureHex = (() => {
-    if (isHex(signature)) return signature;
-    if (typeof signature === "object" && "r" in signature && "s" in signature)
-      return serializeSignature(signature);
-    if (signature instanceof Uint8Array) return fromBytes(signature, "hex");
-    // We should never hit this but TS doesn't know that
-    throw new Error(
-      `Invalid signature type for signature ${signature}: ${typeof signature}`,
-    );
-  })();
-
-  const accountContract = getContract({
+  return verifyHash({
+    hash: messageHash,
+    signature,
     address,
-    chain,
     client,
-  });
-
-  const wrappedSignature = await (async () => {
-    // If this sigature was already wrapped for ERC-6492, carry on
-    if (isErc6492Signature(signatureHex)) return signatureHex;
-
-    // If the contract is already deployed, return the original signature
-    const { isContractDeployed } = await import(
-      "../utils/bytecode/is-contract-deployed.js"
-    );
-    const isDeployed = await isContractDeployed(accountContract);
-    if (!isDeployed) return signatureHex;
-
-    // Otherwise, serialize the signature for ERC-6492 validation
-    return serializeErc6492Signature({
-      address: accountFactory?.address ?? DEFAULT_ACCOUNT_FACTORY,
-      data: accountFactory?.verificationCalldata ?? "0x",
-      signature: signatureHex,
-    });
-  })();
-
-  const verificationData = encodeDeployData({
-    abi: universalSignatureValidatorAbi,
-    args: [address, messageHash, wrappedSignature],
-    bytecode: universalSignatureValidatorByteCode,
-  });
-
-  const rpcRequest = getRpcClient({
     chain,
-    client,
+    accountFactory,
   });
-
-  try {
-    const result = await eth_call(rpcRequest, {
-      data: verificationData,
-    });
-
-    const hexResult = isHex(result) ? toBytes(result) : result;
-    return equalBytes(hexResult, toBytes("0x1"));
-  } catch (error) {
-    console.log("error", error);
-    // TODO: Improve overall RPC error handling so we can tell if this was an actual verification failure or some other error
-    // Verification failed somehow
-    return false;
-  }
 }
 
 export type VerifySignatureParams = Prettify<

package/src/auth/verify-typed-data.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, test } from "vitest";
+import { TEST_CLIENT } from "../../test/src/test-clients.js";
+import { ANVIL_PKEY_A, TEST_ACCOUNT_A } from "../../test/src/test-wallets.js";
+import { typedData } from "../../test/src/typed-data.js";
+import { mainnet } from "../chains/chain-definitions/ethereum.js";
+import { signTypedData } from "../utils/signatures/sign-typed-data.js";
+import { verifyTypedData } from "./verify-typed-data.js";
+
+describe("verifyTypedData", async () => {
+  test("valid EOA signature", async () => {
+    const signature = signTypedData({
+      ...typedData.basic,
+      primaryType: "Mail",
+      privateKey: ANVIL_PKEY_A,
+    });
+
+    expect(
+      await verifyTypedData({
+        ...typedData.basic,
+        primaryType: "Mail",
+        address: TEST_ACCOUNT_A.address,
+        signature,
+        chain: mainnet,
+        client: TEST_CLIENT,
+      }),
+    ).toBe(true);
+  });
+
+  test("invalid EOA signature", async () => {
+    expect(
+      await verifyTypedData({
+        ...typedData.basic,
+        primaryType: "Mail",
+        address: TEST_ACCOUNT_A.address,
+        signature: "0xdead",
+        chain: mainnet,
+        client: TEST_CLIENT,
+      }),
+    ).toBe(false);
+  });
+
+  test("valid smart account signature", async () => {
+    expect(
+      await verifyTypedData({
+        ...typedData.basic,
+        primaryType: "Mail",
+        address: "0x3FCf42e10CC70Fe75A62EB3aDD6D305Aa840d145",
+        signature:
+          "0x79d756d805073dc97b7bc885b0d56ddf319a2599530fe1e178c2a7de5be88980068d24f20a79b318ea0a84d33ae06f93db77e4235e5d9eeb8b1d7a63922ada3e1c",
+        chain: mainnet,
+        client: TEST_CLIENT,
+      }),
+    ).toBe(true);
+  });
+
+  test("invalid smart account signature", async () => {
+    expect(
+      await verifyTypedData({
+        ...typedData.basic,
+        primaryType: "Mail",
+        address: "0x3FCf42e10CC70Fe75A62EB3aDD6D305Aa840d145",
+        signature: "0xdead",
+        chain: mainnet,
+        client: TEST_CLIENT,
+      }),
+    ).toBe(false);
+  });
+
+  test("non-existent account", async () => {
+    expect(
+      await verifyTypedData({
+        ...typedData.basic,
+        primaryType: "Mail",
+        address: "0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef",
+        signature:
+          "0x79d756d805073dc97b7bc885b0d56ddf319a2599530fe1e178c2a7de5be88980068d24f20a79b318ea0a84d33ae06f93db77e4235e5d9eeb8b1d7a63922ada3e1c",
+        chain: mainnet,
+        client: TEST_CLIENT,
+      }),
+    ).toBe(false);
+  });
+});

package/src/auth/verify-typed-data.ts

@@ -0,0 +1,110 @@
+import type { Signature, TypedData, TypedDataDefinition } from "viem";
+import { hashTypedData } from "viem";
+import type { Chain } from "../chains/types.js";
+import type { ThirdwebClient } from "../client/client.js";
+import type { Hex } from "../utils/encoding/hex.js";
+import type { HashTypedDataParams } from "../utils/hashing/hashTypedData.js";
+import { type VerifyHashParams, verifyHash } from "./verify-hash.js";
+
+export type VerifyTypedDataParams<
+  typedData extends TypedData | Record<string, unknown> = TypedData,
+  primaryType extends keyof typedData | "EIP712Domain" = keyof typedData,
+> = Omit<VerifyHashParams, "hash"> &
+  TypedDataDefinition<typedData, primaryType> & {
+    address: string;
+    signature: string | Uint8Array | Signature;
+    client: ThirdwebClient;
+    chain: Chain;
+    accountFactory?: {
+      address: string;
+      verificationCalldata: Hex;
+    };
+  };
+
+/**
+ * @description Verify am [EIP-712](https://eips.ethereum.org/EIPS/eip-712) typed data signature. This function is interoperable with all wallet types (smart accounts or EOAs).
+ *
+ * @param {string} options.address The address that signed the typed data
+ * @param {string | Uint8Array | Signature} options.signature The signature that was signed
+ * @param {ThirdwebClient} options.client The Thirdweb client
+ * @param {Chain} options.chain The chain that the address is on. For an EOA, this can be any chain.
+ * @param {string} [options.accountFactory.address] The address of the account factory that created the account if using a smart account with a custom account factory
+ * @param {Hex} [options.accountFactory.verificationCalldata] The calldata that was used to create the account if using a smart account with a custom account factory
+ * @param {typeof VerifyTypedDataParams.message} options.message The EIP-712 message that was signed.
+ * @param {typeof VerifyTypedDataParams.domain} options.domain The EIP-712 domain that was signed.
+ * @param {typeof VerifyTypedDataParams.primaryType} options.primaryType The EIP-712 primary type that was signed.
+ * @param {typeof VerifyTypedDataParams.types} options.types The EIP-712 types that were signed.
+ *
+ * @returns {Promise<boolean>} A promise that resolves to `true` if the signature is valid, or `false` otherwise.
+ * 
+ * @example
+ * ```ts
+ * import { verifyTypedData } from "thirdweb/utils";
+ * const isValid = await verifyTypedData({
+ *   address: "0x...",
+ *   signature: "0x...",
+ *   client,
+ *   chain,
+ *   domain: {
+      name: "Ether Mail",
+      version: "1",
+      chainId: 1,
+      verifyingContract: "0x0000000000000000000000000000000000000000",
+    },
+ *   primaryType: "Mail",
+ *   types: {
+      Person: [
+        { name: "name", type: "string" },
+        { name: "wallet", type: "address" },
+      ],
+      Mail: [
+        { name: "from", type: "Person" },
+        { name: "to", type: "Person" },
+        { name: "contents", type: "string" },
+      ],
+    },
+    message: {
+      from: {
+        name: "Cow",
+        wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+      },
+      to: {
+        name: "Bob",
+        wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+      },
+      contents: "Hello, Bob!",
+    },
+ * });
+ * ```
+ *
+ * @auth
+ */
+export async function verifyTypedData<
+  typedData extends TypedData | Record<string, unknown>,
+  primaryType extends keyof typedData | "EIP712Domain",
+>({
+  address,
+  signature,
+  client,
+  chain,
+  accountFactory,
+  message,
+  domain,
+  primaryType,
+  types,
+}: VerifyTypedDataParams<typedData, primaryType>): Promise<boolean> {
+  const messageHash = hashTypedData({
+    message,
+    domain,
+    primaryType,
+    types,
+  } as HashTypedDataParams);
+  return verifyHash({
+    hash: messageHash,
+    signature,
+    address,
+    chain,
+    client,
+    accountFactory,
+  });
+}

package/src/chains/chain-definitions/blast.ts

@@ -0,0 +1,14 @@
+import { defineChain } from "../utils.js";
+
+export const blast = /* @__PURE__ */ defineChain({
+  id: 81457,
+  name: "Blast",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  blockExplorers: [
+    {
+      name: "Blastscan",
+      url: "https://blastscan.io",
+      apiUrl: "https://api.blastscan.io/api",
+    },
+  ],
+});

package/src/exports/chains.ts

@@ -21,6 +21,7 @@ export { baseSepolia } from "../chains/chain-definitions/base-sepolia.js";
 export { base } from "../chains/chain-definitions/base.js";
 // mainnet = alias for ethereum
 export { ethereum, mainnet } from "../chains/chain-definitions/ethereum.js";
+export { blast } from "../chains/chain-definitions/blast.js";
 export { optimismSepolia } from "../chains/chain-definitions/optimism-sepolia.js";
 export { optimism } from "../chains/chain-definitions/optimism.js";
 export { lineaSepolia } from "../chains/chain-definitions/linea-sepolia.js";

package/src/exports/extensions/erc20.ts

@@ -33,6 +33,10 @@ export {
   transferFrom,
   type TransferFromParams,
 } from "../../extensions/erc20/write/transferFrom.js";
+export {
+  transferBatch,
+  type TransferBatchParams,
+} from "../../extensions/erc20/write/transferBatch.js";
 export {
   approve,
   type ApproveParams,

package/src/exports/utils.ts

@@ -149,3 +149,11 @@ export { stringify } from "../utils/json.js";
 // values
 // ------------------------------------------------
 export { maxUint256 } from "viem";
+
+// ------------------------------------------------
+// jwt
+// ------------------------------------------------
+export { decodeJWT } from "../utils/jwt/decode-jwt.js";
+export { encodeJWT, type JWTPayloadInput } from "../utils/jwt/encode-jwt.js";
+export { refreshJWT, type RefreshJWTParams } from "../utils/jwt/refresh-jwt.js";
+export type { JWTPayload } from "../utils/jwt/types.js";

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 {