@getpara/react-sdk-lite 2.0.0-alpha.33 → 2.0.0-alpha.34

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

@@ -12,7 +12,8 @@ import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 import { safeStyled, useCopyToClipboard } from "@getpara/react-common";
-import { getAccountTypeName } from "../../constants/oAuthLogos.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
 const Entry = ({
   identifier,
   icon,
@@ -48,6 +49,7 @@ const AccountProfile = () => {
   var _a, _b, _c, _d, _e, _f;
   const para = useClient();
   const { data: linkedAccounts } = useLinkedAccounts();
+  const { wallets } = useExternalWallets();
   const { isEnabled, linkAccount, unlinkAccount } = useAccountLinking();
   if (!para) {
     return null;
@@ -60,7 +62,7 @@ const AccountProfile = () => {
         Entry,
         {
           icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: externalWallet.providerId, size: "24px" }),
-          name: (_c = (_b = externalWallet.ensName) != null ? _b : getAccountTypeName(externalWallet.providerId)) != null ? _c : "",
+          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
@@ -90,11 +92,26 @@ const AccountProfile = () => {
         ].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));
+          let accountType = type;
+          let src = void 0;
+          if (externalWallet2) {
+            if (externalWalletConnector) {
+              accountType = void 0;
+              src = externalWalletConnector.iconUrl;
+            } else if (externalWallet2.providerId && ACCOUNT_TYPES[externalWallet2.providerId]) {
+              accountType = externalWallet2.providerId;
+              src = void 0;
+            } else {
+              accountType = "EXTERNAL_WALLET";
+              src = void 0;
+            }
+          }
           return /* @__PURE__ */ jsx(
             Entry,
             {
-              icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: (_a2 = externalWallet2 == null ? void 0 : externalWallet2.providerId) != null ? _a2 : type, size: "24px" }),
-              name: externalWallet2 ? (_c2 = (_b2 = externalWallet2.ensName) != null ? _b2 : getAccountTypeName(externalWallet2.providerId)) != null ? _c2 : "" : displayName != null ? displayName : identifier,
+              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, {
                 prefix: para.cosmosPrefix
@@ -126,6 +143,7 @@ const Section = safeStyled.div`
 const Content = safeStyled(Section)``;
 const Title = safeStyled(CpslText)``;
 const EntryContainer = safeStyled.div`
+  overflow: hidden;
   position: relative;
   width: 100%;
   display: flex;

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

@@ -29,7 +29,7 @@ function AccountProfileLink() {
     linkAccount,
     isLinkAccountPending,
     resetMutations
-  } = useAccountLinking(), { wallets } = useExternalWallets(), { mutate: resendVerificationCode } = useResendVerificationCode(), accountLinkType = accountLinkInProgress == null ? void 0 : accountLinkInProgress.type, externalWalletProvider = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId, externalWalletType = (_d = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletType) != null ? _d : (_c = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _c.type, accountLinkIcon = externalWalletProvider != null ? externalWalletProvider : accountLinkType, isTelegram = accountLinkType === "TELEGRAM", {
+  } = useAccountLinking(), { wallets } = useExternalWallets(), { mutate: resendVerificationCode } = useResendVerificationCode(), accountLinkType = accountLinkInProgress == null ? void 0 : accountLinkInProgress.type, externalWalletProvider = (_b = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletProvider) != null ? _b : (_a = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _a.providerId, externalWalletType = (_d = accountLinkInProgress == null ? void 0 : accountLinkInProgress.pendingWalletType) != null ? _d : (_c = accountLinkInProgress == null ? void 0 : accountLinkInProgress.externalWallet) == null ? void 0 : _c.type, externalWallet = wallets.find((w) => w.id === externalWalletProvider), isTelegram = accountLinkType === "TELEGRAM", {
     url,
     status: telegramStatus,
     isLoaded,
@@ -67,12 +67,17 @@ function AccountProfileLink() {
       HeroSpinner,
       {
         status,
-        icon: status === "success" ? /* @__PURE__ */ jsx(HeroSuccessIcon, {}) : /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: accountLinkIcon }),
+        icon: status === "success" ? /* @__PURE__ */ jsx(HeroSuccessIcon, {}) : /* @__PURE__ */ jsx(
+          HeroAccountTypeIcon,
+          {
+            accountType: externalWallet ? void 0 : accountLinkType,
+            src: externalWallet ? externalWallet.iconUrl : void 0
+          }
+        ),
         text: message
       }
     );
-    ``;
-    const onTryAgain = externalWalletProvider && externalWalletType ? () => linkAccount({ externalWallet: { internalId: externalWalletProvider, type: externalWalletType } }) : accountLinkType && accountLinkType !== "EXTERNAL_WALLET" ? () => linkAccount({ type: accountLinkType }) : void 0;
+    const onTryAgain = externalWalletProvider && externalWalletType ? () => linkAccount({ externalWallet: { provider: externalWalletProvider, type: externalWalletType } }) : accountLinkType && accountLinkType !== "EXTERNAL_WALLET" ? () => linkAccount({ type: accountLinkType }) : void 0;
     const tryAgain = onTryAgain ? /* @__PURE__ */ jsxs(CpslButton, { variant: "secondary", fullWidth: true, onClick: onTryAgain, children: [
       /* @__PURE__ */ jsx(CpslIcon, { icon: "refresh", slot: "start" }),
       "Try Again"
@@ -148,7 +153,7 @@ function AccountProfileLink() {
                     wallet: commonWallet,
                     isSelfFetching: true,
                     onConnectWc: (w) => __async(this, null, function* () {
-                      yield linkAccount({ externalWallet: { internalId: w.internalId, type: w.type } });
+                      yield linkAccount({ externalWallet: { provider: w.id, type: w.type } });
                     })
                   }
                 );

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

@@ -8,12 +8,8 @@ import { getAccountTypeName } from "../../constants/oAuthLogos.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
 import { useEffect, useMemo } from "react";
-import { EXTERNAL_WALLET_TYPES } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { safeStyled } from "@getpara/react-common";
-function isExternalWallet(str) {
-  return EXTERNAL_WALLET_TYPES.includes(str);
-}
 function AccountProfileLinkOptions() {
   const para = useInternalClient();
   const { accountLinkOptions, linkAccount, isLinkAccountPending, linkAccountError, setLinkAccountError, resetMutations } = useAccountLinking();
@@ -27,14 +23,14 @@ function AccountProfileLinkOptions() {
   const options = useMemo(() => {
     const baseOptions = externalWalletIndex >= 0 ? [
       ...accountLinkOptions.slice(0, externalWalletIndex),
-      ...EXTERNAL_WALLET_TYPES,
+      ...wallets.map((wallet) => wallet.id),
       ...accountLinkOptions.slice(externalWalletIndex + 1)
     ] : accountLinkOptions;
     return Array.from(
       new Set(
         baseOptions.filter((option) => {
-          if (!isExternalWallet(option) || (connectedWallet == null ? void 0 : connectedWallet.internalId) !== option && wallets.some(({ type, internalId, installed, isMobile }) => {
-            return (installed || isMobile) && (para == null ? void 0 : para.supportedWalletTypes.some((obj) => obj.type === type)) && internalId === 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;
           })) {
             return true;
           }
@@ -47,8 +43,8 @@ function AccountProfileLinkOptions() {
     resetMutations();
     setLinkAccountError(null);
   }, []);
-  const getExternalWalletType = (internalId) => {
-    const allWallets = wallets.filter((wallet) => wallet.internalId === internalId);
+  const getExternalWalletType = (id) => {
+    const allWallets = wallets.filter((wallet) => wallet.id === id);
     if (allWallets.length === 1) {
       return allWallets[0].type;
     }
@@ -73,18 +69,30 @@ function AccountProfileLinkOptions() {
       isOptions && /* @__PURE__ */ jsx(CpslDivider, { children: "or" })
     ] }),
     isOptions && /* @__PURE__ */ jsx(GradientScroll, { height: "320px", children: options.filter((option) => option !== "EMAIL" && option !== "PHONE").map((option) => {
-      const isWallet = isExternalWallet(option);
+      const externalWallet = wallets.find((wallet) => wallet.id === option);
       return /* @__PURE__ */ jsxs(
         Option,
         {
           fullWidth: true,
           variant: "tertiary",
           onClick: () => linkAccount(
-            isWallet ? { externalWallet: { internalId: option, type: getExternalWalletType(option) } } : { type: option }
+            !!externalWallet ? {
+              externalWallet: {
+                provider: externalWallet.id,
+                type: getExternalWalletType(externalWallet.id)
+              }
+            } : { type: option }
           ),
           children: [
-            /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: option, size: "24px" }),
-            /* @__PURE__ */ jsx(CpslText, { color: "contrast", variant: "bodyM", children: getAccountTypeName(option) })
+            /* @__PURE__ */ jsx(
+              AccountTypeIcon,
+              {
+                accountType: externalWallet ? void 0 : option,
+                src: externalWallet ? externalWallet.iconUrl : void 0,
+                size: "24px"
+              }
+            ),
+            /* @__PURE__ */ jsx(CpslText, { color: "contrast", variant: "bodyM", children: externalWallet ? externalWallet.name : getAccountTypeName(option) })
           ]
         },
         option

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

@@ -9,19 +9,21 @@ import { useAccountLinking } from "../../../provider/providers/AccountLinkProvid
 import { safeStyled } from "@getpara/react-common";
 function AccountProfileUnlink() {
   var _a, _b;
-  const { unlinkingAccount, unlinkAccountConfirm, isUnlinkAccountPending } = useAccountLinking(), [accountType, setAccountType] = useState((_b = (_a = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a.providerId) != null ? _b : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+  const { unlinkingAccount, unlinkAccountConfirm, isUnlinkAccountPending } = useAccountLinking(), [accountType, setAccountType] = useState((_b = (_a = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a.providerId) != null ? _b : unlinkingAccount == null ? void 0 : unlinkingAccount.type), [isUnlinkingExternalWallet, setIsUnlinkingExternalWallet] = useState(false);
   useEffect(() => {
     var _a2, _b2;
     if (unlinkingAccount) {
-      setAccountType((_b2 = (_a2 = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a2.providerId) != null ? _b2 : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+      setAccountType((_b2 = (_a2 = unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet) == null ? void 0 : _a2.provider) != null ? _b2 : unlinkingAccount == null ? void 0 : unlinkingAccount.type);
+      setIsUnlinkingExternalWallet(!!(unlinkingAccount == null ? void 0 : unlinkingAccount.externalWallet));
     }
   }, [unlinkingAccount]);
   return /* @__PURE__ */ jsxs(Content, { children: [
     /* @__PURE__ */ jsxs(Upper, { children: [
       /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "80px", inset: "5px" }),
       /* @__PURE__ */ jsxs(Message, { variant: "bodyM", weight: "semiBold", color: "contrast", children: [
-        "Are you sure you want to unlink your ",
-        getAccountTypeName(accountType, { inline: true }),
+        "Are you sure you want to unlink your",
+        " ",
+        isUnlinkingExternalWallet ? accountType : getAccountTypeName(accountType, { inline: true }),
         "?"
       ] })
     ] }),

package/dist/modal/components/AddFunds/AddFundsAwaiting.d.ts

@@ -1 +1 @@
-export declare const AddFundsAwaiting: () => import("react/jsx-runtime").JSX.Element;
+export declare const AddFundsAwaiting: () => null;

package/dist/modal/components/AddFunds/AddFundsAwaiting.js

@@ -1,63 +1,15 @@
 "use client";
-import {
-  __spreadProps,
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { StepContainer } from "../common.js";
-import { OnRampProvider } from "@getpara/web-sdk";
+import "../../../chunk-MMUBH76A.js";
 import { useModalStore } from "../../stores/index.js";
-import { lazy, useEffect, useMemo, useState } from "react";
+import { useEffect } from "react";
 import { ModalStep } from "../../utils/steps.js";
-import { RampEmbed } from "@getpara/react-common";
-import { safeStyled } from "@getpara/react-common";
-import { useGoBack } from "../../hooks/useGoBack.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useStore } from "../../../provider/stores/useStore.js";
 const STEPS = {
   CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
   FINISHED: ModalStep.ADD_FUNDS_SUCCESS
 };
 const AddFundsAwaiting = () => {
   const setStep = useModalStore((state) => state.setStep);
-  const goBack = useGoBack();
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
   const onRampPurchase = useModalStore((state) => state.onRampPurchase);
-  const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
-  const para = useInternalClient();
-  const appName = useStore((state) => state.appName);
-  const isDark = useStore((state) => state.isDarkTheme);
-  const [MoonPayEmbed, setMoonPayEmbed] = useState();
-  const props = {
-    para,
-    appName,
-    onRampConfig,
-    onRampPurchase,
-    isDark,
-    isEmbedded: true,
-    setOnRampPurchase,
-    onClose: goBack
-  };
-  useEffect(() => {
-    const _MoonPayEmbed = lazy(() => import("./MoonPayEmbed.js"));
-    if (_MoonPayEmbed) {
-      setMoonPayEmbed(_MoonPayEmbed);
-    }
-  }, []);
-  const onRampEmbed = useMemo(() => {
-    var _a, _b;
-    if (!(onRampPurchase == null ? void 0 : onRampPurchase.id) || !props.onRampConfig) {
-      return null;
-    }
-    switch (onRampPurchase == null ? void 0 : onRampPurchase.provider) {
-      case OnRampProvider.MOONPAY:
-        return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
-      case OnRampProvider.RAMP:
-        return /* @__PURE__ */ jsx(RampEmbed, __spreadProps(__spreadValues({}, props), { apiKey: (_b = (_a = props.onRampConfig) == null ? void 0 : _a.rampApiKey) != null ? _b : "", onRampConfig: props.onRampConfig }));
-      default:
-        return null;
-    }
-  }, [onRampPurchase == null ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
   useEffect(() => {
     let timeoutId;
     if ((onRampPurchase == null ? void 0 : onRampPurchase.status) && ["CANCELLED", "FINISHED"].includes(onRampPurchase.status)) {
@@ -68,11 +20,8 @@ const AddFundsAwaiting = () => {
     }
     return () => clearTimeout(timeoutId);
   }, [onRampPurchase == null ? void 0 : onRampPurchase.status]);
-  return /* @__PURE__ */ jsx(Container, { $wide: true, children: onRampEmbed });
+  return null;
 };
-const Container = safeStyled(StepContainer)`
-  flex: 1;
-`;
 export {
   AddFundsAwaiting
 };

package/dist/modal/components/AddFunds/AddFundsProvider.js

@@ -14,8 +14,7 @@ import { useStore } from "../../../provider/stores/useStore.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { OnRampProviderButton } from "../OnRampComponents/OnRampProviderButton.js";
 import { useWallet } from "../../../provider/index.js";
-import { EnabledFlow, OnRampProvider, OnRampPurchaseType } from "@getpara/web-sdk";
-import { ModalStep } from "../../utils/steps.js";
+import { EnabledFlow, OnRampPurchaseType } from "@getpara/web-sdk";
 import { contentMotionProps } from "./common.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 function AddFundsProvider() {
@@ -26,7 +25,6 @@ function AddFundsProvider() {
   });
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
-  const setModalStep = useModalStore((state) => state.setStep);
   const { asset, network, fiatQuantity, isProviderAllowed, tab } = useAddFunds();
   const { data: activeWallet } = useWallet();
   return /* @__PURE__ */ jsxs(Container, __spreadProps(__spreadValues({}, contentMotionProps), { children: [
@@ -53,11 +51,10 @@ function AddFundsProvider() {
                 index,
                 onClick: () => __async(this, null, function* () {
                   if (!(activeWallet == null ? void 0 : activeWallet.type)) return;
-                  const isPopup = id !== OnRampProvider.RAMP;
                   const { onRampPurchase: newOnRampPurchase } = yield para.initiateOnRampTransaction({
                     walletId: activeWallet.isExternal ? void 0 : activeWallet.id,
                     externalWalletAddress: activeWallet.isExternal ? activeWallet.id : void 0,
-                    shouldOpenPopup: isPopup,
+                    shouldOpenPopup: true,
                     params: {
                       type: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL,
                       walletType: activeWallet.type,
@@ -69,7 +66,6 @@ function AddFundsProvider() {
                     }
                   });
                   setOnRampPurchase(__spreadProps(__spreadValues({}, newOnRampPurchase), { fiat: "USD" }));
-                  !isPopup && setModalStep(ModalStep.ADD_FUNDS_AWAITING);
                 })
               },
               id

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -117,7 +117,7 @@ const AuthMainStepContent = ({
       GuestMode,
       {
         href: "#",
-        isDark,
+        $isDark: isDark,
         onClick: (e) => {
           e.preventDefault();
           createGuestWallets();
@@ -153,7 +153,7 @@ const GuestMode = safeStyled.a`
   align-items: center;
   width: 100%;
   height: 50px;
-  color: ${({ isDark }) => isDark ? "white" : "black"};
+  color: ${({ $isDark }) => $isDark ? "white" : "black"};
   text-decoration: none;
   font-size: 16px;
   font-weight: 500;

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

@@ -11,23 +11,23 @@ import { useAccountLinking } from "../../../provider/providers/AccountLinkProvid
 const ExternalWalletNetworkSelectStep = () => {
   var _a, _b;
   const setStep = useModalStore((state) => state.setStep);
-  const selectedExternalWalletId = useModalStore((state) => state.selectedExternalWalletId);
-  const setSelectedExternalWalletId = useModalStore((state) => state.setSelectedExternalWalletId);
+  const selectedExternalWallet = useModalStore((state) => state.selectedExternalWallet);
+  const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
   const { wallets, connectExternalWallet } = 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 && !selectedExternalWalletId) {
+  if (!accountLinkInProgress && !selectedExternalWallet) {
     setStep(ModalStep.ACCOUNT_MAIN);
     return null;
   }
-  const availableWallets = wallets.filter((w) => w.internalId === (externalWalletProvider != null ? externalWalletProvider : selectedExternalWalletId));
+  const availableWallets = wallets.filter((w) => w.id === (externalWalletProvider != null ? externalWalletProvider : selectedExternalWallet == null ? void 0 : selectedExternalWallet.id));
   const firstWallet = availableWallets[0];
   const handleWalletClick = (wallet) => () => {
     if (accountLinkInProgress) {
-      linkAccount({ externalWallet: wallet });
+      linkAccount({ externalWallet: { provider: wallet.id } });
       return;
     }
-    setSelectedExternalWalletId(wallet.internalId);
+    setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
     setStep(ModalStep.EX_WALLET_SELECTED);
     if (wallet.installed || wallet.internalId === "FARCASTER") {
       connectExternalWallet(wallet);

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

@@ -14,7 +14,7 @@ import { useExternalWallets } from "../../../provider/providers/ExternalWalletPr
 const HAS_MORE_LENGTH = 3;
 const ExternalWallets = () => {
   const { wallets: allWallets, connectExternalWallet } = useExternalWallets();
-  const setSelectedExternalWalletId = useModalStore((state) => state.setSelectedExternalWalletId);
+  const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
   const setStep = useModalStore((state) => state.setStep);
   const showAll = useModalStore((state) => state.step === ModalStep.EX_WALLET_MORE);
   const authLayout = useModalStore((state) => state.authLayout);
@@ -34,11 +34,11 @@ const ExternalWallets = () => {
   const handleWalletClick = (wallet) => () => {
     const shouldShowNetworkSelection = allWallets.filter((w) => w.id === wallet.id).length > 1;
     if (shouldShowNetworkSelection) {
-      setSelectedExternalWalletId(wallet.internalId);
+      setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
       setStep(ModalStep.EX_WALLET_NETWORK_SELECT);
       return;
     }
-    setSelectedExternalWalletId(wallet.internalId);
+    setSelectedExternalWallet({ id: wallet.id, type: wallet.type });
     setStep(ModalStep.EX_WALLET_SELECTED);
     if (wallet.installed) {
       connectExternalWallet(wallet);
@@ -141,8 +141,8 @@ const Badge = safeStyled.div`
   }
 `;
 const InstalledIndicator = safeStyled.span`
-  width: 8px;
-  height: 8px;
+  width: 4px;
+  height: 4px;
   border-radius: 100%;
   background-color: var(--cpsl-color-utility-green);
 `;

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

@@ -1,5 +1,5 @@
 import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
-import { Network, OnRampAsset, TExternalWallet, TLinkedAccountType } from '@getpara/web-sdk';
+import { Network, OnRampAsset, TLinkedAccountType } from '@getpara/web-sdk';
 import { 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;
 export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -41,13 +41,15 @@ export declare const ErrorContainer: import("styled-components/dist/types.js").I
 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"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
-export declare function AccountTypeIcon({ accountType, size, inset, }: {
-    accountType?: TLinkedAccountType | TExternalWallet;
+export declare function AccountTypeIcon({ accountType, size, inset, src, }: {
+    accountType?: TLinkedAccountType | string;
     size?: string;
     inset?: string;
+    src?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
-export declare function HeroAccountTypeIcon({ accountType }: {
-    accountType: TLinkedAccountType | TExternalWallet;
+export declare function HeroAccountTypeIcon({ accountType, src }: {
+    accountType?: TLinkedAccountType | string;
+    src?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function HeroSuccessIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function GradientScroll({ height, gap, children }: PropsWithChildren<{

package/dist/modal/components/common.js

@@ -157,7 +157,8 @@ const ErrorIcon = safeStyled(CpslIcon)`
 function AccountTypeIcon({
   accountType,
   size,
-  inset
+  inset,
+  src
 }) {
   var _a;
   const isDark = useStore((state) => {
@@ -165,13 +166,13 @@ function AccountTypeIcon({
     return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
   });
   const data = accountType ? ACCOUNT_TYPES[accountType] : null;
-  return data ? /* @__PURE__ */ jsx(CpslIcon, { size, inset, icon: (_a = data.logoBranded) != null ? _a : data.logo, invert: isDark && data.isDark }) : null;
+  return data || src ? /* @__PURE__ */ jsx(CpslIcon, { size, inset, icon: (_a = data == null ? void 0 : data.logoBranded) != null ? _a : data == null ? void 0 : data.logo, src, invert: isDark && (data == null ? void 0 : data.isDark) }) : null;
 }
-function HeroAccountTypeIcon({ accountType }) {
+function HeroAccountTypeIcon({ accountType, src }) {
   if (accountType === "EMAIL" || accountType === "PHONE") {
     return /* @__PURE__ */ jsx(HeroGenericIcon, { accountType });
   }
-  return /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "60px" });
+  return /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "60px", src });
 }
 function HeroSuccessIcon() {
   return /* @__PURE__ */ jsx(CpslIcon, { icon: "checkCircleFilled", size: "80px", style: { ["--icon-color"]: "var(--cpsl-color-utility-green" } });

package/dist/modal/constants/constants.js

@@ -121,7 +121,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.33";
+const SDK_VERSION = "2.0.0-alpha.34";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/constants/oAuthLogos.d.ts

@@ -1,8 +1,7 @@
-import { TExternalWallet } from '@getpara/web-sdk';
 import { IconType } from '@getpara/react-components';
 import { TLinkedAccountType } from '@getpara/web-sdk';
 export declare const ACCOUNT_TYPES: {
-    [key in TLinkedAccountType | TExternalWallet]: {
+    [key in TLinkedAccountType | string]: {
         logo: IconType;
         logoBranded?: IconType;
         name: string;
@@ -11,7 +10,7 @@ export declare const ACCOUNT_TYPES: {
         isExternalWallet?: boolean;
     };
 };
-export declare function getAccountTypeName(type: TLinkedAccountType | TExternalWallet | undefined, { inline }?: {
+export declare function getAccountTypeName(type: TLinkedAccountType | string | undefined, { inline }?: {
     inline?: boolean;
 }): string | undefined;
 export declare function getAccountTypeLogo(type: TLinkedAccountType | undefined): IconType | undefined;

package/dist/modal/constants/oAuthLogos.js

@@ -1,143 +1,143 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
 const ACCOUNT_TYPES = {
-  EMAIL: {
+  "EMAIL": {
     logo: "mail",
     name: "Email",
     inline: "email address",
     isDark: true
   },
-  PHONE: {
+  "PHONE": {
     logo: "phone",
     name: "Phone",
     inline: "phone number",
     isDark: true
   },
-  EXTERNAL_WALLET: {
+  "EXTERNAL_WALLET": {
     logo: "wallet",
     name: "External Wallet",
     inline: "external wallet",
     isDark: true
   },
-  GOOGLE: {
+  "GOOGLE": {
     logo: "google",
     logoBranded: "googleBrand",
     name: "Google"
   },
-  TWITTER: {
+  "TWITTER": {
     logo: "twitter",
     logoBranded: "twitterBrand",
     name: "X / Twitter",
     inline: "X account",
     isDark: true
   },
-  APPLE: {
+  "APPLE": {
     logo: "apple",
     logoBranded: "appleBrand",
     name: "Apple",
     isDark: true
   },
-  DISCORD: {
+  "DISCORD": {
     logo: "discord",
     logoBranded: "discordBrand",
     name: "Discord"
   },
-  FACEBOOK: {
+  "FACEBOOK": {
     logo: "facebook",
     logoBranded: "facebookBrand",
     name: "Facebook"
   },
-  FARCASTER: {
+  "FARCASTER": {
     logo: "farcaster",
     logoBranded: "farcasterBrand",
     name: "Farcaster"
   },
-  TELEGRAM: {
+  "TELEGRAM": {
     logo: "telegram",
     logoBranded: "telegramBrand",
     name: "Telegram"
   },
-  METAMASK: {
+  "MetaMask": {
     logo: "metamask",
     name: "MetaMask",
     isExternalWallet: true
   },
-  RAINBOW: {
+  "Rainbow": {
     logo: "rainbow",
     name: "Rainbow",
     isExternalWallet: true
   },
-  COINBASE: {
+  "Coinbase Wallet": {
     logo: "coinbase",
     name: "Coinbase Wallet",
     isExternalWallet: true
   },
-  WALLETCONNECT: {
+  "WalletConnect": {
     logo: "walletConnect",
     name: "WalletConnect",
     isExternalWallet: true
   },
-  ZERION: {
+  "Zerion": {
     logo: "zerion",
     name: "Zerion",
     isExternalWallet: true
   },
-  SAFE: {
+  "Safe": {
     logo: "safe",
     name: "Safe",
     isExternalWallet: true
   },
-  RABBY: {
+  "Rabby": {
     logo: "rabby",
     name: "Rabby",
     isExternalWallet: true
   },
-  OKX: {
+  "OKX Wallet": {
     logo: "okx",
-    name: "OKX",
+    name: "OKX Wallet",
     isExternalWallet: true
   },
-  PHANTOM: {
+  "Phantom": {
     logo: "phantom",
     name: "Phantom",
     isExternalWallet: true
   },
-  GLOW: {
+  "Glow": {
     logo: "glow",
     name: "Glow",
     isExternalWallet: true
   },
-  BACKPACK: {
+  "Backpack": {
     logo: "backpack",
     name: "Backpack",
     isExternalWallet: true
   },
-  KEPLR: {
+  "Keplr": {
     logo: "keplr",
     name: "Keplr",
     isExternalWallet: true
   },
-  LEAP: {
+  "Leap": {
     logo: "leap",
     name: "Leap",
     isExternalWallet: true
   },
-  HAHA: {
+  "HaHa": {
     logo: "haha",
     name: "HaHa",
     isExternalWallet: true
   },
-  COSMOSTATION: {
+  "Cosmostation": {
     logo: "cosmostation",
     name: "Cosmostation",
     isExternalWallet: true
   },
-  SOLFLARE: {
+  "Solflare": {
     logo: "solflare",
     name: "Solflare",
     isExternalWallet: true
   },
-  VALORA: {
+  "Valora": {
     logo: "valora",
     name: "Valora",
     isExternalWallet: true

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

@@ -49,7 +49,7 @@ const getActions = (set, get) => ({
       prevStep = ModalStep.AUTH_MAIN;
     }
     if (currentStep === ModalStep.EX_WALLET_SELECTED) {
-      set({ selectedExternalWalletId: void 0, isExternalWalletConnecting: false, externalWalletError: void 0 });
+      set({ selectedExternalWallet: void 0, isExternalWalletConnecting: false, externalWalletError: void 0 });
     }
     if (prevStep) {
       set(__spreadValues({
@@ -107,7 +107,7 @@ const getActions = (set, get) => ({
   setIsFullyLoggedIn: (isFullyLoggedIn) => set({ isFullyLoggedIn }),
   setAccountAddFundTab: (accountAddFundTab) => set({ accountAddFundTab }),
   setGuestAddFundsTab: (guestAddFundsTab) => set({ guestAddFundsTab }),
-  setSelectedExternalWalletId: (selectedExternalWalletId) => set({ selectedExternalWalletId }),
+  setSelectedExternalWallet: (selectedExternalWallet) => set({ selectedExternalWallet }),
   setIsExternalWalletConnecting: (isExternalWalletConnecting) => set({ isExternalWalletConnecting }),
   setExternalWalletError: (externalWalletError) => set({ externalWalletError }),
   setIsUsingMobileConnector: (isUsingMobileConnector) => set({ isUsingMobileConnector }),

package/dist/modal/stores/modal/useModalStore.d.ts

@@ -30,7 +30,10 @@ interface ModalState {
     isFullyLoggedIn: boolean;
     accountAddFundTab?: AddFundsTabType;
     guestAddFundsTab?: AddFundsTabType;
-    selectedExternalWalletId?: string;
+    selectedExternalWallet?: {
+        id: string;
+        type: TWalletType;
+    };
     isUsingMobileConnector?: boolean;
     isExternalWalletConnecting?: boolean;
     externalWalletError?: string[];
@@ -75,7 +78,10 @@ export interface ModalActions {
     setOnRampStep: (_: OnRampStep) => void;
     setIsFullyLoggedIn: (isFullyLoggedIn: boolean) => void;
     setAccountAddFundTab: (accountAddFundTab?: AddFundsTabType) => void;
-    setSelectedExternalWalletId: (id?: string) => void;
+    setSelectedExternalWallet: (_?: {
+        id: string;
+        type: TWalletType;
+    }) => void;
     setIsUsingMobileConnector: (isUsingMobileConnector?: boolean) => void;
     setIsExternalWalletConnecting: (isExternalWalletConnecting: boolean) => void;
     setExternalWalletError: (externalWalletError?: string[]) => void;

package/dist/modal/stores/modal/useModalStore.js

@@ -61,7 +61,7 @@ const useModalStore = create()(
         step: state.step,
         authState: state.authState,
         onRampPurchase: state.onRampPurchase,
-        selectedExternalWalletId: state.selectedExternalWalletId,
+        selectedExternalWallet: state.selectedExternalWallet,
         isUsingMobileConnector: state.isUsingMobileConnector,
         isPasskeySupported: state.isPasskeySupported
       })

package/dist/provider/hooks/mutations/useLinkAccount.d.ts

@@ -1,5 +1,34 @@
+import { TExternalWallet, TWalletType } from '@getpara/web-sdk';
+import { ModalLinkAccountArgs } from '../../providers/AccountLinkProvider.js';
+/**
+ * Arguments for linking accounts via modal
+ * @example
+ * // Open modal for user to select link type
+ * linkAccount()
+ *
+ * @example
+ * // Link with email
+ * linkAccount({ auth: { email: "user@example.com" } })
+ *
+ * @example
+ * // Link specific account type
+ * linkAccount({ type: "TWITTER" })
+ *
+ * @example
+ * // Link external wallet and allow user to select type
+ * linkAccount({ externalWallet: { provider: "METAMASK" } })
+ * OR
+ * // Link external wallet with specific type
+ * linkAccount({ externalWallet: { provider: "METAMASK", type: "EVM" } })
+ */
+export type LinkAccountArgs = Omit<ModalLinkAccountArgs, 'externalWallet'> | {
+    externalWallet: {
+        provider: TExternalWallet;
+        type?: TWalletType;
+    };
+} | undefined;
 export declare const useLinkAccount: () => {
-    linkAccount: (_: import("../../providers/AccountLinkProvider.js").ModalLinkAccountArgs) => Promise<void>;
+    linkAccount: (args: LinkAccountArgs) => Promise<void>;
     error: string | null;
     status: import("@tanstack/query-core").MutationStatus;
     isPending: boolean;

package/dist/provider/hooks/mutations/useLinkAccount.js

@@ -4,7 +4,9 @@ import { useAccountLinking } from "../../providers/AccountLinkProvider.js";
 const useLinkAccount = () => {
   const { linkAccount, linkAccountError, linkAccountStatus } = useAccountLinking();
   return {
-    linkAccount,
+    linkAccount: (args) => {
+      return linkAccount(args);
+    },
     error: linkAccountError,
     status: linkAccountStatus,
     isPending: linkAccountStatus === "pending",

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

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 import { MutationStatus } from '@tanstack/react-query';
-import { AccountLinkError, AccountLinkInProgress as CoreAccountLinkInProgress, LinkedAccount, LinkedAccounts, SupportedAccountLinks, TelegramAuthResponse, TExternalWallet, TLinkedAccountType, Auth, InternalMethodParams } from '@getpara/web-sdk';
-import { TWalletType } from '@getpara/user-management-client';
+import { AccountLinkError, AccountLinkInProgress as CoreAccountLinkInProgress, LinkedAccount, LinkedAccounts, SupportedAccountLinks, TelegramAuthResponse, TLinkedAccountType, Auth, InternalMethodParams } from '@getpara/web-sdk';
+import { TExternalWallet, TWalletType } from '@getpara/user-management-client';
 type AccountLinkInProgress = Partial<CoreAccountLinkInProgress & {
-    pendingWalletProvider?: TExternalWallet;
+    pendingWalletProvider?: string;
     pendingWalletType?: TWalletType;
 }>;
 export type ModalLinkAccountArgs = undefined | {
@@ -12,7 +12,7 @@ export type ModalLinkAccountArgs = undefined | {
     type: Exclude<TLinkedAccountType, 'EXTERNAL_WALLET'> | 'X';
 } | {
     externalWallet: {
-        internalId: TExternalWallet;
+        provider: TExternalWallet | string;
         type?: TWalletType;
     };
 } | {

package/dist/provider/providers/AccountLinkProvider.js

@@ -18,7 +18,7 @@ import { useExternalWallets } from "./ExternalWalletProvider.js";
 import { useInternalClient } from "../hooks/utils/useInternalClient.js";
 import { generateInternalMutation } from "../hooks/mutations/utils.js";
 import { validateAuth } from "../../modal/utils/authInputHelpers.js";
-import { extractAuthInfo } from "@getpara/user-management-client";
+import { EXTERNAL_WALLET_TYPES, extractAuthInfo } from "@getpara/user-management-client";
 import { useStore } from "../stores/useStore.js";
 const AccountLinkContext = createContext({
   isEnabled: false,
@@ -119,6 +119,7 @@ const AccountLinkProvider = ({ children }) => {
   const [linkAccountError, setLinkAccountError] = useState(null);
   const [linkAccountStatus, setLinkAccountStatus] = useState("pending");
   const linkAccount = (args) => __async(void 0, null, function* () {
+    var _a2;
     if (!isEnabled) {
       setLinkAccountError(AccountLinkError.NotAuthenticated);
       throw new Error(AccountLinkError.NotAuthenticated);
@@ -138,9 +139,17 @@ const AccountLinkProvider = ({ children }) => {
         break;
       case (args && "externalWallet" in args):
         {
-          const providerId = args.externalWallet.internalId;
+          const isSupportedWalletType = EXTERNAL_WALLET_TYPES.includes(args.externalWallet.provider);
+          let supportedWalletId;
+          if (isSupportedWalletType) {
+            supportedWalletId = (_a2 = wallets.find((w) => w.internalId === args.externalWallet.provider)) == null ? void 0 : _a2.id;
+            if (!supportedWalletId) {
+              throw new Error(`wallet not installed: ${args.externalWallet.provider}`);
+            }
+          }
+          const providerId = supportedWalletId != null ? supportedWalletId : args.externalWallet.provider;
           const type = args.externalWallet.type;
-          if (providerId === (connectedWallet == null ? void 0 : connectedWallet.internalId)) {
+          if (providerId === (connectedWallet == null ? void 0 : connectedWallet.id)) {
             throw new Error(`Cannot link the currently connected external wallet: ${providerId}`);
           }
           setAccountLinkInProgress({
@@ -148,7 +157,7 @@ const AccountLinkProvider = ({ children }) => {
             pendingWalletProvider: providerId,
             pendingWalletType: type
           });
-          const linkWallet = wallets.find((w) => w.internalId === providerId);
+          const linkWallet = wallets.find((w) => w.id === providerId);
           if (!linkWallet) {
             throw new Error(`wallet not installed: ${providerId}`);
           }
@@ -181,7 +190,7 @@ const AccountLinkProvider = ({ children }) => {
             setLinkAccountError(`Error authenticating external wallet: ${e.message}`);
           } finally {
             if (linkWallet.type === "EVM" || linkWallet.type === "SOLANA") {
-              yield disconnectBase(providerId);
+              yield disconnectBase(providerId, linkWallet.type);
             }
           }
         }

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { TWalletType } from '@getpara/web-sdk';
-import { BalanceManagement, ChainManagement, CommonWallet, ExternalWalletContextType, TExternalWallet } from '@getpara/react-common';
+import { BalanceManagement, ChainManagement, CommonWallet, ExternalWalletContextType } from '@getpara/react-common';
 import { ExternalWalletInfo, VerifyExternalWalletParams } from '@getpara/web-sdk';
 import { CosmosSignResult } from '@getpara/cosmos-wallet-connectors';
 export declare const useWalletDisplayHelpers: (wallet: CommonWallet | undefined) => {
@@ -31,11 +31,11 @@ export declare const defaultExternalWallet: {
     signMessage: () => Promise<any>;
     isSigningMessage: boolean;
     getWalletBalance: () => Promise<undefined>;
-    requestInfo: (_: TExternalWallet) => Promise<ExternalWalletInfo>;
-    disconnectBase: (_: TExternalWallet) => Promise<void>;
+    requestInfo: (_: string) => Promise<ExternalWalletInfo>;
+    disconnectBase: (_: string, __: TWalletType) => Promise<void>;
     connectFarcasterMiniApp: () => Promise<void>;
 };
-type Value = Omit<ExternalWalletContextType<CosmosSignResult>, 'disconnect' | 'signVerificationMessage' | 'requestInfo'> & ChainManagement<string, void> & BalanceManagement & {
+type Value = Omit<ExternalWalletContextType<CosmosSignResult>, 'disconnect' | 'signVerificationMessage' | 'requestInfo' | 'disconnectBase'> & ChainManagement<string, void> & BalanceManagement & {
     wallet?: CommonWallet;
     qrUri?: string;
     chainIdSwitchingTo?: string;
@@ -52,7 +52,8 @@ type Value = Omit<ExternalWalletContextType<CosmosSignResult>, 'disconnect' | 's
     connectEmbeddedToExternalConnectors: () => Promise<void>;
     isSigningMessage: boolean;
     verifyWalletSignature: () => Promise<VerifyExternalWalletParams | undefined>;
-    requestInfo: (_: TExternalWallet, __: TWalletType) => Promise<ExternalWalletInfo>;
+    requestInfo: (_: string, __: TWalletType) => Promise<ExternalWalletInfo>;
+    disconnectBase: (_: string, __: TWalletType) => Promise<void>;
     connectFarcasterMiniApp: () => Promise<void>;
 };
 export declare const ExternalWalletContext: import("react").Context<Value>;

package/dist/provider/providers/ExternalWalletProvider.js

@@ -11,11 +11,6 @@ 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 {
-  COSMOS_WALLETS,
-  EVM_WALLETS,
-  SOLANA_WALLETS
-} from "@getpara/web-sdk";
 import { useAuthActions } from "./AuthProvider.js";
 const useWalletDisplayHelpers = (wallet) => {
   const isUsingMobileConnector = useModalStore((state) => state.isUsingMobileConnector);
@@ -49,7 +44,7 @@ const defaultExternalWallet = {
   isSigningMessage: false,
   getWalletBalance: () => Promise.resolve(void 0),
   requestInfo: (_) => Promise.resolve({}),
-  disconnectBase: (_) => Promise.resolve(),
+  disconnectBase: (_, __) => Promise.resolve(),
   connectFarcasterMiniApp: () => Promise.resolve()
 };
 const ExternalWalletContext = createContext(defaultExternalWallet);
@@ -107,8 +102,8 @@ function ExternalWalletProvider({ children }) {
   const setStepDirection = useModalStore((state) => state.setStepDirection);
   const setIsExternalWalletConnecting = useModalStore((state) => state.setIsExternalWalletConnecting);
   const isExternalWalletConnecting = useModalStore((state) => state.isExternalWalletConnecting);
-  const setSelectedExternalWalletId = useModalStore((state) => state.setSelectedExternalWalletId);
-  const selectedExternalWalletId = useModalStore((state) => state.selectedExternalWalletId);
+  const selectedExternalWallet = useModalStore((state) => state.selectedExternalWallet);
+  const setSelectedExternalWallet = useModalStore((state) => state.setSelectedExternalWallet);
   const setExternalWalletError = useModalStore((state) => state.setExternalWalletError);
   const setIsUsingMobileConnector = useModalStore((state) => state.setIsUsingMobileConnector);
   const refs = useModalStore((state) => state.refs);
@@ -119,14 +114,19 @@ function ExternalWalletProvider({ children }) {
   const [qrUri, setQrUri] = useState();
   const [chainIdSwitchingTo, setChainIdSwitchingTo] = useState();
   const [isSigningMessage, setIsSigningMessage] = useState(false);
-  const wallets = [...evmWallets, ...solanaWallets, ...cosmosWallets].filter(
+  const allWallets = [...evmWallets, ...solanaWallets, ...cosmosWallets];
+  let wallets = allWallets.filter(
     (w) => (w.internalId !== "FARCASTER" || (para == null ? void 0 : para.isFarcasterMiniApp)) && externalWallets.includes(w.id.toUpperCase())
   ).sort(
     (a, b) => externalWallets.indexOf(a.id.toUpperCase()) - externalWallets.indexOf(b.id.toUpperCase())
   ).sort((a, b) => a.installed === b.installed ? 0 : a.installed ? -1 : 1);
+  const injectedWallets = allWallets.filter(
+    (w) => (w == null ? void 0 : w.id) !== "Para" && !wallets.some((wallet2) => wallet2.id === w.id) && w.installed
+  );
+  wallets = [...wallets, ...injectedWallets];
   const wallet = useMemo(
-    () => wallets.find((w) => w.internalId === selectedExternalWalletId),
-    [wallets, selectedExternalWalletId]
+    () => wallets.find((w) => w.id === (selectedExternalWallet == null ? void 0 : selectedExternalWallet.id) && w.type === (selectedExternalWallet == null ? void 0 : selectedExternalWallet.type)),
+    [wallets, selectedExternalWallet]
   );
   const updateQrUri = () => __async(this, null, function* () {
     var _a;
@@ -153,7 +153,7 @@ function ExternalWalletProvider({ children }) {
         return void 0;
       }
     }
-  }), [evmGetWalletBalance, selectedExternalWalletId]);
+  }), [evmGetWalletBalance, selectedExternalWallet]);
   const chains = useMemo(() => {
     var _a;
     const walletType = (_a = Object.values(para.externalWallets || {})[0]) == null ? void 0 : _a.type;
@@ -168,7 +168,7 @@ function ExternalWalletProvider({ children }) {
         return [];
       }
     }
-  }, [cosmosChains, evmChains, selectedExternalWalletId]);
+  }, [cosmosChains, evmChains, selectedExternalWallet]);
   const chainId = useMemo(() => {
     var _a;
     const walletType = (_a = Object.values(para.externalWallets || {})[0]) == null ? void 0 : _a.type;
@@ -183,7 +183,7 @@ function ExternalWalletProvider({ children }) {
         return void 0;
       }
     }
-  }, [cosmosChains, evmChains, selectedExternalWalletId]);
+  }, [cosmosChains, evmChains, selectedExternalWallet]);
   const switchChain = useCallback(
     (chainId2) => __async(this, null, function* () {
       var _a;
@@ -459,17 +459,12 @@ function ExternalWalletProvider({ children }) {
       }
     }
   });
-  const disconnectBase = (providerId) => __async(this, null, function* () {
-    const [isEvm, isSolana, _isCosmos] = [
-      EVM_WALLETS.includes(providerId),
-      SOLANA_WALLETS.includes(providerId),
-      COSMOS_WALLETS.includes(providerId)
-    ];
-    switch (true) {
-      case isEvm:
+  const disconnectBase = (providerId, type) => __async(this, null, function* () {
+    switch (type) {
+      case "EVM":
         yield evmDisconnectBase(providerId);
         break;
-      case isSolana:
+      case "SOLANA":
         yield solanaDisconnectBase(providerId);
         break;
       default: {
@@ -482,7 +477,7 @@ function ExternalWalletProvider({ children }) {
     yield para.logout();
     yield evmDisconnect();
     yield cosmosDisconnect();
-    setSelectedExternalWalletId();
+    setSelectedExternalWallet();
     yield solanaDisconnect();
   });
   const walletDisplayHelpers = useWalletDisplayHelpers(wallet);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@getpara/react-sdk-lite",
-  "version": "2.0.0-alpha.33",
+  "version": "2.0.0-alpha.34",
   "bin": {
     "setup-para": "dist/cli/cli.mjs"
   },
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.33",
-    "@getpara/react-components": "2.0.0-alpha.33",
-    "@getpara/web-sdk": "2.0.0-alpha.33",
+    "@getpara/react-common": "2.0.0-alpha.34",
+    "@getpara/react-components": "2.0.0-alpha.34",
+    "@getpara/web-sdk": "2.0.0-alpha.34",
     "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.33",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.33",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.33",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.34",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.34",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.34",
     "@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": "f338306fa30497d2190f8da2ff72ddd8d9d9032f",
+  "gitHead": "cff5cb1fa7284a850e688b20a6596d435315a475",
   "main": "dist/index.js",
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",