Add a bit of a design

package.json

@@ -40,6 +40,7 @@
     "@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",

src/App.css

@@ -1,18 +1,54 @@
+html {
+    height: 100%;
+}
+
+body {
+    height: 100%;
+    font-family: Lato, "Helvetica Neue", sans-serif;
+}
+
+div#root {
+    height: 100%;
+    color: white;
+}
+
 .App {
-  text-align: center;
+  display: grid;
+  grid-template-columns: 20% auto;
+  height: 100%;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.sidebar {
+    grid-column: 1;
+    background-color: #5a6066;
+    text-align: center;
+    border-right: #8b8b8a;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.connectorButton {
+
 }
 
+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;
@@ -38,6 +74,5 @@
 }
 
 div.addressError {
-    background-color: #ff9191;
-
+    background-color: #c52121;
 }

src/App.tsx

@@ -1,12 +1,11 @@
-import React, {useState} from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, {useState} from "react";
+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);
 
@@ -23,17 +22,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 Profile() {
-  const { connect, connectors, error, isLoading, pendingConnector } =
+function Connector() {
+    const { connect, connectors, error, isLoading, pendingConnector } =
     useConnect()
 
     const { address, connector, isConnected } = useAccount()
@@ -41,39 +40,43 @@ function Profile() {
 
     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>
-        <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 &&
+        <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>
-      ))}
+            " (connecting)"}
+                </button>
+            ))}
  
-      {error && <div>{error.message}</div>}
-    </div>
-  )
+            {error && <div>{error.message}</div>}
+        </div>
+    )
 }
 
 
 
 interface AddressesProps {
+    airdropButtonDisabled: boolean;
+    performAirdrop: any;
     addressList: string[];
     setAddressListFn: any;
     numTokens: number;
@@ -83,7 +86,7 @@ interface AddressesProps {
 function Addresses(props: AddressesProps) {
     const [inputState, setInputState] = useState("");
     const [errorText, setErrorText] = useState("");
-    const { setAddressListFn, addressList, numTokens, setNumTokens } = props;
+    const { airdropButtonDisabled, performAirdrop, setAddressListFn, addressList, numTokens, setNumTokens } = props;
 
     const save = () => {
         if (!web3.utils.isAddress(inputState)) {
@@ -110,17 +113,21 @@ function Addresses(props: AddressesProps) {
     }
 
     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>
+        <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>
     );
 }
 
@@ -131,10 +138,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>
+        <div className="addressList">
             <h2>Addresses to airdrop to: </h2>
             { addresses }
         </div>
@@ -175,21 +182,24 @@ function App() {
 
     const airdropButtonDisabled = addressList.length == 0 || !isConnected;
 
-  return (
-    <WagmiConfig client={wagmiClient}>
-    <div className="App">
-        <Profile/>
+    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>
 
-        <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>
-  );
+            </div>
+        </WagmiConfig>
+    );
 }
 
 export default App;

yarn.lock

@@ -6649,7 +6649,7 @@ eslint-webpack-plugin@^3.1.1:
     normalize-path "^3.0.0"
     schema-utils "^4.0.0"
 
-eslint@^8.3.0:
+eslint@^8.29.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,15 +6923,7 @@ ethereum-cryptography@^1.0.3:
     "@scure/bip32" "1.1.0"
     "@scure/bip39" "1.1.0"
 
-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":
+ethereumjs-abi@^0.6.8, "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: