@bze/bze-ui-kit 1.0.13 → 1.0.15

package/dist/index.d.mts

@@ -1081,18 +1081,19 @@ declare const useSigningClient: ({ chainName }: UseSigningClientProps) => {
 
 /**
  * Validates the wallet connection on mount and proactively disconnects if the
- * wallet state restored from localStorage is stale (e.g. extension locked after
- * the user left the page for hours).
+ * wallet state restored from localStorage is stale (extension locked, or account
+ * switched outside the UI between sessions).
  *
  * interchain-kit persists WalletState.Connected + the account address in
- * localStorage and restores it on every page load without verifying the
- * extension is actually available. This hook catches that case by attempting
- * to create a signing client immediately on mount and calling disconnect() if
- * the attempt fails or times out — clearing the false "connected" UI state
- * before the user tries a transaction.
+ * localStorage and restores it on every page load without re-verifying the
+ * extension. This hook catches that by calling refreshAccount() — interchain-kit's
+ * own method for forcing a live fetch from the extension — and comparing the result
+ * against the cached address. On mismatch or failure, shows a toast and disconnects.
  *
- * Intentionally runs only once on mount (empty deps array) so it doesn't
- * interfere with normal connect/disconnect flows initiated by the user.
+ * Runs on every status change (not just mount) because interchain-kit restores state
+ * asynchronously, so status is Disconnected on the first render and only becomes
+ * Connected after its own useEffect/init() completes. The hasValidated ref ensures
+ * we only run the check once per page load.
  */
 declare const useWalletHealthCheck: (chainName?: string) => void;
 

package/dist/index.d.ts

@@ -1081,18 +1081,19 @@ declare const useSigningClient: ({ chainName }: UseSigningClientProps) => {
 
 /**
  * Validates the wallet connection on mount and proactively disconnects if the
- * wallet state restored from localStorage is stale (e.g. extension locked after
- * the user left the page for hours).
+ * wallet state restored from localStorage is stale (extension locked, or account
+ * switched outside the UI between sessions).
  *
  * interchain-kit persists WalletState.Connected + the account address in
- * localStorage and restores it on every page load without verifying the
- * extension is actually available. This hook catches that case by attempting
- * to create a signing client immediately on mount and calling disconnect() if
- * the attempt fails or times out — clearing the false "connected" UI state
- * before the user tries a transaction.
+ * localStorage and restores it on every page load without re-verifying the
+ * extension. This hook catches that by calling refreshAccount() — interchain-kit's
+ * own method for forcing a live fetch from the extension — and comparing the result
+ * against the cached address. On mismatch or failure, shows a toast and disconnects.
  *
- * Intentionally runs only once on mount (empty deps array) so it doesn't
- * interfere with normal connect/disconnect flows initiated by the user.
+ * Runs on every status change (not just mount) because interchain-kit restores state
+ * asynchronously, so status is Disconnected on the first render and only becomes
+ * Connected after its own useEffect/init() completes. The hasValidated ref ensures
+ * we only run the check once per page load.
  */
 declare const useWalletHealthCheck: (chainName?: string) => void;
 

package/dist/index.js

@@ -3652,40 +3652,95 @@ var useSigningClient = ({ chainName }) => {
 };
 
 // src/hooks/useWalletHealthCheck.ts
-var import_react5 = require("react");
-var import_react6 = require("@interchain-kit/react");
+var import_react6 = require("react");
+var import_react7 = require("@interchain-kit/react");
 var import_core = require("@interchain-kit/core");
+
+// src/components/toaster.tsx
+var import_react5 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toaster = (0, import_react5.createToaster)({
+  placement: "top-end",
+  pauseOnPageIdle: true
+});
+var Toaster = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react5.Toast.Root, { width: { md: "sm" }, children: [
+    toast.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Spinner, { size: "sm", color: "blue.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Toast.Indicator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react5.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+      toast.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Toast.Title, { children: toast.title }),
+      toast.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Toast.Description, { children: toast.description })
+    ] }),
+    toast.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Toast.ActionTrigger, { children: toast.action.label }),
+    toast.closable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.Toast.CloseTrigger, {})
+  ] }) }) });
+};
+
+// src/hooks/useWalletHealthCheck.ts
 var SIGNING_CLIENT_TIMEOUT_MS = 5e3;
 var useWalletHealthCheck = (chainName) => {
-  const { status, getSigningClient, disconnect } = (0, import_react6.useChain)(chainName != null ? chainName : getChainName());
-  (0, import_react5.useEffect)(() => {
+  const { status, disconnect, address, wallet } = (0, import_react7.useChain)(chainName != null ? chainName : getChainName());
+  const hasValidated = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
     if (status !== import_core.WalletState.Connected) return;
+    if (hasValidated.current) return;
+    hasValidated.current = true;
     const validate = async () => {
+      var _a2, _b2;
       try {
-        const client = await Promise.race([
-          getSigningClient(),
+        const refreshed = await Promise.race([
+          (_a2 = wallet == null ? void 0 : wallet.refreshAccount) == null ? void 0 : _a2.call(wallet).then(() => true),
           new Promise(
-            (resolve) => setTimeout(() => resolve(null), SIGNING_CLIENT_TIMEOUT_MS)
+            (resolve) => setTimeout(() => resolve(false), SIGNING_CLIENT_TIMEOUT_MS)
           )
         ]);
-        if (!client) {
+        if (!refreshed) {
+          console.error("[useWalletHealthCheck] refreshAccount timed out \u2014 wallet may be locked. Disconnecting.");
+          toaster.create({
+            title: "Wallet disconnected",
+            description: "Could not reach your wallet extension. Please reconnect.",
+            type: "error",
+            duration: 8e3,
+            closable: true
+          });
           disconnect();
+          return;
         }
-      } catch (e) {
+        const freshAccount = await ((_b2 = wallet == null ? void 0 : wallet.getAccount) == null ? void 0 : _b2.call(wallet));
+        const freshAddress = freshAccount == null ? void 0 : freshAccount.address;
+        if (freshAddress && freshAddress !== address) {
+          console.error(`[useWalletHealthCheck] Address mismatch \u2014 interchain-kit cached "${address}" but extension reports "${freshAddress}". Wallet was switched outside the UI. Disconnecting.`);
+          toaster.create({
+            title: "Wallet account changed",
+            description: "Your wallet account changed since your last visit. Please reconnect.",
+            type: "warning",
+            duration: 8e3,
+            closable: true
+          });
+          disconnect();
+        }
+      } catch (err) {
+        console.error("[useWalletHealthCheck] Error validating wallet connection:", err);
+        toaster.create({
+          title: "Wallet connection error",
+          description: "Could not verify your wallet connection. Please reconnect.",
+          type: "error",
+          duration: 8e3,
+          closable: true
+        });
         disconnect();
       }
     };
     validate();
-  }, []);
+  }, [status]);
 };
 
 // src/hooks/usePrices.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useAssetPrice(denom) {
   const { usdPricesMap, marketsDataMap, isLoadingPrices } = useAssetsContext();
-  const usdDenom = (0, import_react7.useMemo)(() => getUSDCDenom(), []);
-  const bzeDenom = (0, import_react7.useMemo)(() => getChainNativeAssetDenom(), []);
-  const change = (0, import_react7.useMemo)(() => {
+  const usdDenom = (0, import_react8.useMemo)(() => getUSDCDenom(), []);
+  const bzeDenom = (0, import_react8.useMemo)(() => getChainNativeAssetDenom(), []);
+  const change = (0, import_react8.useMemo)(() => {
     const marketData = marketsDataMap.get(createMarketId(denom, usdDenom));
     if (marketData) {
       return marketData.change;
@@ -3696,20 +3751,20 @@ function useAssetPrice(denom) {
     }
     return 0;
   }, [marketsDataMap, denom, usdDenom, bzeDenom]);
-  const price = (0, import_react7.useMemo)(() => {
+  const price = (0, import_react8.useMemo)(() => {
     const zeroBN = toBigNumber(0);
     if (denom === "") return zeroBN;
     if (denom === usdDenom) return toBigNumber(1);
     return usdPricesMap.get(denom) || zeroBN;
   }, [usdPricesMap, denom, usdDenom]);
-  const totalUsdValue = (0, import_react7.useCallback)((amount) => {
+  const totalUsdValue = (0, import_react8.useCallback)((amount) => {
     return price.multipliedBy(amount);
   }, [price]);
-  const uAmountUsdValue = (0, import_react7.useCallback)((amount, decimals) => {
+  const uAmountUsdValue = (0, import_react8.useCallback)((amount, decimals) => {
     return totalUsdValue(uAmountToBigNumberAmount(amount, decimals));
   }, [totalUsdValue]);
-  const isUSDC = (0, import_react7.useMemo)(() => denom === usdDenom, [denom, usdDenom]);
-  const hasPrice = (0, import_react7.useMemo)(() => price.gt(0), [price]);
+  const isUSDC = (0, import_react8.useMemo)(() => denom === usdDenom, [denom, usdDenom]);
+  const hasPrice = (0, import_react8.useMemo)(() => price.gt(0), [price]);
   return {
     price,
     change,
@@ -3722,36 +3777,36 @@ function useAssetPrice(denom) {
 }
 
 // src/hooks/useSettings.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useSettings() {
-  const [settings, setSettingsState] = (0, import_react8.useState)(DEFAULT_SETTINGS);
-  const [isLoaded, setIsLoaded] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [settings, setSettingsState] = (0, import_react9.useState)(DEFAULT_SETTINGS);
+  const [isLoaded, setIsLoaded] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     setSettingsState(getSettings());
     setIsLoaded(true);
   }, []);
-  const saveSettings = (0, import_react8.useCallback)((newSettings) => {
+  const saveSettings = (0, import_react9.useCallback)((newSettings) => {
     setSettings(newSettings);
     setSettingsState(newSettings);
     return true;
   }, []);
-  const updateEndpoints = (0, import_react8.useCallback)((endpoints) => {
+  const updateEndpoints = (0, import_react9.useCallback)((endpoints) => {
     const newSettings = __spreadProps(__spreadValues({}, settings), { endpoints });
     return saveSettings(newSettings);
   }, [settings, saveSettings]);
-  const updatePreferredFeeDenom = (0, import_react8.useCallback)((preferredFeeDenom) => {
+  const updatePreferredFeeDenom = (0, import_react9.useCallback)((preferredFeeDenom) => {
     const newSettings = __spreadProps(__spreadValues({}, settings), { preferredFeeDenom });
     return saveSettings(newSettings);
   }, [settings, saveSettings]);
-  const resetToDefaults = (0, import_react8.useCallback)(() => {
+  const resetToDefaults = (0, import_react9.useCallback)(() => {
     saveSettings(DEFAULT_SETTINGS);
     return true;
   }, [saveSettings]);
-  const getEndpoints = (0, import_react8.useCallback)(() => {
+  const getEndpoints = (0, import_react9.useCallback)(() => {
     return settings.endpoints;
   }, [settings.endpoints]);
-  const defaultSettings = (0, import_react8.useMemo)(() => DEFAULT_SETTINGS, []);
-  const feeDenom = (0, import_react8.useMemo)(() => settings.preferredFeeDenom || getChainNativeAssetDenom(), [settings.preferredFeeDenom]);
+  const defaultSettings = (0, import_react9.useMemo)(() => DEFAULT_SETTINGS, []);
+  const feeDenom = (0, import_react9.useMemo)(() => settings.preferredFeeDenom || getChainNativeAssetDenom(), [settings.preferredFeeDenom]);
   return {
     settings,
     isLoaded,
@@ -3767,14 +3822,14 @@ function useSettings() {
 
 // src/hooks/useBalances.ts
 var import_bignumber8 = __toESM(require("bignumber.js"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useBalances() {
   const { balancesMap, isLoading, assetsMap, usdPricesMap } = useAssetsContext();
-  const balances = (0, import_react9.useMemo)(() => Array.from(balancesMap.values()), [balancesMap]);
-  const getBalanceByDenom = (0, import_react9.useCallback)((denom) => {
+  const balances = (0, import_react10.useMemo)(() => Array.from(balancesMap.values()), [balancesMap]);
+  const getBalanceByDenom = (0, import_react10.useCallback)((denom) => {
     return balancesMap.get(denom) || { denom, amount: (0, import_bignumber8.default)(0) };
   }, [balancesMap]);
-  const assetsBalances = (0, import_react9.useMemo)(() => {
+  const assetsBalances = (0, import_react10.useMemo)(() => {
     const result = [];
     balances.map((bal) => {
       const asset = assetsMap.get(bal.denom);
@@ -3804,14 +3859,14 @@ function useBalances() {
 }
 function useBalance(denom) {
   const { balancesMap, isLoading } = useAssetsContext();
-  const balance = (0, import_react9.useMemo)(
+  const balance = (0, import_react10.useMemo)(
     () => balancesMap.get(denom) || {
       denom,
       amount: (0, import_bignumber8.default)(0)
     },
     [balancesMap, denom]
   );
-  const hasAmount = (0, import_react9.useCallback)((amount) => {
+  const hasAmount = (0, import_react10.useCallback)((amount) => {
     return balance.amount.gte(amount);
   }, [balance]);
   return {
@@ -3822,7 +3877,7 @@ function useBalance(denom) {
 }
 
 // src/hooks/useEpochs.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_bignumber9 = __toESM(require("bignumber.js"));
 var EPOCH_HOUR2 = "hour";
 var EPOCH_DAY2 = "day";
@@ -3842,28 +3897,28 @@ function getEpochDurationByIdentifier2(identifier) {
 }
 function useEpochs() {
   const { epochs, isLoading, updateEpochs } = useAssetsContext();
-  const getCurrentEpoch2 = (0, import_react10.useCallback)((identifier) => {
+  const getCurrentEpoch2 = (0, import_react11.useCallback)((identifier) => {
     return epochs.get(identifier);
   }, [epochs]);
-  const hourEpochInfo = (0, import_react10.useMemo)(() => {
+  const hourEpochInfo = (0, import_react11.useMemo)(() => {
     return epochs.get(EPOCH_HOUR2);
   }, [epochs]);
-  const dayEpochInfo = (0, import_react10.useMemo)(() => {
+  const dayEpochInfo = (0, import_react11.useMemo)(() => {
     return epochs.get(EPOCH_DAY2);
   }, [epochs]);
-  const weekEpochInfo = (0, import_react10.useMemo)(() => {
+  const weekEpochInfo = (0, import_react11.useMemo)(() => {
     return epochs.get(EPOCH_WEEK2);
   }, [epochs]);
-  const getHourEpochInfo2 = (0, import_react10.useCallback)(() => {
+  const getHourEpochInfo2 = (0, import_react11.useCallback)(() => {
     return epochs.get(EPOCH_HOUR2);
   }, [epochs]);
-  const getDayEpochInfo = (0, import_react10.useCallback)(() => {
+  const getDayEpochInfo = (0, import_react11.useCallback)(() => {
     return epochs.get(EPOCH_DAY2);
   }, [epochs]);
-  const getWeekEpochInfo2 = (0, import_react10.useCallback)(() => {
+  const getWeekEpochInfo2 = (0, import_react11.useCallback)(() => {
     return epochs.get(EPOCH_WEEK2);
   }, [epochs]);
-  const getPeriodicEpochEndTime2 = (0, import_react10.useCallback)((identifier, modWeek = 1) => {
+  const getPeriodicEpochEndTime2 = (0, import_react11.useCallback)((identifier, modWeek = 1) => {
     const epoch = epochs.get(identifier);
     if (!epoch || !epoch.current_epoch_start_time) {
       return void 0;
@@ -3878,13 +3933,13 @@ function useEpochs() {
     startAt.setTime(startAt.getTime() + duration + duration * remainingEpochs);
     return startAt;
   }, [epochs]);
-  const getCurrentWeekEpochEndTime2 = (0, import_react10.useCallback)(() => {
+  const getCurrentWeekEpochEndTime2 = (0, import_react11.useCallback)(() => {
     return getPeriodicEpochEndTime2(EPOCH_WEEK2);
   }, [getPeriodicEpochEndTime2]);
-  const getPeriodicWeekEpochEndTime2 = (0, import_react10.useCallback)((modWeek = 1) => {
+  const getPeriodicWeekEpochEndTime2 = (0, import_react11.useCallback)((modWeek = 1) => {
     return getPeriodicEpochEndTime2(EPOCH_WEEK2, modWeek);
   }, [getPeriodicEpochEndTime2]);
-  const epochsList = (0, import_react10.useMemo)(() => Array.from(epochs.values()), [epochs]);
+  const epochsList = (0, import_react11.useMemo)(() => Array.from(epochs.values()), [epochs]);
   return {
     epochs: epochsList,
     epochsMap: epochs,
@@ -3911,22 +3966,22 @@ function useEpochsManager() {
 }
 
 // src/hooks/useLiquidityPools.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_bignumber10 = __toESM(require("bignumber.js"));
 function useLiquidityPools() {
   const { poolsMap, poolsDataMap, updateLiquidityPools, isLoading, assetsMap } = useAssetsContext();
-  const pools = (0, import_react11.useMemo)(() => {
+  const pools = (0, import_react12.useMemo)(() => {
     return Array.from(poolsMap.values());
   }, [poolsMap]);
   const getPoolByLpDenom = (lpDenom) => {
     const poolId = poolIdFromPoolDenom(lpDenom);
     return poolsMap.get(poolId);
   };
-  const getDenomsPool = (0, import_react11.useCallback)((denomA, denomB) => {
+  const getDenomsPool = (0, import_react12.useCallback)((denomA, denomB) => {
     const poolId = createPoolId(denomA, denomB);
     return poolsMap.get(poolId);
   }, [poolsMap]);
-  const liquidAssets = (0, import_react11.useMemo)(() => {
+  const liquidAssets = (0, import_react12.useMemo)(() => {
     if (!assetsMap || assetsMap.size === 0) return [];
     const result = /* @__PURE__ */ new Map();
     pools.forEach((pool) => {
@@ -3949,12 +4004,12 @@ function useLiquidityPools() {
 }
 function useAssetLiquidityPools(denom) {
   const { poolsMap, poolsDataMap, isLoading } = useAssetsContext();
-  const assetPools = (0, import_react11.useMemo)(() => {
+  const assetPools = (0, import_react12.useMemo)(() => {
     return Array.from(poolsMap.values()).filter(
       (pool) => pool.base === denom || pool.quote === denom
     );
   }, [poolsMap, denom]);
-  const assetPoolsData = (0, import_react11.useMemo)(() => {
+  const assetPoolsData = (0, import_react12.useMemo)(() => {
     const newMap = /* @__PURE__ */ new Map();
     if (isLoading || denom === "") return newMap;
     assetPools.forEach((pool) => {
@@ -3965,7 +4020,7 @@ function useAssetLiquidityPools(denom) {
     });
     return newMap;
   }, [assetPools, poolsDataMap, isLoading, denom]);
-  const asset24HoursVolume = (0, import_react11.useMemo)(() => {
+  const asset24HoursVolume = (0, import_react12.useMemo)(() => {
     let volume = (0, import_bignumber10.default)(0);
     if (isLoading || denom === "") return volume;
     assetPoolsData.forEach((poolData) => {
@@ -3987,47 +4042,47 @@ function useAssetLiquidityPools(denom) {
 }
 function useLiquidityPool(poolId) {
   const { balancesMap, assetsMap, poolsMap, poolsDataMap, isLoading } = useAssetsContext();
-  const pool = (0, import_react11.useMemo)(() => poolsMap.get(poolId), [poolsMap, poolId]);
-  const poolData = (0, import_react11.useMemo)(() => poolsDataMap.get(poolId), [poolsDataMap, poolId]);
-  const userShares = (0, import_react11.useMemo)(() => {
+  const pool = (0, import_react12.useMemo)(() => poolsMap.get(poolId), [poolsMap, poolId]);
+  const poolData = (0, import_react12.useMemo)(() => poolsDataMap.get(poolId), [poolsDataMap, poolId]);
+  const userShares = (0, import_react12.useMemo)(() => {
     if (!pool) return toBigNumber(0);
     const balance = balancesMap.get(pool.lp_denom);
     if (!balance) return toBigNumber(0);
     return toBigNumber(balance.amount);
   }, [balancesMap, pool]);
-  const totalShares = (0, import_react11.useMemo)(() => {
+  const totalShares = (0, import_react12.useMemo)(() => {
     if (!assetsMap || !pool) return toBigNumber(0);
     const sharesAsset = assetsMap.get(pool.lp_denom);
     if (!sharesAsset) return toBigNumber(0);
     return toBigNumber((sharesAsset == null ? void 0 : sharesAsset.supply) || 0);
   }, [assetsMap, pool]);
-  const userSharesPercentage = (0, import_react11.useMemo)(() => {
+  const userSharesPercentage = (0, import_react12.useMemo)(() => {
     if (!userShares || !totalShares || totalShares.isZero()) {
       return toBigNumber(0);
     }
     return userShares.dividedBy(totalShares).multipliedBy(100).toFixed(2);
   }, [userShares, totalShares]);
-  const userReserveBase = (0, import_react11.useMemo)(() => {
+  const userReserveBase = (0, import_react12.useMemo)(() => {
     if (!pool || !userShares || !totalShares || totalShares.isZero()) {
       return toBigNumber(0);
     }
     const reserveBase = toBigNumber(pool.reserve_base);
     return userShares.dividedBy(totalShares).multipliedBy(reserveBase);
   }, [pool, userShares, totalShares]);
-  const userReserveQuote = (0, import_react11.useMemo)(() => {
+  const userReserveQuote = (0, import_react12.useMemo)(() => {
     if (!pool || !userShares || !totalShares || totalShares.isZero()) {
       return toBigNumber(0);
     }
     const reserveQuote = toBigNumber(pool.reserve_quote);
     return userShares.dividedBy(totalShares).multipliedBy(reserveQuote);
   }, [pool, userShares, totalShares]);
-  const calculateOppositeAmount = (0, import_react11.useCallback)((amount, isBase) => {
+  const calculateOppositeAmount = (0, import_react12.useCallback)((amount, isBase) => {
     if (!pool) {
       return toBigNumber(0);
     }
     return calculatePoolOppositeAmount(pool, amount, isBase);
   }, [pool]);
-  const calculateSharesFromAmounts = (0, import_react11.useCallback)((baseAmount, quoteAmount) => {
+  const calculateSharesFromAmounts = (0, import_react12.useCallback)((baseAmount, quoteAmount) => {
     if (!pool || !totalShares) {
       return toBigNumber(0);
     }
@@ -4062,11 +4117,11 @@ function useLiquidityPool(poolId) {
 }
 
 // src/hooks/useAssetsValue.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_bignumber11 = __toESM(require("bignumber.js"));
 function useAssetsValue() {
   const { assetsMap, usdPricesMap, balancesMap, isLoading: isLoadingPrices } = useAssetsContext();
-  const totalUsdValue = (0, import_react12.useCallback)((prettyBalances) => {
+  const totalUsdValue = (0, import_react13.useCallback)((prettyBalances) => {
     let usdValue = (0, import_bignumber11.default)(0);
     prettyBalances.map((denomBalance) => {
       const assetPrice = usdPricesMap.get(denomBalance.denom);
@@ -4076,7 +4131,7 @@ function useAssetsValue() {
     });
     return usdValue;
   }, [usdPricesMap]);
-  const walletTotalUsdValue = (0, import_react12.useMemo)(() => {
+  const walletTotalUsdValue = (0, import_react13.useMemo)(() => {
     let total = toBigNumber(0);
     balancesMap.forEach((balance, denom) => {
       const price = usdPricesMap.get(denom);
@@ -4087,14 +4142,14 @@ function useAssetsValue() {
     });
     return total;
   }, [balancesMap, usdPricesMap, assetsMap]);
-  const denomUsdValue = (0, import_react12.useCallback)((denom, uAmount) => {
+  const denomUsdValue = (0, import_react13.useCallback)((denom, uAmount) => {
     const price = usdPricesMap.get(denom);
     if (!price || !price.gt(0)) return toBigNumber(0);
     const asset = assetsMap.get(denom);
     if (!asset) return toBigNumber(0);
     return price.multipliedBy(uAmountToBigNumberAmount(uAmount, asset.decimals));
   }, [usdPricesMap, assetsMap]);
-  const compareValues = (0, import_react12.useCallback)((a, b) => {
+  const compareValues = (0, import_react13.useCallback)((a, b) => {
     var _a2;
     let aValue = (0, import_bignumber11.default)(0);
     const aPrice = usdPricesMap.get(a.denom);
@@ -4118,13 +4173,13 @@ function useAssetsValue() {
 }
 
 // src/hooks/useFeeTokens.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var MIN_LIQUIDITY_FOR_FEE_TOKEN = 5e10;
 function useFeeTokens() {
   const { pools, isLoading: poolsLoading } = useLiquidityPools();
   const { assetsMap, isLoading: assetsLoading } = useAssetsContext();
   const nativeDenom = getChainNativeAssetDenom();
-  const feeTokens = (0, import_react13.useMemo)(() => {
+  const feeTokens = (0, import_react14.useMemo)(() => {
     if (poolsLoading || assetsLoading) {
       return [];
     }
@@ -4154,17 +4209,17 @@ function useFeeTokens() {
 }
 
 // src/hooks/useMarkets.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_bignumber12 = __toESM(require("bignumber.js"));
 function useMarkets() {
   const { marketsMap, marketsDataMap, updateMarkets, isLoading } = useAssetsContext();
-  const markets = (0, import_react14.useMemo)(() => {
+  const markets = (0, import_react15.useMemo)(() => {
     return Array.from(marketsMap.values());
   }, [marketsMap]);
-  const marketsData = (0, import_react14.useMemo)(() => Array.from(marketsDataMap.values()), [marketsDataMap]);
-  const marketExists = (0, import_react14.useCallback)((marketId) => marketsMap.has(marketId), [marketsMap]);
-  const getMarketData = (0, import_react14.useCallback)((marketId) => marketsDataMap.get(marketId), [marketsDataMap]);
-  const getMarket = (0, import_react14.useCallback)((marketId) => marketsMap.get(marketId), [marketsMap]);
+  const marketsData = (0, import_react15.useMemo)(() => Array.from(marketsDataMap.values()), [marketsDataMap]);
+  const marketExists = (0, import_react15.useCallback)((marketId) => marketsMap.has(marketId), [marketsMap]);
+  const getMarketData = (0, import_react15.useCallback)((marketId) => marketsDataMap.get(marketId), [marketsDataMap]);
+  const getMarket = (0, import_react15.useCallback)((marketId) => marketsMap.get(marketId), [marketsMap]);
   return {
     markets,
     marketsData,
@@ -4179,9 +4234,9 @@ function useMarkets() {
 }
 function useAssetMarkets(denom) {
   const { isLoading, marketsMap, marketsDataMap } = useAssetsContext();
-  const markets = (0, import_react14.useMemo)(() => Array.from(marketsMap.values()), [marketsMap]);
-  const marketsData = (0, import_react14.useMemo)(() => Array.from(marketsDataMap.values()), [marketsDataMap]);
-  const assetMarkets = (0, import_react14.useMemo)(() => {
+  const markets = (0, import_react15.useMemo)(() => Array.from(marketsMap.values()), [marketsMap]);
+  const marketsData = (0, import_react15.useMemo)(() => Array.from(marketsDataMap.values()), [marketsDataMap]);
+  const assetMarkets = (0, import_react15.useMemo)(() => {
     const baseMatches = [];
     const quoteMatches = [];
     for (const market of markets) {
@@ -4190,7 +4245,7 @@ function useAssetMarkets(denom) {
     }
     return [...baseMatches, ...quoteMatches];
   }, [markets, denom]);
-  const assetMarketsData = (0, import_react14.useMemo)(() => {
+  const assetMarketsData = (0, import_react15.useMemo)(() => {
     const baseMatches = [];
     const quoteMatches = [];
     for (const market of marketsData) {
@@ -4199,7 +4254,7 @@ function useAssetMarkets(denom) {
     }
     return [...baseMatches, ...quoteMatches];
   }, [marketsData, denom]);
-  const asset24hTradedVolume = (0, import_react14.useMemo)(() => {
+  const asset24hTradedVolume = (0, import_react15.useMemo)(() => {
     return assetMarketsData.reduce((acc, market) => {
       if (denom === market.base) {
         return acc.plus(market.base_volume || 0);
@@ -4218,8 +4273,8 @@ function useAssetMarkets(denom) {
 }
 function useMarket(marketId) {
   const { marketsMap, marketsDataMap, isLoading, assetsMap } = useAssetsContext();
-  const market = (0, import_react14.useMemo)(() => marketsMap.get(marketId), [marketsMap, marketId]);
-  const marketSymbol = (0, import_react14.useMemo)(() => {
+  const market = (0, import_react15.useMemo)(() => marketsMap.get(marketId), [marketsMap, marketId]);
+  const marketSymbol = (0, import_react15.useMemo)(() => {
     var _a2, _b2;
     if (isLoading) return "";
     if (!market) return "";
@@ -4233,9 +4288,9 @@ function useMarket(marketId) {
     }
     return `${base}/${quote}`;
   }, [market, isLoading, assetsMap]);
-  const marketData = (0, import_react14.useMemo)(() => marketsDataMap.get(marketId), [marketsDataMap, marketId]);
-  const marketExists = (0, import_react14.useMemo)(() => !!market, [market]);
-  const volume24h = (0, import_react14.useMemo)(() => {
+  const marketData = (0, import_react15.useMemo)(() => marketsDataMap.get(marketId), [marketsDataMap, marketId]);
+  const marketExists = (0, import_react15.useMemo)(() => !!market, [market]);
+  const volume24h = (0, import_react15.useMemo)(() => {
     if (!marketData || !market) return toBigNumber(0);
     const quoteAsset = assetsMap.get(market.quote);
     if (!quoteAsset) return toBigNumber(0);
@@ -4261,27 +4316,6 @@ function useMarketsManager() {
 
 // src/hooks/useToast.tsx
 var import_react16 = require("react");
-
-// src/components/toaster.tsx
-var import_react15 = require("@chakra-ui/react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var toaster = (0, import_react15.createToaster)({
-  placement: "top-end",
-  pauseOnPageIdle: true
-});
-var Toaster = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react15.Toast.Root, { width: { md: "sm" }, children: [
-    toast.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Spinner, { size: "sm", color: "blue.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Toast.Indicator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react15.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
-      toast.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Toast.Title, { children: toast.title }),
-      toast.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Toast.Description, { children: toast.description })
-    ] }),
-    toast.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Toast.ActionTrigger, { children: toast.action.label }),
-    toast.closable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react15.Toast.CloseTrigger, {})
-  ] }) }) });
-};
-
-// src/hooks/useToast.tsx
 var useToast = () => {
   const clickableSuccess = (0, import_react16.useCallback)((title, actionFn, actionLabel, description, duration = 5e3) => {
     toaster.create({