@vechain/vechain-kit 1.5.4 → 1.5.6

package/dist/index.js

@@ -22,10 +22,10 @@ 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';
 import { isMobile } from 'react-device-detect';
-import { createMultiStyleConfigHelpers, defineStyle, defineStyleConfig, extendTheme, createStandaloneToast, IconButton, VStack, Text, InputGroup, InputLeftElement, Icon, Input, InputRightElement, HStack, Link, Box, useMediaQuery, Modal, ModalOverlay, ModalContent, Button, Image, Skeleton, Spinner, useDisclosure, GridItem, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, useColorModeValue, Card, CardBody, Tag, Alert, AlertIcon, useColorMode, Heading, Tabs, TabList, Tab, TabPanels, TabPanel, Grid, Divider, FormControl, Center, Container, Select, FormLabel, Textarea, AlertTitle, AlertDescription, Popover, PopoverTrigger, PopoverContent, PopoverBody, Circle, CardFooter, PinInput, PinInputField, Stack, Accordion, AccordionItem, AccordionButton, AccordionPanel, List, ListItem, ChakraProvider, ColorModeScript, Flex } from '@chakra-ui/react';
+import { createMultiStyleConfigHelpers, defineStyle, defineStyleConfig, extendTheme, createStandaloneToast, IconButton, VStack, Text, InputGroup, InputLeftElement, Icon, Input, InputRightElement, HStack, Link, Box, useMediaQuery, Modal, ModalOverlay, ModalContent, Button, Image, Skeleton, Spinner, useDisclosure, GridItem, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tag, useColorMode, Heading, useColorModeValue, Tabs, TabList, Tab, TabPanels, TabPanel, Grid, Card, CardBody, Alert, AlertIcon, Divider, FormControl, Center, Container, Select, FormLabel, Textarea, Circle, AlertTitle, AlertDescription, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, PinInput, PinInputField, Stack, Accordion, AccordionItem, AccordionButton, AccordionPanel, List, ListItem, ChakraProvider, ColorModeScript, Flex } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
-import { IoChevronBack, IoCheckmarkOutline, IoCopyOutline, IoWalletOutline, IoCloseCircle, IoShieldOutline, IoOpenOutline, IoWarningOutline, IoTrashBin, IoChevronUp, IoChevronDown, IoCloseOutline } from 'react-icons/io5';
-import { FaRegAddressCard, FaExternalLinkAlt, FaGlobe, FaEnvelope, FaTelegramPlane, FaChevronDown, FaEdit, FaGoogle, FaTwitter, FaPhone, FaSpotify, FaApple, FaInstagram, FaTiktok, FaGithub, FaLinkedin, FaTelegram, FaDiscord as FaDiscord$1, FaWallet, FaPlus } from 'react-icons/fa';
+import { IoChevronBack, IoCheckmarkOutline, IoCopyOutline, IoWalletOutline, IoCloseCircle, IoShieldOutline, IoOpenOutline, IoTrashBin, IoChevronUp, IoChevronDown, IoCloseOutline } from 'react-icons/io5';
+import { FaRegAddressCard, FaExternalLinkAlt, FaGlobe, FaEnvelope, FaArrowRight, FaTelegramPlane, FaChevronDown, FaEdit, FaGoogle, FaTwitter, FaPhone, FaSpotify, FaApple, FaInstagram, FaTiktok, FaGithub, FaLinkedin, FaTelegram, FaDiscord as FaDiscord$1, FaWallet, FaPlus } from 'react-icons/fa';
 import { HiOutlineWallet, HiOutlineShieldCheck } from 'react-icons/hi2';
 import { BsQuestionCircle, BsBookmarkFill, BsBookmark } from 'react-icons/bs';
 import { LuMail, LuArrowDownToLine } from 'react-icons/lu';
