cleanup, refactor withTracker HOC

client/src/Routes.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
-import withTracker from './withTracker'
+import withTracker from './hoc/withTracker'
 
 import About from './routes/About'
 import Details from './routes/Details/'

client/src/context/UserProvider.tsx

@@ -130,18 +130,15 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
                 this.setState({ message: 'Connecting to Ocean...' })
 
                 const { ocean } = await provideOcean(web3)
-                this.setState({ ocean })
+                this.setState({ ocean, message: 'Getting accounts...' })
 
                 // Get accounts
                 await this.fetchAccounts()
-                this.setState({
-                    isLoading: false,
-                    requestFromFaucet: () =>
-                        requestFromFaucet(this.state.account)
-                })
 
                 // Set proper network names now that we have Ocean
-                this.fetchNetwork()
+                await this.fetchNetwork()
+
+                this.setState({ isLoading: false })
             }
             // Non-dapp browsers
             else {

client/src/hoc/withTracker.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react'
+import ReactGA, { FieldsObject } from 'react-ga'
+import { RouteComponentProps } from 'react-router-dom'
+import { analyticsId } from '../config/config'
+
+const withTracker = <P extends RouteComponentProps>(
+    WrappedComponent: any,
+    options: FieldsObject = {}
+) => {
+    ReactGA.initialize(analyticsId, {
+        testMode: process.env.NODE_ENV === 'development',
+        debug: process.env.NODE_ENV === 'development'
+    })
+
+    const trackPage = (page: string) => {
+        options.isWeb3 = window.web3 !== undefined
+
+        ReactGA.set({ page, ...options })
+        ReactGA.pageview(page)
+    }
+
+    const HOC = (props: P) => {
+        useEffect(() => trackPage(props.location.pathname), [
+            props.location.pathname
+        ])
+
+        return <WrappedComponent {...props} />
+    }
+
+    return HOC
+}
+
+export default withTracker

client/src/withTracker.tsx

@@ -1,46 +0,0 @@
-import React, { PureComponent } from 'react'
-import ReactGA from 'react-ga'
-
-import { analyticsId } from './config/config'
-
-interface TrackerProps {
-    location: Location
-}
-
-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({
-            page,
-            ...options
-        })
-        ReactGA.pageview(page)
-    }
-
-    return class HOC extends PureComponent<TrackerProps, {}> {
-        public componentDidMount() {
-            const page =
-                this.props.location.pathname + this.props.location.search
-            trackPage(page)
-        }
-
-        public componentWillReceiveProps(nextProps: any) {
-            const currentPage = this.props.location.pathname
-            const nextPage = nextProps.location.pathname
-
-            if (currentPage !== nextPage) {
-                trackPage(
-                    nextProps.location.pathname + nextProps.location.search
-                )
-            }
-        }
-
-        public render() {
-            return <WrappedComponent {...this.props} />
-        }
-    }
-}