@getpara/react-sdk 0.1.0

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/modal/ParaModal.d.ts

@@ -0,0 +1,2 @@
+import { ParaModalHandle, ParaModalProps } from './types/modalProps.js';
+export declare const ParaModal: import("react").ForwardRefExoticComponent<ParaModalProps & import("react").RefAttributes<ParaModalHandle>>;

package/dist/modal/ParaModal.js

@@ -0,0 +1,250 @@
+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 { useParaStore, useModalStore, useUserInfoStore, useThemeStore } from './stores/index.js';
+import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from './utils/steps.js';
+import { AuthLayout } from './types/modalProps.js';
+import { DEFAULTS } from './constants/defaults.js';
+import { useGoBack } from './hooks/useGoBack.js';
+import { CURRENT_WALLET_IDS_CHANGE_EVENT, EXTERNAL_WALLET_CHANGE_EVENT } from '@getpara/web-sdk';
+import { ExternalWalletsWrapper } from './components/ExternalWalletsWrapper/ExternalWalletsWrapper.js';
+import styled from 'styled-components';
+import { useExternalWallets } from './providers/ExternalWalletContext.js';
+import { hasEmbeddedAuth, hasExternalWallet } from './utils/authLayoutHelpers.js';
+defineCustomElements();
+export const ParaModal = forwardRef((_a, ref) => {
+    var { para: _para, isOpen, theme, appName, logo, disableEmailLogin = false, disablePhoneLogin = false, oAuthMethods, bareModal = false, className, currentStepOverride, externalWallets, authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL], embeddedModal, onModalStepChange, hideWallets = false, onClose } = _a, rest = __rest(_a, ["para", "isOpen", "theme", "appName", "logo", "disableEmailLogin", "disablePhoneLogin", "oAuthMethods", "bareModal", "className", "currentStepOverride", "externalWallets", "authLayout", "embeddedModal", "onModalStepChange", "hideWallets", "onClose"]);
+    const para = _para;
+    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 setPara = useParaStore(state => state.setPara);
+    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 [activeWallet, setActiveWallet] = useModalStore(state => [state.activeWallet, state.setActiveWallet]);
+    const { disconnectExternalWallet } = useExternalWallets();
+    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();
+            setActiveWallet([undefined, 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();
+            setPara(para);
+            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 (!activeWallet[0] || !para.findWallet(activeWallet[0])) {
+            const defaultWallet = para.findWallet(undefined, undefined, { forbidPregen: true });
+            defaultWallet && setActiveWallet([defaultWallet.id, defaultWallet.type]);
+        }
+    };
+    useEffect(() => {
+        setPara(para);
+        updateActiveWallet();
+    }, [para]);
+    useEffect(() => {
+        window.addEventListener(CURRENT_WALLET_IDS_CHANGE_EVENT, updateActiveWallet);
+        window.addEventListener(EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
+        return () => {
+            window.removeEventListener(CURRENT_WALLET_IDS_CHANGE_EVENT, updateActiveWallet);
+            window.removeEventListener(EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
+        };
+    }, []);
+    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: onClose, noOverlay: bareModal, className: className, "data-testid": "modal", "$embeddedModal": embeddedModal, children: isModalMounted && ((isInit && embeddedModal) || !embeddedModal) && (_jsx(ModalContent, Object.assign({ oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, onClose: onClose }, rest))) }) }));
+});
+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.d.ts

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

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

