@getpara/react-sdk 0.1.0

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

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

package/dist/modal/components/ExternalWalletStep/config.d.ts

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

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

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

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

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

package/dist/modal/components/ExternalWallets/ExternalWallets.js

@@ -0,0 +1,142 @@
+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 styled from 'styled-components';
+import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
+import { StyledCpslTileButton } from '../common.js';
+import { CpslButton, CpslIcon, CpslInput, CpslText } from '@getpara/react-components';
+import { useModalStore, useThemeStore } from '../../stores/index.js';
+import { ModalStep } from '../../utils/steps.js';
+import { useState } from 'react';
+import { hasEmbeddedAuth } from '../../utils/authLayoutHelpers.js';
+const HAS_MORE_LENGTH = 3;
+export const ExternalWallets = () => {
+    const { wallets, connectExternalWallet } = useExternalWallets();
+    const setSelectedExternalWalletId = useModalStore(state => state.setSelectedExternalWalletId);
+    const setStep = useModalStore(state => state.setStep);
+    const showAll = useModalStore(state => state.step === ModalStep.EX_WALLET_MORE);
+    const authLayout = useThemeStore(state => state.authLayout);
+    const [search, setSearch] = useState('');
+    const hasMore = wallets.length > HAS_MORE_LENGTH;
+    const walletsToShow = showAll || !hasMore
+        ? search
+            ? wallets.filter(w => w.name.toLowerCase().includes(search.toLowerCase()))
+            : wallets
+        : wallets.slice(0, HAS_MORE_LENGTH);
+    const showMoreButton = !showAll && hasMore;
+    const handleShowAll = () => {
+        setStep(ModalStep.EX_WALLET_MORE);
+    };
+    const handleParaClick = () => {
+        setStep(ModalStep.AUTH_MORE);
+    };
+    const handleWalletClick = (wallet) => () => {
+        setSelectedExternalWalletId(wallet.id);
+        setStep(ModalStep.EX_WALLET_SELECTED);
+        if (wallet.installed) {
+            connectExternalWallet(wallet);
+        }
+        else if (wallet.isMobile) {
+            connectExternalWallet(wallet, true);
+        }
+    };
+    return (_jsxs(Container, { "$maxHeight": showAll, children: [showAll && (_jsxs(_Fragment, { children: [_jsx(SearchInputWrapper, { children: _jsx(SearchInput, { placeholder: "Search for your wallet", onCpslInput: (e) => __awaiter(void 0, void 0, void 0, function* () {
+                                setSearch(e.target.value);
+                            }), value: search, style: { width: '100%' }, children: _jsx(SearchIcon, { slot: "start", icon: "search" }) }) }), hasEmbeddedAuth(authLayout) && (_jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleParaClick, children: _jsxs(WalletButtonOuterContainer, { children: [_jsxs(WalletButtonInnerContainer, { children: [_jsx(CpslIcon, { slot: "start", icon: "paraIcon" }), _jsx(CpslText, { weight: "medium", children: "Para" })] }), _jsx(Badge, { "$show": true, "$variant": "installed", children: _jsx(CpslText, { variant: "body2XS", weight: "medium", children: "Available" }) })] }) }))] })), walletsToShow.map(wallet => showAll ? (_jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: handleWalletClick(wallet), children: _jsxs(WalletButtonOuterContainer, { children: [_jsxs(WalletButtonInnerContainer, { children: [_jsx(CpslIcon, { slot: "start", src: wallet.iconUrl }), _jsx(CpslText, { weight: "medium", children: wallet.name })] }), _jsx(Badge, { "$show": wallet.isMobile || wallet.installed, "$variant": wallet.installed ? 'installed' : 'mobile', children: _jsx(CpslText, { variant: "body2XS", weight: "medium", children: wallet.installed ? 'Installed' : 'Mobile' }) })] }) }, wallet.id)) : (_jsx(WalletTileButton, { src: wallet.iconUrl, onClick: handleWalletClick(wallet), children: _jsxs(TileButtonInnerContainer, { children: [wallet.installed && _jsx(InstalledIndicator, {}), _jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: wallet.name })] }) }, wallet.id))), showMoreButton && (_jsxs(CpslButton, { variant: "tertiary", fullWidth: true, onClick: handleShowAll, children: [_jsx(CpslIcon, { slot: "start", icon: "wallet" }), "More Wallets"] })), showAll && _jsx(BlurContainer, {})] }));
+};
+const Container = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  max-height: ${({ $maxHeight }) => ($maxHeight ? '348px' : 'none')};
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+`;
+const WalletTileButton = styled(StyledCpslTileButton) `
+  flex: 1;
+`;
+const WalletButtonOuterContainer = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+`;
+const WalletButtonInnerContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  cpsl-icon {
+    --icon-color: var(--cpsl-color-contrast);
+  }
+  cpsl-text {
+    &::part(text-element) {
+      color: var(--cpsl-color-contrast);
+    }
+  }
+`;
+const Badge = styled.div `
+  visibility: ${({ $show }) => ($show ? 'visible' : 'hidden')};
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: ${({ $variant }) => $variant === 'installed' ? 'var(--cpsl-color-utility-green)' : 'var(--cpsl-color-text-primary)'};
+  cpsl-text {
+    &::part(text-element) {
+      color: ${({ $variant }) => $variant === 'installed' ? 'var(--cpsl-color-utility-green)' : 'var(--cpsl-color-text-primary)'};
+    }
+  }
+`;
+const InstalledIndicator = styled.span `
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: var(--cpsl-color-utility-green);
+`;
+const TileButtonInnerContainer = styled.div `
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const SearchIcon = styled(CpslIcon) `
+  --icon-color: var(--cpsl-color-contrast);
+`;
+const SearchInputWrapper = styled.div `
+  width: 100%;
+  background-color: var(--cpsl-color-background-0);
+
+  position: sticky;
+  top: 0;
+  padding-bottom: 4px;
+  margin-bottom: -4px;
+`;
+const SearchInput = styled(CpslInput) `
+  width: 100%;
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: var(--cpsl-color-background-8);
+`;
+const BlurContainer = styled.div `
+  position: sticky;
+  height: 56px;
+  width: 100%;
+  bottom: 0;
+
+  background: linear-gradient(0deg, var(--cpsl-color-background-0) 0%, rgba(234, 239, 211, 0) 100%);
+  pointer-events: none;
+`;

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { TExternalWallet } from '../../types/externalWallets.js';
+interface ExternalWalletsWrapperProps extends PropsWithChildren {
+    wallets?: TExternalWallet[];
+}
+export declare const ExternalWalletsWrapper: ({ children, wallets }: ExternalWalletsWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,118 @@
+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 { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { useExternalWalletProviderStore } from '../../stores/externalWalletProvider/useExternalWalletProviderStore.js';
+export const ExternalWalletsWrapper = ({ children, wallets }) => {
+    const para = useParaStore(state => state.para);
+    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.d.ts

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+export declare const useStepTitle: () => {
+    title: any;
+};

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

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

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