@0xsequence/connect
Version:
Connect package for Sequence Web SDK
17 lines • 3.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WalletListItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const react_1 = require("react");
const WalletListItem = ({ name, address, embeddedWalletTitle, isEmbedded, isActive, isLinked, isReadOnly, onDisconnect, onUnlink, onReconnect }) => {
const [showUnlinkConfirm, setShowUnlinkConfirm] = (0, react_1.useState)(false);
const [isUnlinking, setIsUnlinking] = (0, react_1.useState)(false);
const handleUnlink = () => {
setIsUnlinking(true);
onUnlink?.();
};
return ((0, jsx_runtime_1.jsxs)(design_system_1.Card, { className: (0, design_system_1.cn)('flex flex-row items-center justify-between', isActive ? 'bg-background-secondary' : 'bg-background-muted'), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-row items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [(0, jsx_runtime_1.jsxs)(design_system_1.Text, { variant: "normal", color: "primary", children: [isEmbedded ? (embeddedWalletTitle ? embeddedWalletTitle : 'Embedded - ') : '', isEmbedded && embeddedWalletTitle ? '' : name] }), isLinked && ((0, jsx_runtime_1.jsx)(design_system_1.Tooltip, { message: "Linked to embedded wallet", children: (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(design_system_1.LinkIcon, { className: "text-muted", size: "xs" }) }) })), isReadOnly && ((0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "muted", children: "(read-only)" }))] }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", fontWeight: "bold", color: "primary", children: (0, design_system_1.truncateAddress)(address, 8, 5) })] }) }), !isReadOnly && (0, jsx_runtime_1.jsx)(design_system_1.Button, { size: "xs", variant: "glass", label: "Disconnect", onClick: onDisconnect }), isReadOnly && isLinked && ((0, jsx_runtime_1.jsx)("div", { className: "flex relative items-center gap-2", children: isUnlinking ? ((0, jsx_runtime_1.jsx)(design_system_1.Spinner, {})) : showUnlinkConfirm ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(design_system_1.IconButton, { size: "xs", variant: "danger", icon: design_system_1.CheckmarkIcon, onClick: handleUnlink }), (0, jsx_runtime_1.jsx)(design_system_1.IconButton, { size: "xs", variant: "glass", icon: design_system_1.CloseIcon, onClick: () => setShowUnlinkConfirm(false) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onReconnect && (0, jsx_runtime_1.jsx)(design_system_1.Button, { size: "xs", variant: "glass", label: "Reconnect", onClick: onReconnect }), (0, jsx_runtime_1.jsx)(design_system_1.Button, { size: "xs", variant: "glass", label: "Unlink", onClick: () => setShowUnlinkConfirm(true) })] })) }))] }));
};
exports.WalletListItem = WalletListItem;
//# sourceMappingURL=WalletListItem.js.map