@vechain/vechain-kit 1.5.2 → 1.5.4

package/dist/index.js

@@ -17,7 +17,7 @@ import { initReactI18next, useTranslation } from 'react-i18next';
 import { abi, Transaction } from 'thor-devkit';
 import imageCompression from 'browser-image-compression';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Interface, isAddress, namehash, ZeroAddress, ethers } from 'ethers';
+import { Interface, formatEther as formatEther$1, isAddress, namehash, ZeroAddress, parseEther as parseEther$1, ethers } from 'ethers';
 import { z } from 'zod';
 import { useAccount, createConfig, http, WagmiProvider, useConnect, useSignTypedData, useSignMessage, useDisconnect } from 'wagmi';
 import { toPrivyWalletConnector } from '@privy-io/cross-app-connect/rainbow-kit';
@@ -2702,7 +2702,14 @@ var getVeDelegateBalance = async (thor, network, address) => {
   const functionFragment2 = ERC20Interface.getFunction("balanceOf").format("json");
   const res = await thor.account(getConfig(network).veDelegateTokenContractAddress).method(JSON.parse(functionFragment2)).call(address);
   if (res.reverted) throw new Error("Reverted");
-  return res.decoded[0];
+  const original = res.decoded[0];
+  const scaled = formatEther$1(original);
+  const formatted = scaled === "0" ? "0" : humanNumber(scaled);
+  return {
+    original,
+    scaled,
+    formatted
+  };
 };
 var getVeDelegateBalanceQueryKey = (address) => [
   "VECHAIN_KIT_VE_DELEGATE_BALANCE",
@@ -3569,40 +3576,44 @@ var useBalances = ({ address = "" }) => {
     const balances = [
       {
         address: contractAddresses.vet,
-        value: Number(vetData?.balance || 0),
-        symbol: "VET"
+        value: vetData?.balance || "0",
+        symbol: "VET",
+        priceAddress: contractAddresses.vet
       },
       {
         address: contractAddresses.vtho,
-        value: Number(vetData?.energy || 0),
-        symbol: "VTHO"
+        value: vetData?.energy || "0",
+        symbol: "VTHO",
+        priceAddress: contractAddresses.vtho
       },
       {
         address: contractAddresses.b3tr,
-        value: Number(
-          formatEther(BigInt(b3trBalance?.original || "0"))
-        ),
-        symbol: "B3TR"
+        value: b3trBalance?.scaled ?? "0",
+        symbol: "B3TR",
+        priceAddress: contractAddresses.b3tr
       },
       {
         address: contractAddresses.vot3,
-        value: Number(
-          formatEther(BigInt(vot3Balance?.original || "0"))
-        ),
-        symbol: "VOT3"
+        value: vot3Balance?.scaled ?? "0",
+        symbol: "VOT3",
+        priceAddress: contractAddresses.b3tr
+        // using b3tr price for vot3
       },
       {
         address: contractAddresses.veDelegate,
-        value: Number(formatEther(BigInt(veDelegateBalance || "0"))),
-        symbol: "veDelegate"
+        value: veDelegateBalance?.scaled ?? "0",
+        symbol: "veDelegate",
+        priceAddress: contractAddresses.b3tr
+        // using b3tr price for veDelegate
       }
     ];
     customTokenBalances.forEach((token) => {
       if (token) {
         balances.push({
           address: token.address,
-          value: Number(formatEther(BigInt(token.original))),
-          symbol: token.symbol
+          value: token.scaled,
+          symbol: token.symbol,
+          priceAddress: token.address
         });
       }
     });
@@ -3611,16 +3622,17 @@ var useBalances = ({ address = "" }) => {
       { address: contractAddresses.vtho, price: vthoUsdPrice || 0 },
       { address: contractAddresses.b3tr, price: b3trUsdPrice || 0 }
     ];
-    const totalBalance = balances.reduce((acc, { address: address2, value }) => {
-      const price = prices.find((p) => p.address === address2)?.price || 0;
-      return acc + value * price;
+    const totalBalance = balances.reduce((acc, { priceAddress, value }) => {
+      const price = prices.find((p) => p.address === priceAddress)?.price || 0;
+      return acc + Number(value) * price;
     }, 0);
     const tokens = balances.reduce(
       (acc, balance) => {
         acc[balance.symbol] = {
           ...balance,
-          price: prices.find((p) => p.address === balance.address)?.price || 0,
-          usdValue: (prices.find((p) => p.address === balance.address)?.price || 0) * balance.value
+          value: balance.value,
+          price: prices.find((p) => p.address === balance.priceAddress)?.price || 0,
+          usdValue: (prices.find((p) => p.address === balance.priceAddress)?.price || 0) * Number(balance.value)
         };
         return acc;
       },
@@ -4966,7 +4978,7 @@ var AddressDisplay = ({
 // package.json
 var package_default = {
   name: "@vechain/vechain-kit",
-  version: "1.5.2",
+  version: "1.5.4",
   private: false,
   homepage: "https://github.com/vechain/vechain-kit",
   repository: "github:vechain/vechain-kit",
@@ -5375,7 +5387,7 @@ var AddressDisplayCard = ({
               children: [
                 /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "medium", children: t("Balance") }),
                 /* @__PURE__ */ jsx(Skeleton, { isLoaded: !isLoading, children: /* @__PURE__ */ jsxs(Text, { fontSize: "xs", opacity: 0.5, children: [
-                  compactFormatter2.format(displayBalance),
+                  compactFormatter2.format(Number(displayBalance)),
                   displaySymbol && ` ${displaySymbol}`
                 ] }) })
               ]
@@ -6163,7 +6175,7 @@ var DomainRequiredAlert = () => {
 var AccountMainContent = ({ setCurrentContent, wallet }) => {
   const { t } = useTranslation();
   const { network } = useVeChainKitConfig();
-  const { connection, account } = useWallet();
+  const { account } = useWallet();
   return /* @__PURE__ */ jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsx(
@@ -6177,7 +6189,7 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
           })
         }
       ),
-      /* @__PURE__ */ jsx(ModalHeader, { children: connection.isConnectedWithPrivy ? t("Account") : t("Wallet") }),
+      /* @__PURE__ */ jsx(ModalHeader, { children: t("Wallet") }),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
     /* @__PURE__ */ jsx(ModalBody, { w: "full", children: /* @__PURE__ */ jsxs(
@@ -6205,14 +6217,23 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
             }
           ),
           network?.type !== "main" && /* @__PURE__ */ jsx(
-            Tag,
+            HStack,
             {
-              size: "xl",
-              colorScheme: "orange",
-              fontSize: "xs",
-              p: 2,
-              textTransform: "capitalize",
-              children: `${network?.type} network`
+              w: "full",
+              justifyContent: "flex-start",
+              mt: "-10px",
+              mb: "-10px",
+              children: /* @__PURE__ */ jsx(
+                Tag,
+                {
+                  size: "xl",
+                  colorScheme: "orange",
+                  fontSize: "xs",
+                  p: 2,
+                  textTransform: "capitalize",
+                  children: `${network?.type} network`
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
@@ -6317,7 +6338,7 @@ var ActionButton = ({
 }) => {
   const { t } = useTranslation();
   const { colorMode } = useColorMode();
-  const baseBackgroundColor = backgroundColor ?? colorMode === "dark" ? "#ffffff05" : "#00000005";
+  const baseBackgroundColor = backgroundColor ?? colorMode === "dark" ? "#ffffff0a" : "#00000005";
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -6332,7 +6353,7 @@ var ActionButton = ({
       loadingText,
       bgColor: baseBackgroundColor,
       _hover: _hover ?? {
-        backgroundColor: colorMode === "dark" ? "#ffffff0d" : "blackAlpha.200"
+        backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
       },
       ...style,
       children: /* @__PURE__ */ jsxs(HStack, { w: "full", justify: "space-between", children: [
@@ -6554,6 +6575,7 @@ var AssetIcons = ({
 var compactFormatter3 = new Intl.NumberFormat("en-US", {
   notation: "compact",
   compactDisplay: "short",
+  minimumFractionDigits: 2,
   maximumFractionDigits: 2
 });
 var BalanceSection = ({
@@ -6644,12 +6666,12 @@ var BalanceSection = ({
         style: {
           width: "100%",
           mt: 2,
-          backgroundColor: isDark ? "#ffffff05" : "blackAlpha.50",
+          backgroundColor: isDark ? "#ffffff0a" : "blackAlpha.50",
           borderRadius: "xl",
           p: 3,
           cursor: "pointer",
           _hover: {
-            backgroundColor: isDark ? "#ffffff0d" : "blackAlpha.200"
+            backgroundColor: isDark ? "#ffffff12" : "blackAlpha.200"
           },
           justifyContent: "space-between"
         }
@@ -7780,10 +7802,10 @@ var SelectTokenContent = ({ onSelectToken, onBack }) => {
   const filteredTokens = allTokens.filter(
     ({ symbol }) => symbol.toLowerCase().includes(searchQuery.toLowerCase())
   ).sort((a, b) => {
-    if (a.numericBalance > 0 !== b.numericBalance > 0) {
-      return b.numericBalance > 0 ? 1 : -1;
+    if (Number(a.numericBalance) > 0 !== Number(b.numericBalance) > 0) {
+      return Number(b.numericBalance) > 0 ? 1 : -1;
     }
-    return b.numericBalance * b.price - a.numericBalance * a.price;
+    return Number(b.numericBalance) * b.price - Number(a.numericBalance) * a.price;
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
@@ -7835,13 +7857,13 @@ var SelectTokenContent = ({ onSelectToken, onBack }) => {
           ]
         }
       ) : /* @__PURE__ */ jsx(VStack, { spacing: 2, align: "stretch", children: filteredTokens.map((token) => {
-        const hasBalance = token.numericBalance > 0;
-        const usdValue = token.numericBalance * token.price;
+        const hasBalance = Number(token.numericBalance) > 0;
+        const usdValue = Number(token.numericBalance) * token.price;
         return /* @__PURE__ */ jsx(
           AssetButton,
           {
             symbol: token.symbol,
-            amount: token.numericBalance,
+            amount: Number(token.numericBalance),
             usdValue,
             onClick: () => onSelectToken(token),
             isDisabled: !hasBalance
@@ -7895,7 +7917,7 @@ var SendTokenContent = ({
   } = useVechainDomain$1({ addressOrDomain: toAddressOrDomain });
   const handleSetMaxAmount = () => {
     if (selectedToken) {
-      setValue("amount", selectedToken.numericBalance.toString());
+      setValue("amount", selectedToken.numericBalance);
     }
   };
   const onSubmit = async (data) => {
@@ -7909,8 +7931,8 @@ var SendTokenContent = ({
       return;
     }
     if (selectedToken) {
-      const numericAmount = parseFloat(data.amount);
-      if (numericAmount > selectedToken.numericBalance) {
+      const numericAmount = parseEther$1(data.amount);
+      if (numericAmount > parseEther$1(selectedToken.numericBalance)) {
         setError("amount", {
           type: "manual",
           message: t(`Insufficient {{symbol}} balance`, {
@@ -8096,7 +8118,9 @@ var SendTokenContent = ({
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       children: compactFormatter4.format(
-                        selectedToken.numericBalance
+                        Number(
+                          selectedToken.numericBalance
+                        )
                       )
                     }
                   )
@@ -8313,7 +8337,7 @@ var SendTokenSummaryContent = ({
             domain: account?.domain,
             imageSrc: account?.image ?? "",
             imageAlt: "From account",
-            balance: selectedToken.numericBalance,
+            balance: Number(selectedToken.numericBalance),
             tokenAddress: selectedToken.address
           }
         ),
@@ -8616,7 +8640,7 @@ var ExistingDomainsList = ({
               Tag,
               {
                 size: "sm",
-                bg: isDark ? "#ffffff05" : "whiteAlpha.100",
+                bg: isDark ? "#ffffff0a" : "whiteAlpha.100",
                 color: isDark ? "whiteAlpha.900" : "blackAlpha.600",
                 px: 3,
                 py: 1,
@@ -9358,6 +9382,7 @@ var en_default = {
   "Search dApps": "Search dApps",
   "Search for a domain": "Search for a domain",
   "Secured by": "Secured by",
+  "Select Additional Login Method": "Select Additional Login Method",
   "Select Token": "Select Token",
   "Select an app": "Select an app",
   "Select token": "Select token",
@@ -9837,6 +9862,7 @@ var de_default = {
   "Search dApps": "dApps durchsuchen",
   "Search for a domain": "Nach einer Domain suchen",
   "Secured by": "Gesichert durch",
+  "Select Additional Login Method": "Zus\xE4tzliche Anmeldemethode ausw\xE4hlen",
   "Select Token": "Token ausw\xE4hlen",
   "Select an app": "W\xE4hlen Sie eine App",
   "Select token": "Token ausw\xE4hlen",
@@ -10316,6 +10342,7 @@ var it_default = {
   "Search dApps": "Cerca dApp",
   "Search for a domain": "Cerca un dominio",
   "Secured by": "Protetto da",
+  "Select Additional Login Method": "Seleziona metodo di accesso aggiuntivo",
   "Select Token": "Seleziona Token",
   "Select an app": "Seleziona un'app",
   "Select token": "Seleziona",
@@ -10795,6 +10822,7 @@ var fr_default = {
   "Search dApps": "Rechercher des dApps",
   "Search for a domain": "Rechercher un domaine",
   "Secured by": "S\xE9curis\xE9 par",
+  "Select Additional Login Method": "S\xE9lectionner une m\xE9thode de connexion suppl\xE9mentaire",
   "Select Token": "S\xE9lectionner un jeton",
   "Select an app": "S\xE9lectionnez une application",
   "Select token": "S\xE9lectionner un jeton",
@@ -11274,6 +11302,7 @@ var es_default = {
   "Search dApps": "Buscar dApps",
   "Search for a domain": "Buscar un dominio",
   "Secured by": "Asegurado por",
+  "Select Additional Login Method": "Seleccionar M\xE9todo de Inicio de Sesi\xF3n Adicional",
   "Select Token": "Seleccionar Token",
   "Select an app": "Seleccionar una aplicaci\xF3n",
   "Select token": "Seleccionar token",
@@ -11753,6 +11782,7 @@ var zh_default = {
   "Search dApps": "\u641C\u7D22 dApps",
   "Search for a domain": "\u641C\u7D22\u57DF\u540D",
   "Secured by": "\u5B89\u5168\u4FDD\u969C",
+  "Select Additional Login Method": "\u9009\u62E9\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F",
   "Select Token": "\u9009\u62E9\u4EE3\u5E01",
   "Select an app": "\u9009\u62E9\u4E00\u4E2A\u5E94\u7528",
   "Select token": "\u9009\u62E9\u4EE3\u5E01",
@@ -12232,6 +12262,7 @@ var ja_default = {
   "Search dApps": "dApps\u3092\u691C\u7D22",
   "Search for a domain": "\u30C9\u30E1\u30A4\u30F3\u3092\u691C\u7D22",
   "Secured by": "\u306B\u3088\u3063\u3066\u30BB\u30AD\u30E5\u30EA\u30C6\u30A3\u4FDD\u8B77\u3055\u308C\u3066\u3044\u307E\u3059",
+  "Select Additional Login Method": "\u8FFD\u52A0\u306E\u30ED\u30B0\u30A4\u30F3\u65B9\u6CD5\u3092\u9078\u629E",
   "Select Token": "\u30C8\u30FC\u30AF\u30F3\u3092\u9078\u629E",
   "Select an app": "\u30A2\u30D7\u30EA\u3092\u9078\u629E",
   "Select token": "\u30C8\u30FC\u30AF\u30F3\u3092\u9078\u629E",
@@ -13153,6 +13184,7 @@ var ProfileContent = ({
       {
         onEditClick: () => setCurrentContent("account-customization"),
         address: account?.address ?? "",
+        showHeader: false,
         onLogout: () => {
           setCurrentContent?.({
             type: "disconnect-confirm",
@@ -13350,14 +13382,14 @@ var AssetsContent = ({ setCurrentContent }) => {
       value: tokens[token.symbol]?.value ?? 0,
       price: tokens[token.symbol]?.price ?? 0
     }))
-  ].sort((a, b) => b.value * b.price - a.value * a.price);
+  ].sort((a, b) => Number(b.value) * b.price - Number(a.value) * a.price);
   const filteredTokens = allTokens.filter(
     ({ symbol }) => symbol.toLowerCase().includes(searchQuery.toLowerCase())
   ).sort((a, b) => {
-    if (a.value > 0 !== b.value > 0) {
-      return b.value > 0 ? 1 : -1;
+    if (Number(a.value) > 0 !== Number(b.value) > 0) {
+      return Number(b.value) > 0 ? 1 : -1;
     }
-    return b.value * b.price - a.value * a.price;
+    return Number(b.value) * b.price - Number(a.value) * a.price;
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
@@ -13365,48 +13397,50 @@ var AssetsContent = ({ setCurrentContent }) => {
       /* @__PURE__ */ jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxs(ModalBody, { children: [
-      /* @__PURE__ */ jsxs(InputGroup, { size: "lg", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            placeholder: "Search token",
-            bg: darkMode ? "#00000038" : "gray.50",
-            borderRadius: "xl",
-            height: "56px",
-            pl: 12,
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value)
-          }
-        ),
-        /* @__PURE__ */ jsx(InputLeftElement, { h: "56px", w: "56px", pl: 4, children: /* @__PURE__ */ jsx(
-          CiSearch,
+    /* @__PURE__ */ jsxs(Container, { h: ["540px", "auto"], p: 0, children: [
+      /* @__PURE__ */ jsxs(ModalBody, { children: [
+        /* @__PURE__ */ jsxs(InputGroup, { size: "lg", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Search token",
+              bg: darkMode ? "#00000038" : "gray.50",
+              borderRadius: "xl",
+              height: "56px",
+              pl: 12,
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(InputLeftElement, { h: "56px", w: "56px", pl: 4, children: /* @__PURE__ */ jsx(
+            CiSearch,
+            {
+              color: darkMode ? "whiteAlpha.400" : "gray.400"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(VStack, { spacing: 2, align: "stretch", mt: 2, children: filteredTokens.map((token) => /* @__PURE__ */ jsx(
+          AssetButton,
           {
-            color: darkMode ? "whiteAlpha.400" : "gray.400"
-          }
-        ) })
+            symbol: token.symbol,
+            amount: Number(token.value),
+            usdValue: Number(token.value) * token.price,
+            isDisabled: Number(token.value) === 0,
+            onClick: () => handleTokenSelect(token)
+          },
+          token.address
+        )) })
       ] }),
-      /* @__PURE__ */ jsx(VStack, { spacing: 2, align: "stretch", mt: 2, children: filteredTokens.map((token) => /* @__PURE__ */ jsx(
-        AssetButton,
+      /* @__PURE__ */ jsx(ModalFooter, { children: allowCustomTokens && /* @__PURE__ */ jsx(
+        Button,
         {
-          symbol: token.symbol,
-          amount: token.value,
-          usdValue: token.value * token.price,
-          isDisabled: token.value === 0,
-          onClick: () => handleTokenSelect(token)
-        },
-        token.address
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx(ModalFooter, { children: allowCustomTokens && /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "vechainKitSecondary",
-        leftIcon: /* @__PURE__ */ jsx(Icon, { as: RiEdit2Line, boxSize: 4 }),
-        onClick: () => setCurrentContent("add-custom-token"),
-        children: t("Manage Custom Tokens")
-      }
-    ) })
+          variant: "vechainKitSecondary",
+          leftIcon: /* @__PURE__ */ jsx(Icon, { as: RiEdit2Line, boxSize: 4 }),
+          onClick: () => setCurrentContent("add-custom-token"),
+          children: t("Manage Custom Tokens")
+        }
+      ) })
+    ] })
   ] });
 };
 var ManageCustomTokenContent = ({
@@ -13863,7 +13897,7 @@ var PrivyLinkedAccounts = ({ onBack }) => {
   if (showLinkOptions) {
     return /* @__PURE__ */ jsxs(ScrollToTopWrapper, { children: [
       /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
-        /* @__PURE__ */ jsx(ModalHeader, { children: t("Add Login Method") }),
+        /* @__PURE__ */ jsx(ModalHeader, { children: t("Select Additional Login Method") }),
         /* @__PURE__ */ jsx(
           ModalBackButton,
           {
@@ -14168,7 +14202,7 @@ var PrivyLinkedAccounts = ({ onBack }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(ModalFooter, { w: "full", children: /* @__PURE__ */ jsx(
       Button,
       {
         w: "full",
@@ -14294,8 +14328,8 @@ var NotificationsContent = ({ setCurrentContent }) => {
       /* @__PURE__ */ jsx(ModalHeader, { children: isArchiveView ? t("Archived Notifications") : t("Notifications") }),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxs(Container, { maxW: "container.lg", h: ["auto", "540px"], children: [
-      /* @__PURE__ */ jsx(ModalBody, { w: "full", children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, align: "stretch", w: "full", children: [
+    /* @__PURE__ */ jsxs(Container, { h: ["540px", "auto"], p: 0, children: [
+      /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, align: "stretch", w: "full", children: [
         /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -16836,7 +16870,7 @@ var useTransferERC20 = ({
     return clausesArray;
   }, [receiverAddress, amount]);
   const handleOnSuccess = useCallback(async () => {
-    await refresh();
+    refresh();
     onSuccess?.();
   }, [onSuccess, fromAddress, queryClient]);
   const result = useSendTransaction({
@@ -16899,7 +16933,7 @@ var useTransferVET = ({
       buttonText: "Sign to continue"
     },
     onTxConfirmed: async () => {
-      await refresh();
+      refresh();
       onSuccess?.();
     },
     onTxFailedOrCancelled: async () => {
@@ -17976,12 +18010,12 @@ var variants3 = {
   })),
   mainContentButton: defineStyle(({ colorMode }) => ({
     width: "100%",
-    backgroundColor: colorMode === "dark" ? "#ffffff05" : "blackAlpha.50",
+    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
     borderRadius: "xl",
     p: 3,
     cursor: "pointer",
     _hover: {
-      backgroundColor: colorMode === "dark" ? "#ffffff0d" : "blackAlpha.200"
+      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
     }
   }))
 };