import { MIcon } from "@components/common/MIcon";
import { useMappedChainData } from "@hooks/useMappedChainData";
import { NATIVE_TOKEN_ADDRESS } from "@utils/constants";
import { ExplorerDataType, getExplorerLink } from "@utils/getExplorerLink";
import { shortenAddress } from "@utils/shortenAddress";

export const TokenAddress = ({
	address,
	chainId,
}: {
	address: string;
	chainId: number;
}) => {
	const mappedChainData = useMappedChainData();
	const baseUrl = mappedChainData?.[chainId]?.explorers[0];
	const explorerLink =
		baseUrl &&
		address !== NATIVE_TOKEN_ADDRESS &&
		getExplorerLink(baseUrl, address, ExplorerDataType.ADDRESS);
	return (
		<a
			href={explorerLink || undefined}
			className="bn-ml-0.5 bn-no-underline bn-h-4 group-hover:bn-flex bn-hidden bn-text-primary bn-text-sm bn-font-normal bn-items-center bn-leading-4 bn-gap-1"
			target="_blank"
			rel="noreferrer"
			onClick={(e) => e.stopPropagation()}
			onTouchEnd={(e) => e.stopPropagation()}
			onTouchStart={(e) => e.stopPropagation()}
		>
			<span>: {shortenAddress(address)}</span>
			{address !== NATIVE_TOKEN_ADDRESS && (
				<MIcon name="open_in_new" classNames="bn-text-base bn-h-4 bn-leading-4" />
			)}
		</a>
	);
};
