@vechain/vechain-kit 1.5.5 → 1.5.6

package/dist/index.cjs

@@ -4983,7 +4983,7 @@ var AddressDisplay = ({
 // package.json
 var package_default = {
   name: "@vechain/vechain-kit",
-  version: "1.5.5",
+  version: "1.5.6",
   private: false,
   homepage: "https://github.com/vechain/vechain-kit",
   repository: "github:vechain/vechain-kit",
@@ -5458,7 +5458,8 @@ var TransactionButtonAndStatus = ({
   txReceipt,
   isSubmitForm = false,
   buttonText,
-  isDisabled = false
+  isDisabled = false,
+  style
 }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
@@ -5467,6 +5468,10 @@ var TransactionButtonAndStatus = ({
     if (!transactionError) return null;
     return transactionError.reason || t("Something went wrong. Please try again.");
   }, [transactionError, t]);
+  const buttonBg = React10.useMemo(() => {
+    if (style?.accentColor) return `${style.accentColor} !important`;
+    return void 0;
+  }, [style?.accentColor]);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { width: "full", spacing: 4, children: [
     errorMessage && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "#da5a5a", textAlign: "center", width: "full", children: errorMessage }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5474,6 +5479,7 @@ var TransactionButtonAndStatus = ({
       {
         px: 4,
         variant: "vechainKitPrimary",
+        bg: buttonBg,
         onClick: onConfirm,
         type: isSubmitForm ? "submit" : "button",
         isLoading: isSubmitting,
@@ -5887,7 +5893,7 @@ var DappKitButton = ({ isDark, gridColumn = 2 }) => {
       isDark,
       onClick: openDappKitModal,
       icon: io5.IoWalletOutline,
-      text: gridColumn >= 2 ? t("Connect Wallet") : void 0,
+      text: gridColumn >= 2 ? t("Connect wallet") : void 0,
       rightIcon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: io.IoIosArrowForward })
     }
   ) });
@@ -6077,110 +6083,9 @@ var MainContent = ({ setCurrentContent, onClose }) => {
     /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { pt: 0, pb: "5px", children: /* @__PURE__ */ jsxRuntime.jsx(VersionFooter, {}) })
   ] });
 };
-var useFeatureAnnouncement = () => {
-  const [isVisible, setIsVisible] = React10.useState(true);
-  const CACHE_KEY = "vechain_kit_feature_announcement_closed";
-  React10.useEffect(() => {
-    const isClosed = localStorage.getItem(CACHE_KEY);
-    if (isClosed) {
-      setIsVisible(false);
-    }
-  }, []);
-  const closeAnnouncement = () => {
-    localStorage.setItem(CACHE_KEY, "true");
-    setIsVisible(false);
-  };
-  return {
-    isVisible,
-    closeAnnouncement
-  };
-};
-var FeatureAnnouncementCard = ({
-  setCurrentContent
-}) => {
-  const { t } = reactI18next.useTranslation();
-  const { isVisible, closeAnnouncement } = useFeatureAnnouncement();
-  const titleColor = react.useColorModeValue("gray.800", "whiteAlpha.900");
-  const handleOnClick = () => {
-    setCurrentContent({
-      type: "choose-name",
-      props: {
-        setCurrentContent,
-        onBack: () => setCurrentContent("main"),
-        initialContentSource: "main"
-      }
-    });
-    closeAnnouncement();
-  };
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Card,
-    {
-      w: "full",
-      variant: "featureAnnouncement",
-      overflow: "hidden",
-      mb: 4,
-      onClick: handleOnClick,
-      cursor: "pointer",
-      _hover: { opacity: 0.8 },
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { p: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", align: "flex-start", spacing: 3, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "flex-start", spacing: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.Text,
-              {
-                fontSize: "sm",
-                fontWeight: "400",
-                color: titleColor,
-                children: t("Claim your vet domain!")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Tag, { size: "sm", colorScheme: "red", children: t("New") })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", opacity: 0.5, children: t(
-            "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!"
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.IconButton,
-          {
-            size: "sm",
-            variant: "ghost",
-            colorScheme: "gray",
-            icon: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCloseCircle, {}),
-            onClick: (e) => {
-              e.stopPropagation();
-              closeAnnouncement();
-            },
-            "aria-label": t("Close announcement")
-          }
-        )
-      ] }) })
-    }
-  );
-};
-var ExchangeWarningAlert = () => {
-  const { t } = reactI18next.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "flex-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, { boxSize: 4, mt: "10px" }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { w: "full", children: t(
-      "Sending to OceanX or other exchanges may result in loss of funds."
-    ) })
-  ] }) }) });
-};
-var DomainRequiredAlert = () => {
-  const { t } = reactI18next.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "flex-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, { boxSize: 4, mt: "10px" }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { w: "full", children: t(
-      "A .vet domain is required to customize your profile. Choose an account name to get started."
-    ) })
-  ] }) }) });
-};
 var AccountMainContent = ({ setCurrentContent, wallet }) => {
   const { t } = reactI18next.useTranslation();
   const { network } = useVeChainKitConfig();
-  const { account } = useWallet();
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -6194,7 +6099,29 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
           })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: t("Wallet") }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.HStack,
