@cofhe/react 0.0.0-beta-20260420143138 → 0.0.0-beta-20260421071014

package/dist/index.cjs

@@ -800,7 +800,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/providers/CofheProvider.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/providers/QueryProvider.tsx
 var import_react_query = require("@tanstack/react-query");
@@ -840,6 +840,8 @@ var ETH_ADDRESS_LOWERCASE = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
 var TOKEN_CONFIDENTIALITY_SUPPORT = {
   wrapped: {
     enabled: true,
+    label: "Wrapped confidential token",
+    confidentialValueType: "uint128",
     publicBalanceSource: "erc20Pair",
     operations: {
       confidentialBalance: true,
@@ -853,6 +855,8 @@ var TOKEN_CONFIDENTIALITY_SUPPORT = {
   },
   pure: {
     enabled: false,
+    label: "Pure confidential token",
+    confidentialValueType: "uint64",
     publicBalanceSource: null,
     operations: {
       confidentialBalance: false,
@@ -866,6 +870,8 @@ var TOKEN_CONFIDENTIALITY_SUPPORT = {
   },
   dual: {
     enabled: false,
+    label: "Dual-balance confidential token",
+    confidentialValueType: "uint64",
     publicBalanceSource: "token",
     operations: {
       confidentialBalance: false,
@@ -892,6 +898,13 @@ function getPublicBalanceSourceType(type) {
   if (!isTokenConfidentialityType(type)) return null;
   return TOKEN_CONFIDENTIALITY_SUPPORT[type].publicBalanceSource;
 }
+function getTokenConfidentialityLabel(type) {
+  if (!isTokenConfidentialityType(type)) return null;
+  return TOKEN_CONFIDENTIALITY_SUPPORT[type].label;
+}
+function getTokenConfidentialValueType(type) {
+  return TOKEN_CONFIDENTIALITY_SUPPORT[type].confidentialValueType;
+}
 function assertTokenOperationSupported(type, operation) {
   if (isTokenOperationSupported(type, operation)) return;
   throw new Error(`${operation} not supported for confidentialityType: ${type ?? "undefined"}`);
@@ -1738,6 +1751,31 @@ var wrappedErc20ApprovalContracts = {
   }
 };
 var WRAPPED_TOKEN_CONTRACTS = {
+  detection: {
+    abi: [
+      {
+        inputs: [
+          {
+            internalType: "address",
+            name: "account",
+            type: "address"
+          }
+        ],
+        name: "encBalanceOf",
+        outputs: [
+          {
+            internalType: "euint128",
+            name: "",
+            type: "uint256"
+          }
+        ],
+        stateMutability: "view",
+        type: "function"
+      }
+    ],
+    functionName: "encBalanceOf",
+    args: [import_viem4.zeroAddress]
+  },
   confidentialBalance: {
     abi: [
       {
@@ -1889,6 +1927,15 @@ function getContractsForType(confidentialityType) {
 function getTokenContractConfig(confidentialityType) {
   return getContractsForType(confidentialityType).confidentialBalance;
 }
+function getSupportedTokenDetectionConfigs() {
+  return TOKEN_CONFIDENTIALITY_TYPES.filter(
+    (confidentialityType) => isSupportedTokenConfidentialityType(confidentialityType)
+  ).map((confidentialityType) => ({
+    confidentialityType,
+    probe: getContractsForType(confidentialityType).detection,
+    confidentialValueType: getTokenConfidentialValueType(confidentialityType)
+  }));
+}
 function getTransferContractConfig(confidentialityType) {
   return getContractsForType(confidentialityType).confidentialTransfer;
 }
@@ -1937,10 +1984,225 @@ function getClaimableContractConfig(confidentialityType) {
 // src/hooks/useCofheTokenLists.ts
 var import_react_query3 = require("@tanstack/react-query");
 var import_react5 = require("react");
+
+// src/stores/customTokensStore.ts
+var import_zustand2 = require("zustand");
+var import_middleware2 = require("zustand/middleware");
+var useCustomTokensStore = (0, import_zustand2.create)()(
+  (0, import_middleware2.persist)(
+    (set) => ({
+      customTokensByChainId: {},
+      addCustomToken: (token) => {
+        set((state) => {
+          const chainKey = token.chainId.toString();
+          const existing = state.customTokensByChainId[chainKey] ?? [];
+          const normalizedAddress = token.address.toLowerCase();
+          return {
+            customTokensByChainId: {
+              ...state.customTokensByChainId,
+              [chainKey]: [token, ...existing.filter((item) => item.address.toLowerCase() !== normalizedAddress)]
+            }
+          };
+        });
+      },
+      removeCustomToken: ({ chainId, address }) => {
+        set((state) => {
+          const chainKey = chainId.toString();
+          const existing = state.customTokensByChainId[chainKey] ?? [];
+          const filtered = existing.filter((item) => item.address.toLowerCase() !== address.toLowerCase());
+          if (filtered.length === existing.length) {
+            return state;
+          }
+          const next = { ...state.customTokensByChainId };
+          if (filtered.length === 0) {
+            delete next[chainKey];
+          } else {
+            next[chainKey] = filtered;
+          }
+          return {
+            customTokensByChainId: next
+          };
+        });
+      }
+    }),
+    {
+      name: "cofhesdk-react-custom-tokens",
+      storage: (0, import_middleware2.createJSONStorage)(() => localStorage)
+    }
+  )
+);
+
+// src/hooks/useResolvedCofheToken.ts
+var import_viem6 = require("viem");
+
+// src/constants/erc20ABIs.ts
+var import_viem5 = require("viem");
+var ERC20_BALANCE_OF_ABI = (0, import_viem5.parseAbi)(["function balanceOf(address owner) view returns (uint256)"]);
+var ERC20_DECIMALS_ABI = (0, import_viem5.parseAbi)(["function decimals() view returns (uint8)"]);
+var ERC20_SYMBOL_ABI = (0, import_viem5.parseAbi)(["function symbol() view returns (string)"]);
+var ERC20_NAME_ABI = (0, import_viem5.parseAbi)(["function name() view returns (string)"]);
+
+// src/hooks/useResolvedCofheToken.ts
+var SUPPORTED_TOKEN_DETECTION_CONFIGS = getSupportedTokenDetectionConfigs();
+var TOKEN_PAIR_GETTER_ABIS = {
+  token: (0, import_viem6.parseAbi)(["function token() view returns (address)"]),
+  underlying: (0, import_viem6.parseAbi)(["function underlying() view returns (address)"]),
+  underlyingToken: (0, import_viem6.parseAbi)(["function underlyingToken() view returns (address)"]),
+  asset: (0, import_viem6.parseAbi)(["function asset() view returns (address)"]),
+  erc20: (0, import_viem6.parseAbi)(["function erc20() view returns (address)"]),
+  erc20Token: (0, import_viem6.parseAbi)(["function erc20Token() view returns (address)"])
+};
+var PAIR_GETTER_ENTRIES = [
+  ["token", TOKEN_PAIR_GETTER_ABIS.token],
+  ["underlying", TOKEN_PAIR_GETTER_ABIS.underlying],
+  ["underlyingToken", TOKEN_PAIR_GETTER_ABIS.underlyingToken],
+  ["asset", TOKEN_PAIR_GETTER_ABIS.asset],
+  ["erc20", TOKEN_PAIR_GETTER_ABIS.erc20],
+  ["erc20Token", TOKEN_PAIR_GETTER_ABIS.erc20Token]
+];
+function pickUnderlyingPairAddress(results, tokenAddress) {
+  for (const result of results) {
+    if (!result || typeof result !== "object") continue;
+    const typedResult = result;
+    if (typedResult.status !== "success") continue;
+    const candidate = typedResult.result;
+    if (typeof candidate !== "string" || !(0, import_viem6.isAddress)(candidate)) continue;
+    if (candidate.toLowerCase() === import_viem6.zeroAddress) continue;
+    if (candidate.toLowerCase() === tokenAddress.toLowerCase()) continue;
+    return candidate;
+  }
+  return void 0;
+}
+function useResolvedCofheToken({ chainId: _chainId, address }, queryOptions) {
+  const publicClient = useCofhePublicClient();
+  const cofheChainId = useCofheChainId();
+  const chainId = _chainId ?? cofheChainId;
+  return useInternalQuery({
+    queryKey: ["resolvedCofheToken", chainId, address?.toLowerCase()],
+    queryFn: async () => {
+      if (!publicClient) {
+        throw new Error("PublicClient is required to resolve a token");
+      }
+      if (!chainId || !address) {
+        return void 0;
+      }
+      const metadataResults = await publicClient.multicall({
+        contracts: [
+          {
+            address,
+            abi: ERC20_DECIMALS_ABI,
+            functionName: "decimals"
+          },
+          {
+            address,
+            abi: ERC20_SYMBOL_ABI,
+            functionName: "symbol"
+          },
+          {
+            address,
+            abi: ERC20_NAME_ABI,
+            functionName: "name"
+          }
+        ]
+      });
+      const decimals = metadataResults[0].result;
+      const symbol = metadataResults[1].result;
+      const name = metadataResults[2].result;
+      if (decimals == null || symbol == null || name == null) {
+        throw new Error("Failed to fetch token metadata");
+      }
+      const [supportedType, pairGetterResults] = await Promise.all([
+        Promise.all(
+          SUPPORTED_TOKEN_DETECTION_CONFIGS.map(async (entry) => {
+            const detected = await publicClient.readContract({
+              address,
+              abi: entry.probe.abi,
+              functionName: entry.probe.functionName,
+              args: entry.probe.args
+            }).then(() => true).catch(() => false);
+            return detected ? entry : null;
+          })
+        ).then((entries) => entries.find((entry) => entry != null) ?? null),
+        publicClient.multicall({
+          contracts: PAIR_GETTER_ENTRIES.map(([, abi]) => ({
+            address,
+            abi,
+            functionName: abi[0].name
+          })),
+          allowFailure: true
+        })
+      ]);
+      if (!supportedType) {
+        throw new Error("Address is not a supported CoFHE token");
+      }
+      const confidentialityType = supportedType.confidentialityType;
+      const extensions = {
+        fhenix: {
+          confidentialityType,
+          confidentialValueType: supportedType.confidentialValueType
+        }
+      };
+      if (confidentialityType === "wrapped") {
+        const pairAddress = pickUnderlyingPairAddress(pairGetterResults, address);
+        if (pairAddress) {
+          if (pairAddress.toLowerCase() === ETH_ADDRESS_LOWERCASE) {
+            extensions.fhenix.erc20Pair = {
+              address: ETH_ADDRESS_LOWERCASE,
+              symbol: "ETH",
+              decimals: 18
+            };
+          } else {
+            const pairMetadata = await publicClient.multicall({
+              contracts: [
+                {
+                  address: pairAddress,
+                  abi: ERC20_DECIMALS_ABI,
+                  functionName: "decimals"
+                },
+                {
+                  address: pairAddress,
+                  abi: ERC20_SYMBOL_ABI,
+                  functionName: "symbol"
+                }
+              ],
+              allowFailure: true
+            });
+            const pairDecimals = pairMetadata[0]?.status === "success" ? pairMetadata[0].result : void 0;
+            const pairSymbol = pairMetadata[1]?.status === "success" ? pairMetadata[1].result : void 0;
+            if (pairDecimals != null && pairSymbol != null) {
+              extensions.fhenix.erc20Pair = {
+                address: pairAddress,
+                symbol: pairSymbol,
+                decimals: pairDecimals
+              };
+            }
+          }
+        }
+      }
+      return {
+        chainId,
+        address,
+        decimals,
+        symbol,
+        name,
+        extensions
+      };
+    },
+    enabled: (queryOptions?.enabled ?? true) && !!publicClient && !!chainId && !!address,
+    staleTime: Infinity,
+    ...queryOptions
+  });
+}
+
+// src/hooks/useCofheTokenLists.ts
 function isSupportedToken(token) {
   const confidentialityType = token.extensions?.fhenix?.confidentialityType;
   return isSupportedTokenConfidentialityType(confidentialityType);
 }
+function getCustomTokensForChain(customTokensByChainId, chainId) {
+  if (!chainId) return [];
+  return customTokensByChainId[chainId.toString()] ?? [];
+}
 function useCofheTokenLists({ chainId }, queryOptions) {
   const widgetConfig = useCofheContext().client.config.react;
   const tokensListsUrls = chainId ? widgetConfig.tokenLists?.[chainId] : [];
@@ -1974,6 +2236,8 @@ function useCofheTokenLists({ chainId }, queryOptions) {
 }
 function useCofheTokens(chainId) {
   const tokenLists = useCofheTokenLists({ chainId });
+  const customTokensByChainId = useCustomTokensStore((state) => state.customTokensByChainId);
+  const customTokens = getCustomTokensForChain(customTokensByChainId, chainId);
   const tokens = (0, import_react5.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     tokenLists.forEach((result) => {
@@ -1984,8 +2248,13 @@ function useCofheTokens(chainId) {
         map.set(key, token);
       });
     });
+    customTokens.forEach((token) => {
+      const key = `${token.chainId}-${token.address.toLowerCase()}`;
+      if (map.has(key)) return;
+      map.set(key, token);
+    });
     return Array.from(map.values());
-  }, [tokenLists]);
+  }, [customTokens, tokenLists]);
   return tokens;
 }
 function useCofheToken({ chainId: _chainId, address }, metdataQueryOptions) {
@@ -1996,21 +2265,22 @@ function useCofheToken({ chainId: _chainId, address }, metdataQueryOptions) {
     if (!address || !chainId) return;
     return tokens.find((t) => t.chainId === chainId && t.address.toLowerCase() === address.toLowerCase());
   }, [address, chainId, tokens]);
-  return tokenFromList;
+  const resolvedToken = useResolvedCofheToken(
+    {
+      chainId,
+      address
+    },
+    {
+      ...metdataQueryOptions,
+      enabled: (metdataQueryOptions?.enabled ?? true) && !!address && !!chainId && !tokenFromList
+    }
+  );
+  return tokenFromList ?? resolvedToken.data;
 }
 
 // src/hooks/useCofheTokenPublicBalance.ts
 var import_react_query4 = require("@tanstack/react-query");
-var import_viem6 = require("viem");
-
-// src/constants/erc20ABIs.ts
-var import_viem5 = require("viem");
-var ERC20_BALANCE_OF_ABI = (0, import_viem5.parseAbi)(["function balanceOf(address owner) view returns (uint256)"]);
-var ERC20_DECIMALS_ABI = (0, import_viem5.parseAbi)(["function decimals() view returns (uint8)"]);
-var ERC20_SYMBOL_ABI = (0, import_viem5.parseAbi)(["function symbol() view returns (string)"]);
-var ERC20_NAME_ABI = (0, import_viem5.parseAbi)(["function name() view returns (string)"]);
-
-// src/hooks/useCofheTokenPublicBalance.ts
+var import_viem7 = require("viem");
 var import_ts_essentials2 = __toESM(require_dist(), 1);
 
 // src/utils/format.ts
@@ -2136,18 +2406,18 @@ function useCofheTokenPublicBalance({ token, accountAddress, displayDecimals = 5
 
 // src/hooks/useCofheTokenClaimable.ts
 var import_react_query6 = require("@tanstack/react-query");
-var import_viem8 = require("viem");
+var import_viem9 = require("viem");
 
 // src/utils/decryptionAwareReadContract.ts
 var import_react_query5 = require("@tanstack/react-query");
-var import_viem7 = require("viem");
+var import_viem8 = require("viem");
 
 // src/stores/decryptionWatchingStore.ts
-var import_zustand2 = require("zustand");
-var import_middleware2 = require("zustand/middleware");
-var bigintStorage2 = (0, import_middleware2.createJSONStorage)(() => localStorage, bigintJSONStorageOptions);
-var useDecryptionWatchersStore = (0, import_zustand2.create)()(
-  (0, import_middleware2.persist)(
+var import_zustand3 = require("zustand");
+var import_middleware3 = require("zustand/middleware");
+var bigintStorage2 = (0, import_middleware3.createJSONStorage)(() => localStorage, bigintJSONStorageOptions);
+var useDecryptionWatchersStore = (0, import_zustand3.create)()(
+  (0, import_middleware3.persist)(
     (set, get) => ({
       byKey: {},
       upsert: (input) => {
@@ -2396,7 +2666,7 @@ function useCofheTokenClaimable({ accountAddress: account, token }, queryOptions
 
 // src/hooks/useTokenAllowance.ts
 var import_react_query7 = require("@tanstack/react-query");
-var import_viem9 = require("viem");
+var import_viem10 = require("viem");
 var import_ts_essentials4 = __toESM(require_dist(), 1);
 function constructTokenAllowanceQueryKey({
   chainId,
@@ -2544,8 +2814,8 @@ function usePendingTransactions() {
 }
 
 // src/stores/portalModalStore.tsx
-var import_zustand3 = require("zustand");
-var usePortalModals = (0, import_zustand3.create)()((set, get) => ({
+var import_zustand4 = require("zustand");
+var usePortalModals = (0, import_zustand4.create)()((set, get) => ({
   modalStack: [],
   openModal: (...args) => {
     const [modal, props] = args;
@@ -2563,11 +2833,11 @@ var usePortalModals = (0, import_zustand3.create)()((set, get) => ({
 
 // src/stores/portalUIStore.tsx
 var import_react8 = require("react");
-var import_zustand5 = require("zustand");
+var import_zustand6 = require("zustand");
 
 // src/stores/portalStatuses.tsx
-var import_zustand4 = require("zustand");
-var usePortalStatuses = (0, import_zustand4.create)()((set, get) => ({
+var import_zustand5 = require("zustand");
+var usePortalStatuses = (0, import_zustand5.create)()((set, get) => ({
   statuses: [],
   addStatus: (status) => {
     if (get().hasStatus(status.id)) return;
@@ -2585,7 +2855,7 @@ var usePortalStatuses = (0, import_zustand4.create)()((set, get) => ({
 
 // src/stores/portalUIStore.tsx
 var ANIM_DURATION = 300;
-var usePortalUI = (0, import_zustand5.create)()((set, get) => ({
+var usePortalUI = (0, import_zustand6.create)()((set, get) => ({
   portalOpen: false,
   statusPanelOpen: false,
   contentPanelOpen: false,
@@ -2656,8 +2926,8 @@ var usePortalUIMaxContentHeight = () => {
 };
 
 // src/stores/portalNavigationStore.tsx
-var import_zustand6 = require("zustand");
-var usePortalNavigation = (0, import_zustand6.create)()((set, get) => {
+var import_zustand7 = require("zustand");
+var usePortalNavigation = (0, import_zustand7.create)()((set, get) => {
   function clearNavigationHistory() {
     set({ pageHistory: [{ page: "main" /* Main */ }], overridingPage: null });
   }
@@ -2885,9 +3155,9 @@ var ToastPrimitive = (props) => {
 };
 
 // src/stores/portalToasts.tsx
-var import_zustand7 = require("zustand");
+var import_zustand8 = require("zustand");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var usePortalToasts = (0, import_zustand7.create)()((set, get) => ({
+var usePortalToasts = (0, import_zustand8.create)()((set, get) => ({
   toasts: [],
   addToast: (toast, duration = 5e3) => {
     const content = isReactNode(toast) ? toast : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToastPrimitive, { ...toast });
@@ -2927,7 +3197,7 @@ var usePortalToasts = (0, import_zustand7.create)()((set, get) => ({
 }));
 
 // src/hooks/useTransactionGlobalLifecycle.ts
-var import_viem10 = require("viem");
+var import_viem11 = require("viem");
 var TOAST_DELAY_MS = 1e4;
 function useTransactionGlobalToastsLifecycle() {
   const { addToast } = usePortalToasts();
@@ -2950,8 +3220,8 @@ function useTransactionGlobalToastsLifecycle() {
     },
     onTransactionSubmitError: (error, transactionType) => {
       let humanReadableError;
-      if (error instanceof import_viem10.ContractFunctionExecutionError) {
-        if (error.cause instanceof import_viem10.ContractFunctionRevertedError) {
+      if (error instanceof import_viem11.ContractFunctionExecutionError) {
+        if (error.cause instanceof import_viem11.ContractFunctionRevertedError) {
           const reasonOfRevert = error.cause.raw;
           if (typeof reasonOfRevert === "string") {
             humanReadableError = cofheHumanizeRevertReason(reasonOfRevert);
@@ -3576,13 +3846,13 @@ var useCofheClient = () => {
 
 // src/hooks/useCofheTokenDecryptedBalance.ts
 var import_react_query10 = require("@tanstack/react-query");
-var import_viem12 = require("viem");
+var import_viem13 = require("viem");
 var import_sdk6 = require("@cofhe/sdk");
 var import_ts_essentials10 = __toESM(require_dist(), 1);
 
 // src/hooks/useCofheReadContractAndDecrypt.ts
 var import_react_query9 = require("@tanstack/react-query");
-var import_viem11 = require("viem");
+var import_viem12 = require("viem");
 var import_sdk5 = require("@cofhe/sdk");
 
 // src/hooks/useCofheDecrypt.ts
@@ -3695,7 +3965,7 @@ function useCofheTokenDecryptedBalance({ token, accountAddress, displayDecimals
 }
 
 // src/hooks/useCofheTokenTransfer.ts
-var import_viem13 = require("viem");
+var import_viem14 = require("viem");
 var import_sdk9 = require("@cofhe/sdk");
 
 // src/hooks/useCofheEncryptAndWriteContract.ts
@@ -4005,7 +4275,7 @@ function useCofheTokenApprove(writeMutationOptions) {
 
 // src/hooks/useCofheTokenShield.ts
 var import_react_query11 = require("@tanstack/react-query");
-var import_viem14 = require("viem");
+var import_viem15 = require("viem");
 var import_ts_essentials13 = __toESM(require_dist(), 1);
 function getCofheTokenShieldCallArgs(params) {
   const { token, amount, account } = params;
@@ -4131,7 +4401,7 @@ function useCofheTokenShield(options) {
 
 // src/hooks/useCofheTokenUnshield.ts
 var import_react_query12 = require("@tanstack/react-query");
-var import_viem15 = require("viem");
+var import_viem16 = require("viem");
 var import_ts_essentials15 = __toESM(require_dist(), 1);
 
 // src/hooks/useStoredTransaction.ts
@@ -4325,7 +4595,7 @@ function useCofheTokenUnshield(input) {
 
 // src/hooks/useCofheTokenClaimUnshielded.ts
 var import_react_query13 = require("@tanstack/react-query");
-var import_viem16 = require("viem");
+var import_viem17 = require("viem");
 var import_ts_essentials16 = __toESM(require_dist(), 1);
 function getCofheTokenClaimUnshieldedCallArgs(params) {
   const { token, account } = params;
@@ -4405,7 +4675,7 @@ function useCofheTokenClaimUnshielded(options) {
 // src/hooks/useCofheTokensClaimable.ts
 var import_react_query14 = require("@tanstack/react-query");
 var import_react21 = require("react");
-var import_viem18 = require("viem");
+var import_viem19 = require("viem");
 var import_ts_essentials18 = __toESM(require_dist(), 1);
 
 // src/hooks/useNormalizedList.ts
@@ -4436,14 +4706,14 @@ function useNormalizedList(items, options) {
 
 // src/hooks/useIsWaitingForDecryptionByAddress.ts
 var import_react20 = require("react");
-var import_viem17 = require("viem");
+var import_viem18 = require("viem");
 var import_ts_essentials17 = __toESM(require_dist(), 1);
 function useIsWaitingForDecryptionByAddress(entries) {
   const awaitingDecryptionKeySet = useAwaitingDecryptionQueryKeySet();
   return (0, import_react20.useMemo)(() => {
     const map = {};
     for (const entry of entries) {
-      (0, import_ts_essentials17.assert)((0, import_viem17.isAddress)(entry.address), "address is valid");
+      (0, import_ts_essentials17.assert)((0, import_viem18.isAddress)(entry.address), "address is valid");
       map[entry.address] = awaitingDecryptionKeySet.has(JSON.stringify(entry.queryKey));
     }
     return map;
@@ -4948,17 +5218,17 @@ function usePermitDuration(options) {
 var import_react25 = require("react");
 
 // src/stores/portalPersisted.tsx
-var import_zustand8 = require("zustand");
-var import_middleware3 = require("zustand/middleware");
-var usePortalPersisted = (0, import_zustand8.create)()(
-  (0, import_middleware3.persist)(
+var import_zustand9 = require("zustand");
+var import_middleware4 = require("zustand/middleware");
+var usePortalPersisted = (0, import_zustand9.create)()(
+  (0, import_middleware4.persist)(
     (set, get) => ({
       hasCreatedFirstPermit: false,
       setHasCreatedFirstPermit: (hasCreated) => set({ hasCreatedFirstPermit: hasCreated })
     }),
     {
       name: "cofhesdk-react-persisted",
-      storage: (0, import_middleware3.createJSONStorage)(() => localStorage)
+      storage: (0, import_middleware4.createJSONStorage)(() => localStorage)
     }
   )
 );
@@ -5219,7 +5489,7 @@ function useReceivePermit({ onSuccess, onError } = {}) {
 
 // src/hooks/permits/usePermitDetailsAndActions.ts
 var import_react30 = require("react");
-var import_viem19 = require("viem");
+var import_viem20 = require("viem");
 var import_permits4 = require("@cofhe/sdk/permits");
 
 // src/hooks/useCopyFeedback.ts
@@ -5317,7 +5587,7 @@ var usePermitDetailsAndActions = (permitHash) => {
   const permitLabel = (0, import_react30.useMemo)(() => {
     if (!permit) return void 0;
     if (permit.name?.trim()) return permit.name;
-    const fallbackAddress = permit.recipient && permit.recipient !== import_viem19.zeroAddress ? permit.recipient : permit.issuer || import_viem19.zeroAddress;
+    const fallbackAddress = permit.recipient && permit.recipient !== import_viem20.zeroAddress ? permit.recipient : permit.issuer || import_viem20.zeroAddress;
     return truncateAddress(fallbackAddress, 4, 4) ?? fallbackAddress;
   }, [permit]);
   const expirationInfo = (0, import_react30.useMemo)(() => formatExpirationLabel(permit?.expiration), [permit?.expiration]);
@@ -6152,7 +6422,7 @@ var StatusBarContent = () => {
 };
 
 // src/components/CofheFloatingButton/ContentSection.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/CofheFloatingButton/pages/MainPage/WalletHeader.tsx
 var import_md4 = require("react-icons/md");
@@ -6785,7 +7055,7 @@ var PageContainer = ({ isModal, header, content, footer }) => {
 };
 
 // src/components/CofheFloatingButton/components/TransactionItem.tsx
-var import_viem20 = require("viem");
+var import_viem21 = require("viem");
 var import_go = require("react-icons/go");
 var import_tb2 = require("react-icons/tb");
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -6814,7 +7084,7 @@ var TransactionItem = ({ transaction }) => {
       /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold cofhe-text-primary", children: actionToString(transaction.actionType) }),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-sm font-semibold cofhe-text-primary", children: [
-          (0, import_viem20.formatUnits)(transaction.tokenAmount, transaction.token.decimals),
+          (0, import_viem21.formatUnits)(transaction.tokenAmount, transaction.token.decimals),
           " ",
           transaction.token.symbol
         ] })
@@ -6952,8 +7222,8 @@ var MainPage = () => {
 };
 
 // src/components/CofheFloatingButton/stores/settingsStore.ts
-var import_zustand9 = require("zustand");
-var import_middleware4 = require("zustand/middleware");
+var import_zustand10 = require("zustand");
+var import_middleware5 = require("zustand/middleware");
 var ShieldPageVariant = /* @__PURE__ */ ((ShieldPageVariant2) => {
   ShieldPageVariant2["Option1"] = "option1";
   ShieldPageVariant2["Option2"] = "option2";
@@ -6963,8 +7233,8 @@ var SHIELD_PAGE_VARIANT_LABELS = {
   ["option1" /* Option1 */]: "Modern UI",
   ["option2" /* Option2 */]: "Classic UI"
 };
-var useSettingsStore = (0, import_zustand9.create)()(
-  (0, import_middleware4.persist)(
+var useSettingsStore = (0, import_zustand10.create)()(
+  (0, import_middleware5.persist)(
     (set) => ({
       shieldPageVariant: "option1" /* Option1 */,
       setShieldPageVariant: (variant) => set({ shieldPageVariant: variant })
@@ -7143,7 +7413,7 @@ var InfoModalButton = ({ onClick }) => {
 
 // src/components/CofheFloatingButton/components/PermitCard.tsx
 var import_fa63 = require("react-icons/fa6");
-var import_viem21 = require("viem");
+var import_viem22 = require("viem");
 var import_permits7 = require("@cofhe/sdk/permits");
 
 // src/components/StripedBackground.tsx
@@ -7263,14 +7533,14 @@ var BasePermitCard = ({
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("br", {}),
-            permit.recipient != null && permit.recipient !== import_viem21.zeroAddress && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            permit.recipient != null && permit.recipient !== import_viem22.zeroAddress && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
               "Recipient: ",
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("b", { children: truncateAddress(permit.recipient, 6, 6) }),
               " ",
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CopyButton2, { hash: permit.recipient }),
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("br", {})
             ] }),
-            permit.validatorContract != null && permit.validatorContract !== import_viem21.zeroAddress && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            permit.validatorContract != null && permit.validatorContract !== import_viem22.zeroAddress && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
               "Validator:",
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("br", {}),
               "  ",
@@ -7918,7 +8188,7 @@ var TokenInfoBalanceChart = ({ token, chartPoints }) => {
 
 // src/components/CofheFloatingButton/pages/TokenInfoTransactionHistory.tsx
 var import_react51 = require("react");
-var import_viem22 = require("viem");
+var import_viem23 = require("viem");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TokenInfoTransactionHistoryHeader = ({ token }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
@@ -7942,7 +8212,7 @@ var TokenInfoTransactionHistory = ({ token, priceUsd }) => {
   });
   const activity = (0, import_react51.useMemo)(() => {
     return tokenTxs.slice().sort((a, b) => b.timestamp - a.timestamp).map((tx) => {
-      const amountToken = parseFloat((0, import_viem22.formatUnits)(tx.tokenAmount, tx.token.decimals));
+      const amountToken = parseFloat((0, import_viem23.formatUnits)(tx.tokenAmount, tx.token.decimals));
       const amountUsd = typeof priceUsd === "number" && Number.isFinite(amountToken) ? amountToken * priceUsd : void 0;
       return {
         kind: actionToString(tx.actionType),
@@ -8047,7 +8317,7 @@ var TokenInfoPage = ({ token }) => {
 
 // src/components/CofheFloatingButton/pages/SendPage.tsx
 var import_react53 = require("react");
-var import_viem23 = require("viem");
+var import_viem24 = require("viem");
 var import_ts_essentials22 = __toESM(require_dist(), 1);
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var SendPage = ({ token: _token }) => {
@@ -8100,12 +8370,12 @@ var SendPage = ({ token: _token }) => {
   const [recipientAddress, setRecipientAddress] = (0, import_react53.useState)("");
   const [error, setError] = (0, import_react53.useState)(null);
   const [success, setSuccess] = (0, import_react53.useState)(null);
-  const isValidAddress2 = (0, import_viem23.isAddress)(recipientAddress);
+  const isValidAddress2 = (0, import_viem24.isAddress)(recipientAddress);
   const isValidAmount = (amount.length > 0 && confidentialUnitBalance && confidentialUnitBalance.gte(amount)) ?? false;
   const handleSend = async () => {
-    (0, import_ts_essentials22.assert)((0, import_viem23.isAddress)(recipientAddress), "Recipient address is not valid");
+    (0, import_ts_essentials22.assert)((0, import_viem24.isAddress)(recipientAddress), "Recipient address is not valid");
     const amountWei = unitToWei(amount, token.decimals);
-    (0, import_ts_essentials22.assert)(amountWei <= import_viem23.maxUint128, "Amount exceeds maximum supported value (uint128 max)");
+    (0, import_ts_essentials22.assert)(amountWei <= import_viem24.maxUint128, "Amount exceeds maximum supported value (uint128 max)");
     (0, import_ts_essentials22.assert)(account, "Sender account is required");
     await encryptAmountAndSendToken({
       input: {
@@ -8247,7 +8517,7 @@ var SendPage = ({ token: _token }) => {
 var import_tb4 = require("react-icons/tb");
 var import_lu2 = require("react-icons/lu");
 var import_react55 = require("react");
-var import_viem24 = require("viem");
+var import_viem25 = require("viem");
 var import_ts_essentials23 = __toESM(require_dist(), 1);
 
 // src/hooks/useIsUnshieldingMining.ts
@@ -8286,7 +8556,7 @@ function humanizeSimulationError(error, fallbackMessage) {
   if (!error) return null;
   const cofheErrorMessage = cofheHumanizeViemError(error);
   if (cofheErrorMessage) return cofheErrorMessage;
-  if (error instanceof import_viem24.ContractFunctionExecutionError) return error.shortMessage;
+  if (error instanceof import_viem25.ContractFunctionExecutionError) return error.shortMessage;
   return fallbackMessage;
 }
 function TxHashWithActions({ hash, chainId }) {
@@ -8497,7 +8767,7 @@ function useShieldWithLifecycle(token) {
     if (!relevantError) return null;
     const cofheErrorMessage = cofheHumanizeViemError(relevantError);
     if (cofheErrorMessage) return cofheErrorMessage;
-    if (relevantError instanceof import_viem24.ContractFunctionExecutionError) return relevantError.shortMessage;
+    if (relevantError instanceof import_viem25.ContractFunctionExecutionError) return relevantError.shortMessage;
     return shouldApprove ? "Failed to simulate approval transaction" : "Failed to simulate shield transaction";
   }, [approvalSimulation.error, shieldSimulation.error, shouldApprove]);
   const canShield = isValidShieldAmount && !!shieldCallArgs && isAllowanceKnown && hasSufficientAllowance && !shieldSimulation.isFetching && !shieldSimulation.error;
@@ -8576,7 +8846,7 @@ function useUnshieldWithLifecycle(token) {
     }
   });
   const handleUnshield = async () => {
-    const amountWei = (0, import_viem24.parseUnits)(unshieldAmount, token.decimals);
+    const amountWei = (0, import_viem25.parseUnits)(unshieldAmount, token.decimals);
     tokenUnshield.mutateAsync({
       token,
       amount: amountWei,
@@ -8590,7 +8860,7 @@ function useUnshieldWithLifecycle(token) {
   const isValidUnshieldAmount = (unshieldAmount.length > 0 && confidentialBalanceUnit?.gte(unshieldAmount)) ?? false;
   const unshieldCallArgs = (0, import_react55.useMemo)(() => {
     if (!account || !isValidUnshieldAmount) return void 0;
-    const amountWei = (0, import_viem24.parseUnits)(unshieldAmount, token.decimals);
+    const amountWei = (0, import_viem25.parseUnits)(unshieldAmount, token.decimals);
     return getCofheTokenUnshieldCallArgs({ token, amount: amountWei, account });
   }, [account, isValidUnshieldAmount, token, unshieldAmount]);
   const unshieldSimulation = useCofheSimulateWriteContract(unshieldCallArgs, {
@@ -8958,7 +9228,7 @@ var ActivityPage = () => {
 // src/components/CofheFloatingButton/pages/DebugPage.tsx
 var import_react56 = require("react");
 var import_accounts = require("viem/accounts");
-var import_viem25 = require("viem");
+var import_viem26 = require("viem");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var DebugPage = () => {
   const { navigateBack } = usePortalNavigation();
@@ -9319,7 +9589,7 @@ var FirstPermitDebug = () => {
 };
 var CreateSelfExpiringPermitButton = () => {
   const cofheClient = useCofheClient();
-  const create10 = async () => {
+  const create11 = async () => {
     const { account } = cofheClient.getSnapshot();
     if (!account) throw new Error("No connected account found");
     const expiration = Math.floor(Date.now() / 1e3) + 2 * 60;
@@ -9330,7 +9600,7 @@ var CreateSelfExpiringPermitButton = () => {
     });
     usePortalPersisted.getState().setHasCreatedFirstPermit(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { onClick: create10, children: "Create self permit (expires in 2 minutes)" });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { onClick: create11, children: "Create self permit (expires in 2 minutes)" });
 };
 var CreateAndUseReceivingPermitButton = () => {
   const cofheClient = useCofheClient();
@@ -9339,9 +9609,9 @@ var CreateAndUseReceivingPermitButton = () => {
     if (!account) throw new Error("No connected account found");
     if (!publicClient) throw new Error("No public client found");
     const sharingAccount = (0, import_accounts.privateKeyToAccount)("0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80");
-    const sharingWalletClient = (0, import_viem25.createWalletClient)({
+    const sharingWalletClient = (0, import_viem26.createWalletClient)({
       chain: publicClient.chain,
-      transport: (0, import_viem25.http)(),
+      transport: (0, import_viem26.http)(),
       account: sharingAccount
     });
     const sharedPermit = await cofheClient.permits.createSharing(
@@ -9439,9 +9709,12 @@ var TokenRow = ({ token, onClick, topLabel, balanceType }) => {
   );
 };
 
-// src/components/CofheFloatingButton/modals/TokenListModal.tsx
+// src/components/CofheFloatingButton/modals/AddCustomTokenButton.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var AddCustomTokenButton = () => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { variant: "outline", size: "sm", label: "Add custom Token +" });
+var AddCustomTokenButton = ({ label = "Import token", onClick }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { variant: "outline", size: "sm", label, onClick });
+
+// src/components/CofheFloatingButton/modals/TokenListModal.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var TokenListModal = ({
   tokens,
   onClose,
@@ -9449,17 +9722,31 @@ var TokenListModal = ({
   onSelectToken,
   balanceType
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  const { openModal } = usePortalModals();
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     PageContainer,
     {
-      header: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex justify-between flex-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ArrowBackIcon, { style: { fontSize: 16 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium", children: title })
+      header: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex justify-between flex-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ArrowBackIcon, { style: { fontSize: 16 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm font-medium", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AddCustomTokenButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          AddCustomTokenButton,
+          {
+            onClick: () => openModal("importCustomToken" /* ImportCustomToken */, {
+              balanceType,
+              title: "Import token",
+              tokens,
+              onSelectToken: (token) => {
+                onSelectToken(token);
+                onClose();
+              }
+            })
+          }
+        )
       ] }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         TokenListContent,
         {
           balanceType,
@@ -9478,8 +9765,8 @@ var TokenListContent = ({ tokens, onSelectToken, balanceType }) => {
   const normalizedPinnedAddress = pinnedTokenAddress?.toLowerCase();
   const pinnedToken = normalizedPinnedAddress ? tokens.find((t) => t.address.toLowerCase() === normalizedPinnedAddress) : void 0;
   const nonPinnedTokens = pinnedToken ? tokens.filter((t) => t.address.toLowerCase() !== normalizedPinnedAddress) : tokens;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "cofhe-token-list-container", children: tokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-xs opacity-70 py-4 text-center", children: "No tokens found" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-    pinnedToken && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "cofhe-token-list-container", children: tokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-xs opacity-70 py-4 text-center", children: "No tokens found" }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+    pinnedToken && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       TokenRow,
       {
         balanceType,
@@ -9491,7 +9778,7 @@ var TokenListContent = ({ tokens, onSelectToken, balanceType }) => {
       },
       `pinned-${pinnedToken.address}`
     ),
-    nonPinnedTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    nonPinnedTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       TokenRow,
       {
         balanceType,
@@ -9506,29 +9793,46 @@ var TokenListContent = ({ tokens, onSelectToken, balanceType }) => {
 };
 
 // src/components/CofheFloatingButton/pages/PortfolioPage.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var PortfolioPage = () => {
   const { navigateBack, navigateTo } = usePortalNavigation();
+  const { openModal } = usePortalModals();
   const chainId = useCofheChainId();
   const allTokens = useCofheTokens(chainId);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     PageContainer,
     {
-      header: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex justify-between flex-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex justify-between flex-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
           "button",
           {
             onClick: navigateBack,
             className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ArrowBackIcon, { style: { fontSize: 16 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm font-medium", children: "Tokens list" })
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ArrowBackIcon, { style: { fontSize: 16 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-sm font-medium", children: "Tokens list" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AddCustomTokenButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          AddCustomTokenButton,
+          {
+            onClick: () => openModal("importCustomToken" /* ImportCustomToken */, {
+              balanceType: "confidential" /* Confidential */,
+              title: "Import token",
+              tokens: allTokens,
+              onSelectToken: (token) => {
+                navigateTo("tokeninfo" /* TokenInfo */, {
+                  pageProps: {
+                    token
+                  }
+                });
+              }
+            })
+          }
+        )
       ] }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         TokenListContent,
         {
           balanceType: "confidential" /* Confidential */,
@@ -9549,7 +9853,7 @@ var PortfolioPage = () => {
 // src/components/CofheFloatingButton/pages/ClaimableTokens.tsx
 var import_react57 = require("react");
 var import_ts_essentials24 = __toESM(require_dist(), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ClaimableTokens() {
   const chainsClaimableTokens = useCofheClaimableTokens();
   const claimableByTokenAddress = chainsClaimableTokens.claimableByTokenAddress;
@@ -9572,30 +9876,30 @@ function ClaimableTokens() {
     (0, import_ts_essentials24.assert)(row, "token not found for claim");
     await claimMutation.mutateAsync({ token: row.token, amount: row.claimableAmount });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     PageContainer,
     {
-      header: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
             className: "flex items-center gap-2 text-xl font-semibold text-[#0E2F3F] transition-opacity hover:opacity-80 dark:text-white",
             type: "button",
             onClick: navigateBack,
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ArrowBackIcon, { fontSize: "small" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ArrowBackIcon, { fontSize: "small" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: "Claimable Tokens list" })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: "Claimable Tokens list" })
       ] }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-col gap-4 pr-1", children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-4 pr-1", children: [
         rows.map(({ token, claimableAmount }) => {
           const isDecrypting = waitingByTokenAddress?.[token.address] ?? false;
           const isUnshielding = unshieldingInProgressByTokenAddress?.[token.address.toLowerCase()] ?? false;
           const formatted = formatTokenAmount(claimableAmount, token.decimals, 5).formatted;
           const isClaimingThis = isClaimingByTokenAddress?.[token.address.toLowerCase()] ?? false;
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "grid grid-cols-[1fr,auto,auto] items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "grid grid-cols-[1fr,auto,auto] items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 TokenIcon,
                 {
                   logoURI: token.logoURI,
@@ -9609,10 +9913,10 @@ function ClaimableTokens() {
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-xl font-semibold cofhe-text-primary truncate", children: token.name }) })
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-xl font-semibold cofhe-text-primary truncate", children: token.name }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-2xl font-semibold cofhe-text-primary tabular-nums", children: formatted }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-2xl font-semibold cofhe-text-primary tabular-nums", children: formatted }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Button,
               {
                 type: "button",
@@ -9623,7 +9927,7 @@ function ClaimableTokens() {
             )
           ] }, token.address);
         }),
-        rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-sm opacity-70 cofhe-text-primary", children: "No claimable tokens." })
+        rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-sm opacity-70 cofhe-text-primary", children: "No claimable tokens." })
       ] })
     }
   );
@@ -9647,24 +9951,24 @@ var pages = {
 };
 
 // src/components/CofheFloatingButton/ContentSection.tsx
-var import_react60 = require("motion/react");
+var import_react61 = require("motion/react");
 
 // src/components/CofheFloatingButton/modals/ExampleSelectionPage.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ExampleSelectionPage = ({
   onClose,
   onSelect
 }) => {
   const options = ["1", "2", "3"];
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     PageContainer,
     {
       isModal: true,
-      header: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CloseIcon, { style: { fontSize: 16 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-sm font-medium", children: "Select an option" })
+      header: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseIcon, { style: { fontSize: 16 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-sm font-medium", children: "Select an option" })
       ] }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-1 flex-col gap-3 items-start justify-start", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex flex-1 flex-col gap-3 items-start justify-start", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         "button",
         {
           onClick: () => {
@@ -9678,29 +9982,29 @@ var ExampleSelectionPage = ({
         },
         option
       )) }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-row flex-1 justify-end items-center mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: "Close" }) }) })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex flex-row flex-1 justify-end items-center mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Close" }) }) })
     }
   );
 };
 
 // src/components/CofheFloatingButton/modals/ExampleInfoPage.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var ExampleInfoPage = ({ onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     PageContainer,
     {
       isModal: true,
-      header: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseIcon, { style: { fontSize: 16 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-sm font-medium", children: "More info" })
+      header: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CloseIcon, { style: { fontSize: 16 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-sm font-medium", children: "More info" })
       ] }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-1 flex-col gap-3 items-start justify-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: "Cofhesdk is complex, so we have created this modal to help you understand." }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: "You probably clicked on a ? button next to some functionality. And in this modal you'll get your information or explanation." }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: "This is another paragraph of explanation." }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: `Now that you're done reading, you can click "Got It" at the bottom to close this modal.` })
+      content: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-1 flex-col gap-3 items-start justify-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "Cofhesdk is complex, so we have created this modal to help you understand." }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "You probably clicked on a ? button next to some functionality. And in this modal you'll get your information or explanation." }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "This is another paragraph of explanation." }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: `Now that you're done reading, you can click "Got It" at the bottom to close this modal.` })
       ] }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex flex-row flex-1 justify-end items-center mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Got It" }) }) })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-row flex-1 justify-end items-center mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: "Got It" }) }) })
     }
   );
 };
@@ -9708,19 +10012,19 @@ var ExampleInfoPage = ({ onClose }) => {
 // src/components/CofheFloatingButton/modals/PermitDetailsModal.tsx
 var import_fa64 = require("react-icons/fa6");
 var import_react58 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var PermitTypeLabel2 = {
   self: "Self",
   sharing: "Delegated",
   recipient: "Imported"
 };
 var NoPermitFoundModal = ({ onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     PageContainer,
     {
-      header: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center gap-2 text-base font-semibold tracking-tight text-[#0E2F3F] transition-opacity hover:opacity-80 dark:text-white", children: "No permit found" }),
-      content: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "No permit found" }) }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { label: "CLOSE", onClick: onClose, variant: "ghost" })
+      header: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex items-center gap-2 text-base font-semibold tracking-tight text-[#0E2F3F] transition-opacity hover:opacity-80 dark:text-white", children: "No permit found" }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { children: "No permit found" }) }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { label: "CLOSE", onClick: onClose, variant: "ghost" })
     }
   );
 };
@@ -9753,77 +10057,77 @@ var PermitDetailsModal = ({ hash, onClose }) => {
     onClose();
   }, [confirmDelete, onClose, handleRemovePermit]);
   if (permit == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(NoPermitFoundModal, { onClose });
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(NoPermitFoundModal, { onClose });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     PageContainer,
     {
       isModal: true,
-      header: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         PermitCard,
         {
           hash,
           className: "-mt-4 -ml-4 -mr-4",
-          header: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+          header: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
             "button",
             {
               className: "flex items-center gap-2 text-base font-semibold tracking-tight text-[#0E2F3F] transition-opacity hover:opacity-80 dark:text-white",
               onClick: onClose,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CloseIcon, { fontSize: "small" }),
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: "Permit" })
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CloseIcon, { fontSize: "small" }),
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: "Permit" })
               ]
             }
           )
         }
       ),
-      content: permit != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "flex flex-row gap-2 text-sm", children: [
+      content: permit != null && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "flex flex-row gap-2 text-sm", children: [
           "Type: ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: PermitTypeLabel2[permit.type] }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoModalButton, { onClick: () => openModal("permitTypeInfo" /* PermitTypeInfo */, { type: permit.type }) })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: PermitTypeLabel2[permit.type] }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InfoModalButton, { onClick: () => openModal("permitTypeInfo" /* PermitTypeInfo */, { type: permit.type }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "text-sm", children: [
           "Expires in: ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: expirationInfo.label })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: expirationInfo.label })
         ] }),
-        permit.type === "self" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "text-sm", children: [
+        permit.type === "self" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "text-sm", children: [
           "To select this permit for usage, click the ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: '"SELECT"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: '"SELECT"' }),
           " button below. When this permit is active, you will be able to view your own encrypted data."
         ] }),
-        permit.type === "sharing" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "text-sm", children: [
+        permit.type === "sharing" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "text-sm", children: [
           "To share this permit with ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: "recipient" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: "recipient" }),
           ", click the ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: '"SHARE"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: '"SHARE"' }),
           " button below to copy the permit data to your clipboard. Share the copied permit data with ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: "recipient" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: "recipient" }),
           " to grant them access to your encrypted data.",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("br", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("br", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("i", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: "Note:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("i", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: "Note:" }),
             " The copied permit data is not sensitive and can be sent to recipient via any communication channel."
           ] })
         ] }),
-        permit.type === "recipient" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "text-sm", children: [
+        permit.type === "recipient" && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "text-sm", children: [
           "To select this imported permit for usage, click the ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: '"SELECT"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: '"SELECT"' }),
           " button below. When this permit is active, you will be able to view ",
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("b", { children: "issuer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("b", { children: "issuer" }),
           "'s (",
           truncateAddress(permit.issuer, 4, 4),
           ") encrypted data."
         ] })
       ] }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row gap-3 w-full", children: [
-        isShareablePermit && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Button, { variant: "primary", onClick: handlePermitShare, children: [
-          isCopyComplete ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_fa64.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_fa64.FaRegCopy, {}),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row gap-3 w-full", children: [
+        isShareablePermit && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Button, { variant: "primary", onClick: handlePermitShare, children: [
+          isCopyComplete ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_fa64.FaCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_fa64.FaRegCopy, {}),
           isCopyComplete ? "COPIED" : "SHARE"
         ] }),
-        !isShareablePermit && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        !isShareablePermit && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Button,
           {
             variant: "primary",
@@ -9832,53 +10136,53 @@ var PermitDetailsModal = ({ hash, onClose }) => {
             disabled: isActivePermit
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { label: confirmDelete ? "CONFIRM" : "DELETE", onClick: handlePermitDelete, variant: "error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { label: "CLOSE", onClick: onClose, variant: "ghost" })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { label: confirmDelete ? "CONFIRM" : "DELETE", onClick: handlePermitDelete, variant: "error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { label: "CLOSE", onClick: onClose, variant: "ghost" })
       ] })
     }
   );
 };
 
 // src/components/CofheFloatingButton/modals/BaseInfoModal.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var BaseInfoModal = ({ header, content, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     PageContainer,
     {
       isModal: true,
-      header: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
         "button",
         {
           onClick: onClose,
           className: "flex items-center gap-1 text-base font-semibold tracking-tight text-[#0E2F3F] transition-opacity hover:opacity-80 dark:text-white",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CloseIcon, { style: { fontSize: 16 } }),
-            typeof header === "string" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-base font-semibold tracking-tight text-[#0E2F3F]", children: header }) : header
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CloseIcon, { style: { fontSize: 16 } }),
+            typeof header === "string" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-base font-semibold tracking-tight text-[#0E2F3F]", children: header }) : header
           ]
         }
       ),
-      content: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-1 flex-col w-full gap-3 items-start justify-start", children: content }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-row", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: "Close" }) }) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-1 flex-col w-full gap-3 items-start justify-start", children: content }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-row", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: "Close" }) }) })
     }
   );
 };
 
 // src/components/CofheFloatingButton/modals/PermitTypeInfoModal.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var PermitTypeLabel3 = {
   self: "Self",
   sharing: "Delegated",
   recipient: "Imported"
 };
 var PermitTypeInfoModal = ({ type, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     BaseInfoModal,
     {
       header: `${PermitTypeLabel3[type]} Permit`,
-      content: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-        type === "self" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: '"Self" permits are created by a user to access their own encrypted data. The provided signature is verified on-chain by the ACL (Access Control List).' }),
-        type === "sharing" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: `"Delegated" permits are created by a user (Issuer) to share their encrypted data with another user (Recipient). Both Issuer and Rceipient must sign as a handshake. Issuer's signature is verified on-chain by the ACL (Access Control List) and grants access to Recipient, and Recipient's signature applies and verifies the re-encryption key.` }),
-        type === "recipient" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: `"Imported" permits are imported by a user (Recipient) to access encrypted data that has been shared with them by the permit's Issuer. Both Issuer and Rceipient must sign as a handshake. Issuer's signature is verified on-chain by the ACL (Access Control List) and grants access to Recipient, and Recipient's signature applies and verifies the re-encryption key.` })
+      content: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+        type === "self" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: '"Self" permits are created by a user to access their own encrypted data. The provided signature is verified on-chain by the ACL (Access Control List).' }),
+        type === "sharing" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: `"Delegated" permits are created by a user (Issuer) to share their encrypted data with another user (Recipient). Both Issuer and Rceipient must sign as a handshake. Issuer's signature is verified on-chain by the ACL (Access Control List) and grants access to Recipient, and Recipient's signature applies and verifies the re-encryption key.` }),
+        type === "recipient" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: `"Imported" permits are imported by a user (Recipient) to access encrypted data that has been shared with them by the permit's Issuer. Both Issuer and Rceipient must sign as a handshake. Issuer's signature is verified on-chain by the ACL (Access Control List) and grants access to Recipient, and Recipient's signature applies and verifies the re-encryption key.` })
       ] }),
       onClose
     }
@@ -9886,25 +10190,168 @@ var PermitTypeInfoModal = ({ type, onClose }) => {
 };
 
 // src/components/CofheFloatingButton/modals/PermitInfoModal.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var PermitInfoModal = ({ onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     BaseInfoModal,
     {
       header: "Permit",
-      content: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-col w-full justify-center items-center gap-3 text-[#0E2F3F] dark:text-white", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(fhenix_permit_icon_default, { className: "h-7 w-7 fill-black dark:fill-white", "aria-label": "CoFHE permit icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "text-lg font-semibold", children: "CoFHE Permits" })
+      content: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col w-full justify-center items-center gap-3 text-[#0E2F3F] dark:text-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(fhenix_permit_icon_default, { className: "h-7 w-7 fill-black dark:fill-white", "aria-label": "CoFHE permit icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-lg font-semibold", children: "CoFHE Permits" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm leading-relaxed text-[#355366] dark:text-white/80", children: "CoFHE permits are used to authenticate your identity and grant access to your encrypted data." }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm leading-relaxed text-[#355366] dark:text-white/80", children: "Generating a permit requires a signature, which will open your connected wallet to sign a message (EIP712). This signed message contains only info used to authenticate and grant access." })
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "text-sm leading-relaxed text-[#355366] dark:text-white/80", children: "CoFHE permits are used to authenticate your identity and grant access to your encrypted data." }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "text-sm leading-relaxed text-[#355366] dark:text-white/80", children: "Generating a permit requires a signature, which will open your connected wallet to sign a message (EIP712). This signed message contains only info used to authenticate and grant access." })
       ] }),
       onClose
     }
   );
 };
 
+// src/components/CofheFloatingButton/modals/ImportCustomTokenCard.tsx
+var import_react59 = require("react");
+var import_viem27 = require("viem");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var ImportCustomTokenCard = ({ tokens, onSelectToken, balanceType }) => {
+  const [addressInput, setAddressInput] = (0, import_react59.useState)("");
+  const chainId = useCofheChainId();
+  const addCustomToken = useCustomTokensStore((state) => state.addCustomToken);
+  const removeCustomToken = useCustomTokensStore((state) => state.removeCustomToken);
+  const customTokensByChainId = useCustomTokensStore((state) => state.customTokensByChainId);
+  const trimmedAddress = addressInput.trim();
+  const normalizedAddress = (0, import_viem27.isAddress)(trimmedAddress) ? trimmedAddress : void 0;
+  const importedCustomTokens = (0, import_react59.useMemo)(() => {
+    if (!chainId) return [];
+    return customTokensByChainId[chainId.toString()] ?? [];
+  }, [chainId, customTokensByChainId]);
+  const existingToken = (0, import_react59.useMemo)(() => {
+    if (!normalizedAddress) return void 0;
+    return tokens.find((token) => token.address.toLowerCase() === normalizedAddress.toLowerCase());
+  }, [normalizedAddress, tokens]);
+  const resolvedToken = useResolvedCofheToken(
+    { address: normalizedAddress },
+    {
+      enabled: !!normalizedAddress && !existingToken,
+      retry: false
+    }
+  );
+  const previewToken = existingToken ?? resolvedToken.data;
+  const canImport = !!previewToken && !resolvedToken.isFetching;
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "fnx-card-bg border fnx-card-border rounded-lg p-3 flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { className: "text-xs font-medium opacity-70", children: "Token contract address" }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        "input",
+        {
+          type: "text",
+          value: addressInput,
+          onChange: (event) => setAddressInput(event.target.value),
+          placeholder: "0x...",
+          className: "w-full bg-transparent fnx-text-primary outline-none border-b pb-2 px-2 text-sm"
+        }
+      )
+    ] }),
+    !normalizedAddress && trimmedAddress.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-xxxs text-[#c2410c]", children: "Enter a valid token address." }),
+    resolvedToken.isFetching && !existingToken && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-xxxs opacity-70", children: "Checking token metadata and CoFHE support..." }),
+    resolvedToken.error && !existingToken && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-xxxs text-[#c2410c]", children: resolvedToken.error.message }),
+    previewToken && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-1 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "font-medium fnx-text-primary", children: [
+        previewToken.symbol,
+        " \xB7 ",
+        previewToken.name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "opacity-70", children: getTokenConfidentialityLabel(previewToken.extensions.fhenix.confidentialityType) ?? "Confidential token" }),
+      balanceType === "public" && previewToken.extensions.fhenix.confidentialityType === "wrapped" && !previewToken.extensions.fhenix.erc20Pair && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-xxxs opacity-70", children: "Public-balance actions may stay unavailable until the token's paired asset can be discovered." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      Button,
+      {
+        variant: "primary",
+        size: "sm",
+        disabled: !canImport,
+        label: existingToken ? "Select token" : "Import and select",
+        onClick: () => {
+          if (!previewToken) return;
+          if (!existingToken) {
+            addCustomToken(previewToken);
+          }
+          onSelectToken(previewToken);
+        }
+      }
+    ),
+    importedCustomTokens.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col gap-2 border-t pt-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-xs font-medium opacity-70", children: "Imported tokens" }),
+      importedCustomTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+        "div",
+        {
+          className: "flex items-center justify-between gap-3 px-3 py-2",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "text-sm font-medium fnx-text-primary truncate", children: [
+                token.symbol,
+                " \xB7 ",
+                token.name
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-xxxs opacity-70 truncate", children: token.address })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+              Button,
+              {
+                variant: "error",
+                size: "sm",
+                label: "Remove",
+                onClick: () => {
+                  removeCustomToken({
+                    chainId: token.chainId,
+                    address: token.address
+                  });
+                  if (normalizedAddress?.toLowerCase() === token.address.toLowerCase()) {
+                    setAddressInput("");
+                  }
+                }
+              }
+            )
+          ]
+        },
+        `${token.chainId}-${token.address}`
+      ))
+    ] })
+  ] });
+};
+
+// src/components/CofheFloatingButton/modals/ImportCustomTokenModal.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var ImportCustomTokenModal = ({
+  tokens,
+  onClose,
+  title,
+  onSelectToken,
+  balanceType
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    PageContainer,
+    {
+      isModal: true,
+      header: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("button", { onClick: onClose, className: "flex items-center gap-1 text-sm hover:opacity-80 transition-opacity", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ArrowBackIcon, { style: { fontSize: 16 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-sm font-medium", children: title })
+      ] }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        ImportCustomTokenCard,
+        {
+          balanceType,
+          tokens,
+          onSelectToken: (token) => {
+            onSelectToken(token);
+            onClose();
+          }
+        }
+      )
+    }
+  );
+};
+
 // src/components/CofheFloatingButton/modals/index.ts
 var modals = {
   ["exampleSelection" /* ExampleSelection */]: ExampleSelectionPage,
@@ -9912,15 +10359,16 @@ var modals = {
   ["permitDetails" /* PermitDetails */]: PermitDetailsModal,
   ["permitTypeInfo" /* PermitTypeInfo */]: PermitTypeInfoModal,
   ["permitInfo" /* PermitInfo */]: PermitInfoModal,
-  ["tokenList" /* TokenList */]: TokenListModal
+  ["tokenList" /* TokenList */]: TokenListModal,
+  ["importCustomToken" /* ImportCustomToken */]: ImportCustomTokenModal
 };
 
 // src/components/CofheFloatingButton/ContentSection.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var MeasuredContentRenderer = ({ children, id, isModal, onModalOverlayClick }) => {
   const { setContentHeight, removeContentHeight } = usePortalUI();
-  const contentRef = (0, import_react59.useRef)(null);
-  (0, import_react59.useEffect)(() => {
+  const contentRef = (0, import_react60.useRef)(null);
+  (0, import_react60.useEffect)(() => {
     if (!contentRef.current) return;
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -9934,8 +10382,8 @@ var MeasuredContentRenderer = ({ children, id, isModal, onModalOverlayClick }) =
       removeContentHeight(id);
     };
   }, [id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    isModal && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    isModal && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "div",
       {
         onClick: (e) => {
@@ -9946,23 +10394,23 @@ var MeasuredContentRenderer = ({ children, id, isModal, onModalOverlayClick }) =
         className: "absolute flex w-full h-full bg-[#0E2F3F]/30 origin-top translate-y-[-8px] scale-[0.95]"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "relative flex w-full h-full overflow-y-hidden pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cn("cofhe-panel absolute flex left-0 w-full p-4 top-0 pointer-events-auto"), ref: contentRef, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "relative flex w-full h-full overflow-y-hidden pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn("cofhe-panel absolute flex left-0 w-full p-4 top-0 pointer-events-auto"), ref: contentRef, children }) })
   ] });
 };
 var ContentRenderer = ({ page }) => {
-  const content = (0, import_react59.useMemo)(() => {
+  const content = (0, import_react60.useMemo)(() => {
     const PageComp = pages[page.page];
     const props = page.props ?? {};
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(PageComp, { ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PageComp, { ...props });
   }, [page]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MeasuredContentRenderer, { id: "content", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MeasuredContentRenderer, { id: "content", children: content });
 };
 var ModalRenderer = ({ modal }) => {
-  const content = (0, import_react59.useMemo)(() => {
+  const content = (0, import_react60.useMemo)(() => {
     const ModalComp = modals[modal.modal];
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ModalComp, { ...modal });
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ModalComp, { ...modal });
   }, [modal]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MeasuredContentRenderer, { id: `${modal.modal}-modal`, isModal: true, onModalOverlayClick: modal.onClose, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MeasuredContentRenderer, { id: `${modal.modal}-modal`, isModal: true, onModalOverlayClick: modal.onClose, children: content });
 };
 var ContentSection = ({ overriddingPage }) => {
   const { isTopSide } = useCofheFloatingButtonContext();
@@ -9971,17 +10419,17 @@ var ContentSection = ({ overriddingPage }) => {
   const maxContentHeight = usePortalUIMaxContentHeight();
   const currentPage = usePortalCurrentPage();
   const pageOrOverridingPage = overriddingPage ?? currentPage;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react60.AnimatePresence, { children: contentPanelOpen && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    import_react60.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react61.AnimatePresence, { children: contentPanelOpen && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    import_react61.motion.div,
     {
       className: "relative flex w-full z-50",
       initial: { opacity: 0, y: isTopSide ? -10 : 10 },
       animate: { opacity: 1, y: 0, height: `${maxContentHeight}px`, maxHeight: `${maxContentHeight}px` },
       exit: { opacity: 0, y: isTopSide ? -10 : 10 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(AnimatedZStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ContentRenderer, { page: pageOrOverridingPage }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(AnimatedZStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ContentRenderer, { page: pageOrOverridingPage }),
         modalStack.map((modal) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ModalRenderer, { modal }, modal.modal);
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ModalRenderer, { modal }, modal.modal);
         })
       ] })
     }
@@ -9989,13 +10437,13 @@ var ContentSection = ({ overriddingPage }) => {
 };
 
 // src/components/CofheFloatingButton/ToastsSection.tsx
-var import_react61 = require("react");
-var import_react62 = require("motion/react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_react62 = require("react");
+var import_react63 = require("motion/react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var ToastClearer = ({ id, paused, remainingMs }) => {
   const { removeToast } = usePortalToasts();
-  const timerRef = (0, import_react61.useRef)(null);
-  (0, import_react61.useEffect)(() => {
+  const timerRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
     if (remainingMs <= 0) {
       removeToast(id);
       return;
@@ -10031,7 +10479,7 @@ var ToastComponent = ({
   const handleDismiss = () => {
     removeToast(id);
   };
-  const injectedContent = (0, import_react61.isValidElement)(content) ? (0, import_react61.cloneElement)(content, {
+  const injectedContent = (0, import_react62.isValidElement)(content) ? (0, import_react62.cloneElement)(content, {
     id,
     paused,
     startMs,
@@ -10041,8 +10489,8 @@ var ToastComponent = ({
     onDismiss: handleDismiss,
     ...content.props
   }) : content;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-    import_react62.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    import_react63.motion.div,
     {
       initial: { opacity: 0, y: isTopSide ? -4 : 4 },
       animate: { opacity: 1, y: 0 },
@@ -10051,7 +10499,7 @@ var ToastComponent = ({
       className: cn("min-h-8 bg-white border items-center justify-start w-full max-w-full"),
       children: [
         injectedContent,
-        duration != "infinite" && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ToastClearer, { id, paused, remainingMs })
+        duration != "infinite" && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ToastClearer, { id, paused, remainingMs })
       ]
     },
     id
@@ -10059,11 +10507,11 @@ var ToastComponent = ({
 };
 var ToastsSection = () => {
   const { toasts } = usePortalToasts();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex flex-col gap-3 w-full max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react62.AnimatePresence, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ToastComponent, { ...toast }, toast.id)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-col gap-3 w-full max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react63.AnimatePresence, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ToastComponent, { ...toast }, toast.id)) }) });
 };
 
 // src/components/CofheFloatingButton/CofheFloatingButtonBase.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var positionStyles = {
   "top-left": "top-4 left-4",
   "top-right": "top-4 right-4",
@@ -10082,7 +10530,7 @@ var CofheFloatingButtonBase = ({
   const { clearAllModals } = usePortalModals();
   const { clearNavigationHistory } = usePortalNavigation();
   const darkMode = theme === "dark";
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       "data-testid": testId,
@@ -10098,10 +10546,10 @@ var CofheFloatingButtonBase = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ToastsSection, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ContentSection, { overriddingPage }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cn("flex w-full gap-3 items-center", isLeftSide ? "flex-row" : "flex-row-reverse"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ToastsSection, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ContentSection, { overriddingPage }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex w-full gap-3 items-center", isLeftSide ? "flex-row" : "flex-row-reverse"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             FloatingButtonComponent,
             {
               onClick: () => togglePortal({
@@ -10112,7 +10560,7 @@ var CofheFloatingButtonBase = ({
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StatusBarSection, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StatusBarContent, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusBarSection, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusBarContent, {}) })
         ] })
       ]
     }
@@ -10120,10 +10568,10 @@ var CofheFloatingButtonBase = ({
 };
 
 // src/components/CofheFloatingButton/CofheFloatingButton.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var CofheFloatingButtonWithProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(CofheFloatingButtonProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CofheFloatingButtonBase, { ...props }),
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(CofheFloatingButtonProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CofheFloatingButtonBase, { ...props }),
     props.children
   ] });
 };
@@ -10132,7 +10580,7 @@ var CofheFloatingButtonWithProvider = (props) => {
 var import_zod = require("zod");
 var import_sdk10 = require("@cofhe/sdk");
 var import_web2 = require("@cofhe/sdk/web");
-var import_viem26 = require("viem");
+var import_viem28 = require("viem");
 var noopCofheReactLoggerMethod2 = (..._args) => {
 };
 var NOOP_COFHE_REACT_LOGGER = {
@@ -10158,11 +10606,11 @@ function resolveCofheReactLogger(logger) {
 var CofheReactLoggerSchema = import_zod.z.custom((value) => value === null || typeof value === "object" && value !== null, {
   error: "Invalid logger"
 }).optional().default(null).transform((value) => resolveCofheReactLogger(value));
-var addressSchema = import_zod.z.string().refine((val) => (0, import_viem26.isAddress)(val), {
+var addressSchema = import_zod.z.string().refine((val) => (0, import_viem28.isAddress)(val), {
   error: "Invalid address"
-}).refine((val) => val !== import_viem26.zeroAddress, {
+}).refine((val) => val !== import_viem28.zeroAddress, {
   error: "Must not be zeroAddress"
-}).transform((val) => (0, import_viem26.getAddress)(val));
+}).transform((val) => (0, import_viem28.getAddress)(val));
 var CofheReactConfigSchema = import_zod.z.object({
   shareablePermits: import_zod.z.boolean().optional().default(false),
   enableShieldUnshield: import_zod.z.boolean().optional().default(true),
@@ -10208,11 +10656,11 @@ function createCofheConfig(config) {
 // src/providers/CofheProvider.tsx
 var import_chains5 = require("@cofhe/sdk/chains");
 var import_ts_essentials25 = __toESM(require_dist(), 1);
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var CofheContext = (0, import_react63.createContext)(void 0);
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var CofheContext = (0, import_react64.createContext)(void 0);
 function CofheProvider(props) {
   const { children, queryClient, publicClient, walletClient } = props;
-  const config = (0, import_react63.useMemo)(() => {
+  const config = (0, import_react64.useMemo)(() => {
     if (props.config) return props.config;
     if (props.cofheClient) {
       (0, import_ts_essentials25.assert)(props.cofheClient.config.environment === "react", "Provided cofheClient must have react config");
@@ -10220,10 +10668,10 @@ function CofheProvider(props) {
     }
     return createCofheConfig({ supportedChains: Object.values(import_chains5.chains) });
   }, [props.config, props.cofheClient]);
-  const cofheClient = (0, import_react63.useMemo)(() => props.cofheClient ?? (0, import_web3.createCofheClient)(config), [props.cofheClient, config]);
-  const [position, setPosition] = (0, import_react63.useState)(config.react.position);
-  const [theme, setTheme] = (0, import_react63.useState)(config.react.initialTheme);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  const cofheClient = (0, import_react64.useMemo)(() => props.cofheClient ?? (0, import_web3.createCofheClient)(config), [props.cofheClient, config]);
+  const [position, setPosition] = (0, import_react64.useState)(config.react.position);
+  const [theme, setTheme] = (0, import_react64.useState)(config.react.initialTheme);
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     CofheContext.Provider,
     {
       value: {
@@ -10235,9 +10683,9 @@ function CofheProvider(props) {
           setTheme
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(QueryProvider, { queryClient, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(AutoConnect, { walletClient, publicClient }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CofheFloatingButtonWithProvider, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(QueryProvider, { queryClient, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(AutoConnect, { walletClient, publicClient }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CofheFloatingButtonWithProvider, { children })
       ] })
     }
   );
@@ -10247,7 +10695,7 @@ function AutoConnect({ walletClient, publicClient }) {
   return null;
 }
 function useCofheContext() {
-  const context = (0, import_react63.useContext)(CofheContext);
+  const context = (0, import_react64.useContext)(CofheContext);
   if (context === void 0) {
     throw new Error("useCofheContext must be used within a CofheProvider");
   }
@@ -10255,9 +10703,9 @@ function useCofheContext() {
 }
 
 // src/components/CofheEncryptInput.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_sdk11 = require("@cofhe/sdk");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var CofheEncryptInput = ({
   className,
   testId,
@@ -10277,30 +10725,30 @@ var CofheEncryptInput = ({
   onEncryptComplete,
   onEncryptError
 }) => {
-  const [textValue, setTextValue] = (0, import_react64.useState)(initialValue);
-  const [selectedType, setSelectedType] = (0, import_react64.useState)(options[0]?.value || "uint32");
-  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react64.useState)(false);
-  const [showProgress, setShowProgress] = (0, import_react64.useState)(false);
-  const [encryptedResult, setEncryptedResult] = (0, import_react64.useState)(null);
-  const [copySuccess, setCopySuccess] = (0, import_react64.useState)(false);
-  const dropdownRef = (0, import_react64.useRef)(null);
+  const [textValue, setTextValue] = (0, import_react65.useState)(initialValue);
+  const [selectedType, setSelectedType] = (0, import_react65.useState)(options[0]?.value || "uint32");
+  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react65.useState)(false);
+  const [showProgress, setShowProgress] = (0, import_react65.useState)(false);
+  const [encryptedResult, setEncryptedResult] = (0, import_react65.useState)(null);
+  const [copySuccess, setCopySuccess] = (0, import_react65.useState)(false);
+  const dropdownRef = (0, import_react65.useRef)(null);
   const {
     encryptInputsAsync: encrypt,
     isEncrypting,
     stepsState: { lastStep: lastEncryptionStep }
   } = useCofheEncrypt();
-  const { progress: encryptionProgress, label: encryptionProgressLabel } = (0, import_react64.useMemo)(() => {
+  const { progress: encryptionProgress, label: encryptionProgressLabel } = (0, import_react65.useMemo)(() => {
     return lastEncryptionStep ? getStepConfig(lastEncryptionStep) : {
       progress: void 0,
       label: void 0
     };
   }, [lastEncryptionStep]);
-  const debouncedValidation = (0, import_react64.useRef)(
+  const debouncedValidation = (0, import_react65.useRef)(
     debounce((value) => {
       cofheLogger.log("Debounced validation for:", value);
     }, debounceMs)
   ).current;
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (showProgressBar && isEncrypting) {
       setShowProgress(true);
     } else if (!isEncrypting) {
@@ -10308,7 +10756,7 @@ var CofheEncryptInput = ({
       return () => clearTimeout(timer);
     }
   }, [showProgressBar, isEncrypting]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (isEncrypting && lastEncryptionStep && encryptionProgress && encryptionProgressLabel) {
       onEncryptProgress?.({
         step: lastEncryptionStep.step,
@@ -10317,7 +10765,7 @@ var CofheEncryptInput = ({
       });
     }
   }, [encryptionProgress, encryptionProgressLabel, onEncryptProgress, isEncrypting, lastEncryptionStep]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsDropdownOpen(false);
@@ -10461,12 +10909,12 @@ var CofheEncryptInput = ({
       setIsDropdownOpen(!isDropdownOpen);
     }
   };
-  const ShieldIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SecurityIcon, { style: { fontSize: 14 } });
-  const ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(KeyboardArrowDownIcon, { style: { fontSize: 14 } });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex items-start gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: inputContainerClasses, "data-testid": testId, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  const ShieldIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SecurityIcon, { style: { fontSize: 14 } });
+  const ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(KeyboardArrowDownIcon, { style: { fontSize: 14 } });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex items-start gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: inputContainerClasses, "data-testid": testId, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "input",
           {
             type: "text",
@@ -10478,21 +10926,21 @@ var CofheEncryptInput = ({
             "data-testid": testId ? `${testId}-input` : "cofhe-encrypt-input"
           }
         ),
-        (isEncrypting || encryptedResult) && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "absolute right-16 top-1/2 transform -translate-y-1/2", children: isEncrypting ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "bg-blue-500 px-2 py-1 text-xs text-white rounded animate-pulse", children: "Encrypting..." }) : encryptedResult ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        (isEncrypting || encryptedResult) && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "absolute right-16 top-1/2 transform -translate-y-1/2", children: isEncrypting ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "bg-blue-500 px-2 py-1 text-xs text-white rounded animate-pulse", children: "Encrypting..." }) : encryptedResult ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "button",
           {
             onClick: handleCopyResult,
             disabled: copySuccess,
             className: `px-2 py-1 text-xs text-white rounded flex items-center gap-1 transition-all duration-300 ${copySuccess ? "bg-green-600 cursor-default" : "bg-green-500 hover:bg-green-600"}`,
             title: copySuccess ? "Copied to clipboard!" : "Copy encrypted result to clipboard",
-            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-              copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CheckIcon, { style: { fontSize: 12 } }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ContentCopyIcon, { style: { fontSize: 12 } }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+              copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CheckIcon, { style: { fontSize: 12 } }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ContentCopyIcon, { style: { fontSize: 12 } }),
               "Copy"
             ] })
           }
         ) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "cofhe-dropdown-container", ref: dropdownRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "cofhe-dropdown-container", ref: dropdownRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
             "button",
             {
               type: "button",
@@ -10501,29 +10949,29 @@ var CofheEncryptInput = ({
               disabled: disabled || isEncrypting,
               "data-testid": testId ? `${testId}-type-selector` : "cofhe-type-selector",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ShieldIcon2, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronDownIcon, {})
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ShieldIcon2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronDownIcon, {})
               ]
             }
           ),
-          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "cofhe-dropdown-menu", children: options.map((option) => {
+          isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "cofhe-dropdown-menu", children: options.map((option) => {
             const isCompatible = isTypeCompatible(option.value, textValue);
             const isSelected = option.value === selectedType;
-            return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               "div",
               {
                 className: dropdownItemClasses(isSelected, isCompatible),
                 onClick: () => isCompatible && handleTypeSelect(option.value),
                 "data-testid": `${testId ? `${testId}-` : ""}type-option-${option.value}`,
                 title: !isCompatible ? `Value "${textValue}" is not compatible with ${option.label}` : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "font-mono", children: option.label })
+                children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "font-mono", children: option.label })
               },
               option.value
             );
           }) })
         ] })
       ] }),
-      showProgress && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      showProgress && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
         "div",
         {
           className: "mt-3 overflow-hidden",
@@ -10532,14 +10980,14 @@ var CofheEncryptInput = ({
           },
           "data-testid": testId ? `${testId}-progress` : "cofhe-encrypt-progress",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: encryptionProgressLabel || "Processing..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: encryptionProgressLabel || "Processing..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
                 encryptionProgress || 0,
                 "%"
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: progressContainerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: progressContainerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               "div",
               {
                 className: progressBarClasses("primary"),
@@ -10554,7 +11002,7 @@ var CofheEncryptInput = ({
         }
       )
     ] }) }),
-    hasError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    hasError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "p",
       {
         className: "mt-2 text-sm text-red-600 dark:text-red-400",