Add a bit of a design

This commit is contained in:
Greg Shuflin 2022-12-08 18:11:44 -08:00
parent 1d8e079e73
commit 3f8d8f632d
2 changed files with 73 additions and 27 deletions

View File

@ -1,18 +1,54 @@
html {
height: 100%;
}
body {
height: 100%;
font-family: Lato, "Helvetica Neue", sans-serif;
}
div#root {
height: 100%;
color: white;
}
.App { .App {
display: grid;
grid-template-columns: 20% auto;
height: 100%;
}
.sidebar {
grid-column: 1;
background-color: #5a6066;
text-align: center; text-align: center;
border-right: #8b8b8a;
} }
.App-logo { .connectorButton {
height: 40vmin;
pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { main.main {
.App-logo { background-color: black;
animation: App-logo-spin infinite 20s linear; grid-column: 2;
} padding: 10px;
} }
.airdropPanel {
display: grid;
grid-template-columns: 30% auto;
}
.airdropSettings {
grid-column: 1;
}
.addressList {
grid-column: 2;
}
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;
@ -38,6 +74,5 @@
} }
div.addressError { div.addressError {
background-color: #ff9191; background-color: #c52121;
} }

View File

@ -31,7 +31,7 @@ const wagmiClient = createClient({
}) })
function Profile() { function Connector() {
const { connect, connectors, error, isLoading, pendingConnector } = const { connect, connectors, error, isLoading, pendingConnector } =
useConnect() useConnect()
@ -42,17 +42,19 @@ function Profile() {
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}!</div>
<div>Connected account: <b>{address}</b></div>
<button onClick={(_evt) => disconnect() }>Disconnect</button> <button onClick={(_evt) => disconnect() }>Disconnect</button>
</div> </div>
) )
} }
return ( return (
<div> <div className="connector">
<div>Connect to Airdrop App</div> <div>Not currently connected to a wallet. Connect to...</div>
{connectors.map((connector) => ( {connectors.map((connector) => (
<button <button
className="connectorButton"
disabled={!connector.ready} disabled={!connector.ready}
key={connector.id} key={connector.id}
onClick={() => connect({ connector })} onClick={() => connect({ connector })}
@ -73,6 +75,8 @@ function Profile() {
interface AddressesProps { interface AddressesProps {
airdropButtonDisabled: boolean;
performAirdrop: any;
addressList: string[]; addressList: string[];
setAddressListFn: any; setAddressListFn: any;
numTokens: number; numTokens: number;
@ -82,7 +86,7 @@ interface AddressesProps {
function Addresses(props: AddressesProps) { function Addresses(props: AddressesProps) {
const [inputState, setInputState] = useState(""); const [inputState, setInputState] = useState("");
const [errorText, setErrorText] = useState(""); const [errorText, setErrorText] = useState("");
const { setAddressListFn, addressList, numTokens, setNumTokens } = props; const { airdropButtonDisabled, performAirdrop, setAddressListFn, addressList, numTokens, setNumTokens } = props;
const save = () => { const save = () => {
if (!web3.utils.isAddress(inputState)) { if (!web3.utils.isAddress(inputState)) {
@ -109,17 +113,21 @@ function Addresses(props: AddressesProps) {
} }
return ( return (
<div> <section className="airdropSettings">
<p>Add an address to airdrop to:</p>
<div> <div>
<input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input> <input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input>
<div className="addressError">{errorText}</div> <div className="addressError">{errorText}</div>
<button onClick={save}>Add address</button> <button onClick={save}>Add address</button>
</div> </div>
<div> <div>
Number of tokens: <div>Number of tokens:</div>
<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>
<button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button>
</div> </div>
</section>
); );
} }
@ -133,7 +141,7 @@ function AddressList({addressList}: AddressListProps) {
<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 className="addressList">
<h2>Addresses to airdrop to: </h2> <h2>Addresses to airdrop to: </h2>
{ addresses } { addresses }
</div> </div>
@ -177,14 +185,17 @@ function App() {
return ( return (
<WagmiConfig client={wagmiClient}> <WagmiConfig client={wagmiClient}>
<div className="App"> <div className="App">
<Profile/> <div className="sidebar">
<h1>Airdrop App</h1> <h1>Airdrop App</h1>
<Connector/>
<p>Add an address to airdrop to:</p> </div>
<Addresses addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/> <main className="main">
<button disabled={airdropButtonDisabled} onClick={performAirdrop} >Perform Airdrop!</button> <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} /> <AddressList addressList={addressList} />
</section>
</main>
</div> </div>
</WagmiConfig> </WagmiConfig>