@getpara/react-sdk 1.1.0 → 1.3.0

package/dist/modal/components/ExternalWalletsWrapper/ExternalWalletsWrapper.js

@@ -1,119 +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 } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { ExternalWalletProvider } from '../../providers/ExternalWalletContext.js';
-import { EvmExternalWalletContext, EvmExternalWalletProvider, } from '../../providers/EvmExternalWalletContextStub.js';
-import { CosmosWallet, EvmWallet, SolanaWallet } from '../../types/externalWallets.js';
-import { SolanaExternalWalletContext, SolanaExternalWalletProvider, } from '../../providers/SolanaExternalWalletContextStub.js';
-import { CosmosExternalWalletContext, CosmosExternalWalletProvider, } from '../../providers/CosmosExternalWalletContextStub.js';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { useExternalWalletProviderStore } from '../../stores/externalWalletProvider/useExternalWalletProviderStore.js';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-export const ExternalWalletsWrapper = ({ children, wallets }) => {
-    const para = useInternalClient();
-    const resetModalState = useModalStore(state => state.resetState);
-    const resetUserInfoState = useUserInfoStore(state => state.resetState);
-    const StoredEvmProvider = useExternalWalletProviderStore(state => state.EvmProvider);
-    const storedEvmContext = useExternalWalletProviderStore(state => state.evmContext);
-    const StoredSolanaProvider = useExternalWalletProviderStore(state => state.SolanaProvider);
-    const storedSolanaContext = useExternalWalletProviderStore(state => state.solanaContext);
-    const StoredCosmosProvider = useExternalWalletProviderStore(state => state.CosmosProvider);
-    const storedCosmosContext = useExternalWalletProviderStore(state => state.cosmosContext);
-    // EVM
-    const [EvmProvider, setEvmProvider] = useState(null);
-    const [evmContext, setEvmContext] = useState(null);
-    // Solana
-    const [SolanaProvider, setSolanaProvider] = useState(null);
-    const [solanaContext, setSolanaContext] = useState(null);
-    // Cosmos
-    const [CosmosProvider, setCosmosProvider] = useState(null);
-    const [cosmosContext, setCosmosContext] = useState(null);
-    useEffect(() => {
-        const loadProviders = () => __awaiter(void 0, void 0, void 0, function* () {
-            let newEvmContext = EvmExternalWalletContext;
-            let newEvmProvider = EvmExternalWalletProvider;
-            let newSolanaContext = SolanaExternalWalletContext;
-            let newSolanaProvider = SolanaExternalWalletProvider;
-            let newCosmosContext = CosmosExternalWalletContext;
-            let newCosmosProvider = CosmosExternalWalletProvider;
-            if (!(wallets === null || wallets === void 0 ? void 0 : wallets.length)) {
-                newEvmContext = EvmExternalWalletContext;
-                newEvmProvider = EvmExternalWalletProvider;
-                newSolanaContext = SolanaExternalWalletContext;
-                newSolanaProvider = SolanaExternalWalletProvider;
-                newCosmosContext = CosmosExternalWalletContext;
-                newCosmosProvider = CosmosExternalWalletProvider;
-            }
-            else {
-                for (let i = 0; i < wallets.length; i++) {
-                    const wallet = wallets[i];
-                    // Handle EVM Wallets
-                    if (wallet in EvmWallet) {
-                        if (!StoredEvmProvider || !storedEvmContext) {
-                            throw new Error('@getpara/evm-wallet-connectors is required to use an external EVM wallet.');
-                        }
-                        else {
-                            newEvmContext = storedEvmContext;
-                            newEvmProvider = StoredEvmProvider;
-                        }
-                    }
-                    // Handle Solana Wallets
-                    if (wallet in SolanaWallet) {
-                        if (!StoredSolanaProvider || !storedSolanaContext) {
-                            throw new Error('@getpara/solana-wallet-connectors is required to use an external Solana wallet.');
-                        }
-                        else {
-                            newSolanaContext = storedSolanaContext;
-                            newSolanaProvider = StoredSolanaProvider;
-                        }
-                    }
-                    // Handle Cosmos Wallets
-                    if (wallet in CosmosWallet) {
-                        if (!StoredCosmosProvider || !storedCosmosContext) {
-                            throw new Error('@getpara/cosmos-wallet-connectors is required to use an external Cosmos wallet.');
-                        }
-                        else {
-                            newCosmosContext = storedCosmosContext;
-                            newCosmosProvider = StoredCosmosProvider;
-                        }
-                    }
-                }
-            }
-            setEvmContext(newEvmContext);
-            setEvmProvider(() => newEvmProvider);
-            setSolanaContext(newSolanaContext);
-            setSolanaProvider(() => newSolanaProvider);
-            setCosmosContext(newCosmosContext);
-            setCosmosProvider(() => newCosmosProvider);
-        });
-        loadProviders();
-    }, [
-        wallets,
-        storedEvmContext,
-        StoredEvmProvider,
-        storedSolanaContext,
-        StoredSolanaProvider,
-        storedCosmosContext,
-        StoredCosmosProvider,
-    ]);
-    const handleSwitchWallet = ({ address, error }) => {
-        // If we error on switch wallets we logged out the Para instance so we need to reset the modal state
-        // Or if we don't return an address on switch wallets we logged out the Para instance so we need to reset the modal state
-        if (error || !address) {
-            resetModalState();
-            resetUserInfoState();
-        }
-    };
-    if (!para || !EvmProvider || !SolanaProvider || !CosmosProvider) {
-        return null;
-    }
-    return (_jsx(EvmProvider, { para: para, onSwitchWallet: handleSwitchWallet, children: _jsx(SolanaProvider, { para: para, onSwitchWallet: handleSwitchWallet, children: _jsx(CosmosProvider, { para: para, onSwitchWallet: handleSwitchWallet, children: _jsx(ExternalWalletProvider, { evmContext: evmContext, solanaContext: solanaContext, cosmosContext: cosmosContext, walletSort: wallets, children: children }) }) }) }));
-};

