@lumiapassport/ui-kit 1.14.11 → 1.14.12

package/dist/index.js

@@ -5267,7 +5267,7 @@ function Header() {
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.14.11",
+  version: "1.14.12",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",
@@ -8286,7 +8286,7 @@ function BuyMenu() {
 }
 
 // src/internal/components/KeyshareRestoreMenu/KeyshareRestoreMenu.tsx
-import { useMutation as useMutation10, useQuery as useQuery8, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
+import { useMutation as useMutation10, useQuery as useQuery7, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle2, CheckCircle2, CloudDownload as CloudDownload2, Loader as Loader8, UserCircle as UserCircle2 } from "lucide-react";
 import { useEffect as useEffect20 } from "react";
 init_vaultClient();
@@ -9127,21 +9127,17 @@ function File2(props) {
 }
 
 // src/internal/components/KeyshareRestoreMenu/methods/Server.tsx
-init_vaultClient();
-import { useQuery as useQuery6 } from "@tanstack/react-query";
+import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { ArrowLeft as ArrowLeft7, Download, Key as Key4, Upload as Upload2 } from "lucide-react";
 import { useEffect as useEffect18 } from "react";
 import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 function Server(props) {
   const { isLoading, mode = "restore", serverHandler } = props;
+  const qc = useQueryClient7();
   const address = useLumiaPassportSession((st) => st.address);
   const { usePasskey, setUsePasskey, setRestorePassword, setShowPassword, setMethod, setError, setSuccess } = useRestoreStore();
-  const { data: serverRecoveryStatus } = useQuery6({
-    retry: false,
-    queryKey: [CHECK_BACKUP_QUERY_KEY, address],
-    queryFn: async () => await getShareRecoveryStats()
-  });
+  const serverRecoveryStatus = qc.getQueryData([CHECK_BACKUP_QUERY_KEY, address]);
   useEffect18(() => {
     if (mode === "backup" || !serverRecoveryStatus?.created?.encryptionMethod) return;
     setUsePasskey(serverRecoveryStatus.created.encryptionMethod === "passkey");
@@ -9194,7 +9190,7 @@ function Server(props) {
 }
 
 // src/internal/components/KeyshareRestoreMenu/methods/Cloud.tsx
-import { useQuery as useQuery7 } from "@tanstack/react-query";
+import { useQuery as useQuery6 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft8, CloudDownload, CloudUpload, Loader as Loader7 } from "lucide-react";
 import { useEffect as useEffect19 } from "react";
 
@@ -9334,7 +9330,7 @@ function Cloud2(props) {
     data: cloudProviders = [],
     isLoading: isCloudProvidersLoading,
     error: cloudProvidersError
-  } = useQuery7({
+  } = useQuery6({
     retry: false,
     enabled: !!passportUserId,
     queryKey: [AVAILABLE_CLOUD_PROVIDERS_QUERY_KEY, passportUserId],
@@ -9417,10 +9413,10 @@ var RESTORE_COMPONENTS = {
   file: File2
 };
 var KeyshareRestoreMenu = () => {
-  const qc = useQueryClient7();
+  const qc = useQueryClient8();
   const callbacks = useLumiaPassportConfig().callbacks;
   const { address, setSession, setAddress, setStatus, setIsLoading } = useLumiaPassportSession();
-  const { data: serverRecoveryStatus, isFetching: isBackupStatusLoading } = useQuery8({
+  const { data: serverRecoveryStatus, isLoading: isBackupStatusLoading } = useQuery7({
     retry: false,
     queryKey: [CHECK_BACKUP_QUERY_KEY, address],
     queryFn: async () => await getShareRecoveryStats()
@@ -9558,7 +9554,7 @@ var KeyshareRestoreMenu = () => {
 };
 
 // src/internal/components/KeyshareRestoreMenu/KeyshareBackupMenu.tsx
-import { useQuery as useQuery9 } from "@tanstack/react-query";
+import { useQuery as useQuery8 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle3, ArrowLeft as ArrowLeft9, CheckCircle2 as CheckCircle22 } from "lucide-react";
 import { useEffect as useEffect21 } from "react";
 init_vaultClient();
@@ -9586,7 +9582,7 @@ function KeyshareBackupMenu() {
     setShowPassword,
     setUsePasskey
   } = useRestoreStore();
-  const { data: serverRecoveryStatus } = useQuery9({
+  const { data: serverRecoveryStatus } = useQuery8({
     retry: false,
     queryKey: [CHECK_BACKUP_QUERY_KEY, address],
     queryFn: async () => await getShareRecoveryStats()
@@ -9669,12 +9665,12 @@ import { useEffect as useEffect22 } from "react";
 
 // src/internal/components/ManageWalletMenu/hooks/useProvidersList.ts
 init_common();
-import { useQuery as useQuery10 } from "@tanstack/react-query";
+import { useQuery as useQuery9 } from "@tanstack/react-query";
 var PROVIDERS_QUERY_KEY = "lumia-passport-providers-query";
 function useProvidersList() {
   const address = useLumiaPassportSession((st) => st.address);
   const page = useLayoutDataStore((st) => st.page);
-  return useQuery10({
+  return useQuery9({
     retry: false,
     // hook is invoked on multiple pages to preload cache
     enabled: !!address && (page === "manage-wallet" /* MANAGE_WALLET */ || page === "settings" /* SETTINGS */ || page === "main-menu" /* MAIN_MENU */),
@@ -9720,7 +9716,7 @@ import { AlertTriangle as AlertTriangle3, ArrowLeft as ArrowLeft10, Loader as Lo
 import { useMemo as useMemo3 } from "react";
 
 // src/modules/linkedProfiles.ts
-import { useQuery as useQuery11, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
+import { useQuery as useQuery10, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
 import { useCallback as useCallback10 } from "react";
 init_auth();
 init_common();
@@ -9741,13 +9737,13 @@ async function getLinkProfilesData() {
   return { profiles: loadedProfiles, avatar };
 }
 function useLumiaPassportLinkedProfiles() {
-  const qc = useQueryClient8();
+  const qc = useQueryClient9();
   const address = useLumiaPassportSession((st) => st.address);
   const {
     data,
     isFetching: isLoading,
     error
-  } = useQuery11({
+  } = useQuery10({
     retry: false,
     enabled: !!address,
     queryKey: [LINKED_PROFILES_QUERY_KEY, address],
@@ -9761,7 +9757,7 @@ function useLumiaPassportLinkedProfiles() {
 }
 
 // src/internal/components/ManageWalletMenu/AddProvider.tsx
-import { useQueryClient as useQueryClient10 } from "@tanstack/react-query";
+import { useQueryClient as useQueryClient11 } from "@tanstack/react-query";
 init_passkey2();
 
 // src/internal/components/ManageWalletMenu/EmailForm.tsx
@@ -9917,11 +9913,11 @@ function useSendVerificationCode() {
 }
 
 // src/internal/components/ManageWalletMenu/hooks/useVerifyCode.ts
-import { useMutation as useMutation13, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
+import { useMutation as useMutation13, useQueryClient as useQueryClient10 } from "@tanstack/react-query";
 init_email();
 function useVerifyCode() {
   const { callbacks } = useLumiaPassportConfig();
-  const qc = useQueryClient9();
+  const qc = useQueryClient10();
   const address = useLumiaPassportSession((st) => st.address);
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
   const { email, emailCode, setEmail, setEmailStep, setEmailCode, setProviderType, setLinkIsLoading, setAlert } = useManageWalletStore();
@@ -9973,7 +9969,7 @@ function normalizePasskeyLinkError(msg) {
   return msg;
 }
 function AddProvider() {
-  const qc = useQueryClient10();
+  const qc = useQueryClient11();
   const callbacks = useLumiaPassportConfig().callbacks;
   const address = useLumiaPassportSession((st) => st.address);
   const {
@@ -10133,11 +10129,11 @@ function EmailNotConnectedWarning() {
 }
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkSocial.ts
-import { useQueryClient as useQueryClient11 } from "@tanstack/react-query";
+import { useQueryClient as useQueryClient12 } from "@tanstack/react-query";
 import React6, { useEffect as useEffect23 } from "react";
 init_auth();
 function useLinkSocial() {
-  const qc = useQueryClient11();
+  const qc = useQueryClient12();
   const address = useLumiaPassportSession((st) => st.address);
   const {
     config: { current: config },
@@ -10220,14 +10216,14 @@ function useLinkSocial() {
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkTelegram.ts
 init_telegram2();
-import { useQueryClient as useQueryClient12 } from "@tanstack/react-query";
+import { useQueryClient as useQueryClient13 } from "@tanstack/react-query";
 import { useCallback as useCallback11, useEffect as useEffect24, useState as useState10 } from "react";
 function useLinkTelegram() {
   const {
     config: { current: config },
     callbacks
   } = useLumiaPassportConfig();
-  const qc = useQueryClient12();
+  const qc = useQueryClient13();
   const address = useLumiaPassportSession((st) => st.address);
   const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
   const { providerType, linkIsLoading, setLinkIsLoading, setProviderType, setAlert } = useManageWalletStore();
@@ -10521,13 +10517,13 @@ function ManageWalletMenu() {
 }
 
 // src/internal/components/ManageWalletMenu/UnlinkProviderMenu.tsx
-import { useMutation as useMutation14, useQueryClient as useQueryClient13 } from "@tanstack/react-query";
+import { useMutation as useMutation14, useQueryClient as useQueryClient14 } from "@tanstack/react-query";
 import { Key as Key5, Loader as Loader11 } from "lucide-react";
 import { useState as useState11 } from "react";
 init_auth();
 import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
 function UnlinkProviderMenu() {
-  const qc = useQueryClient13();
+  const qc = useQueryClient14();
   const address = useLumiaPassportSession((st) => st.address);
   const { callbacks } = useLumiaPassportConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -10606,7 +10602,7 @@ function UnlinkProviderMenu() {
 }
 
 // src/internal/components/PortfolioMenu/PortfolioMenu.tsx
-import { useQueryClient as useQueryClient15 } from "@tanstack/react-query";
+import { useQueryClient as useQueryClient16 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle4, ArrowLeft as ArrowLeft11, Gem, Loader as Loader13, RefreshCw } from "lucide-react";
 import { useCallback as useCallback13 } from "react";
 
@@ -10614,7 +10610,7 @@ import { useCallback as useCallback13 } from "react";
 init_lumiaPassport();
 init_base();
 import { useCallback as useCallback12, useMemo as useMemo4, useRef as useRef12 } from "react";
-import { useQuery as useQuery12 } from "@tanstack/react-query";
+import { useQuery as useQuery11 } from "@tanstack/react-query";
 import { useBalance as useBalance2, usePublicClient } from "wagmi";
 import { formatUnits } from "viem";
 import {
@@ -10779,7 +10775,7 @@ function useBlockscoutAssets(options) {
     error: tokensError,
     refetch: refetchTokens,
     dataUpdatedAt
-  } = useQuery12({
+  } = useQuery11({
     queryKey: [BLOCKSCOUT_QUERY_KEY, address, blockscoutApiUrl],
     queryFn: () => blockscoutClient.getTokenBalances(address),
     enabled: !!address && enabled,
@@ -10792,7 +10788,7 @@ function useBlockscoutAssets(options) {
     data: nftItems,
     isLoading: nftsLoading,
     refetch: refetchNfts
-  } = useQuery12({
+  } = useQuery11({
     queryKey: [BLOCKSCOUT_QUERY_KEY, "nfts", address, blockscoutApiUrl],
     queryFn: () => blockscoutClient.getNfts(address),
     enabled: !!address && enabled,
@@ -10805,7 +10801,7 @@ function useBlockscoutAssets(options) {
     if (!tokenBalances) return [];
     return tokenBalances.filter((tb) => tb.token.type === "ERC-20").map((tb) => tb.token.address);
   }, [tokenBalances]);
-  const { data: erc3643Results } = useQuery12({
+  const { data: erc3643Results } = useQuery11({
     queryKey: [ERC3643_DETECTION_QUERY_KEY, address, erc20TokenAddresses],
     queryFn: async () => {
       if (!publicClient2 || erc20TokenAddresses.length === 0) {
@@ -10922,12 +10918,16 @@ function useBlockscoutAssets(options) {
 
 // src/internal/components/PortfolioMenu/PortfolioItem.tsx
 init_base();
-import { useQuery as useQuery13, useQueryClient as useQueryClient14 } from "@tanstack/react-query";
+import { useQuery as useQuery12, useQueryClient as useQueryClient15 } from "@tanstack/react-query";
 import { Image as ImageIcon, Loader as Loader12, Shield, Sparkles } from "lucide-react";
 import { useState as useState12 } from "react";
+import { formatUnits as formatUnits2 } from "viem";
 import { Fragment as Fragment16, jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
 var price16 = Intl.NumberFormat("en-US", { minimumFractionDigits: 16, maximumFractionDigits: 16 });
+var price2 = Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+var price0 = Intl.NumberFormat("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
 function formatValue(price) {
+  console.log("[formatValue]", price);
   if (!price) return /* @__PURE__ */ jsx54(Fragment16, { children: `0.00` });
   if (price < 0.01) {
     const strigified = price16.format(price);
@@ -10939,7 +10939,15 @@ function formatValue(price) {
       absValue
     ] });
   }
-  return /* @__PURE__ */ jsx54(Fragment16, { children: price.toFixed(2) });
+  if (price > 1e9) return /* @__PURE__ */ jsxs45(Fragment16, { children: [
+    price0.format(price / 1e9),
+    " B"
+  ] });
+  if (price > 1e6) return /* @__PURE__ */ jsxs45(Fragment16, { children: [
+    price0.format(price / 1e6),
+    " M"
+  ] });
+  return /* @__PURE__ */ jsx54(Fragment16, { children: price2.format(price) });
 }
 function openInExplorer(address) {
   window.open(`${LUMIA_EXPLORER_URL}/address/${address}`, "_blank");
@@ -10967,20 +10975,20 @@ function PortfolioItem(props) {
   const [nftImageError, setNftImageError] = useState12(false);
   const [logoError, setLogoError] = useState12(false);
   const { assets: projectAssets, showBalanceAs: showBalanceAsSymbol } = useLumiaPassportConfig().config.current.projectAssets || {};
-  const qc = useQueryClient14();
+  const qc = useQueryClient15();
   const { balanceQueryKey } = projectAssets?.find((a) => a.symbol === showBalanceAsSymbol) || {};
   const projectAssetBalance = !!balanceQueryKey ? qc.getQueryData(balanceQueryKey) : null;
   const isNft = isNftAsset(asset);
   const nftImage = getNftImage(asset);
   const isSecurity = isSecurityToken(asset);
-  const { data: assetRate, isLoading: isRateLoading } = useQuery13({
+  const { data: assetRate, isLoading: isRateLoading } = useQuery12({
     retry: false,
     staleTime: 4 * 60 * 1e3,
     enabled: !!address && !!asset.symbol && !isProjectAsset && !isNft && !isSecurity,
     queryKey: [ASSETS_RATES_QUERY_KEY, address, asset.symbol],
     queryFn: async () => await getAssetRate2(asset.symbol)
   });
-  const renderBalance = isProjectAsset && projectAssetBalance?.fiatFormatted ? projectAssetBalance.fiatFormatted : asset.formattedBalance;
+  const renderBalance = isProjectAsset && projectAssetBalance?.fiatFormatted ? projectAssetBalance.fiatFormatted : formatUnits2(BigInt(asset?.balance || "0"), asset?.decimals || 18);
   return /* @__PURE__ */ jsxs45(
     "div",
     {
@@ -11073,14 +11081,12 @@ function PortfolioItem(props) {
     }
   );
 }
-{
-}
 
 // src/internal/components/PortfolioMenu/PortfolioMenu.tsx
 import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
 function PortfolioMenu() {
   const { assets: projectAssets = [] } = useLumiaPassportConfig().config.current?.projectAssets || {};
-  const qc = useQueryClient15();
+  const qc = useQueryClient16();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
   const address = useLumiaPassportSession((st) => st.address);
@@ -11146,7 +11152,7 @@ function PortfolioMenu() {
 // src/internal/components/SecurityMenu/SecurityMenu.tsx
 init_auth();
 init_keyshare();
-import { useQuery as useQuery14, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
+import { useQuery as useQuery13, useQueryClient as useQueryClient17 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft12, Loader as Loader16, Trash2 as Trash22 } from "lucide-react";
 import { useState as useState13 } from "react";
 init_iframe_manager();
@@ -11334,14 +11340,14 @@ function Keyshare(props) {
 // src/internal/components/SecurityMenu/SecurityMenu.tsx
 import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
 function SecurityMenu() {
-  const qc = useQueryClient16();
+  const qc = useQueryClient17();
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const userId = jwtTokenManager2.getUserId();
   const serverHasKeyshare = jwtTokenManager2.getHasKeyshare() ?? false;
   const [isRemoving, setIsRemoving] = useState13(false);
   const [appToRemove, setAppToRemove] = useState13(null);
-  const { data: recoveryData, isFetching: isRecoveryLoading } = useQuery14({
+  const { data: recoveryData, isFetching: isRecoveryLoading } = useQuery13({
     enabled: !!userId,
     queryKey: [KEYSHARE_RECOVERY_STATS_QUERY, userId],
     queryFn: async () => {
@@ -11583,7 +11589,7 @@ function useSendTransaction() {
 init_base();
 import React7 from "react";
 import { useBalance as useBalance3, useReadContract, useReadContracts } from "wagmi";
-import { formatUnits as formatUnits2, erc20Abi } from "viem";
+import { formatUnits as formatUnits3, erc20Abi } from "viem";
 var COMMON_TOKENS = [
   // Add real token addresses here when available
   // {
@@ -11633,7 +11639,7 @@ function useAssets(address) {
         const token = COMMON_TOKENS[index];
         if (balance.status === "success" && balance.result) {
           const balanceValue = balance.result;
-          const formattedBalance = formatUnits2(balanceValue, token.decimals);
+          const formattedBalance = formatUnits3(balanceValue, token.decimals);
           assets.push({
             type: "erc20",
             address: token.address,
@@ -11660,7 +11666,7 @@ function useAssets(address) {
     const token = COMMON_TOKENS[tokenIndex];
     if (balance.status === "success" && balance.result) {
       const balanceValue = balance.result;
-      const formattedBalance = formatUnits2(balanceValue, token.decimals);
+      const formattedBalance = formatUnits3(balanceValue, token.decimals);
       return {
         address: token.address,
         name: token.name,
@@ -11729,7 +11735,7 @@ function useTokenBalance(tokenAddress, userAddress) {
   const { tokenInfo } = useTokenInfo(tokenAddress);
   const formattedBalance = React7.useMemo(() => {
     if (!balance || !tokenInfo) return "0";
-    return formatUnits2(balance, tokenInfo.decimals);
+    return formatUnits3(balance, tokenInfo.decimals);
   }, [balance, tokenInfo]);
   return {
     balance,
@@ -12087,7 +12093,7 @@ function TermsOfService() {
 }
 
 // src/internal/components/TransactionsMenu/TransactionsMenu.tsx
-import { useQuery as useQuery15, useQueryClient as useQueryClient17 } from "@tanstack/react-query";
+import { useQuery as useQuery14, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft17, Loader as Loader19, RefreshCw as RefreshCw3, XCircle as XCircle2 } from "lucide-react";
 import { useCallback as useCallback16, useState as useState17 } from "react";
 
@@ -12554,7 +12560,7 @@ function TransactionsGroup(props) {
 // src/internal/components/TransactionsMenu/TransactionsMenu.tsx
 import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
 function TransactionsMenu() {
-  const qc = useQueryClient17();
+  const qc = useQueryClient18();
   const address = useLumiaPassportSession((st) => st.address);
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -12565,7 +12571,7 @@ function TransactionsMenu() {
     isLoading: isTxHistoryLoading,
     isFetching: isTxHistoryFetching,
     error: txHistoryError
-  } = useQuery15({
+  } = useQuery14({
     retry: false,
     enabled: !!address && page === "transactions",
     queryKey: [TRANSACTIONS_HISTORY_QUERY_KEY, address],
@@ -12921,11 +12927,11 @@ var TssManagerWithRef = React9.forwardRef((props, ref) => {
 // src/internal/components/WalletConnectHandler.tsx
 init_wallet();
 import { useConnectModal } from "@rainbow-me/rainbowkit";
-import { useMutation as useMutation15, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
+import { useMutation as useMutation15, useQueryClient as useQueryClient19 } from "@tanstack/react-query";
 import React10, { useCallback as useCallback19, useEffect as useEffect32 } from "react";
 import { useAccount, useDisconnect, useSignMessage } from "wagmi";
 function WalletConnectHandler() {
-  const qc = useQueryClient18();
+  const qc = useQueryClient19();
   const callbacks = useLumiaPassportConfig().callbacks;
   const passportWalletAddress = useLumiaPassportSession((st) => st.address);
   const { address: walletAddress, isConnected, chain, connector } = useAccount();