web3 tweaks

src/components/molecules/Web3Donation/Account.module.css

@@ -1,3 +1,8 @@
+.link {
+  margin-bottom: var(--spacer);
+  display: inline-block;
+}
+
 .accountWrap {
   font-size: var(--font-size-small);
   color: var(--text-color-light);

src/components/molecules/Web3Donation/Account.tsx

@@ -1,15 +1,16 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import { toDataUrl } from 'ethereum-blockies'
 import { formatEther } from '@ethersproject/units'
-import useWeb3 from '../../../hooks/use-web3'
+import useWeb3, { connectors } from '../../../hooks/use-web3'
 import {
   accountWrap,
   blockies as styleBlockies,
-  balance
+  balance,
+  link
 } from './Account.module.css'
 
 export default function Account(): ReactElement {
-  const { library, account } = useWeb3()
+  const { library, account, activate } = useWeb3()
   const [ethBalance, setEthBalance] = useState(0)
   const blockies = account && toDataUrl(account)
 
@@ -29,7 +30,14 @@ export default function Account(): ReactElement {
   const balanceDisplay =
     ethBalance && `Ξ${parseFloat(formatEther(ethBalance)).toPrecision(4)}`
 
-  return (
+  return !account ? (
+    <button
+      className={`link ${link}`}
+      onClick={() => activate(connectors.MetaMask)}
+    >
+      MetaMask
+    </button>
+  ) : (
     <div className={accountWrap} title={account}>
       <span>
         <img className={styleBlockies} src={blockies} alt="Blockies" />

src/components/molecules/Web3Donation/InputGroup.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useState } from 'react'
+import useWeb3 from '../../../hooks/use-web3'
 import Input from '../../atoms/Input'
-import Account from './Account'
 import Conversion from './Conversion'
 import { inputGroup, input, currency } from './InputGroup.module.css'
 
@@ -9,15 +9,15 @@ export default function InputGroup({
 }: {
   sendTransaction(amount: number): void
 }): ReactElement {
-  const [amount, setAmount] = useState(0.03)
+  const { account } = useWeb3()
+  const [amount, setAmount] = useState(0.01)
 
   const onAmountChange = ({ target }: { target: any }) => {
     setAmount(target.value)
   }
 
   return (
-    <div>
-      <Account />
+    <>
       <div className={inputGroup}>
         <div className={input}>
           <Input
@@ -34,11 +34,12 @@ export default function InputGroup({
         <button
           className="btn btn-primary"
           onClick={() => sendTransaction(amount)}
+          disabled={!account}
         >
           Make it rain
         </button>
       </div>
       <Conversion amount={amount} />
-    </div>
+    </>
   )
 }

src/components/molecules/Web3Donation/index.module.css

@@ -1,8 +1,6 @@
 .web3 {
-  min-height: 77px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  composes: container from '../../Layout.module.css';
+  max-width: 20rem;
 }
 
 .web3:empty {

src/components/molecules/Web3Donation/index.tsx

@@ -1,24 +1,17 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import { parseEther } from '@ethersproject/units'
-import useWeb3, { connectors, getErrorMessage } from '../../../hooks/use-web3'
+import useWeb3, { getErrorMessage } from '../../../hooks/use-web3'
 import InputGroup from './InputGroup'
 import Alert, { getTransactionMessage } from './Alert'
-import { web3 } from './index.module.css'
+import { web3 as styleWeb3 } from './index.module.css'
+import Account from './Account'
 
 export default function Web3Donation({
   address
 }: {
   address: string
 }): ReactElement {
-  const {
-    connector,
-    library,
-    chainId,
-    account,
-    activate,
-    active,
-    error
-  } = useWeb3()
+  const { connector, library, chainId, account, active, error } = useWeb3()
   const [message, setMessage] = useState({})
 
   useEffect(() => {
@@ -67,15 +60,12 @@ export default function Web3Donation({
   }
 
   return (
-    <div className={web3}>
-      {!active && !message ? (
-        <button className="link" onClick={() => activate(connectors.MetaMask)}>
-          Activate Web3
-        </button>
-      ) : library && account && !message ? (
-        <InputGroup sendTransaction={sendTransaction} />
+    <div className={styleWeb3}>
+      <Account />
+      {message ? (
+        <Alert message={message} transactionHash={transactionHash} />
       ) : (
-        message && <Alert message={message} transactionHash={transactionHash} />
+        <InputGroup sendTransaction={sendTransaction} />
       )}
     </div>
   )