@getpara/react-sdk 1.1.0 → 1.3.0

package/dist/provider/hooks/utils/useEventListeners.d.ts

@@ -1,2 +1,2 @@
 import { Callbacks } from '../../types/provider.js';
-export declare const useEventListeners: ({ onLogin, onLogout, onAccountSetup, onAccountCreation, onSignMessage, onSignTransaction, onWalletCreated, onPregenWalletClaimed, onExternalWalletChange, onWalletsChange, }: Callbacks) => void;
+export declare const useEventListeners: ({ onLogin, onLogout, onAccountSetup, onAccountCreation, onSignMessage, onSignTransaction, onWalletCreated, onPregenWalletClaimed, onExternalWalletChange, onWalletsChange, }?: Callbacks) => void;

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

@@ -1,5 +1,6 @@
+import { StoreApi } from 'zustand';
 import { Store } from './types.js';
-export declare const useStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<Store>, "persist"> & {
+export declare const vanillaStore: Omit<StoreApi<Store>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<Store, Pick<Store, "selectedWalletId" | "selectedWalletType">>>) => void;
         clearStorage: () => void;
@@ -9,4 +10,8 @@ export declare const useStore: import("zustand").UseBoundStore<Omit<import("zust
         onFinishHydration: (fn: (state: Store) => void) => () => void;
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<Store, Pick<Store, "selectedWalletId" | "selectedWalletType">>>;
     };
-}>;
+};
+export declare const useStore: {
+    (): Store;
+    <T>(selector: (state: Store) => T): T;
+};

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

