@@ -141,30 +125,24 @@ export const ConnectWalletDialog = ({ shown }) => {
}
export const Web3Status = (props) => {
- const { active: networkActive } = useWeb3React()
+ const { active: networkActive, error: networkError } = useWeb3React()
const { active, account, connector, activate, error } = useWeb3React("WALLET")
let [showConnectWallet, setShowConnectWallet] = useState(false)
- // if (!web3) {
- // return (
- //
-
- Loading...
-
+ let body =
+
+ if(!networkActive && networkError) {
+ body =
+ Web3 not detected. We suggest
MetaMask.
}
- if(!active) {
+ else if(networkActive && !active) {
body =
setShowConnectWallet(true)}>
Connect to a Wallet
@@ -172,14 +150,14 @@ export const Web3Status = (props) => {
}
- if(active) {
+ else if(active) {
body =
Connected
}
return
-
+ setShowConnectWallet(false)} shown={showConnectWallet} />
{body}
}
diff --git a/src/css/app.scss b/src/css/app.scss
index 58af492d..f061f04b 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -104,7 +104,8 @@ a {
}
&:hover {
- background: darken($lighter-grey, 0.7);
+ background: darken($lighter-grey, 5%);
+ cursor: pointer;
}
}
}
diff --git a/src/index.js b/src/index.js
index f9618d4c..ba2cf50f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -41,20 +41,15 @@ import {
// Wrappers
import Web3 from 'web3'
import Web3Wrapper 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 = [
@@ -123,38 +118,7 @@ function AppWrapper() {
)
}
-function LoadableBase({ children, account, restoreDepositState, restoreRedemptionState, restorer }) {
- const { address } = useParams()
- const depositStateRestored = useSelector((state) => state[restorer].stateRestored)
-
- if (address && ! depositStateRestored) {
- if (restorer == RESTORER.DEPOSIT) {
- restoreDepositState(address)
- } else if (restorer == RESTORER.REDEMPTION) {
- restoreRedemptionState(address)
- } else {
- throw "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(
- {
- restoreDepositState,
- restoreRedemptionState
- },
- dispatch
- );
-}
-const Loadable = connect(null, mapDispatchToProps)(LoadableBase)
// Compose our static Landing Page
function StaticWrapper() {
diff --git a/src/wrappers/loadable.js b/src/wrappers/loadable.js
new file mode 100644
index 00000000..3c2c8a73
--- /dev/null
+++ b/src/wrappers/loadable.js
@@ -0,0 +1,54 @@
+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: networkActive, error: networkError } = useWeb3React()
+ const { address } = useParams()
+ const depositStateRestored = useSelector((state) => state[restorer].stateRestored)
+
+ useEffect(async () => {
+ if(networkActive) {
+ if (address && ! depositStateRestored) {
+ if (restorer == RESTORER.DEPOSIT) {
+ restoreDepositState(address)
+ } else if (restorer == RESTORER.REDEMPTION) {
+ restoreRedemptionState(address)
+ } else {
+ throw "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
+ }
+ }
+ }, [networkActive])
+
+ 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 445f7234..f26ab870 100644
--- a/src/wrappers/web3.js
+++ b/src/wrappers/web3.js
@@ -18,12 +18,18 @@ export let Web3Loaded = new Promise((resolve, _) => {
checkAndResolve()
})
+
+
function getLibrary(provider, connector) {
return new Web3(provider)
}
+
+
const injectedConnector = new InjectedConnector({})
+
+
const initializeContracts = async (web3) => {
// TruffleContract was built to use web3 0.3.0, which uses an API method of `sendAsync`
// in later versions of web (1.0.0), this method was renamed to `send`
@@ -55,7 +61,7 @@ const Web3ReactManager = ({ children }) => {
useEffect(() => {
injectedConnector.isAuthorized().then(isAuthorized => {
if (isAuthorized) {
- activate(injectedConnector, undefined, true)
+ activate(injectedConnector, undefined, false)
}
setTriedEager(true)
})
@@ -76,9 +82,10 @@ const Web3ReactManager = ({ children }) => {
// provider.on('accountsChanged', this.getAndSetAccountInfo)
// on page load, do nothing until we've tried to connect to the injected connector
- if (!triedEager || !active) {
- return null
- }
+
+ // if (!triedEager || !active) {
+ // return null
+ // }
return children
}