Connect to MetaMask

src/App.tsx

@@ -3,6 +3,10 @@ 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);
 
@@ -11,6 +15,58 @@ import Airdrop from "./Airdrop.json";
 const airdropAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
 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[];
     setAddressListFn: any;
@@ -86,7 +142,9 @@ function App() {
     }
 
   return (
+    <WagmiConfig client={wagmiClient}>
     <div className="App">
+        <Profile/>
 
         <h1>Airdrop App</h1>
 
@@ -96,6 +154,7 @@ function App() {
       <AddressList addressList={addressList} />
 
     </div>
+    </WagmiConfig>
   );
 }