@@ -1,4 +1,4 @@
-import { AccountCreationEvent, AccountSetupEvent, ConstructorOpts, Environment, ExternalWalletChangeEvent, LoginEvent, LogoutEvent, PregenWalletClaimedEvent, SignMessageEvent, SignTransactionEvent, WalletCreatedEvent, WalletsChangeEvent } from '@getpara/web-sdk';
+import ParaWeb, { AccountCreationEvent, AccountSetupEvent, ConstructorOpts, Environment, ExternalWalletChangeEvent, LoginEvent, LogoutEvent, PregenWalletClaimedEvent, SignMessageEvent, SignTransactionEvent, WalletCreatedEvent, WalletsChangeEvent } from '@getpara/web-sdk';
 import { PropsWithChildren } from 'react';
 export type Callbacks = {
     onLogout?: (event: LogoutEvent) => void;
@@ -15,8 +15,8 @@ export type Callbacks = {
 export type ParaProviderConfig = {
     disableAutoSessionKeepAlive?: boolean;
 };
-export interface ParaProviderProps extends PropsWithChildren {
-    paraClientConfig: {
+interface ParaProviderPropsBase extends PropsWithChildren {
+    paraClientConfig?: {
         env: Environment;
         apiKey: string;
         opts?: ConstructorOpts;
@@ -24,3 +24,15 @@ export interface ParaProviderProps extends PropsWithChildren {
     callbacks?: Callbacks;
     config?: ParaProviderConfig;
 }
+export type ParaProviderProps = ({
+    config: ParaProviderConfig & {
+        paraClientOverride: ParaWeb;
+    };
+    paraClientConfig?: never;
+} & ParaProviderPropsBase) | ({
+    config?: ParaProviderConfig & {
+        paraClientOverride?: never;
+    };
+    paraClientConfig: ParaProviderPropsBase['paraClientConfig'];
+} & ParaProviderPropsBase);
+export {};

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
-    "./styles.css": "./dist/modal/css/modal.css"
+    "./styles.css": "./dist/css/modal.css"
   },
   "sideEffects": [
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "1.1.0",
-    "@getpara/react-components": "1.1.0",
-    "@getpara/web-sdk": "1.1.0",
+    "@getpara/react-common": "1.3.0",
+    "@getpara/react-components": "1.3.0",
+    "@getpara/web-sdk": "1.3.0",
     "@tanstack/react-query": "^5.0.0",
     "date-fns": "^3.6.0",
     "detect-browser": "^5.3.0",
@@ -24,8 +24,9 @@
     "zustand": "^4.5.2"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc && yarn post-build",
     "post-build": "./scripts/post-build.sh",
+    "build": "rm -rf dist && yarn typegen && node ./scripts/build.mjs && yarn post-build",
+    "typegen": "tsc --emitDeclarationOnly",
     "test": "vitest run --coverage"
   },
   "devDependencies": {
@@ -48,5 +49,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "a9e81f5c4560664441b3a18b3f8fe05c5db927ec"
+  "gitHead": "2d421556a0a1497abd08e18dca94f08ec3ad640b"
 }

package/dist/modal/ParaModal.js

@@ -1,281 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CpslAuthModal, defineCustomElements, generateTheme } from '@getpara/react-components';
-import { ModalContent } from './components/index.js';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useModalStore, useUserInfoStore, useThemeStore } from './stores/index.js';
-import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from './utils/steps.js';
-import { AuthLayout } from './types/modalProps.js';
-import { DEFAULTS } from './constants/defaults.js';
-import { useGoBack } from './hooks/useGoBack.js';
-import { ParaEvent } from '@getpara/web-sdk';
-import { ExternalWalletsWrapper } from './components/ExternalWalletsWrapper/ExternalWalletsWrapper.js';
-import styled from 'styled-components';
-import { useExternalWallets } from './providers/ExternalWalletContext.js';
-import { hasEmbeddedAuth, hasExternalWallet } from './utils/authLayoutHelpers.js';
-import { useModal, useWalletState } from '../provider/index.js';
-import { useStore } from '../provider/stores/useStore.js';
-import { useInternalClient } from '../provider/hooks/utils/useInternalClient.js';
-defineCustomElements();
-export const ParaModal = forwardRef((_a, ref) => {
-    var { para, isOpen } = _a, rest = __rest(_a, ["para", "isOpen"]);
-    const [isInitialized, setIsInitialized] = useState(false);
-    const setClient = useStore(state => state.setClient);
-    const client = useStore(state => state.client);
-    const { closeModal, openModal } = useModal();
-    useEffect(() => {
-        if (!client) {
-            setClient(para);
-        }
-        setIsInitialized(true);
-    }, []);
-    useEffect(() => {
-        if (!isOpen) {
-            closeModal();
-        }
-        if (isOpen) {
-            openModal();
-        }
-    }, [isOpen]);
-    if (!isInitialized) {
-        return null;
-    }
-    return _jsx(ParaModalInner, Object.assign({ ref: ref, para: para }, rest));
-});
-const ParaModalInner = forwardRef((_a, ref) => {
-    var { theme, appName, logo, disableEmailLogin = false, disablePhoneLogin = false, oAuthMethods, bareModal = false, className, currentStepOverride, externalWallets, authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL], embeddedModal, onModalStepChange, hideWallets = false, onClose } = _a, rest = __rest(_a, ["theme", "appName", "logo", "disableEmailLogin", "disablePhoneLogin", "oAuthMethods", "bareModal", "className", "currentStepOverride", "externalWallets", "authLayout", "embeddedModal", "onModalStepChange", "hideWallets", "onClose"]);
-    const modalContentRef = useRef(null);
-    const updateThemeState = useThemeStore(state => state.updateState);
-    const setWebAuthURLForLogin = useModalStore(state => state.setWebAuthURLForLogin);
-    const setWebAuthURLForCreate = useModalStore(state => state.setWebAuthURLForCreate);
-    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
-    const currentStep = useModalStore(state => state.step);
-    const setOnModalStepChange = useModalStore(state => state.setOnModalStepChange);
-    const setStep = useModalStore(state => state.setStep);
-    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
-    const hasPreviousStep = useModalStore(state => state.hasPreviousStep());
-    const setFlow = useModalStore(state => state.setFlow);
-    const setIsFullyLoggedIn = useModalStore(state => state.setIsFullyLoggedIn);
-    const goBack = useGoBack();
-    const setAuthLayout = useThemeStore(state => state.setAuthLayout);
-    const storedAuthLayout = useThemeStore(state => state.authLayout);
-    const resetModalState = useModalStore(state => state.resetState);
-    const resetUserInfoState = useUserInfoStore(state => state.resetState);
-    const setRecoveryShare = useUserInfoStore(state => state.setRecoveryShare);
-    const { disconnectExternalWallet } = useExternalWallets();
-    const { isOpen, closeModal } = useModal();
-    const para = useInternalClient();
-    const { selectedWallet, setSelectedWallet } = useWalletState();
-    const [isModalMounted, setIsModalMounted] = useState(false);
-    const [isInit, setIsInit] = useState(false);
-    useImperativeHandle(ref, () => {
-        return {
-            goBack() {
-                goBack();
-            },
-            canGoBack() {
-                return hasPreviousStep;
-            },
-            currentStep() {
-                return currentStep;
-            },
-            handleModalClose() {
-                var _a;
-                (_a = modalContentRef === null || modalContentRef === void 0 ? void 0 : modalContentRef.current) === null || _a === void 0 ? void 0 : _a.handleModalClose();
-            },
-        };
-    }, [hasPreviousStep, currentStep]);
-    // This will run on mount and on isOpen change but won't cause a rerender unless step or email changes
-    const initModal = () => __awaiter(void 0, void 0, void 0, function* () {
-        const isAccount = yield para.isFullyLoggedIn();
-        if (currentStepOverride) {
-            setStep(ModalStep[currentStepOverride.toUpperCase()]);
-        }
-        else if (isAccount) {
-            setFlow('account');
-            setStep(ModalStep.ACCOUNT_MAIN);
-            setIsFullyLoggedIn(true);
-        }
-        else {
-            if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
-                setStep(ModalStep.AUTH_MAIN);
-                setFlow();
-                setWebAuthURLForLogin();
-                setWebAuthURLForCreate();
-                setBiometricLocationHints();
-            }
-            // Disconnect external wallets if the user is not longer logged in
-            yield disconnectExternalWallet();
-            setSelectedWallet({ id: undefined, type: undefined });
-            setIsFullyLoggedIn(false);
-        }
-        switch (true) {
-            case para.isEmail:
-                setAuthInfo({ email: para.getEmail() });
-                break;
-            case para.isPhone:
-                {
-                    const { phone, countryCode } = para.getPhone();
-                    setAuthInfo({ phone, countryCode: countryCode });
-                }
-                break;
-            case para.isFarcaster:
-                setAuthInfo({ farcasterUsername: para.getFarcasterUsername() });
-                break;
-            case para.isTelegram:
-                setAuthInfo({ telegramUserId: para.telegramUserId });
-                if (!isAccount) {
-                    setStep(ModalStep.TELEGRAM_OAUTH);
-                }
-                break;
-        }
-        setIsInit(true);
-    });
-    useEffect(() => {
-        let _authLayout = authLayout;
-        // Removing unused auth layouts based on what auth methods are passed in
-        if (!(externalWallets === null || externalWallets === void 0 ? void 0 : externalWallets.length) && hasExternalWallet(authLayout)) {
-            _authLayout = _authLayout.filter(l => !l.includes('EXTERNAL'));
-        }
-        if (disableEmailLogin && disablePhoneLogin && !(oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout)) {
-            _authLayout = _authLayout.filter(l => !l.includes('AUTH'));
-        }
-        if (JSON.stringify(storedAuthLayout) !== JSON.stringify(_authLayout)) {
-            setAuthLayout(_authLayout);
-        }
-    }, [disableEmailLogin, disablePhoneLogin, oAuthMethods, externalWallets, authLayout]);
-    useEffect(() => {
-        setOnModalStepChange(onModalStepChange);
-    }, [onModalStepChange]);
-    useEffect(() => {
-        var _a;
-        updateThemeState({
-            logo,
-            appName,
-            oAuthLogoVariant: (_a = theme === null || theme === void 0 ? void 0 : theme.oAuthLogoVariant) !== null && _a !== void 0 ? _a : 'default',
-            bareModal,
-            embeddedModal,
-            hideWallets,
-        });
-    }, [logo, appName, theme === null || theme === void 0 ? void 0 : theme.oAuthLogoVariant, bareModal, embeddedModal, hideWallets]);
-    useEffect(() => {
-        if (theme) {
-            generateTheme(theme);
-            updateThemeState({ isDark: theme.mode === 'dark', theme: theme });
-        }
-    }, [theme]);
-    // Set Para instance & init on mount
-    useEffect(() => {
-        if (para) {
-            initModal();
-            if (bareModal) {
-                setIsModalMounted(true);
-            }
-        }
-        else {
-            console.error('A Para instance must be provided.');
-        }
-    }, []);
-    // Init modal with proper steps on isOpen change
-    useEffect(() => {
-        if (isOpen && para) {
-            initModal();
-        }
-    }, [isOpen]);
-    const updateActiveWallet = () => {
-        if (!(selectedWallet === null || selectedWallet === void 0 ? void 0 : selectedWallet.id) || !para.findWallet(selectedWallet === null || selectedWallet === void 0 ? void 0 : selectedWallet.id)) {
-            const defaultWallet = para.findWallet(undefined, undefined, { forbidPregen: true });
-            setSelectedWallet({ id: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.id, type: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.type });
-        }
-    };
-    useEffect(() => {
-        updateActiveWallet();
-    }, [para]);
-    useEffect(() => {
-        // TODO: remove this redundant listener once we force the use of the ParaProvider
-        window.addEventListener(ParaEvent.WALLETS_CHANGE_EVENT, updateActiveWallet);
-        window.addEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
-        return () => {
-            window.removeEventListener(ParaEvent.WALLETS_CHANGE_EVENT, updateActiveWallet);
-            window.removeEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
-        };
-    }, []);
-    const handleClose = () => {
-        closeModal();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    };
-    const handleModalEntering = () => {
-        setIsModalMounted(true);
-    };
-    const handleModalExited = () => __awaiter(void 0, void 0, void 0, function* () {
-        setIsModalMounted(false);
-        if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
-            resetModalState();
-            resetUserInfoState();
-            setRecoveryShare(null);
-        }
-        else if (RESET_TO_ACCOUNT_STEPS.includes(currentStep)) {
-            setStep(ModalStep.LOGIN_DONE);
-        }
-        if (para) {
-            yield initModal();
-            para.exitLoops();
-        }
-        setIsInit(false);
-    });
-    if (!para) {
-        console.error('A Para instance is required.');
-        return null;
-    }
-    if (!(storedAuthLayout === null || storedAuthLayout === void 0 ? void 0 : storedAuthLayout.length)) {
-        // Checking props here to verify a valid configuration was passed in.
-        // Doing this since we auto adjust the auth layouts based on passed in auth method props, if an empty storedAuthLayout was triggered based on invalid props we want to be sure the message reflects that correctly.
-        const hasExternalWalletError = !(externalWallets === null || externalWallets === void 0 ? void 0 : externalWallets.length) && hasExternalWallet(authLayout);
-        const hasEmbeddedWalletError = disableEmailLogin && disablePhoneLogin && !(oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout);
-        if (hasExternalWalletError || hasEmbeddedWalletError) {
-            if (hasExternalWalletError) {
-                console.error('At least one external wallet must be provided if external wallet auth is enabled.');
-            }
-            if (hasEmbeddedWalletError) {
-                console.error('At least one login method (email, phone or OAuth) must be provided if embedded wallet auth is enabled.');
-            }
-        }
-        else {
-            console.error('At least one auth layout selection is required.');
-        }
-        return null;
-    }
-    return (_jsx(ExternalWalletsWrapper, { wallets: externalWallets, children: _jsx(StyledAuthModal, { enterTransitionDuration: DEFAULTS.ANIMATION_DURATION, exitTransitionDuration: DEFAULTS.ANIMATION_DURATION, open: isOpen, onCpslModalExited: handleModalExited, onCpslModalEntering: handleModalEntering, onCpslModalRequestClose: handleClose, noOverlay: bareModal, className: className, "data-testid": "modal", "$embeddedModal": embeddedModal, children: isModalMounted && ((isInit && embeddedModal) || !embeddedModal) && (_jsx(ModalContent, Object.assign({ oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, onClose: handleClose }, rest))) }) }));
-});
-const StyledAuthModal = styled(CpslAuthModal) `
-  ${({ $embeddedModal }) => $embeddedModal &&
-    `
-    &::part(modal-body-card) {
-    --card-box-shadow: none;
-    --card-border-width: 0px;
-  };
-
-  &::part(modal-footer) {
-    --card-box-shadow: none;
-    --card-border-width: 0px;
-  };`}
-`;

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

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

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

@@ -1,147 +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 { 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 { 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';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-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 = useInternalClient();
-    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;
-`;