thirdweb 5.64.6-nightly-f40d2474e6cc1227a8d05151210ef4793beb6142-20241101000357 → 5.65.0-nightly-06604162a11d99ff119bbf427a24b9a7d82c1575-20241103000408

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -109,7 +109,7 @@ import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
 import { SendFunds } from "./screens/SendFunds.js";
-import { ViewAssets } from "./screens/ViewAssets.js";
+import { type AssetTabs, ViewAssets } from "./screens/ViewAssets.js";
 import { ViewNFTs } from "./screens/ViewNFTs.js";
 import { ViewTokens } from "./screens/ViewTokens.js";
 import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
@@ -170,6 +170,7 @@ export const ConnectedWalletDetails: React.FC<{
         chains={props.chains}
         displayBalanceToken={props.detailsButton?.displayBalanceToken}
         connectOptions={props.connectOptions}
+        assetTabs={props.detailsModal?.assetTabs}
       />,
     );
   }
@@ -284,6 +285,7 @@ function DetailsModal(props: {
   chains: Chain[];
   displayBalanceToken?: Record<number, string>;
   connectOptions: DetailsModalConnectOptions | undefined;
+  assetTabs?: AssetTabs[];
 }) {
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const { disconnect } = useDisconnect();
@@ -627,21 +629,24 @@ function DetailsModal(props: {
           </MenuButton>
 
           {/* View Funds */}
-          <MenuButton
-            onClick={() => {
-              setScreen("view-assets");
-            }}
-            style={{
-              fontSize: fontSize.sm,
-            }}
-          >
-            <CoinsIcon size={iconSize.md} />
-            <Text color="primaryText">
-              {props.supportedNFTs
-                ? locale.viewFunds.viewAssets
-                : locale.viewFunds.title}
-            </Text>
-          </MenuButton>
+          {/* Hide the View Funds button if the assetTabs props is set to an empty array */}
+          {(props.assetTabs === undefined || props.assetTabs.length) && (
+            <MenuButton
+              onClick={() => {
+                setScreen("view-assets");
+              }}
+              style={{
+                fontSize: fontSize.sm,
+              }}
+            >
+              <CoinsIcon size={iconSize.md} />
+              <Text color="primaryText">
+                {props.supportedNFTs
+                  ? locale.viewFunds.viewAssets
+                  : locale.viewFunds.title}
+              </Text>
+            </MenuButton>
+          )}
 
           {/* Manage Wallet */}
           <MenuButton
@@ -799,6 +804,7 @@ function DetailsModal(props: {
           setScreen={setScreen}
           client={client}
           connectLocale={locale}
+          assetTabs={props.detailsModal?.assetTabs}
         />
       );
     } else {
@@ -1458,6 +1464,13 @@ export type UseWalletDetailsModalOptions = {
    * By default the "Buy Funds" button is shown.
    */
   hideBuyFunds?: boolean;
+
+  /**
+   * When you click on "View Assets", by default the "Tokens" tab is shown first.
+   * If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]
+   * Note: If an empty array is passed, the [View Funds] button will be hidden
+   */
+  assetTabs?: AssetTabs[];
 };
 
 /**
@@ -1515,6 +1528,7 @@ export function useWalletDetailsModal() {
               hideBuyFunds: props.hideBuyFunds,
               hideReceiveFunds: props.hideReceiveFunds,
               hideSendFunds: props.hideSendFunds,
+              assetTabs: props.assetTabs,
             }}
             displayBalanceToken={props.displayBalanceToken}
             theme={props.theme || "dark"}

package/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { type Theme, iconSize } from "../../../../core/design-system/index.js";
 import type {
@@ -15,6 +15,29 @@ import { ViewNFTsContent } from "./ViewNFTs.js";
 import { ViewTokensContent } from "./ViewTokens.js";
 import type { WalletDetailsModalScreen } from "./types.js";
 
+/**
+ * @internal
+ */
+export type AssetTabs = "token" | "nft";
+
+const TokenTab = {
+  label: (
+    <span className="flex gap-2">
+      <CoinsIcon size={iconSize.sm} /> Tokens
+    </span>
+  ),
+  value: "Tokens",
+};
+
+const NftTab = {
+  label: (
+    <span className="flex gap-2">
+      <ImageIcon size={iconSize.sm} /> NFTs
+    </span>
+  ),
+  value: "NFTs",
+};
+
 /**
  * @internal
  */
@@ -26,9 +49,29 @@ export function ViewAssets(props: {
   setScreen: (screen: WalletDetailsModalScreen) => void;
   client: ThirdwebClient;
   connectLocale: ConnectLocale;
+  assetTabs?: AssetTabs[];
 }) {
-  const [activeTab, setActiveTab] = useState("Tokens");
   const { connectLocale } = props;
+  const options = useMemo(() => {
+    if (!props.assetTabs) {
+      return [TokenTab, NftTab];
+    }
+    if (!props.assetTabs.length) {
+      return [];
+    }
+    const tabs = [];
+    for (const item of props.assetTabs) {
+      if (item === "token") {
+        tabs.push(TokenTab);
+      } else if (item === "nft") {
+        tabs.push(NftTab);
+      }
+    }
+    return tabs;
+  }, [props.assetTabs]);
+
+  // Since `options` is now a dynamic value, the default active tab is set to the value of the first tab in `options`
+  const [activeTab, setActiveTab] = useState(options[0]?.value || "Tokens");
 
   return (
     <Container
@@ -52,28 +95,7 @@ export function ViewAssets(props: {
         }}
       >
         <Spacer y="md" />
-        <Tabs
-          options={[
-            {
-              label: (
-                <span className="flex gap-2">
-                  <CoinsIcon size={iconSize.sm} /> Tokens
-                </span>
-              ),
-              value: "Tokens",
-            },
-            {
-              label: (
-                <span className="flex gap-2">
-                  <ImageIcon size={iconSize.sm} /> NFTs
-                </span>
-              ),
-              value: "NFTs",
-            },
-          ]}
-          selected={activeTab}
-          onSelect={setActiveTab}
-        >
+        <Tabs options={options} selected={activeTab} onSelect={setActiveTab}>
           <Container
             scrollY
             style={{

package/src/rpc/rpc.ts

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../client/client.js";
 
 import type { Chain } from "../chains/types.js";
 import { getRpcUrlForChain } from "../chains/utils.js";
+import { stringify } from "../utils/json.js";
 import { type RpcRequest, fetchRpc, fetchSingleRpc } from "./fetch-rpc.js";
 
 const RPC_CLIENT_MAP = new WeakMap();
@@ -23,7 +24,7 @@ function getRpcClientMap(client: ThirdwebClient) {
  * @internal
  */
 function rpcRequestKey(request: RpcRequest): string {
-  return `${request.method}:${JSON.stringify(request.params)}`;
+  return `${request.method}:${stringify(request.params)}`;
 }
 
 const DEFAULT_MAX_BATCH_SIZE = 100;

package/src/utils/domains.ts

@@ -29,6 +29,11 @@ type DomainOverrides = {
    * @default "bundler.thirdweb.com"
    */
   bundler?: string;
+  /**
+   * The base URL for the analytics server.
+   * @default "c.thirdweb.com"
+   */
+  analytics?: string;
 };
 
 export const DEFAULT_RPC_URL = "rpc.thirdweb.com";
@@ -37,6 +42,7 @@ const DEFAULT_IN_APP_WALLET_URL = "embedded-wallet.thirdweb.com";
 const DEFAULT_PAY_URL = "pay.thirdweb.com";
 const DEFAULT_STORAGE_URL = "storage.thirdweb.com";
 const DEFAULT_BUNDLER_URL = "bundler.thirdweb.com";
+const DEFAULT_ANALYTICS_URL = "c.thirdweb.com";
 
 let domains: { [k in keyof DomainOverrides]-?: string } = {
   rpc: DEFAULT_RPC_URL,
@@ -45,6 +51,7 @@ let domains: { [k in keyof DomainOverrides]-?: string } = {
   pay: DEFAULT_PAY_URL,
   storage: DEFAULT_STORAGE_URL,
   bundler: DEFAULT_BUNDLER_URL,
+  analytics: DEFAULT_ANALYTICS_URL,
 };
 
 /**
@@ -58,6 +65,7 @@ export const setThirdwebDomains = (DomainOverrides: DomainOverrides) => {
     pay: DomainOverrides.pay ?? DEFAULT_PAY_URL,
     storage: DomainOverrides.storage ?? DEFAULT_STORAGE_URL,
     bundler: DomainOverrides.bundler ?? DEFAULT_BUNDLER_URL,
+    analytics: DomainOverrides.analytics ?? DEFAULT_ANALYTICS_URL,
   };
 };
 

package/src/utils/extensions/airdrop/process-snapshot-erc1155.ts

@@ -2,6 +2,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { MerkleTree } from "../../../merkletree/MerkleTree.js";
 import { upload } from "../../../storage/upload.js";
 import type { Hex } from "../../encoding/hex.js";
+import { stringify } from "../../json.js";
 import { hashEntryERC1155 } from "./hash-entry-erc1155.js";
 import type {
   ShardDataERC1155,
@@ -54,7 +55,7 @@ export async function processSnapshotERC1155(options: {
       entries,
     };
     shardsToUpload.push({
-      data: JSON.stringify(data),
+      data: stringify(data),
       name: `${shardId}.json`,
     });
   }
@@ -74,7 +75,7 @@ export async function processSnapshotERC1155(options: {
   // 6. Also upload the original entries for retrieving all entries
   const originalEntriesUri = await upload({
     client: options.client,
-    files: [JSON.stringify(options.snapshot)],
+    files: [stringify(options.snapshot)],
   });
   // 7. assmeble the final sharded merkle tree info
   const shardedMerkleInfo: ShardedMerkleTreeInfo = {

package/src/utils/extensions/airdrop/process-snapshot-erc20.ts

@@ -2,6 +2,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { MerkleTree } from "../../../merkletree/MerkleTree.js";
 import { upload } from "../../../storage/upload.js";
 import type { Hex } from "../../encoding/hex.js";
+import { stringify } from "../../json.js";
 import { hashEntryERC20 } from "./hash-entry-erc20.js";
 import type {
   ShardDataERC20,
@@ -56,7 +57,7 @@ export async function processSnapshotERC20(options: {
       entries,
     };
     shardsToUpload.push({
-      data: JSON.stringify(data),
+      data: stringify(data),
       name: `${shardId}.json`,
     });
   }
@@ -76,7 +77,7 @@ export async function processSnapshotERC20(options: {
   // 6. Also upload the original entries for retrieving all entries
   const originalEntriesUri = await upload({
     client: options.client,
-    files: [JSON.stringify(options.snapshot)],
+    files: [stringify(options.snapshot)],
   });
   // 7. assmeble the final sharded merkle tree info
   const shardedMerkleInfo: ShardedMerkleTreeInfo = {

package/src/utils/extensions/airdrop/process-snapshot-erc721.ts

@@ -2,6 +2,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { MerkleTree } from "../../../merkletree/MerkleTree.js";
 import { upload } from "../../../storage/upload.js";
 import type { Hex } from "../../encoding/hex.js";
+import { stringify } from "../../json.js";
 import { hashEntryERC721 } from "./hash-entry-erc721.js";
 import type {
   ShardDataERC721,
@@ -54,7 +55,7 @@ export async function processSnapshotERC721(options: {
       entries,
     };
     shardsToUpload.push({
-      data: JSON.stringify(data),
+      data: stringify(data),
       name: `${shardId}.json`,
     });
   }
@@ -74,7 +75,7 @@ export async function processSnapshotERC721(options: {
   // 6. Also upload the original entries for retrieving all entries
   const originalEntriesUri = await upload({
     client: options.client,
-    files: [JSON.stringify(options.snapshot)],
+    files: [stringify(options.snapshot)],
   });
   // 7. assmeble the final sharded merkle tree info
   const shardedMerkleInfo: ShardedMerkleTreeInfo = {

package/src/utils/extensions/drops/process-override-list.ts

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { MerkleTree } from "../../../merkletree/MerkleTree.js";
 import { upload } from "../../../storage/upload.js";
 import type { Hex } from "../../encoding/hex.js";
+import { stringify } from "../../json.js";
 import { hashEntry } from "./hash-entry.js";
 import type {
   OverrideEntry,
@@ -67,7 +68,7 @@ export async function processOverrideList(options: {
       entries,
     };
     shardsToUpload.push({
-      data: JSON.stringify(data),
+      data: stringify(data),
       name: `${shardId}.json`,
     });
   }
@@ -87,7 +88,7 @@ export async function processOverrideList(options: {
   // 6. Also upload the original entries for retrieving all entries
   const originalEntriesUri = await upload({
     client: options.client,
-    files: [JSON.stringify(options.overrides)],
+    files: [stringify(options.overrides)],
   });
   // 7. assmeble the final sharded merkle tree info
   const shardedMerkleInfo: ShardedMerkleTreeInfo = {

package/src/utils/jwt/encode-jwt.ts

@@ -1,5 +1,6 @@
 import type { Account } from "../../wallets/interfaces/wallet.js";
 import { stringToBytes } from "../encoding/to-bytes.js";
+import { stringify } from "../json.js";
 import { randomBytesHex } from "../random.js";
 import { uint8ArrayToBase64 } from "../uint8-array.js";
 import { PRECOMPILED_B64_ENCODED_JWT_HEADER } from "./jwt-header.js";
@@ -47,14 +48,13 @@ type EncodeJWTParams = { payload: JWTPayloadInput; account: Account };
  */
 export async function encodeJWT(options: EncodeJWTParams) {
   const payload = await ensureJWTPayload(options.payload);
-  const message = JSON.stringify(payload);
+  const message = stringify(payload);
 
   const signature = await options.account.signMessage({ message });
 
-  const encodedData = uint8ArrayToBase64(
-    stringToBytes(JSON.stringify(payload)),
-    { urlSafe: true },
-  );
+  const encodedData = uint8ArrayToBase64(stringToBytes(message), {
+    urlSafe: true,
+  });
 
   const encodedSignature = uint8ArrayToBase64(stringToBytes(signature), {
     urlSafe: true,

package/src/utils/nft/fetch-token-metadata.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { TEST_CLIENT } from "~test/test-clients.js";
+import { stringify } from "../json.js";
 import {
   type FetchTokenMetadataOptions,
   fetchTokenMetadata,
@@ -9,7 +10,7 @@ describe("fetchTokenMetadata", () => {
   it("should return a json object from a valid base64 encoded json", async () => {
     const validJson = { foo: "bar" };
     const validBase64Json = `data:application/json;base64,${btoa(
-      JSON.stringify(validJson),
+      stringify(validJson),
     )}`;
 
     const options: FetchTokenMetadataOptions = {

package/src/utils/storage/walletStorage.ts

@@ -1,3 +1,4 @@
+import { stringify } from "../json.js";
 import type { AsyncStorage } from "./AsyncStorage.js";
 
 const CONNECT_PARAMS_MAP_KEY = "tw:connected-wallet-params";
@@ -39,7 +40,7 @@ export async function saveConnectParamsToStorage<T extends object>(
     };
   }
 
-  storage.setItem(CONNECT_PARAMS_MAP_KEY, JSON.stringify(value));
+  storage.setItem(CONNECT_PARAMS_MAP_KEY, stringify(value));
 }
 
 /**
@@ -67,7 +68,7 @@ export async function deleteConnectParamsFromStorage(
     }
 
     delete value[walletId];
-    storage.setItem(CONNECT_PARAMS_MAP_KEY, JSON.stringify(value));
+    storage.setItem(CONNECT_PARAMS_MAP_KEY, stringify(value));
   }
 }
 
@@ -100,7 +101,7 @@ export async function getSavedConnectParamsFromStorage<T extends object>(
 
 function isStringifiable(value: unknown): boolean {
   try {
-    JSON.stringify(value);
+    stringify(value);
     return true;
   } catch {
     return false;

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.64.6-nightly-f40d2474e6cc1227a8d05151210ef4793beb6142-20241101000357";
+export const version = "5.65.0-nightly-06604162a11d99ff119bbf427a24b9a7d82c1575-20241103000408";

package/src/wallets/coinbase/coinbaseWebSDK.ts

@@ -307,6 +307,7 @@ function createAccount({
 
       trackTransaction({
         client: client,
+        chainId: tx.chainId,
         walletAddress: getAddress(address),
         walletType: COINBASE,
         transactionHash,

package/src/wallets/in-app/core/authentication/authEndpoint.ts

@@ -1,5 +1,6 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
 import { ROUTE_AUTH_ENDPOINT_CALLBACK } from "../../native/helpers/constants.js";
 import { createErrorMessage } from "../../native/helpers/errors.js";
 import type { Ecosystem } from "../wallet/types.js";
@@ -17,7 +18,7 @@ export async function authEndpoint(args: {
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({
+    body: stringify({
       payload: args.payload,
       developerClientId: args.client.clientId,
     }),

package/src/wallets/in-app/core/authentication/guest.ts

@@ -1,5 +1,6 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
 import { randomBytesHex } from "../../../../utils/random.js";
 import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
 import type { Ecosystem } from "../wallet/types.js";
@@ -39,7 +40,7 @@ export async function guestAuthenticate(args: {
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({
+    body: stringify({
       sessionId,
     }),
   });

package/src/wallets/in-app/core/authentication/jwt.ts

@@ -1,5 +1,6 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
 import { ROUTE_AUTH_JWT_CALLBACK } from "../../native/helpers/constants.js";
 import { createErrorMessage } from "../../native/helpers/errors.js";
 import type { Ecosystem } from "../wallet/types.js";
@@ -17,7 +18,7 @@ export async function customJwt(args: {
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({
+    body: stringify({
       jwt: args.jwt,
       developerClientId: args.client.clientId,
     }),

package/src/wallets/in-app/core/authentication/linkAccount.ts

@@ -1,6 +1,7 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
 import type { Ecosystem } from "../wallet/types.js";
 import type { ClientScopedStorage } from "./client-scoped-storage.js";
 import type { Profile } from "./types.js";
@@ -40,7 +41,7 @@ export async function linkAccount({
     {
       method: "POST",
       headers,
-      body: JSON.stringify({
+      body: stringify({
         accountAuthTokenToConnect: tokenToLink,
       }),
     },

package/src/wallets/in-app/core/authentication/passkeys.ts

@@ -1,6 +1,7 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
 import type { Ecosystem } from "../wallet/types.js";
 import type { ClientScopedStorage } from "./client-scoped-storage.js";
 import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
@@ -96,7 +97,7 @@ export async function registerPasskey(options: {
       "Content-Type": "application/json",
       ...customHeaders,
     },
-    body: JSON.stringify({
+    body: stringify({
       type: "sign-up",
       authenticatorData: registration.authenticatorData,
       credentialId: registration.credentialId,
@@ -166,7 +167,7 @@ export async function loginWithPasskey(options: {
       "Content-Type": "application/json",
       ...customHeaders,
     },
-    body: JSON.stringify({
+    body: stringify({
       type: "sign-in",
       authenticatorData: authentication.authenticatorData,
       credentialId: authentication.credentialId,

package/src/wallets/in-app/core/authentication/siwe.ts

@@ -3,6 +3,7 @@ import type { LoginPayload } from "../../../../auth/core/types.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
 import type { Wallet } from "../../../interfaces/wallet.js";
 import type { Ecosystem } from "../wallet/types.js";
 import { getLoginCallbackUrl, getLoginUrl } from "./getLoginPath.js";
@@ -50,7 +51,7 @@ export async function siweAuthenticate(args: {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({
+        body: stringify({
           signature,
           payload,
         }),

package/src/wallets/in-app/core/wallet/enclave-wallet.ts

@@ -202,6 +202,7 @@ export class EnclaveWallet implements IWebWallet {
         trackTransaction({
           client,
           ecosystem,
+          chainId: tx.chainId,
           walletAddress: address,
           walletType: "inApp",
           transactionHash,

package/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -2,6 +2,7 @@ import { trackConnect } from "../../../../analytics/track/connect.js";
 import type { Chain } from "../../../../chains/types.js";
 import { getCachedChainIfExists } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { stringify } from "../../../../utils/json.js";
 import { getEcosystemInfo } from "../../../ecosystem/get-ecosystem-wallet-auth-options.js";
 import type { Account, Wallet } from "../../../interfaces/wallet.js";
 import { createWalletEmitter } from "../../../wallet-emitter.js";
@@ -22,7 +23,7 @@ export async function getOrCreateInAppWalletConnector(
   connectorFactory: (client: ThirdwebClient) => Promise<InAppConnector>,
   ecosystem?: Ecosystem,
 ) {
-  const key = JSON.stringify({ clientId: client.clientId, ecosystem });
+  const key = stringify({ clientId: client.clientId, ecosystem });
   if (connectorCache.has(key)) {
     return connectorCache.get(key) as InAppConnector;
   }

package/src/wallets/in-app/native/helpers/api/fetchers.ts

@@ -1,6 +1,7 @@
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Hex } from "../../../../../utils/encoding/hex.js";
 import { getClientFetch } from "../../../../../utils/fetch.js";
+import { stringify } from "../../../../../utils/json.js";
 import { randomBytesHex } from "../../../../../utils/random.js";
 import type { ClientScopedStorage } from "../../../core/authentication/client-scoped-storage.js";
 import type { UserDetailsApiType } from "../../../core/authentication/types.js";
@@ -35,7 +36,7 @@ export const verifyClientId = async (client: ThirdwebClient) => {
     headers: {
       ...getSessionHeaders(),
     },
-    body: JSON.stringify({ clientId: client.clientId, parentDomain: "" }),
+    body: stringify({ clientId: client.clientId, parentDomain: "" }),
   });
   if (!resp.ok) {
     const error = await resp.json();
@@ -155,7 +156,7 @@ export async function storeUserShares({
     props: {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
+      body: stringify({
         walletAddress,
         maybeEncryptedRecoveryShares,
         authShare,
@@ -168,7 +169,7 @@ export async function storeUserShares({
     const error = await resp.json();
 
     throw new Error(
-      `Something went wrong storing user wallet shares: ${JSON.stringify(
+      `Something went wrong storing user wallet shares: ${stringify(
         error.message,
         null,
         2,
@@ -193,7 +194,7 @@ export async function getUserShares(args: {
   if (!resp.ok) {
     const error = await resp.json();
     throw new Error(
-      `Something went wrong getting user's wallet: ${JSON.stringify(
+      `Something went wrong getting user's wallet: ${stringify(
         error.message,
         null,
         2,

package/src/wallets/in-app/native/helpers/errors.ts

@@ -1,3 +1,5 @@
+import { stringify } from "../../../../utils/json.js";
+
 export const ErrorMessages = {
   invalidOtp:
     "Your OTP code is invalid or expired. Please request a new code or try again.",
@@ -8,5 +10,5 @@ export const createErrorMessage = (message: string, error: unknown): string => {
   if (error instanceof Error) {
     return `${message}: ${error.message}`;
   }
-  return `${message}: ${JSON.stringify(error)}`;
+  return `${message}: ${stringify(error)}`;
 };

package/src/wallets/in-app/native/helpers/storage/local.ts

@@ -1,4 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { stringify } from "../../../../../utils/json.js";
 import {
   DEVICE_SHARE_LOCAL_STORAGE_NAME,
   WALLET_USER_DETAILS_LOCAL_STORAGE_NAME,
@@ -65,7 +66,7 @@ export async function setWallerUserDetails({
   await setItemInAsyncStorage(
     // ! Keep this in sync with getWalletUserDetails function below
     name,
-    JSON.stringify({ userId, email: newEmail }),
+    stringify({ userId, email: newEmail }),
   );
 }