feat: add token list

packages/bridge/package.json

@@ -21,6 +21,7 @@
     "@types/echarts": "^4.9.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/testing-library__react": "^10.2.0",
+    "@uniswap/token-lists": "^1.0.0-beta.19",
     "@walletconnect/client": "^1.3.6",
     "@walletconnect/qrcode-modal": "^1.3.6",
     "@walletconnect/web3-provider": "^1.3.6",

packages/bridge/src/components/Input/ethereum.tsx

@@ -2,39 +2,41 @@ import React, { useEffect, useState } from 'react';
 import { contexts, utils, ParsedAccount, NumericInput, TokenIcon, TokenDisplay } from '@oyster/common';
 import { Card, Select } from 'antd';
 import './style.less';
+import { TokenList, TokenInfo } from '@uniswap/token-lists';
 const { getTokenName } = utils;
 const { cache } = contexts.Accounts;
 const { useConnectionConfig } = contexts.Connection;
 
 const { Option } = Select;
 
-// User can choose a collateral they want to use, and then this will display the balance they have in Oyster's lending
-// reserve for that collateral type.
 export function EthereumInput(props: {
   title: string;
   amount?: number | null;
   disabled?: boolean;
   onInputChange: (value: number | null) => void;
   hideBalance?: boolean;
-  useWalletBalance?: boolean;
-  useFirstReserve?: boolean;
-  showLeverageSelector?: boolean;
-  leverage?: number;
 }) {
-  const { tokenMap } = useConnectionConfig();
-  const [acco, setCollateralReserve] = useState<string>();
   const [balance, setBalance] = useState<number>(0);
   const [lastAmount, setLastAmount] = useState<string>('');
+  const [tokens, setTokens] = useState<TokenInfo[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const listResponse = await fetch('https://tokens.coingecko.com/uniswap/all.json');
+      const tokenList: TokenList = await listResponse.json();
+
+      setTokens(tokenList.tokens);
+    })();
+  }, [setTokens])
 
 
-  const renderReserveAccounts = [].map((reserve: any) => {
-    const mint = reserve.info.liquidityMint.toBase58();
-    const address = reserve.pubkey.toBase58();
-    const name = getTokenName(tokenMap, mint);
+  const renderReserveAccounts = tokens.map((token) => {
+    const mint = token.address;
+    const name = token.symbol;
     return (
-      <Option key={address} value={address} name={name} title={address}>
-        <div key={address} style={{ display: 'flex', alignItems: 'center' }}>
-          <TokenIcon mintAddress={mint} />
+      <Option key={mint} value={mint} name={name} title={mint}>
+        <div key={mint} style={{ display: 'flex', alignItems: 'center' }}>
+          <img src={token.logoURI}/>
           {name}
         </div>
       </Option>
@@ -102,10 +104,7 @@ export function EthereumInput(props: {
           ) : (
             <TokenDisplay
               // key={props.reserve.liquidityMint.toBase58()}
-              name={getTokenName(
-                tokenMap,
-                '',
-              )}
+              name={''}
               mintAddress={''}
               showBalance={false}
             />

packages/bridge/src/components/Layout/index.tsx

@@ -31,7 +31,7 @@ export const AppLayout = React.memo((props: any) => {
           {isRoot && (
             <Header className="App-Bar">
               <div className="app-title">
-                <h2>WORMHOLE</h2>
+                <Link to="/"><h2>WORMHOLE</h2></Link>
               </div>
               <AppBar />
             </Header>

packages/bridge/src/components/Transfer/index.tsx

@@ -24,7 +24,7 @@ export const Transfer = () => {
           title="From Ethereum"
           onInputChange={() => {}}
           />
-      <Button type="primary" className="swap-button">
+      <Button type="primary" className="swap-button" disabled={true}>
         ⇅
       </Button>
       <SolanaInput

packages/bridge/src/contexts/ethereum.tsx

@@ -8,7 +8,8 @@ import Fortmatic from "fortmatic";
 import Torus from "@toruslabs/torus-embed";
 import Authereum from "authereum";
 import { Bitski } from "bitski";
-import { useWallet } from "@oyster/common";
+import { useConnectionConfig, useWallet } from "@oyster/common";
+import { ENV } from "@solana/spl-token-registry";
 
 const providerOptions = {
   walletconnect: {
@@ -49,12 +50,13 @@ export const EthereumContext = createContext<EthereumContextState>({
 
 export const EthereumProvider: FunctionComponent = ({children}) => {
   const [web3, setWeb3] = useState<Web3>();
+  const { env } = useConnectionConfig();
   const { connected } = useWallet();
 
   const connect = useCallback(async () => {
     const web3Modal = new Web3Modal({
       theme: "dark",
-      network: "mainnet", // optional (TODO: add network selector)
+      network: env === ENV.MainnetBeta ? "mainnet" : "goerli", // optional (TODO: add network selector)
       cacheProvider: false, // optional
       providerOptions // required
     });
@@ -64,13 +66,25 @@ export const EthereumProvider: FunctionComponent = ({children}) => {
     provider.on('error', (e: any) => console.error('WS Error', e));
     provider.on('end', (e: any) => console.error('WS End', e));
 
-    provider.on('disconnect', (error: { code: number; message: string }) => {
-      console.log(error);
+    provider.on("accountsChanged", (accounts: string[]) => {
+      console.log(accounts);
     });
-    provider.on('connect', (info: { chainId: number }) => {
+
+    // Subscribe to chainId change
+    provider.on("chainChanged", (chainId: number) => {
+      console.log(chainId);
+    });
+
+    // Subscribe to provider connection
+    provider.on("connect", (info: { chainId: number }) => {
       console.log(info);
     });
 
+    // Subscribe to provider disconnection
+    provider.on("disconnect", (error: { code: number; message: string }) => {
+      console.log(error);
+    });
+
     const instance = new Web3(provider);
     setWeb3(instance);
   }, [setWeb3]);

packages/common/src/contexts/connection.tsx

@@ -14,6 +14,9 @@ export const ENDPOINTS = [
     name: 'mainnet-beta' as ENV,
     endpoint: 'https://solana-api.projectserum.com/',
   },
+  { name: 'testnet' as ENV, endpoint: clusterApiUrl('testnet') },
+  { name: 'devnet' as ENV, endpoint: clusterApiUrl('devnet') },
+  { name: 'localnet' as ENV, endpoint: 'http://127.0.0.1:8899' },
   {
     name: 'Oyster Dev' as ENV,
     endpoint: 'http://oyster-dev.solana.com/',
@@ -22,9 +25,6 @@ export const ENDPOINTS = [
     name: 'Lending' as ENV,
     endpoint: 'https://tln.solana.com/',
   },
-  { name: 'testnet' as ENV, endpoint: clusterApiUrl('testnet') },
-  { name: 'devnet' as ENV, endpoint: clusterApiUrl('devnet') },
-  { name: 'localnet' as ENV, endpoint: 'http://127.0.0.1:8899' },
 ];
 
 const DEFAULT = ENDPOINTS[0].endpoint;

yarn.lock

@@ -3805,6 +3805,11 @@
     lodash.isequal "^4.5.0"
     memoize-one "^5.1.1"
 
+"@uniswap/token-lists@^1.0.0-beta.19":
+  version "1.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@uniswap/token-lists/-/token-lists-1.0.0-beta.19.tgz#5256db144fba721a6233f43b92ffb388cbd58327"
+  integrity sha512-19V3KM7DAe40blWW1ApiaSYwqbq0JTKMO3yChGBrXzQBl+BoQZRTNZ4waCyoZ5QM45Q0Mxd6bCn6jXcH9G1kjg==
+
 "@walletconnect/client@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@walletconnect/client/-/client-1.3.6.tgz#537b7af6bf87a906fcf171fd5bc4e56a2a3d1908"