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 {
DirectCryptoPayData, DirectCryptoPayOptionType, FiatOptionType, SquidRouteOptionType,
} from '../../types';
import { RouteOption } from './RouteOption';
import { FiatOption } from './FiatOption';
import { DirectCryptoPayOption } from './DirectCryptoPayOption';
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;
onDirectCryptoPayClick: (route: DirectCryptoPayData, index: number) => void;
onChangeWalletClick: () => void;
routes?: RouteData[];
size?: MenuItemSize;
showOnrampOption?: boolean;
showDirectCryptoPayOption?: boolean;
insufficientBalance?: boolean;
selectedIndex: number;
selectedRouteType: SquidRouteOptionType | DirectCryptoPayOptionType | undefined;
directCryptoPayRoutes?: DirectCryptoPayData[];
}
export function RouteOptions({
checkout,
routes,
chains,
onCardClick,
onRouteClick,
onDirectCryptoPayClick,
onChangeWalletClick,
size,
showOnrampOption,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
showDirectCryptoPayOption,
insufficientBalance,
selectedIndex,
selectedRouteType,
directCryptoPayRoutes,
}: OptionsProps) {
const { t } = useTranslation();
const renderLoading = () => (
{t('views.PURCHASE.drawer.options.loadingText1')}
{t('views.PURCHASE.drawer.options.loadingText2')}
);
const noRoutes = !(!insufficientBalance || routes?.length);
return (
}
>
{(directCryptoPayRoutes && directCryptoPayRoutes.length > 0)
&& (directCryptoPayRoutes?.map((routeData: DirectCryptoPayData, index) => (
onDirectCryptoPayClick(routeData, index)}
isFastest={index === 0}
selected={
index === selectedIndex
&& (selectedRouteType === DirectCryptoPayOptionType.IMMUTABLE_ZKEVM || !selectedRouteType)
}
rc={}
/>
)))}
{(routes && routes.length > 0)
&& routes?.map((routeData: RouteData, index) => (
onRouteClick(routeData, index)}
isFastest={directCryptoPayRoutes && directCryptoPayRoutes.length > 0 ? false : index === 0}
selected={index === selectedIndex && selectedRouteType === SquidRouteOptionType.SQUID_ROUTE}
rc={}
/>
))}
{noRoutes && (
{t('views.PURCHASE.drawer.options.noRoutes.heading')}
{t('views.PURCHASE.drawer.options.noRoutes.caption')}
)}
{!routes?.length && !insufficientBalance && renderLoading()}
{showOnrampOption && (routes?.length || insufficientBalance) && (
<>
{t('views.PURCHASE.drawer.options.moreOptionsDividerText')}
{defaultFiatOptions.map((type, idx) => (
}
/>
))}
)}
);
}