@bze/bze-ui-kit 0.4.1 → 0.4.2

package/dist/index.mjs

@@ -3913,9 +3913,104 @@ var useTx = (chainName, isCosmos, isIBC) => {
   };
 };
 
+// src/hooks/useValidatorLogos.ts
+import { useCallback as useCallback12, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+var KEYBASE_API_URL = "https://keybase.io/_/api/1.0/user/lookup.json";
+var LOGOS_STORAGE_KEY = "validator_logos";
+var LOGOS_TTL = 24 * 60 * 60 * 1e3;
+var useValidatorLogos = (validators) => {
+  const [logos, setLogos] = useState4({});
+  const [isLoading, setIsLoading] = useState4(false);
+  const fetchedRef = useRef2(false);
+  const validatorCountRef = useRef2(0);
+  const fetchLogos = useCallback12(async (identities) => {
+    if (identities.length === 0) return {};
+    let cached = null;
+    try {
+      const raw = typeof window !== "undefined" ? localStorage.getItem(LOGOS_STORAGE_KEY) : null;
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object" && parsed.data && (!parsed.expiry || Date.now() < parsed.expiry)) {
+          cached = parsed.data;
+        }
+      }
+    } catch (e) {
+    }
+    if (cached) {
+      const allCached = identities.every(
+        (v) => v.operatorAddress in cached
+      );
+      if (allCached) {
+        return cached;
+      }
+    }
+    const result = cached != null ? cached : {};
+    const toFetch = identities.filter((v) => !(v.operatorAddress in result));
+    if (toFetch.length === 0) return result;
+    const chunkSize = 20;
+    for (let i = 0; i < toFetch.length; i += chunkSize) {
+      const chunk = toFetch.slice(i, i + chunkSize);
+      const chunkResults = await Promise.all(
+        chunk.map(async ({ operatorAddress, identity }) => {
+          var _a2, _b2, _c, _d, _e;
+          if (!identity) {
+            return { operatorAddress, url: "" };
+          }
+          try {
+            const resp = await fetch(
+              `${KEYBASE_API_URL}?key_suffix=${encodeURIComponent(identity)}&fields=pictures`
+            );
+            const data = await resp.json();
+            const url = (_e = (_d = (_c = (_b2 = (_a2 = data == null ? void 0 : data.them) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.pictures) == null ? void 0 : _c.primary) == null ? void 0 : _d.url) != null ? _e : "";
+            return { operatorAddress, url };
+          } catch (e) {
+            return { operatorAddress, url: "" };
+          }
+        })
+      );
+      for (const { operatorAddress, url } of chunkResults) {
+        result[operatorAddress] = url;
+      }
+      if (i + chunkSize < toFetch.length) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+    }
+    try {
+      if (typeof window !== "undefined") {
+        localStorage.setItem(LOGOS_STORAGE_KEY, JSON.stringify({
+          data: result,
+          expiry: Date.now() + LOGOS_TTL
+        }));
+      }
+    } catch (e) {
+    }
+    return result;
+  }, []);
+  useEffect3(() => {
+    if (!validators || validators.length === 0) return;
+    if (fetchedRef.current && validatorCountRef.current === validators.length) return;
+    const identities = validators.map((v) => {
+      var _a2, _b2;
+      return {
+        operatorAddress: v.operator_address,
+        identity: (_b2 = (_a2 = v.description) == null ? void 0 : _a2.identity) != null ? _b2 : ""
+      };
+    });
+    setIsLoading(true);
+    fetchedRef.current = true;
+    validatorCountRef.current = validators.length;
+    fetchLogos(identities).then((result) => {
+      setLogos(result);
+    }).catch(console.error).finally(() => {
+      setIsLoading(false);
+    });
+  }, [validators, fetchLogos]);
+  return { logos, isLoading };
+};
+
 // src/components/highlight.tsx
 import { Text } from "@chakra-ui/react";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var HighlightText = (_a2) => {
   var _b2 = _a2, {
@@ -3931,14 +4026,14 @@ var HighlightText = (_a2) => {
     "highlightIntensity",
     "children"
   ]);
-  const [isHighlighted, setIsHighlighted] = useState4(false);
-  const isMountedRef = useRef2(false);
-  const timeoutRef = useRef2(void 0);
+  const [isHighlighted, setIsHighlighted] = useState5(false);
+  const isMountedRef = useRef3(false);
+  const timeoutRef = useRef3(void 0);
   const childrenString = String(children);
-  const previousValueRef = useRef2(childrenString);
+  const previousValueRef = useRef3(childrenString);
   const highlightOpacity = highlightIntensity === "subtle" ? "15" : "50";
   const boxShadowStrength = highlightIntensity === "subtle" ? "10" : "25";
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isMountedRef.current) {
       isMountedRef.current = true;
       if (highlightOnMount) {
@@ -3984,10 +4079,10 @@ var HighlightText = (_a2) => {
 // src/components/sidebar/sidebar.tsx
 import { Icon, IconButton, Portal as Portal2 } from "@chakra-ui/react";
 import { LuX } from "react-icons/lu";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Sidebar = ({ children, trigger, ariaLabel }) => {
-  const [isOpen, setIsOpen] = useState5(false);
+  const [isOpen, setIsOpen] = useState6(false);
   const handleTriggerClick = () => {
     setIsOpen(true);
   };
@@ -4111,7 +4206,7 @@ import {
 } from "@chakra-ui/react";
 import { Select, Portal as Portal3 } from "@chakra-ui/react";
 import { useTheme } from "next-themes";
-import { useState as useState6, useEffect as useEffect4, useMemo as useMemo13, useCallback as useCallback12 } from "react";
+import { useState as useState7, useEffect as useEffect5, useMemo as useMemo13, useCallback as useCallback13 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SettingsSidebarContent = ({ accentColor = "blue" }) => {
   const { setTheme, resolvedTheme } = useTheme();
@@ -4119,19 +4214,19 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
   const { settings, isLoaded, updateEndpoints, updatePreferredFeeDenom, defaultSettings } = useSettings();
   const { connectionType } = useConnectionType();
   const { feeTokens, isLoading: feeTokensLoading } = useFeeTokens();
-  const [restEndpoint, setRestEndpoint] = useState6("");
-  const [rpcEndpoint, setRpcEndpoint] = useState6("");
-  const [isValidating, setIsValidating] = useState6(false);
-  const [validationResults, setValidationResults] = useState6({});
-  const [preferredFeeDenom, setPreferredFeeDenom] = useState6(void 0);
-  useEffect4(() => {
+  const [restEndpoint, setRestEndpoint] = useState7("");
+  const [rpcEndpoint, setRpcEndpoint] = useState7("");
+  const [isValidating, setIsValidating] = useState7(false);
+  const [validationResults, setValidationResults] = useState7({});
+  const [preferredFeeDenom, setPreferredFeeDenom] = useState7(void 0);
+  useEffect5(() => {
     if (isLoaded) {
       setRestEndpoint(settings.endpoints.restEndpoint);
       setRpcEndpoint(settings.endpoints.rpcEndpoint);
       setPreferredFeeDenom(settings.preferredFeeDenom || getChainNativeAssetDenom());
     }
   }, [isLoaded, settings]);
-  const handleValidateEndpoints = useCallback12(async (rest, rpc) => {
+  const handleValidateEndpoints = useCallback13(async (rest, rpc) => {
     setIsValidating(true);
     setValidationResults({});
     try {
@@ -4151,7 +4246,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
       setTimeout(() => setValidationResults({}), 1e4);
     }
   }, []);
-  const handleSaveSettings = useCallback12(async (rest, rpc, feeDenom) => {
+  const handleSaveSettings = useCallback13(async (rest, rpc, feeDenom) => {
     setValidationResults({});
     const results = await validateEndpoints(rest, rpc);
     if (!results.isValid) {
@@ -4171,7 +4266,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
       toast.success("Success!", "Settings have been saved.");
     }
   }, []);
-  const handleResetToDefaults = useCallback12(() => {
+  const handleResetToDefaults = useCallback13(() => {
     setRestEndpoint(defaultSettings.endpoints.restEndpoint);
     setRpcEndpoint(defaultSettings.endpoints.rpcEndpoint);
     setPreferredFeeDenom(defaultSettings.preferredFeeDenom);
@@ -4204,7 +4299,7 @@ var SettingsSidebarContent = ({ accentColor = "blue" }) => {
       name: token.ticker || token.name
     }))
   }), [feeTokens]);
-  const handleFeeTokenChange = useCallback12((denom) => {
+  const handleFeeTokenChange = useCallback13((denom) => {
     setPreferredFeeDenom(denom || void 0);
   }, []);
   const hasUnsavedChanges = restEndpoint !== settings.endpoints.restEndpoint || rpcEndpoint !== settings.endpoints.rpcEndpoint || preferredFeeDenom !== settings.preferredFeeDenom;
@@ -4380,7 +4475,7 @@ import {
   VStack as VStack2
 } from "@chakra-ui/react";
 import { LuCopy, LuExternalLink, LuX as LuX2 } from "react-icons/lu";
-import { useCallback as useCallback13, useEffect as useEffect5, useMemo as useMemo14, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect6, useMemo as useMemo14, useRef as useRef4, useState as useState8 } from "react";
 import { WalletState } from "@interchain-kit/core";
 import BigNumber14 from "bignumber.js";
 import { cosmos } from "@bze/bzejs";
@@ -4401,7 +4496,7 @@ var validateAmount = (amount, coin, onError) => {
   }
 };
 var BalanceItem = ({ asset, onClick, accentColor }) => {
-  const [showSendButton, setShowSendButton] = useState7(false);
+  const [showSendButton, setShowSendButton] = useState8(false);
   const formattedBalanceAmount = useMemo14(() => {
     var _a2;
     return prettyAmount(uAmountToBigNumberAmount(asset.amount, (_a2 = asset.decimals) != null ? _a2 : 0));
@@ -4458,14 +4553,14 @@ var BalanceItem = ({ asset, onClick, accentColor }) => {
   );
 };
 var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
-  const [isLoading, setIsLoading] = useState7(false);
-  const [selectedCoin, setSelectedCoin] = useState7();
-  const [sendAmount, setSendAmount] = useState7("");
-  const [sendAmountError, setSendAmountError] = useState7("");
-  const [recipient, setRecipient] = useState7("");
-  const [recipientError, setRecipientError] = useState7("");
-  const [memo, setMemo] = useState7("");
-  const [memoError, setMemoError] = useState7("");
+  const [isLoading, setIsLoading] = useState8(false);
+  const [selectedCoin, setSelectedCoin] = useState8();
+  const [sendAmount, setSendAmount] = useState8("");
+  const [sendAmountError, setSendAmountError] = useState8("");
+  const [recipient, setRecipient] = useState8("");
+  const [recipientError, setRecipientError] = useState8("");
+  const [memo, setMemo] = useState8("");
+  const [memoError, setMemoError] = useState8("");
   const { toast } = useToast();
   const { status, address } = useChain3(getChainName());
   const { tx } = useSDKTx(getChainName());
@@ -4482,13 +4577,13 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
   const isValidForm = useMemo14(() => {
     return selectedCoin && memoError === "" && recipientError === "" && sendAmountError === "" && sendAmount !== "" && recipient !== "";
   }, [selectedCoin, memoError, recipientError, sendAmountError, sendAmount, recipient]);
-  const resetSendForm = useCallback13(() => {
+  const resetSendForm = useCallback14(() => {
     setSelectedCoin(void 0);
     setSendAmount("");
     setRecipient("");
     setMemo("");
   }, []);
-  const handleSend = useCallback13(async () => {
+  const handleSend = useCallback14(async () => {
     var _a2, _b2;
     if (!isValidForm) {
       toast.error("Can not send coins!", "Please check the input data.");
@@ -4513,11 +4608,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
     setIsLoading(false);
     onClose();
   }, [address, memo, onClose, recipient, selectedCoin, sendAmount, status]);
-  const handleCancel = useCallback13(() => {
+  const handleCancel = useCallback14(() => {
     resetSendForm();
     onClose();
   }, [onClose, resetSendForm]);
-  const onRecipientChange = useCallback13((recipient2) => {
+  const onRecipientChange = useCallback14((recipient2) => {
     setRecipient(recipient2);
     if (recipient2.length === 0) {
       setRecipientError("");
@@ -4530,11 +4625,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
       setRecipientError(validate.message);
     }
   }, []);
-  const onAmountChange = useCallback13((amount) => {
+  const onAmountChange = useCallback14((amount) => {
     setSendAmount(sanitizeNumberInput(amount));
     setSendAmountError("");
   }, []);
-  const onCoinSelectChange = useCallback13((ticker) => {
+  const onCoinSelectChange = useCallback14((ticker) => {
     if (ticker === "") return;
     const selectedCoin2 = balances.find((item) => item.ticker === ticker);
     if (selectedCoin2) {
@@ -4542,13 +4637,13 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
       validateAmount(sendAmount, selectedCoin2, setSendAmountError);
     }
   }, [sendAmount, balances]);
-  const setMaxAmount = useCallback13(() => {
+  const setMaxAmount = useCallback14(() => {
     if (!selectedCoin) return;
     const maxAmount = uAmountToBigNumberAmount(selectedCoin.amount, selectedCoin.decimals);
     onAmountChange(maxAmount.toString());
     validateAmount(maxAmount.toString(), selectedCoin, setSendAmountError);
   }, [selectedCoin, onAmountChange]);
-  const onMemoChange = useCallback13((memo2) => {
+  const onMemoChange = useCallback14((memo2) => {
     setMemo(memo2);
     if (memo2.length > 256) {
       setMemoError("Memo must be less than or equal to 256 characters");
@@ -4556,7 +4651,7 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
       setMemoError("");
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (selectedTicker !== "") {
       onCoinSelectChange(selectedTicker);
     }
@@ -4719,11 +4814,11 @@ var SendForm = ({ balances, onClose, selectedTicker, accentColor }) => {
   ] });
 };
 var WalletSidebarContent = ({ accentColor = "blue" }) => {
-  const [viewState, setViewState] = useState7("balances");
-  const [isDisconnecting, setIsDisconnecting] = useState7(false);
-  const [showCopiedTooltip, setShowCopiedTooltip] = useState7(false);
-  const [clickedBalance, setClickedBalance] = useState7("");
-  const copyButtonRef = useRef3(null);
+  const [viewState, setViewState] = useState8("balances");
+  const [isDisconnecting, setIsDisconnecting] = useState8(false);
+  const [showCopiedTooltip, setShowCopiedTooltip] = useState8(false);
+  const [clickedBalance, setClickedBalance] = useState8("");
+  const copyButtonRef = useRef4(null);
   const {
     status,
     username,
@@ -4759,15 +4854,15 @@ var WalletSidebarContent = ({ accentColor = "blue" }) => {
     setShowCopiedTooltip(true);
     setTimeout(() => setShowCopiedTooltip(false), 2e3);
   };
-  const handleCancel = useCallback13(() => {
+  const handleCancel = useCallback14(() => {
     setViewState("balances");
     setClickedBalance("");
   }, []);
-  const onBalanceClick = useCallback13((ticker) => {
+  const onBalanceClick = useCallback14((ticker) => {
     setClickedBalance(ticker);
     setViewState("send");
   }, []);
-  const handleDisconnectAll = useCallback13(async () => {
+  const handleDisconnectAll = useCallback14(async () => {
     setIsDisconnecting(true);
     try {
       console.log("Disconnected from all chains");
@@ -5219,6 +5314,7 @@ export {
   useSettings,
   useSigningClient,
   useToast,
+  useValidatorLogos,
   validateBZEBech32Address,
   validateBech32Address,
   validateEndpoints,