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

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

@@ -1,232 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from 'styled-components';
-import { IFrameSteps, ModalStep } from '../../utils/steps.js';
-import { CpslAlert, CpslIcon } from '@getpara/react-components';
-import { VerificationCodeStep } from '../VerificationCodeStep/VerificationCodeStep.js';
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { BiometricLoginStep } from '../BiometricLoginStep/BiometricLoginStep.js';
-import { Setup2FAStep } from '../Setup2FAStep/Setup2FAStep.js';
-import { LoginDoneStep } from '../LoginDoneStep/LoginDoneStep.js';
-import { EnabledFlow } from '@getpara/web-sdk';
-import { AwaitingBiometricsStep } from '../AwaitingBiometricsStep/AwaitingBiometricsStep.js';
-import { AwaitingWalletCreationStep } from '../AwaitingWalletCreationStep/AwaitingWalletCreationStep.js';
-import { WalletCreationDoneStep } from '../WalletCreationDoneStep/WalletCreationDoneStep.js';
-import { RecoverySecretStep } from '../RecoverySecretStep/RecoverySecretStep.js';
-import { TwoFactorDoneStep } from '../TwoFactorDoneStep/TwoFactorDoneStep.js';
-import { BiometricCreationStep } from '../BiometricCreationStep/BiometricCreationStep.js';
-import { AwaitingOAuthStep } from '../AwaitingOAuthStep/AwaitingOAuthStep.js';
-import { AddFundsAwaiting, AddFundsDone, AddFunds } from '../AddFunds/index.js';
-import FarcasterOAuthStep from '../OAuth/FarcasterOAuthStep.js';
-import { Header } from '../Header/Header.js';
-import { AuthMainStep } from '../AuthMainStep/AuthMainStep.js';
-import { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from '../../constants/constants.js';
-import { Account } from '../Account/Account.js';
-import { AuthOptions } from '../AuthOptions/AuthOptions.js';
-import { ExternalWallets } from '../ExternalWallets/ExternalWallets.js';
-import { ExternalWalletStep } from '../ExternalWalletStep/ExternalWalletStep.js';
-import { Hero } from '../Hero/Hero.js';
-import { AnimatedHeightWrapper } from './AnimatedHeightWrapper.js';
-import { ChainSwitch } from '../ChainSwitch/ChainSwitch.js';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Controls } from '../Controls/Controls.js';
-import { useEffect, useState } from 'react';
-import { TelegramOAuthStep } from '../OAuth/TelegramOAuthStep.js';
-import { AwaitingPasswordStep } from '../AwaitingPasswordStep/AwaitingPasswordStep.js';
-import { IFrameStep } from '../IFrameStep/IFrameStep.js';
-const MIN_HEIGHT = {
-    [ModalStep.ADD_FUNDS_AWAITING]: '680px',
-};
-const PADDING_TOP = {
-    [ModalStep.TELEGRAM_OAUTH]: '36px',
-};
-const PADDING_BOTTOM = {
-    [ModalStep.TELEGRAM_OAUTH]: '16px',
-};
-export const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, onClose, createAccountWithPasskey, createAccountWithPassword, }) => {
-    const currentStep = useModalStore(state => state.step);
-    const onRampConfig = useModalStore(state => state.onRampConfig);
-    const stepDirection = useModalStore(state => state.stepDirection);
-    const setStepDirection = useModalStore(state => state.setStepDirection);
-    const accountAddFundTab = useModalStore(state => state.accountAddFundTab);
-    const setAccountAddFundTab = useModalStore(state => state.setAccountAddFundTab);
-    const appName = useThemeStore(state => state.appName);
-    const embeddedModal = useThemeStore(state => state.embeddedModal);
-    const [isTestModeAlert, setIsTestModeAlert] = useState(onRampConfig === null || onRampConfig === void 0 ? void 0 : onRampConfig.testMode);
-    const Content = () => {
-        switch (currentStep) {
-            case ModalStep.AUTH_MAIN: {
-                return (_jsx(AuthMainStep, { oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }));
-            }
-            case ModalStep.EX_WALLET_MORE: {
-                return _jsx(ExternalWallets, {});
-            }
-            case ModalStep.AUTH_MORE: {
-                return (_jsx(AuthOptions, { oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }));
-            }
-            case ModalStep.VERIFICATIONS: {
-                return _jsx(VerificationCodeStep, {});
-            }
-            case ModalStep.BIOMETRIC_LOGIN: {
-                return _jsx(BiometricLoginStep, {});
-            }
-            case ModalStep.SETUP_2FA:
-            case ModalStep.VERIFY_2FA: {
-                return _jsx(Setup2FAStep, { onClose: onClose });
-            }
-            case ModalStep.LOGIN_DONE: {
-                return _jsx(LoginDoneStep, { onClose: onClose });
-            }
-            case ModalStep.AWAITING_BIOMETRIC_LOGIN:
-            case ModalStep.AWAITING_BIOMETRIC_CREATION: {
-                return _jsx(AwaitingBiometricsStep, {});
-            }
-            case ModalStep.AWAITING_PASSWORD_LOGIN:
-            case ModalStep.AWAITING_PASSWORD_CREATION: {
-                return _jsx(AwaitingPasswordStep, {});
-            }
-            case ModalStep.AWAITING_WALLET_CREATION: {
-                return _jsx(AwaitingWalletCreationStep, {});
-            }
-            case ModalStep.WALLET_CREATION_DONE: {
-                return _jsx(WalletCreationDoneStep, { twoFactorAuthEnabled: twoFactorAuthEnabled, onClose: onClose });
-            }
-            case ModalStep.SECRET: {
-                return _jsx(RecoverySecretStep, {});
-            }
-            case ModalStep.TWO_FACTOR_DONE: {
-                return _jsx(TwoFactorDoneStep, { onClose: onClose });
-            }
-            case ModalStep.BIOMETRIC_CREATION: {
-                return (_jsx(BiometricCreationStep, { handlePasswordClick: createAccountWithPassword, handlePasskeyClick: createAccountWithPasskey }));
-            }
-            case ModalStep.AWAITING_OAUTH: {
-                return _jsx(AwaitingOAuthStep, {});
-            }
-            case ModalStep.FARCASTER_OAUTH: {
-                return _jsx(FarcasterOAuthStep, {});
-            }
-            case ModalStep.TELEGRAM_OAUTH: {
-                return _jsx(TelegramOAuthStep, {});
-            }
-            case ModalStep.ADD_FUNDS_BUY:
-            case ModalStep.ADD_FUNDS_RECEIVE:
-            case ModalStep.ADD_FUNDS_WITHDRAW: {
-                return _jsx(AddFunds, {});
-            }
-            case ModalStep.ADD_FUNDS_AWAITING: {
-                return _jsx(AddFundsAwaiting, {});
-            }
-            case ModalStep.ADD_FUNDS_SUCCESS: {
-                return _jsx(AddFundsDone, { isSuccess: true, onClose: onClose });
-            }
-            case ModalStep.ADD_FUNDS_FAILURE: {
-                return _jsx(AddFundsDone, { onClose: onClose });
-            }
-            case ModalStep.ACCOUNT_MAIN: {
-                return _jsx(Account, { onClose: onClose });
-            }
-            case ModalStep.EX_WALLET_SELECTED: {
-                return _jsx(ExternalWalletStep, {});
-            }
-            case ModalStep.CHAIN_SWITCH: {
-                return _jsx(ChainSwitch, {});
-            }
-            default: {
-                if (IFrameSteps.includes(currentStep)) {
-                    return null;
-                }
-            }
-        }
-    };
-    useEffect(() => {
-        if (!isTestModeAlert && (onRampConfig === null || onRampConfig === void 0 ? void 0 : onRampConfig.testMode)) {
-            setIsTestModeAlert(true);
-        }
-    }, [onRampConfig === null || onRampConfig === void 0 ? void 0 : onRampConfig.testMode]);
-    useEffect(() => {
-        switch (currentStep) {
-            case ModalStep.ADD_FUNDS_BUY:
-                setAccountAddFundTab(EnabledFlow.BUY);
-                break;
-            case ModalStep.ADD_FUNDS_RECEIVE:
-                setAccountAddFundTab(EnabledFlow.RECEIVE);
-                break;
-            case ModalStep.ADD_FUNDS_WITHDRAW:
-                setAccountAddFundTab(EnabledFlow.WITHDRAW);
-                break;
-            default:
-                break;
-        }
-    }, [currentStep]);
-    return (_jsxs(Container, { slot: "body", "data-testid": "modal-content", children: [!embeddedModal && (_jsxs(_Fragment, { children: [_jsx(Controls, { onClose: onClose }), _jsx(Header, {})] })), _jsxs(AnimatedWrapper, { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, onExitComplete: () => {
-                            setStepDirection(1);
-                        }, custom: stepDirection, children: _jsxs(BodyContainer, { custom: stepDirection, variants: BODY_MOTION_VARIANTS, initial: "enter", animate: "center", exit: "exit", transition: BODY_TRANSITION, children: [_jsx(Hero, {}), _jsxs(InnerContainer, { "$embeddedModal": embeddedModal, "$step": currentStep, "$isIFrameStep": IFrameSteps.includes(currentStep), children: [Content(), (onRampConfig === null || onRampConfig === void 0 ? void 0 : onRampConfig.testMode) &&
-                                            [
-                                                ModalStep.ADD_FUNDS_BUY,
-                                                ModalStep.ADD_FUNDS_WITHDRAW,
-                                                ModalStep.ADD_FUNDS_AWAITING,
-                                                ModalStep.ADD_FUNDS_FAILURE,
-                                                ModalStep.ADD_FUNDS_SUCCESS,
-                                            ].includes(currentStep) &&
-                                            isTestModeAlert &&
-                                            accountAddFundTab !== EnabledFlow.RECEIVE && (_jsx(TestModeAlert, { children: _jsxs("div", { style: { fontSize: '14px' }, children: ["This Para Modal is configured to run on-ramp services in ", _jsx("b", { children: "test mode" }), " only, for development purposes. If you are a user of ", appName, ", please contact support.", _jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: _jsx(CloseX, { icon: "x" }) })] }) }))] })] }, ['ADD_FUNDS_BUY', 'ADD_FUNDS_RECEIVE', 'ADD_FUNDS_WITHDRAW'].includes(currentStep) ? 'ADD_FUNDS' : currentStep) }), _jsx(IFrameStep, {})] })] }));
-};
-const Container = styled.div `
-  position: relative;
-`;
-const AnimatedWrapper = styled(AnimatedHeightWrapper) `
-  margin-top: -16px;
-`;
-const BodyContainer = styled(motion.div) `
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  will-change: auto !important;
-`;
-const InnerContainer = styled.div `
-  z-index: 1;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 24px;
-  padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
-    var _a, _b;
-    return $isIFrameStep
-        ? '0px'
-        : $embeddedModal
-            ? '12px 0px 0px'
-            : `${(_a = PADDING_TOP[$step]) !== null && _a !== void 0 ? _a : '72px'} 72px ${(_b = PADDING_BOTTOM[$step]) !== null && _b !== void 0 ? _b : '32px'}`;
-}};
-  min-height: ${({ $step }) => { var _a; return (_a = MIN_HEIGHT[$step]) !== null && _a !== void 0 ? _a : 'auto'; }};
-  height: ${({ $step }) => { var _a; return (_a = MIN_HEIGHT[$step]) !== null && _a !== void 0 ? _a : 'auto'; }};
-
-  @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $step, $isIFrameStep }) => { var _a; return $isIFrameStep ? '0px' : $embeddedModal ? '12px 0px 0px' : `${(_a = PADDING_TOP[$step]) !== null && _a !== void 0 ? _a : '72px'} 16px 0px`; }};
-  }
-
-  cpsl-auth-modal.force-mobile-media & {
-    padding: 72px 16px 0px;
-  }
-`;
-const TestModeAlert = styled(CpslAlert) `
-  --container-padding-end: 40px;
-  position: absolute;
-  bottom: 16px;
-  left: 16px;
-  right: 16px;
-  z-index: 1000;
-`;
-const CloseButton = styled.button `
-  background-color: transparent;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
-`;
-const CloseX = styled(CpslIcon) `
-  --icon-color: var(--cpsl-color-foreground-0);
-`;

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -1,77 +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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
-import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
-import { useEffect, useMemo } from 'react';
-import { useModalStore } from '../../stores/index.js';
-import styled from 'styled-components';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { useCopyToClipboard } from '@getpara/react-common';
-import { ModalStep } from '../../utils/steps.js';
-import { routeMobileExternalWallet } from '../../utils/routeMobileExternalWallet.js';
-import { NETWORK_NOT_SUPPORTED_ERROR } from '../../constants/constants.js';
-import { WalletType } from '@getpara/web-sdk';
-export const ChainSwitch = () => {
-    const [isCopied, copy] = useCopyToClipboard();
-    const externalWalletError = useModalStore(state => state.externalWalletError);
-    const setStep = useModalStore(state => state.setStep);
-    const setStepDirection = useModalStore(state => state.setStepDirection);
-    const { switchChain, wallet, qrUri, chainIdSwitchingTo, walletDisplayHelpers } = useExternalWallets();
-    useEffect(() => {
-        if ((wallet === null || wallet === void 0 ? void 0 : wallet.type) === WalletType.COSMOS) {
-            routeMobileExternalWallet(qrUri);
-        }
-    }, [qrUri, wallet]);
-    useEffect(() => {
-        if (!wallet) {
-            setStepDirection(-1);
-            setStep(ModalStep.ACCOUNT_MAIN);
-        }
-    }, [wallet]);
-    const handleTryAgainClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (chainIdSwitchingTo) {
-            yield switchChain(chainIdSwitchingTo);
-        }
-    });
-    const handleCopy = () => {
-        copy(qrUri);
-    };
-    const Content = useMemo(() => {
-        var _a;
-        if (!wallet) {
-            return null;
-        }
-        const { isCosmosMobileWallet } = walletDisplayHelpers;
-        if (isCosmosMobileWallet) {
-            return (_jsx(_Fragment, { children: _jsxs(InnerStepContainer, { children: [_jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device to switch networks" }), _jsx(QRContainer, { children: !qrUri ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }), _jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [_jsx(CpslIcon, { slot: "start", icon: isCopied ? 'check' : 'copy' }), isCopied ? 'Copied' : 'Copy Link'] })] }) }));
-        }
-        return (_jsxs(InnerStepContainer, { children: [!(externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError.length) ? (_jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm the request to change networks in your ${wallet.name} wallet.` })) : (_jsxs(_Fragment, { children: [_jsxs(ErrorContainer, { children: [_jsx(ErrorIcon, { icon: "alertCircle" }), _jsx(CenteredText, { weight: "semiBold", color: "error", children: externalWalletError[0] })] }), externalWalletError[1] && (_jsx(CenteredText, { color: "secondary", weight: "medium", children: externalWalletError[1] }))] })), ((_a = externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== NETWORK_NOT_SUPPORTED_ERROR && (_jsxs(CpslButton, { variant: "secondary", onClick: handleTryAgainClick, children: [_jsx(CpslIcon, { slot: "start", icon: "refresh" }), "Try Again"] }))] }));
-    }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
-    if (!wallet) {
-        return null;
-    }
-    return _jsx(Container, { children: Content });
-};
-const Container = styled(StepContainer) `
-  flex: 1;
-  justify-content: space-between;
-`;
-const ErrorContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const ErrorIcon = styled(CpslIcon) `
-  --height: 16px;
-  --width: 16px;
-  --icon-color: var(--cpsl-color-text-error);
-`;

package/dist/modal/components/ChainSwitch/config.js

@@ -1,11 +0,0 @@
-export var TabValue;
-(function (TabValue) {
-    TabValue["extension"] = "extension";
-    TabValue["mobile"] = "mobile";
-    TabValue["web"] = "web";
-})(TabValue || (TabValue = {}));
-export const TABS = {
-    extension: { label: 'Extension', value: TabValue.extension, icon: 'puzzlePiece' },
-    mobile: { label: 'Mobile', value: TabValue.mobile, icon: 'phone' },
-    web: { label: 'Web', value: TabValue.web, icon: 'globe' },
-};

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

@@ -1,54 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslIcon } from '@getpara/react-components';
-import { styled } from 'styled-components';
-import { useModalStore } from '../../stores/index.js';
-import { useThemeStore } from '../../stores/theme/useThemeStore.js';
-import { useGoBack } from '../../hooks/useGoBack.js';
-import { AccountSelect, ChainSelect } from './Selects.js';
-import { ModalStep } from '../../utils/steps.js';
-import { HeaderButton } from '@getpara/react-common';
-export const Controls = ({ onClose }) => {
-    const bareModal = useThemeStore(state => state.bareModal);
-    const hasPreviousStep = useModalStore(state => state.hasPreviousStep());
-    const step = useModalStore(state => state.step);
-    const isFullyLoggedIn = useModalStore(state => state.isFullyLoggedIn);
-    const goBack = useGoBack();
-    const shouldShowSelects = [
-        ModalStep.ACCOUNT_MAIN,
-        ModalStep.CHAIN_SWITCH,
-        ModalStep.ADD_FUNDS_BUY,
-        ModalStep.ADD_FUNDS_RECEIVE,
-        ModalStep.ADD_FUNDS_WITHDRAW,
-    ].includes(step);
-    const handleBackClick = () => {
-        goBack();
-    };
-    return (_jsxs(Container, { children: [_jsx(BackButton, { variant: "ghost", style: {
-                    visibility: hasPreviousStep ? 'visible' : 'hidden',
-                }, onClick: handleBackClick, children: _jsx(CpslIcon, { icon: "arrow" }) }), _jsx(MiddleContainer, { children: shouldShowSelects && isFullyLoggedIn && (_jsxs(_Fragment, { children: [_jsx(ChainSelect, {}), _jsx(AccountSelect, {})] })) }), _jsx(CloseButton, { bareModal: bareModal, variant: "ghost", onClick: onClose, children: _jsx(CpslIcon, { icon: "close" }) })] }));
-};
-const Container = styled.div `
-  position: absolute;
-  width: 100%;
-  top: 16px;
-
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
-const MiddleContainer = styled.div `
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const CloseButton = styled(HeaderButton) `
-  transform: rotate(180deg);
-  visibility: ${({ bareModal }) => (bareModal ? 'hidden' : 'visible')};
-`;
-const BackButton = styled(HeaderButton) `
-  transform: rotate(180deg);
-`;

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

@@ -1,159 +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, 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 { 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;
-};
-const WALLET_TYPES = {
-    [WalletType.EVM]: 'EVM',
-    [WalletType.SOLANA]: 'Solana',
-    [WalletType.COSMOS]: 'Cosmos',
-};
-export const ChainSelect = () => {
-    var _a, _b;
-    const containerRef = useRef(null);
-    const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-    const activeWallet = useActiveWallet();
-    const { switchChain, chainId, chains, chainIdSwitchingTo } = useExternalWallets();
-    useEffect(() => {
-        if (dropdownMaxHeight && chainId) {
-            resize();
-        }
-    }, [chainId, chainIdSwitchingTo, dropdownMaxHeight]);
-    const handleChainChange = (chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        yield switchChain(chainId);
-    });
-    if (!activeWallet || !activeWallet.isExternal || activeWallet.type === WalletType.SOLANA) {
-        return null;
-    }
-    const chainIdToUse = chainIdSwitchingTo !== null && chainIdSwitchingTo !== void 0 ? chainIdSwitchingTo : chainId;
-    const selectedChainName = (_a = chains.find(c => c.id.toString() === chainIdToUse)) === null || _a === void 0 ? void 0 : _a.name;
-    return (_jsx(Container, { children: _jsx(SelectContainer, { ref: containerRef, id: "inputContainer", children: _jsxs(StyledSelect, { selectedValue: (_b = chainIdToUse === null || chainIdToUse === void 0 ? void 0 : chainIdToUse.toString()) !== null && _b !== void 0 ? _b : '', onCpslSelectValueChange: e => {
-                    handleChainChange(e.detail);
-                }, showFormattedSelectedItem: true, placeholder: "Choose chain...", anchorElId: "inputContainer", dropdownMaxHeight: dropdownMaxHeight, "$width": dropdownWidth, "$top": mobileAnchor + 16 + 1, autoWidth: true, selectedItemVariant: "bodyXS", children: [chainIdToUse && (_jsx(ChainName, { variant: "bodyXS", color: "contrast", slot: "selected-item", children: selectedChainName })), chains === null || chains === void 0 ? void 0 : chains.map(chain => (_jsx(StyledSelectItem, { slot: "items", value: chain.id.toString(), children: _jsx(ChainName, { variant: "bodyXS", color: "contrast", children: chain.name }) }, chain.id)))] }) }) }));
-};
-function getName(para, { type, isExternal, name, isMenu = false, hideWallets = false, }) {
-    if (para.isMultiWallet) {
-        return (name !== null && name !== void 0 ? name : `${isExternal ? 'External ' : ''}${WALLET_TYPES[type]}${!hideWallets && (isMenu || isExternal) ? ' Wallet' : ''}`);
-    }
-    return hideWallets ? 'My Account' : name || 'My Wallet';
-}
-export const AccountSelect = () => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const para = useInternalClient();
-    const containerRef = useRef(null);
-    const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-    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(() => {
-        if (dropdownMaxHeight && (activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.address)) {
-            resize();
-        }
-    }, [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('~');
-                    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 });
-                        return (_jsx(StyledSelectItem, { slot: "items", value: key, children: _jsxs(FlexRow, { children: [_jsx(CpslIdenticon, { size: "40px", hash: para.getIdenticonHash(id, type) }), _jsxs(FlexCol, { children: [name && (_jsx(CpslText, { variant: "bodyS", color: "contrast", children: name })), !hideWallets && (_jsx(CpslText, { variant: "bodyXS", color: "secondary", children: truncateAddress(address, type, { prefix: para.cosmosPrefix }) }))] })] }) }, key));
-                    })] })) : (ActiveWalletNode) }) }));
-};
-const Container = styled.div `
-  flex: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`;
-const FlexRow = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const FlexCol = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-const WalletName = styled(CpslText) `
-  white-space: nowrap;
-`;
-const SelectContainer = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 1000px;
-  background-color: var(--cpsl-color-background-8);
-  padding: 8px;
-`;
-const ChainName = styled(CpslText) `
-  max-width: 150px;
-  text-transform: capitalize;
-
-  &::part(text-element) {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`;
-const StyledSelect = styled(CpslSelect) `
-  --container-height: auto;
-  --container-border-width: 0px;
-  --container-padding-end: 0px;
-  --container-padding-start: 0px;
-  --container-background-color: transparent;
-  --container-box-shadow: none;
-  --container-gap: 2px;
-  --icon-width: 16px;
-  --icon-height: 16px;
-
-  &::part(selected-text) {
-    white-space: nowrap;
-  }
-
-  &::part(dropdown) {
-    min-width: ${({ $width }) => `${$width - 2}px`};
-  }
-
-  &::part(popover) {
-    /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
-    @media (max-width: ${MOBILE_SIZE}px) {
-      top: ${({ $top }) => ($top ? `${$top}px` : '0px')};
-      bottom: 16px;
-    }
-    cpsl-auth-modal.force-mobile-media & {
-      top: ${({ $top }) => ($top ? `${$top}px` : '0px')};
-      bottom: 16px;
-    }
-  }
-
-  &::part(icon) {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-`;
-const StyledSelectItem = styled(CpslSelectItem) `
-  --outer-container-padding-start: 4px;
-  --outer-container-padding-end: 4px;
-  --outer-container-padding-top: 4px;
-  --outer-container-padding-bottom: 4px;
-`;

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

@@ -1,116 +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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
-import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
-import { useEffect, useMemo } from 'react';
-import { useModalStore } from '../../stores/index.js';
-import styled from 'styled-components';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { useCopyToClipboard } from '@getpara/react-common';
-import { ModalStep } from '../../utils/steps.js';
-import { isMobile, isTablet, WalletType } from '@getpara/web-sdk';
-import { routeMobileExternalWallet } from '../../utils/routeMobileExternalWallet.js';
-export const ExternalWalletStep = () => {
-    const [isCopied, copy] = useCopyToClipboard();
-    const externalWalletError = useModalStore(state => state.externalWalletError);
-    const setStep = useModalStore(state => state.setStep);
-    const { connectExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
-    useEffect(() => {
-        routeMobileExternalWallet(qrUri);
-    }, [qrUri]);
-    const handleTryAgainClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        yield connectExternalWallet(wallet);
-    });
-    const handleCopy = () => {
-        copy(qrUri);
-    };
-    const Content = useMemo(() => {
-        var _a, _b, _c;
-        if (!wallet) {
-            return null;
-        }
-        const isWalletConnect = wallet.id === 'walletConnect';
-        const isMobileWalletConnect = isMobile() && isWalletConnect;
-        if (isMobileWalletConnect) {
-            _jsx(InnerStepContainer, { children: _jsx(Text, { weight: "semiBold", children: "Continue in the WalletConnect modal." }) });
-        }
-        const { showExtension, showMobile, isSolanaMobileIOS } = walletDisplayHelpers;
-        // Fallback to not supported text
-        if ((!showMobile && !showExtension) || (isSolanaMobileIOS && !wallet.installed)) {
-            const text = isSolanaMobileIOS
-                ? "Solana wallets aren't available on mobile IOS browsers.\n\nPlease continue in the wallet app."
-                : `${wallet.name} isn't supported on mobile devices.\n\nPlease choose another wallet or continue on desktop.`;
-            return (_jsx(InnerStepContainer, { children: _jsx(Text, { weight: "semiBold", children: text }) }));
-        }
-        if (showExtension) {
-            const isInstalled = wallet.installed;
-            return (_jsxs(InnerStepContainer, { children: [isInstalled && !(externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError.length) ? (_jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm connection request in the ${wallet.name} browser extension.` })) : (_jsxs(ErrorContainer, { children: [_jsx(ErrorIcon, { icon: "alertCircle" }), _jsx(CpslText, { weight: "semiBold", color: "error", children: isInstalled ? externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError[0] : `${wallet.name} not detected` })] })), _jsxs(CpslButton, { as: isInstalled ? 'button' : 'a', href: (_a = wallet.downloadUrl) !== null && _a !== void 0 ? _a : '', target: "_blank", variant: "secondary", onClick: handleTryAgainClick, children: [_jsx(CpslIcon, { slot: "start", icon: isInstalled ? 'refresh' : 'linkExternal' }), isInstalled ? 'Try Again' : `Get ${wallet.name}`] })] }));
-        }
-        if (showMobile) {
-            // If Solana wallet or if on a mobile and NOT on a table, show the connection screen. Else show the QR code.
-            if (wallet.type === WalletType.SOLANA || (isMobile() && !isTablet())) {
-                // Checking if the wallet is installed only for Solana wallets since Solana MWA doesn't work on IOS Safari
-                // https://docs.solanamobile.com/web/developing-for-web#ios-web
-                const isInstalled = wallet.type !== WalletType.SOLANA || wallet.installed;
-                return (_jsxs(_Fragment, { children: [_jsx(InnerStepContainer, { children: !isInstalled && (_jsx(CpslText, { weight: "semiBold", color: "error", children: `${wallet.name} not detected` })) }), wallet.id !== 'walletConnect' && (_jsxs(InnerStepContainer, { children: [_jsx(CpslButton, { onClick: () => routeMobileExternalWallet(qrUri), fullWidth: true, children: "Connect Wallet" }), _jsx(Link, { href: (_b = wallet.downloadUrl) !== null && _b !== void 0 ? _b : '', target: "_blank", children: _jsxs(ExternalButton, { variant: "secondary", children: [`Get ${wallet.name}`, _jsx(ExternalIcon, { icon: "linkExternal" })] }) })] }))] }));
-            }
-            const openWCModal = () => __awaiter(void 0, void 0, void 0, function* () {
-                yield connectExternalWallet(wallet, true, true);
-            });
-            const GetWalletButton = (_jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? openWCModal : undefined, children: [`${isWalletConnect ? 'Open' : 'Get'} ${wallet.name}`, _jsx(ExternalIcon, { icon: "linkExternal" })] }));
-            return (_jsxs(_Fragment, { children: [_jsxs(InnerStepContainer, { children: [_jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }), _jsx(QRContainer, { children: !qrUri ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }), _jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [_jsx(CpslIcon, { slot: "start", icon: isCopied ? 'check' : 'copy' }), isCopied ? 'Copied' : 'Copy Link'] })] }), _jsx(InnerStepContainer, { children: isWalletConnect ? (_jsx(_Fragment, { children: GetWalletButton })) : (_jsx(Link, { href: (_c = wallet.downloadUrl) !== null && _c !== void 0 ? _c : '', target: "_blank", children: GetWalletButton })) })] }));
-        }
-    }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
-    useEffect(() => {
-        if (!wallet) {
-            setStep(ModalStep.AUTH_MAIN);
-        }
-    }, [wallet]);
-    if (!wallet) {
-        return null;
-    }
-    return _jsx(Container, { children: Content });
-};
-const Container = styled(StepContainer) `
-  flex: 1;
-  justify-content: space-between;
-`;
-const ErrorContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const ErrorIcon = styled(CpslIcon) `
-  --height: 16px;
-  --width: 16px;
-  --icon-color: var(--cpsl-color-text-error);
-`;
-const Text = styled(CenteredText) `
-  white-space: pre-line;
-`;
-const ExternalButton = styled(CpslButton) `
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  cursor: pointer;
-  margin-top: 8px;
-  text-decoration: none;
-`;
-const ExternalIcon = styled(CpslIcon) `
-  --height: 20px;
-  --width: 20px;
-`;
-const Link = styled.a `
-  text-decoration: none;
-`;