@vechain/vechain-kit 1.4.0 → 1.4.1

package/dist/index.cjs

@@ -4,7 +4,7 @@ var chunkNKGOARGM_cjs = require('./chunk-NKGOARGM.cjs');
 var chunkEO3CLT4E_cjs = require('./chunk-EO3CLT4E.cjs');
 var chunkX4PAU76A_cjs = require('./chunk-X4PAU76A.cjs');
 require('./chunk-Q7SFCCGT.cjs');
-var React9 = require('react');
+var React8 = require('react');
 var reactAuth = require('@privy-io/react-auth');
 var dappKitReact = require('@vechain/dapp-kit-react');
 var viem = require('viem');
@@ -31,13 +31,15 @@ var hi2 = require('react-icons/hi2');
 var ci = require('react-icons/ci');
 var lu = require('react-icons/lu');
 var md = require('react-icons/md');
-var bi = require('react-icons/bi');
-var ri = require('react-icons/ri');
 var vsc = require('react-icons/vsc');
 var fa = require('react-icons/fa');
 var fi = require('react-icons/fi');
-var gi = require('react-icons/gi');
+var picasso = require('@vechain/picasso');
+var gr = require('react-icons/gr');
+var ri = require('react-icons/ri');
+var bi = require('react-icons/bi');
 var pi = require('react-icons/pi');
+var gi = require('react-icons/gi');
 var reactQrcodeLogo = require('react-qrcode-logo');
 var go = require('react-icons/go');
 var fa6 = require('react-icons/fa6');
@@ -48,7 +50,7 @@ var anatomy = require('@chakra-ui/anatomy');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 var imageCompression__default = /*#__PURE__*/_interopDefault(imageCompression);
 var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 
