From e1cab4e0f4836f203c3cb62a30ea402534202bf8 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg.shuflin@protonmail.com>
Date: Wed, 7 Dec 2022 18:55:13 -0800
Subject: [PATCH] Address sanitization

---
 frontend/src/App.css |  5 +++++
 frontend/src/App.tsx | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74b5e05..2c054ad 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -36,3 +36,8 @@
     transform: rotate(360deg);
   }
 }
+
+div.addressError {
+    background-color: #ff9191;
+
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 50b329e..985e295 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,8 @@ import React, {useState} from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import Web3 from 'web3';
+
 interface AddressesProps {
     addressList: string[];
     setAddressListFn: any;
@@ -9,21 +11,31 @@ interface AddressesProps {
 
 function Addresses(props: AddressesProps) {
     const [inputState, setInputState] = useState("");
+    const [errorText, setErrorText] = useState("");
     const { setAddressListFn, addressList } = props;
 
     const save = () => {
         console.log(inputState);
         //TODO check if correct address format
-        if (addressList.includes(inputState)) {
+        if (!Web3.utils.isAddress(inputState)) {
+            setErrorText("Invalid ETH address");
+            return;
+        }
+        setErrorText("");
+
+        const checksumAddr = Web3.utils.toChecksumAddress(inputState);
+
+        if (addressList.includes(checksumAddr)) {
             //Do nothing
         } else {
-            setAddressListFn([...addressList, inputState]);
+            setAddressListFn([...addressList, checksumAddr]);
         }
         setInputState("");
     }
     return (
             <div>
             <input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input>
+            <div className="addressError">{errorText}</div>
             <button onClick={save}>Add address</button>
             </div>
            );