Connect to MetaMask

This commit is contained in:
Greg Shuflin 2022-12-07 23:29:13 -08:00
parent b763ba9c9a
commit 13fcce3c8e

View File

@ -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>
);
}