-
ETH
+
+
+
+
+
-
-
-
- {selectedAccount &&
}
-
+
)
}
diff --git a/src/components/molecules/Web3Donation/index.module.scss b/src/components/molecules/Web3Donation/index.module.scss
index 88f83785..c44cbec2 100644
--- a/src/components/molecules/Web3Donation/index.module.scss
+++ b/src/components/molecules/Web3Donation/index.module.scss
@@ -1,20 +1,6 @@
@import 'variables';
.web3 {
- width: 100%;
- text-align: center;
- margin-top: $spacer / 2;
- margin-bottom: $spacer;
- padding-bottom: $spacer;
-
- small {
- color: darken($alert-info, 60%);
- margin-top: -($spacer / 2);
- display: block;
- }
-}
-
-.web3Row {
min-height: 77px;
display: flex;
align-items: center;
diff --git a/src/components/molecules/Web3Donation/index.test.tsx b/src/components/molecules/Web3Donation/index.test.tsx
new file mode 100644
index 00000000..82032469
--- /dev/null
+++ b/src/components/molecules/Web3Donation/index.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { render, waitForElement, fireEvent } from '@testing-library/react'
+import { Web3ReactProvider } from '@web3-react/core'
+import { getLibrary } from '../../../hooks/use-web3'
+
+import Web3Donation from '.'
+
+describe('Web3Donation', () => {
+ it('renders without crashing', async () => {
+ const { container, getByText } = render(
+
+
+
+ )
+ const lazyElement = await waitForElement(() =>
+ container.querySelector('button')
+ )
+ expect(lazyElement).toBeInTheDocument()
+
+ fireEvent.click(lazyElement)
+ const message = await waitForElement(() =>
+ getByText(/No Ethereum browser extension detected/)
+ )
+ expect(message).toBeInTheDocument()
+ })
+})
diff --git a/src/components/molecules/Web3Donation/index.tsx b/src/components/molecules/Web3Donation/index.tsx
index 1ad8392c..863f045c 100644
--- a/src/components/molecules/Web3Donation/index.tsx
+++ b/src/components/molecules/Web3Donation/index.tsx
@@ -1,210 +1,70 @@
-import React, { PureComponent } from 'react'
-import Web3 from 'web3'
+import React, { useState, useEffect } from 'react'
+import useWeb3, { connectors, getErrorMessage } from '../../../hooks/use-web3'
import InputGroup from './InputGroup'
-import Alerts, { alertMessages } from './Alerts'
+import Alert, { getTransactionMessage } from './Alert'
import styles from './index.module.scss'
-import { getWeb3, getAccounts, getNetwork } from './utils'
-const ONE_SECOND = 1000
-const ONE_MINUTE = ONE_SECOND * 60
-const correctNetwork = 1
+export default function Web3Donation({ address }: { address: string }) {
+ const {
+ connector,
+ library,
+ chainId,
+ account,
+ activate,
+ active,
+ error
+ } = useWeb3()
+ const [message, setMessage] = useState()
-interface Web3DonationState {
- netId: number
- networkName: string
- accounts: string[]
- selectedAccount: string
- amount: number
- transactionHash: string
- receipt: string
- message: {
- status?: string
- text?: string
- }
- inTransaction: boolean
-}
+ useEffect(() => {
+ setMessage(undefined)
-export default class Web3Donation extends PureComponent<
- { address: string },
- Web3DonationState
-> {
- state = {
- netId: 0,
- networkName: '',
- accounts: [''],
- selectedAccount: '',
- amount: 0.01,
- transactionHash: '',
- receipt: '',
- message: {},
- inTransaction: false
- }
-
- web3: Web3 = null
- interval: any = null
- networkInterval: any = null
-
- componentDidMount() {
- this.initWeb3()
- }
-
- componentWillUnmount() {
- this.resetAllTheThings()
- }
-
- initWeb3 = async () => {
- this.setState({ message: { text: 'Checking' } })
-
- try {
- this.web3 = await getWeb3()
-
- this.web3
- ? this.initAllTheTings()
- : this.setState({
- message: {
- status: 'error',
- text: alertMessages().noWeb3
- }
- })
- } catch (error) {
- this.setState({
- message: { status: 'error', text: error }
+ error &&
+ setMessage({
+ status: 'error',
+ text: getErrorMessage(error, chainId)
})
- }
- }
+ }, [connector, account, library, chainId, active, error])
- async initAllTheTings() {
- this.fetchAccounts()
- this.fetchNetwork()
+ const [transactionHash, setTransactionHash] = useState(undefined)
- this.initAccountsPoll()
- this.initNetworkPoll()
- }
+ async function sendTransaction(amount: number) {
+ const signer = library.getSigner()
- resetAllTheThings() {
- clearInterval(this.interval)
- clearInterval(this.networkInterval)
- }
-
- initAccountsPoll() {
- if (!this.interval) {
- this.interval = setInterval(this.fetchAccounts, ONE_SECOND * 10)
- }
- }
-
- initNetworkPoll() {
- if (!this.networkInterval) {
- this.networkInterval = setInterval(this.fetchNetwork, ONE_MINUTE)
- }
- }
-
- fetchNetwork = async () => {
- const { web3 } = this
- const { netId, networkName } = await getNetwork(web3)
-
- if (netId === correctNetwork) {
- this.setState({ netId, networkName })
- } else {
- this.setState({
- message: {
- status: 'error',
- text: alertMessages(networkName).noCorrectNetwork
- }
- })
- }
- }
-
- fetchAccounts = async () => {
- const { web3 } = this
- const accounts = await getAccounts(web3)
-
- if (accounts[0]) {
- this.setState({
- accounts,
- selectedAccount: accounts[0].toLowerCase()
- })
- } else {
- this.setState({
- message: {
- status: 'error',
- text: alertMessages().noAccount
- }
- })
- }
- }
-
- sendTransaction = () => {
- const { web3 } = this
-
- this.setState({
- inTransaction: true,
- message: { text: alertMessages().waitingForUser }
+ setMessage({
+ status: 'loading',
+ text: getTransactionMessage().waitingForUser
})
- web3.eth
- .sendTransaction({
- from: this.state.selectedAccount,
- to: this.props.address,
- value: this.state.amount * 1e18 // ETH -> Wei
- })
- .once('transactionHash', transactionHash => {
- this.setState({
- transactionHash,
- message: { text: alertMessages().waitingConfirmation }
- })
- })
- .on('error', error =>
- this.setState({
- message: { status: 'error', text: error.message }
- })
- )
- .then(() => {
- this.setState({
- message: {
- status: 'success',
- text: alertMessages().success
- }
- })
- })
+ const tx = await signer.sendTransaction({
+ to: address,
+ value: amount * 1e18 // ETH -> Wei
+ })
+ setTransactionHash(tx.hash)
+ setMessage({
+ status: 'loading',
+ text: getTransactionMessage().waitingConfirmation
+ })
+
+ await tx.wait()
+
+ setMessage({
+ status: 'success',
+ text: getTransactionMessage().success
+ })
}
- onAmountChange = ({ target }: { target: any }) => {
- this.setState({ amount: target.value })
- }
-
- render() {
- const {
- selectedAccount,
- amount,
- transactionHash,
- message,
- inTransaction
- } = this.state
-
- return (
-
-
-
-
- {selectedAccount &&
- this.state.netId === correctNetwork &&
- !inTransaction ? (
-
- ) : (
- message && (
-
- )
- )}
-
-
- )
- }
+ return (
+
+ {!active && !message ? (
+
+ ) : library && account && !message ? (
+
+ ) : (
+ message &&
+ )}
+
+ )
}
diff --git a/src/components/molecules/Web3Donation/utils.ts b/src/components/molecules/Web3Donation/utils.ts
deleted file mode 100644
index 6675e1f7..00000000
--- a/src/components/molecules/Web3Donation/utils.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import Web3 from 'web3'
-
-declare global {
- interface Window {
- ethereum: any
- web3: Web3
- }
-
- interface Console {
- [key: string]: any
- }
-}
-
-export class Logger {
- static dispatch(verb: any, ...args: any) {
- console[verb](...args)
- }
-
- static log(...args: any) {
- Logger.dispatch('log', ...args)
- }
-
- static debug(...args: any) {
- Logger.dispatch('debug', ...args)
- }
-
- static error(...args: any) {
- Logger.dispatch('error', ...args)
- }
-}
-
-export const getNetworkName = (netId: number) => {
- let networkName
-
- switch (netId) {
- case 1:
- networkName = 'Main'
- break
- case 2:
- networkName = 'Morden'
- break
- case 3:
- networkName = 'Ropsten'
- break
- case 4:
- networkName = 'Rinkeby'
- break
- case 42:
- networkName = 'Kovan'
- break
- default:
- networkName = 'Private'
- }
-
- return networkName
-}
-
-export const getWeb3 = async () => {
- let web3
-
- // Modern dapp browsers...
- if (window.ethereum) {
- web3 = new Web3(window.ethereum)
-
- try {
- // Request account access
- await window.ethereum.enable()
-
- return web3
- } catch (error) {
- // User denied account access...
- Logger.error(error)
- return error
- }
- }
- // Legacy dapp browsers...
- else if (window.web3) {
- web3 = new Web3(window.web3.currentProvider)
-
- return web3
- }
- // Non-dapp browsers...
- else {
- return
- }
-}
-
-export const getAccounts = async (web3: Web3) => {
- const ethAccounts = await web3.eth.getAccounts()
-
- return ethAccounts
-}
-
-export const getNetwork = async (web3: Web3) => {
- const netId = await web3.eth.net.getId()
- const networkName = getNetworkName(netId)
-
- return { netId, networkName }
-}
-
-export const getFiat = async (amount: number) => {
- const url = 'https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=EUR'
- const response = await fetch(url)
- if (!response.ok) Logger.error(response.statusText)
- const data = await response.json()
- /* eslint-disable @typescript-eslint/camelcase */
- const { price_usd, price_eur } = data[0]
- const dollar = (amount * price_usd).toFixed(2)
- const euro = (amount * price_eur).toFixed(2)
- /* eslint-enable @typescript-eslint/camelcase */
-
- return { dollar, euro }
-}
diff --git a/src/hooks/use-web3/connectors.tsx b/src/hooks/use-web3/connectors.tsx
new file mode 100644
index 00000000..ea5a947e
--- /dev/null
+++ b/src/hooks/use-web3/connectors.tsx
@@ -0,0 +1,75 @@
+import { InjectedConnector } from '@web3-react/injected-connector'
+// import { NetworkConnector } from '@web3-react/network-connector'
+// import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+// import { WalletLinkConnector } from '@web3-react/walletlink-connector'
+// import { LedgerConnector } from '@web3-react/ledger-connector'
+// import { TrezorConnector } from '@web3-react/trezor-connector'
+// import { FrameConnector } from '@web3-react/frame-connector'
+// import { AuthereumConnector } from '@web3-react/authereum-connector'
+// import { FortmaticConnector } from '@web3-react/fortmatic-connector'
+// import { PortisConnector } from '@web3-react/portis-connector'
+// import { SquarelinkConnector } from '@web3-react/squarelink-connector'
+// import { TorusConnector } from '@web3-react/torus-connector'
+
+// const POLLING_INTERVAL = 8000
+// const RPC_URLS: { [chainId: number]: string } = {
+// 1: process.env.RPC_URL_1 as string,
+// 4: process.env.RPC_URL_4 as string
+// }
+
+export const MetaMask = new InjectedConnector({
+ supportedChainIds: [1]
+})
+
+// export const network = new NetworkConnector({
+// urls: { 1: RPC_URLS[1], 4: RPC_URLS[4] },
+// defaultChainId: 1,
+// pollingInterval: POLLING_INTERVAL
+// })
+
+// export const walletconnect = new WalletConnectConnector({
+// rpc: { 1: RPC_URLS[1] },
+// bridge: 'https://bridge.walletconnect.org',
+// qrcode: true,
+// pollingInterval: POLLING_INTERVAL
+// })
+
+// export const walletlink = new WalletLinkConnector({
+// url: RPC_URLS[1],
+// appName: 'web3-react example'
+// })
+
+// export const ledger = new LedgerConnector({
+// chainId: 1,
+// url: RPC_URLS[1],
+// pollingInterval: POLLING_INTERVAL
+// })
+
+// export const trezor = new TrezorConnector({
+// chainId: 1,
+// url: RPC_URLS[1],
+// pollingInterval: POLLING_INTERVAL,
+// manifestEmail: 'dummy@abc.xyz',
+// manifestAppUrl: 'http://localhost:1234'
+// })
+
+// export const frame = new FrameConnector({ supportedChainIds: [1] })
+
+// export const authereum = new AuthereumConnector({ chainId: 42 })
+
+// export const fortmatic = new FortmaticConnector({
+// apiKey: process.env.FORTMATIC_API_KEY as string,
+// chainId: 4
+// })
+
+// export const portis = new PortisConnector({
+// dAppId: process.env.PORTIS_DAPP_ID as string,
+// networks: [1, 100]
+// })
+
+// export const squarelink = new SquarelinkConnector({
+// clientId: process.env.SQUARELINK_CLIENT_ID as string,
+// networks: [1, 100]
+// })
+
+// export const torus = new TorusConnector({ chainId: 1 })
diff --git a/src/hooks/use-web3/index.tsx b/src/hooks/use-web3/index.tsx
new file mode 100644
index 00000000..e0d509a8
--- /dev/null
+++ b/src/hooks/use-web3/index.tsx
@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react'
+import { useWeb3React } from '@web3-react/core'
+import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
+import * as connectors from './connectors'
+import {
+ getLibrary,
+ getNetworkName,
+ getErrorMessage,
+ getBalance
+} from './utils'
+
+export { connectors, getLibrary, getNetworkName, getErrorMessage, getBalance }
+
+export function useEagerConnect() {
+ const { MetaMask } = connectors
+ const { activate, active } = useWeb3React()
+ const [tried, setTried] = useState(false)
+
+ useEffect(() => {
+ MetaMask.isAuthorized().then(isAuthorized => {
+ if (isAuthorized) {
+ activate(MetaMask, undefined, true).catch(() => {
+ setTried(true)
+ })
+ } else {
+ setTried(true)
+ }
+ })
+ }, [])
+
+ // if the connection worked, wait until we get confirmation of that to flip the flag
+ useEffect(() => {
+ if (!tried && active) {
+ setTried(true)
+ }
+ }, [tried, active])
+
+ return tried
+}
+
+export function useInactiveListener(suppress = false) {
+ const { active, error, activate } = useWeb3React()
+ const { MetaMask } = connectors
+
+ useEffect((): any => {
+ const { ethereum } = window as any
+ if (ethereum && !active && !error && !suppress) {
+ const handleConnect = () => {
+ console.log("Handling 'connect' event")
+ activate(MetaMask)
+ }
+ const handleChainChanged = (chainId: string | number) => {
+ console.log("Handling 'chainChanged' event with payload", chainId)
+ activate(MetaMask)
+ }
+ const handleNetworkChanged = (networkId: string | number) => {
+ console.log("Handling 'networkChanged' event with payload", networkId)
+ activate(MetaMask)
+ }
+ const handleAccountsChanged = (accounts: string[]) => {
+ console.log("Handling 'accountsChanged' event with payload", accounts)
+ if (accounts.length > 0) {
+ activate(MetaMask)
+ }
+ }
+
+ ethereum.on('connect', handleConnect)
+ ethereum.on('chainChanged', handleChainChanged)
+ ethereum.on('networkChanged', handleNetworkChanged)
+ ethereum.on('accountsChanged', handleAccountsChanged)
+
+ return () => {
+ ethereum.removeListener('networkChanged', handleNetworkChanged)
+ ethereum.removeListener('accountsChanged', handleAccountsChanged)
+ }
+ }
+ }, [active, error, suppress, activate])
+}
+
+export default function useWeb3(): Web3ReactContextInterface {
+ const context = useWeb3React()
+
+ // handle logic to recognize the connector currently being activated
+ const [activatingConnector, setActivatingConnector] = useState()
+
+ useEffect(() => {
+ if (activatingConnector && activatingConnector === context.connector) {
+ setActivatingConnector(undefined)
+ }
+ }, [activatingConnector, context.connector])
+
+ // handle logic to eagerly connect to the injected ethereum provider, if it exists and has granted access already
+ const triedEager = useEagerConnect()
+
+ // handle logic to connect in reaction to certain events on the injected ethereum provider, if it exists
+ useInactiveListener(!triedEager || !!activatingConnector)
+
+ return context
+}
diff --git a/src/hooks/use-web3/utils.tsx b/src/hooks/use-web3/utils.tsx
new file mode 100644
index 00000000..53fdce60
--- /dev/null
+++ b/src/hooks/use-web3/utils.tsx
@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react'
+import { UnsupportedChainIdError } from '@web3-react/core'
+import {
+ NoEthereumProviderError,
+ UserRejectedRequestError
+} from '@web3-react/injected-connector'
+import { Web3Provider } from '@ethersproject/providers'
+
+export function getLibrary(provider: any): Web3Provider {
+ const library = new Web3Provider(provider)
+ library.pollingInterval = 10000
+ return library
+}
+
+export function getNetworkName(netId: number) {
+ let networkName
+
+ switch (netId) {
+ case 1:
+ networkName = 'Main'
+ break
+ case 2:
+ networkName = 'Morden'
+ break
+ case 3:
+ networkName = 'Ropsten'
+ break
+ case 4:
+ networkName = 'Rinkeby'
+ break
+ case 42:
+ networkName = 'Kovan'
+ break
+ default:
+ networkName = 'Private'
+ }
+
+ return networkName
+}
+
+export function getErrorMessage(error: Error, chainId: number) {
+ if (error instanceof NoEthereumProviderError) {
+ return 'No Ethereum browser extension detected, install
MetaMask or
Brave.'
+ } else if (error instanceof UnsupportedChainIdError) {
+ const networkName = getNetworkName(chainId)
+ return `Please connect to
Main network. You are on
${networkName} right now.`
+ } else if (error instanceof UserRejectedRequestError) {
+ return 'Please authorize this website to access your Ethereum account.'
+ } else {
+ console.error(error)
+ return 'An unknown error occurred. Check the console for more details.'
+ }
+}
+
+export function getBalance(account: string, library: any) {
+ const [ethBalance, setEthBalance] = useState()
+
+ useEffect((): any => {
+ if (library && account) {
+ let stale = false
+
+ library
+ .getBalance(account)
+ .then((balance: any) => {
+ if (!stale) {
+ setEthBalance(balance)
+ }
+ })
+ .catch(() => {
+ if (!stale) {
+ setEthBalance(null)
+ }
+ })
+
+ return () => {
+ stale = true
+ setEthBalance(undefined)
+ }
+ }
+ }, [library, account])
+
+ return ethBalance
+}
diff --git a/src/pages/thanks.module.scss b/src/pages/thanks.module.scss
index d7d7908a..e7bb70dd 100644
--- a/src/pages/thanks.module.scss
+++ b/src/pages/thanks.module.scss
@@ -61,6 +61,20 @@
font-size: $font-size-h2;
}
+.web3 {
+ width: 100%;
+ text-align: center;
+ margin-top: $spacer / 2;
+ margin-bottom: $spacer * 2;
+ padding-bottom: $spacer;
+
+ small {
+ color: darken($alert-info, 60%);
+ margin-top: -($spacer / 2);
+ display: block;
+ }
+}
+
.coins {
width: 100%;
diff --git a/src/pages/thanks.tsx b/src/pages/thanks.tsx
index 965f7d0e..56ef5fb0 100644
--- a/src/pages/thanks.tsx
+++ b/src/pages/thanks.tsx
@@ -2,13 +2,15 @@ import React from 'react'
import loadable from '@loadable/component'
import shortid from 'shortid'
import Helmet from 'react-helmet'
+import { Web3ReactProvider } from '@web3-react/core'
import { Author } from '../@types/Site'
import { useSiteMetadata } from '../hooks/use-site-metadata'
+import { getLibrary } from '../hooks/use-web3'
import Qr from '../components/atoms/Qr'
import Icon from '../components/atoms/Icon'
import styles from './thanks.module.scss'
-const Web3Donation = loadable(() =>
+const LazyWeb3Donation = loadable(() =>
import('../components/molecules/Web3Donation')
)
@@ -46,10 +48,19 @@ export default function Thanks() {
Say Thanks
-
Loading...