@vechain/vechain-kit 1.8.4 → 1.9.0

package/dist/index.cjs

@@ -34,9 +34,9 @@ var md = require('react-icons/md');
 var fc = require('react-icons/fc');
 var io = require('react-icons/io');
 var ci = require('react-icons/ci');
+var ri = require('react-icons/ri');
 var vsc = require('react-icons/vsc');
 var fi = require('react-icons/fi');
-var ri = require('react-icons/ri');
 var gr = require('react-icons/gr');
 var gi = require('react-icons/gi');
 var bs = require('react-icons/bs');
@@ -4810,7 +4810,7 @@ var AddressDisplay = ({
 
 // package.json
 var package_default = {
-  version: "1.8.4"};
+  version: "1.9.0"};
 var VersionFooter = ({ ...props }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4878,9 +4878,11 @@ var StickyHeaderContainer = ({ children }) => {
         left: "0",
         w: "full",
         borderRadius: "24px 24px 0px 0px",
-        bg: isDark ? "rgb(31 31 30 / 90%)" : "rgb(255 255 255 / 69%)",
-        backdropFilter: "blur(12px)",
-        style: { WebkitBackdropFilter: "blur(12px)" },
+        bg: hasContentBelow ? isDark ? "rgba(21, 21, 21, 0.6)" : "rgba(255, 255, 255, 0.6)" : "transparent",
+        backdropFilter: hasContentBelow ? "blur(15px)" : "none",
+        style: hasContentBelow ? { WebkitBackdropFilter: "blur(15px)" } : {
+          WebkitBackdropFilter: "none"
+        },
         zIndex: 1e3,
         boxShadow: hasContentBelow ? "0px 2px 4px 1px rgb(0 0 0 / 10%)" : "none",
         transition: "box-shadow 0.2s ease-in-out",
@@ -11198,23 +11200,74 @@ var MainContent = ({ setCurrentContent, onClose }) => {
     ) }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { pt: 0, pb: "5px" })
   ] });
 };
