@getpara/react-sdk 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './modal/index.js';
+export * from './provider/index.js';
 export * from '@getpara/web-sdk';
 export type { Theme } from '@getpara/react-components';
 import ParaWeb from '@getpara/web-sdk';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './modal/index.js';
+export * from './provider/index.js';
 export * from '@getpara/web-sdk';
 import ParaWeb from '@getpara/web-sdk';
 export default ParaWeb;

package/dist/modal/ParaModal.js

@@ -22,20 +22,47 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CpslAuthModal, defineCustomElements, generateTheme } from '@getpara/react-components';
 import { ModalContent } from './components/index.js';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useParaStore, useModalStore, useUserInfoStore, useThemeStore } from './stores/index.js';
+import { useModalStore, useUserInfoStore, useThemeStore } from './stores/index.js';
 import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from './utils/steps.js';
 import { AuthLayout } from './types/modalProps.js';
 import { DEFAULTS } from './constants/defaults.js';
 import { useGoBack } from './hooks/useGoBack.js';
-import { CURRENT_WALLET_IDS_CHANGE_EVENT, EXTERNAL_WALLET_CHANGE_EVENT } from '@getpara/web-sdk';
+import { ParaEvent } from '@getpara/web-sdk';
 import { ExternalWalletsWrapper } from './components/ExternalWalletsWrapper/ExternalWalletsWrapper.js';
 import styled from 'styled-components';
 import { useExternalWallets } from './providers/ExternalWalletContext.js';
 import { hasEmbeddedAuth, hasExternalWallet } from './utils/authLayoutHelpers.js';
+import { useModal, useWalletState } from '../provider/index.js';
+import { useStore } from '../provider/stores/useStore.js';
+import { useInternalClient } from '../provider/hooks/utils/useInternalClient.js';
 defineCustomElements();
