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 && getExplorerLink(baseUrl, address, ExplorerDataType.ADDRESS);
	return (
		<p className="group-hover:bn-flex bn-hidden bn-text-primary bn-text-sm bn-font-normal bn-items-center bn-leading-4 bn-pl-1">
			: {shortenAddress(address)}
			{address !== NATIVE_TOKEN_ADDRESS && (
				<a
					href={explorerLink}
					className="bn-ml-0.5 bn-no-underline bn-text-primary bn-h-4"
					target="_blank"
					rel="noreferrer"
					onClick={(e) => e.stopPropagation()}
				>
					<MIcon name="open_in_new" classNames="bn-text-base bn-h-4 bn-leading-4" />
				</a>
			)}
		</p>
	);
};
