@lifi/widget/pages/MainPage/MainPage.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 { Box } from '@mui/material';
import { ActiveTransactions } from '../../components/ActiveTransactions';
import { AmountInput } from '../../components/AmountInput';
import { ContractComponent } from '../../components/ContractComponent';
import { GasRefuelMessage } from '../../components/GasMessage';
import { Routes } from '../../components/Routes';
import { SelectChainAndToken } from '../../components/SelectChainAndToken';
import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
import { useExpandableVariant } from '../../hooks';
import { useWidgetConfig } from '../../providers';
import { MainGasMessage } from './MainGasMessage';
import { FormContainer } from './MainPage.style';
import { ReviewButton } from './ReviewButton';
export const MainPage = () => {
    const expandable = useExpandableVariant();
    const { subvariant, contractComponent } = useWidgetConfig();
    const nft = subvariant === 'nft';
    return (_jsxs(FormContainer, { disableGutters: true, children: [_jsx(ActiveTransactions, { mx: 3, mt: 1, mb: 1 }), nft ? (_jsx(ContractComponent, { mx: 3, mt: 1, mb: 1, children: contractComponent })) : null, _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? _jsx(AmountInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? _jsx(Routes, { mx: 3, mb: 2 }) : null, _jsx(SendToWallet, { mx: 3, mb: 2 }), _jsx(GasRefuelMessage, { mx: 3, mb: 2 }), _jsx(MainGasMessage, { mx: 3, mb: 2 }), _jsxs(Box, { display: "flex", mx: 3, mb: 1, children: [_jsx(ReviewButton, {}), _jsx(SendToWalletButton, {})] })] }));
};