feat: error boundary (decentraland#495)

* fix: typescript path

* fix: ignore .vscode

* feat: added error boundary, fixed empty estate detail

* chore: remove comments from docs

.gitignore

@@ -72,3 +72,4 @@ indexer/src/entities
 indexer/src/data/addresses.ts
 indexer/subgraph.yaml
 
+.vscode

webapp/src/components/AssetPage/AssetPage.tsx

@@ -8,6 +8,7 @@ import { Navigation } from '../Navigation'
 import { AssetProviderPage } from '../AssetProviderPage'
 import { NFTDetail } from '../Vendor/NFTDetail'
 import { ItemDetail } from './ItemDetail'
+import { ErrorBoundary } from './ErrorBoundary'
 import { Props } from './AssetPage.types'
 import './AssetPage.css'
 
@@ -18,15 +19,17 @@ const AssetPage = (props: Props) => {
       <Navbar isFullscreen />
       <Navigation isFullscreen />
       <Page className="AssetPage" isFullscreen>
-        <AssetProviderPage type={type}>
-          {asset =>
-            type === AssetType.NFT ? (
-              <NFTDetail nft={asset as Asset<AssetType.NFT>} />
-            ) : AssetType.ITEM ? (
-              <ItemDetail item={asset as Asset<AssetType.ITEM>} />
-            ) : null
-          }
-        </AssetProviderPage>
+        <ErrorBoundary>
+          <AssetProviderPage type={type}>
+            {asset =>
+              type === AssetType.NFT ? (
+                <NFTDetail nft={asset as Asset<AssetType.NFT>} />
+              ) : AssetType.ITEM ? (
+                <ItemDetail item={asset as Asset<AssetType.ITEM>} />
+              ) : null
+            }
+          </AssetProviderPage>
+        </ErrorBoundary>
       </Page>
       <Footer />
     </>

webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Center } from 'decentraland-ui'
+import { Props, State } from './ErrorBoundary.types'
+
+export default class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_error: Error) {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Center>
+          <div className="secondary-text">{t('error_boundary.message')}</div>
+        </Center>
+      )
+    }
+
+    return this.props.children
+  }
+}

webapp/src/components/AssetPage/ErrorBoundary/ErrorBoundary.types.ts

@@ -0,0 +1,5 @@
+export type Props = {}
+
+export type State = {
+  hasError: boolean
+}

webapp/src/components/AssetPage/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+import ErrorBoundary from './ErrorBoundary'
+export { ErrorBoundary }

webapp/src/components/AssetPage/EstateDetail/EstateDetail.css

@@ -22,6 +22,37 @@
   flex: 0 0 auto;
 }
 
+.AssetImage.dissolved {
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.AssetImage.dissolved .atlas-wrapper {
+  filter: blur(5px);
+}
+
+.dissolved-wrapper {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dissolved-notice {
+  background: var(--background);
+  padding: 8px;
+  border-radius: 8px;
+  position: absolute;
+  color: var(--text);
+}
+
+.AssetPage .PageHeader {
+  position: relative;
+}
+
 @media (max-width: 768px) {
   .EstateDetail .estate-title-jump-in {
     display: none !important;

webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Container, Header } from 'decentraland-ui'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAssetName } from '../../../modules/asset/utils'
 import { PageHeader } from '../../PageHeader'
 import { AssetImage } from '../../AssetImage'
@@ -23,16 +24,31 @@ import './EstateDetail.css'
 const EstateDetail = (props: Props) => {
   const { nft } = props
   const estate = nft.data.estate!
-  const { x, y } = estate.parcels[0]
+  let x = 0
+  let y = 0
+
+  if (estate.size > 0) {
+    x = estate.parcels[0].x
+    y = estate.parcels[0].y
+  }
+
   return (
     <>
       <PageHeader>
         <AssetImage
+          className={estate.size === 0 ? 'dissolved' : ''}
           asset={nft}
           isDraggable={true}
           withNavigation={true}
           hasPopup={true}
         />
+        {estate.size === 0 && (
+          <div className="dissolved-wrapper">
+            <div className="dissolved-notice">
+              {t('estate_detail.dissolved')}
+            </div>
+          </div>
+        )}
       </PageHeader>
       <Container className="EstateDetail">
         <Title
@@ -69,7 +85,7 @@ const EstateDetail = (props: Props) => {
         </Row>
         <ProximityHighlights nft={nft} />
         <Bids nft={nft} />
-        <ParcelCoordinates estateId={nft.tokenId} />
+        {estate.size > 0 && <ParcelCoordinates estateId={nft.tokenId} />}
         <TransactionHistory nft={nft} />
       </Container>
     </>

webapp/src/modules/translation/locales/en.json

@@ -23,6 +23,12 @@
     "network": "Network",
     "issue_number": "Issue Number"
   },
+  "error_boundary": {
+    "message": "Oops! Something went wrong..."
+  },
+  "estate_detail": {
+    "dissolved": "This Estate has been dissolved"
+  },
   "vendors": {
     "decentraland": "Decentraland",
     "super_rare": "SuperRare",

webapp/src/modules/translation/locales/es.json

@@ -23,6 +23,12 @@
     "network": "Red",
     "issue_number": "Número de emisión"
   },
+  "error_boundary": {
+    "message": "Oops! Algo salió mal..."
+  },
+  "estate_detail": {
+    "dissolved": "Este Estate ha sido disuelto"
+  },
   "vendors": {
     "decentraland": "Decentraland",
     "super_rare": "SuperRare",

webapp/src/modules/translation/locales/zh.json

@@ -23,6 +23,12 @@
     "network": "网络",
     "issue_number": "发行数量"
   },
+  "error_boundary": {
+    "message": "糟糕！出了点问题......"
+  },
+  "estate_detail": {
+    "dissolved": "这个庄园已经解散了"
+  },
   "vendors": {
     "decentraland": "Decentraland",
     "super_rare": "SuperRare",