diff --git a/src/components/molecules/Web3Donation/Account.module.css b/src/components/molecules/Web3Donation/Account.module.css index 31ba3de4..6f00c792 100644 --- a/src/components/molecules/Web3Donation/Account.module.css +++ b/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); diff --git a/src/components/molecules/Web3Donation/Account.tsx b/src/components/molecules/Web3Donation/Account.tsx index 051f1b4e..b3082746 100644 --- a/src/components/molecules/Web3Donation/Account.tsx +++ b/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 ? ( + + ) : (