import { Approval } from "@components/Approval";
import { HistoryModal } from "@components/History";
import { MultiTokenModal } from "@components/MultiOutput/MultiTokenModal";
import { SettingsModal } from "@components/Settings";
import { Swap } from "@components/Swap";
import { TokenSelector } from "@components/TokenSelector";
import { CardTray } from "@components/common/CardTray";
import React from "react";
import { Providers } from "./Providers";
import type { BungeeConfig } from "./Providers/ConfigProvider";

export const Bungee = React.memo(({ config }: { config: BungeeConfig }) => {
	if (!config?.apiKey) return <span>Please pass the api key</span>;

	return (
		<Providers config={config}>
			<CardTray>
				<Swap />

				{/* modals */}
				<TokenSelector />
				<SettingsModal />
				<Approval />
				<MultiTokenModal />
				<HistoryModal />
			</CardTray>
		</Providers>
	);
});
