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

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(), { 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/OAuth/OAuth.js

@@ -17,7 +17,7 @@ const OAuth = ({ methods }) => {
   const isDark = useStore((state) => state.isDarkTheme);
   const setStep = useModalStore((state) => state.setStep);
   const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE || state.step === ModalStep.AUTH_GUEST_SIGNUP);
-  const { verifyFarcaster, verifyOAuth, isOAuthReady } = useAuthActions();
+  const { verifyFarcaster, verifyOAuth } = useAuthActions();
   const hasMore = methods.length > HAS_MORE_LENGTH;
   const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
   const handleShowAll = () => {
@@ -47,8 +47,7 @@ const OAuth = ({ methods }) => {
         icon: ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"],
         onClick: handleMethodClick(method),
         $index: index,
-        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length,
-        disabled: !isOAuthReady
+        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length
       },
       method
     )),
@@ -59,8 +58,7 @@ const OAuth = ({ methods }) => {
         icon: "moreLoginOptions",
         onClick: handleShowAll,
         $index: HAS_MORE_LENGTH - 1,
-        $totalItems: HAS_MORE_LENGTH,
-        disabled: !isOAuthReady
+        $totalItems: HAS_MORE_LENGTH
       }
     )
   ] });

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -125,7 +125,7 @@ const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
 };
 const VerificationCodeStep = () => {
   const { verifyNewAccount, verifyNewAccountStatus, verifyNewAccountError } = useAuthActions();
-  const { mutateAsync: resendVerificationCode } = useResendVerificationCode();
+  const { resendVerificationCodeAsync } = useResendVerificationCode();
   const para = useInternalClient();
   if (!para.authInfo) {
     return null;
@@ -136,7 +136,7 @@ const VerificationCodeStep = () => {
       authInfo: para.authInfo,
       onSubmit: verifyNewAccount,
       onResend: () => {
-        resendVerificationCode({ type: "SIGNUP" });
+        resendVerificationCodeAsync({ type: "SIGNUP" });
       },
       status: verifyNewAccountStatus,
       error: verifyNewAccountError

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.35";
 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;