Merge pull request #22 from ava-labs/development

ERC20 Support

client/package.json

@@ -12,11 +12,13 @@
     "query-string": "^7.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1",
     "react-select": "^5.3.2",
     "react-spinners": "^0.12.0",
     "typescript": "^4.4.2"
   },
+  "devDependencies": {
+    "react-scripts": "5.0.1"
+  },
   "scripts": {
     "build": "BUILD_PATH='../build/client' react-scripts build",
     "dev": "react-scripts start",

client/src/App.css

@@ -1,3 +1,15 @@
+body::-webkit-scrollbar {
+    width: 2px;
+}
+
+body::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgb(0, 0, 0);
+}
+
+body::-webkit-scrollbar-thumb {
+    background-color: rgb(113, 113, 113);
+}
+
 .app {
     font-family: Avenir,Helvetica,Arial,sans-serif;
     padding-top: 5%;

client/src/App.tsx

@@ -1,8 +1,8 @@
 import FaucetForm from './components/FaucetForm'
 import Contribute from './components/Contribute'
 
-import axios, { config } from './configure';
-import './App.css';
+import axios, { config } from './configure'
+import './App.css'
 
 function App() {
   return (
@@ -11,7 +11,7 @@ function App() {
 
       <Contribute/>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

client/src/components/AddNetwork.tsx

@@ -1,17 +1,15 @@
-import { ethers } from 'ethers';
-
 declare global {
     interface Window {
-        ethereum: any;
+        ethereum: any
     }
 }
 
-const addNetwork = async (config: any) => {
+const addNetwork = async (config: any): Promise<void> => {
     if(!config) {
-        return;
+        return
     }
     if(window.ethereum == undefined) {
-        window.open('https://metamask.io/download', '_blank');
+        window.open('https://metamask.io/download', '_blank')
     }
 
     await window?.ethereum?.request({
@@ -27,23 +25,55 @@ const addNetwork = async (config: any) => {
             rpcUrls: [config.RPC],
             blockExplorerUrls: config.EXPLORER ? [config.EXPLORER] : null
         }]
-    }).catch((error: any) => {
+    }).catch((error: any): void => {
+        console.log(error)
+    })      
+}
+
+const addAsset = async (config: any): Promise<void> => {
+    if(!config) {
+        return
+    }
+    if(window.ethereum == undefined) {
+        window.open('https://metamask.io/download', '_blank')
+    }
+
+    await window?.ethereum?.request({
+        method: 'wallet_watchAsset',
+        params: {
+            type: 'ERC20',
+            options: {
+                address: config.CONTRACTADDRESS,
+                symbol: config.TOKEN,
+                decimals: config.DECIMALS || 18
+            }
+        }
+    }).catch((error: any): void => {
         console.log(error)
-    });      
+    })  
 }
 
 export default function AddNetwork(props: any) {
     return (
         <div className='footer-buttons'>
             <button className="add-network" onClick={() => {addNetwork(props.config)}}>
-                <img style={{width: "25px", height: "25px", marginRight: "5px"}} src="/memtamask.png"/>
+                <img alt='metamask' style={{width: "25px", height: "25px", marginRight: "5px"}} src="/memtamask.png"/>
                 Add Subnet to Metamask
             </button>
 
             <button className="add-network" onClick={() => {window.open(`${props.config.EXPLORER}`, '_blank')}}>
-                <img style={{width: "25px", height: "25px"}} src="/avaxblack.png"/>
+                <img alt="block-explorer" style={{width: "25px", height: "25px"}} src="/avaxblack.png"/>
                 View Block Explorer
             </button>
+
+            {
+                props?.token?.CONTRACTADDRESS
+                &&
+                <button className="add-network" onClick={() => {addAsset(props?.token)}}>
+                    <img alt='asset' style={{width: "25px", height: "25px", marginRight: "5px", borderRadius: "25px"}} src={props?.token?.IMAGE}/>
+                    Add Asset to Metamask
+                </button>
+            }
         </div>
     )
 }

client/src/components/Contribute.tsx

@@ -1,19 +1,25 @@
-import { useState, useEffect } from 'react'; 
+import { useState } from 'react' 
 import './styles/Contribute.css'
 
 const Contribute = () => {
     const [hiddenClass, setHiddenClass] = useState('')
 
     setTimeout(() => {
         setHiddenClass("hide-button")
-    }, 2000);
+    }, 2000)
 
     return (
-        <div className={`contribute-button ${hiddenClass}`} onClick={() => {window.open('https://github.com/ava-labs/avalanche-faucet', '_blank')}}>
-            <img src="/github.png"/>
+        <div
+            className = {`contribute-button ${hiddenClass}`}
+            onClick={
+                () => {
+                    window.open('https://github.com/ava-labs/avalanche-faucet', '_blank')
+                }
+            }>
+            <img alt='github' src="/github.png"/>
             Contribute on Github
         </div>
     )
 }
 
-export default Contribute;
+export default Contribute