Basic skeleton

frontend/src/App.tsx

@@ -1,24 +1,64 @@
-import React from 'react';
+import React, {useState} from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+interface AddressesProps {
+    addressList: string[];
+    setAddressListFn: any;
+}
+
+function Addresses(props: AddressesProps) {
+    const [inputState, setInputState] = useState("");
+    const { setAddressListFn, addressList } = props;
+
+    const save = () => {
+        console.log(inputState);
+        //TODO check if correct address format
+        if (addressList.includes(inputState)) {
+            //Do nothing
+        } else {
+            setAddressListFn([...addressList, inputState]);
+        }
+        setInputState("");
+    }
+    return (
+            <div>
+            <input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input>
+            <button onClick={save}>Add address</button>
+            </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([]);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+
+        <h1>Airdrop App</h1>
+
+      <p>Add an address to airdrop to:</p>
+      <Addresses addressList={addressList} setAddressListFn={setAddressList}/>
+      <button disabled={addressList.length == 0}>Perform Airdrop!</button>
+      <AddressList addressList={addressList} />
+
     </div>
   );
 }