@getpara/react-sdk 0.1.0

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+export const AnimatedHeightWrapper = ({ children, className }) => {
+    const containerRef = useRef(null);
+    const [height, setHeight] = useState('auto');
+    useEffect(() => {
+        if (containerRef.current) {
+            const resizeObserver = new ResizeObserver(entries => {
+                // We only have one entry, so we can use entries[0].
+                const observedHeight = entries[0].contentRect.height;
+                setHeight(observedHeight);
+            });
+            resizeObserver.observe(containerRef.current);
+            return () => {
+                // Cleanup the observer when the component is unmounted
+                resizeObserver.disconnect();
+            };
+        }
+    }, []);
+    return (_jsx(Container, { className: className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: _jsx("div", { ref: containerRef, children: children }) }));
+};
+const Container = styled(motion.div) `
+  overflow: hidden;
+`;

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

@@ -0,0 +1,12 @@
+import { OAuthMethod } from '@getpara/web-sdk';
+interface BodyProps {
+    oAuthMethods?: OAuthMethod[];
+    twoFactorAuthEnabled?: boolean;
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+    onClose: () => void;
+    createAccountWithPasskey: () => Promise<void>;
+    createAccountWithPassword: () => Promise<void>;
+}
+export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, onClose, createAccountWithPasskey, createAccountWithPassword, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,232 @@
+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.d.ts

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

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

@@ -0,0 +1,77 @@
+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.d.ts

@@ -0,0 +1,7 @@
+import { Tab } from '../../types/commonTypes.js';
+export declare enum TabValue {
+    extension = "extension",
+    mobile = "mobile",
+    web = "web"
+}
+export declare const TABS: Record<'extension' | 'mobile' | 'web', Tab<TabValue>>;

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

@@ -0,0 +1,11 @@
+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.d.ts

@@ -0,0 +1,5 @@
+interface ControlsProps {
+    onClose: () => void;
+}
+export declare const Controls: ({ onClose }: ControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export declare const ChainSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSelect: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,157 @@
+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 { useParaStore, useModalStore, 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';
+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 = useParaStore(state => state.para);
+    const containerRef = useRef(null);
+    const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+    const setActiveWallet = useModalStore(state => state.setActiveWallet);
+    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('~');
+                    setActiveWallet([id, 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.d.ts

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