+        {
+          w: "full",
+          justifyContent: "center",
+          p: 0,
+          spacing: 2,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "md", fontWeight: "bold", children: t("Wallet") }),
+            network?.type !== "main" && /* @__PURE__ */ jsxRuntime.jsx(
+              react.Tag,
+              {
+                size: "xs",
+                colorScheme: "orange",
+                fontSize: "2xs",
+                p: 1,
+                textTransform: "uppercase",
+                children: `${network?.type}`
+              }
+            )
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6205,12 +6132,6 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
         justifyContent: "flex-start",
         spacing: 6,
         children: [
-          !account?.domain && /* @__PURE__ */ jsxRuntime.jsx(
-            FeatureAnnouncementCard,
-            {
-              setCurrentContent
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             AccountSelector,
             {
@@ -6221,26 +6142,6 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
               wallet
             }
           ),
-          network?.type !== "main" && /* @__PURE__ */ jsxRuntime.jsx(
-            react.HStack,
-            {
-              w: "full",
-              justifyContent: "flex-start",
-              mt: "-10px",
-              mb: "-10px",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                react.Tag,
-                {
-                  size: "xl",
-                  colorScheme: "orange",
-                  fontSize: "xs",
-                  p: 2,
-                  textTransform: "capitalize",
-                  children: `${network?.type} network`
-                }
-              )
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             BalanceSection,
             {
@@ -6444,7 +6345,7 @@ var AccountSelector = ({
                         props: { width: 7, height: 7 }
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: size, fontWeight: "500", children: chunkRUIC653T_cjs.humanDomain(wallet?.domain ?? "", 15, 0) || chunkRUIC653T_cjs.humanAddress(wallet?.address ?? "", 6, 4) })
+                    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: size, fontWeight: "500", children: chunkRUIC653T_cjs.humanDomain(wallet?.domain ?? "", 18, 0) || chunkRUIC653T_cjs.humanAddress(wallet?.address ?? "", 6, 4) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     react.Icon,
@@ -6868,6 +6769,109 @@ var QuickActionsSection = ({ mt, setCurrentContent }) => {
     )) })
   ] });
 };