-export const ParaModal = forwardRef((_a, ref) => {
-    var { para: _para, isOpen, theme, appName, logo, disableEmailLogin = false, disablePhoneLogin = false, oAuthMethods, bareModal = false, className, currentStepOverride, externalWallets, authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL], embeddedModal, onModalStepChange, hideWallets = false, onClose } = _a, rest = __rest(_a, ["para", "isOpen", "theme", "appName", "logo", "disableEmailLogin", "disablePhoneLogin", "oAuthMethods", "bareModal", "className", "currentStepOverride", "externalWallets", "authLayout", "embeddedModal", "onModalStepChange", "hideWallets", "onClose"]);
-    const para = _para;
+export const ParaModal = forwardRef((_a) => {
+    var { para, isOpen } = _a, rest = __rest(_a, ["para", "isOpen"]);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const setClient = useStore(state => state.setClient);
+    const client = useStore(state => state.client);
+    const { closeModal, openModal } = useModal();
+    useEffect(() => {
+        if (!client) {
+            setClient(para);
+        }
+        setIsInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (!isOpen) {
+            closeModal();
+        }
+        if (isOpen) {
+            openModal();
+        }
+    }, [isOpen]);
+    if (!isInitialized) {
+        return null;
+    }
+    return _jsx(ParaModalInner, Object.assign({ para: para }, rest));
+});
+const ParaModalInner = forwardRef((_a, ref) => {
+    var { theme, appName, logo, disableEmailLogin = false, disablePhoneLogin = false, oAuthMethods, bareModal = false, className, currentStepOverride, externalWallets, authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL], embeddedModal, onModalStepChange, hideWallets = false, onClose } = _a, rest = __rest(_a, ["theme", "appName", "logo", "disableEmailLogin", "disablePhoneLogin", "oAuthMethods", "bareModal", "className", "currentStepOverride", "externalWallets", "authLayout", "embeddedModal", "onModalStepChange", "hideWallets", "onClose"]);
     const modalContentRef = useRef(null);
     const updateThemeState = useThemeStore(state => state.updateState);
     const setWebAuthURLForLogin = useModalStore(state => state.setWebAuthURLForLogin);
@@ -44,7 +71,6 @@ export const ParaModal = forwardRef((_a, ref) => {
     const currentStep = useModalStore(state => state.step);
     const setOnModalStepChange = useModalStore(state => state.setOnModalStepChange);
     const setStep = useModalStore(state => state.setStep);
-    const setPara = useParaStore(state => state.setPara);
     const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
     const hasPreviousStep = useModalStore(state => state.hasPreviousStep());
     const setFlow = useModalStore(state => state.setFlow);
@@ -55,8 +81,10 @@ export const ParaModal = forwardRef((_a, ref) => {
     const resetModalState = useModalStore(state => state.resetState);
     const resetUserInfoState = useUserInfoStore(state => state.resetState);
     const setRecoveryShare = useUserInfoStore(state => state.setRecoveryShare);
-    const [activeWallet, setActiveWallet] = useModalStore(state => [state.activeWallet, state.setActiveWallet]);
     const { disconnectExternalWallet } = useExternalWallets();
+    const { isOpen, closeModal } = useModal();
+    const para = useInternalClient();
+    const { selectedWallet, setSelectedWallet } = useWalletState();
     const [isModalMounted, setIsModalMounted] = useState(false);
     const [isInit, setIsInit] = useState(false);
     useImperativeHandle(ref, () => {
@@ -97,7 +125,7 @@ export const ParaModal = forwardRef((_a, ref) => {
             }
             // Disconnect external wallets if the user is not longer logged in
             yield disconnectExternalWallet();
-            setActiveWallet([undefined, undefined]);
+            setSelectedWallet({ id: undefined, type: undefined });
             setIsFullyLoggedIn(false);
         }
         switch (true) {
@@ -159,7 +187,6 @@ export const ParaModal = forwardRef((_a, ref) => {
     useEffect(() => {
         if (para) {
             initModal();
-            setPara(para);
             if (bareModal) {
                 setIsModalMounted(true);
             }
@@ -175,23 +202,27 @@ export const ParaModal = forwardRef((_a, ref) => {
         }
     }, [isOpen]);
     const updateActiveWallet = () => {
-        if (!activeWallet[0] || !para.findWallet(activeWallet[0])) {
+        if (!(selectedWallet === null || selectedWallet === void 0 ? void 0 : selectedWallet.id) || !para.findWallet(selectedWallet === null || selectedWallet === void 0 ? void 0 : selectedWallet.id)) {
             const defaultWallet = para.findWallet(undefined, undefined, { forbidPregen: true });
-            defaultWallet && setActiveWallet([defaultWallet.id, defaultWallet.type]);
+            setSelectedWallet({ id: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.id, type: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.type });
         }
     };
     useEffect(() => {
-        setPara(para);
         updateActiveWallet();
     }, [para]);
     useEffect(() => {
-        window.addEventListener(CURRENT_WALLET_IDS_CHANGE_EVENT, updateActiveWallet);
-        window.addEventListener(EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
+        // TODO: remove this redundant listener once we force the use of the ParaProvider
+        window.addEventListener(ParaEvent.WALLETS_CHANGE_EVENT, updateActiveWallet);
+        window.addEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
         return () => {
-            window.removeEventListener(CURRENT_WALLET_IDS_CHANGE_EVENT, updateActiveWallet);
-            window.removeEventListener(EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
+            window.removeEventListener(ParaEvent.WALLETS_CHANGE_EVENT, updateActiveWallet);
+            window.removeEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
         };
     }, []);
+    const handleClose = () => {
+        closeModal();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
     const handleModalEntering = () => {
         setIsModalMounted(true);
     };
@@ -233,7 +264,7 @@ export const ParaModal = forwardRef((_a, ref) => {
         }
         return null;
     }
-    return (_jsx(ExternalWalletsWrapper, { wallets: externalWallets, children: _jsx(StyledAuthModal, { enterTransitionDuration: DEFAULTS.ANIMATION_DURATION, exitTransitionDuration: DEFAULTS.ANIMATION_DURATION, open: isOpen, onCpslModalExited: handleModalExited, onCpslModalEntering: handleModalEntering, onCpslModalRequestClose: onClose, noOverlay: bareModal, className: className, "data-testid": "modal", "$embeddedModal": embeddedModal, children: isModalMounted && ((isInit && embeddedModal) || !embeddedModal) && (_jsx(ModalContent, Object.assign({ oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, onClose: onClose }, rest))) }) }));
+    return (_jsx(ExternalWalletsWrapper, { wallets: externalWallets, children: _jsx(StyledAuthModal, { enterTransitionDuration: DEFAULTS.ANIMATION_DURATION, exitTransitionDuration: DEFAULTS.ANIMATION_DURATION, open: isOpen, onCpslModalExited: handleModalExited, onCpslModalEntering: handleModalEntering, onCpslModalRequestClose: handleClose, noOverlay: bareModal, className: className, "data-testid": "modal", "$embeddedModal": embeddedModal, children: isModalMounted && ((isInit && embeddedModal) || !embeddedModal) && (_jsx(ModalContent, Object.assign({ oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, onClose: handleClose }, rest))) }) }));
 });
 const StyledAuthModal = styled(CpslAuthModal) `
   ${({ $embeddedModal }) => $embeddedModal &&

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

@@ -11,16 +11,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import styled from 'styled-components';
 import { InnerStepContainer, StepContainer, StyledCpslTileButton } from '../common.js';
 import { CpslButton, CpslIcon, CpslSpinner, CpslText } from '@getpara/react-components';
-import { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { useModalStore, useThemeStore } from '../../stores/index.js';
 import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
 import { useState } from 'react';
 import { ModalStep } from '../../utils/steps.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 export const Account = ({ onClose }) => {
     const onRampConfig = useModalStore(state => state.onRampConfig);
     const setStep = useModalStore(state => state.setStep);
-    const para = useParaStore(state => state.para);
     const hideWallets = useThemeStore(state => state.hideWallets);
     const { disconnectExternalWallet } = useExternalWallets();
+    const para = useInternalClient();
     const [isDisconnecting, setIsDisconnecting] = useState(false);
     const isOnRampLoaded = !!onRampConfig;
     const handleBuyClick = () => {

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

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { EnabledFlow, getOnRampAssets, getOnRampNetworks, OnRampProvider, OnRampPurchaseType, toAssetInfoArray, WalletType, } from '@getpara/web-sdk';
 import { CenteredText, FilledDisabledInput, Heading, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
 import { CpslButton, CpslDivider, CpslIcon, CpslIdenticon, CpslQrCode, CpslSpinner, CpslTab, CpslTabs, CpslText, } from '@getpara/react-components';
-import { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { useModalStore, useThemeStore } from '../../stores/index.js';
 import { useEffect, useMemo } from 'react';
 import { OnRampProviderButton } from '../OnRampComponents/OnRampProviderButton.js';
 import { isMobile } from '@getpara/web-sdk';
@@ -22,6 +22,7 @@ import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
 import { getNetworkFromChainId, getNetworkOrMainNetEquivalent, useCopyToClipboard } from '@getpara/react-common';
 import { formatNetworkList } from '../../utils/stringFormatters.js';
 import styled from 'styled-components';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const TABS = [
     [EnabledFlow.BUY, 'isBuyEnabled', 'creditCard', 'Buy'],
     [EnabledFlow.RECEIVE, 'isReceiveEnabled', 'qrCode', 'Receive'],
@@ -34,7 +35,7 @@ const GENERIC_WALLET = {
 };
 export const AddFunds = () => {
     const [isCopied, copy] = useCopyToClipboard();
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const appName = useThemeStore(state => state.appName);
     const onRampConfig = useModalStore(state => state.onRampConfig);
     const hideWallets = useThemeStore(state => state.hideWallets);

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StepContainer } from '../common.js';
 import { OnRampProvider } from '@getpara/web-sdk';
-import { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { useModalStore, useThemeStore } from '../../stores/index.js';
 import { lazy, useEffect, useMemo, useState } from 'react';
 import { ModalStep } from '../../utils/steps.js';
 import { RampEmbed, StripeEmbed } from '@getpara/react-common';
 import styled from 'styled-components';
 import { useGoBack } from '../../hooks/useGoBack.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const STEPS = {
     CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
     FINISHED: ModalStep.ADD_FUNDS_SUCCESS,
@@ -17,7 +18,7 @@ export const AddFundsAwaiting = () => {
     const onRampConfig = useModalStore(state => state.onRampConfig);
     const onRampPurchase = useModalStore(state => state.onRampPurchase);
     const setOnRampPurchase = useModalStore(state => state.setOnRampPurchase);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const appName = useThemeStore(state => state.appName);
     const isDark = useThemeStore(state => state.isDark);
     const [MoonPayEmbed, setMoonPayEmbed] = useState(null);

package/dist/modal/components/AuthInput/AuthInput.js

@@ -12,18 +12,19 @@ import { CpslButton, CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslSpinne
 import { useRef, useState } from 'react';
 import styled from 'styled-components';
 import countryCodes from './countryCodes.js';
-import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useUserInfoStore } from '../../stores/index.js';
 import { EMAIL_REGEX, MOBILE_SIZE } from '../../constants/constants.js';
 import { useDropdownPosition } from './hooks/useDropdownPosition.js';
 import { ModalStep } from '../../utils/steps.js';
 import { defaultPhoneMask, phoneMasks } from './phoneMasks.js';
 import { AuthMethod } from '@getpara/web-sdk';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const DEFAULT_COUNTRY = { label: 'United States', value: '+1', selectedLabel: 'US', icon: 'US' };
 export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
     var _a;
     const inputRef = useRef(null);
     const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
     const authInfo = useUserInfoStore(state => state.getAuthInfo());
     const setFlow = useModalStore(state => state.setFlow);
@@ -93,11 +94,12 @@ export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
                 setError('Please enter a valid email!');
                 return;
             }
-            // Logout to ensure cleared Para state but preserve pregen wallets
+            // Logout to ensure cleared Capsule state but preserve pregen wallets
+            // TODO: migrate to hook once we force the use of the CapsuleProvider
             yield para.logout();
             auth = { email: identifier };
             setAuthInfo(auth);
-            const userExists = yield para.checkIfUserExists(identifier);
+            const userExists = yield para.checkIfUserExists({ email: identifier });
             if (userExists) {
                 const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
                 const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
@@ -109,16 +111,19 @@ export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
                 setBiometricLocationHints(biometricLocationHints);
                 return;
             }
+            // TODO: migrate to hook once we force the use of the CapsuleProvider
             yield para.createUser(auth);
             setFlow('signUp');
             setStep(ModalStep.VERIFICATIONS);
             return;
         }
         if (isPhone) {
+            // Logout to ensure cleared Capsule state but preserve pregen wallets
+            // TODO: migrate to hook once we force the use of the CapsuleProvider
             yield para.logout();
             let userExists = false;
             try {
-                userExists = yield para.checkIfUserExistsByPhone(identifier, countryCode);
+                userExists = yield para.checkIfUserExistsByPhone({ phone: identifier, countryCode });
             }
             catch (error) {
                 setError('Please enter a valid phone number!');
@@ -127,6 +132,7 @@ export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
             auth = { phone: identifier, countryCode };
             setAuthInfo(auth);
             if (userExists) {
+                // TODO: migrate to hook once we force the use of the CapsuleProvider
                 const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
                 const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
                     ? yield para.getUserBiometricLocationHints()
@@ -137,6 +143,7 @@ export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
                 setBiometricLocationHints(biometricLocationHints);
                 return;
             }
+            // TODO: migrate to hook once we force the use of the CapsuleProvider
             yield para.createUserByPhone(auth);
             setFlow('signUp');
             setStep(ModalStep.VERIFICATIONS);

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CpslButton, CpslDivider, CpslIcon } from '@getpara/react-components';
 import { useEffect, useMemo, useState } from 'react';
-import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useUserInfoStore } from '../../stores/index.js';
 import { ModalStep } from '../../utils/steps.js';
 import { Heading, StepContainer, InnerStepContainer } from '../common.js';
 import { openPopup } from '../../utils/openPopup.js';
@@ -18,6 +18,7 @@ import styled from 'styled-components';
 import { AuthMethod, getPublicKeyHex } from '@getpara/web-sdk';
 import { isPasskeySupported } from '../../utils/isPasskeySupported.js';
 import { formatBiometricHints, KnownDevices, UserIdentifier } from '@getpara/react-common';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 export const BiometricLoginStep = () => {
     const popupWindow = useModalStore(state => state.popupWindow);
     const supportedAuthMethods = useModalStore(state => state.supportedAuthMethods);
@@ -26,7 +27,7 @@ export const BiometricLoginStep = () => {
     const setStep = useModalStore(state => state.setStep);
     const setPopupWindow = useModalStore(state => state.setPopupWindow);
     const biometricLocationHints = useModalStore(state => state.biometricLocationHints);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const authInfo = useUserInfoStore(state => state.getAuthInfo());
     const setWebAuthURLForLogin = useModalStore(state => state.setWebAuthURLForLogin);
     const setPasswordUrlForLogin = useModalStore(state => state.setPasswordUrlForLogin);
@@ -47,6 +48,9 @@ export const BiometricLoginStep = () => {
                 if (!para.isEmail && !para.isPhone && !para.isFarcaster && !para.isTelegram) {
                     return;
                 }
+                if (!para.loginEncryptionKeyPair) {
+                    return;
+                }
                 const authType = para.isEmail ? 'email' : para.isPhone ? 'phone' : para.isFarcaster ? 'farcaster' : 'telegram';
                 const res = yield para.touchSession();
                 const webAuthUrlForLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY)
@@ -91,7 +95,7 @@ export const BiometricLoginStep = () => {
             });
         }
         setLinks();
-    }, [supportedAuthMethods]);
+    }, [supportedAuthMethods, para]);
     const handlePasskeyClick = () => {
         if (!!popupWindow) {
             return;

package/dist/modal/components/Controls/Selects.js

@@ -11,12 +11,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CpslIdenticon, CpslSelect, CpslSelectItem, CpslText } from '@getpara/react-components';
 import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
 import styled from 'styled-components';
-import { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { useThemeStore } from '../../stores/index.js';
 import { truncateAddress, WalletType } from '@getpara/web-sdk';
 import { useEffect, useRef } from 'react';
 import { useDropdownPosition } from '../AuthInput/hooks/useDropdownPosition.js';
 import { MOBILE_SIZE } from '../../constants/constants.js';
 import { useActiveWallet } from '../../hooks/useActiveWallet.js';
+import { useWalletState } from '../../../provider/index.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const getValue = (id, type) => {
     return id && type ? `${id}~${type}` : undefined;
 };
@@ -56,10 +58,10 @@ function getName(para, { type, isExternal, name, isMenu = false, hideWallets = f
 }
 export const AccountSelect = () => {
     const hideWallets = useThemeStore(state => state.hideWallets);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const containerRef = useRef(null);
     const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-    const setActiveWallet = useModalStore(state => state.setActiveWallet);
+    const { setSelectedWallet } = useWalletState();
     const activeWallet = useActiveWallet();
     const ActiveWalletNode = activeWallet ? (_jsxs(FlexRow, { slot: "selected-item", children: [_jsx(CpslIdenticon, { variant: "avatar", size: "14px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }), _jsx(WalletName, { variant: "bodyXS", color: "contrast", children: getName(para, Object.assign(Object.assign({}, activeWallet), { hideWallets })) }), !hideWallets && (_jsx(CpslText, { variant: "bodyXS", color: "secondary", children: para.getDisplayAddress(activeWallet.id, { truncate: true, addressType: activeWallet.type }) }))] })) : null;
     useEffect(() => {
@@ -69,7 +71,7 @@ export const AccountSelect = () => {
     }, [activeWallet, para.availableWallets, dropdownMaxHeight]);
     return (_jsx(Container, { children: _jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: para.availableWallets.length > 1 ? (_jsxs(StyledSelect, { selectedValue: getValue(activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.id, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type), onCpslSelectValueChange: e => {
                     const [id, type] = e.detail.split('~');
-                    setActiveWallet([id, type]);
+                    setSelectedWallet({ id, type: type });
                 }, showFormattedSelectedItem: true, placeholder: "Choose wallet...", anchorElId: "addressInputContainer", dropdownMaxHeight: dropdownMaxHeight, "$width": dropdownWidth, "$top": mobileAnchor + 16 + 1, autoWidth: true, selectedItemVariant: "bodyXS", children: [activeWallet && ActiveWalletNode, para.availableWallets.map(({ address, name: _name, id, type, isExternal }) => {
                         const key = getValue(id, type);
                         const name = _name !== null && _name !== void 0 ? _name : getName(para, { type, isExternal, isMenu: true, hideWallets });

package/dist/modal/components/ExternalWalletsWrapper/ExternalWalletsWrapper.js

@@ -14,10 +14,11 @@ import { EvmExternalWalletContext, EvmExternalWalletProvider, } from '../../prov
 import { CosmosWallet, EvmWallet, SolanaWallet } from '../../types/externalWallets.js';
 import { SolanaExternalWalletContext, SolanaExternalWalletProvider, } from '../../providers/SolanaExternalWalletContextStub.js';
 import { CosmosExternalWalletContext, CosmosExternalWalletProvider, } from '../../providers/CosmosExternalWalletContextStub.js';
-import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useUserInfoStore } from '../../stores/index.js';
 import { useExternalWalletProviderStore } from '../../stores/externalWalletProvider/useExternalWalletProviderStore.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 export const ExternalWalletsWrapper = ({ children, wallets }) => {
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const resetModalState = useModalStore(state => state.resetState);
     const resetUserInfoState = useUserInfoStore(state => state.resetState);
     const StoredEvmProvider = useExternalWalletProviderStore(state => state.EvmProvider);

package/dist/modal/components/Hero/Hero.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { CpslHero, CpslIcon, CpslIdenticon } from '@getpara/react-components';
 import styled from 'styled-components';
 import { ModalStep } from '../../utils/steps.js';
-import { useParaStore, useModalStore } from '../../stores/index.js';
+import { useModalStore } from '../../stores/index.js';
 import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
 import { NETWORK_NOT_SUPPORTED_ERROR } from '../../constants/constants.js';
 import { useEffect, useState } from 'react';
 import { isMobile } from '@getpara/web-sdk';
 import { useActiveWallet } from '../../hooks/useActiveWallet.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const getStepConfig = ({ externalWalletError, }) => {
     var _a;
     return ({
@@ -38,7 +39,7 @@ const getStepConfig = ({ externalWalletError, }) => {
     });
 };
 export const Hero = () => {
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const { wallet: connector, walletDisplayHelpers, avatar } = useExternalWallets();
     const step = useModalStore(state => state.step);
     const externalWalletError = useModalStore(state => state.externalWalletError);

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { Heading, HeroIcon, StepContainer } from '../common.js';
 import { ExternalWalletCard, WalletCard, WalletCards } from '../WalletCard/WalletCard.js';
-import { useParaStore, useThemeStore } from '../../stores/index.js';
+import { useThemeStore } from '../../stores/index.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 export const LoginDoneStep = ({ onClose }) => {
     var _a;
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const hideWallets = useThemeStore(state => state.hideWallets);
     useEffect(() => {
         setTimeout(() => {

package/dist/modal/components/ModalContent/ModalContent.js

@@ -10,13 +10,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { entityToWallet, OnRampProvider, OnRampAsset, Network, EnabledFlow, } from '@getpara/web-sdk';
-import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useUserInfoStore } from '../../stores/index.js';
 import { ModalStep } from '../../utils/steps.js';
 import { Body } from '../Body/Body.js';
 import { Footer } from '../Footer/Footer.js';
 import { DEFAULTS } from '../../constants/defaults.js';
 import { useGoBack } from '../../hooks/useGoBack.js';
 import { openPopup } from '../../utils/openPopup.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 import { useEmbeddedExternalConnection } from '../../hooks/useEmbeddedExternalConnection.js';
 function isRampConfig(config) {
     return 'hostApiKey' in config;
@@ -39,7 +40,7 @@ const AssetMap = {
     ETHEREUM: OnRampAsset.ETHEREUM,
 };
 export const ModalContent = forwardRef(({ onRampConfig: propsOnRampConfig, twoFactorAuthEnabled = false, recoverySecretStepEnabled = false, oAuthMethods, disableEmailLogin, disablePhoneLogin, onClose, onRampTestMode, loginTransitionOverride, createWalletOverride, }, ref) => {
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const currentStep = useModalStore(state => state.step);
     const webAuthURLForLogin = useModalStore(state => state.webAuthURLForLogin);
     const webAuthURLForCreate = useModalStore(state => state.webAuthURLForCreate);
@@ -86,6 +87,7 @@ export const ModalContent = forwardRef(({ onRampConfig: propsOnRampConfig, twoFa
     });
     function awaitLoginTransition() {
         return __awaiter(this, void 0, void 0, function* () {
+            // TODO: migrate to useWaitForLoginAndSetup hook once we force the use of the CapsuleProvider
             const { isComplete, isError, needsWallet } = yield para.waitForLoginAndSetup({ popupWindow });
             setPopupWindow(undefined);
             if (isError) {
@@ -114,6 +116,7 @@ export const ModalContent = forwardRef(({ onRampConfig: propsOnRampConfig, twoFa
     }
     function awaitWalletCreationTransition() {
         return __awaiter(this, void 0, void 0, function* () {
+            // TODO: migrate to useWaitForAccountCreation hook once we force the use of the ParaProvider
             const isComplete = yield para.waitForAccountCreation();
             if (isComplete) {
                 setWebAuthURLForCreate('');
@@ -132,6 +135,7 @@ export const ModalContent = forwardRef(({ onRampConfig: propsOnRampConfig, twoFa
                 setWalletCreationInProgress(true);
                 let recoverySecret, walletIds;
                 if (!createWalletOverride) {
+                    // TODO: migrate to useWaitForPasskeyAndCreateWallet hook once we force the use of the ParaProvider
                     const created = yield para.waitForPasskeyAndCreateWallet();
                     recoverySecret = created.recoverySecret;
                     walletIds = created.walletIds;

package/dist/modal/components/OAuth/FarcasterOAuthStep.js

@@ -11,9 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
 import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
-import { useParaStore, useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
 import { ModalStep } from '../../utils/steps.js';
 import { AuthMethod, isMobile } from '@getpara/web-sdk';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const FarcasterOAuthStep = () => {
     const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
     const setStep = useModalStore(state => state.setStep);
@@ -23,7 +24,7 @@ const FarcasterOAuthStep = () => {
     const isIFrameReady = useModalStore(state => state.isIFrameReady);
     const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
     const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const setFlow = useModalStore(state => state.setFlow);
     const farcasterConnectUri = useModalStore(state => state.farcasterConnectUri);
     const setFarcasterConnectUri = useModalStore(state => state.setFarcasterConnectUri);

package/dist/modal/components/OAuth/OAuth.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AuthMethod, OAuthMethod } from '@getpara/web-sdk';
 import { styled } from 'styled-components';
-import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useUserInfoStore } from '../../stores/index.js';
 import { ModalStep } from '../../utils/steps.js';
 import { openPopup } from '../../utils/openPopup.js';
 import { useThemeStore } from '../../stores/theme/useThemeStore.js';
@@ -20,12 +20,13 @@ import { brandedOAuthLogos, oAuthLogos } from '../../constants/oAuthLogos.js';
 import { useEffect } from 'react';
 import { routeMobileExternalWallet } from '../../utils/routeMobileExternalWallet.js';
 import { useGoBack } from '../../hooks/useGoBack.js';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 const HAS_MORE_LENGTH = 3;
 export const OAuth = ({ methods }) => {
     const goBack = useGoBack();
     const oAuthLogoVariant = useThemeStore(state => state.oAuthLogoVariant);
     const isDark = useThemeStore(state => state.isDark);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const popupWindow = useModalStore(state => state.popupWindow);
     const setFlow = useModalStore(state => state.setFlow);
     const setStep = useModalStore(state => state.setStep);
@@ -68,7 +69,7 @@ export const OAuth = ({ methods }) => {
                 break;
             default: {
                 setStep(ModalStep.AWAITING_OAUTH);
-                const oAuthURL = yield para.getOAuthURL(method);
+                const oAuthURL = yield para.getOAuthURL({ method });
                 const oAuthWindow = openPopup(oAuthURL, `${method}AuthPopup`, 'OAUTH');
                 setPopupWindow(oAuthWindow);
                 const { email, isError, userExists } = yield para.waitForOAuth({ popupWindow: oAuthWindow });

package/dist/modal/components/OAuth/TelegramOAuthStep.js

@@ -9,15 +9,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AuthMethod, OAuthMethod } from '@getpara/web-sdk';
-import { useParaStore, useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
+import { useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
 import styled from 'styled-components';
 import { useEffect, useRef, useState } from 'react';
 import { HeroSpinner } from '@getpara/react-common';
 import { ModalStep } from '../../utils/steps.js';
 import { CpslSpinner } from '@getpara/react-components';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 export function TelegramOAuthStep() {
     const iframe = useRef();
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const setFlow = useModalStore(state => state.setFlow);
     const setStep = useModalStore(state => state.setStep);
     const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
@@ -43,7 +44,7 @@ export function TelegramOAuthStep() {
     }, [shouldRouteToStep, isIFrameReady]);
     useEffect(() => {
         if (!url) {
-            para.getOAuthURL(OAuthMethod.TELEGRAM).then(url => {
+            para.getOAuthURL({ method: OAuthMethod.TELEGRAM }).then(url => {
                 setUrl(url);
             });
         }

package/dist/modal/components/Setup2FAStep/Setup2FAStep.js

@@ -10,15 +10,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CpslButton, CpslCodeInput, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText, } from '@getpara/react-components';
 import { useEffect, useRef, useState } from 'react';
-import { useParaStore, useModalStore } from '../../stores/index.js';
+import { useModalStore } from '../../stores/index.js';
 import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepContainer } from '../common.js';
 import { ModalStep } from '../../utils/steps.js';
 import { styled } from 'styled-components';
 import { useCopyToClipboard } from '@getpara/react-common';
+import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
 export const Setup2FAStep = ({ onClose }) => {
     const isLogin = useModalStore(state => state.isLogin());
     const setStep = useModalStore(state => state.setStep);
-    const para = useParaStore(state => state.para);
+    const para = useInternalClient();
     const isVerifying = useModalStore(state => state.step === ModalStep.VERIFY_2FA);
     const [copied, copy] = useCopyToClipboard();
     const inputRef = useRef(null);
@@ -75,7 +76,7 @@ export const Setup2FAStep = ({ onClose }) => {
         setIsVerifyingCode(true);
         if (code.length === 6 && /^\d+$/.test(code)) {
             try {
-                yield para.enable2FA(code);
+                yield para.enable2FA({ verificationCode: code });
                 setStep(ModalStep.TWO_FACTOR_DONE);
             }
             catch (e) {