4 changed files with 90 additions and 128 deletions
--- a/package.json
+++ b/package.json
@ -40,7 +40,6 @@
    "@web3modal/react": "^2.0.0-beta.8",
    "airdrop-artifact": "file:./artifacts/contracts/Airdrop.sol/",
    "create-react-app": "^5.0.1",
-    "eslint": "^8.29.0",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/src/App.css
+++ b/src/App.css
@ -1,54 +1,18 @@
-html {
-    height: 100%;
-}
-
-body {
-    height: 100%;
-    font-family: Lato, "Helvetica Neue", sans-serif;
-}
-
-div#root {
-    height: 100%;
-    color: white;
-}
-
 .App {
-  display: grid;
-  grid-template-columns: 20% auto;
-  height: 100%;
+  text-align: center;
 }

-.sidebar {
-    grid-column: 1;
-    background-color: #5a6066;
-    text-align: center;
-    border-right: #8b8b8a;
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
 }

-.connectorButton {
-
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }

-main.main {
-  background-color: black;
-  grid-column: 2;
-  padding: 10px;
-}
-
-.airdropPanel {
-    display: grid;
-    grid-template-columns: 30% auto;
-}
-
-.airdropSettings {
-    grid-column: 1;
-}
-
-.addressList {
-    grid-column: 2;
-}
-
-
 .App-header {
  background-color: #282c34;
  min-height: 100vh;
@ -74,5 +38,6 @@ main.main {
 }

 div.addressError {
-    background-color: #c52121;
+    background-color: #ff9191;
+
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,11 +1,12 @@
-import React, {useState} from "react";
-import "./App.css";
+import React, {useState} from 'react';
+import logo from './logo.svg';
+import './App.css';

-import Web3 from "web3";
-import { WagmiConfig, createClient, configureChains, mainnet, useConnect, useAccount, useDisconnect } from "wagmi"
+import Web3 from 'web3';
+import { WagmiConfig, createClient, configureChains, mainnet, useConnect, useAccount, useDisconnect } from 'wagmi'

-import { MetaMaskConnector } from "wagmi/connectors/metaMask"
-import { publicProvider } from "wagmi/providers/public"
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
+import { publicProvider } from 'wagmi/providers/public'

 const web3 = new Web3(Web3.givenProvider);

@ -22,17 +23,17 @@ const airdropContract = new web3.eth.Contract(Airdrop.abi as any, airdropAddress
 const { chains, provider, webSocketProvider } = configureChains([mainnet], [publicProvider()]);

 const wagmiClient = createClient({
-    autoConnect: true,
-    connectors: [
-        new MetaMaskConnector({ chains }),
-    ],
-    provider,
-    webSocketProvider,
+  autoConnect: true,
+  connectors: [
+    new MetaMaskConnector({ chains }),
+  ],
+  provider,
+  webSocketProvider,
 })


-function Connector() {
-    const { connect, connectors, error, isLoading, pendingConnector } =
+function Profile() {
+  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect()

    const { address, connector, isConnected } = useAccount()
@ -40,43 +41,39 @@ function Connector() {

    if (isConnected) {
        const connectorName = connector?.name || "unknown connector";
-        return (
-            <div>
-                <div>Connected to {connectorName}!</div>
-                <div>Connected account: <b>{address}</b></div>
-                <button onClick={(_evt) => disconnect() }>Disconnect</button>
-            </div>
-        )
-    }
-
    return (
-        <div className="connector">
-            <div>Not currently connected to a wallet. Connect to...</div>
-            {connectors.map((connector) => (
-                <button
-                    className="connectorButton"
-                    disabled={!connector.ready}
-                    key={connector.id}
-                    onClick={() => connect({ connector })}
-                >
-                    {connector.name}
-                    {!connector.ready && " (unsupported)"}
-                    {isLoading &&
-            connector.id === pendingConnector?.id &&
-            " (connecting)"}
-                </button>
-            ))}
- 
-            {error && <div>{error.message}</div>}
-        </div>
+      <div>
+        <div>Connected to {connectorName} address: {address}</div>
+        <button onClick={(_evt) => disconnect() }>Disconnect</button>
+      </div>
    )
+  }
+
+  return (
+    <div>
+      <div>Connect to Airdrop App</div>
+      {connectors.map((connector) => (
+        <button
+          disabled={!connector.ready}
+          key={connector.id}
+          onClick={() => connect({ connector })}
+        >
+          {connector.name}
+          {!connector.ready && ' (unsupported)'}
+          {isLoading &&
+            connector.id === pendingConnector?.id &&
+            ' (connecting)'}
+        </button>
+      ))}
+ 
+      {error && <div>{error.message}</div>}
+    </div>
+  )
 }



 interface AddressesProps {
-    airdropButtonDisabled: boolean;
-    performAirdrop: any;
    addressList: string[];
    setAddressListFn: any;
    numTokens: number;
@ -86,7 +83,7 @@ interface AddressesProps {
 function Addresses(props: AddressesProps) {
    const [inputState, setInputState] = useState("");
    const [errorText, setErrorText] = useState("");
-    const { airdropButtonDisabled, performAirdrop, setAddressListFn, addressList, numTokens, setNumTokens } = props;
+    const { setAddressListFn, addressList, numTokens, setNumTokens } = props;

    const save = () => {
        if (!web3.utils.isAddress(inputState)) {
@ -113,21 +110,17 @@ function Addresses(props: AddressesProps) {
    }

    return (
-        <section className="airdropSettings">
-            <p>Add an address to airdrop to:</p>
-            <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>
-                <div>Number of tokens:</div>
-                <input type="numeric" value={num} onChange={ (evt) => setNumTokens(parseInt(evt.target.value)) }></input>
-            </div>
-            <div>
-                <button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
-            </div>
-        </section>
+    <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>
    );
 }

@ -138,10 +131,10 @@ interface AddressListProps {
 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>);
+    <p>No addresses specified yet</p> :
+    addressList.map((addr: string) => <div key={addr} className="addressItem">{addr}</div>);
    return (
-        <div className="addressList">
+        <div>
            <h2>Addresses to airdrop to: </h2>
            { addresses }
        </div>
@ -182,24 +175,21 @@ function App() {

    const airdropButtonDisabled = addressList.length == 0 || !isConnected;

-    return (
-        <WagmiConfig client={wagmiClient}>
-            <div className="App">
-                <div className="sidebar">
-                    <h1>Airdrop App</h1>
-                    <Connector/>
-                </div>
-                <main className="main">
-                    <p>Enter your airdropping settings:</p>
-                    <section className="airdropPanel">
-                        <Addresses airdropButtonDisabled={airdropButtonDisabled} performAirdrop={() => performAirdrop()} addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/>
-                        <AddressList addressList={addressList} />
-                    </section>
-                </main>
+  return (
+    <WagmiConfig client={wagmiClient}>
+    <div className="App">
+        <Profile/>

-            </div>
-        </WagmiConfig>
-    );
+        <h1>Airdrop App</h1>
+
+      <p>Add an address to airdrop to:</p>
+      <Addresses addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/>
+      <button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
+      <AddressList addressList={addressList} />
+
+    </div>
+    </WagmiConfig>
+  );
 }

 export default App;
--- a/yarn.lock
+++ b/yarn.lock
@ -6649,7 +6649,7 @@ eslint-webpack-plugin@^3.1.1:
    normalize-path "^3.0.0"
    schema-utils "^4.0.0"

-eslint@^8.29.0, eslint@^8.3.0:
+eslint@^8.3.0:
  version "8.29.0"
  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.29.0.tgz#d74a88a20fb44d59c51851625bc4ee8d0ec43f87"
  integrity sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==
@ -6923,7 +6923,15 @@ ethereum-cryptography@^1.0.3:
    "@scure/bip32" "1.1.0"
    "@scure/bip39" "1.1.0"

-ethereumjs-abi@^0.6.8, "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
+ethereumjs-abi@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/ethereumjs-abi/-/ethereumjs-abi-0.6.8.tgz#71bc152db099f70e62f108b7cdfca1b362c6fcae"
+  integrity sha512-Tx0r/iXI6r+lRsdvkFDlut0N08jWMnKRZ6Gkq+Nmw75lZe4e6o3EkSnkaBP5NF6+m5PTGAr9JP43N3LyeoglsA==
+  dependencies:
+    bn.js "^4.11.8"
+    ethereumjs-util "^6.0.0"
+
+"ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
  version "0.6.8"
  resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#ee3994657fa7a427238e6ba92a84d0b529bbcde0"
  dependencies: