@getpara/react-sdk 1.2.0 → 1.3.1-dev.1

package/dist/provider/stores/types.d.ts

@@ -1,9 +1,23 @@
+import { Context } from 'react';
 import ParaWeb, { WalletType } from '@getpara/web-sdk';
+import { EvmExternalWalletContextType, ParaEvmProvider, WalletList as EvmWalletList } from '@getpara/evm-wallet-connectors';
+import { CosmosExternalWalletContextType, ParaCosmosProvider, WalletList as CosmosWalletList } from '@getpara/cosmos-wallet-connectors';
+import { ParaSolanaProvider, SolanaExternalWalletContextType, WalletList as SolanaWalletList } from '@getpara/solana-wallet-connectors';
+import { ParaModalProps, TExternalWallet } from '../../modal/index.js';
+import { OAuthLogoVariantType } from '../../modal/types/modalProps.js';
 export interface ClientSlice {
     client?: ParaWeb;
     setClient: (_: ParaWeb) => void;
 }
+export interface ConfigSlice {
+    appName: string;
+    setAppName: (_: string) => void;
+}
 export interface ModalSlice {
+    modalConfig?: ParaModalProps;
+    setModalConfig: (_?: ParaModalProps) => void;
+    isDarkTheme: boolean;
+    oAuthLogoVariant: OAuthLogoVariantType;
     isOpen: boolean;
     setIsOpen: (_: boolean) => void;
 }
@@ -13,4 +27,32 @@ export interface WalletSlice {
     setSelectedWallet: (_?: string, __?: WalletType) => void;
     clearSelectedWallet: () => void;
 }
-export type Store = ClientSlice & ModalSlice & WalletSlice;
+export interface ExternalWalletsSlice {
+    externalWallets: TExternalWallet[];
+    setExternalWallets: (_: TExternalWallet[]) => void;
+    evmContext: Context<EvmExternalWalletContextType>;
+    setEvmContext: (_: Context<EvmExternalWalletContextType>) => void;
+    EvmProvider?: typeof ParaEvmProvider;
+    setEvmProvider: (_: typeof ParaEvmProvider) => void;
+    evmWallets: EvmWalletList;
+    setEvmWallets: (_: EvmWalletList) => void;
+    isLoadingEvmLib: boolean;
+    setIsLoadingEvmLib: (_: boolean) => void;
+    cosmosContext: Context<CosmosExternalWalletContextType>;
+    setCosmosContext: (_: Context<CosmosExternalWalletContextType>) => void;
+    CosmosProvider?: typeof ParaCosmosProvider;
+    setCosmosProvider: (_: typeof ParaCosmosProvider) => void;
+    cosmosWallets: CosmosWalletList;
+    setCosmosWallets: (_: CosmosWalletList) => void;
+    isLoadingCosmosLib: boolean;
+    setIsLoadingCosmosLib: (_: boolean) => void;
+    solanaContext: Context<SolanaExternalWalletContextType>;
+    setSolanaContext: (_: Context<SolanaExternalWalletContextType>) => void;
+    SolanaProvider?: typeof ParaSolanaProvider;
+    setSolanaProvider: (_: typeof ParaSolanaProvider) => void;
+    solanaWallets: SolanaWalletList;
+    setSolanaWallets: (_: SolanaWalletList) => void;
+    isLoadingSolanaLib: boolean;
+    setIsLoadingSolanaLib: (_: boolean) => void;
+}
+export type Store = ClientSlice & ModalSlice & WalletSlice & ExternalWalletsSlice & ConfigSlice;

package/dist/provider/types/externalWalletProviders.d.ts

@@ -0,0 +1,12 @@
+import { ParaCosmosProviderConfig } from '@getpara/cosmos-wallet-connectors';
+import { TExternalWallet } from '../../modal/index.js';
+import { ParaSolanaProviderConfig } from '@getpara/solana-wallet-connectors';
+import { Chain, Transport } from 'viem';
+import { ParaEvmProviderConfig } from '@getpara/evm-wallet-connectors';
+export type ExternalWalletProviderCommon = {
+    isUsing: boolean;
+    wallets: TExternalWallet[];
+};
+export type ParaEvmProviderConfigNoWallets<chains extends readonly [Chain, ...Chain[]], transports extends Record<chains[number]['id'], Transport>> = Omit<ParaEvmProviderConfig<chains, transports>, 'wallets'>;
+export type ParaCosmosProviderConfigNoWallets = Omit<ParaCosmosProviderConfig, 'wallets'>;
+export type ParaSolanaProviderConfigNoWallets = Omit<ParaSolanaProviderConfig, 'wallets'>;

package/dist/provider/types/provider.d.ts

@@ -1,5 +1,10 @@
+import { ParaWagmiProviderProps } from '@getpara/evm-wallet-connectors';
 import ParaWeb, { AccountCreationEvent, AccountSetupEvent, ConstructorOpts, Environment, ExternalWalletChangeEvent, LoginEvent, LogoutEvent, PregenWalletClaimedEvent, SignMessageEvent, SignTransactionEvent, WalletCreatedEvent, WalletsChangeEvent } from '@getpara/web-sdk';
 import { PropsWithChildren } from 'react';
