-
-
-
-
-
-
+const Start = () => {
+ useEffect(() => {
+ requestPermission()
+ }, [])
+
+ let { account } = useWeb3React()
+
+ return
- Step 1/5
-
-
- Initiate a deposit
-
- -
-
- To mint tBTC, we first need to initiate a deposit. This is where we will send BTC.
-This should take less than 1 minute.
-
-
-
-
+
}
-export default withAccount(Start)
+export default Start
diff --git a/src/components/lib/ConnectWalletDialog.js b/src/components/lib/ConnectWalletDialog.js
new file mode 100644
index 00000000..aa9a4442
--- /dev/null
+++ b/src/components/lib/ConnectWalletDialog.js
@@ -0,0 +1,110 @@
+import React, { Component, useReducer, useState } from 'react'
+import Check from '../svgs/Check'
+import { useWeb3React } from '@web3-react/core'
+import { InjectedConnector } from '@web3-react/injected-connector'
+
+const SUPPORTED_CHAIN_IDS = [
+ // Mainnet
+ 1,
+ // Ropsten
+ 3,
+ // Rinkeby
+ 4,
+ // Dev chains (Ganache, Geth)
+ 123, // Low chainId to workaround ledgerjs signing issues.
+ 1337,
+ // Keep testnet
+ 1101
+]
+
+// Connectors.
+const injectedConnector = new InjectedConnector({
+ supportedChainIds: SUPPORTED_CHAIN_IDS
+})
+
+// Wallets.
+const WALLETS = [
+ {
+ name: "Metamask",
+ icon: "/images/metamask-fox.svg",
+ showName: true
+ }
+]
+
+export const ConnectWalletDialog = ({ shown, onConnected }) => {
+ const { active, account, activate } = useWeb3React()
+
+ let [chosenWallet, setChosenWallet] = useState(null)
+ let [error, setError] = useState(null)
+ let state = {
+ chosenWallet,
+ error
+ }
+
+ async function chooseWallet(wallet) {
+ setChosenWallet(wallet)
+
+ try {
+ await activate(injectedConnector, undefined, true)
+ onConnected()
+ } catch(ex) {
+ setError(ex.toString())
+ throw ex
+ }
+ }
+
+ const ChooseWalletStep = () => {
+ return <>
+
+
+
+
+
+
+
+
+ Step 1/5
+
+
+ Initiate a deposit
+
+ +
+
+ To mint TBTC, we first need to initiate a deposit. This is where we will send BTC.
+This should take less than 1 minute.
+
+
- )
- }
+ Connect To A Wallet
+ This wallet will be used to sign transactions on Ethereum.
+ +-
+ {
+ WALLETS.map(({ name, icon, showName }) => {
+ return
- chooseWallet(name)}>
+
+ {showName && name} +
+ })
+ }
+
Connect To A Wallet
+ Connecting to {chosenWallet} wallet...
+ { error &&{error}
} + + } + + const ConnectedView = () => { + return
+
+
+
+
+ }
+
+ return Connect To A Wallet
+
+
+ {chosenWallet}
++ {account} +
+
+
+}
\ No newline at end of file
diff --git a/src/components/lib/Web3Status.js b/src/components/lib/Web3Status.js
index d1ee7844..947eb483 100644
--- a/src/components/lib/Web3Status.js
+++ b/src/components/lib/Web3Status.js
@@ -1,46 +1,37 @@
-import React, { Component } from 'react'
-
-import { withWeb3, withAccount, withConnectDapp } from '../../wrappers/web3'
+import React, { Component, useReducer, useState } from 'react'
import Check from '../svgs/Check'
+import { useWeb3React } from '@web3-react/core'
+import { ConnectWalletDialog } from './ConnectWalletDialog'
+
+export const Web3Status = (props) => {
+ const { active, error } = useWeb3React()
+
+ let [showConnectWallet, setShowConnectWallet] = useState(false)
-class Web3Status extends Component {
- componentDidMount() {
- this.props.connectDapp()
- }
+ let body =
+
+
+ {!chosenWallet &&
+
+
+
+ if(!active) {
+ body =
+ Loading...
+
+
+ setShowConnectWallet(true)}>
+ Connect to a Wallet
+
+
+ }
- render() {
- const { account, loading, web3 } = this.props
+ else if(active) {
+ body =
+
+ }
- if (loading) {
- return (
-
- loading...
-
- )
- }
-
- if (!web3) {
- return (
-
- Web3 not detected. We suggest MetaMask.
-
- )
- }
-
- if (!account) {
- return (
-
- Web3 detected, but you need to connect & log into an account.
-
- )
- }
-
- return (
-
-
- )
- }
+ return
+ setShowConnectWallet(false)} shown={showConnectWallet} />
+ {body}
+
}
-export default withConnectDapp(withWeb3(withAccount(Web3Status)))
+export default Web3Status
\ No newline at end of file
diff --git a/src/css/app.scss b/src/css/app.scss
index f17bb785..0af6f1d3 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -102,6 +102,11 @@ a {
a {
color: unset;
}
+
+ &:hover {
+ background: darken($lighter-grey, 5%);
+ cursor: pointer;
+ }
}
}
@@ -350,4 +355,4 @@ footer {
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/css/modal.scss b/src/css/modal.scss
index 17ed6f59..9badbd6b 100644
--- a/src/css/modal.scss
+++ b/src/css/modal.scss
@@ -29,5 +29,43 @@
padding: 20px 25px 40px 80px;
width: #{$content-width};
background-color: #{$white};
+ border: 1px solid black;
}
}
+
+
+.modal.connect-wallet {
+ .modal-body {
+ padding: 20px 40px;
+ }
+
+ .wallets {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid black;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+
+ .wallet-option {
+ flex: 1;
+ padding: 20px 40px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid black;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &:hover {
+ background-color: darken($white, 5%);
+ cursor: pointer;
+ }
+
+ img {
+ height: 30px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7cba8344..c27fdac5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,21 +35,15 @@ import {
// Wrappers
import Web3Wrapper from './wrappers/web3'
-import { withAccount } from './wrappers/web3'
+import Loadable, { RESTORER } from './wrappers/loadable'
// Redux
import sagas from './sagas'
import reducers from './reducers'
import history from './history'
import { bindActionCreators } from 'redux';
-import { setEthereumAccount, restoreDepositState, restoreRedemptionState } from './actions';
import { connect } from 'react-redux'
-const RESTORER = {
- DEPOSIT: 'deposit',
- REDEMPTION: 'redemption'
-}
-
// Set up our store
const sagaMiddleware = createSagaMiddleware()
const middleware = [
@@ -115,46 +109,7 @@ function AppWrapper() {
)
}
-function LoadableBase({ children, account, setEthereumAccount, restoreDepositState, restoreRedemptionState, restorer }) {
- const { address } = useParams()
- const depositStateRestored = useSelector((state) => state[restorer].stateRestored)
- const stateAccount = useSelector((state) => state.account)
-
- if (account && account !== stateAccount) {
- setEthereumAccount(account)
- }
-
- if (address && ! depositStateRestored) {
- if (stateAccount) {
- if (restorer === RESTORER.DEPOSIT) {
- restoreDepositState(address)
- } else if (restorer === RESTORER.REDEMPTION) {
- restoreRedemptionState(address)
- } else {
- throw new Error("Unknown restorer.")
- }
- }
-
- return Loading...
- } else {
- // FIXME How do we not render these if we're getting ready to transition to
- // FIXME a new page?
- return children
- }
-}
-
-const mapDispatchToProps = (dispatch) => {
- return bindActionCreators(
- {
- setEthereumAccount,
- restoreDepositState,
- restoreRedemptionState
- },
- dispatch
- );
-}
-const Loadable = connect(null, mapDispatchToProps)(withAccount(LoadableBase))
// Render to DOM
window.addEventListener('load', () => {
diff --git a/src/sagas/deposit.js b/src/sagas/deposit.js
index ec25c8a2..18294ac8 100644
--- a/src/sagas/deposit.js
+++ b/src/sagas/deposit.js
@@ -94,7 +94,7 @@ function* restoreState(nextStepMap, stateKey) {
//
// FIXME Check to see if we have a transaction in the mempool for
// FIXME submitting funding proof, and update state accordingly.
-
+
yield put({
type: DEPOSIT_STATE_RESTORED,
})
diff --git a/src/wrappers/loadable.js b/src/wrappers/loadable.js
new file mode 100644
index 00000000..b2415120
--- /dev/null
+++ b/src/wrappers/loadable.js
@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react'
+import { Router, Route, useParams } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect, useSelector } from 'react-redux'
+import { restoreDepositState, restoreRedemptionState } from '../actions';
+import { useWeb3React } from '@web3-react/core'
+
+export const RESTORER = {
+ DEPOSIT: 'deposit',
+ REDEMPTION: 'redemption'
+}
+
+function LoadableBase({ children, account, restoreDepositState, restoreRedemptionState, restorer }) {
+ // Wait for web3 connected
+ const { active: web3Active } = useWeb3React()
+ const { address } = useParams()
+ const depositStateRestored = useSelector((state) => state[restorer].stateRestored)
+
+ useEffect(() => {
+ if(web3Active && address && ! depositStateRestored) {
+ if (restorer == RESTORER.DEPOSIT) {
+ restoreDepositState(address)
+ } else if (restorer == RESTORER.REDEMPTION) {
+ restoreRedemptionState(address)
+ } else {
+ throw "Unknown restorer."
+ }
+ }
+ }, [web3Active, address, depositStateRestored, restorer, restoreDepositState, restoreRedemptionState])
+
+ if(!depositStateRestored) {
+ return
+
+ }
+
+ return children
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return bindActionCreators(
+ {
+ restoreDepositState,
+ restoreRedemptionState
+ },
+ dispatch
+ );
+}
+
+const Loadable = connect(null, mapDispatchToProps)(LoadableBase)
+
+export default Loadable
\ No newline at end of file
diff --git a/src/wrappers/web3.js b/src/wrappers/web3.js
index 9bdab982..dca3db58 100644
--- a/src/wrappers/web3.js
+++ b/src/wrappers/web3.js
@@ -1,154 +1,91 @@
-import React, { Component } from 'react'
+import React, { Component, useEffect, useState } from 'react'
import Web3 from 'web3'
import TBTC from '@keep-network/tbtc.js'
-
-const Web3Context = React.createContext({})
-
-let loadedWeb3 = null
-export let Web3Loaded = new Promise((resolve, _) => {
- function checkAndResolve() {
- if (loadedWeb3) {
- resolve(loadedWeb3)
- } else {
- setTimeout(checkAndResolve, 100)
- }
- }
-
- checkAndResolve()
-})
-
-export let TBTCLoaded = Web3Loaded.then((web3) => {
- web3.eth.defaultAccount = global.ethereum.selectedAddress
- return TBTC.withConfig({
- web3: web3,
- bitcoinNetwork: "testnet",
- electrum: {
- "testnet": {
- "server": "electrumx-server.test.tbtc.network",
- "port": 50002,
- "protocol": "ssl"
- },
- "testnetPublic": {
- "server": "testnet1.bauerj.eu",
- "port": 50002,
- "protocol": "ssl"
- },
- "testnetWS": {
- "server": "electrumx-server.test.tbtc.network",
- "port": 50003,
- "protocol": "ws"
- }
- },
+import { Web3ReactProvider, useWeb3React } from '@web3-react/core'
+
+import config from '../config/config.json'
+
+/**
+ * @typedef {Object} Deferred
+ * @property {(value) => void} resolve - A function to resolve the promise.
+ * @property {(error) => void} reject - A function to reject the promise.
+ * @property {Promise} promise - The promise whose resolution is deferred.
+ */
+/**
+ * Deferred is a Promise that can be resolved,
+ * at a later point in time.
+ * @return {Deferred} A deferred promise.
+ */
+function Deferred() {
+ let resolve
+ let reject
+
+ const promise = new Promise((res, rej) => {
+ resolve = res
+ reject = rej
})
-})
-
-class Web3Wrapper extends Component {
- state = {
- account: null,
- }
- connectDapp = () => {
- let provider
- if (typeof window.ethereum !== 'undefined'
- || (typeof window.web3 !== 'undefined')) {
- provider = window.ethereum || window.web3.currentProvider
-
- this.setState({
- loading: true,
- web3: new Web3(provider)
- }, async () => {
- // Connect to web3 if not done yet
- await this.state.web3.currentProvider.enable()
-
- // Initial fetch
- await this.getAndSetAccountInfo()
-
- this.setState({ loading: false })
- loadedWeb3 = this.state.web3
-
- // Watch for changes
- provider = this.state.web3.eth.currentProvider
- provider.on('networkChanged', this.getAndSetAccountInfo)
- provider.on('accountsChanged', this.getAndSetAccountInfo)
- })
- }
+ return {
+ promise,
+ reject,
+ resolve
}
+}
- getAndSetAccountInfo = async () => {
- const { account:currentAccount, web3 } = this.state
+let Web3LoadedDeferred = new Deferred()
+let TBTCLoadedDeferred = new Deferred()
- if (web3) {
- const accounts = await web3.eth.getAccounts()
- if (accounts.length && accounts[0] !== currentAccount) {
- const balance = await this.getBalanceForAccount(accounts[0])
+export let Web3Loaded = Web3LoadedDeferred.promise
+export let TBTCLoaded = TBTCLoadedDeferred.promise
- this.setState({
- balance,
- account: accounts[0]
- })
- }
- }
- }
+const initializeContracts = async (web3, connector) => {
+ // Initialise default account.
+ const accounts = await web3.eth.getAccounts()
+ web3.eth.defaultAccount = accounts[0]
- getBalanceForAccount = async (account) => {
- const { web3 } = this.state
+ // Log the netId/chainId.
+ const netId = await web3.eth.net.getId()
+ const chainId = await web3.eth.getChainId()
+ console.debug(`netId: ${netId}\nchainId: ${chainId}`)
- if (web3) {
- return await web3.eth.getBalance(account)
- }
- }
-
- render() {
- const { account, balance, loading, web3 } = this.state
-
- const contextValue = {
- account,
- balance,
- loading,
- web3,
- connectDapp: this.connectDapp
- }
+ Web3LoadedDeferred.resolve(web3)
+
+ const tbtc = await TBTC.withConfig({
+ web3: web3,
+ bitcoinNetwork: "testnet",
+ electrum: config.electrum
+ })
- return (
-
+
+ Loading...
+
+
+