Create new synthetic token list

src/consts/tokens.hyperlane.xyz.json

@@ -0,0 +1,24 @@
+{
+  "name": "Hyperlane Default Tokens",
+  "timestamp": "2022-12-23T12:00:00.000Z",
+  "version": {
+    "major": 1,
+    "minor": 0,
+    "patch": 0
+  },
+  "tags": {},
+  "logoURI": "https://www.hyperlane.xyz/logo-blue.png",
+  "keywords": ["hyperlane", "default"],
+  "tokens": [
+    {
+      "chainId": 5,
+      "address": "0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6",
+      "name": "Weth",
+      "symbol": "WETH",
+      "decimals": 18,
+      "hypCollateralAddresses": [
+        "0x50EA04269efD47dFA3844e5cCA5d3e66dA5A122F"
+      ]
+    }
+  ]
+}

src/features/tokens/TokenList.tsx

@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
 
 import { TokenIcon } from '../../components/icons/TokenIcon';
-// Using Uniswap's default list for now, may revisit
-import UniswapTokens from '../../consts/tokens.uniswap.org.json';
+// Uniswap's list has a diverse set of 500+ popular tokens
+// import UniswapTokens from '../../consts/tokens.uniswap.org.json';
+// Import your custom list here
+import SyntheticTokenList from '../../consts/tokens.hyperlane.xyz.json';
 
 import { ListedToken } from './types';
 
@@ -18,7 +20,7 @@ export default function TokenList({
 }) {
   const tokens = useMemo(
     () =>
-      UniswapTokens.tokens.filter((t) => {
+      SyntheticTokenList.tokens.filter((t) => {
         const q = searchQuery?.trim().toLowerCase();
         const chainFilter = t.chainId === sourceChainId;
         if (!q) return chainFilter;
@@ -34,7 +36,7 @@ export default function TokenList({
   );
 
   return (
-    <div className="divide-y divide-gray-200">
+    <div className="flex flex-col items-stretch divide-y divide-gray-200">
       {tokens.map((t) => (
         <button
           className="-mx-2 py-2 px-2 flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-250"

src/features/tokens/types.ts

@@ -4,5 +4,6 @@ export interface ListedToken {
   name: string;
   symbol: string;
   decimals: number;
-  logoURI: string | undefined;
+  logoURI?: string;
+  hypCollateralAddresses?: string[];
 }

src/features/tokens/useTokenBalance.ts

@@ -0,0 +1,3 @@
+export function useTokenBalance() {
+  //TODO
+}