+import { Chain, Transport } from 'viem';
+import { ParaModalProps, TExternalWallet } from '../../modal/index.js';
+import { ParaGrazProviderProps } from '@getpara/cosmos-wallet-connectors';
+import { ParaCosmosProviderConfigNoWallets, ParaEvmProviderConfigNoWallets, ParaSolanaProviderConfigNoWallets } from './externalWalletProviders.js';
 export type Callbacks = {
     onLogout?: (event: LogoutEvent) => void;
     onLogin?: (event: LoginEvent) => void;
@@ -13,26 +18,120 @@ export type Callbacks = {
     onPregenWalletClaimed?: (event: PregenWalletClaimedEvent) => void;
 };
 export type ParaProviderConfig = {
+    /**
+     * The name of your app, used throughout the modal and any configured external wallets.
+     */
+    appName: string;
+    /**
+     * Disables the automatic session keep alive that's provided by ParaProvider.
+     */
     disableAutoSessionKeepAlive?: boolean;
+    /**
+     * Disables the ParaModal that's provided by ParaProvider. Use this is you're providing a separate modal in another location in your app.
+     */
+    disableEmbeddedModal?: boolean;
 };
-interface ParaProviderPropsBase extends PropsWithChildren {
-    paraClientConfig?: {
+export type ExternalWalletConfig<chains extends readonly [Chain, ...Chain[]], transports extends Record<chains[number]['id'], Transport>> = {
+    /**
+     * A description of your app, displayed in some external wallets.
+     */
+    appDescription?: string;
+    /**
+     * A URL for your app, displayed in some external wallets.
+     */
+    appUrl?: string;
+    /**
+     * An icon for your app, displayed in some external wallets.
+     */
+    appIcon?: string;
+    /**
+     * Config for the EVM external wallets connector using Wagmi.
+     *
+     * NOTE: In addition to this config, you MUST also have the `@getpara/evm-wallet-connectors` package installed.
+     */
+    evmConnector?: {
+        /**
+         * Config for the Para EVM external wallets connector.
+         */
+        config: Omit<ParaEvmProviderConfigNoWallets<chains, transports>, 'appName' | 'appDescription' | 'appUrl' | 'appIcon' | 'projectId'>;
+        /**
+         * Config for the Wagmi provider.
+         */
+        wagmiProviderProps?: ParaWagmiProviderProps;
+    };
+    /**
+     * Config for the Cosmos external wallets connector using Graz.
+     *
+     * NOTE: In addition to this config, you MUST also have the `@getpara/cosmos-wallet-connectors` package installed.
+     */
+    cosmosConnector?: {
+        /**
+         * Config for the Para Cosmos external wallets connector.
+         */
+        config: ParaCosmosProviderConfigNoWallets;
+        /**
+         * Config for the Graz provider.
+         */
+        grazProviderProps?: ParaGrazProviderProps;
+    };
+    /**
+     * Config for the Solana external wallets connector using @solana/wallet-adapter-react.
+     *
+     * NOTE: In addition to this config, you MUST also have the `@getpara/solana-wallet-connectors` package installed.
+     */
+    solanaConnector?: {
+        /**
+         * Config for the Para Solana external wallets connector.
+         */
+        config: Omit<ParaSolanaProviderConfigNoWallets, 'appIdentity'> & Pick<Partial<ParaSolanaProviderConfigNoWallets>, 'appIdentity'>;
+    };
+    /**
+     * Config for any connectors that use Wallet Connect.
+     */
+    walletConnect?: {
+        /**
+         * Your Wallet Connect project ID.
+         */
+        projectId: string;
+    };
+    /**
+     * Which external wallets to show and in what order they should be displayed.
+     *
+     * NOTE: Any wallets that are detected as installed will be sorted first, followed by those that are not detected or not installed.
+     */
+    wallets: TExternalWallet[];
+};
+export interface ParaProviderProps<chains extends readonly [Chain, ...Chain[]], transports extends Record<chains[number]['id'], Transport>> extends PropsWithChildren {
+    /**
+     * Arguments to setup a new Para instance, or a Para instance you have already instantiated.
+     */
+    paraClientConfig: {
+        /**
+         * Environment for your Para instance.
+         */
         env: Environment;
+        /**
+         * API key for you Para instance.
+         *
+         * NOTE: Be sure this key matches the environment.
+         */
         apiKey: string;
         opts?: ConstructorOpts;
-    };
+    } | ParaWeb;
+    /**
+     * Configuration used for the Para modal.
+     */
+    paraModalConfig?: ParaModalProps;
+    /**
+     * Callbacks fired for events from the Para instance.
+     */
     callbacks?: Callbacks;
-    config?: ParaProviderConfig;
+    /**
+     * Config for the ParaProvider.
+     */
+    config: ParaProviderConfig;
+    /**
+     * Config for any external wallets.
+     */
+    externalWalletConfig?: ExternalWalletConfig<chains, transports>;
 }
-export type ParaProviderProps = ({
-    config: ParaProviderConfig & {
-        paraClientOverride: ParaWeb;
-    };
-    paraClientConfig?: never;
-} & ParaProviderPropsBase) | ({
-    config?: ParaProviderConfig & {
-        paraClientOverride?: never;
-    };
-    paraClientConfig: ParaProviderPropsBase['paraClientConfig'];
-} & ParaProviderPropsBase);
-export {};

package/dist/provider/types/utils.d.ts

@@ -4,3 +4,4 @@ export type Compute<type> = {
 /** Strict version of built-in Omit type */
 export type StrictOmit<type, keys extends keyof type> = Pick<type, Exclude<keyof type, keys>>;
 export type UnionStrictOmit<type, keys extends keyof type> = type extends any ? StrictOmit<type, keys> : never;
+export type ChangeFields<T, R> = Omit<T, keyof R> & R;

package/dist/provider/utils/paraConfigTypeGuards.d.ts

@@ -0,0 +1,7 @@
+import ParaWeb, { ConstructorOpts, Environment } from '@getpara/web-sdk';
+export declare function isConfigType(obj: any): obj is {
+    env: Environment;
+    apiKey: string;
+    opts?: ConstructorOpts;
+};
+export declare function isParaWeb(obj: any): obj is ParaWeb;

package/package.json

@@ -1,20 +1,34 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "1.2.0",
+  "version": "1.3.1-dev.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "bin": {
+    "setup-para": "dist/cli/cli.mjs"
+  },
   "exports": {
     ".": "./dist/index.js",
-    "./styles.css": "./dist/modal/css/modal.css"
+    "./styles.css": "./dist/css/modal.css"
   },
   "sideEffects": [
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "1.2.0",
-    "@getpara/react-components": "1.2.0",
-    "@getpara/web-sdk": "1.2.0",
+    "@cosmjs/cosmwasm-stargate": "<=0.31.3",
+    "@cosmjs/launchpad": "*",
+    "@cosmjs/proto-signing": "<=0.31.3",
+    "@cosmjs/stargate": "<=0.31.3",
+    "@cosmjs/tendermint-rpc": "<=0.31.3",
+    "@getpara/graz": "^0.1.0",
+    "@getpara/react-common": "1.3.1",
+    "@getpara/react-components": "1.3.1",
+    "@getpara/web-sdk": "1.3.1",
+    "@solana-mobile/wallet-adapter-mobile": "^2.1.3",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-walletconnect": "^0.1.16",
+    "@solana/web3.js": "^1.95.8",
     "@tanstack/react-query": "^5.0.0",
     "date-fns": "^3.6.0",
     "detect-browser": "^5.3.0",
@@ -24,19 +38,29 @@
     "zustand": "^4.5.2"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc && yarn post-build",
     "post-build": "./scripts/post-build.sh",
-    "test": "vitest run --coverage"
+    "build": "rm -rf dist && yarn typegen && node ./scripts/build.mjs && yarn post-build",
+    "typegen": "tsc --emitDeclarationOnly",
+    "test": "vitest run --coverage",
+    "cli": "node ./dist/cli/cli.mjs"
   },
   "devDependencies": {
+    "@getpara/cosmos-wallet-connectors": "^1.3.1",
+    "@getpara/evm-wallet-connectors": "^1.3.1",
+    "@getpara/solana-wallet-connectors": "^1.3.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
     "@types/chrome": "^0.0.237",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.2.7",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "viem": "2.x",
+    "wagmi": "2.x"
   },
   "peerDependencies": {
+    "@getpara/cosmos-wallet-connectors": "^1.3.1",
+    "@getpara/evm-wallet-connectors": "^1.3.1",
+    "@getpara/solana-wallet-connectors": "^1.3.1",
     "react": "*",
     "react-dom": "*"
   },
@@ -48,5 +72,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "a9162c59be1456292d46c56787c1d5bf313bf24b"
+  "gitHead": "e6e791d4e4f9afd94f2093d6045d686b85e5a682"
 }

package/dist/modal/ParaModal.js

@@ -1,281 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 { 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 { 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, 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({ ref: ref, 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);
-    const setWebAuthURLForCreate = useModalStore(state => state.setWebAuthURLForCreate);
-    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
-    const currentStep = useModalStore(state => state.step);
-    const setOnModalStepChange = useModalStore(state => state.setOnModalStepChange);
-    const setStep = useModalStore(state => state.setStep);
-    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
-    const hasPreviousStep = useModalStore(state => state.hasPreviousStep());
-    const setFlow = useModalStore(state => state.setFlow);
-    const setIsFullyLoggedIn = useModalStore(state => state.setIsFullyLoggedIn);
-    const goBack = useGoBack();
-    const setAuthLayout = useThemeStore(state => state.setAuthLayout);
-    const storedAuthLayout = useThemeStore(state => state.authLayout);
-    const resetModalState = useModalStore(state => state.resetState);
-    const resetUserInfoState = useUserInfoStore(state => state.resetState);
-    const setRecoveryShare = useUserInfoStore(state => state.setRecoveryShare);
-    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, () => {
-        return {
-            goBack() {
-                goBack();
-            },
-            canGoBack() {
-                return hasPreviousStep;
-            },
-            currentStep() {
-                return currentStep;
-            },
-            handleModalClose() {
-                var _a;
-                (_a = modalContentRef === null || modalContentRef === void 0 ? void 0 : modalContentRef.current) === null || _a === void 0 ? void 0 : _a.handleModalClose();
-            },
-        };
-    }, [hasPreviousStep, currentStep]);
-    // This will run on mount and on isOpen change but won't cause a rerender unless step or email changes
-    const initModal = () => __awaiter(void 0, void 0, void 0, function* () {
-        const isAccount = yield para.isFullyLoggedIn();
-        if (currentStepOverride) {
-            setStep(ModalStep[currentStepOverride.toUpperCase()]);
-        }
-        else if (isAccount) {
-            setFlow('account');
-            setStep(ModalStep.ACCOUNT_MAIN);
-            setIsFullyLoggedIn(true);
-        }
-        else {
-            if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
-                setStep(ModalStep.AUTH_MAIN);
-                setFlow();
-                setWebAuthURLForLogin();
-                setWebAuthURLForCreate();
-                setBiometricLocationHints();
-            }
-            // Disconnect external wallets if the user is not longer logged in
-            yield disconnectExternalWallet();
-            setSelectedWallet({ id: undefined, type: undefined });
-            setIsFullyLoggedIn(false);
-        }
-        switch (true) {
-            case para.isEmail:
-                setAuthInfo({ email: para.getEmail() });
-                break;
-            case para.isPhone:
-                {
-                    const { phone, countryCode } = para.getPhone();
-                    setAuthInfo({ phone, countryCode: countryCode });
-                }
-                break;
-            case para.isFarcaster:
-                setAuthInfo({ farcasterUsername: para.getFarcasterUsername() });
-                break;
-            case para.isTelegram:
-                setAuthInfo({ telegramUserId: para.telegramUserId });
-                if (!isAccount) {
-                    setStep(ModalStep.TELEGRAM_OAUTH);
-                }
-                break;
-        }
-        setIsInit(true);
-    });
-    useEffect(() => {
-        let _authLayout = authLayout;
-        // Removing unused auth layouts based on what auth methods are passed in
-        if (!(externalWallets === null || externalWallets === void 0 ? void 0 : externalWallets.length) && hasExternalWallet(authLayout)) {
-            _authLayout = _authLayout.filter(l => !l.includes('EXTERNAL'));
-        }
-        if (disableEmailLogin && disablePhoneLogin && !(oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout)) {
-            _authLayout = _authLayout.filter(l => !l.includes('AUTH'));
-        }
-        if (JSON.stringify(storedAuthLayout) !== JSON.stringify(_authLayout)) {
-            setAuthLayout(_authLayout);
-        }
-    }, [disableEmailLogin, disablePhoneLogin, oAuthMethods, externalWallets, authLayout]);
-    useEffect(() => {
-        setOnModalStepChange(onModalStepChange);
-    }, [onModalStepChange]);
-    useEffect(() => {
-        var _a;
-        updateThemeState({
-            logo,
-            appName,
-            oAuthLogoVariant: (_a = theme === null || theme === void 0 ? void 0 : theme.oAuthLogoVariant) !== null && _a !== void 0 ? _a : 'default',
-            bareModal,
-            embeddedModal,
-            hideWallets,
-        });
-    }, [logo, appName, theme === null || theme === void 0 ? void 0 : theme.oAuthLogoVariant, bareModal, embeddedModal, hideWallets]);
-    useEffect(() => {
-        if (theme) {
-            generateTheme(theme);
-            updateThemeState({ isDark: theme.mode === 'dark', theme: theme });
-        }
-    }, [theme]);
-    // Set Para instance & init on mount
-    useEffect(() => {
-        if (para) {
-            initModal();
-            if (bareModal) {
-                setIsModalMounted(true);
-            }
-        }
-        else {
-            console.error('A Para instance must be provided.');
-        }
-    }, []);
-    // Init modal with proper steps on isOpen change
-    useEffect(() => {
-        if (isOpen && para) {
-            initModal();
-        }
-    }, [isOpen]);
-    const updateActiveWallet = () => {
-        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 });
-            setSelectedWallet({ id: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.id, type: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.type });
-        }
-    };
-    useEffect(() => {
-        updateActiveWallet();
-    }, [para]);
-    useEffect(() => {
-        // 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(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);
-    };
-    const handleModalExited = () => __awaiter(void 0, void 0, void 0, function* () {
-        setIsModalMounted(false);
-        if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
-            resetModalState();
-            resetUserInfoState();
-            setRecoveryShare(null);
-        }
-        else if (RESET_TO_ACCOUNT_STEPS.includes(currentStep)) {
-            setStep(ModalStep.LOGIN_DONE);
-        }
-        if (para) {
-            yield initModal();
-            para.exitLoops();
-        }
-        setIsInit(false);
-    });
-    if (!para) {
-        console.error('A Para instance is required.');
-        return null;
-    }
-    if (!(storedAuthLayout === null || storedAuthLayout === void 0 ? void 0 : storedAuthLayout.length)) {
-        // Checking props here to verify a valid configuration was passed in.
-        // Doing this since we auto adjust the auth layouts based on passed in auth method props, if an empty storedAuthLayout was triggered based on invalid props we want to be sure the message reflects that correctly.
-        const hasExternalWalletError = !(externalWallets === null || externalWallets === void 0 ? void 0 : externalWallets.length) && hasExternalWallet(authLayout);
-        const hasEmbeddedWalletError = disableEmailLogin && disablePhoneLogin && !(oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout);
-        if (hasExternalWalletError || hasEmbeddedWalletError) {
-            if (hasExternalWalletError) {
-                console.error('At least one external wallet must be provided if external wallet auth is enabled.');
-            }
-            if (hasEmbeddedWalletError) {
-                console.error('At least one login method (email, phone or OAuth) must be provided if embedded wallet auth is enabled.');
-            }
-        }
-        else {
-            console.error('At least one auth layout selection is required.');
-        }
-        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: 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 &&
-    `
-    &::part(modal-body-card) {
-    --card-box-shadow: none;
-    --card-border-width: 0px;
-  };
-
-  &::part(modal-footer) {
-    --card-box-shadow: none;
-    --card-border-width: 0px;
-  };`}
-`;

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

@@ -1,60 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { InnerStepContainer, StepContainer, StyledCpslTileButton } from '../common.js';
-import { CpslButton, CpslIcon, CpslSpinner, CpslText } from '@getpara/react-components';
-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 hideWallets = useThemeStore(state => state.hideWallets);
-    const { disconnectExternalWallet } = useExternalWallets();
-    const para = useInternalClient();
-    const [isDisconnecting, setIsDisconnecting] = useState(false);
-    const isOnRampLoaded = !!onRampConfig;
-    const handleBuyClick = () => {
-        setStep(ModalStep.ADD_FUNDS_BUY);
-    };
-    const handleReceiveClick = () => {
-        setStep(ModalStep.ADD_FUNDS_RECEIVE);
-    };
-    const handleSellClick = () => {
-        setStep(ModalStep.ADD_FUNDS_WITHDRAW);
-    };
-    const handleDisconnectClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        setIsDisconnecting(true);
-        yield para.logout();
-        yield disconnectExternalWallet();
-        onClose();
-        setIsDisconnecting(false);
-    });
-    return (_jsx(StepContainer, { "$wide": true, children: _jsxs(InnerStepContainer, { children: [_jsx(ButtonContainer, { children: isOnRampLoaded ? (_jsxs(_Fragment, { children: [onRampConfig.isBuyEnabled && (_jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Buy Crypto" }) })), onRampConfig.isReceiveEnabled && (_jsx(OptionButton, { icon: "qrCode02", onClick: handleReceiveClick, children: _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Receive" }) })), onRampConfig.isWithdrawEnabled && (_jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }))] })) : (_jsx(CpslSpinner, {})) }), _jsx(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: handleDisconnectClick, disabled: isDisconnecting, children: isDisconnecting ? (_jsx(CpslSpinner, { size: 16 })) : (_jsxs(_Fragment, { children: [hideWallets ? 'Logout' : 'Disconnect Wallet', _jsx(CpslIcon, { icon: "logOut", slot: "end" })] })) })] }) }));
-};
-const ButtonContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  height: 88px;
-`;
-const OptionButton = styled(StyledCpslTileButton) `
-  flex: 1;
-
-  --button-icon-color: var(--cpsl-color-text-primary);
-`;
-const DisconnectButton = styled(CpslButton) `
-  --button-border-width: 0px;
-`;