Address sanitization

frontend/src/App.css

@@ -36,3 +36,8 @@
     transform: rotate(360deg);
   }
 }
+
+div.addressError {
+    background-color: #ff9191;
+
+}

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>
            );