@getpara/react-sdk-lite 2.0.0-alpha.59 → 2.0.0-alpha.60

package/dist/modal/components/Account/AccountHeader.js

@@ -7,21 +7,21 @@ import { useMemo } from "react";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useAssets } from "../../../provider/providers/AssetsProvider.js";
-import { useAccount } from "../../../provider/index.js";
+import { useAccount, useWallet } from "../../../provider/index.js";
 import { WalletSelect } from "../WalletSelect/WalletSelect.js";
 const AccountHeader = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
   const { connectionType } = useAccount();
   const { profileBalance, totalBalance } = useAssets();
-  const externalWallet = Object.keys(para == null ? void 0 : para.externalWallets).length > 0 ? Object.values(para.externalWallets)[0] : void 0;
+  const { data: activeWallet } = useWallet();
   const { name, icon, src } = useMemo(() => {
     var _a;
     let name2, icon2, src2;
     switch (true) {
-      case !!externalWallet:
-        name2 = (_a = externalWallet.ensName) != null ? _a : truncateAddress(externalWallet.address, externalWallet.type, { prefix: para.cosmosPrefix });
-        src2 = externalWallet.ensAvatar;
-        icon2 = getExternalWalletIcon(externalWallet.externalProviderId);
+      case (activeWallet == null ? void 0 : activeWallet.isExternal):
+        name2 = (_a = activeWallet.ensName) != null ? _a : truncateAddress(activeWallet.address, activeWallet.type, { prefix: para.cosmosPrefix });
+        src2 = activeWallet.ensAvatar;
+        icon2 = getExternalWalletIcon(activeWallet.externalProviderId);
         break;
       default:
         name2 = `${para.partnerName} Wallet`;
@@ -30,7 +30,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         break;
     }
     return { name: name2, icon: icon2, src: src2 };
-  }, [para.partnerName, para.partnerLogo, externalWallet]);
+  }, [para.partnerName, para.partnerLogo, activeWallet]);
   return /* @__PURE__ */ jsxs(AccountContainer, { children: [
     /* @__PURE__ */ jsx(
       CpslIcon,

package/dist/modal/components/Account/AccountProfile.js

@@ -6,7 +6,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AccountTypeIcon, GradientScroll, StepContainer, WalletTypeIcon } from "../common.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
-import { useAccount, useClient } from "../../../provider/index.js";
+import { useAccount } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
 import {
@@ -19,8 +19,10 @@ import { useMemo } from "react";
 import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { AccountHeader } from "./AccountHeader.js";
 import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const Entry = ({
   identifier,
   icon,
@@ -77,9 +79,9 @@ const AccountProfile = ({
   isDisconnecting,
   onDisconnect
 }) => {
-  var _a, _b, _c, _d, _e, _f;
-  const para = useClient();
-  const { connectionType, embedded } = useAccount();
+  var _a;
+  const para = useInternalClient();
+  const { embedded } = useAccount();
   const { data: linkedAccounts } = useLinkedAccounts();
   const { wallets } = useExternalWallets();
   const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
@@ -88,47 +90,18 @@ const AccountProfile = ({
     return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
   });
   const { profileBalance } = useAssets();
+  const setStep = useModalStore((state) => state.setStep);
   if (!para) {
     return null;
   }
-  const externalWallet = (_a = para.authInfo) == null ? void 0 : _a.externalWallet;
+  const embeddedWallets = (_a = para == null ? void 0 : para.availableWallets) == null ? void 0 : _a.filter((wallet) => !wallet.isExternal);
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
-    connectionType !== "external" && /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
-      /* @__PURE__ */ jsx(ParaIcon, { icon: "paraIconBrand", size: "40px", inset: "8px", background: "white" }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        "Do even more with your wallet",
-        /* @__PURE__ */ jsx("br", {}),
-        "at ",
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: "600" }, children: "Para Connect" })
+    embeddedWallets.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsxs(Title, { variant: "bodyS", color: "secondary", children: [
+        para.partnerName,
+        " Wallets"
       ] }),
-      /* @__PURE__ */ jsxs(Dots, { children: [
-        new Array(6).fill(0).map((_, index) => /* @__PURE__ */ jsx(DotsIcon, { index, icon: "dotsSquare", size: "27.5px" }, index)),
-        /* @__PURE__ */ jsx(ParaArrow, { icon: "paraArrow", size: "31px", color: "white" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Section, { children: [
-      /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
-      /* @__PURE__ */ jsx(Content, { children: externalWallet && connectionType === "external" ? /* @__PURE__ */ jsx(
-        Entry,
-        {
-          icon: /* @__PURE__ */ jsx(
-            WalletTypeIcon,
-            {
-              walletType: externalWallet.type,
-              externalWallet: externalWallet.providerId,
-              size: "24px",
-              inset: "0"
-            }
-          ),
-          name: (_c = (_b = externalWallet.ensName) != null ? _b : externalWallet.provider) != null ? _c : "",
-          address: (_d = externalWallet.addressBech32) != null ? _d : externalWallet.address,
-          addressShort: truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
-            prefix: para.cosmosPrefix
-          })
-        },
-        externalWallet.address
-      ) : (_f = para == null ? void 0 : para.availableWallets) == null ? void 0 : _f.map((wallet) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Content, { children: embeddedWallets.map((wallet) => /* @__PURE__ */ jsx(
         Entry,
         {
           icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
@@ -140,23 +113,72 @@ const AccountProfile = ({
         wallet.address
       )) })
     ] }),
+    /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "External Wallets" }),
+      /* @__PURE__ */ jsxs(Content, { children: [
+        Object.values((para == null ? void 0 : para.externalWallets) || {}).map((wallet) => {
+          var _a2, _b;
+          const externalWallet = wallets.find((w) => w.name === wallet.name);
+          return /* @__PURE__ */ jsx(
+            Entry,
+            {
+              icon: /* @__PURE__ */ jsx(
+                WalletTypeIcon,
+                {
+                  walletType: wallet.type,
+                  externalWallet: externalWallet != null ? externalWallet : wallet.externalProviderId,
+                  size: "24px",
+                  inset: "0"
+                }
+              ),
+              name: (_b = (_a2 = wallet.ensName) != null ? _a2 : wallet.name) != null ? _b : "",
+              address: wallet.address,
+              addressShort: wallet.address ? truncateAddress(wallet.address, wallet.type, {
+                prefix: para.cosmosPrefix
+              }) : "",
+              balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
+            },
+            wallet.address
+          );
+        }),
+        /* @__PURE__ */ jsxs(
+          CpslButton,
+          {
+            fullWidth: true,
+            variant: "tertiary",
+            onClick: () => {
+              setStep(ModalStep.ADD_EX_WALLET_MORE);
+            },
+            children: [
+              /* @__PURE__ */ jsx(CpslIcon, { icon: "plus", slot: "start" }),
+              "Add Wallet"
+            ]
+          }
+        )
+      ] })
+    ] }),
     isEnabled && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Linked Accounts" }),
       /* @__PURE__ */ jsxs(Content, { children: [
-        /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })), ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].filter(({ externalWallet: externalWallet2 }) => {
-          return !externalWallet2 || externalWallet2.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
+        /* @__PURE__ */ jsx(GradientScroll, { gap: "12px", height: "360px", children: [...((linkedAccounts == null ? void 0 : linkedAccounts.primary) || []).map((p) => __spreadProps(__spreadValues({}, p), { isPrimary: true })), ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].filter(({ externalWallet }) => {
+          return !externalWallet || externalWallet.address !== (embedded == null ? void 0 : embedded.externalWalletAddress);
         }).map((linkedAccount) => {
-          var _a2, _b2, _c2, _d2, _e2;
-          const { identifier, displayName, type, isPrimary = false, externalWallet: externalWallet2 } = linkedAccount;
-          const externalWalletConnector = wallets.find((wallet) => wallet.id === (externalWallet2 == null ? void 0 : externalWallet2.providerId));
+          var _a2, _b, _c, _d, _e;
+          const { identifier, displayName, type, isPrimary = false, externalWallet } = linkedAccount;
+          const externalWalletConnector = wallets.find(
+            (wallet) => {
+              var _a3, _b2;
+              return wallet.id === (externalWallet == null ? void 0 : externalWallet.providerId) || wallet.id.toLowerCase() === ((_a3 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _a3.toLowerCase()) || wallet.name.toLowerCase() === ((_b2 = externalWallet == null ? void 0 : externalWallet.providerId) == null ? void 0 : _b2.toLowerCase());
+            }
+          );
           let accountType = type;
           let src = void 0;
-          if (externalWallet2) {
+          if (externalWallet) {
             if (externalWalletConnector) {
               accountType = void 0;
               src = externalWalletConnector.iconUrl;
-            } else if (externalWallet2.providerId && ACCOUNT_TYPES[externalWallet2.providerId]) {
-              accountType = externalWallet2.providerId;
+            } else if (externalWallet.providerId && ACCOUNT_TYPES[externalWallet.providerId]) {
+              accountType = externalWallet.providerId;
               src = void 0;
             } else {
               accountType = "EXTERNAL_WALLET";
@@ -167,9 +189,9 @@ const AccountProfile = ({
             Entry,
             {
               icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, src, size: "24px" }),
-              name: externalWallet2 ? (_c2 = (_b2 = (_a2 = externalWallet2.ensName) != null ? _a2 : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _b2 : externalWallet2.provider) != null ? _c2 : "" : displayName != null ? displayName : identifier,
-              address: (_d2 = externalWallet2 == null ? void 0 : externalWallet2.addressBech32) != null ? _d2 : externalWallet2 == null ? void 0 : externalWallet2.address,
-              addressShort: externalWallet2 ? truncateAddress((_e2 = externalWallet2.addressBech32) != null ? _e2 : externalWallet2.address, externalWallet2.type, {
+              name: externalWallet ? (_c = (_b = (_a2 = externalWallet.ensName) != null ? _a2 : externalWalletConnector == null ? void 0 : externalWalletConnector.name) != null ? _b : externalWallet.provider) != null ? _c : "" : displayName != null ? displayName : identifier,
+              address: (_d = externalWallet == null ? void 0 : externalWallet.addressBech32) != null ? _d : externalWallet == null ? void 0 : externalWallet.address,
+              addressShort: externalWallet ? truncateAddress((_e = externalWallet.addressBech32) != null ? _e : externalWallet.address, externalWallet.type, {
                 prefix: para.cosmosPrefix
               }) : void 0,
               onUnlink: isPrimary ? void 0 : (e) => {
@@ -251,51 +273,6 @@ const DisconnectButton = safeStyled(CpslButton)`
   --button-destructive-active-background-color: rgba(255, 0, 0, 0.1);
 
 `;
-const ParaConnect = safeStyled.a`
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  text-decoration: none;
-  color: white !important;
-  font-family: 'PP Mori', sans-serif;
-  font-weight: 500;
-  font-size: 15px;
-  padding: 16px;
-  height: 69px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  border-radius: 8px;
-  border: 1px solid #FF4E00;
-  background: #FF4E00;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 8px rgba(251, 188, 4, 0.20) inset;
-
-  &:hover, &:active {
-    background: #FF6A2B;
-    border: 1px solid #FF6A2B;
-  }
-
-`;
-const ParaIcon = safeStyled(CpslIcon)`
-  --icon-border-radius: 4px;
-`;
-const Dots = safeStyled.div`
-  width: 75px;
-  position: absolute;
-  right: 14px;
-  top: 7px;
-`;
-const DotsIcon = safeStyled(CpslIcon)`
-  position: absolute;
-  left: ${({ index }) => `${index % 3 * 27.5}px`};
-  top: ${({ index }) => `${Math.floor(index / 3) * 27.5}px`};
-`;
-const ParaArrow = safeStyled(CpslIcon)`
-  position: absolute;
-  top: 12px;
-  right: 4px;
-`;
 export {
   AccountProfile
 };

package/dist/modal/components/Account/AccountProfileLinkOptions.js

@@ -6,13 +6,15 @@ import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
 import { CpslButton, CpslDivider, CpslText } from "@getpara/react-components";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { useEffect, useMemo } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { getAccountTypeName, safeStyled } from "@getpara/react-common";
 function AccountProfileLinkOptions() {
   const para = useInternalClient();
   const { accountLinkOptions, linkAccount, isLinkAccountPending, linkAccountError, setLinkAccountError, resetMutations } = useAccountLinking();
-  const { wallet: connectedWallet, wallets } = useExternalWallets();
+  const { wallets } = useExternalWallets();
+  const { data: linkedAccounts } = useLinkedAccounts();
   const [isEmail, isPhone, externalWalletIndex, isOptions] = [
     accountLinkOptions.includes("EMAIL"),
     accountLinkOptions.includes("PHONE"),
@@ -28,8 +30,17 @@ function AccountProfileLinkOptions() {
     return Array.from(
       new Set(
         baseOptions.filter((option) => {
-          if (!wallets.some((wallet) => wallet.id === option) || (connectedWallet == null ? void 0 : connectedWallet.id) !== option && wallets.some(({ type, id, installed, isMobile }) => {
-            return (installed || isMobile) && (para == null ? void 0 : para.supportedWalletTypes.some((obj) => obj.type === type)) && id === option;
+          if (!wallets.some((wallet) => wallet.id === option) || wallets.some(({ type, id, installed, isMobile }) => {
+            if (!(installed || isMobile) || !(para == null ? void 0 : para.supportedWalletTypes.some((obj) => obj.type === type)) || id !== option) {
+              return false;
+            }
+            const isAlreadyLinked = [...(linkedAccounts == null ? void 0 : linkedAccounts.primary) || [], ...(linkedAccounts == null ? void 0 : linkedAccounts.linked) || []].some(
+              (linkedAccount) => {
+                var _a, _b;
+                return ((_a = linkedAccount.externalWallet) == null ? void 0 : _a.providerId) === id && ((_b = linkedAccount.externalWallet) == null ? void 0 : _b.type) === type;
+              }
+            );
+            return !isAlreadyLinked;
           })) {
             return true;
           }
@@ -37,7 +48,7 @@ function AccountProfileLinkOptions() {
         })
       )
     );
-  }, [accountLinkOptions, externalWalletIndex, wallets]);
+  }, [accountLinkOptions, externalWalletIndex, wallets, linkedAccounts, para == null ? void 0 : para.supportedWalletTypes]);
   useEffect(() => {
     resetMutations();
     setLinkAccountError(null);

package/dist/modal/components/Body/Body.js

@@ -190,7 +190,22 @@ const Body = ({
         return /* @__PURE__ */ jsx(ChainSwitch, {});
       }
       case ModalStep.EX_WALLET_NETWORK_SELECT: {
-        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, {});
+        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "CONNECT" });
+      }
+      case ModalStep.ADD_EX_WALLET_NETWORK_SELECT: {
+        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "ADD_EXTERNAL" });
+      }
+      case ModalStep.LINK_EX_WALLET_NETWORK_SELECT: {
+        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "ACCOUNT_LINKING" });
+      }
+      case ModalStep.ADD_EX_WALLET_MORE: {
+        return /* @__PURE__ */ jsx(ExternalWallets, { isAddingWallets: true });
+      }
+      case ModalStep.ADD_EX_WALLET_SELECTED: {
+        return /* @__PURE__ */ jsx(ExternalWalletStep, { isAddingWallets: true });
+      }
+      case ModalStep.ADD_EX_WALLET_NETWORK_SELECT: {
+        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "ADD_EXTERNAL" });
       }
       case ModalStep.AWAITING_ACCOUNT: {
         return /* @__PURE__ */ jsx(AwaitingAccountStep, {});

package/dist/modal/components/ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.d.ts

@@ -1 +1,5 @@
-export declare const ExternalWalletNetworkSelectStep: () => import("react/jsx-runtime").JSX.Element | null;
+type ExternalWalletNetworkSelectStepType = 'CONNECT' | 'ADD_EXTERNAL' | 'ACCOUNT_LINKING';
+export declare const ExternalWalletNetworkSelectStep: ({ type }: {
+    type?: ExternalWalletNetworkSelectStepType;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/modal/components/ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js

@@ -1,5 +1,7 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
@@ -8,35 +10,62 @@ import { ModalStep } from "../../utils/steps.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { WALLET_TYPE_CONFIG } from "../../constants/walletTypeConfig.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-const ExternalWalletNetworkSelectStep = () => {
-  var _a, _b;
+const ExternalWalletNetworkSelectStep = ({ type = "CONNECT" }) => {
+  var _a, _b, _c;
   const setStep = useModalStore((state) => state.setStep);
   const selectedExternalWallet = useModalStore((state) => state.selectedExternalWallet);
   const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
-  const { wallets, connectExternalWallet } = useExternalWallets();
+  const { wallets, connectExternalWallet, addAdditionalExternalWallet } = useExternalWallets();
   const { accountLinkInProgress, linkAccount } = useAccountLinking();
-  const externalWalletProvider = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId;
-  if (!accountLinkInProgress && !selectedExternalWallet) {
-    setStep(ModalStep.ACCOUNT_MAIN);
+  const externalWalletProvider = (_c = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId) != null ? _c : selectedExternalWallet == null ? void 0 : selectedExternalWallet.id;
+  if (!externalWalletProvider) {
     return null;
   }
-  const availableWallets = wallets.filter((w) => w.id === (externalWalletProvider != null ? externalWalletProvider : selectedExternalWallet == null ? void 0 : selectedExternalWallet.id));
+  const availableWallets = wallets.filter((w) => w.id === externalWalletProvider);
   const firstWallet = availableWallets[0];
-  const handleWalletClick = (wallet) => () => {
-    if (accountLinkInProgress) {
-      linkAccount({ externalWallet: { provider: wallet.id, type: wallet.type } });
-      return;
+  const handleWalletClick = (wallet) => () => __async(void 0, null, function* () {
+    switch (type) {
+      case "ACCOUNT_LINKING":
+        linkAccount({ externalWallet: { provider: wallet.id, type: wallet.type } });
+        break;
+      case "ADD_EXTERNAL":
+        setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
+        setStep(ModalStep.ADD_EX_WALLET_SELECTED);
+        try {
+          yield addAdditionalExternalWallet(wallet);
+        } catch (error) {
+          console.error("Failed to add additional wallet:", error);
+        }
+        break;
+      case "CONNECT":
+      default:
+        setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
+        setStep(ModalStep.EX_WALLET_SELECTED);
+        if (wallet.installed || wallet.internalId === "FARCASTER") {
+          connectExternalWallet(wallet);
+        } else if (wallet.isMobile) {
+          connectExternalWallet(wallet, true);
+        }
+        break;
     }
-    setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
-    setStep(ModalStep.EX_WALLET_SELECTED);
-    if (wallet.installed || wallet.internalId === "FARCASTER") {
-      connectExternalWallet(wallet);
-    } else if (wallet.isMobile) {
-      connectExternalWallet(wallet, true);
+  });
+  const getIconSource = () => {
+    var _a2, _b2, _c2;
+    switch (type) {
+      case "ACCOUNT_LINKING":
+        return ((_a2 = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a2.providerId) ? (_b2 = wallets.find((w) => {
+          var _a3;
+          return w.id === ((_a3 = accountLinkInProgress.externalWallet) == null ? void 0 : _a3.providerId);
+        })) == null ? void 0 : _b2.iconUrl : firstWallet == null ? void 0 : firstWallet.iconUrl;
+      case "ADD_EXTERNAL":
+        return (selectedExternalWallet == null ? void 0 : selectedExternalWallet.id) ? (_c2 = wallets.find((w) => w.id === selectedExternalWallet.id)) == null ? void 0 : _c2.iconUrl : firstWallet == null ? void 0 : firstWallet.iconUrl;
+      case "CONNECT":
+      default:
+        return firstWallet == null ? void 0 : firstWallet.iconUrl;
     }
   };
   return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(Avatar, { slot: "image", src: firstWallet == null ? void 0 : firstWallet.iconUrl }),
+    /* @__PURE__ */ jsx(Avatar, { slot: "image", src: getIconSource() }),
     /* @__PURE__ */ jsx(ButtonContainer, { children: availableWallets.map((wallet) => {
       const config = WALLET_TYPE_CONFIG[wallet.type];
       return /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleWalletClick(wallet), children: /* @__PURE__ */ jsxs(ButtonInnerContainer, { children: [

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.d.ts

@@ -5,4 +5,6 @@ export declare const ExternalWalletMobileConnect: ({ wallet, qrUri: propsQrUri,
     onConnectWc: (_: CommonWallet) => Promise<void>;
     isSelfFetching?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ExternalWalletStep: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const ExternalWalletStep: ({ isAddingWallets }: {
+    isAddingWallets?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js

@@ -5,7 +5,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
 import { CenteredText, HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { HeroSpinner, safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
@@ -90,16 +90,27 @@ const ExternalWalletMobileConnect = ({
     /* @__PURE__ */ jsx(InnerStepContainer, { children: isWalletConnect ? /* @__PURE__ */ jsx(Fragment, { children: GetWalletButton }) : /* @__PURE__ */ jsx(Link, { href: (_b = wallet.downloadUrl) != null ? _b : "", target: "_blank", children: GetWalletButton }) })
   ] });
 };
-const ExternalWalletStep = () => {
+const ExternalWalletStep = ({ isAddingWallets = false }) => {
   const externalWalletError = useModalStore((state) => state.externalWalletError);
+  const step = useModalStore((state) => state.step);
   const setStep = useModalStore((state) => state.setStep);
-  const { connectExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
+  const { connectExternalWallet, addAdditionalExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
+  const handleConnect = useCallback(
+    (wallet2, isWc = false) => __async(void 0, null, function* () {
+      if (isAddingWallets) {
+        yield addAdditionalExternalWallet(wallet2);
+      } else {
+        yield isWc ? connectExternalWallet(wallet2, true, true) : connectExternalWallet(wallet2);
+      }
+    }),
+    [isAddingWallets, addAdditionalExternalWallet, connectExternalWallet]
+  );
   useEffect(() => {
     routeMobileExternalWallet(qrUri);
   }, [qrUri]);
   const handleTryAgainClick = () => __async(void 0, null, function* () {
     if (wallet) {
-      yield connectExternalWallet(wallet);
+      yield handleConnect(wallet);
     }
   });
   const Content = useMemo(() => {
@@ -153,17 +164,29 @@ Please choose another wallet or continue on desktop.` }) });
           wallet,
           qrUri,
           onConnectWc: (w) => __async(void 0, null, function* () {
-            yield connectExternalWallet(w, true, true);
+            yield handleConnect(w, true);
           })
         }
       );
     }
-  }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
+  }, [
+    wallet,
+    walletDisplayHelpers,
+    externalWalletError,
+    qrUri,
+    isAddingWallets,
+    addAdditionalExternalWallet,
+    connectExternalWallet
+  ]);
   useEffect(() => {
     if (!wallet) {
-      setStep(ModalStep.AUTH_MAIN);
+      if (step === ModalStep.ADD_EX_WALLET_SELECTED) {
+        setStep(ModalStep.ADD_EX_WALLET_MORE);
+      } else {
+        setStep(ModalStep.AUTH_MAIN);
+      }
     }
-  }, [wallet]);
+  }, [wallet, step]);
   if (!wallet) {
     return null;
   }

package/dist/modal/components/ExternalWallets/ExternalWallets.d.ts

@@ -1 +1,3 @@
-export declare const ExternalWallets: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExternalWallets: ({ isAddingWallets }: {
+    isAddingWallets?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/ExternalWallets/ExternalWallets.js

@@ -12,11 +12,13 @@ import { useState } from "react";
 import { hasEmbeddedAuth } from "../../utils/authLayoutHelpers.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 const HAS_MORE_LENGTH = 3;
-const ExternalWallets = () => {
-  const { wallets: allWallets, connectExternalWallet } = useExternalWallets();
+const ExternalWallets = ({ isAddingWallets = false }) => {
+  const { wallets: allWallets, connectExternalWallet, addAdditionalExternalWallet } = useExternalWallets();
   const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
   const setStep = useModalStore((state) => state.setStep);
-  const showAll = useModalStore((state) => state.step === ModalStep.EX_WALLET_MORE);
+  const showAll = useModalStore(
+    (state) => state.step === ModalStep.EX_WALLET_MORE || state.step === ModalStep.ADD_EX_WALLET_MORE
+  );
   const authLayout = useModalStore((state) => state.authLayout);
   const [search, setSearch] = useState("");
   const dedupedWallets = Array.from(new Set(allWallets.map((wallet) => wallet.id))).map((id) => {
@@ -31,21 +33,29 @@ const ExternalWallets = () => {
   const handleParaClick = () => {
     setStep(ModalStep.AUTH_MORE);
   };
-  const handleWalletClick = (wallet) => () => {
+  const handleWalletClick = (wallet) => () => __async(void 0, null, function* () {
     const shouldShowNetworkSelection = allWallets.filter((w) => w.id === wallet.id).length > 1;
     if (shouldShowNetworkSelection) {
       setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
-      setStep(ModalStep.EX_WALLET_NETWORK_SELECT);
+      setStep(isAddingWallets ? ModalStep.ADD_EX_WALLET_NETWORK_SELECT : ModalStep.EX_WALLET_NETWORK_SELECT);
       return;
     }
     setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
-    setStep(ModalStep.EX_WALLET_SELECTED);
-    if (wallet.installed) {
-      connectExternalWallet(wallet);
-    } else if (wallet.isMobile) {
-      connectExternalWallet(wallet, true);
+    setStep(isAddingWallets ? ModalStep.ADD_EX_WALLET_SELECTED : ModalStep.EX_WALLET_SELECTED);
+    if (isAddingWallets) {
+      try {
+        yield addAdditionalExternalWallet(wallet);
+      } catch (error) {
+        console.error("Failed to add additional wallet:", error);
+      }
+    } else {
+      if (wallet.installed) {
+        connectExternalWallet(wallet);
+      } else if (wallet.isMobile) {
+        connectExternalWallet(wallet, true);
+      }
     }
-  };
+  });
   return /* @__PURE__ */ jsxs(Container, { $maxHeight: showAll, children: [
     showAll && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SearchInputWrapper, { children: /* @__PURE__ */ jsx(
@@ -61,7 +71,7 @@ const ExternalWallets = () => {
           children: /* @__PURE__ */ jsx(SearchIcon, { slot: "start", icon: "search" })
         }
       ) }),
-      hasEmbeddedAuth(authLayout != null ? authLayout : []) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
+      hasEmbeddedAuth(authLayout != null ? authLayout : []) && !isAddingWallets && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: /* @__PURE__ */ jsxs(WalletButtonOuterContainer, { children: [
         /* @__PURE__ */ jsxs(WalletButtonInnerContainer, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "paraIcon" }),
           /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Para" })

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -39,6 +39,7 @@ const useStepTitle = () => {
       [ModalStep.AUTH_MORE]: signUpOrLogInTitle,
       [ModalStep.AUTH_GUEST_SIGNUP]: "Complete Account Setup",
       [ModalStep.EX_WALLET_MORE]: connectWalletTitle,
+      [ModalStep.ADD_EX_WALLET_MORE]: "Add Wallet",
       [ModalStep.VERIFICATIONS]: "Sign Up",
       [ModalStep.AWAITING_OAUTH]: signUpOrLogInTitle,
       [ModalStep.FARCASTER_OAUTH]: signUpOrLogInTitle,
@@ -70,6 +71,12 @@ const useStepTitle = () => {
       [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
+      [ModalStep.EX_WALLET_SELECTED]: "Connect Wallet",
+      [ModalStep.EX_WALLET_NETWORK_SELECT]: "Select Network",
+      [ModalStep.ADD_EX_WALLET_NETWORK_SELECT]: "Select Network",
+      [ModalStep.LINK_EX_WALLET_NETWORK_SELECT]: "Select Network",
+      [ModalStep.ADD_EX_WALLET_SELECTED]: "Add Wallet",
+      [ModalStep.EXTERNAL_WALLET_VERIFICATION]: "Verify Wallet",
       [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up"
     }),
     [isLogin, chainId, hideWallets, authStepTitle]

package/dist/modal/components/common.d.ts

@@ -1,4 +1,5 @@
 import { CpslIcon, CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
+import { CommonWallet } from '@getpara/react-common';
 import { TExternalWallet, TLinkedAccountType, TNetwork, TOnRampAsset, TWalletType } from '@getpara/web-sdk';
 import { ComponentProps, PropsWithChildren } from 'react';
 export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -40,7 +41,7 @@ export declare function NetworkIcon({ network, size }: {
 export declare function WalletTypeIcon({ className, walletType, externalWallet, ...props }: {
     className?: string;
     walletType: TWalletType;
-    externalWallet?: TExternalWallet | string;
+    externalWallet?: TExternalWallet | CommonWallet | string;
 } & Parameters<typeof CpslIcon>[0]): import("react/jsx-runtime").JSX.Element;
 export declare const ErrorContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {

package/dist/modal/components/common.js

@@ -177,11 +177,14 @@ function WalletTypeIcon(_c) {
     "walletType",
     "externalWallet"
   ]);
-  var _a;
+  var _a, _b;
   const isDark = useStore((state) => {
-    var _a2, _b;
-    return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
+    var _a2, _b2;
+    return ((_b2 = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b2.mode) === "dark";
   });
+  if (typeof externalWallet === "object" && "iconUrl" in externalWallet) {
+    return /* @__PURE__ */ jsx(CpslIcon, __spreadProps(__spreadValues({ className, src: externalWallet.iconUrl }, props), { inset: (_a = props.inset) != null ? _a : "10%" }));
+  }
   const data = (externalWallet ? ACCOUNT_TYPES[externalWallet] : WALLET_TYPES_METADATA[walletType]) || {
     icon: "wallet02",
     isDark: true
@@ -194,7 +197,7 @@ function WalletTypeIcon(_c) {
       icon: data.icon,
       invert: isDark && data.isDark
     }, props), {
-      inset: (_a = props.inset) != null ? _a : "10%"
+      inset: (_b = props.inset) != null ? _b : "10%"
     })
   );
 }

package/dist/modal/stores/modal/actions.js

@@ -22,6 +22,7 @@ const getActions = (set, get) => ({
     const previousStep = get().step;
     const refs = get().refs;
     set({ step });
+    refs.currentStep.current = step;
     onModalStepChange == null ? void 0 : onModalStepChange({ previousStep, currentStep: step, canGoBack: get().hasPreviousStep() });
     if (step === ModalStep.ACCOUNT_MAIN) {
       refs.wasSignedIn.current = true;
@@ -57,6 +58,7 @@ const getActions = (set, get) => ({
         step: prevStep,
         stepDirection: -1
       }, prevStep === ModalStep.AUTH_MAIN && { flow: void 0 }));
+      refs.currentStep.current = prevStep;
       onModalStepChange == null ? void 0 : onModalStepChange({ previousStep: currentStep, currentStep: prevStep, canGoBack: get().hasPreviousStep() });
     }
     (_a = refs.popupWindow.current) == null ? void 0 : _a.close();
@@ -71,7 +73,9 @@ const getActions = (set, get) => ({
     }
     return !!getPreviousStep(flow, currentStep);
   },
-  setFlow: (flow) => set({ flow }),
+  setFlow: (flow) => {
+    set({ flow });
+  },
   isLogin: () => get().flow === "login",
   isAccount: () => get().flow === "account",
   setAuthState: (authState) => {

package/dist/modal/utils/steps.d.ts

@@ -40,7 +40,11 @@ export declare enum ModalStep {
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
     ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
     AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
-    OTP = "OTP"
+    OTP = "OTP",
+    ADD_EX_WALLET_MORE = "ADD_EX_WALLET_MORE",
+    ADD_EX_WALLET_SELECTED = "ADD_EX_WALLET_SELECTED",
+    ADD_EX_WALLET_NETWORK_SELECT = "ADD_EX_WALLET_NETWORK_SELECT",
+    LINK_EX_WALLET_NETWORK_SELECT = "LINK_EX_WALLET_NETWORK_SELECT"
 }
 export type ModalStepPropU = keyof typeof ModalStep | ModalStep;
 export type ModalStepPropL = Lowercase<ModalStepPropU>;
@@ -58,7 +62,11 @@ declare enum AccountStep {
     ACCOUNT_PROFILE = "ACCOUNT_PROFILE",
     ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
-    ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE"
+    ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
+    EXTERNAL_WALLET_VERIFICATION = "EXTERNAL_WALLET_VERIFICATION",
+    ADD_EX_WALLET_MORE = "ADD_EX_WALLET_MORE",
+    ADD_EX_WALLET_SELECTED = "ADD_EX_WALLET_SELECTED",
+    ADD_EX_WALLET_NETWORK_SELECT = "ADD_EX_WALLET_NETWORK_SELECT"
 }
 export declare const RESET_TO_AUTH_STEPS: ModalStep[];
 export declare const RESET_TO_ACCOUNT_STEPS: ModalStep[];

package/dist/modal/utils/steps.js

@@ -42,6 +42,10 @@ var ModalStep = /* @__PURE__ */ ((ModalStep2) => {
   ModalStep2["ACCOUNT_PROFILE_REMOVE"] = "ACCOUNT_PROFILE_REMOVE";
   ModalStep2["AWAITING_ACCOUNT"] = "AWAITING_ACCOUNT";
   ModalStep2["OTP"] = "OTP";
+  ModalStep2["ADD_EX_WALLET_MORE"] = "ADD_EX_WALLET_MORE";
+  ModalStep2["ADD_EX_WALLET_SELECTED"] = "ADD_EX_WALLET_SELECTED";
+  ModalStep2["ADD_EX_WALLET_NETWORK_SELECT"] = "ADD_EX_WALLET_NETWORK_SELECT";
+  ModalStep2["LINK_EX_WALLET_NETWORK_SELECT"] = "LINK_EX_WALLET_NETWORK_SELECT";
   return ModalStep2;
 })(ModalStep || {});
 var AccountStep = /* @__PURE__ */ ((AccountStep2) => {
@@ -58,10 +62,13 @@ var AccountStep = /* @__PURE__ */ ((AccountStep2) => {
   AccountStep2["ACCOUNT_PROFILE_ADD"] = "ACCOUNT_PROFILE_ADD";
   AccountStep2["ACCOUNT_PROFILE_LIST"] = "ACCOUNT_PROFILE_LIST";
   AccountStep2["ACCOUNT_PROFILE_REMOVE"] = "ACCOUNT_PROFILE_REMOVE";
+  AccountStep2["EXTERNAL_WALLET_VERIFICATION"] = "EXTERNAL_WALLET_VERIFICATION";
+  AccountStep2["ADD_EX_WALLET_MORE"] = "ADD_EX_WALLET_MORE";
+  AccountStep2["ADD_EX_WALLET_SELECTED"] = "ADD_EX_WALLET_SELECTED";
+  AccountStep2["ADD_EX_WALLET_NETWORK_SELECT"] = "ADD_EX_WALLET_NETWORK_SELECT";
   return AccountStep2;
 })(AccountStep || {});
 const RESET_TO_AUTH_STEPS = [
-  "EX_WALLET_MORE" /* EX_WALLET_MORE */,
   "EX_WALLET_SELECTED" /* EX_WALLET_SELECTED */,
   "EX_WALLET_NETWORK_SELECT" /* EX_WALLET_NETWORK_SELECT */,
   "VERIFICATIONS" /* VERIFICATIONS */,
@@ -84,7 +91,6 @@ const RESET_TO_AUTH_STEPS = [
   "SETUP_2FA" /* SETUP_2FA */,
   "VERIFY_2FA" /* VERIFY_2FA */,
   "TWO_FACTOR_DONE" /* TWO_FACTOR_DONE */,
-  "LOGIN_DONE" /* LOGIN_DONE */,
   "OTP" /* OTP */
 ];
 const RESET_TO_ACCOUNT_STEPS = [
@@ -99,7 +105,12 @@ const RESET_TO_ACCOUNT_STEPS = [
   "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */,
   "ACCOUNT_PROFILE_ADD" /* ACCOUNT_PROFILE_ADD */,
   "ACCOUNT_PROFILE_LIST" /* ACCOUNT_PROFILE_LIST */,
-  "ACCOUNT_PROFILE_REMOVE" /* ACCOUNT_PROFILE_REMOVE */
+  "ACCOUNT_PROFILE_REMOVE" /* ACCOUNT_PROFILE_REMOVE */,
+  "ADD_EX_WALLET_MORE" /* ADD_EX_WALLET_MORE */,
+  "ADD_EX_WALLET_SELECTED" /* ADD_EX_WALLET_SELECTED */,
+  "ADD_EX_WALLET_NETWORK_SELECT" /* ADD_EX_WALLET_NETWORK_SELECT */,
+  "LINK_EX_WALLET_NETWORK_SELECT" /* LINK_EX_WALLET_NETWORK_SELECT */,
+  "EXTERNAL_WALLET_VERIFICATION" /* EXTERNAL_WALLET_VERIFICATION */
 ];
 const AccountPreviousStep = {
   ["ACCOUNT_MAIN" /* ACCOUNT_MAIN */]: void 0,
@@ -114,7 +125,11 @@ const AccountPreviousStep = {
   ["ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */]: "ACCOUNT_MAIN" /* ACCOUNT_MAIN */,
   ["ACCOUNT_PROFILE_LIST" /* ACCOUNT_PROFILE_LIST */]: "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */,
   ["ACCOUNT_PROFILE_ADD" /* ACCOUNT_PROFILE_ADD */]: "ACCOUNT_PROFILE_LIST" /* ACCOUNT_PROFILE_LIST */,
-  ["ACCOUNT_PROFILE_REMOVE" /* ACCOUNT_PROFILE_REMOVE */]: "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */
+  ["ACCOUNT_PROFILE_REMOVE" /* ACCOUNT_PROFILE_REMOVE */]: "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */,
+  ["EXTERNAL_WALLET_VERIFICATION" /* EXTERNAL_WALLET_VERIFICATION */]: "EX_WALLET_SELECTED" /* EX_WALLET_SELECTED */,
+  ["ADD_EX_WALLET_MORE" /* ADD_EX_WALLET_MORE */]: "ACCOUNT_PROFILE" /* ACCOUNT_PROFILE */,
+  ["ADD_EX_WALLET_SELECTED" /* ADD_EX_WALLET_SELECTED */]: "ADD_EX_WALLET_MORE" /* ADD_EX_WALLET_MORE */,
+  ["ADD_EX_WALLET_NETWORK_SELECT" /* ADD_EX_WALLET_NETWORK_SELECT */]: "ADD_EX_WALLET_MORE" /* ADD_EX_WALLET_MORE */
 };
 var SignUpModalStep = /* @__PURE__ */ ((SignUpModalStep2) => {
   SignUpModalStep2["AUTH_MAIN"] = "AUTH_MAIN";

package/dist/provider/components/CosmosWalletWrapper.js

@@ -5,7 +5,7 @@ import { CosmosExternalWalletProvider } from "../providers/CosmosExternalWalletP
 import { useInternalClient } from "../hooks/utils/useInternalClient.js";
 import { useStore } from "../stores/useStore.js";
 import { COSMOS_WALLETS } from "@getpara/web-sdk";
-import { useWallet } from "../hooks/index.js";
+import { useWalletState } from "../hooks/index.js";
 const CosmosWalletWrapper = ({
   children,
   cosmosConnectorConfig,
@@ -13,7 +13,7 @@ const CosmosWalletWrapper = ({
   onSwitchWallet
 }) => {
   const para = useInternalClient();
-  const { data: wallet } = useWallet();
+  const { selectedWallet } = useWalletState();
   const externalWalletsWithFullAuth = useStore((state) => state.externalWalletsWithFullAuth);
   const wallets = useStore((state) => state.externalWallets);
   const isUsing = wallets.some((w) => w in COSMOS_WALLETS);
@@ -27,7 +27,7 @@ const CosmosWalletWrapper = ({
         onSwitchWallet,
         para,
         walletsWithFullAuth: externalWalletsWithFullAuth,
-        connectedWallet: wallet,
+        connectedWallet: (selectedWallet == null ? void 0 : selectedWallet.id) ? { id: selectedWallet.id, type: selectedWallet.type } : null,
         connectionOnly,
         includeWalletVerification
       },

package/dist/provider/components/EvmWalletWrapper.js

@@ -5,7 +5,7 @@ import { EvmExternalWalletProvider } from "../providers/EvmExternalWalletProvide
 import { useInternalClient } from "../hooks/utils/useInternalClient.js";
 import { useStore } from "../stores/useStore.js";
 import { EVM_WALLETS } from "@getpara/web-sdk";
-import { useWallet } from "../hooks/index.js";
+import { useWalletState } from "../hooks/index.js";
 const EvmWalletWrapper = ({
   children,
   evmProviderConfig,
@@ -13,7 +13,7 @@ const EvmWalletWrapper = ({
   onSwitchWallet
 }) => {
   const para = useInternalClient();
-  const { data: wallet } = useWallet();
+  const { selectedWallet } = useWalletState();
   const externalWalletsWithFullAuth = useStore((state) => state.externalWalletsWithFullAuth);
   const wallets = useStore((state) => state.externalWallets);
   const connectionOnly = useStore((state) => state.connectionOnly);
@@ -27,7 +27,7 @@ const EvmWalletWrapper = ({
         onSwitchWallet,
         para,
         walletsWithFullAuth: externalWalletsWithFullAuth,
-        connectedWallet: wallet,
+        connectedWallet: (selectedWallet == null ? void 0 : selectedWallet.id) ? { id: selectedWallet.id, type: selectedWallet.type } : null,
         connectionOnly,
         includeWalletVerification
       },

package/dist/provider/providers/AccountLinkProvider.js

@@ -73,7 +73,6 @@ const AccountLinkProvider = ({ children }) => {
   const account = useAccount();
   const { data: coreAccountLinkInProgress } = useAccountLinkInProgress();
   const {
-    wallet: connectedWallet,
     wallets,
     signMessage,
     isSigningMessage,
@@ -152,9 +151,6 @@ const AccountLinkProvider = ({ children }) => {
           }
           const providerId = supportedWalletId != null ? supportedWalletId : args.externalWallet.provider;
           const type = args.externalWallet.type;
-          if (providerId === (connectedWallet == null ? void 0 : connectedWallet.id)) {
-            throw new Error(`Cannot link the currently connected external wallet: ${providerId}`);
-          }
           setAccountLinkInProgress({
             type: "EXTERNAL_WALLET",
             pendingWalletProvider: providerId,
@@ -164,7 +160,7 @@ const AccountLinkProvider = ({ children }) => {
           if (!linkWallet) {
             throw new Error(`wallet not installed: ${providerId}`);
           }
-          openModal({ step: !type ? ModalStep.EX_WALLET_NETWORK_SELECT : ModalStep.ACCOUNT_PROFILE_ADD });
+          openModal({ step: !type ? ModalStep.LINK_EX_WALLET_NETWORK_SELECT : ModalStep.ACCOUNT_PROFILE_ADD });
           if (!type) {
             return;
           }
@@ -316,15 +312,26 @@ const AccountLinkProvider = ({ children }) => {
         break;
     }
   };
-  const onAccountLinkVerified = (updatedAccounts) => {
+  const onAccountLinkVerified = (updatedAccounts) => __async(void 0, null, function* () {
     queryClient.invalidateQueries({ queryKey: [LINKED_ACCOUNTS_BASE_KEY] });
     queryClient.setQueryData(["getLinkedAccounts"], () => updatedAccounts);
+    if ((accountLinkInProgress == null ? void 0 : accountLinkInProgress.type) === "EXTERNAL_WALLET" && accountLinkInProgress.externalWallet) {
+      try {
+        yield disconnectBase(
+          accountLinkInProgress.externalWallet.providerId,
+          accountLinkInProgress.externalWallet.type
+        );
+      } catch (error) {
+      }
+    }
     setTimeout(() => {
       setStep(ModalStep.ACCOUNT_PROFILE);
+      setAccountLinkInProgress(void 0);
     }, 2e3);
-  };
+  });
   const onAccountLinkError = (e) => {
     setLinkAccountError(e instanceof Error ? e.message : e);
+    setAccountLinkInProgress(void 0);
   };
   const unlinkAccount = (linkedAccount) => {
     setUnlinkingAccount(linkedAccount);

package/dist/provider/providers/ExternalWalletProvider.d.ts

@@ -23,6 +23,7 @@ export declare const defaultExternalWallet: {
     username: undefined;
     avatar: undefined;
     connectExternalWallet: () => Promise<void>;
+    addAdditionalExternalWallet: () => Promise<void>;
     disconnectExternalWallet: () => Promise<void>;
     switchChain: () => Promise<void>;
     setChainIdSwitchingTo: () => void;
@@ -48,6 +49,7 @@ type Value = Omit<ExternalWalletContextType<CosmosSignResult>, 'disconnect' | 's
     username?: string;
     avatar?: string;
     connectExternalWallet: (wallet: CommonWallet, isMobile?: boolean, isManualWalletConnect?: boolean) => Promise<void>;
+    addAdditionalExternalWallet: (wallet: CommonWallet) => Promise<void>;
     disconnectExternalWallet: () => Promise<void>;
     setChainIdSwitchingTo: (chainId?: string) => void;
     connectEmbeddedToExternalConnectors: () => Promise<void>;

package/dist/provider/providers/ExternalWalletProvider.js

@@ -1,6 +1,7 @@
 "use client";
 import {
   __async,
+  __spreadProps,
   __spreadValues
 } from "../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
@@ -11,6 +12,7 @@ import { useStore } from "../stores/useStore.js";
 import { ModalStep } from "../../modal/index.js";
 import { useModalStore } from "../../modal/stores/index.js";
 import { useAccount, useModal, useParaStatus, useVerifyExternalWallet, useWalletState } from "../hooks/index.js";
+import { ParaEvent, dispatchEvent } from "@getpara/web-sdk";
 import { useAuthActions } from "./AuthProvider.js";
 import { IS_FULLY_LOGGED_IN_BASE_KEY } from "../hooks/queries/useIsFullyLoggedIn.js";
 import { useQueryClient } from "@tanstack/react-query";
@@ -36,6 +38,7 @@ const defaultExternalWallet = {
   username: void 0,
   avatar: void 0,
   connectExternalWallet: () => Promise.resolve(),
+  addAdditionalExternalWallet: () => Promise.resolve(),
   disconnectExternalWallet: () => Promise.resolve(),
   switchChain: () => Promise.resolve(),
   setChainIdSwitchingTo: () => {
@@ -396,6 +399,71 @@ function ExternalWalletProvider({ children }) {
     }),
     [cosmosSignMessage, evmSignMessage, solanaSignMessage]
   );
+  const addAdditionalExternalWallet = useCallback(
+    (wallet2) => __async(this, null, function* () {
+      try {
+        const walletInfo = yield requestInfo(wallet2.id, wallet2.type);
+        const walletAddress = wallet2.type === "COSMOS" && walletInfo.addressBech32 ? walletInfo.addressBech32 : walletInfo.address;
+        const walletKey = walletInfo.address;
+        const newWallet = __spreadProps(__spreadValues({}, walletInfo), {
+          id: walletKey,
+          // Use EVM-style address as the key/ID
+          address: walletAddress,
+          // Use bech32 address for Cosmos, regular for others
+          name: wallet2.name,
+          // Ensure the name is set from the wallet object
+          isExternal: true,
+          isExternalWithParaAuth: false,
+          externalProviderId: walletInfo.provider || wallet2.name,
+          signer: "",
+          isExternalConnectionOnly: true,
+          isExternalWithVerification: includeWalletVerification
+        });
+        yield para.setExternalWallets((currentWallets) => {
+          const updatedWallets = __spreadProps(__spreadValues({}, currentWallets), {
+            [walletKey]: newWallet
+          });
+          return updatedWallets;
+        });
+        dispatchEvent(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, null);
+        try {
+          const externalWalletInfo = __spreadProps(__spreadValues({
+            partnerId: para.partnerId,
+            address: walletInfo.address
+          }, wallet2.type === "COSMOS" && walletInfo.addressBech32 && {
+            addressBech32: walletInfo.addressBech32
+            // Include bech32 address for Cosmos
+          }), {
+            type: wallet2.type,
+            provider: walletInfo.provider,
+            providerId: walletInfo.providerId
+            // Use the providerId from requestInfo
+          });
+          const linkResult = yield para.linkAccount({ externalWallet: externalWalletInfo });
+          if (linkResult && linkResult.externalWallet && "signatureVerificationMessage" in linkResult.externalWallet) {
+            const verificationMessage = linkResult.externalWallet.signatureVerificationMessage;
+            const signResult = yield signMessage({
+              message: verificationMessage,
+              externalWallet: externalWalletInfo
+            });
+            if (!signResult || !signResult.signature) {
+              throw new Error(`Failed to sign ${wallet2.type} message: No signature returned`);
+            }
+            const { signature: signedMessage, cosmosPublicKeyHex, cosmosSigner } = signResult;
+            yield para.verifyExternalWalletLink({ signedMessage, cosmosPublicKeyHex, cosmosSigner });
+          } else {
+            throw new Error("Unknown error linking external wallet");
+          }
+        } catch (linkError) {
+        }
+        yield connectEmbeddedToExternalConnectors();
+        setStep(ModalStep.ACCOUNT_PROFILE);
+      } catch (error) {
+        setExternalWalletError(["Failed to add wallet. Please try again."]);
+      }
+    }),
+    [para, connectionOnly, includeWalletVerification, setStep, setExternalWalletError]
+  );
   const connectExternalWallet = useCallback(
     (wallet2, isMobileConnect, isManualWalletConnect, isResetAfterManualWalletConnect) => __async(this, null, function* () {
       if (isExternalWalletConnecting && isManualWalletConnect) {
@@ -486,6 +554,9 @@ function ExternalWalletProvider({ children }) {
         const externalWallet = yield cosmosRequestInfo(providerId);
         return externalWallet;
       }
+      default: {
+        throw new Error(`Unsupported wallet type: ${type}`);
+      }
     }
   });
   const disconnectBase = (providerId, type) => __async(this, null, function* () {
@@ -600,6 +671,7 @@ function ExternalWalletProvider({ children }) {
           username,
           avatar,
           connectExternalWallet,
+          addAdditionalExternalWallet,
           disconnectExternalWallet,
           switchChain,
           setChainIdSwitchingTo,
@@ -625,6 +697,7 @@ function ExternalWalletProvider({ children }) {
           avatar,
           disconnectExternalWallet,
           connectExternalWallet,
+          addAdditionalExternalWallet,
           switchChain,
           setChainIdSwitchingTo,
           connectEmbeddedToExternalConnectors,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@getpara/react-sdk-lite",
-  "version": "2.0.0-alpha.59",
+  "version": "2.0.0-alpha.60",
   "bin": {
     "setup-para": "dist/cli/cli.mjs"
   },
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.59",
-    "@getpara/react-components": "2.0.0-alpha.59",
-    "@getpara/web-sdk": "2.0.0-alpha.59",
+    "@getpara/react-common": "2.0.0-alpha.60",
+    "@getpara/react-components": "2.0.0-alpha.60",
+    "@getpara/web-sdk": "2.0.0-alpha.60",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.31",
     "libphonenumber-js": "^1.11.7",
@@ -16,9 +16,9 @@
     "zustand-sync-tabs": "^0.2.2"
   },
   "devDependencies": {
-    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.59",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.59",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.59",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.60",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.60",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.60",
     "@tanstack/react-query": "^5.74.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
@@ -38,7 +38,7 @@
     "package.json",
     "styles.css"
   ],
-  "gitHead": "e15908ac8eafff6f3b264fffa43742870b14b275",
+  "gitHead": "b445d9dcf909a9bfa72d4f21b825fcf7c643be0c",
   "main": "dist/index.js",
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",