@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
30 lines • 1.69 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useRef, useState } from 'react';
import { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js';
import { ExpansionType } from '../../types/widget.js';
import { ChainsExpanded } from '../Chains/ChainsExpanded.js';
import { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js';
import { RoutesExpanded } from '../Routes/RoutesExpanded.js';
import { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js';
import { ExpansionContainer } from './Expansion.style.js';
export function Expansion() {
const [withChainExpansion, expansionType] = useHasChainExpansion();
const chainExpansionTypeRef = useRef(expansionType);
const [routesOpen, setRoutesOpen] = useState(false);
// Track the previous chain expansion type to avoid re-renders when transitioning to Routes
if (expansionType === ExpansionType.FromChain ||
expansionType === ExpansionType.ToChain) {
chainExpansionTypeRef.current = expansionType;
}
const containerWidth = useMemo(() => {
return routesOpen
? routesExpansionWidth
: withChainExpansion
? chainExpansionWidth
: 0;
}, [routesOpen, withChainExpansion]);
return (_jsxs(ExpansionContainer, { width: containerWidth, children: [_jsx(RoutesExpanded, { canOpen: expansionType === ExpansionType.Routes, setOpenExpansion: setRoutesOpen }), _jsx(ChainsExpanded, { formType: chainExpansionTypeRef.current === ExpansionType.FromChain
? 'from'
: 'to', open: withChainExpansion })] }));
}
//# sourceMappingURL=Expansion.js.map