@getpara/react-sdk 1.2.0 → 1.3.1

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

@@ -1,159 +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 } from "react/jsx-runtime";
-import { CpslIdenticon, CpslSelect, CpslSelectItem, CpslText } from '@getpara/react-components';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import styled from 'styled-components';
-import { useThemeStore } from '../../stores/index.js';
-import { truncateAddress, WalletType } from '@getpara/web-sdk';
-import { useEffect, useRef } from 'react';
-import { useDropdownPosition } from '../AuthInput/hooks/useDropdownPosition.js';
-import { MOBILE_SIZE } from '../../constants/constants.js';
-import { useActiveWallet } from '../../hooks/useActiveWallet.js';
-import { useWalletState } from '../../../provider/index.js';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-const getValue = (id, type) => {
-    return id && type ? `${id}~${type}` : undefined;
-};
-const WALLET_TYPES = {
-    [WalletType.EVM]: 'EVM',
-    [WalletType.SOLANA]: 'Solana',
-    [WalletType.COSMOS]: 'Cosmos',
-};
-export const ChainSelect = () => {
-    var _a, _b;
-    const containerRef = useRef(null);
-    const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-    const activeWallet = useActiveWallet();
-    const { switchChain, chainId, chains, chainIdSwitchingTo } = useExternalWallets();
-    useEffect(() => {
-        if (dropdownMaxHeight && chainId) {
-            resize();
-        }
-    }, [chainId, chainIdSwitchingTo, dropdownMaxHeight]);
-    const handleChainChange = (chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        yield switchChain(chainId);
-    });
-    if (!activeWallet || !activeWallet.isExternal || activeWallet.type === WalletType.SOLANA) {
-        return null;
-    }
-    const chainIdToUse = chainIdSwitchingTo !== null && chainIdSwitchingTo !== void 0 ? chainIdSwitchingTo : chainId;
-    const selectedChainName = (_a = chains.find(c => c.id.toString() === chainIdToUse)) === null || _a === void 0 ? void 0 : _a.name;
-    return (_jsx(Container, { children: _jsx(SelectContainer, { ref: containerRef, id: "inputContainer", children: _jsxs(StyledSelect, { selectedValue: (_b = chainIdToUse === null || chainIdToUse === void 0 ? void 0 : chainIdToUse.toString()) !== null && _b !== void 0 ? _b : '', onCpslSelectValueChange: e => {
-                    handleChainChange(e.detail);
-                }, showFormattedSelectedItem: true, placeholder: "Choose chain...", anchorElId: "inputContainer", dropdownMaxHeight: dropdownMaxHeight, "$width": dropdownWidth, "$top": mobileAnchor + 16 + 1, autoWidth: true, selectedItemVariant: "bodyXS", children: [chainIdToUse && (_jsx(ChainName, { variant: "bodyXS", color: "contrast", slot: "selected-item", children: selectedChainName })), chains === null || chains === void 0 ? void 0 : chains.map(chain => (_jsx(StyledSelectItem, { slot: "items", value: chain.id.toString(), children: _jsx(ChainName, { variant: "bodyXS", color: "contrast", children: chain.name }) }, chain.id)))] }) }) }));
-};
-function getName(para, { type, isExternal, name, isMenu = false, hideWallets = false, }) {
-    if (para.isMultiWallet) {
-        return (name !== null && name !== void 0 ? name : `${isExternal ? 'External ' : ''}${WALLET_TYPES[type]}${!hideWallets && (isMenu || isExternal) ? ' Wallet' : ''}`);
-    }
-    return hideWallets ? 'My Account' : name || 'My Wallet';
-}
-export const AccountSelect = () => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const para = useInternalClient();
-    const containerRef = useRef(null);
-    const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
-    const { setSelectedWallet } = useWalletState();
-    const activeWallet = useActiveWallet();
-    const ActiveWalletNode = activeWallet ? (_jsxs(FlexRow, { slot: "selected-item", children: [_jsx(CpslIdenticon, { variant: "avatar", size: "14px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }), _jsx(WalletName, { variant: "bodyXS", color: "contrast", children: getName(para, Object.assign(Object.assign({}, activeWallet), { hideWallets })) }), !hideWallets && (_jsx(CpslText, { variant: "bodyXS", color: "secondary", children: para.getDisplayAddress(activeWallet.id, { truncate: true, addressType: activeWallet.type }) }))] })) : null;
-    useEffect(() => {
-        if (dropdownMaxHeight && (activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.address)) {
-            resize();
-        }
-    }, [activeWallet, para.availableWallets, dropdownMaxHeight]);
-    return (_jsx(Container, { children: _jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: para.availableWallets.length > 1 ? (_jsxs(StyledSelect, { selectedValue: getValue(activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.id, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type), onCpslSelectValueChange: e => {
-                    const [id, type] = e.detail.split('~');
-                    setSelectedWallet({ id, type: type });
-                }, showFormattedSelectedItem: true, placeholder: "Choose wallet...", anchorElId: "addressInputContainer", dropdownMaxHeight: dropdownMaxHeight, "$width": dropdownWidth, "$top": mobileAnchor + 16 + 1, autoWidth: true, selectedItemVariant: "bodyXS", children: [activeWallet && ActiveWalletNode, para.availableWallets.map(({ address, name: _name, id, type, isExternal }) => {
-                        const key = getValue(id, type);
-                        const name = _name !== null && _name !== void 0 ? _name : getName(para, { type, isExternal, isMenu: true, hideWallets });
-                        return (_jsx(StyledSelectItem, { slot: "items", value: key, children: _jsxs(FlexRow, { children: [_jsx(CpslIdenticon, { size: "40px", hash: para.getIdenticonHash(id, type) }), _jsxs(FlexCol, { children: [name && (_jsx(CpslText, { variant: "bodyS", color: "contrast", children: name })), !hideWallets && (_jsx(CpslText, { variant: "bodyXS", color: "secondary", children: truncateAddress(address, type, { prefix: para.cosmosPrefix }) }))] })] }) }, key));
-                    })] })) : (ActiveWalletNode) }) }));
-};
-const Container = styled.div `
-  flex: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`;
-const FlexRow = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const FlexCol = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-const WalletName = styled(CpslText) `
-  white-space: nowrap;
-`;
-const SelectContainer = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 1000px;
-  background-color: var(--cpsl-color-background-8);
-  padding: 8px;
-`;
-const ChainName = styled(CpslText) `
-  max-width: 150px;
-  text-transform: capitalize;
-
-  &::part(text-element) {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`;
-const StyledSelect = styled(CpslSelect) `
-  --container-height: auto;
-  --container-border-width: 0px;
-  --container-padding-end: 0px;
-  --container-padding-start: 0px;
-  --container-background-color: transparent;
-  --container-box-shadow: none;
-  --container-gap: 2px;
-  --icon-width: 16px;
-  --icon-height: 16px;
-
-  &::part(selected-text) {
-    white-space: nowrap;
-  }
-
-  &::part(dropdown) {
-    min-width: ${({ $width }) => `${$width - 2}px`};
-  }
-
-  &::part(popover) {
-    /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
-    @media (max-width: ${MOBILE_SIZE}px) {
-      top: ${({ $top }) => ($top ? `${$top}px` : '0px')};
-      bottom: 16px;
-    }
-    cpsl-auth-modal.force-mobile-media & {
-      top: ${({ $top }) => ($top ? `${$top}px` : '0px')};
-      bottom: 16px;
-    }
-  }
-
-  &::part(icon) {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-`;
-const StyledSelectItem = styled(CpslSelectItem) `
-  --outer-container-padding-start: 4px;
-  --outer-container-padding-end: 4px;
-  --outer-container-padding-top: 4px;
-  --outer-container-padding-bottom: 4px;
-`;

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

@@ -1,116 +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 { 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.js

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

@@ -1,142 +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 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.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;
-`;