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