diff --git a/client/src/App.tsx b/client/src/App.tsx index 87d5ccd..bddc57f 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -12,8 +12,8 @@ import styles from './App.module.scss' export default class App extends Component { public render() { return ( -
- + +
<>
@@ -37,8 +37,8 @@ export default class App extends Component {
+
+ ) } } diff --git a/client/src/context/UserProvider.tsx b/client/src/context/UserProvider.tsx index 60a6507..630e07b 100644 --- a/client/src/context/UserProvider.tsx +++ b/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 - if (window.ethereum) { - window.web3 = new Web3(window.ethereum) - 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 }) - } + web3 + ? this.setState({ isWeb3: true }) + : 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 { diff --git a/client/src/routes/Details/index.tsx b/client/src/routes/Details/index.tsx index b8131e0..1166a77 100644 --- a/client/src/routes/Details/index.tsx +++ b/client/src/routes/Details/index.tsx @@ -29,18 +29,14 @@ export default class Details extends Component { public render() { const { metadata, ddo } = this.state - return ( - - {metadata && metadata.base.name ? ( - - ) : ( -
- -
- )} + return metadata.base.name !== '' ? ( + + + ) : ( +
+ +
) } } diff --git a/client/src/withTracker.tsx b/client/src/withTracker.tsx index 8d6935f..4345157 100644 --- a/client/src/withTracker.tsx +++ b/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({