@0xsequence/connect
Version:
Connect package for Sequence Web SDK
46 lines • 3.95 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExtendedWalletList = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const fuse_js_1 = __importDefault(require("fuse.js"));
const react_1 = require("react");
const index_js_1 = require("../ConnectButton/index.js");
const ExtendedWalletList = ({ onConnect, connectors, title, onGoBack, searchable }) => {
const { theme } = (0, design_system_1.useTheme)();
const [search, setSearch] = (0, react_1.useState)('');
const fuzzyConnectors = new fuse_js_1.default(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 ((0, jsx_runtime_1.jsx)(design_system_1.Scroll, { shadows: false, style: {
height: searchable ? searchableAreaHeight : viewheight,
scrollbarColor: 'gray black',
scrollbarWidth: 'thin'
}, children: children }));
}
return children;
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-4", children: (0, jsx_runtime_1.jsx)(design_system_1.IconButton, { className: "bg-button-glass", onClick: onGoBack, size: "xs", icon: () => (0, jsx_runtime_1.jsx)(design_system_1.ArrowRightIcon, { style: { transform: 'rotate(180deg)' } }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center text-primary items-center font-medium mt-2 mb-4", children: (0, jsx_runtime_1.jsx)(design_system_1.ModalPrimitive.Title, { asChild: true, children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { children: title }) }) }), searchable && ((0, jsx_runtime_1.jsx)("div", { className: "w-full mb-4", children: (0, jsx_runtime_1.jsx)(design_system_1.SearchInput, { autoFocus: true, name: "search", leftIcon: design_system_1.SearchIcon, value: search, onChange: ev => setSearch(ev.target.value), placeholder: "Search", "data-1p-ignore": true }) })), (0, jsx_runtime_1.jsx)(ConditionalScrollbar, { children: (0, jsx_runtime_1.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 = (0, index_js_1.getLogo)(theme, walletProps);
return ((0, jsx_runtime_1.jsxs)(design_system_1.Card, { className: "flex gap-2 items-center justify-start w-full h-12 px-4", clickable: true, onClick: () => onConnect(connector), children: [(0, jsx_runtime_1.jsx)(Logo, { className: "w-5 h-5" }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", fontWeight: "bold", color: "primary", children: walletName })] }, connectorId));
}) }) })] }));
};
exports.ExtendedWalletList = ExtendedWalletList;
//# sourceMappingURL=ExtendedWalletList.js.map