work-sample/src/App.tsx

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

import Web3 from 'web3';

const web3 = new Web3(Web3.givenProvider);

import Airdrop from "./Airdrop.json";

const airdropAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
const airdropContract = new web3.eth.Contract(Airdrop.abi as any, airdropAddress);

interface AddressesProps {
    addressList: string[];
    setAddressListFn: any;
}

function Addresses(props: AddressesProps) {
    const [inputState, setInputState] = useState("");
    const [errorText, setErrorText] = useState("");
    const [numTokens, setNumTokens] = useState(0);
    const { setAddressListFn, addressList } = props;

    const save = () => {
        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, checksumAddr]);
        }
        setInputState("");
    }

    var num;
    if (isNaN(numTokens) || numTokens < 0) {
        num = 0;
    } else {
        num = numTokens;
    }

    return (
    <div>
        <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>
        <div>
            Number of tokens:
            <input type="numeric" value={num} onChange={ (evt) => setNumTokens(parseInt(evt.target.value)) }></input>
        </div>
    </div>
    );
}

interface AddressListProps {
    addressList: string[];
};

function AddressList({addressList}: AddressListProps) {

    const addresses = addressList.length == 0 ?
    <p>No addresses specified yet</p> :
    addressList.map((addr: string) => <div key={addr} className="addressItem">{addr}</div>);
    return (
        <div>
            <h2>Addresses to airdrop to: </h2>
            { addresses }
        </div>
    )
}

function App() {
    const [addressList, setAddressList] = useState([]);

    async function performAirdrop() {
        console.log("Performing airdrop");
    }

  return (
    <div className="App">

        <h1>Airdrop App</h1>

      <p>Add an address to airdrop to:</p>
      <Addresses addressList={addressList} setAddressListFn={setAddressList}/>
      <button disabled={addressList.length == 0} onClick={performAirdrop} >Perform Airdrop!</button>
      <AddressList addressList={addressList} />

    </div>
  );
}

export default App;