Run eslint on App.tsx
This commit is contained in:
parent
13142d67cc
commit
1d8e079e73
121
src/App.tsx
121
src/App.tsx
@ -1,12 +1,11 @@
|
|||||||
import React, {useState} from 'react';
|
import React, {useState} from "react";
|
||||||
import logo from './logo.svg';
|
import "./App.css";
|
||||||
import './App.css';
|
|
||||||
|
|
||||||
import Web3 from 'web3';
|
import Web3 from "web3";
|
||||||
import { WagmiConfig, createClient, configureChains, mainnet, useConnect, useAccount, useDisconnect } from 'wagmi'
|
import { WagmiConfig, createClient, configureChains, mainnet, useConnect, useAccount, useDisconnect } from "wagmi"
|
||||||
|
|
||||||
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
|
import { MetaMaskConnector } from "wagmi/connectors/metaMask"
|
||||||
import { publicProvider } from 'wagmi/providers/public'
|
import { publicProvider } from "wagmi/providers/public"
|
||||||
|
|
||||||
const web3 = new Web3(Web3.givenProvider);
|
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 { chains, provider, webSocketProvider } = configureChains([mainnet], [publicProvider()]);
|
||||||
|
|
||||||
const wagmiClient = createClient({
|
const wagmiClient = createClient({
|
||||||
autoConnect: true,
|
autoConnect: true,
|
||||||
connectors: [
|
connectors: [
|
||||||
new MetaMaskConnector({ chains }),
|
new MetaMaskConnector({ chains }),
|
||||||
],
|
],
|
||||||
provider,
|
provider,
|
||||||
webSocketProvider,
|
webSocketProvider,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
function Profile() {
|
function Profile() {
|
||||||
const { connect, connectors, error, isLoading, pendingConnector } =
|
const { connect, connectors, error, isLoading, pendingConnector } =
|
||||||
useConnect()
|
useConnect()
|
||||||
|
|
||||||
const { address, connector, isConnected } = useAccount()
|
const { address, connector, isConnected } = useAccount()
|
||||||
@ -41,34 +40,34 @@ function Profile() {
|
|||||||
|
|
||||||
if (isConnected) {
|
if (isConnected) {
|
||||||
const connectorName = connector?.name || "unknown connector";
|
const connectorName = connector?.name || "unknown connector";
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div>Connected to {connectorName} address: {address}</div>
|
<div>Connected to {connectorName} address: {address}</div>
|
||||||
<button onClick={(_evt) => disconnect() }>Disconnect</button>
|
<button onClick={(_evt) => disconnect() }>Disconnect</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div>Connect to Airdrop App</div>
|
<div>Connect to Airdrop App</div>
|
||||||
{connectors.map((connector) => (
|
{connectors.map((connector) => (
|
||||||
<button
|
<button
|
||||||
disabled={!connector.ready}
|
disabled={!connector.ready}
|
||||||
key={connector.id}
|
key={connector.id}
|
||||||
onClick={() => connect({ connector })}
|
onClick={() => connect({ connector })}
|
||||||
>
|
>
|
||||||
{connector.name}
|
{connector.name}
|
||||||
{!connector.ready && ' (unsupported)'}
|
{!connector.ready && " (unsupported)"}
|
||||||
{isLoading &&
|
{isLoading &&
|
||||||
connector.id === pendingConnector?.id &&
|
connector.id === pendingConnector?.id &&
|
||||||
' (connecting)'}
|
" (connecting)"}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{error && <div>{error.message}</div>}
|
{error && <div>{error.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -110,17 +109,17 @@ function Addresses(props: AddressesProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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>
|
<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:
|
Number of tokens:
|
||||||
<input type="numeric" value={num} onChange={ (evt) => setNumTokens(parseInt(evt.target.value)) }></input>
|
<input type="numeric" value={num} onChange={ (evt) => setNumTokens(parseInt(evt.target.value)) }></input>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -131,8 +130,8 @@ interface AddressListProps {
|
|||||||
function AddressList({addressList}: AddressListProps) {
|
function AddressList({addressList}: AddressListProps) {
|
||||||
|
|
||||||
const addresses = addressList.length == 0 ?
|
const addresses = addressList.length == 0 ?
|
||||||
<p>No addresses specified yet</p> :
|
<p>No addresses specified yet</p> :
|
||||||
addressList.map((addr: string) => <div key={addr} className="addressItem">{addr}</div>);
|
addressList.map((addr: string) => <div key={addr} className="addressItem">{addr}</div>);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2>Addresses to airdrop to: </h2>
|
<h2>Addresses to airdrop to: </h2>
|
||||||
@ -175,21 +174,21 @@ function App() {
|
|||||||
|
|
||||||
const airdropButtonDisabled = addressList.length == 0 || !isConnected;
|
const airdropButtonDisabled = addressList.length == 0 || !isConnected;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WagmiConfig client={wagmiClient}>
|
<WagmiConfig client={wagmiClient}>
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Profile/>
|
<Profile/>
|
||||||
|
|
||||||
<h1>Airdrop App</h1>
|
<h1>Airdrop App</h1>
|
||||||
|
|
||||||
<p>Add an address to airdrop to:</p>
|
<p>Add an address to airdrop to:</p>
|
||||||
<Addresses addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/>
|
<Addresses addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/>
|
||||||
<button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
|
<button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
|
||||||
<AddressList addressList={addressList} />
|
<AddressList addressList={addressList} />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</WagmiConfig>
|
</WagmiConfig>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
Loading…
Reference in New Issue
Block a user