1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

web3 tweaks

This commit is contained in:
Matthias Kretschmann 2021-03-23 01:09:32 +01:00
parent 3246979e6e
commit 476a3813e8
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 34 additions and 32 deletions

View File

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

View File

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

View File

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

View File

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

View File

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