@0xsequence/connect
Version:
Connect package for Sequence Web SDK
39 lines • 3.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ArrowRightIcon, Card, IconButton, ModalPrimitive, Scroll, SearchIcon, SearchInput, Text, useTheme } from '@0xsequence/design-system';
import Fuse from 'fuse.js';
import { useState } from 'react';
import { getLogo } from '../ConnectButton/index.js';
export const ExtendedWalletList = ({ onConnect, connectors, title, onGoBack, searchable }) => {
const { theme } = useTheme();
const [search, setSearch] = useState('');
const fuzzyConnectors = new Fuse(connectors, {
keys: ['_wallet.name']
});
const foundConnectors = fuzzyConnectors.search(search);
const displayedConnectors = search === '' ? connectors : foundConnectors.map(connector => connector.item);
const maxConnectorsInView = searchable ? 6 : 8;
const gutterHeight = 8;
const optionHeight = 48;
const displayedOptionsAmount = Math.min(displayedConnectors.length, maxConnectorsInView);
const displayedGuttersAmount = displayedOptionsAmount - 1;
const searchableAreaHeight = `${optionHeight * maxConnectorsInView + gutterHeight * (maxConnectorsInView - 1)}px`;
const viewheight = `${optionHeight * displayedOptionsAmount + gutterHeight * displayedGuttersAmount}px`;
const ConditionalScrollbar = ({ children }) => {
if (displayedConnectors.length > maxConnectorsInView || searchable) {
return (_jsx(Scroll, { shadows: false, style: {
height: searchable ? searchableAreaHeight : viewheight,
scrollbarColor: 'gray black',
scrollbarWidth: 'thin'
}, children: children }));
}
return children;
};
return (_jsxs("div", { className: "p-4", children: [_jsx("div", { className: "absolute top-4 left-4", children: _jsx(IconButton, { className: "bg-button-glass", onClick: onGoBack, size: "xs", icon: () => _jsx(ArrowRightIcon, { style: { transform: 'rotate(180deg)' } }) }) }), _jsx("div", { className: "flex justify-center text-primary items-center font-medium mt-2 mb-4", children: _jsx(ModalPrimitive.Title, { asChild: true, children: _jsx(Text, { children: title }) }) }), searchable && (_jsx("div", { className: "w-full mb-4", children: _jsx(SearchInput, { autoFocus: true, name: "search", leftIcon: SearchIcon, value: search, onChange: ev => setSearch(ev.target.value), placeholder: "Search", "data-1p-ignore": true }) })), _jsx(ConditionalScrollbar, { children: _jsx("div", { className: "flex flex-col gap-2", children: displayedConnectors.map(connector => {
const walletName = connector._wallet.name;
const connectorId = connector._wallet.id;
const walletProps = connector._wallet;
const Logo = getLogo(theme, walletProps);
return (_jsxs(Card, { className: "flex gap-2 items-center justify-start w-full h-12 px-4", clickable: true, onClick: () => onConnect(connector), children: [_jsx(Logo, { className: "w-5 h-5" }), _jsx(Text, { variant: "normal", fontWeight: "bold", color: "primary", children: walletName })] }, connectorId));
}) }) })] }));
};
//# sourceMappingURL=ExtendedWalletList.js.map