Connect to MetaMask

package.json

@@ -22,7 +22,7 @@
     "@types/mocha": "^9.1.0",
     "@types/node": ">=12.0.0",
     "chai": "^4.2.0",
-    "ethers": "^5.4.7",
+    "ethers": "^5.7.2",
     "hardhat": "^2.12.2",
     "hardhat-gas-reporter": "^1.0.8",
     "solidity-coverage": "^0.8.0",
@@ -36,14 +36,17 @@
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@web3modal/ethereum": "^2.0.0-beta.8",
+    "@web3modal/react": "^2.0.0-beta.8",
+    "airdrop-artifact": "file:./artifacts/contracts/Airdrop.sol/",
     "create-react-app": "^5.0.1",
     "express": "^4.18.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
+    "wagmi": "^0.9.0",
     "web3": "^1.8.1",
-    "web3-eth": "^1.8.1",
-    "airdrop-artifact": "file:./artifacts/contracts/Airdrop.sol/"
+    "web3-eth": "^1.8.1"
   },
   "browserslist": {
     "production": [

src/App.tsx

@@ -3,13 +3,69 @@ import logo from './logo.svg';
 import './App.css';
 
 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'
 
 const web3 = new Web3(Web3.givenProvider);
 
-import { Airdrop } from 'airdrop-artifact';
+import Airdrop from "./Airdrop.json";
 
 const airdropAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
-const airdropContract = new web3.eth.Contract(Airdrop as any, airdropAddress);
+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,
+})
+
+
+function Profile() {
+  const { connect, connectors, error, isLoading, pendingConnector } =
+    useConnect()
+
+    const { address, connector, isConnected } = useAccount()
+    const { disconnect } = useDisconnect()
+
+    if (isConnected) {
+        const connectorName = connector?.name || "unknown connector";
+    return (
+      <div>
+        <div>Connected to {connectorName} address: {address}</div>
+        <button onClick={(_evt) => disconnect() }>Disconnect</button>
+      </div>
+    )
+  }
+
+  return (
+    <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 {
     addressList: string[];
@@ -19,11 +75,10 @@ interface AddressesProps {
 function Addresses(props: AddressesProps) {
     const [inputState, setInputState] = useState("");
     const [errorText, setErrorText] = useState("");
+    const [numTokens, setNumTokens] = useState(0);
     const { setAddressListFn, addressList } = props;
 
     const save = () => {
-        console.log(inputState);
-        //TODO check if correct address format
         if (!web3.utils.isAddress(inputState)) {
             setErrorText("Invalid ETH address");
             return;
@@ -39,13 +94,27 @@ function Addresses(props: AddressesProps) {
         }
         setInputState("");
     }
+
+    var num;
+    if (isNaN(numTokens) || numTokens < 0) {
+        num = 0;
+    } else {
+        num = numTokens;
+    }
+
     return (
-            <div>
+    <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>
+        <div>
+            Number of tokens:
+            <input type="numeric" value={num} onChange={ (evt) => setNumTokens(parseInt(evt.target.value)) }></input>
+        </div>
+    </div>
+    );
 }
 
 interface AddressListProps {
@@ -68,17 +137,24 @@ function AddressList({addressList}: AddressListProps) {
 function App() {
     const [addressList, setAddressList] = useState([]);
 
+    async function performAirdrop() {
+        console.log("Performing airdrop");
+    }
+
   return (
+    <WagmiConfig client={wagmiClient}>
     <div className="App">
+        <Profile/>
 
         <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>
+      <button disabled={addressList.length == 0} onClick={performAirdrop} >Perform Airdrop!</button>
       <AddressList addressList={addressList} />
 
     </div>
+    </WagmiConfig>
   );
 }