diff --git a/src/App.css b/src/App.css index 2c054ad..98c4cc8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,54 @@ +html { + height: 100%; +} + +body { + height: 100%; + font-family: Lato, "Helvetica Neue", sans-serif; +} + +div#root { + height: 100%; + color: white; +} + .App { - text-align: center; + display: grid; + grid-template-columns: 20% auto; + height: 100%; } -.App-logo { - height: 40vmin; - pointer-events: none; +.sidebar { + grid-column: 1; + background-color: #5a6066; + text-align: center; + border-right: #8b8b8a; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.connectorButton { + } +main.main { + background-color: black; + grid-column: 2; + padding: 10px; +} + +.airdropPanel { + display: grid; + grid-template-columns: 30% auto; +} + +.airdropSettings { + grid-column: 1; +} + +.addressList { + grid-column: 2; +} + + .App-header { background-color: #282c34; min-height: 100vh; @@ -38,6 +74,5 @@ } div.addressError { - background-color: #ff9191; - + background-color: #c52121; } diff --git a/src/App.tsx b/src/App.tsx index d7a4f02..82dfb89 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,7 +31,7 @@ const wagmiClient = createClient({ }) -function Profile() { +function Connector() { const { connect, connectors, error, isLoading, pendingConnector } = useConnect() @@ -42,17 +42,19 @@ function Profile() { const connectorName = connector?.name || "unknown connector"; return (
-
Connected to {connectorName} address: {address}
+
Connected to {connectorName}!
+
Connected account: {address}
) } return ( -
-
Connect to Airdrop App
+
+
Not currently connected to a wallet. Connect to...
{connectors.map((connector) => (
- Number of tokens: +
Number of tokens:
setNumTokens(parseInt(evt.target.value)) }>
-
+
+ +
+ ); } @@ -133,7 +141,7 @@ function AddressList({addressList}: AddressListProps) {

No addresses specified yet

: addressList.map((addr: string) =>
{addr}
); return ( -
+

Addresses to airdrop to:

{ addresses }
@@ -177,14 +185,17 @@ function App() { return (
- - -

Airdrop App

- -

Add an address to airdrop to:

- - - +
+

Airdrop App

+ +
+
+

Enter your airdropping settings:

+
+ performAirdrop()} addressList={addressList} setAddressListFn={setAddressList} numTokens={numTokens} setNumTokens={setNumTokens}/> + +
+