@vechain/vechain-kit 1.8.4 → 1.9.1

package/dist/index.d.cts

@@ -3672,12 +3672,13 @@ declare const ActionButton: ({ leftIcon, rightIcon, title, onClick, leftImage, h
 
 type Props$d = {
     wallet: Wallet;
+    setCurrentContent: React.Dispatch<React.SetStateAction<AccountModalContentTypes>>;
     size?: string;
     onClick?: () => void;
     mt?: number;
     style?: StackProps;
 };
-declare const AccountSelector: ({ wallet, size, onClick, mt, style, }: Props$d) => react_jsx_runtime.JSX.Element;
+declare const AccountSelector: ({ wallet, size, onClick, mt, style, setCurrentContent, }: Props$d) => react_jsx_runtime.JSX.Element;
 
 declare const BalanceSection: ({ mb, mt, onAssetsClick, }: {
     mb?: number;

package/dist/index.d.ts

@@ -3672,12 +3672,13 @@ declare const ActionButton: ({ leftIcon, rightIcon, title, onClick, leftImage, h
 
 type Props$d = {
     wallet: Wallet;
+    setCurrentContent: React.Dispatch<React.SetStateAction<AccountModalContentTypes>>;
     size?: string;
     onClick?: () => void;
     mt?: number;
     style?: StackProps;
 };
-declare const AccountSelector: ({ wallet, size, onClick, mt, style, }: Props$d) => react_jsx_runtime.JSX.Element;
+declare const AccountSelector: ({ wallet, size, onClick, mt, style, setCurrentContent, }: Props$d) => react_jsx_runtime.JSX.Element;
 
 declare const BalanceSection: ({ mb, mt, onAssetsClick, }: {
     mb?: number;

package/dist/index.js

@@ -31,13 +31,13 @@ import { isMobile } from 'react-device-detect';
 import { ThorClient, ProviderInternalBaseWallet, VeChainProvider, signerUtils } from '@vechain/sdk-network';
 import { ABIContract, Address, Clause } from '@vechain/sdk-core';
 import { LuMail, LuArrowDownToLine } from 'react-icons/lu';
-import { MdOutlineNavigateNext, MdSwapHoriz, MdOutlineSettingsBackupRestore, MdPhotoCamera, MdCurrencyExchange, MdPrivacyTip, MdOutlineRefresh, MdOutlineErrorOutline, MdEmail, MdGavel, MdCheck } from 'react-icons/md';
+import { MdOutlineNavigateNext, MdOutlineSettingsBackupRestore, MdPhotoCamera, MdCurrencyExchange, MdPrivacyTip, MdOutlineRefresh, MdOutlineErrorOutline, MdEmail, MdGavel, MdCheck } from 'react-icons/md';
 import { FcGoogle, FcCheckmark } from 'react-icons/fc';
-import { IoIosFingerPrint, IoIosArrowForward, IoMdApps, IoMdSettings, IoIosCheckmarkCircleOutline } from 'react-icons/io';
+import { IoIosFingerPrint, IoIosArrowForward, IoMdApps, IoIosCheckmarkCircleOutline, IoMdSettings } from 'react-icons/io';
 import { CiCircleMore, CiSearch } from 'react-icons/ci';
+import { RiLogoutBoxLine, RiEdit2Line, RiTwitterXFill } from 'react-icons/ri';
 import { VscRefresh, VscDebugDisconnect } from 'react-icons/vsc';
 import { FiSend, FiSlash, FiArrowDown, FiExternalLink } from 'react-icons/fi';
-import { RiSwap3Line, RiLogoutBoxLine, RiEdit2Line, RiTwitterXFill } from 'react-icons/ri';
 import { GrUserAdmin } from 'react-icons/gr';
 import { GiHouseKeys } from 'react-icons/gi';
 import { BsQuestionCircle, BsCheck, BsBookmarkFill, BsBookmark } from 'react-icons/bs';
@@ -4804,7 +4804,7 @@ var AddressDisplay = ({
 
 // package.json
 var package_default = {
-  version: "1.8.4"};
+  version: "1.9.1"};
 var VersionFooter = ({ ...props }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   return /* @__PURE__ */ jsxs(
@@ -4872,9 +4872,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",
@@ -4918,7 +4920,7 @@ var BaseModal = ({
   closeOnOverlayClick = true,
   blockScrollOnMount = false,
   allowExternalFocus = false,
-  backdropFilter,
+  backdropFilter = "blur(2px)",
   isCloseable = true
 }) => {
   const [isDesktop] = useMediaQuery("(min-width: 768px)");
@@ -11192,23 +11194,74 @@ var MainContent = ({ setCurrentContent, onClose }) => {
     ) }) }) : /* @__PURE__ */ jsx(ModalFooter, { pt: 0, pb: "5px" })
   ] });
 };
+var ModalSettingsButton = ({
+  onClick,
+  ...props
+}) => {
+  const { smartAccount, connectedWallet, connection } = useWallet();
+  const [isFirstVisit, setIsFirstVisit] = useState(false);
+  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__ */ jsx(
+    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__ */ jsxs(Box, { position: "relative", children: [
+        /* @__PURE__ */ jsx(IoMdSettings, { fontSize: "20px" }),
+        showRedDot && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            top: "-1px",
+            right: "-1px",
+            minWidth: "8px",
+            height: "8px",
+            bg: "red.500",
+            borderRadius: "full"
+          }
+        )
+      ] }),
+      ...props
+    }
+  );
+};
 var AccountMainContent = ({ setCurrentContent, wallet }) => {
   const { t } = useTranslation();
   const { network } = useVeChainKitConfig();
-  const { getNotifications } = useNotifications();
-  const notifications = getNotifications();
-  const hasUnreadNotifications = notifications.some((n) => !n.isRead);
   return /* @__PURE__ */ jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsx(
-        ModalNotificationButton,
+        ModalSettingsButton,
         {
           onClick: () => {
             Analytics.notifications.viewed();
-            setCurrentContent("notifications");
+            setCurrentContent("settings");
           },
-          hasUnreadNotifications,
-          "data-testid": "notifications-button"
+          "data-testid": "settings-button"
         }
       ),
       /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsxs(
@@ -11259,7 +11312,8 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
               onClick: () => {
                 setCurrentContent("profile");
               },
-              wallet
+              wallet,
+              setCurrentContent
             }
           ),
           /* @__PURE__ */ jsx(
@@ -11425,9 +11479,11 @@ var AccountSelector = ({
   size = "md",
   onClick,
   mt,
-  style
+  style,
+  setCurrentContent
 }) => {
   const [copied, setCopied] = useState(false);
+  const { disconnect } = useWallet();
   const copyToClipboard = async () => {
     await navigator.clipboard.writeText(
       wallet?.domain ?? wallet?.address ?? ""
@@ -11437,6 +11493,11 @@ var AccountSelector = ({
       setCopied(false);
     }, 2e3);
   };
+  const handleLogout = () => {
+    Analytics.auth.trackAuth("disconnect_initiated");
+    disconnect();
+    Analytics.auth.logoutCompleted();
+  };
   return /* @__PURE__ */ jsxs(
     HStack,
     {
@@ -11498,6 +11559,25 @@ var AccountSelector = ({
             opacity: 0.5,
             _hover: { opacity: 0.8 }
           }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "Logout",
+            icon: /* @__PURE__ */ jsx(Icon, { as: 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"
+          }
         )
       ]
     }
@@ -11625,7 +11705,7 @@ var BalanceSection = ({
     }, 1500);
   };
   return /* @__PURE__ */ jsxs(VStack, { w: "full", justifyContent: "start", spacing: 2, mt, mb, children: [
-    /* @__PURE__ */ jsx(Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.5, children: t("Balance") }),
+    /* @__PURE__ */ jsx(Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.8, children: t("Balance") }),
     /* @__PURE__ */ jsxs(
       HStack,
       {
@@ -11712,11 +11792,11 @@ var BalanceSection = ({
 };
 var QUICK_ACTIONS = [
   {
-    icon: MdSwapHoriz,
-    label: "Swap",
+    icon: IoMdApps,
+    label: "Ecosystem",
     onClick: (setCurrentContent) => {
-      Analytics.swap.opened();
-      setCurrentContent("swap-token");
+      Analytics.ecosystem.opened();
+      setCurrentContent("ecosystem");
     }
   },
   {
@@ -11738,38 +11818,13 @@ var QUICK_ACTIONS = [
       }
     }),
     isDisabled: (hasAnyBalance) => !hasAnyBalance
-  },
-  {
-    icon: RiSwap3Line,
-    label: "Bridge",
-    onClick: (setCurrentContent) => {
-      Analytics.bridge.opened();
-      setCurrentContent("bridge");
-    }
-  },
-  {
-    icon: IoMdApps,
-    label: "Ecosystem",
-    onClick: (setCurrentContent) => {
-      Analytics.ecosystem.opened();
-      setCurrentContent("ecosystem");
-    }
-  },
-  {
-    icon: IoMdSettings,
-    label: "Settings",
-    onClick: (setCurrentContent) => {
-      Analytics.settings.opened("general");
-      setCurrentContent("settings");
-    }
   }
 ];
 var QuickActionButton = ({
   icon,
   label,
   onClick,
-  isDisabled,
-  showRedDot
+  isDisabled
 }) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
@@ -11782,67 +11837,37 @@ var QuickActionButton = ({
       isDisabled,
       icon: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
         /* @__PURE__ */ jsx(Icon, { as: icon, boxSize: 5, opacity: 0.9 }),
-        /* @__PURE__ */ jsxs(HStack, { p: 0, alignItems: "baseline", spacing: 1, children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              fontSize: "sm",
-              fontWeight: "600",
-              "data-testid": `${label.toLowerCase()}-button-label`,
-              children: t(label, label)
-            }
-          ),
-          showRedDot && /* @__PURE__ */ jsx(
-            Box,
-            {
-              minWidth: "8px",
-              height: "8px",
-              bg: "red.500",
-              borderRadius: "full",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx(HStack, { p: 0, alignItems: "baseline", spacing: 1, children: /* @__PURE__ */ jsx(
+          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 } = useTranslation();
-  const [isFirstVisit, setIsFirstVisit] = useState(false);
-  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__ */ jsxs(VStack, { w: "full", mt, spacing: 4, children: [
-    /* @__PURE__ */ jsx(Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.5, children: t("Tools") }),
+    /* @__PURE__ */ jsx(Heading, { size: "xs", fontWeight: "500", w: "full", opacity: 0.8, children: t("Tools") }),
     /* @__PURE__ */ jsx(Grid, { templateColumns: "repeat(3, 1fr)", gap: 2, w: "full", children: QUICK_ACTIONS.map((action) => /* @__PURE__ */ 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
     )) })
@@ -12406,7 +12431,6 @@ var SettingsContent = ({
         /* @__PURE__ */ jsx(
           ActionButton,
           {
-            variant: "vechainKitLogout",
             style: {
               borderTopRadius: "0px"
             },
@@ -22038,19 +22062,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",
@@ -22083,7 +22107,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%"
@@ -22094,6 +22119,9 @@ var variants = {
       fontSize: "md",
       fontWeight: "700",
       textAlign: "center"
+    },
+    overlay: {
+      backgroundColor: props.colorMode === "dark" ? "#00000026" : "#00000024"
     }
   }),
   vechainKitTransactionToast: (props) => definePartsStyle({