package/dist/modal/components/Footer/Footer.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styled } from 'styled-components';
-import { CpslButton, CpslIcon, CpslText } from '@getpara/react-components';
-import { useModalStore } from '../../stores/index.js';
-import { PARA_CONNECT, PARA_TERMS_AND_CONDITIONS } from '../../constants/constants.js';
-import { useMemo } from 'react';
-import { getStepHasFooter } from '../../utils/steps.js';
-export const Footer = () => {
-    const isAccount = useModalStore(state => state.isAccount());
-    const currentStep = useModalStore(state => state.step);
-    const showFooter = isAccount || getStepHasFooter(currentStep);
-    const Content = useMemo(() => {
-        if (isAccount) {
-            return (_jsxs(ConnectContainer, { children: [_jsxs(ConnectText, { variant: "bodyS", color: "secondary", weight: "medium", children: ["Access all your wallet\u2019s features at", ' ', _jsx("a", { href: PARA_CONNECT, target: "blank", children: _jsx(ClickableText, { variant: "bodyS", weight: "medium", children: "Para Connect" }) })] }), _jsx(CpslButton, { as: "a", href: PARA_CONNECT, target: "blank", variant: "ghost", children: _jsx(RightChevron, { icon: "chevronUp" }) })] }));
-        }
-        return (_jsxs(_Fragment, { children: [_jsxs(InlineText, { variant: "body2XS", color: "secondary", weight: "medium", children: ["By logging in you agree to our", ' ', _jsx("a", { href: PARA_TERMS_AND_CONDITIONS, target: "blank", children: _jsx(ClickableText, { variant: "body2XS", weight: "medium", children: "Terms & Conditions" }) })] }), _jsxs(PoweredByContainer, { children: [_jsx(InlineText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Powered by" }), _jsx(ParaLogo, { icon: "para" })] })] }));
-    }, [isAccount]);
-    if (!showFooter) {
-        return null;
-    }
-    return (_jsx(FooterContainer, { slot: "footer", children: _jsx(FooterContentContainer, { children: Content }) }));
-};
-const FooterContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 0px;
-`;
-const FooterContentContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-`;
-const PoweredByContainer = styled.div `
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  justify-content: center;
-`;
-const ConnectContainer = styled.div `
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-`;
-const RightChevron = styled(CpslIcon) `
-  transform: rotate(90deg);
-
-  /* --icon-color: var(--cpsl-color-text-tertiary); */
-  --height: 24px;
-  --width: 24px;
-`;
-const InlineText = styled(CpslText) `
-  text-align: center;
-  display: inline-block;
-`;
-const ConnectText = styled(InlineText) `
-  line-height: 20px;
-`;
-const ClickableText = styled(InlineText) `
-  cursor: pointer;
-  display: inline-block;
-`;
-const ParaLogo = styled(CpslIcon) `
-  display: inline-block;
-  --icon-color: var(--cpsl-color-text-secondary);
-  --width: 49px;
-  --height: auto;
-`;

package/dist/modal/components/Header/Header.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from 'styled-components';
-import { useStepTitle } from './hooks/useStepTitle.js';
-import { CenteredText } from '../common.js';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useModalStore } from '../../stores/index.js';
-import { BODY_MOTION_VARIANTS, BODY_TRANSITION } from '../../constants/constants.js';
-export const Header = () => {
-    const { title } = useStepTitle();
-    const stepDirection = useModalStore(state => state.stepDirection);
-    const currentStep = useModalStore(state => state.step);
-    return (_jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: stepDirection, children: _jsx(Container, { custom: stepDirection, variants: BODY_MOTION_VARIANTS, initial: "enter", animate: "center", exit: "exit", transition: BODY_TRANSITION, slot: "header", id: "header", children: _jsx(CenteredText, { weight: "semiBold", color: "secondary", children: title }) }, ['ADD_FUNDS_BUY', 'ADD_FUNDS_RECEIVE', 'ADD_FUNDS_WITHDRAW'].includes(currentStep) ? 'ADD_FUNDS' : currentStep) }));
-};
-const Container = styled(motion.div) `
-  position: absolute;
-  top: 16px;
-  width: 100%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-`;

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -1,42 +0,0 @@
-import { useMemo } from 'react';
-import { useModalStore } from '../../../stores/modal/useModalStore.js';
-import { ModalStep } from '../../../utils/steps.js';
-import { useExternalWallets } from '../../../providers/ExternalWalletContext.js';
-import { useThemeStore } from '../../../stores/index.js';
-export const useStepTitle = () => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const isLogin = useModalStore(state => state.isLogin());
-    const currentStep = useModalStore(state => state.step);
-    const { chainId } = useExternalWallets();
-    const titles = useMemo(() => ({
-        [ModalStep.AUTH_MAIN]: '',
-        [ModalStep.AUTH_MORE]: 'Sign Up or Log In',
-        [ModalStep.EX_WALLET_MORE]: 'Connect Wallet',
-        [ModalStep.VERIFICATIONS]: 'Sign Up',
-        [ModalStep.AWAITING_OAUTH]: isLogin ? 'Login' : 'Sign Up',
-        [ModalStep.FARCASTER_OAUTH]: isLogin ? 'Login' : 'Sign Up',
-        [ModalStep.BIOMETRIC_CREATION]: 'Sign Up',
-        [ModalStep.PASSWORD_CREATION]: 'Sign Up',
-        [ModalStep.AWAITING_BIOMETRIC_CREATION]: 'Sign Up',
-        [ModalStep.AWAITING_WALLET_CREATION]: isLogin ? 'Login' : 'Sign Up',
-        [ModalStep.AWAITING_PASSWORD_CREATION]: 'Sign Up',
-        [ModalStep.WALLET_CREATION_DONE]: hideWallets ? 'Account Created' : 'Wallet Created',
-        [ModalStep.SECRET]: isLogin ? 'Login' : 'Sign Up',
-        [ModalStep.BIOMETRIC_LOGIN]: 'Login',
-        [ModalStep.AWAITING_PASSWORD_LOGIN]: 'Login',
-        [ModalStep.AWAITING_BIOMETRIC_LOGIN]: 'Login',
-        [ModalStep.LOGIN_DONE]: '',
-        [ModalStep.SETUP_2FA]: '2FA',
-        [ModalStep.VERIFY_2FA]: '2FA',
-        [ModalStep.TWO_FACTOR_DONE]: '2FA',
-        [ModalStep.ADD_FUNDS_BUY]: '',
-        [ModalStep.ADD_FUNDS_RECEIVE]: '',
-        [ModalStep.ADD_FUNDS_WITHDRAW]: '',
-        [ModalStep.ADD_FUNDS_AWAITING]: '',
-        [ModalStep.ADD_FUNDS_SUCCESS]: '',
-        [ModalStep.ADD_FUNDS_FAILURE]: '',
-        [ModalStep.ACCOUNT_MAIN]: '',
-        [ModalStep.CHAIN_SWITCH]: '',
-    }), [isLogin, chainId, hideWallets]);
-    return { title: titles[currentStep] };
-};

package/dist/modal/components/Hero/Hero.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CpslHero, CpslIcon, CpslIdenticon } from '@getpara/react-components';
-import styled from 'styled-components';
-import { ModalStep } from '../../utils/steps.js';
-import { useModalStore } from '../../stores/index.js';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { NETWORK_NOT_SUPPORTED_ERROR } from '../../constants/constants.js';
-import { useEffect, useState } from 'react';
-import { isMobile } from '@getpara/web-sdk';
-import { useActiveWallet } from '../../hooks/useActiveWallet.js';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-const getStepConfig = ({ externalWalletError, }) => {
-    var _a;
-    return ({
-        [ModalStep.EX_WALLET_SELECTED]: {
-            variant: 'externalWalletConnection',
-            topOffset: 40,
-            spacerHeight: 158,
-            hideFadeOut: true,
-        },
-        [ModalStep.CHAIN_SWITCH]: {
-            variant: ((_a = externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === NETWORK_NOT_SUPPORTED_ERROR ? 'failed' : 'externalWalletConnection',
-            topOffset: 20,
-            spacerHeight: 158,
-            hideFadeOut: true,
-        },
-        [ModalStep.ACCOUNT_MAIN]: {
-            variant: 'customContent',
-            topOffset: 0,
-            spacerHeight: 104,
-            hideFadeOut: true,
-        },
-        [ModalStep.FARCASTER_OAUTH]: {
-            variant: 'externalWalletConnection',
-            topOffset: 40,
-            spacerHeight: 158,
-            hideFadeOut: true,
-        },
-    });
-};
-export const Hero = () => {
-    const para = useInternalClient();
-    const { wallet: connector, walletDisplayHelpers, avatar } = useExternalWallets();
-    const step = useModalStore(state => state.step);
-    const externalWalletError = useModalStore(state => state.externalWalletError);
-    const activeWallet = useActiveWallet();
-    const [currentStep, setCurrentStep] = useState(step);
-    const stepConfig = getStepConfig({
-        externalWalletError,
-    })[currentStep];
-    // Watching the step here to make the animation in/out of the hero look correct
-    useEffect(() => {
-        const prevStepConfig = getStepConfig({
-            externalWalletError,
-        })[currentStep];
-        const newStepConfig = getStepConfig({
-            externalWalletError,
-        })[step];
-        const delay = newStepConfig && prevStepConfig ? 0 : newStepConfig && !prevStepConfig ? 0 : 200;
-        setTimeout(() => {
-            setCurrentStep(step);
-        }, delay);
-    }, [step]);
-    const isExternalStep = currentStep === ModalStep.EX_WALLET_SELECTED;
-    const isChainSwitchStep = currentStep === ModalStep.CHAIN_SWITCH;
-    const isAccountStep = currentStep === ModalStep.ACCOUNT_MAIN;
-    const isFarcasterStep = currentStep === ModalStep.FARCASTER_OAUTH;
-    const { showExtension, isCosmosMobileWallet } = walletDisplayHelpers;
-    // Hide if:
-    // 1. On a step with no hero config
-    // 2. On the external wallet step and not showing the extension connection screen
-    // 3. On the network switch step on web for Cosmos mobile connectors
-    // 4. On the farcaster step on desktop
-    const shouldHide = !stepConfig ||
-        (!isMobile() && isExternalStep && !showExtension) ||
-        (!isMobile() && isChainSwitchStep && isCosmosMobileWallet) ||
-        (!isMobile() && isFarcasterStep);
-    const { variant, topOffset, spacerHeight, hideFadeOut } = stepConfig !== null && stepConfig !== void 0 ? stepConfig : {};
-    return (_jsxs(_Fragment, { children: [_jsx(Container, { "$top": -45 + topOffset, children: shouldHide ? null : (_jsxs(StyledHero, { "$isAccount": isAccountStep, hideFadeOut: hideFadeOut, variant: variant, height: 480, withDefaultTheme: true, children: [(isExternalStep || isChainSwitchStep) && _jsx(WalletLogo, { slot: "connectionLeft", src: connector === null || connector === void 0 ? void 0 : connector.iconUrl }), isFarcasterStep && _jsx(WalletLogo, { slot: "connectionLeft", icon: "farcasterBrand" }), isAccountStep &&
-                            (avatar ? (_jsx(Avatar, { slot: "image", src: avatar })) : activeWallet ? (_jsx(IconAvatar, { slot: "image", size: "100%", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) })) : null)] })) }), !shouldHide && _jsx(Spacer, { "$height": spacerHeight })] }));
-};
-const Container = styled.div `
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-
-  top: ${({ $top }) => `${$top}px`};
-`;
-const Spacer = styled.div `
-  height: ${({ $height }) => `${$height}px`};
-`;
-const WalletLogo = styled(CpslIcon) `
-  --height: 60px;
-  --width: 60px;
-`;
-const Avatar = styled.img `
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-`;
-const IconAvatar = styled(CpslIdenticon) `
-  border-radius: 1000px;
-`;
-const StyledHero = styled(CpslHero) `
-  ${({ $isAccount }) => $isAccount &&
-    `
-      --ring-3-size: 560px;
-      --ring-2-size: 402px;
-      --ring-1-size: 228px;
-      --ring-0-size: 104px;
-      
-      --default-theme-ring-3-opacity: 0.02;
-      --default-theme-ring-2-opacity: 0.04;
-      --default-theme-ring-1-opacity: 0.06;
-      --default-theme-ring-0-opacity: 0.1;
-  `}
-`;

package/dist/modal/components/IFrameStep/IFrameStep.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { IFrameSteps } from '../../utils/steps.js';
-import styled from 'styled-components';
-import { SpinnerContainer } from '@getpara/react-common';
-import { CpslSpinner } from '@getpara/react-components';
-import { MOBILE_SIZE } from '../../constants/constants.js';
-export const IFrameStep = () => {
-    const iFrameUrl = useModalStore(state => state.iFrameUrl);
-    const setIsReady = useModalStore(state => state.setIsIFrameReady);
-    const isReady = useModalStore(state => state.isIFrameReady);
-    const currentStep = useModalStore(state => state.step);
-    const embeddedModal = useThemeStore(state => state.embeddedModal);
-    return (_jsxs(OuterContainer, { "$isVisible": IFrameSteps.includes(currentStep), "$embeddedModal": embeddedModal, children: [_jsx(Container, { "$isReady": isReady, children: _jsx("iframe", { src: iFrameUrl, onLoad: () => {
-                        setIsReady(true);
-                    } }) }), !isReady && (_jsx(SpinnerContainer, { style: { width: '100%', height: '100%', flex: 1 }, children: _jsx(CpslSpinner, { size: 100 }) }))] }));
-};
-const OuterContainer = styled.div `
-  height: ${({ $isVisible }) => ($isVisible ? '100%' : '0px')};
-  width: ${({ $isVisible }) => ($isVisible ? '100%' : '0px')};
-  flex: ${({ $isVisible }) => ($isVisible ? 1 : 'auto')};
-  padding: ${({ $embeddedModal, $isVisible }) => (!$isVisible ? '0px' : $embeddedModal ? '12px 0px 0px' : '72px 72px 32px')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  @media (max-width: ${MOBILE_SIZE}px) {
-    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? '0px' : $embeddedModal ? '12px 0px 0px' : '72px 16px 0px'};
-  }
-`;
-const Container = styled.div `
-  height: 100%;
-  width: 100%;
-  display: ${({ $isReady }) => ($isReady ? 'block' : 'none')};
-
-  & > iframe {
-    height: 360px;
-    width: 100%;
-    border: none;
-  }
-`;

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { Heading, HeroIcon, StepContainer } from '../common.js';
-import { ExternalWalletCard, WalletCard, WalletCards } from '../WalletCard/WalletCard.js';
-import { useThemeStore } from '../../stores/index.js';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-export const LoginDoneStep = ({ onClose }) => {
-    var _a;
-    const para = useInternalClient();
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    useEffect(() => {
-        setTimeout(() => {
-            onClose();
-        }, 1600);
-    }, []);
-    return (_jsxs(StepContainer, { children: [_jsx(HeroIcon, { icon: "checkCircleFilled" }), _jsx(Heading, { variant: "headingS", weight: "bold", children: "Connected" }), !hideWallets && (_jsx(WalletCards, { children: para.isUsingExternalWallet() ? (_jsx(ExternalWalletCard, { address: (_a = para.currentExternalWalletAddresses) === null || _a === void 0 ? void 0 : _a[0] })) : (para.currentWalletIdsArray.map(([id, type]) => {
-                    return _jsx(WalletCard, { id: id, type: type }, `${id}-${type}`);
-                })) }))] }));
-};