-
ETH
+
+
+
+
+
-
-
-
- {selectedAccount &&
}
-
+
)
}
diff --git a/src/components/molecules/Web3Donation/connectors.tsx b/src/components/molecules/Web3Donation/connectors.tsx
deleted file mode 100644
index 12a223ae..00000000
--- a/src/components/molecules/Web3Donation/connectors.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Connectors } from 'web3-react'
-// import TrezorApi from 'trezor-connect'
-// import WalletConnectApi from '@walletconnect/web3-subprovider'
-// import FortmaticApi from 'fortmatic'
-// import PortisApi from '@portis/web3'
-
-const {
- InjectedConnector
- // NetworkOnlyConnector,
- // TrezorConnector,
- // LedgerConnector,
- // WalletConnectConnector,
- // FortmaticConnector,
- // PortisConnector
-} = Connectors
-
-// const supportedNetworkURLs = {
-// 1: 'https://mainnet.infura.io/v3/60ab76e16df54c808e50a79975b4779f',
-// 4: 'https://rinkeby.infura.io/v3/60ab76e16df54c808e50a79975b4779f'
-// }
-
-// const defaultNetwork = 1
-
-const MetaMask = new InjectedConnector({
- supportedNetworks: [1]
-})
-
-// const Network = new NetworkOnlyConnector({
-// providerURL: supportedNetworkURLs[1]
-// })
-
-// const Trezor = new TrezorConnector({
-// api: TrezorApi,
-// supportedNetworkURLs,
-// defaultNetwork,
-// manifestEmail: 'noahwz@gmail.com',
-// manifestAppUrl: 'https://codesandbox.io/s/6v5nrq2nqw'
-// })
-
-// const Ledger = new LedgerConnector({
-// supportedNetworkURLs,
-// defaultNetwork
-// })
-
-// const WalletConnect = new WalletConnectConnector({
-// api: WalletConnectApi,
-// bridge: 'https://bridge.walletconnect.org',
-// supportedNetworkURLs,
-// defaultNetwork
-// })
-
-// const Fortmatic = new FortmaticConnector({
-// api: FortmaticApi,
-// apiKey: 'pk_live_F95FEECB1BE324B5',
-// logoutOnDeactivation: false
-// })
-
-// const Portis = new PortisConnector({
-// api: PortisApi,
-// dAppId: '211b48db-e8cc-4b68-82ad-bf781727ea9e',
-// network: 'mainnet'
-// })
-
-export default {
- MetaMask
- // Network,
- // Trezor,
- // Ledger,
- // WalletConnect,
- // Fortmatic,
- // Portis
-}
diff --git a/src/components/molecules/Web3Donation/index.tsx b/src/components/molecules/Web3Donation/index.tsx
index 4595e177..68d33e6b 100644
--- a/src/components/molecules/Web3Donation/index.tsx
+++ b/src/components/molecules/Web3Donation/index.tsx
@@ -1,38 +1,39 @@
-import React, { useEffect, useState } from 'react'
-import { useWeb3Context } from 'web3-react'
+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'
export default function Web3Donation({ address }: { address: string }) {
const {
- setFirstValidConnector,
- error,
+ connector,
library,
+ chainId,
+ account,
+ activate,
active,
- account
- } = useWeb3Context()
- const [amount, setAmount] = useState(0.03)
+ error
+ } = useWeb3()
const [message, setMessage] = useState()
useEffect(() => {
- setFirstValidConnector(['MetaMask'])
- }, [])
+ setMessage(undefined)
- error &&
- setMessage({
- status: 'error',
- text: error.message
- })
+ error &&
+ setMessage({
+ status: 'error',
+ text: getErrorMessage(error, chainId)
+ })
+ }, [connector, account, library, chainId, active, error])
const [transactionHash, setTransactionHash] = useState(undefined)
- async function sendTransaction() {
+ async function sendTransaction(amount: number) {
const signer = library.getSigner()
setMessage({
status: 'loading',
- text: alertMessages().waitingForUser
+ text: getTransactionMessage().waitingForUser
})
const tx = await signer.sendTransaction({
@@ -42,68 +43,26 @@ export default function Web3Donation({ address }: { address: string }) {
setTransactionHash(tx.hash)
setMessage({
status: 'loading',
- text: alertMessages().waitingConfirmation
+ text: getTransactionMessage().waitingConfirmation
})
// setMessage({
// status: 'success',
- // text: alertMessages().success
+ // text: getTransactionMessage().success
// })
}
- const onAmountChange = ({ target }: { target: any }) => {
- setAmount(target.value)
- }
-
return (
- {active && !message ? (
-
+ {!active && !message ? (
+
+ ) : library && account && !message ? (
+
) : (
- message && (
-
- )
+ message &&
)}
)
}
-
-// sendTransaction = () => {
-// const { web3 } = this
-
-// this.setState({
-// inTransaction: true,
-// message: { text: alertMessages().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
-// }
-// })
-// })
-// }
diff --git a/src/components/molecules/Web3Donation/utils.ts b/src/components/molecules/Web3Donation/utils.ts
deleted file mode 100644
index 4f6d7d6a..00000000
--- a/src/components/molecules/Web3Donation/utils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-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 getFiat = async (amount: number) => {
- const url = 'https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=EUR'
- const response = await fetch(url)
- if (!response.ok) console.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.tsx b/src/pages/thanks.tsx
index 5f62d645..8029f776 100644
--- a/src/pages/thanks.tsx
+++ b/src/pages/thanks.tsx
@@ -2,15 +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 connectors from '../components/molecules/Web3Donation/connectors'
import styles from './thanks.module.scss'
-const Web3Provider = loadable(() => import('web3-react'))
-const Web3Donation = loadable(() =>
+const LazyWeb3Donation = loadable(() =>
import('../components/molecules/Web3Donation')
)
@@ -36,7 +36,7 @@ export default function Thanks() {
)
return (
- <>
+
Say thanks
@@ -47,33 +47,30 @@ export default function Thanks() {
-
-
- } address={author.ether} />
-