+var ModalSettingsButton = ({
+  onClick,
+  ...props
+}) => {
+  const { smartAccount, connectedWallet, connection } = useWallet();
+  const [isFirstVisit, setIsFirstVisit] = React10.useState(false);
+  React10.useEffect(() => {
+    const hasVisited = localStorage.getItem("app-first-visit");
+    setIsFirstVisit(!hasVisited);
+  }, []);
+  const { data: upgradeRequired } = useUpgradeRequired(
+    smartAccount?.address ?? "",
+    connectedWallet?.address ?? "",
+    3
+  );
+  const showRedDot = connection.isConnectedWithPrivy && upgradeRequired || isFirstVisit;
+  const handleOnClick = () => {
+    if (isFirstVisit) {
+      localStorage.setItem("app-first-visit", "true");
+      setIsFirstVisit(false);
+    }
+    onClick();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.IconButton,
+    {
+      "aria-label": "Notifications",
+      size: "sm",
+      variant: "ghost",
+      _hover: { bg: "blackAlpha.100" },
+      _dark: { _hover: { bg: "whiteAlpha.100" } },
+      position: "absolute",
+      borderRadius: "50%",
+      left: "10px",
+      top: "10px",
+      onClick: handleOnClick,
+      icon: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(io.IoMdSettings, { fontSize: "20px" }),
+        showRedDot && /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            position: "absolute",
+            top: "-1px",
+            right: "-1px",
+            minWidth: "8px",
+            height: "8px",
+            bg: "red.500",
+            borderRadius: "full"
+          }
+        )
+      ] }),
+      ...props
+    }
+  );
+};
 var AccountMainContent = ({ setCurrentContent, wallet }) => {
   const { t } = reactI18next.useTranslation();
   const { network } = useVeChainKitConfig();
-  const { getNotifications } = useNotifications();
-  const notifications = getNotifications();
-  const hasUnreadNotifications = notifications.some((n) => !n.isRead);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ModalNotificationButton,
+        ModalSettingsButton,
         {
           onClick: () => {
             Analytics.notifications.viewed();
-            setCurrentContent("notifications");
+            setCurrentContent("settings");
           },
-          hasUnreadNotifications,
-          "data-testid": "notifications-button"
+          "data-testid": "settings-button"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11265,7 +11318,8 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
               onClick: () => {
                 setCurrentContent("profile");
               },
-              wallet
+              wallet,
+              setCurrentContent
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -11431,9 +11485,11 @@ var AccountSelector = ({
   size = "md",
   onClick,
   mt,
-  style
+  style,
+  setCurrentContent
 }) => {
   const [copied, setCopied] = React10.useState(false);
+  const { disconnect } = useWallet();
   const copyToClipboard = async () => {
     await navigator.clipboard.writeText(
       wallet?.domain ?? wallet?.address ?? ""
@@ -11443,6 +11499,11 @@ var AccountSelector = ({
       setCopied(false);
     }, 2e3);
   };
+  const handleLogout = () => {
+    Analytics.auth.trackAuth("disconnect_initiated");
+    disconnect();
+    Analytics.auth.logoutCompleted();
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.HStack,
     {
@@ -11504,6 +11565,25 @@ var AccountSelector = ({
             opacity: 0.5,
             _hover: { opacity: 0.8 }
           }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.IconButton,
+          {
+            "aria-label": "Logout",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: ri.RiLogoutBoxLine }),
+            onClick: () => setCurrentContent({
+              type: "disconnect-confirm",
+              props: {
+                onDisconnect: handleLogout,
+                onBack: () => setCurrentContent("main")
+              }
+            }),
+            variant: "ghost",
+            size: "sm",
+            opacity: 0.5,
+            _hover: { opacity: 0.8 },
+            colorScheme: "red"
+          }
         )
       ]
     }
@@ -11631,7 +11711,7 @@ var BalanceSection = ({
     }, 1500);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "full", justifyContent: "start", spacing: 2, mt, mb, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.5, children: t("Balance") }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.8, children: t("Balance") }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       react.HStack,
       {
@@ -11718,11 +11798,11 @@ var BalanceSection = ({
 };
 var QUICK_ACTIONS = [
   {
-    icon: md.MdSwapHoriz,
-    label: "Swap",
+    icon: io.IoMdApps,
+    label: "Ecosystem",
     onClick: (setCurrentContent) => {
-      Analytics.swap.opened();
-      setCurrentContent("swap-token");
+      Analytics.ecosystem.opened();
+      setCurrentContent("ecosystem");
     }
   },
   {
@@ -11744,38 +11824,13 @@ var QUICK_ACTIONS = [
       }
     }),
     isDisabled: (hasAnyBalance) => !hasAnyBalance
-  },
-  {
-    icon: ri.RiSwap3Line,
-    label: "Bridge",
-    onClick: (setCurrentContent) => {
-      Analytics.bridge.opened();
-      setCurrentContent("bridge");
-    }
-  },
-  {
-    icon: io.IoMdApps,
-    label: "Ecosystem",
-    onClick: (setCurrentContent) => {
-      Analytics.ecosystem.opened();
-      setCurrentContent("ecosystem");
-    }
-  },
-  {
-    icon: io.IoMdSettings,
-    label: "Settings",
-    onClick: (setCurrentContent) => {
-      Analytics.settings.opened("general");
-      setCurrentContent("settings");
-    }
   }
 ];
 var QuickActionButton = ({
   icon,
   label,
   onClick,
-  isDisabled,
-  showRedDot
+  isDisabled
 }) => {
   const { t } = reactI18next.useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11788,67 +11843,37 @@ var QuickActionButton = ({
       isDisabled,
       icon: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: icon, boxSize: 5, opacity: 0.9 }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { p: 0, alignItems: "baseline", spacing: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.Text,
-            {
-              fontSize: "sm",
-              fontWeight: "600",
-              "data-testid": `${label.toLowerCase()}-button-label`,
-              children: t(label, label)
-            }
-          ),
-          showRedDot && /* @__PURE__ */ jsxRuntime.jsx(
-            react.Box,
-            {
-              minWidth: "8px",
-              height: "8px",
-              bg: "red.500",
-              borderRadius: "full",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { p: 0, alignItems: "baseline", spacing: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Text,
+          {
+            fontSize: "sm",
+            fontWeight: "600",
+            "data-testid": `${label.toLowerCase()}-button-label`,
+            children: t(label, label)
+          }
+        ) })
       ] }),
       onClick
     }
   );
 };
 var QuickActionsSection = ({ mt, setCurrentContent }) => {
-  const { account, smartAccount, connectedWallet, connection } = useWallet();
+  const { account } = useWallet();
   const { hasAnyBalance } = useTotalBalance({
     address: account?.address ?? ""
   });
   const { t } = reactI18next.useTranslation();
-  const [isFirstVisit, setIsFirstVisit] = React10.useState(false);
-  React10.useEffect(() => {
-    const hasVisited = localStorage.getItem("app-first-visit");
-    setIsFirstVisit(!hasVisited);
-  }, []);
-  const { data: upgradeRequired } = useUpgradeRequired(
-    smartAccount?.address ?? "",
-    connectedWallet?.address ?? "",
-    3
-  );
-  const showRedDot = connection.isConnectedWithPrivy && upgradeRequired || isFirstVisit;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "full", mt, spacing: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.5, children: t("Tools") }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.8, children: t("Tools") }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(3, 1fr)", gap: 2, w: "full", children: QUICK_ACTIONS.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
       QuickActionButton,
       {
         icon: action.icon,
         label: action.label,
         onClick: () => {
-          if (isFirstVisit) {
-            localStorage.setItem("app-first-visit", "true");
-            setIsFirstVisit(false);
-          }
           action.onClick(setCurrentContent);
         },
-        isDisabled: action.isDisabled?.(hasAnyBalance),
-        showRedDot: showRedDot && action.label === "Settings"
+        isDisabled: action.isDisabled?.(hasAnyBalance)
       },
       action.label
     )) })