@@ -4978,7 +4978,7 @@ var AddressDisplay = ({
 // package.json
 var package_default = {
   name: "@vechain/vechain-kit",
-  version: "1.5.4",
+  version: "1.5.6",
   private: false,
   homepage: "https://github.com/vechain/vechain-kit",
   repository: "github:vechain/vechain-kit",
@@ -5453,7 +5453,8 @@ var TransactionButtonAndStatus = ({
   txReceipt,
   isSubmitForm = false,
   buttonText,
-  isDisabled = false
+  isDisabled = false,
+  style
 }) => {
   const { t } = useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
@@ -5462,6 +5463,10 @@ var TransactionButtonAndStatus = ({
     if (!transactionError) return null;
     return transactionError.reason || t("Something went wrong. Please try again.");
   }, [transactionError, t]);
+  const buttonBg = useMemo(() => {
+    if (style?.accentColor) return `${style.accentColor} !important`;
+    return void 0;
+  }, [style?.accentColor]);
   return /* @__PURE__ */ jsxs(VStack, { width: "full", spacing: 4, children: [
     errorMessage && /* @__PURE__ */ jsx(Text, { color: "#da5a5a", textAlign: "center", width: "full", children: errorMessage }),
     /* @__PURE__ */ jsx(
@@ -5469,6 +5474,7 @@ var TransactionButtonAndStatus = ({
       {
         px: 4,
         variant: "vechainKitPrimary",
+        bg: buttonBg,
         onClick: onConfirm,
         type: isSubmitForm ? "submit" : "button",
         isLoading: isSubmitting,
@@ -5882,7 +5888,7 @@ var DappKitButton = ({ isDark, gridColumn = 2 }) => {
       isDark,
       onClick: openDappKitModal,
       icon: IoWalletOutline,
-      text: gridColumn >= 2 ? t("Connect Wallet") : void 0,
+      text: gridColumn >= 2 ? t("Connect wallet") : void 0,
       rightIcon: /* @__PURE__ */ jsx(Icon, { as: IoIosArrowForward })
     }
   ) });
@@ -6072,110 +6078,9 @@ var MainContent = ({ setCurrentContent, onClose }) => {
     /* @__PURE__ */ jsx(ModalFooter, { pt: 0, pb: "5px", children: /* @__PURE__ */ jsx(VersionFooter, {}) })
   ] });
 };
-var useFeatureAnnouncement = () => {
-  const [isVisible, setIsVisible] = useState(true);
-  const CACHE_KEY = "vechain_kit_feature_announcement_closed";
-  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 } = useTranslation();
-  const { isVisible, closeAnnouncement } = useFeatureAnnouncement();
-  const titleColor = 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__ */ jsx(
-    Card,
-    {
-      w: "full",
-      variant: "featureAnnouncement",
-      overflow: "hidden",
-      mb: 4,
-      onClick: handleOnClick,
-      cursor: "pointer",
-      _hover: { opacity: 0.8 },
-      children: /* @__PURE__ */ jsx(CardBody, { p: 4, children: /* @__PURE__ */ jsxs(HStack, { justify: "space-between", align: "flex-start", spacing: 3, children: [
-        /* @__PURE__ */ jsxs(VStack, { align: "flex-start", spacing: 1, children: [
-          /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                fontSize: "sm",
-                fontWeight: "400",
-                color: titleColor,
-                children: t("Claim your vet domain!")
-              }
-            ),
-            /* @__PURE__ */ jsx(Tag, { size: "sm", colorScheme: "red", children: t("New") })
-          ] }),
-          /* @__PURE__ */ jsx(Text, { fontSize: "xs", opacity: 0.5, children: t(
-            "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!"
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "sm",
-            variant: "ghost",
-            colorScheme: "gray",
-            icon: /* @__PURE__ */ jsx(IoCloseCircle, {}),
-            onClick: (e) => {
-              e.stopPropagation();
-              closeAnnouncement();
-            },
-            "aria-label": t("Close announcement")
-          }
-        )
-      ] }) })
-    }
-  );
-};
-var ExchangeWarningAlert = () => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsx(VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "flex-start", children: [
-    /* @__PURE__ */ jsx(AlertIcon, { boxSize: 4, mt: "10px" }),
-    /* @__PURE__ */ jsx(Text, { w: "full", children: t(
-      "Sending to OceanX or other exchanges may result in loss of funds."
-    ) })
-  ] }) }) });
-};
-var DomainRequiredAlert = () => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsx(VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "flex-start", children: [
-    /* @__PURE__ */ jsx(AlertIcon, { boxSize: 4, mt: "10px" }),
-    /* @__PURE__ */ jsx(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 } = useTranslation();
   const { network } = useVeChainKitConfig();
-  const { account } = useWallet();
   return /* @__PURE__ */ jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsx(
@@ -6189,7 +6094,29 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
           })
         }
       ),
