@0xsequence/connect
Version:
Connect package for Sequence Web SDK
115 lines • 6.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConnectedWallets = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("motion/react");
const react_2 = require("react");
const WalletListItem_js_1 = require("./WalletListItem.js");
const MAX_HEIGHT = 240;
const ConnectedWallets = ({ wallets, linkedWallets, disconnectWallet, unlinkWallet }) => {
const scrollContainerRef = (0, react_2.useRef)(null);
const updateScrollFades = (target) => {
const isScrollable = target.scrollHeight > MAX_HEIGHT;
const isAtBottom = target.scrollHeight - target.scrollTop <= MAX_HEIGHT;
const isAtTop = target.scrollTop === 0;
const bottomFadeElement = target.parentElement?.querySelector('.scroll-fade');
const topFadeElement = target.parentElement?.querySelector('.scroll-fade-top');
if (bottomFadeElement) {
bottomFadeElement.style.opacity = isScrollable && !isAtBottom ? '1' : '0';
}
if (topFadeElement) {
topFadeElement.style.opacity = isScrollable && !isAtTop ? '1' : '0';
}
};
const allWallets = (0, react_2.useMemo)(() => {
// Get read-only linked wallets that aren't connected
const readOnlyLinkedWallets = (linkedWallets ?? [])
.filter(lw => !wallets.some(w => w.address.toLowerCase() === lw.linkedWalletAddress.toLowerCase()))
.map(lw => ({
name: lw.walletType || 'Linked Wallet',
address: lw.linkedWalletAddress,
isEmbedded: false,
isActive: false,
isLinked: true,
isReadOnly: true,
onDisconnect: () => { }, // No-op for read-only wallets
onUnlink: () => {
unlinkWallet(lw.linkedWalletAddress);
}
}));
// Transform ConnectedWallet to WalletListItemProps
const connectedWallets = wallets.map(wallet => ({
name: wallet.name,
address: wallet.address,
isEmbedded: wallet.isEmbedded,
isActive: wallet.isActive,
isLinked: linkedWallets?.some(lw => lw.linkedWalletAddress.toLowerCase() === wallet.address.toLowerCase()) ?? false,
isReadOnly: false,
onDisconnect: () => disconnectWallet(wallet.address),
onUnlink: () => { } // No-op for connected wallets
}));
// Sort wallets: embedded first, then by name and address
const sortedConnectedWallets = [...connectedWallets].sort((a, b) => {
if (a.isEmbedded && !b.isEmbedded) {
return -1;
}
if (!a.isEmbedded && b.isEmbedded) {
return 1;
}
return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()) || a.address.toLowerCase().localeCompare(b.address.toLowerCase()));
});
// Sort read-only linked wallets by name and address
const sortedReadOnlyWallets = [...readOnlyLinkedWallets].sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()) || a.address.toLowerCase().localeCompare(b.address.toLowerCase()));
// Combine all wallets
return [...sortedConnectedWallets, ...sortedReadOnlyWallets];
}, [wallets, linkedWallets, disconnectWallet]);
(0, react_2.useEffect)(() => {
const container = scrollContainerRef.current;
if (container) {
// Initial check
updateScrollFades(container);
// Check again after animations complete (approximately)
const timeout = setTimeout(() => {
updateScrollFades(container);
}, 500); // Half second delay to allow animations to settle
return () => clearTimeout(timeout);
}
}, [allWallets]); // Re-run when wallets change as it affects content height
if (wallets.length === 0) {
return null;
}
return ((0, jsx_runtime_1.jsx)("div", { className: "flex mt-4 flex-col", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "flex py-1 gap-2 flex-col overflow-y-auto", ref: scrollContainerRef, onScroll: (e) => {
updateScrollFades(e.currentTarget);
}, style: {
maxHeight: `${MAX_HEIGHT}px`,
scrollbarWidth: 'none',
borderRadius: '8px',
position: 'relative'
}, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "popLayout", initial: false, children: allWallets.map((wallet, index) => ((0, jsx_runtime_1.jsx)(react_1.motion.div, { custom: index, initial: "hidden", animate: "visible", variants: {
hidden: { opacity: 0, y: 20 },
visible: (i) => ({
opacity: 1,
y: 0,
transition: {
type: 'spring',
stiffness: 400,
damping: 30,
delay: i * 0.1
}
})
}, style: { willChange: 'transform, opacity', transformOrigin: 'center' }, children: (0, jsx_runtime_1.jsx)(WalletListItem_js_1.WalletListItem, { ...wallet }) }, wallet.address))) }) }), (0, jsx_runtime_1.jsx)("div", { className: "scroll-fade-top absolute top-0 left-0 right-0", style: {
height: '30px',
background: 'linear-gradient(to top, rgba(0, 0, 0, 0), var(--seq-color-background-primary))',
pointerEvents: 'none',
opacity: 0,
transition: 'opacity 0.2s'
} }), (0, jsx_runtime_1.jsx)("div", { className: "scroll-fade absolute bottom-0 left-0 right-0", style: {
height: '40px',
background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--seq-color-background-primary))',
pointerEvents: 'none',
opacity: 0,
transition: 'opacity 0.2s'
} })] }) }));
};
exports.ConnectedWallets = ConnectedWallets;
//# sourceMappingURL=ConnectedWallets.js.map