@lifi/widget/AppDrawer.js

LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { Drawer } from '@mui/material';
import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import { AppDefault } from './App';
import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
import { DrawerContext } from './AppDrawerContext';
import { AppProvider } from './AppProvider';
import { HiddenUI } from './types';
export const AppDrawer = forwardRef(({ elementRef, open, onClose, integrator, config }, ref) => {
    const openRef = useRef(Boolean(open));
    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
    const toggleDrawer = useCallback(() => {
        setDrawerOpen((open) => {
            openRef.current = !open;
            return openRef.current;
        });
        if (!openRef.current) {
            onClose?.();
        }
    }, [onClose]);
    const openDrawer = useCallback(() => {
        setDrawerOpen(true);
        openRef.current = true;
    }, []);
    const closeDrawer = useCallback(() => {
        setDrawerOpen(false);
        openRef.current = false;
        onClose?.();
    }, [onClose]);
    useImperativeHandle(ref, () => ({
        isOpen: () => openRef.current,
        toggleDrawer,
        openDrawer,
        closeDrawer,
    }), [closeDrawer, openDrawer, toggleDrawer]);
    const widgetConfig = useMemo(() => ({
        ...config,
        integrator,
        containerStyle: {
            ...config?.containerStyle,
            height: '100%',
        },
    }), [config, integrator]);
    const drawerContext = useMemo(() => ({
        closeDrawer,
    }), [closeDrawer]);
    return (_jsx(DrawerContext.Provider, { value: drawerContext, children: _jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                        sx: {
                            backgroundColor: 'rgb(0 0 0 / 48%)',
                            backdropFilter: 'blur(3px)',
                        },
                    }, PaperProps: {
                        sx: {
                            width: config?.containerStyle?.width ?? '100%',
                            minWidth: config?.containerStyle?.minWidth ?? 360,
                            maxWidth: config?.containerStyle?.maxWidth ?? 392,
                        },
                    }, keepMounted: true, children: _jsx(AppDefault, {}) })] }) }));
});
export const DrawerButtonText = ({ open, subvariant, }) => {
    const { t } = useTranslation();
    return (_jsx(DrawerButtonTypography, { children: open
            ? t('button.hide')
            : subvariant === 'nft'
                ? t('button.lifiCheckout')
                : t('button.lifiExchange') }));
};