-      /* @__PURE__ */ jsx(ModalHeader, { children: t("Wallet") }),
+      /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          w: "full",
+          justifyContent: "center",
+          p: 0,
+          spacing: 2,
+          children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "md", fontWeight: "bold", children: t("Wallet") }),
+            network?.type !== "main" && /* @__PURE__ */ jsx(
+              Tag,
+              {
+                size: "xs",
+                colorScheme: "orange",
+                fontSize: "2xs",
+                p: 1,
+                textTransform: "uppercase",
+                children: `${network?.type}`
+              }
+            )
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
     /* @__PURE__ */ jsx(ModalBody, { w: "full", children: /* @__PURE__ */ jsxs(
@@ -6200,12 +6127,6 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
         justifyContent: "flex-start",
         spacing: 6,
         children: [
-          !account?.domain && /* @__PURE__ */ jsx(
-            FeatureAnnouncementCard,
-            {
-              setCurrentContent
-            }
-          ),
           /* @__PURE__ */ jsx(
             AccountSelector,
             {
@@ -6216,26 +6137,6 @@ var AccountMainContent = ({ setCurrentContent, wallet }) => {
               wallet
             }
           ),
-          network?.type !== "main" && /* @__PURE__ */ jsx(
-            HStack,
-            {
-              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(
             BalanceSection,
             {
@@ -6439,7 +6340,7 @@ var AccountSelector = ({
                         props: { width: 7, height: 7 }
                       }
                     ),
-                    /* @__PURE__ */ jsx(Text, { fontSize: size, fontWeight: "500", children: humanDomain(wallet?.domain ?? "", 15, 0) || humanAddress(wallet?.address ?? "", 6, 4) })
+                    /* @__PURE__ */ jsx(Text, { fontSize: size, fontWeight: "500", children: humanDomain(wallet?.domain ?? "", 18, 0) || humanAddress(wallet?.address ?? "", 6, 4) })
                   ] }),
                   /* @__PURE__ */ jsx(
                     Icon,
@@ -6863,6 +6764,109 @@ var QuickActionsSection = ({ mt, setCurrentContent }) => {
     )) })
   ] });
 };