+var useFeatureAnnouncement = () => {
+  const [isVisible, setIsVisible] = React10.useState(true);
+  const CACHE_KEY = "vechain_kit_feature_announcement_closed";
+  React10.useEffect(() => {
+    const isClosed = localStorage.getItem(CACHE_KEY);
+    if (isClosed) {
+      setIsVisible(false);
+    }
+  }, []);
+  const closeAnnouncement = () => {
+    localStorage.setItem(CACHE_KEY, "true");
+    setIsVisible(false);
+  };
+  return {
+    isVisible,
+    closeAnnouncement
+  };
+};
+var FeatureAnnouncementCard = ({
+  setCurrentContent
+}) => {
+  const { t } = reactI18next.useTranslation();
+  const { isVisible, closeAnnouncement } = useFeatureAnnouncement();
+  const titleColor = react.useColorModeValue("blackAlpha.800", "whiteAlpha.800");
+  const descriptionColor = react.useColorModeValue(
+    "blackAlpha.700",
+    "whiteAlpha.700"
+  );
+  const handleOnClick = () => {
+    setCurrentContent({
+      type: "choose-name",
+      props: {
+        setCurrentContent,
+        onBack: () => setCurrentContent("main"),
+        initialContentSource: "main"
+      }
+    });
+    closeAnnouncement();
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Card,
+    {
+      w: "full",
+      variant: "featureAnnouncement",
+      overflow: "hidden",
+      onClick: handleOnClick,
+      cursor: "pointer",
+      _hover: { opacity: 0.8 },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { p: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", align: "flex-start", spacing: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "flex-start", spacing: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Text,
+              {
+                fontSize: "sm",
+                fontWeight: "400",
+                color: titleColor,
+                children: t("Claim your vet domain!")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Tag, { size: "sm", colorScheme: "red", children: t("New") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: descriptionColor, children: t(
+            "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!"
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            colorScheme: "gray",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(io5.IoCloseCircle, {}),
+            onClick: (e) => {
+              e.stopPropagation();
+              closeAnnouncement();
+            },
+            "aria-label": t("Close announcement")
+          }
+        )
+      ] }) })
+    }
+  );
+};
+var ExchangeWarningAlert = () => {
+  const { t } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, { boxSize: 4, mt: "10px" }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { w: "full", children: t(
+      "Sending to OceanX or other exchanges may result in loss of funds."
+    ) })
+  ] }) }) });
+};
+var DomainRequiredAlert = () => {
+  const { t } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, { boxSize: 4, mt: "10px" }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Text, { w: "full", children: t(
+      "A .vet domain is required to customize your profile. Choose an account name to get started."
+    ) })
+  ] }) }) });
+};
 var AccessAndSecurityContent = ({ setCurrentContent }) => {
   const { t } = reactI18next.useTranslation();
   const { exportWallet } = reactAuth.usePrivy();
@@ -9174,6 +9178,7 @@ var en_default = {
   "Confirm transaction": "Confirm transaction",
   "Connect Wallet": "Connect Wallet",
   "Connect an external wallet for easier access": "Connect an external wallet for easier access",
+  "Connect wallet": "Connect wallet",
   "Connect your Apple account for easier access": "Connect your Apple account for easier access",
   "Connect your Discord account for easier access": "Connect your Discord account for easier access",
   "Connect your Farcaster account for easier access": "Connect your Farcaster account for easier access",
@@ -9654,6 +9659,7 @@ var de_default = {
   "Confirm transaction": "Transaktion best\xE4tigen",
   "Connect Wallet": "Wallet verbinden",
   "Connect an external wallet for easier access": "Verbinden Sie eine externe Wallet f\xFCr einfacheren Zugang",
+  "Connect wallet": "Wallet verbinden",
   "Connect your Apple account for easier access": "Verbinden Sie Ihr Apple-Konto f\xFCr einfacheren Zugriff",
   "Connect your Discord account for easier access": "Verbinden Sie Ihr Discord-Konto f\xFCr einen einfacheren Zugriff",
   "Connect your Farcaster account for easier access": "Verbinden Sie Ihr Farcaster-Konto f\xFCr einfacheren Zugriff",
@@ -10134,6 +10140,7 @@ var it_default = {
   "Confirm transaction": "Conferma transazione",
   "Connect Wallet": "Collega Portafoglio",
   "Connect an external wallet for easier access": "Collega un portafoglio esterno per un accesso pi\xF9 semplice",
+  "Connect wallet": "Connetti portafoglio",
   "Connect your Apple account for easier access": "Collega il tuo account Apple per un accesso pi\xF9 facile",
   "Connect your Discord account for easier access": "Collega il tuo account Discord per accedere pi\xF9 facilmente",
   "Connect your Farcaster account for easier access": "Collega il tuo account Farcaster per un accesso pi\xF9 facile",
@@ -10614,6 +10621,7 @@ var fr_default = {
   "Confirm transaction": "Confirmer la transaction",
   "Connect Wallet": "Connecter le portefeuille",
   "Connect an external wallet for easier access": "Connectez un portefeuille externe pour un acc\xE8s plus facile",
+  "Connect wallet": "Connecter le portefeuille",
   "Connect your Apple account for easier access": "Connectez votre compte Apple pour un acc\xE8s plus facile",
   "Connect your Discord account for easier access": "Connectez votre compte Discord pour un acc\xE8s plus facile",
   "Connect your Farcaster account for easier access": "Connectez votre compte Farcaster pour un acc\xE8s plus facile",
@@ -11094,6 +11102,7 @@ var es_default = {
   "Confirm transaction": "Confirmar transacci\xF3n",
   "Connect Wallet": "Conectar Monedero",
   "Connect an external wallet for easier access": "Conectar una billetera externa para un acceso m\xE1s f\xE1cil",
+  "Connect wallet": "Conectar billetera",
   "Connect your Apple account for easier access": "Conecta tu cuenta de Apple para un acceso m\xE1s f\xE1cil",
   "Connect your Discord account for easier access": "Conecta tu cuenta de Discord para un acceso m\xE1s f\xE1cil",
   "Connect your Farcaster account for easier access": "Conecta tu cuenta de Farcaster para un acceso m\xE1s f\xE1cil",
@@ -11574,6 +11583,7 @@ var zh_default = {
   "Confirm transaction": "\u786E\u8BA4\u4EA4\u6613",
   "Connect Wallet": "\u8FDE\u63A5\u94B1\u5305",
   "Connect an external wallet for easier access": "\u8FDE\u63A5\u5916\u90E8\u94B1\u5305\u4EE5\u4FBF\u66F4\u8F7B\u677E\u8BBF\u95EE",
+  "Connect wallet": "\u8FDE\u63A5\u94B1\u5305",
   "Connect your Apple account for easier access": "\u8FDE\u63A5\u60A8\u7684 Apple \u8D26\u6237\u4EE5\u4FBF\u66F4\u8F7B\u677E\u5730\u8BBF\u95EE",
   "Connect your Discord account for easier access": "\u8FDE\u63A5\u60A8\u7684 Discord \u5E10\u53F7\u4EE5\u66F4\u8F7B\u677E\u5730\u8BBF\u95EE",
   "Connect your Farcaster account for easier access": "\u8FDE\u63A5\u60A8\u7684 Farcaster \u8D26\u6237\u4EE5\u4FBF\u66F4\u8F7B\u677E\u5730\u8BBF\u95EE",
@@ -12054,6 +12064,7 @@ var ja_default = {
   "Confirm transaction": "\u53D6\u5F15\u3092\u78BA\u8A8D",
   "Connect Wallet": "\u30A6\u30A9\u30EC\u30C3\u30C8\u3092\u63A5\u7D9A",
   "Connect an external wallet for easier access": "\u5916\u90E8\u30A6\u30A9\u30EC\u30C3\u30C8\u3092\u63A5\u7D9A\u3057\u3066\u7C21\u5358\u306B\u30A2\u30AF\u30BB\u30B9",
+  "Connect wallet": "\u30A6\u30A9\u30EC\u30C3\u30C8\u3092\u63A5\u7D9A",
   "Connect your Apple account for easier access": "Apple\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u63A5\u7D9A\u3057\u3066\u7C21\u5358\u306B\u30A2\u30AF\u30BB\u30B9",
   "Connect your Discord account for easier access": "\u7C21\u5358\u306A\u30A2\u30AF\u30BB\u30B9\u306E\u305F\u3081\u306B\u3042\u306A\u305F\u306EDiscord\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u63A5\u7D9A\u3057\u3066\u304F\u3060\u3055\u3044",
   "Connect your Farcaster account for easier access": "Farcaster\u30A2\u30AB\u30A6\u30F3\u30C8\u3092\u63A5\u7D9A\u3057\u3066\u7C21\u5358\u306B\u30A2\u30AF\u30BB\u30B9",
@@ -13184,26 +13195,34 @@ var ProfileContent = ({
       /* @__PURE__ */ jsxRuntime.jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ProfileCard,
-      {
-        onEditClick: () => setCurrentContent("account-customization"),
-        address: account?.address ?? "",
-        showHeader: false,
-        onLogout: () => {
-          setCurrentContent?.({
-            type: "disconnect-confirm",
-            props: {
-              onDisconnect: () => {
-                disconnect();
-                onLogoutSuccess?.();
-              },
-              onBack: () => setCurrentContent?.("profile")
-            }
-          });
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "full", spacing: 2, children: [
+      !account?.domain && /* @__PURE__ */ jsxRuntime.jsx(
+        FeatureAnnouncementCard,
+        {
+          setCurrentContent
         }
-      }
-    ) }),
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ProfileCard,
+        {
+          onEditClick: () => setCurrentContent("account-customization"),
+          address: account?.address ?? "",
+          showHeader: false,
+          onLogout: () => {
+            setCurrentContent?.({
+              type: "disconnect-confirm",
+              props: {
+                onDisconnect: () => {
+                  disconnect();
+                  onLogoutSuccess?.();
+                },
+                onBack: () => setCurrentContent?.("profile")
+              }
+            });
+          }
+        }
+      )
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { pt: 0 })
   ] });
 };
@@ -13273,12 +13292,71 @@ var UpgradeSmartAccountContent = ({
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 6, align: "stretch", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 10, align: "stretch", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", textAlign: "center", children: upgradeRequired ? t(
         "Your smart account needs to be upgraded to the latest version (v3)."
       ) : t(
         "Your smart account is already upgraded to this version."
       ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.HStack,
+        {
+          align: "center",
+          justifyContent: "space-evenly",
+          rounded: "md",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.Image,
+                {
+                  borderRadius: "full",
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#D23F63",
+                  fontSize: "28px",
+                  children: `v1`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: fa.FaArrowRight, color: "#3DBA67" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.Image,
+                {
+                  borderRadius: "full",
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#3DBA67",
+                  fontSize: "28px",
+                  children: `v3`
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(react.Alert, { status: "info", borderRadius: "md", children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
@@ -13304,23 +13382,6 @@ var UpgradeSmartAccountContent = ({
             ] })
           ] }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Alert, { status: "warning", borderRadius: "md", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, { as: io5.IoWarningOutline }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.AlertTitle, { fontSize: "sm", children: t("Important") }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.AlertDescription,
-            {
-              fontSize: "xs",
-              lineHeight: "17px",
-              display: "block",
-              children: t(
-                "This upgrade is necessary to continue interacting with VeChain blockchain. Please complete it now."
-              )
-            }
-          )
-        ] })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 3, w: "full", children: [
@@ -14537,7 +14598,7 @@ var DEFAULT_APPS = [
     name: "VeChain Kit",
     description: "A all-in-one library for building VeChain applications.",
     external_url: "https://vechainkit.vechain.org/",
-    logo: "https://i.ibb.co/ncysMF9/vechain-kit-logo-transparent.png",
+    logo: "https://vechain.org/wp-content/uploads/2025/02/VeChain_Icon_Quartz_300ppi.png",
     banner: "",
     screenshots: [],
     social_urls: [],
@@ -14840,7 +14901,7 @@ var TransactionModalContent = ({
         };
       case "error":
         return {
-          title: uiConfig?.title ?? t("Something went wrong"),
+          title: t("Something went wrong"),
           icon: uiConfig?.errorIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
             react.Icon,
             {
@@ -14853,7 +14914,7 @@ var TransactionModalContent = ({
         };
       case "success":
         return {
-          title: uiConfig?.title ?? t("Transaction completed!"),
+          title: t("Transaction successful!"),
           icon: uiConfig?.successIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
             react.Icon,
             {
@@ -15021,7 +15082,7 @@ var SuccessfulOperationContent = ({
   showSocialButtons = false
 }) => {
   const { t } = reactI18next.useTranslation();
-  const { network } = useVeChainKitConfig();
+  const { network, darkMode } = useVeChainKitConfig();
   const explorerUrl = chunkRUIC653T_cjs.getConfig(network.type).explorerUrl;
   const socialDescription = `${explorerUrl}/${txId}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
@@ -15035,7 +15096,7 @@ var SuccessfulOperationContent = ({
         {
           as: io.IoIosCheckmarkCircleOutline,
           fontSize: "100px",
-          color: "#22c55e"
+          color: darkMode ? "#00ff45de" : "#10ba3e"
         }
       ),
       description && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", textAlign: "center", children: description }),
@@ -16163,7 +16224,7 @@ var SuccessfulOperationContent2 = ({
   showSocialButtons = false
 }) => {
   const { t } = reactI18next.useTranslation();
-  const { network } = useVeChainKitConfig();
+  const { network, darkMode } = useVeChainKitConfig();
   const explorerUrl = chunkRUIC653T_cjs.getConfig(network.type).explorerUrl;
   const socialDescription = `${explorerUrl}/${txId}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
@@ -16188,7 +16249,7 @@ var SuccessfulOperationContent2 = ({
             {
               as: io.IoIosCheckmarkCircleOutline,
               fontSize: "100px",
-              color: "#00ff45de"
+              color: darkMode ? "#00ff45de" : "#10ba3e"
             }
           )
         }
@@ -16242,7 +16303,8 @@ var SuccessfulOperationContent2 = ({
 };
 var UpgradeSmartAccountContent2 = ({
   setCurrentContent,
-  handleClose
+  handleClose,
+  style
 }) => {
   const { t } = reactI18next.useTranslation();
   const { smartAccount, connectedWallet } = useWallet();
@@ -16293,10 +16355,69 @@ var UpgradeSmartAccountContent2 = ({
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: t("Account upgrade required") }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 6, align: "stretch", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 10, align: "stretch", justifyContent: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", textAlign: "center", children: t(
         "To continue interacting with VeChain blockchain and complete your operation, your smart account needs to be upgraded to the latest version (v3)."
       ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.HStack,
+        {
+          align: "center",
+          justifyContent: "space-evenly",
+          rounded: "md",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.Image,
+                {
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  borderRadius: "full",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#D23F63",
+                  fontSize: "28px",
+                  children: `v1`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: fa.FaArrowRight, color: "#3DBA67" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.Image,
+                {
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  borderRadius: "full",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#3DBA67",
+                  fontSize: "28px",
+                  children: `v3`
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(react.Alert, { status: "info", borderRadius: "md", children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
@@ -16322,28 +16443,12 @@ var UpgradeSmartAccountContent2 = ({
             ] })
           ] }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Alert, { status: "warning", borderRadius: "md", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.AlertIcon, { as: io5.IoWarningOutline }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.AlertTitle, { fontSize: "sm", children: t("Important") }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.AlertDescription,
-            {
-              fontSize: "xs",
-              lineHeight: "17px",
-              display: "block",
-              children: t(
-                "This upgrade is necessary to continue interacting with VeChain blockchain. Please complete it now."
-              )
-            }
-          )
-        ] })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { spacing: 3, w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(
       TransactionButtonAndStatus,
       {
+        style,
         buttonText: upgradeRequired ? t("Upgrade account") : t("Account already upgraded"),
         onConfirm: handleUpgrade,
         isTxWaitingConfirmation: isWaitingForWalletConfirmation,
@@ -16356,7 +16461,7 @@ var UpgradeSmartAccountContent2 = ({
     ) }) })
   ] });
 };
-var UpgradeSmartAccountModal = ({ isOpen, onClose }) => {
+var UpgradeSmartAccountModal = ({ isOpen, onClose, style }) => {
   const [currentContent, setCurrentContent] = React10.useState(
     "upgrade-smart-account"
   );
@@ -16376,7 +16481,8 @@ var UpgradeSmartAccountModal = ({ isOpen, onClose }) => {
         UpgradeSmartAccountContent2,
         {
           setCurrentContent,
-          handleClose: onClose
+          handleClose: onClose,
+          style
         }
       );
     }
@@ -16388,6 +16494,7 @@ var UpgradeSmartAccountModal = ({ isOpen, onClose }) => {
       onClose,
       allowExternalFocus: true,
       blockScrollOnMount: true,
+      size: style?.modalSize,
       children: renderContent()
     }
   );
@@ -16416,10 +16523,13 @@ var ModalProvider = ({ children }) => {
     []
   );
   const [isAccountModalOpen, setIsAccountModalOpen] = React10.useState(false);
-  const openAccountModal = React10.useCallback(() => {
-    setAccountModalContent("main");
-    setIsAccountModalOpen(true);
-  }, []);
+  const openAccountModal = React10.useCallback(
+    (content) => {
+      setAccountModalContent(content ?? "main");
+      setIsAccountModalOpen(true);
+    },
+    []
+  );
   const closeAccountModal = React10.useCallback(
     () => setIsAccountModalOpen(false),
     []
@@ -16443,8 +16553,12 @@ var ModalProvider = ({ children }) => {
     []
   );
   const [isUpgradeSmartAccountModalOpen, setIsUpgradeSmartAccountModalOpen] = React10.useState(false);
+  const [upgradeSmartAccountModalStyle, setUpgradeSmartAccountModalStyle] = React10.useState(void 0);
   const openUpgradeSmartAccountModal = React10.useCallback(
-    () => setIsUpgradeSmartAccountModalOpen(true),
+    (style) => {
+      setUpgradeSmartAccountModalStyle(style);
+      setIsUpgradeSmartAccountModalOpen(true);
+    },
     []
   );
   const closeUpgradeSmartAccountModal = React10.useCallback(
@@ -16495,7 +16609,8 @@ var ModalProvider = ({ children }) => {
           UpgradeSmartAccountModal,
           {
             isOpen: isUpgradeSmartAccountModalOpen,
-            onClose: closeUpgradeSmartAccountModal
+            onClose: closeUpgradeSmartAccountModal,
+            style: upgradeSmartAccountModalStyle
           }
         )
       ]
@@ -16517,7 +16632,7 @@ var useAccountModal = () => {
     closeAccountModal: close,
     isAccountModalOpen: isOpen
   } = useModal();
-  return { open, close, isOpen };
+  return { open: () => open(), close, isOpen };
 };
 var AccountModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useTransactionModal = () => {
@@ -16579,7 +16694,7 @@ var useChooseNameModal = () => {
     setAccountModalContent
   } = useModal();
   const open = () => {
-    setAccountModalContent({
+    openAccountModal({
       type: "choose-name",
       props: {
         setCurrentContent: setAccountModalContent,
@@ -16587,7 +16702,6 @@ var useChooseNameModal = () => {
         initialContentSource: "main"
       }
     });
-    openAccountModal();
   };
   const close = () => {
     closeAccountModal();
@@ -16609,13 +16723,12 @@ var useSendTokenModal = () => {
     setAccountModalContent
   } = useModal();
   const open = () => {
-    setAccountModalContent({
+    openAccountModal({
       type: "send-token",
       props: {
         setCurrentContent: setAccountModalContent
       }
     });
-    openAccountModal();
   };
   const close = () => {
     closeAccountModal();
@@ -16630,15 +16743,9 @@ var SendTokenModalProvider = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useAccessAndSecurityModal = () => {
-  const {
-    openAccountModal,
-    closeAccountModal,
-    isAccountModalOpen,
-    setAccountModalContent
-  } = useModal();
+  const { openAccountModal, closeAccountModal, isAccountModalOpen } = useModal();
   const open = () => {
-    setAccountModalContent("access-and-security");
-    openAccountModal();
+    openAccountModal("access-and-security");
   };
   const close = () => {
     closeAccountModal();
@@ -16653,15 +16760,9 @@ var AccessAndSecurityModalProvider = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useExploreEcosystemModal = () => {
-  const {
-    openAccountModal,
-    closeAccountModal,
-    isAccountModalOpen,
-    setAccountModalContent
-  } = useModal();
+  const { openAccountModal, closeAccountModal, isAccountModalOpen } = useModal();
   const open = () => {
-    setAccountModalContent("ecosystem");
-    openAccountModal();
+    openAccountModal("ecosystem");
   };
   const close = () => {
     closeAccountModal();
@@ -16676,15 +16777,9 @@ var ExploreEcosystemModalProvider = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useNotificationsModal = () => {
-  const {
-    openAccountModal,
-    closeAccountModal,
-    isAccountModalOpen,
-    setAccountModalContent
-  } = useModal();
+  const { openAccountModal, closeAccountModal, isAccountModalOpen } = useModal();
   const open = () => {
-    setAccountModalContent("notifications");
-    openAccountModal();
+    openAccountModal("notifications");
   };
   const close = () => {
     closeAccountModal();
@@ -16706,11 +16801,10 @@ var useFAQModal = () => {
     setAccountModalContent
   } = useModal();
   const open = () => {
-    setAccountModalContent({
+    openAccountModal({
       type: "faq",
       props: { onGoBack: () => setAccountModalContent("main") }
     });
-    openAccountModal();
   };
   const close = () => {
     closeAccountModal();
@@ -16723,15 +16817,9 @@ var useFAQModal = () => {
 };
 var FAQModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useAccountCustomizationModal = () => {
-  const {
-    openAccountModal,
-    closeAccountModal,
-    isAccountModalOpen,
-    setAccountModalContent
-  } = useModal();
+  const { openAccountModal, closeAccountModal, isAccountModalOpen } = useModal();
   const open = () => {
-    setAccountModalContent("account-customization");
-    openAccountModal();
+    openAccountModal("account-customization");
   };
   const close = () => {
     closeAccountModal();
@@ -16746,15 +16834,9 @@ var AccountCustomizationModalProvider = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useReceiveModal = () => {
-  const {
-    openAccountModal,
-    closeAccountModal,
-    isAccountModalOpen,
-    setAccountModalContent
-  } = useModal();
+  const { openAccountModal, closeAccountModal, isAccountModalOpen } = useModal();
   const open = () => {
-    setAccountModalContent("receive-token");
-    openAccountModal();
+    openAccountModal("receive-token");
   };
   const close = () => {
     closeAccountModal();
@@ -16835,13 +16917,13 @@ var useLoginModalContent = () => {
     ...baseConfig
   };
 };
-var useUpgradeSmartAccountModal = () => {
+var useUpgradeSmartAccountModal = (style) => {
   const {
     openUpgradeSmartAccountModal: open,
     closeUpgradeSmartAccountModal: close,
     isUpgradeSmartAccountModalOpen: isOpen
   } = useModal();
-  return { open, close, isOpen };
+  return { open: () => open(style), close, isOpen };
 };
 var UpgradeSmartAccountModalProvider = ({
   children
@@ -17303,8 +17385,8 @@ var PrivyWalletProvider = ({
         value: valueArray,
         data: dataArray,
         validAfter: 0,
-        validBefore: Math.floor(Date.now() / 1e3) + 60,
-        // e.g. 1 minute from now
+        validBefore: Math.floor(Date.now() / 1e3) + 300,
+        // e.g. 5 minutes from now
         nonce: ethers.ethers.hexlify(ethers.ethers.randomBytes(32))
       }
     };
@@ -17745,7 +17827,7 @@ var VeChainKitProvider = (props) => {
               },
               appearance: {
                 theme: darkMode ? "dark" : "light",
-                accentColor: darkMode ? "#3182CE" : "#2B6CB0",
+                accentColor: privy?.appearance.accentColor ?? (darkMode ? "#3182CE" : "#2B6CB0"),
                 loginMessage: privy?.appearance.loginMessage,
                 logo: privy?.appearance.logo
               },
@@ -17875,10 +17957,9 @@ var variants2 = {
   }),
   featureAnnouncement: (props) => definePartsStyle2({
     body: {
-      backgroundColor: props.colorMode === "dark" ? "whiteAlpha.100" : "blackAlpha.50",
+      backgroundColor: props.colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
       borderRadius: "12px",
-      border: props.colorMode === "dark" ? "1px solid #2d2d2d" : "1px solid #eaeaea",
-      color: props.colorMode === "dark" ? "whiteAlpha.900" : "gray.800"
+      color: props.colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
     },
     container: {
       borderRadius: "12px",