feat(performance): block nft and wallet routes until window.coins is …

…loaded

packages/blockchain-wallet-v4-frontend/src/data/rootSaga.js

@@ -1,6 +1,7 @@
-import { all, call, fork } from 'redux-saga/effects'
+import { all, call, fork, put } from 'redux-saga/effects'
 
 import { coreRootSagaFactory, coreSagasFactory } from '@core'
+import { actions } from 'data'
 import miscSagas from 'data/misc/sagas'
 
 import alerts from './alerts/sagaRegister'
@@ -24,6 +25,7 @@ export default function* rootSaga({ api, coinsSocket, networks, options, ratesSo
   const { initAppLanguage, logAppConsoleWarning } = miscSagas()
 
   yield all([
+    put(actions.core.data.coins.pollForCoinData()),
     call(logAppConsoleWarning),
     fork(analytics),
     fork(alerts),

packages/blockchain-wallet-v4-frontend/src/index.js

@@ -4,50 +4,13 @@ import 'regenerator-runtime/runtime.js'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
-import styled from 'styled-components'
-
 import { analyticsTrackingNoStore } from 'services/tracking'
 
-import {
-  FontGlobalStyles,
-  IconGlobalStyles,
-  Image,
-  Text,
-  TextGroup
-} from 'blockchain-info-components'
+import { FontGlobalStyles, IconGlobalStyles } from 'blockchain-info-components'
 
 import App from './scenes/app.tsx'
 import configureStore from './store'
-
-const ErrorWrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-`
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100%;
-`
-const BlockchainLogoImage = styled(Image)`
-  display: block;
-  height: 25px;
-  width: 200px;
-`
-const ErrorText = styled(Text)`
-  color: white;
-  font-weight: 400;
-`
-const BodyText = styled(TextGroup)`
-  margin: 0 20px;
-  text-align: center;
-`
+import Maintenance from './scenes/Maintenance'
 
 configureStore()
   .then((root) => {
@@ -63,22 +26,7 @@ configureStore()
     )
   })
   .catch((e) => {
-    ReactDOM.render(
-      <ErrorWrapper>
-        <Row>
-          <BodyText>
-            <ErrorText size='18px'>
-              Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
-              We&rsquo;ll be back online soon!
-            </ErrorText>
-          </BodyText>
-        </Row>
-        <Row style={{ marginTop: '60px' }}>
-          <BlockchainLogoImage name='blockchain-logo' />
-        </Row>
-      </ErrorWrapper>,
-      document.getElementById('app')
-    )
+    ReactDOM.render(<Maintenance />, document.getElementById('app'))
     const data = {
       events: [
         {

packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/Nfts.tsx

@@ -1,38 +1,38 @@
-import React from 'react'
+import React, { FunctionComponent } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 
 import { CoinfigType, CoinType } from '@core/types'
 import { actions, selectors } from 'data'
 
+import Loading from '../Auth/template.loading'
 import NftsTemplate from './NftsTemplate'
 
-class NftsContainer extends React.PureComponent<Props> {
-  componentDidMount() {
-    this.props.coinsActions.fetchCoinsRates()
-  }
-
-  render() {
-    const { component: Component, pageTitle, path, ...rest } = this.props
-    if (pageTitle) document.title = pageTitle
-
-    return (
-      <Route
-        path={path}
-        render={() => (
-          <NftsTemplate {...this.props}>
-            <Component computedMatch={rest.computedMatch} {...rest} />
-          </NftsTemplate>
-        )}
-      />
-    )
-  }
+const NftsContainer: FunctionComponent<Props> = (props) => {
+  const { component: Component, isCoinDataLoaded, pageTitle, path, ...rest } = props
+  if (pageTitle) document.title = pageTitle
+
+  // TODO: does NFT project want a custom loading page while we wait for coin data? blue loading to white might be a bit harsh
+  // IMPORTANT: do not allow routes to load until window.coins is loaded
+  if (!isCoinDataLoaded) return <Loading />
+
+  return (
+    <Route
+      path={path}
+      render={() => (
+        <NftsTemplate {...props}>
+          <Component computedMatch={rest.computedMatch} {...rest} />
+        </NftsTemplate>
+      )}
+    />
+  )
 }
 
 const mapStateToProps = (state) => ({
   ethAddress: selectors.core.kvStore.eth.getDefaultAddress(state).getOrElse(''),
   isAuthenticated: selectors.auth.isAuthenticated(state),
+  isCoinDataLoaded: selectors.core.data.coins.getIsCoinDataLoaded(state),
   pathname: selectors.router.getPathname(state)
 })
 

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/index.tsx

@@ -5,8 +5,7 @@ import { Redirect, Route } from 'react-router-dom'
 import { selectors } from 'data'
 
 import WalletLayout from './template'
-
-const PAGE_TITLE = 'Blockchain.com Wallet'
+import Loading from './template.loading'
 
 class WalletLayoutContainer extends React.PureComponent<Props> {
   render() {
@@ -15,20 +14,24 @@ class WalletLayoutContainer extends React.PureComponent<Props> {
       component: Component,
       computedMatch,
       isAuthenticated,
+      isCoinDataLoaded,
       path,
       ...rest
     } = this.props
-
-    let isValid = true
+    let isValidRoute = true
     let coin
+
+    document.title = 'Blockchain.com Wallet'
+
+    // IMPORTANT: do not allow routes to load until window.coins is loaded
+    if (!isCoinDataLoaded) return <Loading />
+
     if (path.includes('/transactions')) {
       coin = computedMatch.params.coin
-      if (!window.coins[coin]) isValid = false
+      if (!window.coins[coin]) isValidRoute = false
     }
 
-    document.title = PAGE_TITLE
-
-    return isAuthenticated && isValid ? (
+    return isAuthenticated && isValidRoute ? (
       <Route
         path={path}
         render={(props) => (
@@ -44,7 +47,8 @@ class WalletLayoutContainer extends React.PureComponent<Props> {
 }
 
 const mapStateToProps = (state) => ({
-  isAuthenticated: selectors.auth.isAuthenticated(state)
+  isAuthenticated: selectors.auth.isAuthenticated(state),
+  isCoinDataLoaded: selectors.core.data.coins.getIsCoinDataLoaded(state)
 })
 
 const connector = connect(mapStateToProps)

packages/blockchain-wallet-v4-frontend/src/scenes/Maintenance/Maintenance.tsx

@@ -0,0 +1,65 @@
+import React, { FunctionComponent } from 'react'
+import { Route } from 'react-router-dom'
+import styled from 'styled-components'
+
+import { Image, Text, TextGroup } from 'blockchain-info-components'
+
+const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+`
+const BlockchainLogoImage = styled(Image)`
+  display: block;
+  height: 25px;
+  width: 200px;
+`
+const ErrorText = styled(Text)<{ hasHeader?: boolean }>`
+  color: white;
+  font-weight: 400;
+  padding-top: ${({ hasHeader }) => (hasHeader ? '35vh' : '0px')};
+`
+const BodyText = styled(TextGroup)`
+  margin: 0 20px;
+  text-align: center;
+`
+
+const Error = ({ hasHeader }: { hasHeader?: boolean }) => (
+  <Wrapper>
+    <Row>
+      <BodyText>
+        <ErrorText size='18px' hasHeader>
+          Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
+          We&rsquo;ll be back online soon!
+        </ErrorText>
+      </BodyText>
+    </Row>
+    {!hasHeader && (
+      <Row style={{ marginTop: '60px' }}>
+        <BlockchainLogoImage name='blockchain-logo' />
+      </Row>
+    )}
+  </Wrapper>
+)
+
+const Maintenance: FunctionComponent<{ path?: string }> = ({ path }) => {
+  document.title = 'Blockchain.com Maintenance'
+
+  if (path) {
+    return <Route path={path} render={() => <Error />} />
+  }
+  return <Error hasHeader />
+}
+
+export default Maintenance

packages/blockchain-wallet-v4-frontend/src/scenes/Maintenance/index.ts

@@ -0,0 +1 @@
+export { default } from './Maintenance'

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Asset/Asset.tsx

@@ -285,6 +285,7 @@ const StickyWrapper = styled.div`
 
 const NftAsset: React.FC<Props> = ({
   analyticsActions,
+  coinsActions,
   defaultEthAddr,
   domains,
   formActions,
@@ -310,6 +311,7 @@ const NftAsset: React.FC<Props> = ({
   const [Countdown, setCountdown] = useState('')
 
   useEffect(() => {
+    coinsActions.fetchCoinsRates()
     nftsActions.fetchOpenseaAsset({
       asset_contract_address: contract,
       token_id: id
@@ -1036,6 +1038,7 @@ const mapStateToProps = (state: RootState) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   analyticsActions: bindActionCreators(actions.analytics, dispatch),
+  coinsActions: bindActionCreators(actions.core.data.coins, dispatch),
   formActions: bindActionCreators(actions.form, dispatch),
   nftsActions: bindActionCreators(actions.components.nfts, dispatch),
   routerActions: bindActionCreators(actions.router, dispatch)

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { Icon } from '@blockchain-com/constellation'
 import { IconCamera, IconComputer, IconGlobe } from '@blockchain-com/icons'
@@ -14,7 +14,6 @@ import {
   EventFilterFields,
   useCollectionsQuery
 } from 'generated/graphql.types'
-import { media } from 'services/styles'
 
 import { CollectionHeader, event_types, GridWrapper, NftBannerWrapper } from '../components'
 import NftError from '../components/NftError'
@@ -57,9 +56,13 @@ const LinksContainer = styled.div`
   }
 `
 
-const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) => {
+const NftsCollection: React.FC<Props> = ({ coinsActions, formActions, formValues, ...rest }) => {
   const { slug } = rest.computedMatch.params
 
+  useEffect(() => {
+    coinsActions.fetchCoinsRates()
+  }, [])
+
   const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>('ITEMS')
 
   const [collectionsQuery] = useCollectionsQuery({
@@ -184,6 +187,7 @@ const mapStateToProps = (state: RootState) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   analyticsActions: bindActionCreators(actions.analytics, dispatch),
+  coinsActions: bindActionCreators(actions.core.data.coins, dispatch),
   formActions: bindActionCreators(actions.form, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch)
 })

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Explore/index.tsx

@@ -41,6 +41,7 @@ const Banner = styled.div`
 
 const Explore: React.FC<Props> = (props) => {
   useEffect(() => {
+    props.coinsActions.fetchCoinsRates()
     props.nftsActions.fetchNftCollections({})
   }, [])
 
@@ -100,6 +101,7 @@ const mapStateToProps = (state: RootState) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  coinsActions: bindActionCreators(actions.core.data.coins, dispatch),
   nftsActions: bindActionCreators(actions.components.nfts, dispatch),
   routerActions: bindActionCreators(actions.router, dispatch)
 })