web3/ocean/account timing tweaks

client/src/App.tsx

@@ -12,8 +12,8 @@ import styles from './App.module.scss'
 export default class App extends Component {
     public render() {
         return (
-            <div className={styles.app}>
+            <UserProvider>
-                <UserProvider>
+                <div className={styles.app}>
                     <Router>
                         <>
                             <Header />
@@ -37,8 +37,8 @@ export default class App extends Component {
                             <Footer />
                         </>
                     </Router>
-                </UserProvider>
+                </div>
-            </div>
+            </UserProvider>
         )
     }
 }

client/src/context/UserProvider.tsx

@@ -98,30 +98,37 @@ export default class UserProvider extends Component<{}, UserProviderState> {
         this.initNetworkPoll()
     }
 
+    private getWeb3 = async () => {
+        // Modern dapp browsers
+        if (window.ethereum) {
+            window.web3 = new Web3(window.ethereum)
+            return window.web3
+        }
+        // Legacy dapp browsers
+        else if (window.web3) {
+            window.web3 = new Web3(window.web3.currentProvider)
+            return window.web3
+        }
+        // Non-dapp browsers
+        else {
+            return null
+        }
+    }
+
     private bootstrap = async () => {
         try {
             //
             // Start with Web3 detection only
             //
             this.setState({ message: 'Setting up Web3...' })
+            let web3 = await this.getWeb3()
 
-            // Modern dapp browsers
+            web3
-            if (window.ethereum) {
+                ? this.setState({ isWeb3: true })
-                window.web3 = new Web3(window.ethereum)
+                : this.setState({ isWeb3: false })
-                this.setState({ isWeb3: true })
-            }
-            // Legacy dapp browsers
-            else if (window.web3) {
-                window.web3 = new Web3(window.web3.currentProvider)
-                this.setState({ isWeb3: true })
-            }
-            // Non-dapp browsers
-            else {
-                this.setState({ isWeb3: false })
-            }
 
             // Modern & legacy dapp browsers
-            if (this.state.isWeb3) {
+            if (web3 && this.state.isWeb3) {
                 //
                 // Detecting network with window.web3
                 //
@@ -142,7 +149,7 @@ export default class UserProvider extends Component<{}, UserProviderState> {
                 })
 
                 if (!isNile) {
-                    window.web3 = this.state.web3
+                    web3 = this.state.web3 // eslint-disable-line
                 }
 
                 //
@@ -150,16 +157,15 @@ export default class UserProvider extends Component<{}, UserProviderState> {
                 //
                 this.setState({ message: 'Connecting to Ocean...' })
 
-                const { ocean } = await provideOcean(window.web3)
+                const { ocean } = await provideOcean(web3)
                 this.setState({ ocean })
 
-                // Set proper network names now that we have Ocean
-                await this.fetchNetwork()
-
                 // Get accounts
                 await this.fetchAccounts()
-
                 this.setState({ isLoading: false })
+
+                // Set proper network names now that we have Ocean
+                this.fetchNetwork()
             }
             // Non-dapp browsers
             else {

client/src/routes/Details/index.tsx

@@ -29,18 +29,14 @@ export default class Details extends Component<DetailsProps, DetailsState> {
     public render() {
         const { metadata, ddo } = this.state
 
-        return (
+        return metadata.base.name !== '' ? (
-            <Route
+            <Route title={metadata.base.name}>
-                title={metadata.base ? metadata.base.name : 'Loading Details'}
+                <AssetDetails metadata={metadata} ddo={ddo} />
-            >
-                {metadata && metadata.base.name ? (
-                    <AssetDetails metadata={metadata} ddo={ddo} />
-                ) : (
-                    <div className={stylesApp.loader}>
-                        <Spinner message={'Loading asset...'} />
-                    </div>
-                )}
             </Route>
+        ) : (
+            <div className={stylesApp.loader}>
+                <Spinner message={'Loading asset...'} />
+            </div>
         )
     }
 }

client/src/withTracker.tsx

@@ -7,11 +7,11 @@ interface TrackerProps {
     location: Location
 }
 
-ReactGA.initialize(analyticsId, {
-    testMode: process.env.NODE_ENV === 'test'
-})
-
 export default function withTracker(WrappedComponent: any, options: any = {}) {
+    ReactGA.initialize(analyticsId, {
+        testMode: process.env.NODE_ENV === 'test'
+    })
+
     const trackPage = (page: string) => {
         options.isWeb3 = window.web3 !== undefined
         ReactGA.set({