Mark multichain tokens (LlamaSwap#217)

* Mark multichain tokens

* add more warnings

---------

Co-authored-by: 0xngmi <0xngmi@protonmail.com>

Author: vrtnd

src/components/Aggregator/router.ts

@@ -5,14 +5,13 @@ import { adapters } from './list';
 export const adaptersNames = adapters.map(({ name }) => name);
 
 const adaptersMap = adapters.reduce((acc, adapter) => ({ ...acc, [adapter.name]: adapter }), {});
-const delistedChains = ['fantom'];
 
 export function getAllChains() {
 	const chains = new Set<string>();
 	for (const adapter of adapters) {
 		Object.keys(adapter.chainToId).forEach((chain) => chains.add(chain));
 	}
-	const chainsArr = Array.from(chains).filter((c) => !delistedChains.includes(c));
+	const chainsArr = Array.from(chains);
 
 	const chainsOptions = chainsArr.map((c) => {
 		const chain = allChains.find(({ id }) => id === chainsMap[c]);

src/components/InputAmountAndTokenSelect/TokenSelect.tsx

@@ -2,7 +2,7 @@ import { ethers } from 'ethers';
 import { useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Modal, ModalOverlay, ModalContent, ModalCloseButton, useDisclosure, Input } from '@chakra-ui/react';
-import { QuestionIcon, WarningTwoIcon } from '@chakra-ui/icons';
+import { WarningTwoIcon } from '@chakra-ui/icons';
 import { Header, IconImage, PairRow } from '../Aggregator/Search';
 import { useToken } from 'wagmi';
 import { Button, Flex, Text, Tooltip } from '@chakra-ui/react';
@@ -15,7 +15,7 @@ import { ChevronDown } from 'react-feather';
 
 const Row = ({ chain, token, onClick }) => {
 	const blockExplorer = allChains.find((c) => c.id == chain.id)?.blockExplorers?.default;
-
+	const isMultichain = token.isMultichain;
 	return (
 		<PairRow
 			key={token.value}
@@ -25,12 +25,23 @@ const Row = ({ chain, token, onClick }) => {
 			<IconImage src={token.logoURI} onError={(e) => (e.currentTarget.src = token.logoURI2 || '/placeholder.png')} />
 
 			<Text display="flex" flexDir="column" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden">
-				<Text
-					as="span"
-					whiteSpace="nowrap"
-					textOverflow="ellipsis"
-					overflow="hidden"
-				>{`${token.name} (${token.symbol})`}</Text>
+				<Tooltip
+					label="This token could have been affected by the multichain hack."
+					bg="black"
+					color="white"
+					isDisabled={!isMultichain}
+				>
+					<Text
+						as="span"
+						whiteSpace="nowrap"
+						textOverflow="ellipsis"
+						overflow="hidden"
+						color={isMultichain ? 'orange.200' : 'white'}
+					>
+						{`${token.name} (${token.symbol})`}
+						{token.isMultichain ? <WarningTwoIcon color={'orange.200'} style={{ marginLeft: '0.4em' }} /> : null}
+					</Text>
+				</Tooltip>
 
 				{token.isGeckoToken && (
 					<>
@@ -300,6 +311,15 @@ export const TokenSelect = ({ tokens, onClick, token, selectedChain }) => {
 					/>
 				)}
 
+				<Tooltip
+					label="This token could have been affected by the multichain hack."
+					bg="black"
+					color="white"
+					isDisabled={!token?.isMultichain}
+				>
+					{token?.isMultichain ? <WarningTwoIcon color={'orange.200'} /> : <></>}
+				</Tooltip>
+
 				<Text as="span" color="white" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={400}>
 					{token ? token.symbol : 'Select Token'}
 				</Text>

src/props/getTokenList.ts

@@ -13,6 +13,8 @@ const tokensToRemove = {
 	}
 };
 
+const FANTOM_ID = 250;
+
 const oneInchChains = {
 	ethereum: 1,
 	bsc: 56,
@@ -46,6 +48,25 @@ const fixTotkens = (tokenlist) => {
 	return tokenlist;
 };
 
+const markMultichain = async (tokens) => {
+	const multichainList = await fetch(`https://bridgeapi.multichain.org/v4/tokenlistv4/${FANTOM_ID}`)
+		.then((r) => r.json())
+		.then((r) => Object.values(r));
+
+	tokens[FANTOM_ID] = tokens[FANTOM_ID].map((token) => {
+		const isMultichain = !!multichainList.find(
+			(multitoken: IToken) => multitoken.address?.toLowerCase() === token.address.toLowerCase()
+		);
+
+		return {
+			...token,
+			isMultichain
+		};
+	});
+
+	return tokens;
+};
+
 export async function getTokenList() {
 	// const uniList = await fetch('https://tokens.uniswap.org/').then((r) => r.json());
 	// const sushiList = await fetch('https://token-list.sushi.com/').then((r) => r.json());
@@ -55,6 +76,7 @@ export async function getTokenList() {
 			fetch(`https://tokens.1inch.io/v1.1/${chainId}`).then((r) => r.json())
 		)
 	);
+
 	// const hecoList = await fetch('https://token-list.sushi.com/').then((r) => r.json()); // same as sushi
 	// const lifiList = await fetch('https://li.quest/v1/tokens').then((r) => r.json());
 
@@ -106,6 +128,8 @@ export async function getTokenList() {
 
 	tokensFiltered = fixTotkens(tokensFiltered);
 
+	tokensFiltered = await markMultichain(tokensFiltered);
+
 	// get top tokens on each chain
 	const topTokensByChain = await Promise.allSettled(
 		Object.keys(tokensFiltered).map((chain) => getTopTokensByChain(chain))