Address sanitization

This commit is contained in:
Greg Shuflin 2022-12-07 18:55:13 -08:00
parent ff0eb2d7e7
commit e1cab4e0f4
2 changed files with 19 additions and 2 deletions

View File

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

View File

@ -2,6 +2,8 @@ import React, {useState} from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import Web3 from 'web3';
interface AddressesProps { interface AddressesProps {
addressList: string[]; addressList: string[];
setAddressListFn: any; setAddressListFn: any;
@ -9,21 +11,31 @@ interface AddressesProps {
function Addresses(props: AddressesProps) { function Addresses(props: AddressesProps) {
const [inputState, setInputState] = useState(""); const [inputState, setInputState] = useState("");
const [errorText, setErrorText] = useState("");
const { setAddressListFn, addressList } = props; const { setAddressListFn, addressList } = props;
const save = () => { const save = () => {
console.log(inputState); console.log(inputState);
//TODO check if correct address format //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 //Do nothing
} else { } else {
setAddressListFn([...addressList, inputState]); setAddressListFn([...addressList, checksumAddr]);
} }
setInputState(""); setInputState("");
} }
return ( return (
<div> <div>
<input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input> <input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input>
<div className="addressError">{errorText}</div>
<button onClick={save}>Add address</button> <button onClick={save}>Add address</button>
</div> </div>
); );