+var useFeatureAnnouncement = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const CACHE_KEY = "vechain_kit_feature_announcement_closed";
+  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 } = useTranslation();
+  const { isVisible, closeAnnouncement } = useFeatureAnnouncement();
+  const titleColor = useColorModeValue("blackAlpha.800", "whiteAlpha.800");
+  const descriptionColor = 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__ */ jsx(
+    Card,
+    {
+      w: "full",
+      variant: "featureAnnouncement",
+      overflow: "hidden",
+      onClick: handleOnClick,
+      cursor: "pointer",
+      _hover: { opacity: 0.8 },
+      children: /* @__PURE__ */ jsx(CardBody, { p: 4, children: /* @__PURE__ */ jsxs(HStack, { justify: "space-between", align: "flex-start", spacing: 3, children: [
+        /* @__PURE__ */ jsxs(VStack, { align: "flex-start", spacing: 1, children: [
+          /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fontSize: "sm",
+                fontWeight: "400",
+                color: titleColor,
+                children: t("Claim your vet domain!")
+              }
+            ),
+            /* @__PURE__ */ jsx(Tag, { size: "sm", colorScheme: "red", children: t("New") })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: descriptionColor, children: t(
+            "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!"
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            colorScheme: "gray",
+            icon: /* @__PURE__ */ jsx(IoCloseCircle, {}),
+            onClick: (e) => {
+              e.stopPropagation();
+              closeAnnouncement();
+            },
+            "aria-label": t("Close announcement")
+          }
+        )
+      ] }) })
+    }
+  );
+};
+var ExchangeWarningAlert = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsx(VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "flex-start", children: [
+    /* @__PURE__ */ jsx(AlertIcon, { boxSize: 4, mt: "10px" }),
+    /* @__PURE__ */ jsx(Text, { w: "full", children: t(
+      "Sending to OceanX or other exchanges may result in loss of funds."
+    ) })
+  ] }) }) });
+};
+var DomainRequiredAlert = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Alert, { status: "warning", fontSize: "xs", borderRadius: "xl", p: 2, children: /* @__PURE__ */ jsx(VStack, { spacing: 1, align: "stretch", w: "full", children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "flex-start", children: [
+    /* @__PURE__ */ jsx(AlertIcon, { boxSize: 4, mt: "10px" }),
+    /* @__PURE__ */ jsx(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 } = useTranslation();
   const { exportWallet } = usePrivy();
@@ -9169,6 +9173,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",
@@ -9649,6 +9654,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",
@@ -10129,6 +10135,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",
@@ -10609,6 +10616,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",
@@ -11089,6 +11097,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",
@@ -11569,6 +11578,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",
@@ -12049,6 +12059,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",
@@ -13179,26 +13190,34 @@ var ProfileContent = ({
       /* @__PURE__ */ jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsx(ModalBody, { w: "full", children: /* @__PURE__ */ jsx(
-      ProfileCard,
-      {
-        onEditClick: () => setCurrentContent("account-customization"),
-        address: account?.address ?? "",
-        showHeader: false,
-        onLogout: () => {
-          setCurrentContent?.({
-            type: "disconnect-confirm",
-            props: {
-              onDisconnect: () => {
-                disconnect();
-                onLogoutSuccess?.();
-              },
-              onBack: () => setCurrentContent?.("profile")
-            }
-          });
+    /* @__PURE__ */ jsx(ModalBody, { w: "full", children: /* @__PURE__ */ jsxs(VStack, { w: "full", spacing: 2, children: [
+      !account?.domain && /* @__PURE__ */ jsx(
+        FeatureAnnouncementCard,
+        {
+          setCurrentContent
         }
-      }
-    ) }),
+      ),
+      /* @__PURE__ */ jsx(
+        ProfileCard,
+        {
+          onEditClick: () => setCurrentContent("account-customization"),
+          address: account?.address ?? "",
+          showHeader: false,
+          onLogout: () => {
+            setCurrentContent?.({
+              type: "disconnect-confirm",
+              props: {
+                onDisconnect: () => {
+                  disconnect();
+                  onLogoutSuccess?.();
+                },
+                onBack: () => setCurrentContent?.("profile")
+              }
+            });
+          }
+        }
+      )
+    ] }) }),
     /* @__PURE__ */ jsx(ModalFooter, { pt: 0 })
   ] });
 };
@@ -13268,12 +13287,71 @@ var UpgradeSmartAccountContent = ({
       ),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 6, align: "stretch", children: [
+    /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 10, align: "stretch", children: [
       /* @__PURE__ */ jsx(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__ */ jsxs(
+        HStack,
+        {
+          align: "center",
+          justifyContent: "space-evenly",
+          rounded: "md",
+          children: [
+            /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsx(Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  borderRadius: "full",
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#D23F63",
+                  fontSize: "28px",
+                  children: `v1`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Icon, { as: FaArrowRight, color: "#3DBA67" }),
+            /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsx(Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  borderRadius: "full",
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#3DBA67",
+                  fontSize: "28px",
+                  children: `v3`
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs(Alert, { status: "info", borderRadius: "md", children: [
         /* @__PURE__ */ jsx(AlertIcon, {}),
         /* @__PURE__ */ jsxs(Box, { children: [
@@ -13299,23 +13377,6 @@ var UpgradeSmartAccountContent = ({
             ] })
           ] }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs(Alert, { status: "warning", borderRadius: "md", children: [
-        /* @__PURE__ */ jsx(AlertIcon, { as: IoWarningOutline }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(AlertTitle, { fontSize: "sm", children: t("Important") }),
-          /* @__PURE__ */ jsx(
-            AlertDescription,
-            {
-              fontSize: "xs",
-              lineHeight: "17px",
-              display: "block",
-              children: t(
-                "This upgrade is necessary to continue interacting with VeChain blockchain. Please complete it now."
-              )
-            }
-          )
-        ] })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(ModalFooter, { justifyContent: "center", children: /* @__PURE__ */ jsxs(VStack, { spacing: 3, w: "full", children: [
@@ -14532,7 +14593,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: [],
@@ -14835,7 +14896,7 @@ var TransactionModalContent = ({
         };
       case "error":
         return {
-          title: uiConfig?.title ?? t("Something went wrong"),
+          title: t("Something went wrong"),
           icon: uiConfig?.errorIcon ?? /* @__PURE__ */ jsx(
             Icon,
             {
@@ -14848,7 +14909,7 @@ var TransactionModalContent = ({
         };
       case "success":
         return {
-          title: uiConfig?.title ?? t("Transaction completed!"),
+          title: t("Transaction successful!"),
           icon: uiConfig?.successIcon ?? /* @__PURE__ */ jsx(
             Icon,
             {
@@ -15016,7 +15077,7 @@ var SuccessfulOperationContent = ({
   showSocialButtons = false
 }) => {
   const { t } = useTranslation();
-  const { network } = useVeChainKitConfig();
+  const { network, darkMode } = useVeChainKitConfig();
   const explorerUrl = getConfig(network.type).explorerUrl;
   const socialDescription = `${explorerUrl}/${txId}`;
   return /* @__PURE__ */ jsxs(Box, { children: [
@@ -15030,7 +15091,7 @@ var SuccessfulOperationContent = ({
         {
           as: IoIosCheckmarkCircleOutline,
           fontSize: "100px",
-          color: "#22c55e"
+          color: darkMode ? "#00ff45de" : "#10ba3e"
         }
       ),
       description && /* @__PURE__ */ jsx(Text, { fontSize: "sm", textAlign: "center", children: description }),
@@ -16158,7 +16219,7 @@ var SuccessfulOperationContent2 = ({
   showSocialButtons = false
 }) => {
   const { t } = useTranslation();
-  const { network } = useVeChainKitConfig();
+  const { network, darkMode } = useVeChainKitConfig();
   const explorerUrl = getConfig(network.type).explorerUrl;
   const socialDescription = `${explorerUrl}/${txId}`;
   return /* @__PURE__ */ jsxs(Box, { children: [
@@ -16183,7 +16244,7 @@ var SuccessfulOperationContent2 = ({
             {
               as: IoIosCheckmarkCircleOutline,
               fontSize: "100px",
-              color: "#00ff45de"
+              color: darkMode ? "#00ff45de" : "#10ba3e"
             }
           )
         }
@@ -16237,7 +16298,8 @@ var SuccessfulOperationContent2 = ({
 };
 var UpgradeSmartAccountContent2 = ({
   setCurrentContent,
-  handleClose
+  handleClose,
+  style
 }) => {
   const { t } = useTranslation();
   const { smartAccount, connectedWallet } = useWallet();
@@ -16288,10 +16350,69 @@ var UpgradeSmartAccountContent2 = ({
       /* @__PURE__ */ jsx(ModalHeader, { children: t("Account upgrade required") }),
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 6, align: "stretch", children: [
+    /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 10, align: "stretch", justifyContent: "center", children: [
       /* @__PURE__ */ jsx(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__ */ jsxs(
+        HStack,
+        {
+          align: "center",
+          justifyContent: "space-evenly",
+          rounded: "md",
+          children: [
+            /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsx(Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  borderRadius: "full",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#D23F63",
+                  fontSize: "28px",
+                  children: `v1`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Icon, { as: FaArrowRight, color: "#3DBA67" }),
+            /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-block", children: [
+              /* @__PURE__ */ jsx(Circle, { size: "60px", bg: "gray.200", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: smartAccount?.image,
+                  alt: t("Profile Picture"),
+                  w: "100%",
+                  h: "100%",
+                  borderRadius: "full",
+                  objectFit: "cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  position: "absolute",
+                  top: "-5",
+                  right: "-5",
+                  color: "#3DBA67",
+                  fontSize: "28px",
+                  children: `v3`
+                }
+              )
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs(Alert, { status: "info", borderRadius: "md", children: [
         /* @__PURE__ */ jsx(AlertIcon, {}),
         /* @__PURE__ */ jsxs(Box, { children: [
@@ -16317,28 +16438,12 @@ var UpgradeSmartAccountContent2 = ({
             ] })
           ] }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs(Alert, { status: "warning", borderRadius: "md", children: [
-        /* @__PURE__ */ jsx(AlertIcon, { as: IoWarningOutline }),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(AlertTitle, { fontSize: "sm", children: t("Important") }),
-          /* @__PURE__ */ jsx(
-            AlertDescription,
-            {
-              fontSize: "xs",
-              lineHeight: "17px",
-              display: "block",
-              children: t(
-                "This upgrade is necessary to continue interacting with VeChain blockchain. Please complete it now."
-              )
-            }
-          )
-        ] })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(ModalFooter, { justifyContent: "center", children: /* @__PURE__ */ jsx(VStack, { spacing: 3, w: "full", children: /* @__PURE__ */ jsx(
       TransactionButtonAndStatus,
       {
+        style,
         buttonText: upgradeRequired ? t("Upgrade account") : t("Account already upgraded"),
         onConfirm: handleUpgrade,
         isTxWaitingConfirmation: isWaitingForWalletConfirmation,
@@ -16351,7 +16456,7 @@ var UpgradeSmartAccountContent2 = ({
     ) }) })
   ] });
 };
-var UpgradeSmartAccountModal = ({ isOpen, onClose }) => {
+var UpgradeSmartAccountModal = ({ isOpen, onClose, style }) => {
   const [currentContent, setCurrentContent] = useState(
     "upgrade-smart-account"
   );
@@ -16371,7 +16476,8 @@ var UpgradeSmartAccountModal = ({ isOpen, onClose }) => {
         UpgradeSmartAccountContent2,
         {
           setCurrentContent,
-          handleClose: onClose
+          handleClose: onClose,
+          style
         }
       );
     }
@@ -16383,6 +16489,7 @@ var UpgradeSmartAccountModal = ({ isOpen, onClose }) => {
       onClose,
       allowExternalFocus: true,
       blockScrollOnMount: true,
+      size: style?.modalSize,
       children: renderContent()
     }
   );
@@ -16411,10 +16518,13 @@ var ModalProvider = ({ children }) => {
     []
   );
   const [isAccountModalOpen, setIsAccountModalOpen] = useState(false);
-  const openAccountModal = useCallback(() => {
-    setAccountModalContent("main");
-    setIsAccountModalOpen(true);
-  }, []);
+  const openAccountModal = useCallback(
+    (content) => {
+      setAccountModalContent(content ?? "main");
+      setIsAccountModalOpen(true);
+    },
+    []
+  );
   const closeAccountModal = useCallback(
     () => setIsAccountModalOpen(false),
     []
@@ -16438,8 +16548,12 @@ var ModalProvider = ({ children }) => {
     []
   );
   const [isUpgradeSmartAccountModalOpen, setIsUpgradeSmartAccountModalOpen] = useState(false);
+  const [upgradeSmartAccountModalStyle, setUpgradeSmartAccountModalStyle] = useState(void 0);
   const openUpgradeSmartAccountModal = useCallback(
-    () => setIsUpgradeSmartAccountModalOpen(true),
+    (style) => {
+      setUpgradeSmartAccountModalStyle(style);
+      setIsUpgradeSmartAccountModalOpen(true);
+    },
     []
   );
   const closeUpgradeSmartAccountModal = useCallback(
@@ -16490,7 +16604,8 @@ var ModalProvider = ({ children }) => {
           UpgradeSmartAccountModal,
           {
             isOpen: isUpgradeSmartAccountModalOpen,
-            onClose: closeUpgradeSmartAccountModal
+            onClose: closeUpgradeSmartAccountModal,
+            style: upgradeSmartAccountModalStyle
           }
         )
       ]
@@ -16512,7 +16627,7 @@ var useAccountModal = () => {
     closeAccountModal: close,
     isAccountModalOpen: isOpen
   } = useModal();
-  return { open, close, isOpen };
+  return { open: () => open(), close, isOpen };
 };
 var AccountModalProvider = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
 var useTransactionModal = () => {
@@ -16574,7 +16689,7 @@ var useChooseNameModal = () => {
     setAccountModalContent
   } = useModal();
   const open = () => {
-    setAccountModalContent({
+    openAccountModal({
       type: "choose-name",
       props: {
         setCurrentContent: setAccountModalContent,
@@ -16582,7 +16697,6 @@ var useChooseNameModal = () => {
         initialContentSource: "main"
       }
     });
-    openAccountModal();
   };
   const close = () => {
     closeAccountModal();
@@ -16604,13 +16718,12 @@ var useSendTokenModal = () => {
     setAccountModalContent
   } = useModal();
   const open = () => {
-    setAccountModalContent({
+    openAccountModal({
       type: "send-token",
       props: {
         setCurrentContent: setAccountModalContent
       }
     });
-    openAccountModal();
   };
   const close = () => {
     closeAccountModal();
@@ -16625,15 +16738,9 @@ var SendTokenModalProvider = ({
   children
 }) => /* @__PURE__ */ jsx(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();
@@ -16648,15 +16755,9 @@ var AccessAndSecurityModalProvider = ({
   children
 }) => /* @__PURE__ */ jsx(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();
@@ -16671,15 +16772,9 @@ var ExploreEcosystemModalProvider = ({
   children
 }) => /* @__PURE__ */ jsx(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();
@@ -16701,11 +16796,10 @@ var useFAQModal = () => {
     setAccountModalContent
   } = useModal();
   const open = () => {
-    setAccountModalContent({
+    openAccountModal({
       type: "faq",
       props: { onGoBack: () => setAccountModalContent("main") }
     });
-    openAccountModal();
   };
   const close = () => {
     closeAccountModal();
@@ -16718,15 +16812,9 @@ var useFAQModal = () => {
 };
 var FAQModalProvider = ({ children }) => /* @__PURE__ */ jsx(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();
@@ -16741,15 +16829,9 @@ var AccountCustomizationModalProvider = ({
   children
 }) => /* @__PURE__ */ jsx(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();
@@ -16830,13 +16912,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
@@ -17298,8 +17380,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.hexlify(ethers.randomBytes(32))
       }
     };
@@ -17740,13 +17822,12 @@ 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
               },
               embeddedWallets: {
-                createOnLogin: privy?.embeddedWallets?.createOnLogin ?? "all-users",
-                showWalletUIs: true
+                createOnLogin: privy?.embeddedWallets?.createOnLogin ?? "all-users"
               },
               passkeys: {
                 shouldUnlinkOnUnenrollMfa: false
@@ -17871,10 +17952,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",