@cofhe/react 0.2.1 → 0.3.0

package/dist/index.js

@@ -730,7 +730,7 @@ var require_dist = __commonJS({
 });
 
 // src/providers/CofheProvider.tsx
-import { createContext as createContext4, useContext as useContext5, useMemo as useMemo32, useState as useState15 } from "react";
+import { createContext as createContext4, useContext as useContext5, useMemo as useMemo33, useState as useState15 } from "react";
 
 // src/providers/QueryProvider.tsx
 import { QueryClient } from "@tanstack/react-query";
@@ -754,7 +754,7 @@ var QueryProvider = ({
 };
 
 // src/providers/CofheProvider.tsx
-import { createCofhesdkClient } from "@cofhe/sdk/web";
+import { createCofheClient } from "@cofhe/sdk/web";
 
 // src/utils/cn.ts
 var cn = (...classes) => {
@@ -765,7 +765,53 @@ var cn = (...classes) => {
 import * as viemChains from "viem/chains";
 
 // src/types/token.ts
-var ETH_ADDRESS = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+import { baseSepolia, sepolia } from "@cofhe/sdk/chains";
+var ETH_ADDRESS_LOWERCASE = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
+var WETH_SEPOLIA_TOKEN = {
+  chainId: 11155111,
+  address: "0x87A3effB84CBE1E4caB6Ab430139eC41d156D55A",
+  name: "Redact eETH",
+  symbol: "eETH",
+  decimals: 18,
+  logoURI: "https://storage.googleapis.com/cofhesdk/token-icons/eth.webp",
+  extensions: {
+    fhenix: {
+      confidentialityType: "wrapped",
+      confidentialValueType: "uint128",
+      erc20Pair: {
+        address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        symbol: "ETH",
+        decimals: 18,
+        logoURI: "https://storage.googleapis.com/cofhesdk/token-icons/eth.webp"
+      }
+    }
+  }
+};
+var WETH_BASE_SEPOLIA_TOKEN = {
+  chainId: 84532,
+  address: "0xbED96aa98a49FeA71fcC55d755b915cF022a9159",
+  name: "Redact eETH",
+  symbol: "eETH",
+  decimals: 18,
+  logoURI: "https://storage.googleapis.com/cofhesdk/token-icons/eth.webp",
+  extensions: {
+    coingeckoId: "eeth",
+    fhenix: {
+      confidentialityType: "wrapped",
+      confidentialValueType: "uint128",
+      erc20Pair: {
+        address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        symbol: "ETH",
+        decimals: 18,
+        logoURI: "https://storage.googleapis.com/cofhesdk/token-icons/eth.webp"
+      }
+    }
+  }
+};
+var DEFAULT_TOKEN_BY_CHAIN_ID = {
+  [sepolia.id]: WETH_SEPOLIA_TOKEN,
+  [baseSepolia.id]: WETH_BASE_SEPOLIA_TOKEN
+};
 
 // src/utils/utils.ts
 import { isValidElement } from "react";
@@ -796,7 +842,7 @@ var getBlockExplorerTokenUrl = (chainId, tokenAddress) => {
 };
 var isEthPair = (erc20Pair) => {
   if (!erc20Pair) return false;
-  return erc20Pair.address.toLowerCase() === ETH_ADDRESS.toLowerCase();
+  return erc20Pair.address.toLowerCase() === ETH_ADDRESS_LOWERCASE;
 };
 var isWrappedEthToken = (token) => {
   if (token.extensions.fhenix.confidentialityType !== "wrapped") return false;
@@ -1332,12 +1378,12 @@ var useCofheSelectPermit = ({ onSuccess, onError } = {}) => {
 var import_ts_essentials = __toESM(require_dist(), 1);
 
 // src/hooks/useIsCofheErrorActive.ts
-import { CofhesdkError } from "@cofhe/sdk";
+import { CofheError } from "@cofhe/sdk";
 import { useContext as useContext2 } from "react";
 import { ErrorBoundaryContext } from "react-error-boundary";
 function useIsCofheErrorActive() {
   const errorBoundaryContext = useContext2(ErrorBoundaryContext);
-  return errorBoundaryContext?.error instanceof CofhesdkError;
+  return errorBoundaryContext?.error instanceof CofheError;
 }
 
 // src/hooks/useCofheReadContract.ts
@@ -1712,16 +1758,12 @@ function getTokenContractConfig(confidentialityType) {
   return CONFIDENTIAL_ABIS[confidentialityType];
 }
 
-// src/hooks/useCofheTokenPublicBalance.ts
-import "@tanstack/react-query";
-import "viem";
-
 // src/hooks/useCofheTokenLists.ts
 import "@tanstack/react-query";
 import { useMemo as useMemo4 } from "react";
 function useCofheTokenLists({ chainId }, queryOptions) {
   const widgetConfig = useCofheContext().client.config.react;
-  const tokensListsUrls = chainId ? widgetConfig.tokenLists[chainId] : [];
+  const tokensListsUrls = chainId ? widgetConfig.tokenLists?.[chainId] : [];
   const queriesOptions = tokensListsUrls?.map((url) => ({
     cacheTime: Infinity,
     staleTime: Infinity,
@@ -1777,6 +1819,10 @@ function useCofheToken({ chainId: _chainId, address }, metdataQueryOptions) {
   return tokenFromList;
 }
 
+// src/hooks/useCofheTokenPublicBalance.ts
+import "@tanstack/react-query";
+import "viem";
+
 // src/constants/erc20ABIs.ts
 import { parseAbi as parseAbi2 } from "viem";
 var ERC20_BALANCE_OF_ABI = parseAbi2(["function balanceOf(address owner) view returns (uint256)"]);
@@ -1851,7 +1897,7 @@ function createPublicTokenBalanceQueryOptions(params) {
       (0, import_ts_essentials2.assert)(tokenAddress, "Token address is required to fetch token balance");
       (0, import_ts_essentials2.assert)(publicClient, "PublicClient is required to fetch token balance");
       (0, import_ts_essentials2.assert)(accountAddress, "Account address is required to fetch token balance");
-      const isNativeToken = tokenAddress.toLowerCase() === ETH_ADDRESS.toLowerCase();
+      const isNativeToken = tokenAddress.toLowerCase() === ETH_ADDRESS_LOWERCASE;
       const balance = isNativeToken ? publicClient.getBalance({
         address: accountAddress
       }) : publicClient.readContract({
@@ -2836,6 +2882,14 @@ function useHandleInvalidations() {
   const { upsert: upsertDecryptionWatcher, byKey } = useDecryptionWatchersStore();
   console.log("Scheduled invalidations store:", byKey);
   const handleInvalidations = (tx) => {
+    invalidatePublicTokenBalanceQueries(
+      {
+        tokenAddress: ETH_ADDRESS_LOWERCASE,
+        chainId: tx.chainId,
+        accountAddress: tx.account
+      },
+      queryClient
+    );
     if (tx.actionType === "shieldSend" /* ShieldSend */) {
       invalidateConfidentialTokenBalanceQueries(tx.token, queryClient);
     } else if (tx.actionType === "shield" /* Shield */) {
@@ -3223,7 +3277,7 @@ import "viem";
 import { FheTypes as FheTypes2 } from "@cofhe/sdk";
 
 // src/hooks/useCofheDecrypt.ts
-import { CofhesdkError as CofhesdkError2 } from "@cofhe/sdk";
+import { CofheError as CofheError2 } from "@cofhe/sdk";
 var import_ts_essentials8 = __toESM(require_dist(), 1);
 function useCofheDecrypt({
   input
@@ -3237,14 +3291,14 @@ function useCofheDecrypt({
     queryKey: ["decryptCiphertext", input?.ctHash.toString(), input?.utype],
     queryFn: async () => {
       (0, import_ts_essentials8.assert)(input, "input is guaranteed to be defined by enabled condition");
-      return client.decryptHandle(input.ctHash, input.utype).decrypt();
+      return client.decryptForView(input.ctHash, input.utype).execute();
     },
     meta: {
       persist: true
     },
     ...restQueryOptions,
     retry: (failureCount, error) => {
-      if (error instanceof CofhesdkError2) return false;
+      if (error instanceof CofheError2) return false;
       return failureCount < 3;
     }
   });
@@ -3442,13 +3496,13 @@ function useCofheEncrypt(options) {
         handleStepStateChange(key, step, context);
         externalOnStepChange?.(step, context);
       };
-      builder.setStepCallback(combinedOnStepChange);
+      builder.onStep(combinedOnStepChange);
       if (hasEncryptInputsOptions(variables)) {
         if (variables.account) builder.setAccount(variables.account);
         if (variables.chainId) builder.setChainId(variables.chainId);
         if (variables.securityZone) builder.setSecurityZone(variables.securityZone);
       }
-      return builder.encrypt();
+      return builder.execute();
     }
   });
   return {
@@ -3628,7 +3682,7 @@ function useCofheTokenShield(options) {
       let hash;
       if (confidentialityType === "wrapped") {
         const erc20PairAddress = input.token.extensions.fhenix.erc20Pair?.address;
-        const isEth = erc20PairAddress?.toLowerCase() === ETH_ADDRESS.toLowerCase();
+        const isEth = erc20PairAddress?.toLowerCase() === ETH_ADDRESS_LOWERCASE;
         if (isEth) {
           hash = await walletClient.writeContract({
             address: tokenAddress,
@@ -4872,7 +4926,7 @@ var usePermitDetailsAndActions = (permitHash) => {
 };
 
 // src/hooks/useCofheAutoConnect.ts
-import { useEffect as useEffect7 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect7, useMemo as useMemo21 } from "react";
 
 // src/providers/internalQueryHooks.ts
 import {
@@ -4971,16 +5025,27 @@ var useCofheConnect = (options) => {
 var useCofheAutoConnect = ({ walletClient, publicClient }) => {
   const client = useCofheClient();
   const connectMutationFn = useCofheConnect().mutate;
+  const supportedChainIds = useMemo21(() => {
+    return new Set(client.config.supportedChains.map((chain) => chain.id));
+  }, [client.config.supportedChains]);
+  const disconnectIfConnected = useCallback11(() => {
+    if (client.connected || client.connecting) {
+      client.disconnect();
+    }
+  }, [client]);
   useEffect7(() => {
     if (!publicClient || !walletClient) {
-      if (client.connected || client.connecting) {
-        client.disconnect();
-      }
+      disconnectIfConnected();
+      return;
+    }
+    const chainId = walletClient.chain?.id ?? publicClient.chain?.id;
+    if (chainId !== void 0 && !supportedChainIds.has(chainId)) {
+      disconnectIfConnected();
       return;
     }
     if (client.connecting) return;
     connectMutationFn({ publicClient, walletClient });
-  }, [publicClient, walletClient, client, client.connected, client.connecting, connectMutationFn]);
+  }, [publicClient, walletClient, client, connectMutationFn, supportedChainIds, disconnectIfConnected]);
 };
 
 // src/hooks/useReschedulableTimeout.ts
@@ -5087,7 +5152,7 @@ function parseCoingeckoSimplePriceUsd({
 }
 function isNativeTokenAddress(address) {
   if (!address) return false;
-  return address.toLowerCase() === ETH_ADDRESS.toLowerCase();
+  return address.toLowerCase() === ETH_ADDRESS_LOWERCASE;
 }
 var TMP_WBTC_ON_MAINNET = {
   chainId: 1,
@@ -5496,7 +5561,7 @@ var StatusBarSection = ({ children }) => {
 // src/components/FnxFloatingButton/StatusBarContent.tsx
 import { MdOutlineSettings } from "react-icons/md";
 import { IoIosCheckmarkCircleOutline, IoIosCloseCircleOutline } from "react-icons/io";
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo22 } from "react";
 
 // src/components/primitives/AnimatedZStack.tsx
 import React from "react";
@@ -5647,7 +5712,7 @@ function sortStatuses(a, b) {
 }
 var StatusBarContent = () => {
   const { statuses } = usePortalStatuses();
-  const sortedStatuses = useMemo21(() => statuses.sort(sortStatuses), [statuses]);
+  const sortedStatuses = useMemo22(() => statuses.sort(sortStatuses), [statuses]);
   return /* @__PURE__ */ jsxs4(AnimatedZStack, { children: [
     /* @__PURE__ */ jsx10(ConnectionStatus, {}),
     sortedStatuses.map((status) => /* @__PURE__ */ jsx10(ActiveStatusContent, { status }, status.id))
@@ -5655,7 +5720,7 @@ var StatusBarContent = () => {
 };
 
 // src/components/FnxFloatingButton/ContentSection.tsx
-import { useEffect as useEffect12, useMemo as useMemo31, useRef as useRef8 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo32, useRef as useRef8 } from "react";
 
 // src/components/FnxFloatingButton/pages/MainPage/WalletHeader.tsx
 import { MdOutlineAccountBalanceWallet } from "react-icons/md";
@@ -5931,26 +5996,40 @@ var CofheTokenPublicBalance = ({
 function useCofhePinnedTokenAddress() {
   const widgetConfig = useCofheContext().client.config.react;
   const chainId = useCofheChainId();
-  const pinnedTokenAddress = chainId ? widgetConfig.pinnedTokens[chainId?.toString()] : void 0;
+  const pinnedTokenAddress = chainId ? widgetConfig.pinnedTokens?.[chainId?.toString()] : void 0;
   return pinnedTokenAddress;
 }
 
+// src/hooks/useCofhePinnedToken.ts
+function useCofhePinnedToken({ enabled } = {}) {
+  const pinnedTokenAddress = useCofhePinnedTokenAddress();
+  const token = useCofheToken(
+    {
+      address: pinnedTokenAddress
+    },
+    {
+      // only fetch metadata if pinned token address is defined
+      enabled: enabled !== false && !!pinnedTokenAddress
+    }
+  );
+  return token;
+}
+
 // src/components/FnxFloatingButton/pages/MainPage/AssetCard.tsx
 import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var AssetCard = () => {
   const { navigateTo } = usePortalNavigation();
-  const pinnedTokenAddress = useCofhePinnedTokenAddress();
-  const tokenFromList = useCofheToken({
-    address: pinnedTokenAddress
-  });
+  const pinnedToken = useCofhePinnedToken();
+  const chainId = useCofheChainId();
+  const fallbackToken = chainId ? DEFAULT_TOKEN_BY_CHAIN_ID[chainId] : void 0;
+  const token = pinnedToken ?? fallbackToken;
   const handleClick = () => {
-    if (!tokenFromList) throw new Error("Token not found in token list");
-    if (pinnedTokenAddress) {
+    if (token) {
       navigateTo("tokeninfo" /* TokenInfo */, {
-        pageProps: { token: tokenFromList }
+        pageProps: { token }
       });
     } else {
-      alert("Native token info navigation is not implemented yet.");
+      throw new Error("No token found for AssetCard. No pinned token and no fallback token for current chain.");
     }
   };
   return /* @__PURE__ */ jsx21(
@@ -5960,14 +6039,14 @@ var AssetCard = () => {
       className: cn("fnx-card-bg p-4 cursor-pointer", "hover:opacity-90 transition-opacity", "border fnx-card-border"),
       children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 flex-1", children: [
-          /* @__PURE__ */ jsx21(TokenIcon, { logoURI: tokenFromList?.logoURI, alt: tokenFromList?.symbol, size: "md" }),
-          /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx21("h3", { className: "text-lg font-bold fnx-text-primary", children: tokenFromList?.symbol }) })
+          /* @__PURE__ */ jsx21(TokenIcon, { logoURI: token?.logoURI, alt: token?.symbol, size: "md" }),
+          /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx21("h3", { className: "text-lg font-bold fnx-text-primary", children: token?.symbol }) })
         ] }),
         /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx21("div", { className: "flex flex-col items-end", children: /* @__PURE__ */ jsx21(
             CofheTokenConfidentialBalance,
             {
-              token: tokenFromList,
+              token,
               showSymbol: false,
               size: "xl",
               decimalPrecision: 5,
@@ -5987,23 +6066,6 @@ import { IoMdKey } from "react-icons/io";
 import { AiOutlinePieChart } from "react-icons/ai";
 import { TbShieldPlus as TbShieldPlus2 } from "react-icons/tb";
 import { FaBug } from "react-icons/fa";
-
-// src/hooks/useCofhePinnedToken.ts
-function useCofhePinnedToken({ enabled } = {}) {
-  const pinnedTokenAddress = useCofhePinnedTokenAddress();
-  const token = useCofheToken(
-    {
-      address: pinnedTokenAddress
-    },
-    {
-      // only fetch metadata if pinned token address is defined
-      enabled: enabled !== false && !!pinnedTokenAddress
-    }
-  );
-  return token;
-}
-
-// src/components/FnxFloatingButton/pages/MainPage/BottomNavigation.tsx
 var import_ts_essentials19 = __toESM(require_dist(), 1);
 
 // src/components/FnxFloatingButton/components/ActionButton.tsx
@@ -6171,7 +6233,7 @@ var Button = ({
 };
 
 // src/components/FnxFloatingButton/components/TokenPriceChart.tsx
-import { useId, useMemo as useMemo22 } from "react";
+import { useId, useMemo as useMemo23 } from "react";
 import {
   Area,
   AreaChart,
@@ -6211,7 +6273,7 @@ var themeClasses = {
 };
 var TokenPriceChart = ({ points, className, height = 150 }) => {
   const gradientId = useId();
-  const { start, mid, end } = useMemo22(() => {
+  const { start, mid, end } = useMemo23(() => {
     if (!points.length) {
       const now = Date.now();
       return { start: now - 24 * 36e5, mid: now - 12 * 36e5, end: now };
@@ -6390,7 +6452,10 @@ var navItems = [...baseNavItems, ...!isProduction() ? [debugNavItem] : []];
 var BottomNavigation = () => {
   const { navigateTo } = usePortalNavigation();
   const { openPortal } = usePortalUI();
-  const defaultToken = useCofhePinnedToken();
+  const pinnedToken = useCofhePinnedToken();
+  const chainId = useCofheChainId();
+  const fallbackToken = chainId ? DEFAULT_TOKEN_BY_CHAIN_ID[chainId] : void 0;
+  const defaultToken = pinnedToken ?? fallbackToken;
   const handleNavClick = (page) => {
     openPortal();
     if (page === "portfolio" /* Portfolio */) {
@@ -6494,19 +6559,19 @@ import { FaKey, FaDownload, FaPlus } from "react-icons/fa";
 import "react";
 
 // src/components/FnxFloatingButton/Accordion.tsx
-import { createContext as createContext3, useCallback as useCallback11, useContext as useContext4, useMemo as useMemo23, useState as useState9 } from "react";
+import { createContext as createContext3, useCallback as useCallback12, useContext as useContext4, useMemo as useMemo24, useState as useState9 } from "react";
 import { FaChevronDown, FaChevronUp } from "react-icons/fa6";
 import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var AccordionContext = createContext3(void 0);
 var Accordion = ({ children, defaultActiveId = null }) => {
   const [activeId, setActiveId] = useState9(defaultActiveId);
-  const handleToggle = useCallback11(
+  const handleToggle = useCallback12(
     (id) => {
       setActiveId(activeId === id ? null : id);
     },
     [activeId]
   );
-  const contextValue = useMemo23(
+  const contextValue = useMemo24(
     () => ({
       activeId,
       toggle: handleToggle
@@ -6622,7 +6687,7 @@ import { zeroAddress as zeroAddress2 } from "viem";
 import "@cofhe/sdk/permits";
 
 // src/components/StripedBackground.tsx
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo25 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 function StripedBackground({
   stripeColor = "rgba(255,255,255,0.18)",
@@ -6631,7 +6696,7 @@ function StripedBackground({
   style,
   children
 }) {
-  const bgImage = useMemo24(() => {
+  const bgImage = useMemo25(() => {
     return `repeating-linear-gradient(
       45deg,
       ${stripeColor} 0px,
@@ -6668,7 +6733,7 @@ var PermitStripedBackground = ({ variant, className, children }) => {
 };
 
 // src/components/FnxFloatingButton/components/PermitCard.tsx
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo26 } from "react";
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var PermitTypeLabel = {
   self: "Self",
@@ -6686,7 +6751,7 @@ var BasePermitCard = ({
 }) => {
   const activePermitHash = useCofheActivePermitHash();
   const expirationInfo = formatExpirationLabel(permit.expiration);
-  const metadataTags = useMemo25(() => {
+  const metadataTags = useMemo26(() => {
     const isActivePermit = permit.hash === activePermitHash;
     const tags = [];
     if (expirationInfo.expired) tags.push("expired");
@@ -7301,12 +7366,12 @@ var ImportPermitPage = () => {
 };
 
 // src/components/FnxFloatingButton/pages/TokenInfoPage.tsx
-import { sepolia } from "@cofhe/sdk/chains";
-import { useMemo as useMemo28 } from "react";
+import { sepolia as sepolia2 } from "@cofhe/sdk/chains";
+import { useMemo as useMemo29 } from "react";
 import ArrowBackIcon6 from "@mui/icons-material/ArrowBack";
 
 // src/components/FnxFloatingButton/pages/TokenInfoBalanceChart.tsx
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo27 } from "react";
 import LockIcon from "@mui/icons-material/Lock";
 import PublicIcon from "@mui/icons-material/Public";
 import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -7324,7 +7389,7 @@ var TokenInfoBalanceChart = ({ token, chartPoints }) => {
     token
   });
   const isFetchingBalances = isFetchingConfidentialBalance || isFetchingPublicBalance;
-  const balancePercents = useMemo26(() => {
+  const balancePercents = useMemo27(() => {
     if (!confidentialBalance && !publicBalance) return;
     const confidentialUnit = confidentialBalance?.unit ?? null;
     const publicUnit = publicBalance?.unit ?? null;
@@ -7336,7 +7401,7 @@ var TokenInfoBalanceChart = ({ token, chartPoints }) => {
       publicPct
     };
   }, [confidentialBalance, publicBalance]);
-  const price = useMemo26(() => {
+  const price = useMemo27(() => {
     const lastPoint = chartPoints?.[chartPoints.length - 1];
     const firstPoint = chartPoints?.[0];
     if (!lastPoint || !firstPoint) return;
@@ -7411,7 +7476,7 @@ var TokenInfoBalanceChart = ({ token, chartPoints }) => {
 };
 
 // src/components/FnxFloatingButton/pages/TokenInfoTransactionHistory.tsx
-import { useMemo as useMemo27 } from "react";
+import { useMemo as useMemo28 } from "react";
 import { formatUnits as formatUnits2 } from "viem";
 import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var TokenInfoTransactionHistoryHeader = ({ token }) => {
@@ -7434,7 +7499,7 @@ var TokenInfoTransactionHistory = ({ token, priceUsd }) => {
     account,
     filter: (tx) => tx.token.address.toLowerCase() === token.address.toLowerCase()
   });
-  const activity = useMemo27(() => {
+  const activity = useMemo28(() => {
     return tokenTxs.slice().sort((a, b) => b.timestamp - a.timestamp).map((tx) => {
       const amountToken = parseFloat(formatUnits2(tx.tokenAmount, tx.token.decimals));
       const amountUsd = typeof priceUsd === "number" && Number.isFinite(amountToken) ? amountToken * priceUsd : void 0;
@@ -7477,7 +7542,7 @@ import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-r
 var TokenInfoPage = ({ token }) => {
   const { navigateBack, navigateTo } = usePortalNavigation();
   const { data: chartPoints } = useCoingeckoContractMarketChartRange({
-    ...token.chainId === sepolia.id ? {
+    ...token.chainId === sepolia2.id ? {
       chainId: TMP_WBTC_ON_MAINNET.chainId,
       contractAddress: TMP_WBTC_ON_MAINNET.address
     } : {
@@ -7486,7 +7551,7 @@ var TokenInfoPage = ({ token }) => {
     },
     rangeMs: 24 * 36e5
   });
-  const priceUsd = useMemo28(() => {
+  const priceUsd = useMemo29(() => {
     const lastPoint = chartPoints?.[chartPoints.length - 1];
     return lastPoint?.value;
   }, [chartPoints]);
@@ -7540,7 +7605,7 @@ var TokenInfoPage = ({ token }) => {
 };
 
 // src/components/FnxFloatingButton/pages/SendPage.tsx
-import { useState as useState10, useMemo as useMemo29 } from "react";
+import { useState as useState10, useMemo as useMemo30 } from "react";
 import ArrowBackIcon7 from "@mui/icons-material/ArrowBack";
 import KeyboardArrowRightIcon2 from "@mui/icons-material/KeyboardArrowRight";
 import { isAddress as isAddress2, maxUint128 } from "viem";
@@ -7591,7 +7656,7 @@ var SendPage = ({ token: _token }) => {
     token,
     accountAddress: account
   });
-  const encryptionProgressLabel = useMemo29(() => lastStep?.step && getStepConfig(lastStep).label, [lastStep]);
+  const encryptionProgressLabel = useMemo30(() => lastStep?.step && getStepConfig(lastStep).label, [lastStep]);
   const [amount, setAmount] = useState10("");
   const [recipientAddress, setRecipientAddress] = useState10("");
   const [error, setError] = useState10(null);
@@ -7742,15 +7807,16 @@ var SendPage = ({ token: _token }) => {
 import ArrowBackIcon8 from "@mui/icons-material/ArrowBack";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { TbShieldPlus as TbShieldPlus3, TbShieldMinus as TbShieldMinus2 } from "react-icons/tb";
+import { LuExternalLink as LuExternalLink2 } from "react-icons/lu";
 import { useState as useState11 } from "react";
 import { parseUnits } from "viem";
 var import_ts_essentials21 = __toESM(require_dist(), 1);
 
 // src/hooks/useIsUnshieldingMining.ts
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 function useIsUnshieldingMining(token) {
   const account = useCofheAccount();
-  const filter3 = useCallback12(
+  const filter3 = useCallback13(
     (tx) => {
       return tx.token.address === token.address && tx.actionType === "unshield" /* Unshield */ && tx.status === "pending" /* Pending */;
     },
@@ -7778,8 +7844,37 @@ function useLifecycleStore() {
     setStatus
   };
 }
+function TxHashWithActions({ hash, chainId }) {
+  const href = chainId ? getBlockExplorerTxUrl(chainId, hash) : void 0;
+  const ellipsed = truncateHash(hash);
+  const handleOpenExplorer = () => {
+    if (href) {
+      window.open(href, "_blank", "noopener,noreferrer");
+    }
+  };
+  return /* @__PURE__ */ jsxs34("span", { className: "inline-flex items-center gap-1.5 align-baseline", children: [
+    /* @__PURE__ */ jsx49("span", { className: "font-mono", children: ellipsed }),
+    /* @__PURE__ */ jsx49(CopyButton, { text: hash, size: 14 }),
+    /* @__PURE__ */ jsx49(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenExplorer,
+        disabled: !href,
+        "aria-label": "Open transaction in explorer",
+        title: href ? "Open in explorer" : "Explorer not available for this chain",
+        className: cn(
+          "fnx-text-primary opacity-50 hover:opacity-100 transition-opacity cursor-pointer",
+          !href && "cursor-default opacity-30"
+        ),
+        children: /* @__PURE__ */ jsx49(LuExternalLink2, { style: { width: 14, height: 14 } })
+      }
+    )
+  ] });
+}
 function useClaimUnshieldedWithLifecycle() {
   const { setError, setStatus, error, status } = useLifecycleStore();
+  const chainId = useCofheChainId();
   const { schedule: scheduleStatusClear } = useReschedulableTimeout(() => setStatus(null), AUTOCLEAR_TX_STATUS_TIMEOUT);
   const claimUnshield = useCofheTokenClaimUnshielded({
     onMutate: () => {
@@ -7788,7 +7883,11 @@ function useClaimUnshieldedWithLifecycle() {
     },
     onSuccess: (hash) => {
       setStatus({
-        message: `Claim transaction sent! Hash: ${truncateHash(hash)}. Waiting for confirmation...`,
+        message: /* @__PURE__ */ jsxs34(Fragment10, { children: [
+          "Claim transaction sent! Hash: ",
+          /* @__PURE__ */ jsx49(TxHashWithActions, { hash, chainId }),
+          " Waiting for confirmation..."
+        ] }),
         type: "info"
       });
     },
@@ -7804,11 +7903,19 @@ function useClaimUnshieldedWithLifecycle() {
     onceMined: (transaction) => {
       if (transaction.status === "confirmed") {
         setStatus({
-          message: `Claim transaction confirmed! Hash: ${truncateHash(transaction.hash)}`,
+          message: /* @__PURE__ */ jsxs34(Fragment10, { children: [
+            "Claim transaction confirmed! Hash: ",
+            /* @__PURE__ */ jsx49(TxHashWithActions, { hash: transaction.hash, chainId })
+          ] }),
           type: "success"
         });
       } else if (transaction.status === "failed") {
-        setError(`Claim transaction failed! Hash: ${truncateHash(transaction.hash)}`);
+        setError(
+          /* @__PURE__ */ jsxs34(Fragment10, { children: [
+            "Claim transaction failed! Hash: ",
+            /* @__PURE__ */ jsx49(TxHashWithActions, { hash: transaction.hash, chainId })
+          ] })
+        );
         setStatus(null);
       }
       scheduleStatusClear();
@@ -7823,6 +7930,7 @@ function useClaimUnshieldedWithLifecycle() {
 }
 function useShieldWithLifecycle(token) {
   const account = useCofheAccount();
+  const chainId = useCofheChainId();
   const [shieldAmount, setShieldAmount] = useState11("");
   const { setError, setStatus, error, status } = useLifecycleStore();
   const { schedule: scheduleStatusClear } = useReschedulableTimeout(() => setStatus(null), AUTOCLEAR_TX_STATUS_TIMEOUT);
@@ -7833,7 +7941,11 @@ function useShieldWithLifecycle(token) {
     },
     onSuccess: (hash) => {
       setStatus({
-        message: `Shield transaction sent! Hash: ${truncateHash(hash)}. Waiting for confirmation...`,
+        message: /* @__PURE__ */ jsxs34(Fragment10, { children: [
+          "Shield transaction sent! Hash: ",
+          /* @__PURE__ */ jsx49(TxHashWithActions, { hash, chainId }),
+          " Waiting for confirmation..."
+        ] }),
         type: "info"
       });
       setShieldAmount("");
@@ -7850,11 +7962,19 @@ function useShieldWithLifecycle(token) {
     onceMined: (transaction) => {
       if (transaction.status === "confirmed") {
         setStatus({
-          message: `Shield transaction confirmed! Hash: ${truncateHash(transaction.hash)}`,
+          message: /* @__PURE__ */ jsxs34(Fragment10, { children: [
+            "Shield transaction confirmed! Hash: ",
+            /* @__PURE__ */ jsx49(TxHashWithActions, { hash: transaction.hash, chainId })
+          ] }),
           type: "success"
         });
       } else if (transaction.status === "failed") {
-        setError(`Shield transaction failed! Hash: ${truncateHash(transaction.hash)}`);
+        setError(
+          /* @__PURE__ */ jsxs34(Fragment10, { children: [
+            "Shield transaction failed! Hash: ",
+            /* @__PURE__ */ jsx49(TxHashWithActions, { hash: transaction.hash, chainId })
+          ] })
+        );
         setStatus(null);
       }
       scheduleStatusClear();
@@ -7896,6 +8016,7 @@ function useShieldWithLifecycle(token) {
 }
 function useUnshieldWithLifecycle(token) {
   const account = useCofheAccount();
+  const chainId = useCofheChainId();
   const { setError, setStatus, error, status } = useLifecycleStore();
   const { schedule: scheduleStatusClear } = useReschedulableTimeout(() => setStatus(null), AUTOCLEAR_TX_STATUS_TIMEOUT);
   const [unshieldAmount, setUnshieldAmount] = useState11("");
@@ -7908,7 +8029,11 @@ function useUnshieldWithLifecycle(token) {
     },
     onTransactionSubmitSuccess: (hash) => {
       setStatus({
-        message: `Unshield transaction sent! Hash: ${truncateHash(hash)}. Waiting for confirmation...`,
+        message: /* @__PURE__ */ jsxs34(Fragment10, { children: [
+          "Unshield transaction sent! Hash: ",
+          /* @__PURE__ */ jsx49(TxHashWithActions, { hash, chainId }),
+          " Waiting for confirmation..."
+        ] }),
         type: "info"
       });
       setUnshieldAmount("");
@@ -7922,11 +8047,20 @@ function useUnshieldWithLifecycle(token) {
     onceMined: (transaction) => {
       if (transaction.status === "confirmed") {
         setStatus({
-          message: `Unshield transaction confirmed! Hash: ${truncateHash(transaction.hash)}. Now waiting for decryption...`,
+          message: /* @__PURE__ */ jsxs34(Fragment10, { children: [
+            "Unshield transaction confirmed! Hash: ",
+            /* @__PURE__ */ jsx49(TxHashWithActions, { hash: transaction.hash, chainId }),
+            " Now waiting for decryption..."
+          ] }),
           type: "success"
         });
       } else if (transaction.status === "failed") {
-        setError(`Unshield transaction failed! Hash: ${truncateHash(transaction.hash)}`);
+        setError(
+          /* @__PURE__ */ jsxs34(Fragment10, { children: [
+            "Unshield transaction failed! Hash: ",
+            /* @__PURE__ */ jsx49(TxHashWithActions, { hash: transaction.hash, chainId })
+          ] })
+        );
         setStatus(null);
       }
     },
@@ -8034,10 +8168,7 @@ function ClaimingSection({ token }) {
     /* @__PURE__ */ jsx49(StatusAndError, { status: claimingStatus, error: claimingError })
   ] });
 }
-function StatusAndError({
-  status,
-  error
-}) {
+function StatusAndError({ status, error }) {
   return /* @__PURE__ */ jsxs34(Fragment10, { children: [
     error && /* @__PURE__ */ jsx49("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-2", children: /* @__PURE__ */ jsx49("p", { className: "text-xs text-red-800 dark:text-red-200", children: error }) }),
     status && /* @__PURE__ */ jsx49(
@@ -8647,7 +8778,7 @@ import ArrowBackIcon11 from "@mui/icons-material/ArrowBack";
 
 // src/components/FnxFloatingButton/components/TokenRow.tsx
 import KeyboardArrowRightIcon3 from "@mui/icons-material/KeyboardArrowRight";
-import { sepolia as sepolia2 } from "@cofhe/sdk/chains";
+import { sepolia as sepolia3 } from "@cofhe/sdk/chains";
 import { jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
 var TokenRow = ({ token, onClick, topLabel, balanceType }) => {
   const account = useCofheAccount();
@@ -8662,7 +8793,7 @@ var TokenRow = ({ token, onClick, topLabel, balanceType }) => {
   );
   const { data: publicBalance } = useCofheTokenPublicBalance({ token, accountAddress: account });
   const { data: price } = useCoingeckoUsdPrice(
-    token.chainId === sepolia2.id ? {
+    token.chainId === sepolia3.id ? {
       chainId: TMP_WBTC_ON_MAINNET.chainId,
       tokenAddress: TMP_WBTC_ON_MAINNET.address
     } : {
@@ -8826,7 +8957,7 @@ var PortfolioPage = () => {
 
 // src/components/FnxFloatingButton/pages/ClaimableTokens.tsx
 import ArrowBackIcon13 from "@mui/icons-material/ArrowBack";
-import { useMemo as useMemo30 } from "react";
+import { useMemo as useMemo31 } from "react";
 var import_ts_essentials22 = __toESM(require_dist(), 1);
 import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
 function ClaimableTokens() {
@@ -8839,7 +8970,7 @@ function ClaimableTokens() {
   const chainId = useCofheChainId();
   const allTokens = useCofheTokens(chainId);
   const claimMutation = useCofheTokenClaimUnshielded();
-  const rows = useMemo30(() => {
+  const rows = useMemo31(() => {
     const byLower = new Map(allTokens.map((t) => [t.address.toLowerCase(), t]));
     return Object.entries(claimableByTokenAddress).filter(([_t, amount]) => amount > 0n).map(([tokenAddress, claimableAmount]) => {
       const token = byLower.get(tokenAddress.toLowerCase());
@@ -8989,7 +9120,7 @@ var ExampleInfoPage = ({ onClose }) => {
 // src/components/FnxFloatingButton/modals/PermitDetailsModal.tsx
 import { FaCheck as FaCheck2, FaRegCopy as FaRegCopy2 } from "react-icons/fa6";
 import CloseIcon4 from "@mui/icons-material/Close";
-import { useCallback as useCallback13, useState as useState14 } from "react";
+import { useCallback as useCallback14, useState as useState14 } from "react";
 import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
 var PermitTypeLabel2 = {
   self: "Self",
@@ -9019,14 +9150,14 @@ var PermitDetailsModal = ({ hash, onClose }) => {
   } = usePermitDetailsAndActions(hash);
   const { openModal } = usePortalModals();
   const [confirmDelete, setConfirmDelete] = useState14(false);
-  const handlePermitSelect = useCallback13(() => {
+  const handlePermitSelect = useCallback14(() => {
     handleSelectActivePermit();
     onClose();
   }, [handleSelectActivePermit, onClose]);
-  const handlePermitShare = useCallback13(() => {
+  const handlePermitShare = useCallback14(() => {
     handleCopySharablePermitData();
   }, [handleCopySharablePermitData]);
-  const handlePermitDelete = useCallback13(async () => {
+  const handlePermitDelete = useCallback14(async () => {
     if (!confirmDelete) {
       setConfirmDelete(true);
       return;
@@ -9233,7 +9364,7 @@ var MeasuredContentRenderer = ({ children, id, isModal, onModalOverlayClick }) =
   ] });
 };
 var ContentRenderer = ({ page }) => {
-  const content = useMemo31(() => {
+  const content = useMemo32(() => {
     const PageComp = pages[page.page];
     const props = page.props ?? {};
     return /* @__PURE__ */ jsx62(PageComp, { ...props });
@@ -9241,7 +9372,7 @@ var ContentRenderer = ({ page }) => {
   return /* @__PURE__ */ jsx62(MeasuredContentRenderer, { id: "content", children: content });
 };
 var ModalRenderer = ({ modal }) => {
-  const content = useMemo31(() => {
+  const content = useMemo32(() => {
     const ModalComp = modals[modal.modal];
     return /* @__PURE__ */ jsx62(ModalComp, { ...modal });
   }, [modal]);
@@ -9407,14 +9538,14 @@ var FnxFloatingButtonWithProvider = (props) => {
 // src/config.ts
 import { z } from "zod";
 import "@cofhe/sdk";
-import { createCofhesdkConfig as createCofhesdkConfigWeb } from "@cofhe/sdk/web";
+import { createCofheConfig as createCofheConfigWeb } from "@cofhe/sdk/web";
 import { getAddress, isAddress as isAddress3, zeroAddress as zeroAddress3 } from "viem";
 var addressSchema = z.string().refine((val) => isAddress3(val), {
   error: "Invalid address"
 }).refine((val) => val !== zeroAddress3, {
   error: "Must not be zeroAddress"
 }).transform((val) => getAddress(val));
-var CofhesdkReactConfigSchema = z.object({
+var CofheReactConfigSchema = z.object({
   shareablePermits: z.boolean().optional().default(false),
   enableShieldUnshield: z.boolean().optional().default(true),
   autogeneratePermits: z.boolean().optional().default(true),
@@ -9430,30 +9561,20 @@ var CofhesdkReactConfigSchema = z.object({
   ]),
   defaultPermitExpirationSeconds: z.number().optional().default(604800),
   // 1 week
-  pinnedTokens: z.record(z.string(), addressSchema).optional().default({
-    11155111: "0x87A3effB84CBE1E4caB6Ab430139eC41d156D55A",
-    // sepolia weth
-    84532: "0xbED96aa98a49FeA71fcC55d755b915cF022a9159"
-    // base sepolia weth
-    // 421613: '0x980b62da83eff3d4576c647993b0c1d7faf17c73', // arbitrum sepolia weth
-  }),
-  tokenLists: z.record(z.string(), z.array(z.string())).optional().default({
-    11155111: ["https://storage.googleapis.com/cofhesdk/sepolia.json"],
-    84532: ["https://storage.googleapis.com/cofhesdk/base-sepolia.json"]
-    // 421613: ['https://tokens.cofhe.io/arbitrum-sepolia.json'],
-  }).transform((lists) => lists),
+  pinnedTokens: z.record(z.string(), addressSchema).optional(),
+  tokenLists: z.record(z.string(), z.array(z.string())).transform((lists) => lists).optional(),
   position: z.enum(["bottom-right", "bottom-left", "top-right", "top-left"]).optional().default("bottom-right"),
   initialTheme: z.enum(["dark", "light"]).optional().default("light")
 });
-function createCofhesdkConfig(config) {
+function createCofheConfig(config) {
   const { react: reactConfigInput = {}, ...webConfig } = config;
-  const webClientConfig = createCofhesdkConfigWeb({
+  const webClientConfig = createCofheConfigWeb({
     environment: "react",
     ...webConfig
   });
-  const reactConfigResult = CofhesdkReactConfigSchema.safeParse(reactConfigInput);
+  const reactConfigResult = CofheReactConfigSchema.safeParse(reactConfigInput);
   if (!reactConfigResult.success) {
-    throw new Error(`Invalid cofhesdk react configuration: ${z.prettifyError(reactConfigResult.error)}`, {
+    throw new Error(`Invalid cofhe react configuration: ${z.prettifyError(reactConfigResult.error)}`, {
       cause: reactConfigResult.error
     });
   }
@@ -9470,25 +9591,22 @@ import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
 var CofheContext = createContext4(void 0);
 function CofheProvider(props) {
   const { children, queryClient, publicClient, walletClient } = props;
-  const config = useMemo32(() => {
+  const config = useMemo33(() => {
     if (props.config) return props.config;
-    if (props.cofhesdkClient) {
-      (0, import_ts_essentials23.assert)(config.environment === "react", "Provided cofhesdkClient must have react config");
-      return props.cofhesdkClient.config;
-    }
-    return createCofhesdkConfig({ supportedChains: Object.values(chains) });
-  }, [props.config, props.cofhesdkClient]);
-  const cofhesdkClient = useMemo32(
-    () => props.cofhesdkClient ?? createCofhesdkClient(config),
-    [props.cofhesdkClient, config]
-  );
+    if (props.cofheClient) {
+      (0, import_ts_essentials23.assert)(config.environment === "react", "Provided cofheClient must have react config");
+      return props.cofheClient.config;
+    }
+    return createCofheConfig({ supportedChains: Object.values(chains) });
+  }, [props.config, props.cofheClient]);
+  const cofheClient = useMemo33(() => props.cofheClient ?? createCofheClient(config), [props.cofheClient, config]);
   const [position, setPosition] = useState15(config.react.position);
   const [theme, setTheme] = useState15(config.react.initialTheme);
   return /* @__PURE__ */ jsx66(
     CofheContext.Provider,
     {
       value: {
-        client: cofhesdkClient,
+        client: cofheClient,
         state: {
           position,
           setPosition,
@@ -9516,7 +9634,7 @@ function useCofheContext() {
 }
 
 // src/components/FnxEncryptInput.tsx
-import { useState as useState16, useRef as useRef10, useEffect as useEffect14, useMemo as useMemo33 } from "react";
+import { useState as useState16, useRef as useRef10, useEffect as useEffect14, useMemo as useMemo34 } from "react";
 import SecurityIcon from "@mui/icons-material/Security";
 import KeyboardArrowDownIcon2 from "@mui/icons-material/KeyboardArrowDown";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
@@ -9554,7 +9672,7 @@ var FnxEncryptInput = ({
     isEncrypting,
     stepsState: { lastStep: lastEncryptionStep }
   } = useCofheEncrypt();
-  const { progress: encryptionProgress, label: encryptionProgressLabel } = useMemo33(() => {
+  const { progress: encryptionProgress, label: encryptionProgressLabel } = useMemo34(() => {
     return lastEncryptionStep ? getStepConfig(lastEncryptionStep) : {
       progress: void 0,
       label: void 0
@@ -9831,10 +9949,10 @@ var FnxEncryptInput = ({
 };
 
 // src/index.ts
-import { createCofhesdkClient as createCofhesdkClient2 } from "@cofhe/sdk/web";
+import { createCofheClient as createCofheClient2 } from "@cofhe/sdk/web";
 export {
   CofheProvider,
-  ETH_ADDRESS,
+  ETH_ADDRESS_LOWERCASE,
   FheTypesList,
   FnxEncryptInput,
   FnxFloatingButtonWithProvider,
@@ -9843,8 +9961,8 @@ export {
   TransactionActionType,
   TransactionStatus,
   actionToString,
-  createCofhesdkClient2 as createCofhesdkClient,
-  createCofhesdkConfig,
+  createCofheClient2 as createCofheClient,
+  createCofheConfig,
   encryptedValueToString,
   fheTypeToString,
   formatRelativeTime,