@getpara/react-sdk 1.1.0 → 1.3.0

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -1,77 +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 { routeMobileExternalWallet } from '../../utils/routeMobileExternalWallet.js';
-import { NETWORK_NOT_SUPPORTED_ERROR } from '../../constants/constants.js';
-import { WalletType } from '@getpara/web-sdk';
-export const ChainSwitch = () => {
-    const [isCopied, copy] = useCopyToClipboard();
-    const externalWalletError = useModalStore(state => state.externalWalletError);
-    const setStep = useModalStore(state => state.setStep);
-    const setStepDirection = useModalStore(state => state.setStepDirection);
-    const { switchChain, wallet, qrUri, chainIdSwitchingTo, walletDisplayHelpers } = useExternalWallets();
-    useEffect(() => {
-        if ((wallet === null || wallet === void 0 ? void 0 : wallet.type) === WalletType.COSMOS) {
-            routeMobileExternalWallet(qrUri);
-        }
-    }, [qrUri, wallet]);
-    useEffect(() => {
-        if (!wallet) {
-            setStepDirection(-1);
-            setStep(ModalStep.ACCOUNT_MAIN);
-        }
-    }, [wallet]);
-    const handleTryAgainClick = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (chainIdSwitchingTo) {
-            yield switchChain(chainIdSwitchingTo);
-        }
-    });
-    const handleCopy = () => {
-        copy(qrUri);
-    };
-    const Content = useMemo(() => {
-        var _a;
-        if (!wallet) {
-            return null;
-        }
-        const { isCosmosMobileWallet } = walletDisplayHelpers;
-        if (isCosmosMobileWallet) {
-            return (_jsx(_Fragment, { children: _jsxs(InnerStepContainer, { children: [_jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device to switch networks" }), _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'] })] }) }));
-        }
-        return (_jsxs(InnerStepContainer, { children: [!(externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError.length) ? (_jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm the request to change networks in your ${wallet.name} wallet.` })) : (_jsxs(_Fragment, { children: [_jsxs(ErrorContainer, { children: [_jsx(ErrorIcon, { icon: "alertCircle" }), _jsx(CenteredText, { weight: "semiBold", color: "error", children: externalWalletError[0] })] }), externalWalletError[1] && (_jsx(CenteredText, { color: "secondary", weight: "medium", children: externalWalletError[1] }))] })), ((_a = externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== NETWORK_NOT_SUPPORTED_ERROR && (_jsxs(CpslButton, { variant: "secondary", onClick: handleTryAgainClick, children: [_jsx(CpslIcon, { slot: "start", icon: "refresh" }), "Try Again"] }))] }));
-    }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
-    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);
-`;

package/dist/modal/components/ChainSwitch/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/Controls/Controls.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslIcon } from '@getpara/react-components';
-import { styled } from 'styled-components';
-import { useModalStore } from '../../stores/index.js';
-import { useThemeStore } from '../../stores/theme/useThemeStore.js';
-import { useGoBack } from '../../hooks/useGoBack.js';
-import { AccountSelect, ChainSelect } from './Selects.js';
-import { ModalStep } from '../../utils/steps.js';
-import { HeaderButton } from '@getpara/react-common';
-export const Controls = ({ onClose }) => {
-    const bareModal = useThemeStore(state => state.bareModal);
-    const hasPreviousStep = useModalStore(state => state.hasPreviousStep());
-    const step = useModalStore(state => state.step);
-    const isFullyLoggedIn = useModalStore(state => state.isFullyLoggedIn);
-    const goBack = useGoBack();
-    const shouldShowSelects = [
-        ModalStep.ACCOUNT_MAIN,
-        ModalStep.CHAIN_SWITCH,
-        ModalStep.ADD_FUNDS_BUY,
-        ModalStep.ADD_FUNDS_RECEIVE,
-        ModalStep.ADD_FUNDS_WITHDRAW,
-    ].includes(step);
-    const handleBackClick = () => {
-        goBack();
-    };
-    return (_jsxs(Container, { children: [_jsx(BackButton, { variant: "ghost", style: {
-                    visibility: hasPreviousStep ? 'visible' : 'hidden',
-                }, onClick: handleBackClick, children: _jsx(CpslIcon, { icon: "arrow" }) }), _jsx(MiddleContainer, { children: shouldShowSelects && isFullyLoggedIn && (_jsxs(_Fragment, { children: [_jsx(ChainSelect, {}), _jsx(AccountSelect, {})] })) }), _jsx(CloseButton, { bareModal: bareModal, variant: "ghost", onClick: onClose, children: _jsx(CpslIcon, { icon: "close" }) })] }));
-};
-const Container = styled.div `
-  position: absolute;
-  width: 100%;
-  top: 16px;
-
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
-const MiddleContainer = styled.div `
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-`;
-const CloseButton = styled(HeaderButton) `
-  transform: rotate(180deg);
-  visibility: ${({ bareModal }) => (bareModal ? 'hidden' : 'visible')};
-`;
-const BackButton = styled(HeaderButton) `
-  transform: rotate(180deg);
-`;

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;
-`;