import {
Banner, Body, Divider, FramedVideo, MenuItem, MenuItemSize, Stack,
} from '@biom3/react';
import { motion } from 'framer-motion';
import { Checkout } from '@imtbl/checkout-sdk';
import { useTranslation } from 'react-i18next';
import { listVariants, listItemVariants } from '../../lib/animation/listAnimation';
import { Chain, RouteData } from '../../lib/squid/types';
import { getRemoteVideo } from '../../lib/utils';
import { FiatOptionType } from '../../widgets/add-tokens/types';
import { RouteOption } from './RouteOption';
import { FiatOption } from './FiatOption';
const defaultFiatOptions: FiatOptionType[] = [
FiatOptionType.DEBIT,
FiatOptionType.CREDIT,
];
export interface OptionsProps {
checkout: Checkout;
chains: Chain[] | null;
onCardClick: (type: FiatOptionType) => void;
onRouteClick: (route: RouteData, index: number) => void;
routes?: RouteData[];
size?: MenuItemSize;
showOnrampOption?: boolean;
insufficientBalance?: boolean;
selectedIndex: number;
}
export function RouteOptions({
checkout,
routes,
chains,
onCardClick,
onRouteClick,
size,
showOnrampOption,
insufficientBalance,
selectedIndex,
}: OptionsProps) {
const { t } = useTranslation();
// @NOTE: early exit with loading related UI, when the
// routes are not yet available
if (!routes?.length && !insufficientBalance) {
return (
{t('views.ADD_TOKENS.drawer.options.loadingText1')}
{t('views.ADD_TOKENS.drawer.options.loadingText2')}
);
}
const noRoutes = !(!insufficientBalance || routes?.length);
return (
}
>
{routes?.map((routeData: RouteData, index) => (
onRouteClick(routeData, index)}
isFastest={index === 0}
selected={index === selectedIndex}
rc={}
/>
))}
{noRoutes && (
{t('views.ADD_TOKENS.drawer.options.noRoutes.heading')}
{t('views.ADD_TOKENS.drawer.options.noRoutes.caption')}
)}
{showOnrampOption && (
<>
{t('views.ADD_TOKENS.drawer.options.moreOptionsDividerText')}
{defaultFiatOptions.map((type, idx) => (
}
/>
))}
)}
);
}