@@ -12412,7 +12437,6 @@ var SettingsContent = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           ActionButton,
           {
-            variant: "vechainKitLogout",
             style: {
               borderTopRadius: "0px"
             },
@@ -22044,19 +22068,19 @@ var VeChainKitProvider = (props) => {
                 themeVariables: {
                   "--vdk-modal-z-index": "10000",
                   "--vdk-modal-width": "22rem",
-                  "--vdk-modal-backdrop-filter": "blur(3px)",
+                  "--vdk-modal-backdrop-filter": "blur(15px)",
                   "--vdk-border-dark-source-card": `1px solid ${"#ffffff0a"}`,
                   "--vdk-border-light-source-card": `1px solid ${"#ebebeb"}`,
                   // Dark mode colors
-                  "--vdk-color-dark-primary": "transparent",
+                  "--vdk-color-dark-primary": "rgba(21, 21, 21, 0.4)",
                   "--vdk-color-dark-primary-hover": "rgba(255, 255, 255, 0.05)",
                   "--vdk-color-dark-primary-active": "rgba(255, 255, 255, 0.1)",
-                  "--vdk-color-dark-secondary": "#1f1f1e",
+                  "--vdk-color-dark-secondary": "rgba(21, 21, 21, 0.6)",
                   // Light mode colors
-                  "--vdk-color-light-primary": "#ffffff",
-                  "--vdk-color-light-primary-hover": "#f8f8f8",
-                  "--vdk-color-light-primary-active": "#f0f0f0",
-                  "--vdk-color-light-secondary": "white",
+                  "--vdk-color-light-primary": "rgba(255, 255, 255, 0.4)",
+                  "--vdk-color-light-primary-hover": "rgba(248, 248, 248, 0.5)",
+                  "--vdk-color-light-primary-active": "rgba(240, 240, 240, 0.6)",
+                  "--vdk-color-light-secondary": "rgba(255, 255, 255, 0.6)",
                   // Font settings
                   "--vdk-font-family": "var(--chakra-fonts-body)",
                   "--vdk-font-size-medium": "14px",
@@ -22089,7 +22113,8 @@ var variants = {
       overflowX: "hidden",
       maxHeight: "550px",
       borderRadius: "24px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
+      backgroundColor: props.colorMode === "dark" ? "rgba(21, 21, 21, 0.4)" : "rgba(255, 255, 255, 0.4)",
+      backdropFilter: "blur(15px)"
     },
     closeButton: {
       borderRadius: "50%"
@@ -22100,6 +22125,9 @@ var variants = {
       fontSize: "md",
       fontWeight: "700",
       textAlign: "center"
+    },
+    overlay: {
+      backgroundColor: props.colorMode === "dark" ? "#00000026" : "#00000024"
     }
   }),
   vechainKitTransactionToast: (props) => definePartsStyle({