@lifi/widget/dist/esm/components/Routes/RoutesContent.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 { useAccount } from '@lifi/wallet-management';
import { Stack, Typography } from '@mui/material';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { PageContainer } from '../PageContainer.js';
import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js';
import { RouteCard } from '../RouteCard/RouteCard.js';
import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js';
import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js';
import { Container, Header } from './RoutesExpanded.style.js';
const headerHeight = '64px';
export const RoutesContent = memo(function RoutesContent({ routes, isFetching, isLoading, dataUpdatedAt, refetchTime, fromChain, refetch, onRouteClick, }) {
    const { t } = useTranslation();
    const { subvariant, subvariantOptions } = useWidgetConfig();
    const { account } = useAccount({ chainType: fromChain?.chainType });
    const [toAddress] = useFieldValues('toAddress');
    const { requiredToAddress } = useToAddressRequirements();
    const currentRoute = routes?.[0];
    const routeNotFound = !currentRoute && !isLoading && !isFetching;
    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress;
    const allowInteraction = account.isConnected && !toAddressUnsatisfied;
    const title = subvariant === 'custom'
        ? subvariantOptions?.custom === 'deposit'
            ? t('header.deposit')
            : t('header.youPay')
        : t('header.receive');
    return (_jsxs(Container, { enableColorScheme: true, minimumHeight: isLoading, children: [_jsxs(Header, { sx: { height: headerHeight }, children: [_jsx(Typography, { noWrap: true, sx: {
                            fontSize: 18,
                            fontWeight: '700',
                            flex: 1,
                        }, children: title }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || Date.now(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(PageContainer, { sx: { height: `calc(100% - ${headerHeight})`, overflow: 'auto' }, children: _jsx(Stack, { direction: "column", spacing: 2, sx: {
                        flex: 1,
                        paddingBottom: 3,
                    }, children: routeNotFound ? (_jsx(RouteNotFoundCard, {})) : (isLoading || isFetching) && !routes?.length ? (Array.from({ length: 3 }).map((_, index) => (_jsx(RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(RouteCard, { route: route, onClick: allowInteraction ? () => onRouteClick(route) : undefined, active: index === 0, expanded: routes?.length === 1 }, index)))) }) })] }));
});
//# sourceMappingURL=RoutesContent.js.map