import React from "react";

import { CompareModal } from "@components/Compare/CompareModal";
import { HistoryModal } from "@components/History";
import { MultiTokenModal } from "@components/MultiOutput/MultiTokenModal";
import { Swap } from "@components/Swap";
import { TokenSelector } from "@components/TokenSelector";
import { CampaignBanners } from "@components/common/CampaignBanners";
import { CardTray } from "@components/common/CardTray";
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 (
		<React.StrictMode>
			<Providers config={config}>
				<CardTray>
					<Swap />
					<CampaignBanners />

					{/* modals */}
					<TokenSelector />
					<MultiTokenModal />
					<HistoryModal />
					<CompareModal />
				</CardTray>
			</Providers>
		</React.StrictMode>
	);
});
