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 (