@@ -520,10 +522,10 @@ var pollForReceipt = async (thor, id, blocksTimeout = 5) => {
 };
 var useTxReceipt = (txId, blockTimeout) => {
   const { thor } = dappKitReact.useConnex();
-  const [receipt, setReceipt] = React9.useState();
-  const [error, setError] = React9.useState(null);
-  const [isLoading, setIsLoading] = React9.useState(false);
-  React9.useEffect(() => {
+  const [receipt, setReceipt] = React8.useState();
+  const [error, setError] = React8.useState(null);
+  const [isLoading, setIsLoading] = React8.useState(false);
+  React8.useEffect(() => {
     const fetchReceipt = async () => {
       if (!txId) {
         setReceipt(null);
@@ -719,7 +721,7 @@ var useXApps = () => {
 // src/hooks/api/vebetterdao/xApps/hooks/useXApp.ts
 var useXApp = (appId) => {
   const { data: xApps, ...props } = useXApps();
-  const allApps = React9.useMemo(() => [...xApps?.active ?? [], ...xApps?.unendorsed ?? []], [xApps]);
+  const allApps = React8.useMemo(() => [...xApps?.active ?? [], ...xApps?.unendorsed ?? []], [xApps]);
   const app = allApps.find((xa) => xa.id === appId);
   return {
     data: app,
@@ -865,7 +867,7 @@ var useUserVotesInAllRounds = (address) => {
 var useUserTopVotedApps = (user) => {
   const userRoundVotes = useUserVotesInAllRounds(user);
   const { data: xApps } = useXApps();
-  const topVotedAppIds = React9.useMemo(() => {
+  const topVotedAppIds = React8.useMemo(() => {
     const appIdToVotes = {};
     userRoundVotes.data?.forEach((voteEvent) => {
       const appIds = voteEvent.appsIds;
@@ -881,7 +883,7 @@ var useUserTopVotedApps = (user) => {
     });
     return Object.entries(appIdToVotes).sort(([, aVotes], [, bVotes]) => Number(bVotes) - Number(aVotes)).map(([appId, votes]) => ({ appId, votes }));
   }, [userRoundVotes]);
-  const topVotedApps = React9.useMemo(() => {
+  const topVotedApps = React8.useMemo(() => {
     return topVotedAppIds.map((app) => {
       const appFound = xApps?.allApps.find(
         (xApp) => xApp.id === app.appId
@@ -941,7 +943,7 @@ var useMostVotedAppsInRound = (roundId) => {
     apps?.map((app) => app.id) ?? [],
     roundId
   );
-  const mostVotedApps = React9.useMemo(
+  const mostVotedApps = React8.useMemo(
     () => xAppsShares.data?.map((appShares) => ({
       percentage: appShares.share + appShares.unallocatedShare,
       id: apps?.find((xa) => xa.id === appShares.app)?.id ?? "",
@@ -1160,20 +1162,20 @@ var compressImages = async (images) => {
   }
 };
 var useUploadImages = ({ compressImages: compressImages2, defaultImages }) => {
-  const [uploadedImages, setUploadedImages] = React9.useState(
+  const [uploadedImages, setUploadedImages] = React8.useState(
     defaultImages ?? []
   );
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (defaultImages) {
       setUploadedImages(defaultImages);
     }
   }, [defaultImages]);
-  const [invalidDateError, setInvalidDateError] = React9.useState([]);
-  const onRemove = React9.useCallback(
+  const [invalidDateError, setInvalidDateError] = React8.useState([]);
+  const onRemove = React8.useCallback(
     (index) => setUploadedImages((s) => s.filter((_, i) => i !== index)),
     []
   );
-  const onUpload = React9.useCallback(
+  const onUpload = React8.useCallback(
     async (acceptedFiles, keepCurrent = true) => {
       setInvalidDateError([]);
       const parsedUploads = [];
@@ -1214,14 +1216,14 @@ var useSingleImageUpload = ({
   compressImage,
   defaultImage
 }) => {
-  const [uploadedImage, setUploadedImage] = React9.useState(defaultImage);
-  React9.useEffect(() => {
+  const [uploadedImage, setUploadedImage] = React8.useState(defaultImage);
+  React8.useEffect(() => {
     if (defaultImage) {
       setUploadedImage(defaultImage);
     }
   }, [defaultImage]);
-  const onRemove = React9.useCallback(() => setUploadedImage(void 0), []);
-  const onUpload = React9.useCallback(
+  const onRemove = React8.useCallback(() => setUploadedImage(void 0), []);
+  const onUpload = React8.useCallback(
     async (acceptedFile) => {
       let parsedFile = acceptedFile;
       if (compressImage) {
@@ -1696,7 +1698,7 @@ var useAllocationsRound = (roundId) => {
   const currentAllocationState = useAllocationsRoundState(roundId);
   const allocationRoundsEvents = useAllocationsRoundsEvents();
   const { network } = useVeChainKitConfig();
-  const currentAllocationRound = React9.useMemo(() => {
+  const currentAllocationRound = React8.useMemo(() => {
     if (!currentAllocationId.data || !allocationRoundsEvents.data)
       return;
     const roundInfo = allocationRoundsEvents.data.created.find(
@@ -1718,7 +1720,7 @@ var useAllocationsRound = (roundId) => {
   const isError = currentAllocationId.isError || allocationRoundsEvents.isError || currentAllocationState.isError;
   const error = currentAllocationId.error || allocationRoundsEvents.error || currentAllocationState.error;
   const blockTime = chunkEO3CLT4E_cjs.getConfig(network.type).network.blockTime;
-  const estimatedEndTime = React9.useMemo(() => {
+  const estimatedEndTime = React8.useMemo(() => {
     if (!currentAllocationRound) return null;
     const endBlock = Number(currentAllocationRound.voteEnd);
     if (!endBlock || !currentBlock) return null;
@@ -1726,7 +1728,7 @@ var useAllocationsRound = (roundId) => {
     const durationLeftTimestamp = endBlockFromNow * blockTime;
     return Date.now() + durationLeftTimestamp;
   }, [currentBlock, currentAllocationRound, blockTime]);
-  const estimatedStartTime = React9.useMemo(() => {
+  const estimatedStartTime = React8.useMemo(() => {
     if (!currentAllocationRound) return null;
     const startBlock = Number(currentAllocationRound.voteStart);
     if (!startBlock || !currentBlock) return null;
@@ -1783,7 +1785,7 @@ function getOrCreateQueryClient() {
 }
 var EnsureQueryClient = ({ children }) => {
   try {
-    const existingQueryClient = React9__default.default.useContext(reactQuery.QueryClientContext);
+    const existingQueryClient = React8__default.default.useContext(reactQuery.QueryClientContext);
     if (existingQueryClient) {
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
     }
@@ -2165,7 +2167,7 @@ var useIsWhitelisted = (address) => {
 var useUserStatus = (address) => {
   const { data: isBlacklisted } = useIsBlacklisted(address);
   const { data: isWhitelisted } = useIsWhitelisted(address);
-  const userStatus = React9.useMemo(() => {
+  const userStatus = React8.useMemo(() => {
     if (!isBlacklisted && !isWhitelisted) {
       return "NONE" /* NONE */;
     }
@@ -2439,7 +2441,7 @@ var useAccountLinking = (user) => {
   const isPassport = !isEntity && userLinkedEntities?.length > 0;
   const { data: entityPassport, isLoading: isEntityPassportLoading } = useGetPassportForEntity(!!isEntity ? user : void 0);
   const isLinked = !!isPassport || !!isEntity;
-  const passport = React9.useMemo(() => {
+  const passport = React8.useMemo(() => {
     if (isEntity) return entityPassport ?? void 0;
     if (isPassport) return user;
     return void 0;
@@ -2576,7 +2578,7 @@ var useVotingRewards = (currentRoundId, voter) => {
   const queryClient = reactQuery.useQueryClient();
   const { network } = useVeChainKitConfig();
   const contractAddress = chunkEO3CLT4E_cjs.getConfig(network.type).voterRewardsContractAddress;
-  const rounds = React9.useMemo(() => {
+  const rounds = React8.useMemo(() => {
     return Array.from(
       { length: parseInt(currentRoundId ?? "0") - 1 },
       (_, i) => (i + 1).toString()
@@ -2846,7 +2848,7 @@ var useClaimVeWorldSubdomain = ({
   const queryClient = reactQuery.useQueryClient();
   const { account } = useWallet();
   const { network } = useVeChainKitConfig();
-  const buildClauses = React9.useCallback(async () => {
+  const buildClauses = React8.useCallback(async () => {
     if (!subdomain) throw new Error("Invalid subdomain");
     const clausesArray = [];
     clausesArray.push({
@@ -2887,7 +2889,7 @@ var useClaimVeWorldSubdomain = ({
     });
     return clausesArray;
   }, [subdomain, domain, account?.address, alreadyOwned]);
-  const handleOnSuccess = React9.useCallback(async () => {
+  const handleOnSuccess = React8.useCallback(async () => {
     queryClient.cancelQueries({
       queryKey: getVechainDomainQueryKey(account?.address ?? ""),
       refetchType: "none"
@@ -3141,7 +3143,7 @@ var useSendTransaction = ({
     }
     return parsedClauses;
   }
-  const sendTransaction = React9.useCallback(
+  const sendTransaction = React8.useCallback(
     async (clauses2, options) => {
       if (connection.isConnectedWithSocialLogin || connection.isConnectedWithCrossApp) {
         return await privyWalletProvider.sendTransaction({
@@ -3185,13 +3187,13 @@ var useSendTransaction = ({
       privyUIOptions
     ]
   );
-  const [sendTransactionTx, setSendTransactionTx] = React9.useState(
+  const [sendTransactionTx, setSendTransactionTx] = React8.useState(
     null
   );
-  const [sendTransactionPending, setSendTransactionPending] = React9.useState(false);
-  const [sendTransactionError, setSendTransactionError] = React9.useState(null);
-  const [progress, setProgress] = React9.useState();
-  const sendTransactionAdapter = React9.useCallback(
+  const [sendTransactionPending, setSendTransactionPending] = React8.useState(false);
+  const [sendTransactionError, setSendTransactionError] = React8.useState(null);
+  const [progress, setProgress] = React8.useState();
+  const sendTransactionAdapter = React8.useCallback(
     async (_clauses) => {
       if (!_clauses && !clauses) throw new Error("clauses are required");
       try {
@@ -3228,7 +3230,7 @@ var useSendTransaction = ({
     isLoading: isTxReceiptLoading,
     error: txReceiptError
   } = useTxReceipt(sendTransactionTx ?? "");
-  const explainTxRevertReason = React9.useCallback(
+  const explainTxRevertReason = React8.useCallback(
     async (txReceipt2) => {
       if (!txReceipt2.reverted) return;
       const transactionData = await thor.transaction(txReceipt2.meta.txID).get();
@@ -3237,8 +3239,8 @@ var useSendTransaction = ({
     },
     [thor]
   );
-  const [error, setError] = React9.useState();
-  const status = React9.useMemo(() => {
+  const [error, setError] = React8.useState();
+  const status = React8.useMemo(() => {
     if (sendTransactionPending) return "pending";
     if (sendTransactionError) {
       return "error";
@@ -3264,7 +3266,7 @@ var useSendTransaction = ({
     txReceipt,
     txReceiptError
   ]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (status === "success" || status === "error") {
       if (sendTransactionError && !error) {
         setError({
@@ -3294,13 +3296,13 @@ var useSendTransaction = ({
     explainTxRevertReason,
     sendTransactionError
   ]);
-  const resetStatus = React9.useCallback(() => {
+  const resetStatus = React8.useCallback(() => {
     setSendTransactionTx(null);
     setSendTransactionPending(false);
     setSendTransactionError(null);
     setError(void 0);
   }, []);
-  const isTransactionPending = React9.useMemo(() => {
+  const isTransactionPending = React8.useMemo(() => {
     return sendTransactionPending || isTxReceiptLoading || status === "pending" || status === "waitingConfirmation";
   }, [sendTransactionPending, isTxReceiptLoading, status]);
   return {
@@ -3329,7 +3331,7 @@ var useUpdateAvatarRecord = ({
     onTxConfirmed: onSuccess,
     onTxFailedOrCancelled: onError
   });
-  const updateAvatar = React9.useCallback(
+  const updateAvatar = React8.useCallback(
     async (domain, ipfsUri) => {
       if (!domain) throw new Error("Domain is required");
       const node = ethers.namehash(domain);
@@ -3489,7 +3491,7 @@ var PrivyCrossAppProvider = ({
   privyEcosystemAppIDS,
   children
 }) => {
-  const wagmiConfigRef = React9.useRef(
+  const wagmiConfigRef = React8.useRef(
     wagmi.createConfig({
       chains: [vechain],
       ssr: true,
@@ -3515,9 +3517,9 @@ var usePrivyCrossAppSdk = () => {
   const { signMessageAsync } = wagmi.useSignMessage();
   const { disconnectAsync } = wagmi.useDisconnect();
   const { isConnected } = wagmi.useAccount();
-  const [isConnecting, setIsConnecting] = React9.useState(false);
-  const [connectionError, setConnectionError] = React9.useState(null);
-  const logout = React9.useCallback(async () => {
+  const [isConnecting, setIsConnecting] = React8.useState(false);
+  const [connectionError, setConnectionError] = React8.useState(null);
+  const logout = React8.useCallback(async () => {
     try {
       if (isConnected) {
         await disconnectAsync();
@@ -3528,7 +3530,7 @@ var usePrivyCrossAppSdk = () => {
       throw error;
     }
   }, [disconnectAsync, isConnected]);
-  const login = React9.useCallback(
+  const login = React8.useCallback(
     async (appID) => {
       try {
         setIsConnecting(true);
@@ -3550,7 +3552,7 @@ var usePrivyCrossAppSdk = () => {
     },
     [connectAsync, connectors]
   );
-  const signMessage = React9.useCallback(
+  const signMessage = React8.useCallback(
     async (message) => {
       try {
         return await signMessageAsync({ message });
@@ -3565,7 +3567,7 @@ var usePrivyCrossAppSdk = () => {
     },
     [signMessageAsync]
   );
-  const signTypedData = React9.useCallback(
+  const signTypedData = React8.useCallback(
     async (data) => {
       try {
         return await signTypedDataAsync(data);
@@ -3626,7 +3628,7 @@ var useWallet = () => {
   const isConnectedWithPrivy = isConnectedWithSocialLogin || isConnectedWithCrossApp;
   const isConnectedWithVeChain = isConnectedWithSocialLogin && privy?.appId === chunkEO3CLT4E_cjs.VECHAIN_PRIVY_APP_ID || isConnectedWithCrossApp && connectionCache?.ecosystemApp?.appId === chunkEO3CLT4E_cjs.VECHAIN_PRIVY_APP_ID;
   const isLoading = isConnectingWithCrossApp || isReconnectingWithCrossApp || isLoadingLoginOAuth || !ready;
-  const [isConnected, setIsConnected] = React9.useState(false);
+  const [isConnected, setIsConnected] = React8.useState(false);
   const connectionSource = isConnectedWithCrossApp ? {
     type: "privy-cross-app",
     displayName: "Ecosystem"
@@ -3637,7 +3639,7 @@ var useWallet = () => {
     type: "privy",
     displayName: "Social Login"
   };
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const isNowConnected = isConnectedWithDappKit || isConnectedWithSocialLogin || isConnectedWithCrossApp;
     if (isConnected !== isNowConnected) {
       setIsConnected(isNowConnected);
@@ -3682,7 +3684,7 @@ var useWallet = () => {
     smartAccount?.address ?? ""
   );
   const hasActiveSmartAccount = !!smartAccount?.address && !!account?.address && chunkEO3CLT4E_cjs.compareAddresses(smartAccount?.address, account?.address);
-  const disconnect = React9.useCallback(async () => {
+  const disconnect = React8.useCallback(async () => {
     try {
       setIsConnected(false);
       if (isConnectedWithDappKit) {
@@ -4028,7 +4030,7 @@ var useSendTokenModal = () => {
 var SendTokenModalProvider = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-var useEmbeddedWalletSettingsModal = () => {
+var useAccessAndSecurityModal = () => {
   const {
     openAccountModal,
     closeAccountModal,
@@ -4036,7 +4038,7 @@ var useEmbeddedWalletSettingsModal = () => {
     setAccountModalContent
   } = useVeChainKitConfig();
   const open = () => {
-    setAccountModalContent("embedded-wallet");
+    setAccountModalContent("access-and-security");
     openAccountModal();
   };
   const close = () => {
@@ -4048,7 +4050,7 @@ var useEmbeddedWalletSettingsModal = () => {
     isOpen: isAccountModalOpen
   };
 };
-var EmbeddedWalletSettingsModalProvider = ({
+var AccessAndSecurityModalProvider = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 var useExploreEcosystemModal = () => {
@@ -4165,7 +4167,7 @@ var ReceiveModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxR
 var useLoginModalContent = () => {
   const { privy, loginMethods } = useVeChainKitConfig();
   const isVeChainApp = privy?.appId === chunkEO3CLT4E_cjs.VECHAIN_PRIVY_APP_ID;
-  const showEcosystemLogin = React9.useMemo(() => {
+  const showEcosystemLogin = React8.useMemo(() => {
     if (!loginMethods) return true;
     if (loginMethods.length > 0 && !loginMethods?.find((method35) => method35.method === "ecosystem")) {
       return false;
@@ -4194,7 +4196,7 @@ var useLoginModalContent = () => {
       isOfficialVeChainApp: true
     };
   }
-  const showMoreLogin = React9.useMemo(() => {
+  const showMoreLogin = React8.useMemo(() => {
     if (!loginMethods) return true;
     return loginMethods.some((method35) => method35.method === "more");
   }, [loginMethods]);
@@ -4219,7 +4221,7 @@ var useTransferERC20 = ({
 }) => {
   const queryClient = reactQuery.useQueryClient();
   const { refresh } = useRefreshBalances();
-  const buildClauses = React9.useCallback(async () => {
+  const buildClauses = React8.useCallback(async () => {
     if (!receiverAddress || !amount || !chunkEO3CLT4E_cjs.isValidAddress(receiverAddress))
       throw new Error("Invalid receiver address or amount");
     const clausesArray = [];
@@ -4235,7 +4237,7 @@ var useTransferERC20 = ({
     });
     return clausesArray;
   }, [receiverAddress, amount]);
-  const handleOnSuccess = React9.useCallback(async () => {
+  const handleOnSuccess = React8.useCallback(async () => {
     await refresh();
     onSuccess?.();
   }, [onSuccess, fromAddress, queryClient]);
@@ -4262,7 +4264,7 @@ var useTransferVET = ({
   onSuccess
 }) => {
   const { refresh } = useRefreshBalances();
-  const buildClauses = React9.useCallback(async () => {
+  const buildClauses = React8.useCallback(async () => {
     if (!receiverAddress || !amount || !chunkEO3CLT4E_cjs.isValidAddress(receiverAddress))
       throw new Error("Invalid receiver address or amount");
     if (isNaN(Number(amount))) {
@@ -4314,7 +4316,7 @@ var DEFAULT_NOTIFICATIONS = [
 ];
 var useNotifications = () => {
   const { account } = useWallet();
-  const getStorageKeys = React9.useCallback((address) => {
+  const getStorageKeys = React8.useCallback((address) => {
     const normalizedAddress = address?.toLowerCase();
     return {
       notifications: `vechain_kit_notifications_${normalizedAddress}`,
@@ -4322,7 +4324,7 @@ var useNotifications = () => {
       initialized: `vechain_kit_notifications_initialized_${normalizedAddress}`
     };
   }, []);
-  const initializeNotifications = React9.useCallback(() => {
+  const initializeNotifications = React8.useCallback(() => {
     if (!account?.address) return;
     const keys = getStorageKeys(account.address);
     const isInitialized = localStorage.getItem(keys.initialized);
@@ -4334,24 +4336,24 @@ var useNotifications = () => {
       localStorage.setItem(keys.initialized, "true");
     }
   }, [account?.address, getStorageKeys]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     initializeNotifications();
   }, [initializeNotifications]);
-  const getNotifications = React9.useCallback(() => {
+  const getNotifications = React8.useCallback(() => {
     if (!account?.address) return [];
     const keys = getStorageKeys(account.address);
     const cached = localStorage.getItem(keys.notifications);
     if (!cached) return [];
     return JSON.parse(cached);
   }, [account?.address, getStorageKeys]);
-  const getArchivedNotifications = React9.useCallback(() => {
+  const getArchivedNotifications = React8.useCallback(() => {
     if (!account?.address) return [];
     const keys = getStorageKeys(account.address);
     const cached = localStorage.getItem(keys.archived);
     if (!cached) return [];
     return JSON.parse(cached);
   }, [account?.address, getStorageKeys]);
-  const addNotification = React9.useCallback(
+  const addNotification = React8.useCallback(
     (notification) => {
       if (!account?.address) return;
       const keys = getStorageKeys(account.address);
@@ -4377,7 +4379,7 @@ var useNotifications = () => {
     },
     [account?.address, getNotifications, getStorageKeys]
   );
-  const clearAllNotifications = React9.useCallback(() => {
+  const clearAllNotifications = React8.useCallback(() => {
     if (!account?.address) return;
     const keys = getStorageKeys(account.address);
     const notifications = getNotifications();
@@ -4392,7 +4394,7 @@ var useNotifications = () => {
     getArchivedNotifications,
     getStorageKeys
   ]);
-  const markAsRead = React9.useCallback(
+  const markAsRead = React8.useCallback(
     (notificationId) => {
       if (!account?.address) return;
       const keys = getStorageKeys(account.address);
@@ -4438,7 +4440,7 @@ var useNotificationAlerts = () => {
   const { t } = reactI18next.useTranslation();
   const { account, connection } = useWallet();
   const { addNotification, getNotifications } = useNotifications();
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!connection.isConnectedWithPrivy || !account?.address) return;
     const notifications = getNotifications();
     const hasSmartAccountNotification = notifications.some(
@@ -4455,7 +4457,7 @@ var useNotificationAlerts = () => {
       });
     }
   }, [connection.isConnectedWithPrivy, account?.address]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!connection.isConnectedWithPrivy || !account?.address) return;
     const notifications = getNotifications();
     const hasMulticlauseWarning = notifications.some(
@@ -4474,13 +4476,13 @@ var useNotificationAlerts = () => {
   }, [connection.isConnectedWithPrivy, account?.address]);
 };
 var useSignMessage2 = () => {
-  const [isSigningPending, setIsSigningPending] = React9.useState(false);
-  const [signature, setSignature] = React9.useState(null);
-  const [error, setError] = React9.useState(null);
+  const [isSigningPending, setIsSigningPending] = React8.useState(false);
+  const [signature, setSignature] = React8.useState(null);
+  const [error, setError] = React8.useState(null);
   const { connection } = useWallet();
   const { vendor } = dappKitReact.useConnex();
   const privyWalletProvider = usePrivyWalletProvider();
-  const signMessage = React9.useCallback(
+  const signMessage = React8.useCallback(
     async (message) => {
       setIsSigningPending(true);
       setError(null);
@@ -4510,7 +4512,7 @@ var useSignMessage2 = () => {
     },
     [connection, privyWalletProvider]
   );
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setIsSigningPending(false);
     setSignature(null);
     setError(null);
@@ -4524,13 +4526,13 @@ var useSignMessage2 = () => {
   };
 };
 var useSignTypedData2 = () => {
-  const [isSigningPending, setIsSigningPending] = React9.useState(false);
-  const [signature, setSignature] = React9.useState(null);
-  const [error, setError] = React9.useState(null);
+  const [isSigningPending, setIsSigningPending] = React8.useState(false);
+  const [signature, setSignature] = React8.useState(null);
+  const [error, setError] = React8.useState(null);
   const { connection } = useWallet();
   const privyWalletProvider = usePrivyWalletProvider();
   const { signTypedData: signTypedDataDappKit } = dappKitReact.useWallet();
-  const signTypedData = React9.useCallback(
+  const signTypedData = React8.useCallback(
     async (data) => {
       setIsSigningPending(true);
       setError(null);
@@ -4562,7 +4564,7 @@ var useSignTypedData2 = () => {
     },
     [connection, privyWalletProvider]
   );
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setIsSigningPending(false);
     setSignature(null);
     setError(null);
@@ -4601,7 +4603,7 @@ var useLoginWithOAuth2 = () => {
 };
 var useCrossAppConnectionCache = () => {
   const CACHE_KEY = "vechain_kit_cross_app_connection";
-  const setConnectionCache = React9.useCallback(
+  const setConnectionCache = React8.useCallback(
     (ecosystemApp) => {
       const cacheData = {
         timestamp: Date.now(),
@@ -4611,12 +4613,12 @@ var useCrossAppConnectionCache = () => {
     },
     []
   );
-  const getConnectionCache = React9.useCallback(() => {
+  const getConnectionCache = React8.useCallback(() => {
     const cached = localStorage.getItem(CACHE_KEY);
     if (!cached) return null;
     return JSON.parse(cached);
   }, []);
-  const clearConnectionCache = React9.useCallback(() => {
+  const clearConnectionCache = React8.useCallback(() => {
     localStorage.removeItem(CACHE_KEY);
   }, []);
   return {
@@ -4651,7 +4653,7 @@ var useLoginWithVeChain = () => {
   return { login };
 };
 var useScrollToTop = () => {
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const modalContent = document.querySelector(".chakra-modal__content");
     if (modalContent) {
       modalContent.scrollTop = 0;
@@ -4659,8 +4661,8 @@ var useScrollToTop = () => {
   }, []);
 };
 var useIsPWA = () => {
-  const [isPWA, setIsPWA] = React9.useState(true);
-  React9.useEffect(() => {
+  const [isPWA, setIsPWA] = React8.useState(true);
+  React8.useEffect(() => {
     const checkIsPWA = () => {
       const isStandalone = window.matchMedia("(display-mode: standalone)").matches || window.standalone || document.referrer.includes("android-app://");
       setIsPWA(isStandalone);
@@ -4674,9 +4676,9 @@ var useIsPWA = () => {
   return isPWA;
 };
 var useFeatureAnnouncement = () => {
-  const [isVisible, setIsVisible] = React9.useState(true);
+  const [isVisible, setIsVisible] = React8.useState(true);
   const CACHE_KEY = "vechain_kit_feature_announcement_closed";
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const isClosed = localStorage.getItem(CACHE_KEY);
     if (isClosed) {
       setIsVisible(false);
@@ -4701,7 +4703,7 @@ var useCall = ({
   mapResponse
 }) => {
   const { thor } = dappKitReact.useConnex();
-  const queryFn = React9.useCallback(async () => {
+  const queryFn = React8.useCallback(async () => {
     try {
       const functionFragment2 = contractInterface21?.getFunction(method35)?.format("json");
       if (!functionFragment2)
@@ -4721,11 +4723,11 @@ var useCall = ({
       throw error;
     }
   }, [args, contractAddress, contractInterface21, mapResponse, method35, thor]);
-  const queryKey = React9.useMemo(
+  const queryKey = React8.useMemo(
     () => getCallKey({ method: method35, keyArgs: keyArgs || args }),
     [method35, keyArgs, args]
   );
-  const enableQuery = React9.useMemo(() => enabled, [enabled]);
+  const enableQuery = React8.useMemo(() => enabled, [enabled]);
   return reactQuery.useQuery({
     queryFn,
     queryKey,
@@ -4736,7 +4738,7 @@ var getCallKey = ({ method: method35, keyArgs = [] }) => {
   return ["VECHAIN_KIT_", method35, ...keyArgs];
 };
 var useLocalStorage = (key, initialValue) => {
-  const [storedValue, setStoredValue] = React9.useState(() => {
+  const [storedValue, setStoredValue] = React8.useState(() => {
     try {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -4745,7 +4747,7 @@ var useLocalStorage = (key, initialValue) => {
       return initialValue;
     }
   });
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     window.localStorage.setItem(key, JSON.stringify(storedValue));
   }, [key, storedValue]);
   return [storedValue, setStoredValue];
@@ -4775,7 +4777,7 @@ var useEcosystemShortcuts = () => {
     isShortcut
   };
 };
-var PrivyWalletProviderContext = React9.createContext(null);
+var PrivyWalletProviderContext = React8.createContext(null);
 var PrivyWalletProvider = ({
   children,
   nodeUrl,
@@ -5122,7 +5124,7 @@ var PrivyWalletProvider = ({
   );
 };
 var usePrivyWalletProvider = () => {
-  const context = React9.useContext(PrivyWalletProviderContext);
+  const context = React8.useContext(PrivyWalletProviderContext);
   if (!context) {
     throw new Error(
       "usePrivyWalletProvider must be used within a PrivyWalletProvider"
@@ -5142,7 +5144,7 @@ var FadeInView = ({ children }) => {
   );
 };
 var FadeInViewFromBottom = ({ children }) => {
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const modalContent = document.querySelector(".chakra-modal__content");
     if (modalContent) {
       modalContent.scrollTop = 0;
@@ -5200,9 +5202,14 @@ var ModalBackButton = ({ onClick, ...props }) => {
     }
   );
 };
-var AddressDisplay = ({ wallet, label, size = "lg" }) => {
-  const [copied, setCopied] = React9.useState(false);
-  const [copiedDomain, setCopiedDomain] = React9.useState(false);
+var AddressDisplay = ({
+  wallet,
+  label,
+  size = "lg",
+  style
+}) => {
+  const [copied, setCopied] = React8.useState(false);
+  const [copiedDomain, setCopiedDomain] = React8.useState(false);
   const copyToClipboard = async (textToCopy, setCopied2) => {
     await navigator.clipboard.writeText(textToCopy);
     setCopied2(true);
@@ -5210,7 +5217,7 @@ var AddressDisplay = ({ wallet, label, size = "lg" }) => {
       setCopied2(false);
     }, 2e3);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { w: "full", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { w: "full", justifyContent: "center", ...style, children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.7, children: label }),
     wallet?.domain ? /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5286,7 +5293,7 @@ var AddressDisplay = ({ wallet, label, size = "lg" }) => {
 // package.json
 var package_default = {
   name: "@vechain/vechain-kit",
-  version: "1.4.0",
+  version: "1.4.1",
   private: false,
   homepage: "https://github.com/vechain/vechain-kit",
   repository: "github:vechain/vechain-kit",
@@ -5433,10 +5440,10 @@ var VersionFooter = ({ ...props }) => {
   );
 };
 var StickyHeaderContainer = ({ children }) => {
-  const [hasContentBelow, setHasContentBelow] = React9.useState(false);
-  const observerRef = React9.useRef(null);
+  const [hasContentBelow, setHasContentBelow] = React8.useState(false);
+  const observerRef = React8.useRef(null);
   const { darkMode: isDark } = useVeChainKitConfig();
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         setHasContentBelow(!entry.isIntersecting);
@@ -5718,7 +5725,7 @@ var AccountAvatar = ({ wallet, props }) => {
 var VeChainLoginButton = ({ isDark, gridColumn }) => {
   const { t } = reactI18next.useTranslation();
   const { login: loginWithVeChain } = useLoginWithVeChain();
-  const [loginError, setLoginError] = React9.useState();
+  const [loginError, setLoginError] = React8.useState();
   const loginLoadingModal = react.useDisclosure();
   const handleLoginWithVeChain = async () => {
     loginLoadingModal.onOpen();
@@ -5770,7 +5777,7 @@ var SocialLoginButtons = ({
   const selfHostedPrivyLoginMethods = loginMethods?.filter(
     (method35) => method35.method === "email" || method35.method === "google"
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { colSpan: gridColumn, w: "full", children: selfHostedPrivyLoginMethods?.map((loginMethod, index) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { colSpan: gridColumn, w: "full", children: selfHostedPrivyLoginMethods?.map((loginMethod, index) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
     loginMethod.method === "email" && /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { colSpan: 4, w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(EmailLoginButton, {}) }),
     loginMethod.method === "google" && /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { colSpan: 4, w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(
       ConnectionButton,
@@ -5793,7 +5800,7 @@ var SocialLoginButtons = ({
 var PasskeyLoginButton = ({ isDark, gridColumn }) => {
   const { t } = reactI18next.useTranslation();
   const { loginWithPasskey } = useLoginWithPasskey();
-  const [loginError, setLoginError] = React9.useState();
+  const [loginError, setLoginError] = React8.useState();
   const loginLoadingModal = react.useDisclosure();
   const handleLoginWithPasskey = async () => {
     loginLoadingModal.onOpen();
@@ -5860,8 +5867,8 @@ var EcosystemButton = ({
       {
         isDark,
         onClick: ecosystemModal.onOpen,
-        icon: io5.IoPlanet,
-        text: gridColumn && gridColumn >= 2 ? t("Ecosystem") : void 0
+        icon: io.IoMdApps,
+        text: gridColumn && gridColumn >= 2 ? t("Other") : void 0
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5940,10 +5947,10 @@ var EmailCodeVerificationModal = ({
 }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [code, setCode] = React9.useState("");
-  const [error, setError] = React9.useState(null);
+  const [code, setCode] = React8.useState("");
+  const [error, setError] = React8.useState(null);
   const { loginWithCode } = reactAuth.useLoginWithEmail({});
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (code.length === 6) {
       loginWithCode({ code }).then(() => {
         onClose();
@@ -6130,7 +6137,7 @@ var EmailCodeVerificationModal = ({
 var EmailLoginButton = () => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [email, setEmail] = React9.useState("");
+  const [email, setEmail] = React8.useState("");
   const { sendCode, state: emailState } = reactAuth.useLoginWithEmail({});
   const emailCodeVerificationModal = react.useDisclosure();
   const handleSendCode = async () => {
@@ -6225,12 +6232,12 @@ var MainContent = ({ setCurrentContent, onClose }) => {
     isOfficialVeChainApp
   } = useLoginModalContent();
   const { data: appsInfo, isLoading: isEcosystemAppsLoading } = useFetchAppInfo(privyEcosystemAppIDS);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (connection.isConnected) {
       onClose();
     }
   }, [connection.isConnected, onClose]);
-  const gridLayout = React9.useMemo(() => {
+  const gridLayout = React8.useMemo(() => {
     if (loginMethods?.length) {
       const layout = {};
       loginMethods.forEach(({ method: method35, gridColumn }) => {
@@ -6369,7 +6376,7 @@ var MainContent = ({ setCurrentContent, onClose }) => {
             gridColumn: gridLayout.veChainColumn
           }
         )),
-        showPasskey && /* @__PURE__ */ jsxRuntime.jsx(
+        gridLayout.passkeyColumn && /* @__PURE__ */ jsxRuntime.jsx(
           PasskeyLoginButton,
           {
             isDark,
@@ -6464,7 +6471,7 @@ var FeatureAnnouncementCard = ({
 };
 var ExchangeWarningAlert = () => {
   const { t } = reactI18next.useTranslation();
-  const [showFullText, setShowFullText] = React9.useState(false);
+  const [showFullText, setShowFullText] = React8.useState(false);
   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 }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { w: "full", children: [
@@ -6487,21 +6494,10 @@ var ExchangeWarningAlert = () => {
     ] })
   ] }) }) });
 };
-var AccountMainContent = ({
-  setCurrentContent,
-  wallet,
-  onClose
-}) => {
+var AccountMainContent = ({ setCurrentContent, wallet }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const { disconnect, connection, account } = useWallet();
-  const { getNotifications } = useNotifications();
-  const notifications = getNotifications();
-  const hasUnreadNotifications = notifications.some((n) => !n.isRead);
-  const handleDisconnect = () => {
-    disconnect();
-    onClose();
-  };
+  const { connection, account } = useWallet();
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -6524,60 +6520,16 @@ var AccountMainContent = ({
           setCurrentContent
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.IconButton,
-          {
-            p: 2,
-            h: 9,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { boxSize: 5, as: ri.RiLogoutBoxLine }),
-            "aria-label": "Disconnect",
-            variant: "vechainKitSelector",
-            onClick: () => setCurrentContent({
-              type: "disconnect-confirm",
-              props: {
-                onDisconnect: handleDisconnect,
-                onBack: () => setCurrentContent("main")
-              }
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AccountSelector,
-          {
-            mt: 0,
-            onClick: () => {
-              setCurrentContent("settings");
-            },
-            wallet
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.IconButton,
-            {
-              p: 2,
-              h: 9,
-              variant: "vechainKitSelector",
-              "aria-label": "notifications",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { boxSize: 5, as: bi.BiBell }),
-              onClick: () => setCurrentContent("notifications")
-            }
-          ),
-          hasUnreadNotifications && /* @__PURE__ */ jsxRuntime.jsx(
-            react.Box,
-            {
-              position: "absolute",
-              top: 1,
-              right: 1,
-              width: "8px",
-              height: "8px",
-              bg: "red.500",
-              borderRadius: "full"
-            }
-          )
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AccountSelector,
+        {
+          mt: 0,
+          onClick: () => {
+            setCurrentContent("settings");
+          },
+          wallet
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(BalanceSection, { mt: 14 }),
       /* @__PURE__ */ jsxRuntime.jsx(
         QuickActionsSection,
@@ -6664,7 +6616,6 @@ var ActionButton = ({
   leftIcon,
   rightIcon,
   title,
-  description,
   onClick,
   leftImage,
   hide = false,
@@ -6675,7 +6626,8 @@ var ActionButton = ({
   stacked = false,
   isLoading,
   loadingText,
-  style
+  style,
+  extraContent
 }) => {
   const { t } = reactI18next.useTranslation();
   const { colorMode } = react.useColorMode();
@@ -6708,7 +6660,7 @@ var ActionButton = ({
             objectFit: "cover"
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: leftIcon, fontSize: "25px" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           react.VStack,
           {
             textAlign: "left",
@@ -6716,26 +6668,11 @@ var ActionButton = ({
             flex: 1,
             justifyContent: "flex-start",
             alignItems: "flex-start",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "flex-start", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "400", children: title }),
-                showComingSoon && /* @__PURE__ */ jsxRuntime.jsx(react.Tag, { size: "sm", colorScheme: "red", children: t("Coming Soon!") })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                react.Text,
-                {
-                  fontSize: "xs",
-                  fontWeight: "400",
-                  opacity: 0.5,
-                  overflowWrap: "break-word",
-                  wordBreak: "break-word",
-                  whiteSpace: "normal",
-                  w: "full",
-                  pr: rightIcon ? "0px" : "10px",
-                  children: description
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "flex-start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "400", children: title }),
+              showComingSoon && /* @__PURE__ */ jsxRuntime.jsx(react.Tag, { size: "sm", colorScheme: "red", children: t("Coming Soon!") }),
+              extraContent
+            ] })
           }
         ),
         rightIcon && /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { minW: "40px", justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: rightIcon, fontSize: "20px", opacity: 0.5 }) })
@@ -6749,13 +6686,13 @@ var AccountSelector = ({
   onClick,
   mt
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { mt, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { mt, w: "full", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
     react.Button,
     {
       w: "fit-content",
       p: 2,
       pl: 4,
-      h: 9,
+      h: 14,
       "aria-label": "Wallet",
       onClick,
       variant: "vechainKitSelector",
@@ -6764,10 +6701,10 @@ var AccountSelector = ({
           AccountAvatar,
           {
             wallet,
-            props: { width: 5, height: 5 }
+            props: { width: 10, height: 10 }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: size, fontWeight: "500", children: chunkEO3CLT4E_cjs.humanDomain(wallet?.domain ?? "", 6, 4) || chunkEO3CLT4E_cjs.humanAddress(wallet?.address ?? "", 6, 4) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: size, fontWeight: "500", children: chunkEO3CLT4E_cjs.humanDomain(wallet?.domain ?? "", 20, 0) || chunkEO3CLT4E_cjs.humanAddress(wallet?.address ?? "", 6, 4) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           react.Icon,
           {
@@ -6793,7 +6730,7 @@ var BalanceSection = ({ mb, mt }) => {
     address: account?.address ?? ""
   });
   const { refresh } = useRefreshBalances();
-  const [isRefreshing, setIsRefreshing] = React9.useState(false);
+  const [isRefreshing, setIsRefreshing] = React8.useState(false);
   const handleRefresh = async () => {
     setIsRefreshing(true);
     await refresh();
@@ -6912,7 +6849,7 @@ var AssetsSection = ({ mt, setCurrentContent }) => {
   const tabBgColor = react.useColorModeValue("white", "#1f1f1e");
   const tabBorderColor = react.useColorModeValue("#ebebeb", "#2d2d2d");
   const tabTextColor = react.useColorModeValue("#4d4d4d", "#dfdfdd");
-  const tabPanelsRef = React9.useRef(null);
+  const tabPanelsRef = React8.useRef(null);
   const scrollToContent = () => {
     setTimeout(() => {
       if (tabPanelsRef.current) {
@@ -6967,8 +6904,8 @@ var QuickActionsSection = ({ mt, setCurrentContent }) => {
         py: 3,
         fontSize: "xs",
         verticalAlign: "middle",
-        "aria-label": "Ecosystem",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: io5.IoPlanet, boxSize: 5, opacity: 0.9 }),
+        "aria-label": "Apps",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: io.IoMdApps, boxSize: 5, opacity: 0.9 }),
         onClick: () => setCurrentContent("ecosystem")
       }
     ),
@@ -7021,267 +6958,174 @@ var QuickActionsSection = ({ mt, setCurrentContent }) => {
     )
   ] });
 };
-var NetworkInfo = () => {
+var Profile = ({ onEditClick }) => {
+  const { darkMode: isDark } = useVeChainKitConfig();
+  const { account } = useWallet();
+  const baseBackgroundColor = isDark ? "whiteAlpha.100" : "#00000005";
+  const headerImageSvg = picasso.picasso(account?.address ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Card,
+    {
+      bg: baseBackgroundColor,
+      borderRadius: "xl",
+      width: "full",
+      position: "relative",
+      overflow: "visible",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            p: 0,
+            backgroundSize: "100% !important",
+            backgroundPosition: "center",
+            position: "relative",
+            h: "80px",
+            background: `no-repeat url('data:image/svg+xml;utf8,${headerImageSvg}')`,
+            w: "100%",
+            borderRadius: "14px 14px 0 0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            position: "absolute",
+            top: "30px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              AccountAvatar,
+              {
+                wallet: account,
+                props: {
+                  width: "100px",
+                  height: "100px",
+                  boxShadow: "0px 0px 3px 2px #00000024"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react.CardBody, { pt: "14", pb: "6", backgroundColor: "none", border: "none", children: /* @__PURE__ */ jsxRuntime.jsx(AddressDisplay, { wallet: account }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.CardFooter, { pt: 0, justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            leftIcon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: fa.FaEdit }),
+            onClick: onEditClick,
+            children: "Edit"
+          }
+        ) })
+      ]
+    }
+  );
+};
+var AccessAndSecurityContent = ({ setCurrentContent }) => {
   const { t } = reactI18next.useTranslation();
-  const { darkMode: isDark, network } = useVeChainKitConfig();
-  const { connection, smartAccount } = useWallet();
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
-        t("Connection Type"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: connection.source.type })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
-        t("Network"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: network.type })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
-        t("Node URL"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: network.nodeUrl || chunkEO3CLT4E_cjs.getConfig(network.type).nodeUrl })
-    ] }),
-    connection.isConnectedWithPrivy ? /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
-        t("Smart Account"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: smartAccount.version ? `v${smartAccount.version}` : "v1" })
-    ] }) : smartAccount.isDeployed && /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        react.Text,
+  const { linkPasskey } = reactAuth.usePrivy();
+  const { darkMode: isDark, privy } = useVeChainKitConfig();
+  const { connection } = useWallet();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.ModalHeader,
         {
-          fontSize: "sm",
+          fontSize: "md",
+          fontWeight: "500",
+          textAlign: "center",
           color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: [
-            t("Smart Account"),
-            ":"
-          ]
+          children: t("Access and security")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        react.Text,
+        ModalBackButton,
         {
-          fontSize: "sm",
-          color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: smartAccount.version ? `v${smartAccount.version}` : "v1"
+          onClick: () => setCurrentContent("settings")
         }
-      )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
-        t("VeChain Kit"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: package_default.version })
-    ] })
-  ] });
-};
-var CrossAppConnectionCard = ({ connectionCache }) => {
-  const { t } = reactI18next.useTranslation();
-  const { darkMode: isDark } = useVeChainKitConfig();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: connectionCache.ecosystemApp && /* @__PURE__ */ jsxRuntime.jsxs(
-    react.VStack,
-    {
-      p: 4,
-      bg: isDark ? "#1a1a1a" : "#f5f5f5",
-      borderRadius: "xl",
-      spacing: 4,
-      w: "full",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            react.Text,
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      react.VStack,
+      {
+        justify: "center",
+        spacing: 3,
+        align: "flex-start",
+        w: "full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+            "Manage your embedded wallet security settings or back it up to a new device."
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ActionButton,
             {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: [
-                t("Logged in with"),
-                ":"
-              ]
+              title: t("Passkey"),
+              description: t(
+                "Enable one click login by adding a passkey to your account."
+              ),
+              onClick: () => {
+                linkPasskey();
+              },
+              leftIcon: io.IoIosFingerPrint,
+              rightIcon: void 0,
+              isDisabled: !privy?.allowPasskeyLinking
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            react.Text,
-            {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: connectionCache.ecosystemApp.name
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            react.Text,
+            ActionButton,
             {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: [
-                t("Connected at"),
-                ":"
-              ]
+              title: t("Login methods"),
+              description: t(
+                connection.isConnectedWithSocialLogin ? "View and manage the login methods linked to your wallet." : "Login methods can be managed only in the app securing your wallet."
+              ),
+              onClick: () => {
+                setCurrentContent("privy-linked-accounts");
+              },
+              isDisabled: !connection.isConnectedWithSocialLogin,
+              leftIcon: gr.GrUserAdmin,
+              rightIcon: md.MdOutlineNavigateNext
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            react.Text,
+            ActionButton,
             {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: new Date(
-                connectionCache.timestamp
-              ).toLocaleString()
+              title: t("Embedded wallet"),
+              description: t(
+                connection.isConnectedWithSocialLogin ? "Store your Recovery Phrase or Private Key in a secure location, avoid losing access to your assets." : "Backup can be done only in the app securing your wallet."
+              ),
+              onClick: () => {
+                setCurrentContent("embedded-wallet");
+              },
+              leftIcon: hi2.HiOutlineWallet,
+              rightIcon: md.MdOutlineNavigateNext
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(NetworkInfo, {})
-      ]
-    }
-  ) });
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { w: "full" })
+  ] });
 };
-var DappKitConnectionCard = () => {
-  const { t } = reactI18next.useTranslation();
-  const { source } = dappKitReact.useWallet();
-  const { darkMode: isDark } = useVeChainKitConfig();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: source && /* @__PURE__ */ jsxRuntime.jsxs(
-    react.VStack,
-    {
-      p: 4,
-      bg: isDark ? "#1a1a1a" : "#f5f5f5",
-      borderRadius: "xl",
-      spacing: 4,
-      w: "full",
-      justifyContent: "space-between",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            react.Text,
-            {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: [
-                t("Logged in with"),
-                ":"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.Text,
-            {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: source
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(NetworkInfo, {})
-      ]
-    }
-  ) });
-};
-var PrivyConnectionCard = () => {
+var SettingsContent = ({
+  setCurrentContent,
+  onLogoutSuccess
+}) => {
+  const contentRef = React8.useRef(null);
   const { t } = reactI18next.useTranslation();
   const { privy, darkMode: isDark } = useVeChainKitConfig();
-  const { data: appInfo, isLoading } = useFetchAppInfo(privy?.appId ?? "");
-  if (isLoading)
-    return /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { w: "full", h: "full", justify: "center", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(react.Spinner, {}) });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: appInfo && /* @__PURE__ */ jsxRuntime.jsxs(
-    react.VStack,
-    {
-      p: 4,
-      bg: isDark ? "#1a1a1a" : "#f5f5f5",
-      borderRadius: "xl",
-      spacing: 4,
-      w: "full",
-      justifyContent: "space-between",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            react.Text,
-            {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: [
-                t("Logged in with"),
-                ":"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.Text,
-            {
-              fontSize: "sm",
-              color: isDark ? "#dfdfdd" : "#4d4d4d",
-              children: Object.values(appInfo)[0].name
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(NetworkInfo, {})
-      ]
-    }
-  ) });
-};
-var WalletSecuredBy = () => {
-  const { connection } = useWallet();
-  const { t } = reactI18next.useTranslation();
-  const { darkMode: isDark, privy } = useVeChainKitConfig();
+  const { connection, disconnect } = useWallet();
   const { getConnectionCache } = useCrossAppConnectionCache();
   const connectionCache = getConnectionCache();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.VStack,
-    {
-      w: "full",
-      align: "stretch",
-      textAlign: "center",
-      mt: 5,
-      p: 3,
-      borderRadius: "lg",
-      bg: isDark ? "whiteAlpha.100" : "blackAlpha.50",
-      shadow: "sm",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "800", children: t("Wallet secured by") }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkX4PAU76A_cjs.PrivyLogo, { isDark, w: "50px" }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: pi.PiLineVertical, ml: 2 }),
-          connection.isConnectedWithVeChain ? /* @__PURE__ */ jsxRuntime.jsx(chunkX4PAU76A_cjs.VechainLogoHorizontal, { isDark, w: "69px" }) : connection.isConnectedWithCrossApp && connectionCache && /* @__PURE__ */ jsxRuntime.jsx(
-            react.Image,
-            {
-              src: connectionCache.ecosystemApp.logoUrl,
-              alt: connectionCache.ecosystemApp.name,
-              maxW: "40px",
-              borderRadius: "md"
-            }
-          ),
-          connection.isConnectedWithSocialLogin && !connection.isConnectedWithVeChain && /* @__PURE__ */ jsxRuntime.jsx(
-            react.Image,
-            {
-              src: privy?.appearance.logo,
-              alt: privy?.appearance.logo,
-              maxW: "40px",
-              borderRadius: "md"
-            }
-          )
-        ] })
-      ]
+  const { data: appInfo } = useFetchAppInfo(privy?.appId ?? "");
+  const { getNotifications } = useNotifications();
+  const notifications = getNotifications();
+  const hasUnreadNotifications = notifications.some((n) => !n.isRead);
+  React8.useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = 0;
     }
-  );
-};
-var EmbeddedWalletContent = ({ setCurrentContent }) => {
-  const { t } = reactI18next.useTranslation();
-  const [showFullText, setShowFullText] = React9.useState(false);
-  const { connectedWallet } = useWallet();
-  const { exportWallet } = reactAuth.usePrivy();
-  const walletImage = chunkEO3CLT4E_cjs.getPicassoImage(connectedWallet?.address ?? "");
-  const { getConnectionCache } = useCrossAppConnectionCache();
-  const { darkMode: isDark } = useVeChainKitConfig();
-  const { connection } = useWallet();
-  const connectionCache = getConnectionCache();
-  return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         react.ModalHeader,
@@ -7290,268 +7134,103 @@ var EmbeddedWalletContent = ({ setCurrentContent }) => {
           fontWeight: "500",
           textAlign: "center",
           color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: t("Embedded Wallet")
+          children: t("Settings")
         }
       ),
+      /* @__PURE__ */ jsxRuntime.jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.ModalBody, { w: "full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ModalBackButton,
+        Profile,
         {
-          onClick: () => setCurrentContent("settings")
+          onEditClick: () => setCurrentContent("account-customization")
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      react.VStack,
-      {
-        justify: "center",
-        spacing: 3,
-        align: "flex-start",
-        w: "full",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { justify: "center", align: "center", w: "full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.Image,
-              {
-                src: walletImage,
-                maxW: "100px",
-                borderRadius: "50%"
-              }
+      /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "full", spacing: 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ActionButton,
+          {
+            style: {
+              marginTop: "10px",
+              borderBottomRadius: connection.isConnectedWithPrivy ? "0px" : "12px"
+            },
+            title: t("Connection details"),
+            description: t(
+              "View the details of your connection to this app."
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(AddressDisplay, { wallet: connectedWallet })
-          ] }),
-          connection.isConnectedWithCrossApp && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-              "This is your main wallet, created by {{element}} and secured by Privy.",
+            onClick: () => {
+              setCurrentContent("connection-details");
+            },
+            leftIcon: vsc.VscDebugDisconnect,
+            rightIcon: md.MdOutlineNavigateNext
+          }
+        ),
+        connection.isConnectedWithPrivy && /* @__PURE__ */ jsxRuntime.jsx(
+          ActionButton,
+          {
+            style: {
+              borderTopRadius: "0px"
+            },
+            title: t("Access and security"),
+            description: t(
+              "Manage your embedded wallet security settings or back it up to a new device."
+            ),
+            onClick: () => {
+              setCurrentContent("access-and-security");
+            },
+            leftIcon: io5.IoShieldOutline,
+            rightIcon: md.MdOutlineNavigateNext
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ActionButton,
+          {
+            style: {
+              marginTop: "10px",
+              borderBottomRadius: "0px"
+            },
+            title: t("Notifications"),
+            description: t("View your notifications and updates."),
+            onClick: () => {
+              setCurrentContent("notifications");
+            },
+            leftIcon: bi.BiBell,
+            rightIcon: md.MdOutlineNavigateNext,
+            extraContent: hasUnreadNotifications && /* @__PURE__ */ jsxRuntime.jsx(
+              react.Box,
               {
-                element: connectionCache?.ecosystemApp?.name
+                minWidth: "16px",
+                height: "16px",
+                bg: "red.500",
+                borderRadius: "full",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                ml: 2,
+                children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "white", children: notifications.filter(
+                  (n) => !n.isRead
+                ).length })
               }
-            ) }),
-            showFullText && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-                "This wallet is the owner of your smart account, which is used as your identity and as a gateway for your blockchain interactions."
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-                "Please be sure to keep this wallet safe and backed up."
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.Button,
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ActionButton,
+          {
+            title: t("Help"),
+            description: t(
+              "Still have some doubts? Check out our FAQs and learn more.",
               {
-                mt: 0,
-                variant: "link",
-                size: "sm",
-                onClick: () => setShowFullText(!showFullText),
-                color: "blue.500",
-                textAlign: "left",
-                children: t(showFullText ? "Show Less" : "Read More")
-              }
-            )
-          ] }),
-          connection.isConnectedWithSocialLogin && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-              "You are using an Embedded Wallet secured by your social login method, ensuring a seamless VeChain experience."
-            ) }),
-            showFullText && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-                "This wallet is the owner of your smart account, which is used as your identity and as a gateway for your blockchain interactions."
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", opacity: 0.5, children: [
-                t(
-                  "We highly recommend exporting your private key to back up your wallet. This ensures you can restore it if needed or transfer it to self-custody using"
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  react.Link,
-                  {
-                    href: "https://www.veworld.net/",
-                    isExternal: true,
-                    color: "gray.500",
-                    fontSize: "14px",
-                    textDecoration: "underline",
-                    children: [
-                      " ",
-                      t("VeWorld Wallet"),
-                      /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ml: 1, as: io5.IoOpenOutline })
-                    ]
-                  }
-                ),
-                "."
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", opacity: 0.5, children: [
-                t("Click"),
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  react.Link,
-                  {
-                    href: "https://docs.vechain-kit.vechain.org/vechain-kit/embedded-wallets",
-                    isExternal: true,
-                    color: "gray.500",
-                    fontSize: "14px",
-                    textDecoration: "underline",
-                    children: t("here")
-                  }
-                ),
-                " ",
-                t(
-                  "to learn more about embedded wallets."
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.Button,
-              {
-                mt: 0,
-                variant: "link",
-                size: "sm",
-                onClick: () => setShowFullText(!showFullText),
-                color: "blue.500",
-                textAlign: "left",
-                children: t(showFullText ? "Show Less" : "Read More")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ActionButton,
-            {
-              title: t("Backup your wallet"),
-              description: t(
-                connection.isConnectedWithSocialLogin ? "Store your Recovery Phrase or Private Key in a secure location, avoid losing access to your assets." : "Backup can be done only in the app securing your wallet."
-              ),
-              onClick: () => {
-                exportWallet();
-              },
-              isDisabled: !connection.isConnectedWithSocialLogin,
-              leftIcon: gi.GiHouseKeys,
-              rightIcon: md.MdOutlineNavigateNext
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ActionButton,
-            {
-              title: t("Login methods"),
-              description: t(
-                connection.isConnectedWithSocialLogin ? "View and manage the login methods linked to your wallet." : "Login methods can be managed only in the app securing your wallet."
-              ),
-              onClick: () => {
-                setCurrentContent("privy-linked-accounts");
-              },
-              isDisabled: !connection.isConnectedWithSocialLogin,
-              leftIcon: md.MdManageAccounts,
-              rightIcon: md.MdOutlineNavigateNext
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Divider, {}),
-      connection.isConnectedWithPrivy && /* @__PURE__ */ jsxRuntime.jsx(WalletSecuredBy, {})
-    ] }) })
-  ] });
-};
-var WalletSettingsContent = ({
-  setCurrentContent,
-  onLogoutSuccess
-}) => {
-  const contentRef = React9.useRef(null);
-  const { t } = reactI18next.useTranslation();
-  const { privy, darkMode: isDark, network } = useVeChainKitConfig();
-  const { connection, disconnect, account } = useWallet();
-  const { getConnectionCache } = useCrossAppConnectionCache();
-  const connectionCache = getConnectionCache();
-  const { data: appInfo } = useFetchAppInfo(privy?.appId ?? "");
-  React9.useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.scrollTop = 0;
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.ModalHeader,
-        {
-          fontSize: "md",
-          fontWeight: "500",
-          textAlign: "center",
-          color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: t("Settings")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.ModalBody, { w: "full", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { justify: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AccountAvatar, { wallet: account, props: { maxW: "100px" } }),
-        /* @__PURE__ */ jsxRuntime.jsx(AddressDisplay, { wallet: account }),
-        network.type !== "main" && /* @__PURE__ */ jsxRuntime.jsx(
-          react.Tag,
-          {
-            size: "sm",
-            colorScheme: "blue",
-            width: "fit-content",
-            justifyContent: "center",
-            padding: "10px",
-            children: network.type === "test" ? t("Testnet") : t("Unknown")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { mt: 10, w: "full", spacing: 3, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton,
-          {
-            title: t("Connection Details"),
-            description: t(
-              "View the details of your connection to this app."
-            ),
-            onClick: () => {
-              setCurrentContent("connection-details");
-            },
-            leftIcon: vsc.VscDebugDisconnect,
-            rightIcon: md.MdOutlineNavigateNext
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton,
-          {
-            title: t("Customize account"),
-            description: t(
-              "Customize your account with a nickname and a picture to easily identify it."
-            ),
-            onClick: () => {
-              setCurrentContent("account-customization");
-            },
-            leftIcon: gi.GiPaintBrush,
-            rightIcon: md.MdOutlineNavigateNext
-          }
-        ),
-        connection.isConnectedWithPrivy && /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton,
-          {
-            title: t("Embedded Wallet"),
-            description: t(
-              "Manage your embedded wallet security settings or back it up to a new device."
-            ),
-            onClick: () => {
-              setCurrentContent("embedded-wallet");
-            },
-            leftIcon: hi2.HiOutlineWallet,
-            rightIcon: md.MdOutlineNavigateNext
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton,
-          {
-            title: t("FAQs"),
-            description: t(
-              "Still have some doubts? Check out our FAQs and learn more.",
-              {
-                appName: connection.isConnectedWithCrossApp ? connectionCache?.ecosystemApp?.name : Object.values(appInfo ?? {})[0]?.name ?? ""
+                appName: connection.isConnectedWithCrossApp ? connectionCache?.ecosystemApp?.name : Object.values(appInfo ?? {})[0]?.name ?? ""
               }
             ),
             onClick: () => setCurrentContent("faq"),
             leftIcon: bs.BsQuestionCircle,
-            rightIcon: md.MdOutlineNavigateNext
+            rightIcon: md.MdOutlineNavigateNext,
+            style: {
+              borderTopRadius: "0px"
+            }
           }
         )
       ] })
@@ -7559,10 +7238,16 @@ var WalletSettingsContent = ({
     /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(
       react.Button,
       {
-        onClick: () => {
-          disconnect();
-          onLogoutSuccess();
-        },
+        onClick: () => setCurrentContent({
+          type: "disconnect-confirm",
+          props: {
+            onDisconnect: () => {
+              disconnect();
+              onLogoutSuccess();
+            },
+            onBack: () => setCurrentContent("settings")
+          }
+        }),
         variant: "vechainKitSecondary",
         leftIcon: /* @__PURE__ */ jsxRuntime.jsx(ri.RiLogoutBoxLine, { color: "#888888" }),
         children: t("Logout")
@@ -7574,10 +7259,10 @@ var AccountCustomizationContent = ({ setCurrentContent }) => {
   const { t } = reactI18next.useTranslation();
   const { network, darkMode: isDark } = useVeChainKitConfig();
   const { account } = useWallet();
-  const fileInputRef = React9.useRef(null);
-  const [isUploading, setIsUploading] = React9.useState(false);
-  const [isProcessing, setIsProcessing] = React9.useState(false);
-  const [showFullText, setShowFullText] = React9.useState(false);
+  const fileInputRef = React8.useRef(null);
+  const [isUploading, setIsUploading] = React8.useState(false);
+  const [isProcessing, setIsProcessing] = React8.useState(false);
+  const [showFullText, setShowFullText] = React8.useState(false);
   const queryClient = reactQuery.useQueryClient();
   const { onUpload } = useSingleImageUpload({
     compressImage: true
@@ -7616,8 +7301,379 @@ var AccountCustomizationContent = ({ setCurrentContent }) => {
     } finally {
       setIsUploading(false);
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.ModalHeader,
+        {
+          fontSize: "md",
+          fontWeight: "500",
+          textAlign: "center",
+          color: isDark ? "#dfdfdd" : "#4d4d4d",
+          children: t("Customize Account")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ModalBackButton,
+        {
+          onClick: () => setCurrentContent("settings")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 3, align: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.VStack,
+        {
+          spacing: 3,
+          w: "full",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+              "Customize your account with a unique .vet domain name and profile image to enhance your identity across VeChain applications."
+            ) }),
+            showFullText && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+                "Your customizations are linked to your .vet domain name, making them portable across different applications."
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+                "To get started with customization, first secure your .vet domain name. Once you have a domain, you can add a profile image that will be visible wherever you use your account."
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+                "Changing your domain name will update also your profile image."
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Button,
+              {
+                mt: 0,
+                variant: "link",
+                size: "sm",
+                onClick: () => setShowFullText(!showFullText),
+                color: "blue.500",
+                textAlign: "left",
+                children: t(showFullText ? "Show Less" : "Read More")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ActionButton,
+        {
+          style: {
+            mt: 3
+          },
+          title: account?.domain ? account?.domain : t("Choose account name"),
+          description: t(
+            "Choose a unique .vet domain name for your account."
+          ),
+          onClick: () => {
+            if (account?.domain) {
+              setCurrentContent({
+                type: "choose-name-search",
+                props: {
+                  name: "",
+                  setCurrentContent
+                }
+              });
+            } else {
+              setCurrentContent("choose-name");
+            }
+          },
+          leftIcon: fa.FaRegAddressCard,
+          rightIcon: md.MdOutlineNavigateNext
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ActionButton,
+        {
+          title: t("Update profile image"),
+          description: t(
+            !account?.domain ? "You can change your profile image only after you setup your domain name." : "Customize your account by adding a profile image, which will be displayed on the apps you use."
+          ),
+          onClick: () => fileInputRef.current?.click(),
+          leftImage: account?.image,
+          isLoading: isUploading || isProcessing,
+          isDisabled: !account?.domain,
+          loadingText: isUploading ? t("Uploading image") : t("Setting image")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "file",
+          ref: fileInputRef,
+          hidden: true,
+          accept: "image/*",
+          onChange: async (event) => await handleImageUpload(event)
+        }
+      )
+    ] }) })
+  ] });
+};
+var NetworkInfo = () => {
+  const { t } = reactI18next.useTranslation();
+  const { darkMode: isDark, network } = useVeChainKitConfig();
+  const { connection, smartAccount } = useWallet();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
+        t("Connection Type"),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: connection.source.type })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
+        t("Network"),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: network.type })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
+        t("Node URL"),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: network.nodeUrl || chunkEO3CLT4E_cjs.getConfig(network.type).nodeUrl })
+    ] }),
+    connection.isConnectedWithPrivy ? /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
+        t("Smart Account"),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: smartAccount.version ? `v${smartAccount.version}` : "v1" })
+    ] }) : smartAccount.isDeployed && /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.Text,
+        {
+          fontSize: "sm",
+          color: isDark ? "#dfdfdd" : "#4d4d4d",
+          children: [
+            t("Smart Account"),
+            ":"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Text,
+        {
+          fontSize: "sm",
+          color: isDark ? "#dfdfdd" : "#4d4d4d",
+          children: smartAccount.version ? `v${smartAccount.version}` : "v1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: [
+        t("VeChain Kit"),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: isDark ? "#dfdfdd" : "#4d4d4d", children: package_default.version })
+    ] })
+  ] });
+};
+var CrossAppConnectionCard = ({ connectionCache }) => {
+  const { t } = reactI18next.useTranslation();
+  const { darkMode: isDark } = useVeChainKitConfig();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: connectionCache.ecosystemApp && /* @__PURE__ */ jsxRuntime.jsxs(
+    react.VStack,
+    {
+      p: 4,
+      bg: isDark ? "#1a1a1a" : "#f5f5f5",
+      borderRadius: "xl",
+      spacing: 4,
+      w: "full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: [
+                t("Logged in with"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: connectionCache.ecosystemApp.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: [
+                t("Connected at"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: new Date(
+                connectionCache.timestamp
+              ).toLocaleString()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(NetworkInfo, {})
+      ]
+    }
+  ) });
+};
+var DappKitConnectionCard = () => {
+  const { t } = reactI18next.useTranslation();
+  const { source } = dappKitReact.useWallet();
+  const { darkMode: isDark } = useVeChainKitConfig();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: source && /* @__PURE__ */ jsxRuntime.jsxs(
+    react.VStack,
+    {
+      p: 4,
+      bg: isDark ? "#1a1a1a" : "#f5f5f5",
+      borderRadius: "xl",
+      spacing: 4,
+      w: "full",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: [
+                t("Logged in with"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: source
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(NetworkInfo, {})
+      ]
+    }
+  ) });
+};
+var PrivyConnectionCard = () => {
+  const { t } = reactI18next.useTranslation();
+  const { privy, darkMode: isDark } = useVeChainKitConfig();
+  const { data: appInfo, isLoading } = useFetchAppInfo(privy?.appId ?? "");
+  if (isLoading)
+    return /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { w: "full", h: "full", justify: "center", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(react.Spinner, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: appInfo && /* @__PURE__ */ jsxRuntime.jsxs(
+    react.VStack,
+    {
+      p: 4,
+      bg: isDark ? "#1a1a1a" : "#f5f5f5",
+      borderRadius: "xl",
+      spacing: 4,
+      w: "full",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "full", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: [
+                t("Logged in with"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "#dfdfdd" : "#4d4d4d",
+              children: Object.values(appInfo)[0].name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(NetworkInfo, {})
+      ]
+    }
+  ) });
+};
+var WalletSecuredBy = () => {
+  const { connection } = useWallet();
+  const { t } = reactI18next.useTranslation();
+  const { darkMode: isDark, privy } = useVeChainKitConfig();
+  const { getConnectionCache } = useCrossAppConnectionCache();
+  const connectionCache = getConnectionCache();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.VStack,
+    {
+      w: "full",
+      align: "stretch",
+      textAlign: "center",
+      mt: 5,
+      p: 3,
+      borderRadius: "lg",
+      bg: isDark ? "whiteAlpha.100" : "blackAlpha.50",
+      shadow: "sm",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "800", children: t("Wallet secured by") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkX4PAU76A_cjs.PrivyLogo, { isDark, w: "50px" }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: pi.PiLineVertical, ml: 2 }),
+          connection.isConnectedWithVeChain ? /* @__PURE__ */ jsxRuntime.jsx(chunkX4PAU76A_cjs.VechainLogoHorizontal, { isDark, w: "69px" }) : connection.isConnectedWithCrossApp && connectionCache && /* @__PURE__ */ jsxRuntime.jsx(
+            react.Image,
+            {
+              src: connectionCache.ecosystemApp.logoUrl,
+              alt: connectionCache.ecosystemApp.name,
+              maxW: "40px",
+              borderRadius: "md"
+            }
+          ),
+          connection.isConnectedWithSocialLogin && !connection.isConnectedWithVeChain && /* @__PURE__ */ jsxRuntime.jsx(
+            react.Image,
+            {
+              src: privy?.appearance.logo,
+              alt: privy?.appearance.logo,
+              maxW: "40px",
+              borderRadius: "md"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var EmbeddedWalletContent = ({ setCurrentContent }) => {
+  const { t } = reactI18next.useTranslation();
+  const { connectedWallet, connection } = useWallet();
+  const [showFullText, setShowFullText] = React8.useState(false);
+  const walletImage = chunkEO3CLT4E_cjs.getPicassoImage(connectedWallet?.address ?? "");
+  const { getConnectionCache } = useCrossAppConnectionCache();
+  const connectionCache = getConnectionCache();
+  const { darkMode: isDark } = useVeChainKitConfig();
+  const { exportWallet } = reactAuth.usePrivy();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         react.ModalHeader,
@@ -7626,38 +7682,49 @@ var AccountCustomizationContent = ({ setCurrentContent }) => {
           fontWeight: "500",
           textAlign: "center",
           color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: t("Customize Account")
+          children: t("Embedded wallet")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ModalBackButton,
         {
-          onClick: () => setCurrentContent("settings")
+          onClick: () => setCurrentContent("access-and-security")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 3, align: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        react.VStack,
-        {
-          spacing: 3,
-          w: "full",
-          justifyContent: "flex-start",
-          alignItems: "flex-start",
-          children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      react.VStack,
+      {
+        justify: "center",
+        spacing: 3,
+        align: "flex-start",
+        w: "full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { justify: "center", align: "center", w: "full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Image,
+              {
+                src: walletImage,
+                maxW: "100px",
+                borderRadius: "50%"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(AddressDisplay, { wallet: connectedWallet })
+          ] }),
+          connection.isConnectedWithCrossApp && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-              "Customize your account with a unique .vet domain name and profile image to enhance your identity across VeChain applications."
+              "This is your main wallet, created by {{element}} and secured by Privy.",
+              {
+                element: connectionCache?.ecosystemApp?.name
+              }
             ) }),
             showFullText && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-                "Your customizations are linked to your .vet domain name, making them portable across different applications."
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-                "To get started with customization, first secure your .vet domain name. Once you have a domain, you can add a profile image that will be visible wherever you use your account."
+                "This wallet is the owner of your smart account, which is used as your identity and as a gateway for your blockchain interactions."
               ) }),
               /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
-                "Changing your domain name will update also your profile image."
+                "Please be sure to keep this wallet safe and backed up."
               ) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -7672,60 +7739,89 @@ var AccountCustomizationContent = ({ setCurrentContent }) => {
                 children: t(showFullText ? "Show Less" : "Read More")
               }
             )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ActionButton,
-        {
-          style: {
-            mt: 3
-          },
-          title: account?.domain ? account?.domain : t("Choose account name"),
-          description: t(
-            "Choose a unique .vet domain name for your account."
-          ),
-          onClick: () => {
-            if (account?.domain) {
-              setCurrentContent({
-                type: "choose-name-search",
-                props: {
-                  name: "",
-                  setCurrentContent
-                }
-              });
-            } else {
-              setCurrentContent("choose-name");
+          ] }),
+          connection.isConnectedWithSocialLogin && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+              "You are using an Embedded Wallet secured by your social login method, ensuring a seamless VeChain experience."
+            ) }),
+            showFullText && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", opacity: 0.5, children: t(
+                "This wallet is the owner of your smart account, which is used as your identity and as a gateway for your blockchain interactions."
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", opacity: 0.5, children: [
+                t(
+                  "We highly recommend exporting your private key to back up your wallet. This ensures you can restore it if needed or transfer it to self-custody using"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  react.Link,
+                  {
+                    href: "https://www.veworld.net/",
+                    isExternal: true,
+                    color: "gray.500",
+                    fontSize: "14px",
+                    textDecoration: "underline",
+                    children: [
+                      " ",
+                      t("VeWorld Wallet"),
+                      /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ml: 1, as: io5.IoOpenOutline })
+                    ]
+                  }
+                ),
+                "."
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", opacity: 0.5, children: [
+                t("Click"),
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Link,
+                  {
+                    href: "https://docs.vechain-kit.vechain.org/vechain-kit/embedded-wallets",
+                    isExternal: true,
+                    color: "gray.500",
+                    fontSize: "14px",
+                    textDecoration: "underline",
+                    children: t("here")
+                  }
+                ),
+                " ",
+                t(
+                  "to learn more about embedded wallets."
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Button,
+              {
+                mt: 0,
+                variant: "link",
+                size: "sm",
+                onClick: () => setShowFullText(!showFullText),
+                color: "blue.500",
+                textAlign: "left",
+                children: t(showFullText ? "Show Less" : "Read More")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ActionButton,
+            {
+              title: t("Backup your wallet"),
+              description: t(
+                connection.isConnectedWithSocialLogin ? "Store your Recovery Phrase or Private Key in a secure location, avoid losing access to your assets." : "Backup can be done only in the app securing your wallet."
+              ),
+              onClick: () => {
+                exportWallet();
+              },
+              isDisabled: !connection.isConnectedWithSocialLogin,
+              leftIcon: gi.GiHouseKeys
             }
-          },
-          leftIcon: fa.FaRegAddressCard,
-          rightIcon: md.MdOutlineNavigateNext
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ActionButton,
-        {
-          title: t("Update profile image"),
-          description: t(
-            !account?.domain ? "You can change your profile image only after you setup your domain name." : "Customize your account by adding a profile image, which will be displayed on the apps you use."
-          ),
-          onClick: () => fileInputRef.current?.click(),
-          leftImage: account?.image,
-          isLoading: isUploading || isProcessing,
-          isDisabled: !account?.domain,
-          loadingText: isUploading ? t("Uploading image") : t("Setting image")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "file",
-          ref: fileInputRef,
-          hidden: true,
-          accept: "image/*",
-          onChange: async (event) => await handleImageUpload(event)
-        }
-      )
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Divider, {}),
+      connection.isConnectedWithPrivy && /* @__PURE__ */ jsxRuntime.jsx(WalletSecuredBy, {})
     ] }) })
   ] });
 };
@@ -7736,7 +7832,7 @@ var SelectTokenContent = ({ onSelectToken, onBack }) => {
   const { balances, prices } = useBalances({
     address: account?.address ?? ""
   });
-  const [searchQuery, setSearchQuery] = React9.useState("");
+  const [searchQuery, setSearchQuery] = React8.useState("");
   const { network } = useVeChainKitConfig();
   const tokens = [
     {
@@ -7872,23 +7968,23 @@ var SendTokenContent = ({
 }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [toAddressOrDomain, setToAddress] = React9.useState("");
-  const [amount, setAmount] = React9.useState("");
-  const [error, setError] = React9.useState(null);
-  const [isSelectingToken, setIsSelectingToken] = React9.useState(
+  const [toAddressOrDomain, setToAddress] = React8.useState("");
+  const [amount, setAmount] = React8.useState("");
+  const [error, setError] = React8.useState(null);
+  const [isSelectingToken, setIsSelectingToken] = React8.useState(
     isNavigatingFromMain && !preselectedToken
   );
-  const [selectedToken, setSelectedToken] = React9.useState(
+  const [selectedToken, setSelectedToken] = React8.useState(
     preselectedToken ?? null
   );
-  const [addressError, setAddressError] = React9.useState(null);
-  const [isInitialTokenSelection, setIsInitialTokenSelection] = React9.useState(isNavigatingFromMain);
+  const [addressError, setAddressError] = React8.useState(null);
+  const [isInitialTokenSelection, setIsInitialTokenSelection] = React8.useState(isNavigatingFromMain);
   const {
     domain: resolvedDomain,
     address: resolvedAddress,
     isLoading: isLoadingDomain
   } = dappKitReact.useVechainDomain({ addressOrDomain: toAddressOrDomain });
-  const validateAddress = React9.useCallback(
+  const validateAddress = React8.useCallback(
     (value) => {
       if (!value) {
         setAddressError(t("Address is required"));
@@ -8202,7 +8298,7 @@ var SendTokenSummaryContent = ({
   const transactionModal = react.useDisclosure();
   const { data: avatar } = useGetAvatar(resolvedDomain);
   const { network } = useVeChainKitConfig();
-  const toImageSrc = React9.useMemo(() => {
+  const toImageSrc = React8.useMemo(() => {
     if (avatar) {
       return chunkEO3CLT4E_cjs.convertUriToUrl(avatar, network.type);
     }
@@ -8647,11 +8743,11 @@ var ChooseNameSearchContent = ({
   const { t } = reactI18next.useTranslation();
   const { account } = useWallet();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [name, setName] = React9.useState(initialName);
-  const [error, setError] = React9.useState(null);
-  const [isOwnDomain, setIsOwnDomain] = React9.useState(false);
-  const [isAvailable, setIsAvailable] = React9.useState(false);
-  const [hasInteracted, setHasInteracted] = React9.useState(false);
+  const [name, setName] = React8.useState(initialName);
+  const [error, setError] = React8.useState(null);
+  const [isOwnDomain, setIsOwnDomain] = React8.useState(false);
+  const [isAvailable, setIsAvailable] = React8.useState(false);
+  const [hasInteracted, setHasInteracted] = React8.useState(false);
   const { data: ensRecordExists, isLoading: isEnsCheckLoading } = useEnsRecordExists(name);
   const { data: domainInfo, isLoading: isDomainInfoLoading } = useVechainDomain(`${name}.veworld.vet`);
   const { data: isProtected, isLoading: isProtectedLoading } = useIsDomainProtected(name);
@@ -8669,7 +8765,7 @@ var ChooseNameSearchContent = ({
     ...veworldDomainsOfAddress?.domains || [],
     ...vetDomainsOfAddress?.domains || []
   ];
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!hasInteracted) return;
     if (name.length < 3) {
       setError(t("Name must be at least 3 characters long"));
@@ -8836,8 +8932,8 @@ var ConfirmationModalContent = ({
   const { t } = reactI18next.useTranslation();
   const { connection } = useWallet();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [showTimeout, setShowTimeout] = React9.useState(false);
-  React9.useEffect(() => {
+  const [showTimeout, setShowTimeout] = React8.useState(false);
+  React8.useEffect(() => {
     setShowTimeout(false);
     const timer = setTimeout(() => {
       setShowTimeout(true);
@@ -9024,8 +9120,8 @@ var LoadingModalContent = ({
   const { network } = useVeChainKitConfig();
   const { darkMode: isDark } = useVeChainKitConfig();
   const explorerUrl = chunkEO3CLT4E_cjs.getConfig(network.type).explorerUrl;
-  const [showTimeout, setShowTimeout] = React9.useState(false);
-  React9.useEffect(() => {
+  const [showTimeout, setShowTimeout] = React8.useState(false);
+  React8.useEffect(() => {
     const timer = setTimeout(() => {
       setShowTimeout(true);
     }, 12e3);
@@ -9236,7 +9332,7 @@ var TransactionModal = ({
   txId,
   progress
 }) => {
-  const modalContent = React9.useMemo(() => {
+  const modalContent = React8.useMemo(() => {
     if (status === "pending")
       return /* @__PURE__ */ jsxRuntime.jsx(
         ConfirmationModalContent,
@@ -9417,7 +9513,7 @@ var ChooseNameSummaryContent = ({
 var FAQAccordion = () => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [searchQuery, setSearchQuery] = React9.useState("");
+  const [searchQuery, setSearchQuery] = React8.useState("");
   const faqItems = [
     {
       question: t("What is VeChain?"),
@@ -9908,7 +10004,18 @@ var en_default = {
   "{{element}} website": "{{element}} website",
   "{{name}}": "{{name}}",
   "Sending to OceanX or other exchanges may result in loss of funds.": "Sending to OceanX or other exchanges may result in loss of funds.",
-  "Send the tokens to your VeWorld wallet first.": "Send the tokens to your VeWorld wallet first."
+  "Send the tokens to your VeWorld wallet first.": "Send the tokens to your VeWorld wallet first.",
+  "Sign in with a wallet from other x2earn apps.": "Sign in with a wallet from other x2earn apps.",
+  "Select an app": "Select an app",
+  Other: "Other",
+  Apps: "Apps",
+  "View your notifications and updates.": "View your notifications and updates.",
+  "Access and security": "Access and security",
+  "Connection details": "Connection details",
+  "Customize profile": "Customize profile",
+  Help: "Help",
+  "Add Passkey": "Add Passkey",
+  "Embedded wallet": "Embedded wallet"
 };
 
 // src/languages/de.json
@@ -12021,7 +12128,7 @@ var FAQContent = ({ onGoBack }) => {
           fontWeight: "500",
           textAlign: "center",
           color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: t("Info")
+          children: t("Help")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ModalBackButton, { onClick: onGoBack }),
@@ -12107,7 +12214,6 @@ var ConnectionDetailsContent = ({ onGoBack }) => {
   const { getConnectionCache } = useCrossAppConnectionCache();
   const { privy, darkMode: isDark } = useVeChainKitConfig();
   const { connection } = useWallet();
-  const { source } = dappKitReact.useWallet();
   const { data: appInfo } = useFetchAppInfo(privy?.appId ?? "");
   const connectionCache = getConnectionCache();
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
@@ -12135,23 +12241,7 @@ var ConnectionDetailsContent = ({ onGoBack }) => {
     /* @__PURE__ */ jsxRuntime.jsxs(react.ModalBody, { w: "full", children: [
       connection.isConnectedWithCrossApp && connectionCache && /* @__PURE__ */ jsxRuntime.jsx(CrossAppConnectionCard, { connectionCache }),
       connection.isConnectedWithSocialLogin && /* @__PURE__ */ jsxRuntime.jsx(PrivyConnectionCard, {}),
-      connection.isConnectedWithDappKit && /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "stretch", textAlign: "center", mt: 5, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DappKitConnectionCard, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.Text,
-          {
-            fontSize: "sm",
-            opacity: 0.5,
-            textAlign: "center",
-            children: t(
-              "This is your main wallet and identity. Please be sure to keep it safe and backed up. Go to {{element}} app or extension to manage your security settings.",
-              {
-                element: source
-              }
-            )
-          }
-        )
-      ] }),
+      connection.isConnectedWithDappKit && /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { align: "stretch", textAlign: "center", mt: 5, children: /* @__PURE__ */ jsxRuntime.jsx(DappKitConnectionCard, {}) }),
       (connection.isConnectedWithSocialLogin || connection.isConnectedWithCrossApp) && /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 4, mt: 5, children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12252,10 +12342,10 @@ var ConfirmUnlink = ({
 var PrivyLinkedAccounts = ({ onBack }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [unlinkingAccount, setUnlinkingAccount] = React9.useState(null);
-  const [showLinkOptions, setShowLinkOptions] = React9.useState(false);
-  const [showFullText, setShowFullText] = React9.useState(false);
-  const [isLoadingUnlink, setIsLoadingUnlink] = React9.useState(false);
+  const [unlinkingAccount, setUnlinkingAccount] = React8.useState(null);
+  const [showLinkOptions, setShowLinkOptions] = React8.useState(false);
+  const [showFullText, setShowFullText] = React8.useState(false);
+  const [isLoadingUnlink, setIsLoadingUnlink] = React8.useState(false);
   const {
     user,
     linkEmail,
@@ -12423,22 +12513,7 @@ var PrivyLinkedAccounts = ({ onBack }) => {
         ),
         /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 3, align: "stretch", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton,
-          {
-            title: t("Handle Passkey Login"),
-            description: t(
-              "Enable one click login by adding a passkey to your account."
-            ),
-            onClick: () => {
-              linkPasskey();
-            },
-            leftIcon: io.IoIosFingerPrint,
-            rightIcon: void 0,
-            isDisabled: !privy?.allowPasskeyLinking
-          }
-        ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 3, align: "stretch", w: "full", children: [
         canLinkGoogle && /* @__PURE__ */ jsxRuntime.jsx(
           ActionButton,
           {
@@ -12815,9 +12890,9 @@ var NotificationsContent = ({ setCurrentContent }) => {
     clearAllNotifications,
     markAsRead
   } = useNotifications();
-  const [isArchiveView, setIsArchiveView] = React9.useState(false);
-  const [notifications, setNotifications] = React9.useState(getNotifications());
-  const [archivedNotifications, setArchivedNotifications] = React9.useState(
+  const [isArchiveView, setIsArchiveView] = React8.useState(false);
+  const [notifications, setNotifications] = React8.useState(getNotifications());
+  const [archivedNotifications, setArchivedNotifications] = React8.useState(
     getArchivedNotifications()
   );
   const handleClearAll = () => {
@@ -12846,9 +12921,14 @@ var NotificationsContent = ({ setCurrentContent }) => {
     if (b.id === "multiclause") return 1;
     return b.timestamp - a.timestamp;
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScrollToTopWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(StickyHeaderContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ModalBackButton,
+        {
+          onClick: () => setCurrentContent("settings")
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         react.ModalHeader,
         {
@@ -12861,7 +12941,7 @@ var NotificationsContent = ({ setCurrentContent }) => {
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Container, { maxW: "container.lg", h: "350px", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Container, { maxW: "container.lg", h: ["auto", "540px"], children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { w: "full", children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 4, align: "stretch", w: "full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -13066,7 +13146,7 @@ var DEFAULT_APPS = [
 var ExploreEcosystemContent = ({ setCurrentContent }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark, network } = useVeChainKitConfig();
-  const [searchQuery, setSearchQuery] = React9.useState("");
+  const [searchQuery, setSearchQuery] = React8.useState("");
   const { data: currentRoundId } = useCurrentAllocationsRoundId();
   const { data: vbdApps } = useMostVotedAppsInRound(
     currentRoundId ? (parseInt(currentRoundId) - 1).toString() : "1"
@@ -13088,7 +13168,7 @@ var ExploreEcosystemContent = ({ setCurrentContent }) => {
           fontWeight: "500",
           textAlign: "center",
           color: isDark ? "#dfdfdd" : "#4d4d4d",
-          children: t("VeChain Ecosystem")
+          children: t("Apps")
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ModalBackButton, { onClick: () => setCurrentContent("main") }),
@@ -13294,8 +13374,8 @@ var AccountModal = ({
 }) => {
   useNotificationAlerts();
   const { account } = useWallet();
-  const [currentContent, setCurrentContent] = React9.useState(initialContent);
-  React9.useEffect(() => {
+  const [currentContent, setCurrentContent] = React8.useState(initialContent);
+  React8.useEffect(() => {
     if (isOpen && initialContent) {
       setCurrentContent(initialContent);
     }
@@ -13335,7 +13415,7 @@ var AccountModal = ({
         );
       case "settings":
         return /* @__PURE__ */ jsxRuntime.jsx(
-          WalletSettingsContent,
+          SettingsContent,
           {
             setCurrentContent,
             onLogoutSuccess: onClose
@@ -13348,9 +13428,9 @@ var AccountModal = ({
             setCurrentContent
           }
         );
-      case "embedded-wallet":
+      case "access-and-security":
         return /* @__PURE__ */ jsxRuntime.jsx(
-          EmbeddedWalletContent,
+          AccessAndSecurityContent,
           {
             setCurrentContent
           }
@@ -13384,7 +13464,7 @@ var AccountModal = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           PrivyLinkedAccounts,
           {
-            onBack: () => setCurrentContent("embedded-wallet")
+            onBack: () => setCurrentContent("access-and-security")
           }
         );
       case "ecosystem":
@@ -13401,6 +13481,13 @@ var AccountModal = ({
             setCurrentContent
           }
         );
+      case "embedded-wallet":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EmbeddedWalletContent,
+          {
+            setCurrentContent
+          }
+        );
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13415,8 +13502,8 @@ var AccountModal = ({
   );
 };
 var ConnectModal = ({ isOpen, onClose }) => {
-  const [currentContent, setCurrentContent] = React9.useState("main");
-  React9.useEffect(() => {
+  const [currentContent, setCurrentContent] = React8.useState("main");
+  React8.useEffect(() => {
     if (isOpen) {
       setCurrentContent("main");
     }
@@ -13616,7 +13703,7 @@ var WalletButton = ({
       connectModal.onOpen();
     }
   };
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     const embeddedWallet = user?.wallet?.address;
     const asyncCreateWallet = async () => {
       try {
@@ -13710,7 +13797,7 @@ var TransactionToast = ({
     onClose();
     resetStatus();
   };
-  const toastContent = React9.useMemo(() => {
+  const toastContent = React8.useMemo(() => {
     const config = statusConfig[status];
     if (!config) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13835,9 +13922,9 @@ var LoadingContent = ({
 }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [showTimeout, setShowTimeout] = React9__default.default.useState(false);
-  const [showSafariMessage, setShowSafariMessage] = React9__default.default.useState(false);
-  React9__default.default.useEffect(() => {
+  const [showTimeout, setShowTimeout] = React8__default.default.useState(false);
+  const [showSafariMessage, setShowSafariMessage] = React8__default.default.useState(false);
+  React8__default.default.useEffect(() => {
     if (reactDeviceDetect.isSafari) {
       setShowSafariMessage(true);
     }
@@ -13963,8 +14050,8 @@ var ErrorContent = ({
 var EcosystemContent = ({ onClose, appsInfo, isLoading }) => {
   const { t } = reactI18next.useTranslation();
   const { darkMode: isDark } = useVeChainKitConfig();
-  const [loginError, setLoginError] = React9.useState();
-  const [selectedApp, setSelectedApp] = React9.useState();
+  const [loginError, setLoginError] = React8.useState();
+  const [selectedApp, setSelectedApp] = React8.useState();
   const loginLoadingModal = react.useDisclosure();
   const { setConnectionCache } = useCrossAppConnectionCache();
   const { login: loginWithCrossApp } = usePrivyCrossAppSdk();
@@ -14023,8 +14110,8 @@ var EcosystemContent = ({ onClose, appsInfo, isLoading }) => {
             display: "flex",
             gap: 2,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: io5.IoPlanet, size: "20px" }),
-              t("Ecosystem Login")
+              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: io.IoMdApps, size: "20px" }),
+              t("Select an app")
             ]
           }
         ),
@@ -14039,9 +14126,7 @@ var EcosystemContent = ({ onClose, appsInfo, isLoading }) => {
             opacity: 0.5,
             mb: 4,
             textAlign: "center",
-            children: t(
-              "Use your existing VeChain wallet from other ecosystem apps to sign in seamlessly."
-            )
+            children: t("Sign in with a wallet from other x2earn apps.")
           }
         ),
         isLoading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -14158,16 +14243,14 @@ var initializeI18n = (i18nInstance) => {
   });
 };
 var DEFAULT_PRIVY_ECOSYSTEM_APP_IDS = [
-  "cm4wxxujb022fyujl7g0thb21",
-  //vechain
   "clz41gcg00e4ay75dmq3uzzgr",
   //cleanify
   "cm153hrup0817axti38avlfyg"
   //greencart
 ];
-var VeChainKitContext = React9.createContext(null);
+var VeChainKitContext = React8.createContext(null);
 var useVeChainKitConfig = () => {
-  const context = React9.useContext(VeChainKitContext);
+  const context = React8.useContext(VeChainKitContext);
   if (!context) {
     throw new Error("useVeChainKitConfig must be used within VeChainKit");
   }
@@ -14187,47 +14270,43 @@ var VeChainKitProvider = ({
   language = "en",
   network
 }) => {
-  const [isConnectModalOpen, setIsConnectModalOpen] = React9.useState(false);
-  const openConnectModal = React9.useCallback(() => setIsConnectModalOpen(true), []);
-  const closeConnectModal = React9.useCallback(
+  const [isConnectModalOpen, setIsConnectModalOpen] = React8.useState(false);
+  const openConnectModal = React8.useCallback(() => setIsConnectModalOpen(true), []);
+  const closeConnectModal = React8.useCallback(
     () => setIsConnectModalOpen(false),
     []
   );
-  const [isAccountModalOpen, setIsAccountModalOpen] = React9.useState(false);
-  const openAccountModal = React9.useCallback(() => setIsAccountModalOpen(true), []);
-  const closeAccountModal = React9.useCallback(
+  const [isAccountModalOpen, setIsAccountModalOpen] = React8.useState(false);
+  const openAccountModal = React8.useCallback(() => setIsAccountModalOpen(true), []);
+  const closeAccountModal = React8.useCallback(
     () => setIsAccountModalOpen(false),
     []
   );
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React9.useState(false);
-  const openTransactionModal = React9.useCallback(
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React8.useState(false);
+  const openTransactionModal = React8.useCallback(
     () => setIsTransactionModalOpen(true),
     []
   );
-  const closeTransactionModal = React9.useCallback(
+  const closeTransactionModal = React8.useCallback(
     () => setIsTransactionModalOpen(false),
     []
   );
-  const [isTransactionToastOpen, setIsTransactionToastOpen] = React9.useState(false);
-  const openTransactionToast = React9.useCallback(
+  const [isTransactionToastOpen, setIsTransactionToastOpen] = React8.useState(false);
+  const openTransactionToast = React8.useCallback(
     () => setIsTransactionToastOpen(true),
     []
   );
-  const closeTransactionToast = React9.useCallback(
+  const closeTransactionToast = React8.useCallback(
     () => setIsTransactionToastOpen(false),
     []
   );
-  const [accountModalContent, setAccountModalContent] = React9.useState("main");
-  const allowedEcosystemApps = React9.useMemo(() => {
+  const [accountModalContent, setAccountModalContent] = React8.useState("main");
+  const allowedEcosystemApps = React8.useMemo(() => {
     const userEcosystemMethods = loginMethods?.find(
       (method35) => method35.method === "ecosystem"
     );
     return userEcosystemMethods?.allowedApps ?? DEFAULT_PRIVY_ECOSYSTEM_APP_IDS;
   }, [loginMethods]);
-  const privyLoginMethods = [
-    ...privy?.loginMethods ?? [],
-    ...allowedEcosystemApps.map((appID) => `privy:${appID}`)
-  ];
   let privyAppId, privyClientId;
   if (!privy) {
     privyAppId = "clzdb5k0b02b9qvzjm6jpknsc";
@@ -14236,7 +14315,7 @@ var VeChainKitProvider = ({
     privyAppId = privy.appId;
     privyClientId = privy.clientId;
   }
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     initializeI18n(i18n_default);
     if (language) {
       i18n_default.changeLanguage(language);
@@ -14291,7 +14370,7 @@ var VeChainKitProvider = ({
             config: {
               loginMethodsAndOrder: {
                 // @ts-ignore
-                primary: privyLoginMethods
+                primary: privy?.loginMethods
               },
               appearance: {
                 theme: darkMode ? "dark" : "light",
@@ -14580,7 +14659,7 @@ var VechainKitThemeProvider = ({
   children,
   darkMode = false
 }) => {
-  const theme = React9.useMemo(
+  const theme = React8.useMemo(
     () => ({
       ...VechainKitTheme,
       config: {
@@ -14608,7 +14687,13 @@ Object.defineProperty(exports, "useConnex", {
   enumerable: true,
   get: function () { return dappKitReact.useConnex; }
 });
+Object.defineProperty(exports, "useDappKitWallet", {
+  enumerable: true,
+  get: function () { return dappKitReact.useWallet; }
+});
 exports.APP_SECURITY_LEVELS = APP_SECURITY_LEVELS;
+exports.AccessAndSecurityContent = AccessAndSecurityContent;
+exports.AccessAndSecurityModalProvider = AccessAndSecurityModalProvider;
 exports.AccountAvatar = AccountAvatar;
 exports.AccountCustomizationContent = AccountCustomizationContent;
 exports.AccountCustomizationModalProvider = AccountCustomizationModalProvider;
@@ -14636,7 +14721,6 @@ exports.EcosystemButton = EcosystemButton;
 exports.EcosystemModal = EcosystemModal;
 exports.EmailLoginButton = EmailLoginButton;
 exports.EmbeddedWalletContent = EmbeddedWalletContent;
-exports.EmbeddedWalletSettingsModalProvider = EmbeddedWalletSettingsModalProvider;
 exports.ExchangeWarningAlert = ExchangeWarningAlert;
 exports.ExploreEcosystemModalProvider = ExploreEcosystemModalProvider;
 exports.FAQContent = FAQContent;
@@ -14657,6 +14741,7 @@ exports.PRICE_FEED_IDS = PRICE_FEED_IDS;
 exports.PasskeyLoginButton = PasskeyLoginButton;
 exports.PrivyButton = PrivyButton;
 exports.PrivyWalletProvider = PrivyWalletProvider;
+exports.Profile = Profile;
 exports.QuickActionsSection = QuickActionsSection;
 exports.ReceiveModalProvider = ReceiveModalProvider;
 exports.ReceiveTokenContent = ReceiveTokenContent;
@@ -14667,6 +14752,7 @@ exports.SelectTokenContent = SelectTokenContent;
 exports.SendTokenContent = SendTokenContent;
 exports.SendTokenModalProvider = SendTokenModalProvider;
 exports.SendTokenSummaryContent = SendTokenSummaryContent;
+exports.SettingsContent = SettingsContent;
 exports.SocialLoginButtons = SocialLoginButtons;
 exports.StickyFooterContainer = StickyFooterContainer;
 exports.StickyHeaderContainer = StickyHeaderContainer;
@@ -14684,7 +14770,6 @@ exports.VechainKitThemeProvider = VechainKitThemeProvider;
 exports.VersionFooter = VersionFooter;
 exports.WalletButton = WalletButton;
 exports.WalletModalProvider = WalletModalProvider;
-exports.WalletSettingsContent = WalletSettingsContent;
 exports.buildClaimRewardsTx = buildClaimRewardsTx;
 exports.buildClaimRoundReward = buildClaimRoundReward;
 exports.compressImages = compressImages;
@@ -14809,6 +14894,7 @@ exports.getXAppsQueryKey = getXAppsQueryKey;
 exports.getXAppsSharesQueryKey = getXAppsSharesQueryKey;
 exports.imageCompressionOptions = imageCompressionOptions;
 exports.pollForReceipt = pollForReceipt;
+exports.useAccessAndSecurityModal = useAccessAndSecurityModal;
 exports.useAccountBalance = useAccountBalance;
 exports.useAccountCustomizationModal = useAccountCustomizationModal;
 exports.useAccountLinking = useAccountLinking;
@@ -14835,7 +14921,6 @@ exports.useCurrentAllocationsRound = useCurrentAllocationsRound;
 exports.useCurrentAllocationsRoundId = useCurrentAllocationsRoundId;
 exports.useCurrentBlock = useCurrentBlock;
 exports.useEcosystemShortcuts = useEcosystemShortcuts;
-exports.useEmbeddedWalletSettingsModal = useEmbeddedWalletSettingsModal;
 exports.useEnsRecordExists = useEnsRecordExists;
 exports.useExploreEcosystemModal = useExploreEcosystemModal;
 exports.useFAQModal = useFAQModal;