Tmp 4

keep-network · Feb 19, 2020 · 786e8f8 · 786e8f8
1 parent 4f457e2
commit 786e8f8
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 110 deletions.
diff --git a/src/components/lib/Web3Status.js b/src/components/lib/Web3Status.js
@@ -1,51 +1,49 @@
 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'
 import { LedgerConnector } from '@web3-react/ledger-connector'
 import { TrezorConnector } from '@web3-react/trezor-connector'
 
-import Check from '../svgs/Check'
-
-const MAINNET = 1
-
-const CHAIN_IDS = [
-	1,
-	3,
-	1337,
-	123,
-]
-
-const REACT_APP_CHAIN_ID = '1337'
-// const NETWORK_URL = 'http://localhost:8545'
 
+// Connectors.
 const injectedConnector = new InjectedConnector({
-	supportedChainIds: CHAIN_IDS.map(Number)
+	// supportedChainIds: CHAIN_IDS.map(Number)
 })
-
 const ledgerConnector = new LedgerConnector({ chainId: 1, url: '...' })
 const trezorConnector = new TrezorConnector({ chainId: 1, url: '...', manifestEmail: '...', manifestAppUrl: '...' })
 
+// Wallets.
+const WALLETS = [
+	{
+		name: "Metamask",
+		icon: "/images/metamask-fox.svg",
+		showName: true
+	},
+	{
+		name: "Ledger",
+		icon: "/images/ledger.svg"
+	},
+	{
+		name: "Trezor",
+		icon: "/images/trezor.png"
+	}
+]
 
-export const ConnectWalletDialog = ({ shown }) => {
-	const { active, account, connector, activate, error } = useWeb3React("WALLET")
-
-	function closeModal() { }
+export const ConnectWalletDialog = ({ shown, onConnected }) => {
+	const { active, account, connector, activate } = useWeb3React("WALLET")
 
 	const CHOOSE_WALLET = 'CHOOSE_WALLET'
 	const CONNECT_TO_WALLET = 'CONNECT_TO_WALLET'
 	const WALLET_CONNECTED = 'WALLET_CONNECTED'
 
-	const initialState = {
-		chosenWallet: null,
-		status: CHOOSE_WALLET
-	}
-
 	let [chosenWallet, setChosenWallet] = useState(null)
 	let [status, setStatus] = useState(CHOOSE_WALLET)
+	let [error, setError] = useState(null)
 	let state = {
 		chosenWallet,
-		status
+		status,
+		error
 	}
 
 	async function chooseWallet(wallet) {
@@ -60,24 +58,15 @@ export const ConnectWalletDialog = ({ shown }) => {
 			connector = injectedConnector
 		}
 
-		await activate(connector)
-	}
-
-	const WALLETS = [
-		{
-			name: "Metamask",
-			icon: "/images/metamask-fox.svg",
-			showName: true
-		},
-		{
-			name: "Ledger",
-			icon: "/images/ledger.svg"
-		},
-		{
-			name: "Trezor",
-			icon: "/images/trezor.png"
+		try {
+			await activate(connector, undefined, true)
+			onConnected()
+		} catch(ex) {
+			setError(ex.toString())
+			throw ex
 		}
-	]
+
+	}
 
 	const ChooseWalletStep = () => {
 		return <>
@@ -105,7 +94,7 @@ export const ConnectWalletDialog = ({ shown }) => {
 				<div className="title">Connect To A Wallet</div>
 			</header>
 			<p>Connecting to {state.chosenWallet} wallet...</p>
-			<p>{error && error.toString()}</p>
+			<p>{state.error}</p>
 		</>
 	}
 
@@ -124,11 +113,6 @@ export const ConnectWalletDialog = ({ shown }) => {
 		</div>
 	}
 
-	const HARDWARE_WALLETS = [
-		'Ledger', 'Trezor'
-	]
-
-
 	return <div>
 		<div className={`modal connect-wallet ${shown ? 'open' : 'closed'}`}>
 			<div className="modal-body">
@@ -141,45 +125,39 @@ 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 (
-	//     <div className="web3-status alert">
-	//       Web3 not detected.  We suggest <a href="http://metamask.io" target="_blank" rel="noopener noreferrer">MetaMask</a>.
-	//     </div>
-	//   )
-	// }
-
-	let body
-
-	if(!networkActive) {
-		body = <div>
-			<div className="web3-status loading">
-				Loading...
-	       </div>
+	let body = <div>
+		<div className="web3-status loading">
+			Loading...
+		</div>
+	</div>
+
+	if(!networkActive && networkError) {
+		body = <div className="web3-status alert">
+			Web3 not detected.  We suggest <a href="http://metamask.io" target="_blank" rel="noopener noreferrer">MetaMask</a>.
 		</div>
 	}
 
-	if(!active) {
+	else if(networkActive && !active) {
 		body = <div className="web3-status notify">
 			<span onClick={() => setShowConnectWallet(true)}>
 				Connect to a Wallet
 			</span>
 		</div>
 	}
 
-	if(active) {
+	else if(active) {
 		body = <div className="web3-status success">
 			<Check width="15px" /> Connected
 		</div>
 	}
 
 	return <div>
-		<ConnectWalletDialog shown={showConnectWallet} />
+		<ConnectWalletDialog onConnected={() => setShowConnectWallet(false)} shown={showConnectWallet} />
 		{body}
 	</div>
 }

diff --git 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
@@ -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 <div>Loading...</div>
-  } 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
@@ -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 <div>Loading...</div>
+            } 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
diff --git 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
 }