@@ -0,0 +1,59 @@
+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 { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
+import { useState } from 'react';
+import { ModalStep } from '../../utils/steps.js';
+export const Account = ({ onClose }) => {
+    const onRampConfig = useModalStore(state => state.onRampConfig);
+    const setStep = useModalStore(state => state.setStep);
+    const para = useParaStore(state => state.para);
+    const hideWallets = useThemeStore(state => state.hideWallets);
+    const { disconnectExternalWallet } = useExternalWallets();
+    const [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;
+`;

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

@@ -0,0 +1,3 @@
+import { EnabledFlow } from '@getpara/web-sdk';
+export type Tab = EnabledFlow;
+export declare const AddFunds: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,146 @@
+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 { EnabledFlow, getOnRampAssets, getOnRampNetworks, OnRampProvider, OnRampPurchaseType, toAssetInfoArray, WalletType, } from '@getpara/web-sdk';
+import { CenteredText, FilledDisabledInput, Heading, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
+import { CpslButton, CpslDivider, CpslIcon, CpslIdenticon, CpslQrCode, CpslSpinner, CpslTab, CpslTabs, CpslText, } from '@getpara/react-components';
+import { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { useEffect, useMemo } from 'react';
+import { OnRampProviderButton } from '../OnRampComponents/OnRampProviderButton.js';
+import { isMobile } from '@getpara/web-sdk';
+import { useActiveWallet } from '../../hooks/useActiveWallet.js';
+import { getAddFundsStep, ModalStep } from '../../utils/steps.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
+import { getNetworkFromChainId, getNetworkOrMainNetEquivalent, useCopyToClipboard } from '@getpara/react-common';
+import { formatNetworkList } from '../../utils/stringFormatters.js';
+import styled from 'styled-components';
+const TABS = [
+    [EnabledFlow.BUY, 'isBuyEnabled', 'creditCard', 'Buy'],
+    [EnabledFlow.RECEIVE, 'isReceiveEnabled', 'qrCode', 'Receive'],
+    [EnabledFlow.WITHDRAW, 'isWithdrawEnabled', 'arrowCircleBrokenDownLeft', 'Withdraw'],
+];
+const GENERIC_WALLET = {
+    [WalletType.EVM]: 'Ethereum or EVM-based L2s',
+    [WalletType.SOLANA]: 'Solana',
+    [WalletType.COSMOS]: 'Cosmos',
+};
+export const AddFunds = () => {
+    const [isCopied, copy] = useCopyToClipboard();
+    const para = useParaStore(state => state.para);
+    const appName = useThemeStore(state => state.appName);
+    const onRampConfig = useModalStore(state => state.onRampConfig);
+    const hideWallets = useThemeStore(state => state.hideWallets);
+    const storedTab = useModalStore(state => state.accountAddFundTab);
+    const setStep = useModalStore(state => state.setStep);
+    const setOnRampPurchase = useModalStore(state => state.setOnRampPurchase);
+    const { chainId } = useExternalWallets();
+    const activeWallet = useActiveWallet();
+    const tabs = TABS.filter(([, key]) => !!onRampConfig[key]);
+    const isMultiFlow = tabs.length > 1;
+    const tab = storedTab !== null && storedTab !== void 0 ? storedTab : tabs[0][0];
+    const address = useMemo(() => (activeWallet ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : ''), [para, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.id, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type]);
+    const onSetTab = (event) => {
+        setStep(getAddFundsStep(event.detail.tab));
+    };
+    const onCopy = () => {
+        copy(address);
+    };
+    const [allowedNetworks, allowedAssets, isProviderAllowed] = useMemo(() => {
+        if (!onRampConfig || !activeWallet) {
+            return [[], [], {}];
+        }
+        const action = tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL;
+        const detectedNetwork = getNetworkFromChainId(chainId);
+        const isExternal = activeWallet.isExternal && !!detectedNetwork;
+        const allowedNetworks = isExternal
+            ? [getNetworkOrMainNetEquivalent(detectedNetwork, onRampConfig.testMode)]
+            : getOnRampNetworks(onRampConfig.assetInfo, {
+                walletType: activeWallet.type,
+                allowed: onRampConfig.allowedAssets ? Object.keys(onRampConfig.allowedAssets) : undefined,
+            });
+        const allowedAssetsLookup = allowedNetworks.reduce((acc, network) => {
+            var _a;
+            const configValue = (_a = onRampConfig.allowedAssets) === null || _a === void 0 ? void 0 : _a[network];
+            const allowed = configValue === true ? undefined : configValue;
+            return Object.assign(Object.assign({}, acc), { [network]: getOnRampAssets(onRampConfig.assetInfo, { walletType: activeWallet.type, network, allowed }) });
+        }, {});
+        const isProviderAllowed = onRampConfig.providers.reduce((acc, id) => {
+            const hasMatch = toAssetInfoArray(onRampConfig.assetInfo).some(([type, network, asset, validProviders]) => {
+                var _a, _b;
+                return (type === activeWallet.type &&
+                    allowedNetworks.includes(network) &&
+                    (!allowedAssetsLookup[network] || allowedAssetsLookup[network].includes(asset)) &&
+                    !!((_b = (_a = validProviders[id]) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b[action]));
+            });
+            return Object.assign(Object.assign({}, acc), { [id]: hasMatch });
+        }, {});
+        return [allowedNetworks, [...new Set(Object.values(allowedAssetsLookup).flat())], isProviderAllowed];
+    }, [activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.isExternal, tab, onRampConfig.assetInfo, onRampConfig.allowedAssets, chainId]);
+    useEffect(() => {
+        setOnRampPurchase(undefined);
+    }, []);
+    useEffect(() => {
+        setOnRampPurchase(undefined);
+    }, []);
+    if (!onRampConfig || !activeWallet) {
+        return (_jsx(SpinnerContainer, { children: _jsx(CpslSpinner, {}) }));
+    }
+    useEffect(() => {
+        setOnRampPurchase(undefined);
+    }, []);
+    return (_jsxs(StepContainer, { children: [isMultiFlow && (_jsx(InnerStepContainer, { children: _jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.map(([tab, _, icon, title]) => (_jsxs(CpslTab, { tab: tab, children: [_jsx(CpslIcon, { slot: "start", icon: icon }), title] }, tab))) }) })), _jsx(_Fragment, { children: [EnabledFlow.BUY, EnabledFlow.WITHDRAW].includes(tab) ? (_jsxs(_Fragment, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: "Choose Provider" }), _jsxs($InnerStepContainer, { children: [_jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some(v => !!v), variant: "bodyM", children: ["No providers are available for this ", hideWallets ? 'account' : 'wallet'] }), _jsx(AnimatePresence, { children: onRampConfig.providers.map((id, index) => {
+                                        return isProviderAllowed[id] ? (_jsx(motion.div, { style: { width: '100%' }, layout: true, initial: { opacity: 0, transform: 'translateX(25px)' }, animate: { opacity: 1, transform: 'none' }, exit: { opacity: 0, transform: 'translateX(-25px)' }, transition: { duration: 0.2 }, children: _jsx(OnRampProviderButton, { config: onRampConfig, index: index, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                                    var _a;
+                                                    if (!(activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type))
+                                                        return;
+                                                    const isPopup = id !== OnRampProvider.RAMP;
+                                                    const { onRampPurchase: newOnRampPurchase } = yield para.initiateOnRampTransaction({
+                                                        walletId: activeWallet.isExternal ? undefined : activeWallet.id,
+                                                        externalWalletAddress: activeWallet.isExternal ? activeWallet.id : undefined,
+                                                        shouldOpenPopup: isPopup,
+                                                        params: {
+                                                            type: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL,
+                                                            walletType: activeWallet.type,
+                                                            provider: id,
+                                                            networks: allowedNetworks,
+                                                            assets: allowedAssets,
+                                                            defaultNetwork: onRampConfig.defaultOnRampNetwork,
+                                                            defaultAsset: onRampConfig.defaultOnRampAsset,
+                                                            fiatQuantity: (_a = onRampConfig.defaultBuyAmount) === null || _a === void 0 ? void 0 : _a[0],
+                                                            testMode: onRampConfig.testMode,
+                                                        },
+                                                    });
+                                                    setOnRampPurchase(Object.assign(Object.assign({}, newOnRampPurchase), { fiat: 'USD' }));
+                                                    !isPopup && setStep(ModalStep.ADD_FUNDS_AWAITING);
+                                                }) }, id) }, id)) : null;
+                                    }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(InnerStepContainer, { children: _jsxs(FilledDisabledInput, { noAutoDisable: true, readonly: true, placeholder: address, children: [_jsx(CpslIdenticon, { slot: "start", size: "32px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }), _jsx(CpslButton, { slot: "end", variant: "ghost", onClick: onCopy, children: _jsx(CpslIcon, { icon: isCopied ? 'check' : 'copy' }) })] }, address) }), !isMobile() && (_jsxs(_Fragment, { children: [_jsx(CpslDivider, { children: "or" }), _jsxs(InnerStepContainer, { children: [_jsx(QRContainer, { children: !address ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: address }, address) }), _jsx(CpslText, { weight: "semiBold", color: "secondary", children: "Scan with your crypto wallet" })] })] })), _jsxs(InnerStepContainer, { children: [_jsxs(CenteredText, { weight: "semiBold", children: [(!!onRampConfig.allowedAssets && allowedNetworks.length > 0) || hideWallets
+                                            ? (appName !== null && appName !== void 0 ? appName : 'This App')
+                                            : 'This Wallet', ' ', "Only Supports:"] }), _jsx(CenteredText, { weight: "medium", color: "secondary", children: !!onRampConfig.allowedAssets && allowedNetworks.length > 0
+                                        ? formatNetworkList(allowedNetworks)
+                                        : GENERIC_WALLET[activeWallet.type] })] })] })) })] }));
+};
+const SpinnerContainer = styled(StepContainer) `
+  margin: 50% 0;
+`;
+const $InnerStepContainer = styled(InnerStepContainer) `
+  position: relative;
+  min-height: 270px;
+`;
+const NoProviders = styled(CpslText) `
+  width: 100%;
+  text-align: center;
+  visibility: ${({ isHidden }) => (isHidden ? 'hidden' : 'visible')};
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: visibility 0.2s;
+`;

package/dist/modal/components/AddFunds/AddFundsAwaiting.d.ts

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

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepContainer } from '../common.js';
+import { OnRampProvider } from '@getpara/web-sdk';
+import { useParaStore, useModalStore, useThemeStore } from '../../stores/index.js';
+import { lazy, useEffect, useMemo, useState } from 'react';
+import { ModalStep } from '../../utils/steps.js';
+import { RampEmbed, StripeEmbed } from '@getpara/react-common';
+import styled from 'styled-components';
+import { useGoBack } from '../../hooks/useGoBack.js';
+const STEPS = {
+    CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
+    FINISHED: ModalStep.ADD_FUNDS_SUCCESS,
+};
+export const AddFundsAwaiting = () => {
+    const setStep = useModalStore(state => state.setStep);
+    const goBack = useGoBack();
+    const onRampConfig = useModalStore(state => state.onRampConfig);
+    const onRampPurchase = useModalStore(state => state.onRampPurchase);
+    const setOnRampPurchase = useModalStore(state => state.setOnRampPurchase);
+    const para = useParaStore(state => state.para);
+    const appName = useThemeStore(state => state.appName);
+    const isDark = useThemeStore(state => state.isDark);
+    const [MoonPayEmbed, setMoonPayEmbed] = useState(null);
+    const props = {
+        para,
+        appName,
+        onRampConfig,
+        onRampPurchase: onRampPurchase,
+        isDark,
+        isEmbedded: true,
+        setOnRampPurchase,
+        onClose: goBack,
+    };
+    useEffect(() => {
+        const _MoonPayEmbed = lazy(() => import(`./MoonPayEmbed.js`));
+        setMoonPayEmbed(_MoonPayEmbed);
+    }, []);
+    const onRampEmbed = useMemo(() => {
+        if (!onRampPurchase.id) {
+            return null;
+        }
+        switch (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider) {
+            case OnRampProvider.STRIPE:
+                return _jsx(StripeEmbed, Object.assign({}, props));
+            case OnRampProvider.MOONPAY:
+                return !MoonPayEmbed || typeof window === 'undefined' ? null : _jsx(MoonPayEmbed, Object.assign({}, props));
+            case OnRampProvider.RAMP:
+                return _jsx(RampEmbed, Object.assign({ apiKey: onRampConfig.rampApiKey }, props));
+        }
+    }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
+    useEffect(() => {
+        let timeoutId;
+        if ((onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.status) && ['CANCELLED', 'FINISHED'].includes(onRampPurchase.status)) {
+            timeoutId = setTimeout(() => {
+                setStep(STEPS[onRampPurchase.status]);
+            }, 5000);
+        }
+        return () => clearTimeout(timeoutId);
+    }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.status]);
+    return _jsx(Container, { "$wide": true, children: onRampEmbed });
+};
+const Container = styled(StepContainer) `
+  flex: 1;
+`;

package/dist/modal/components/AddFunds/AddFundsDone.d.ts

@@ -0,0 +1,6 @@
+interface AddFundsDoneProps {
+    isSuccess?: boolean;
+    onClose: () => void;
+}
+export declare const AddFundsDone: ({ isSuccess, onClose }: AddFundsDoneProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, HeroIcon, InnerStepContainer, StepContainer } from '../common.js';
+import { useModalStore, useThemeStore } from '../../stores/index.js';
+import { useMemo } from 'react';
+import { CpslButton, CpslText } from '@getpara/react-components';
+import { getAddFundsStep } from '../../utils/steps.js';
+export const AddFundsDone = ({ isSuccess, onClose }) => {
+    const hideWallets = useThemeStore(state => state.hideWallets);
+    const setStep = useModalStore(state => state.setStep);
+    const onRampPurchase = useModalStore(state => state.onRampPurchase);
+    const accountAddFundTab = useModalStore(state => state.accountAddFundTab);
+    const formatter = useMemo(() => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiat) || 'USD',
+        });
+    }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiat]);
+    const heading = isSuccess ? 'Transaction Successful' : 'Something Went Wrong';
+    const text = isSuccess
+        ? `${formatter.format(parseFloat(onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiatQuantity))} is now available in your ${hideWallets ? 'account' : 'wallet'}.`
+        : `No funds were added to your ${hideWallets ? 'account' : 'wallet'}.`;
+    const buttonText = isSuccess ? 'Done' : 'Try Again';
+    return (_jsxs(StepContainer, { children: [_jsx(HeroIcon, { icon: "checkCircleFilled" }), _jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: heading }), _jsx(CpslText, { variant: "bodyS", color: "secondary", children: text })] }), _jsx(CpslButton, { fullWidth: true, onClick: () => {
+                    isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab));
+                }, children: buttonText })] }));
+};

package/dist/modal/components/AddFunds/MoonPayEmbed.d.ts

@@ -0,0 +1,2 @@
+import { MoonPayEmbed } from '@getpara/react-common';
+export default MoonPayEmbed;

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

@@ -0,0 +1,2 @@
+import { MoonPayEmbed } from '@getpara/react-common';
+export default MoonPayEmbed;

package/dist/modal/components/AddFunds/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AddFunds.js';
+export * from './AddFundsAwaiting.js';
+export * from './AddFundsDone.js';

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

@@ -0,0 +1,3 @@
+export * from './AddFunds.js';
+export * from './AddFundsAwaiting.js';
+export * from './AddFundsDone.js';

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

@@ -0,0 +1,6 @@
+interface AuthInputProps {
+    disableEmailLogin?: boolean;
+    disablePhoneLogin?: boolean;
+}
+export declare const AuthInput: ({ disableEmailLogin, disablePhoneLogin }: AuthInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};