import { useDispatch } from "react-redux";

import wcBg from "@assets/campaigns/wc/wcBg.svg";
import { addOutputToken, setToChainId } from "@store/quoteParamSlice";
import { SOLANA_CHAIN_ID } from "@utils/constants";
import { resolveSvg } from "@utils/resolveSvg";
import { NewCampaignLayout } from "../NewCampaignLayout";
import { campaigns } from "../campaignData";

const wctToken = {
	chainId: 89999,
	address: "WCTk5xWdn5SYg56twGj32sUF3W4WFQ48ogezLBuYTBY",
	name: "WalletConnect Token",
	symbol: "WCT",
	decimals: 9,
	logoURI:
		"https://assets.coingecko.com/coins/images/50390/large/wc-token1.png?1727569464",
	isShortListed: false,
	tags: [],
	trendingRank: 250,
	marketCap: 59563195,
	totalVolume: 28092628,
	balance: "0",
	balanceInUsd: 0,
	isVerified: true,
};

export const WalletConnectBanner = () => {
	const dispatch = useDispatch();
	const walletConnectCampaign = campaigns.find(
		(campaign) => campaign.id === "walletConnect",
	);
	if (!walletConnectCampaign) return <></>;

	const swapNowFn = () => {
		dispatch(setToChainId(SOLANA_CHAIN_ID));
		dispatch(
			addOutputToken({
				id: 0,
				token: wctToken,
			}),
		);
	};

	return (
		<NewCampaignLayout campaign={walletConnectCampaign} swapNowFn={swapNowFn}>
			<img
				src={resolveSvg(wcBg)}
				alt="background"
				className="bn-absolute bn-top-0 bn-right-0"
			/>
		</NewCampaignLayout>
	);
};
