feat: implement not found and failure flow

src/bootstrap/app.js

@@ -21,6 +21,12 @@ const StyledSpin = styled(Spin)`
   top: 50%;
   transform: translate(-50%, -50%);
 `
+const C404 = loadable(
+  () => import(/* webpackPrefetch: true */ '../containers/404'),
+  {
+    fallback: <StyledSpin />
+  }
+)
 const Home = loadable(
   () => import(/* webpackPrefetch: true */ '../containers/home'),
   {
@@ -40,7 +46,19 @@ const Cases = loadable(
   }
 )
 const Case = loadable(
-  () => import(/* webpackPrefetch: true */ '../containers/case'),
+  async ({
+    match: {
+      params: { ID }
+    }
+  }) => {
+    try {
+      await drizzle.contracts.KlerosLiquid.methods.disputes(ID).call()
+    } catch (err) {
+      console.error(err)
+      return C404
+    }
+    return import(/* webpackPrefetch: true */ '../containers/case')
+  },
   {
     fallback: <StyledSpin />
   }
@@ -112,7 +130,11 @@ export default () => (
       />
     </Helmet>
     <DrizzleProvider drizzle={drizzle}>
-      <Initializer>
+      <Initializer
+        error={<C404 Web3 />}
+        loadingContractsAndAccounts={<C404 Web3 />}
+        loadingWeb3={<StyledSpin />}
+      >
         <ArchonInitializer>
           <BrowserRouter>
             <Layout>
@@ -144,6 +166,7 @@ export default () => (
                     <Route component={Cases} exact path="/cases" />
                     <Route component={Case} exact path="/cases/:ID" />
                     <Route exact path="/tokens" />
+                    <Route component={C404} />
                   </Switch>
                 </StyledLayoutContent>
               </Layout>

src/components/pnk-stats-list-card.js

@@ -8,6 +8,7 @@ import styled from 'styled-components/macro'
 import { useDataloader } from '../bootstrap/dataloader'
 
 const loadingPieChartData = [{ tooltip: 'Loading...', value: 1 }]
+const emptyPieChartData = [{ tooltip: '0 PNK', value: 1 }]
 const StyledDiv = styled.div`
   display: flex;
 `
@@ -105,6 +106,8 @@ const PNKStatsListCard = () => {
         )
       : { loading: true }
   )
+  const disputesAtStakeByIDKeys =
+    !disputes.loading && Object.keys(disputes.atStakeByID)
   return (
     <TitledListCard prefix="PNK" title="Stats">
       <StyledDiv>
@@ -113,6 +116,8 @@ const PNKStatsListCard = () => {
             data={
               loadingSubcourts
                 ? loadingPieChartData
+                : subcourts.length === 0
+                ? emptyPieChartData
                 : subcourts.map(s => ({
                     tooltip: (
                       <Spin spinning={s.name === undefined}>
@@ -133,7 +138,9 @@ const PNKStatsListCard = () => {
             data={
               disputes.loading
                 ? loadingPieChartData
-                : Object.keys(disputes.atStakeByID).map(ID => ({
+                : disputesAtStakeByIDKeys.length === 0
+                ? emptyPieChartData
+                : disputesAtStakeByIDKeys.map(ID => ({
                     tooltip: (
                       <>
                         <StyledAmountSpan>

src/components/theme.css

@@ -18776,6 +18776,29 @@ li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper:hov
 .info-color time {
   color: #009aff;
 }
+.quaternary-fill.theme-fill,
+.quaternary-fill .theme-fill {
+  fill: #ead6fe;
+}
+.quaternary-stroke.theme-stroke,
+.quaternary-stroke .theme-stroke {
+  stroke: #ead6fe;
+}
+.quaternary-background.theme-background,
+.quaternary-background .theme-background,
+.quaternary-background .ant-card-head {
+  background: #ead6fe;
+}
+.quaternary-border-color.theme-border-color,
+.quaternary-border-color .theme-border-color {
+  border-color: #ead6fe;
+}
+.quaternary-color.theme-color,
+.quaternary-color .theme-color,
+.quaternary-color .ant-list-item-extra,
+.quaternary-color time {
+  color: #ead6fe;
+}
 .ternary-fill.theme-fill,
 .ternary-fill .theme-fill {
   fill: #4004a3;

src/components/theme.less

@@ -5,6 +5,7 @@
 @primary-color : @blue-6;
 @secondary-color : #1e075f;
 @ternary-color : #4004a3;
+@quaternary-color: #ead6fe;
 @info-color : @blue-6;
 @success-color : @green-6;
 @processing-color : @blue-6;
@@ -544,8 +545,8 @@
 }
 
 // Theme Colored
-@theme-colors: primary, secondary, ternary, info, success, processing, error,
-  highlight, warning, normal, other;
+@theme-colors: primary, secondary, ternary, quaternary, info, success,
+  processing, error, highlight, warning, normal, other;
 .loop(@i : length(@theme-colors)) when (@i > 0) {
   @name: extract(@theme-colors, @i);
   @theme-color: ~'@{@{name}-color}';

src/containers/404.js

@@ -0,0 +1,69 @@
+import { ReactComponent as Acropolis } from '../assets/images/acropolis.svg'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components/macro'
+
+const StyledDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: ${props => (props.Web3 ? '100vh' : 'calc(100vh - 64px)')};
+  ${props => !props.Web3 && 'margin: 0 -9.375vw -62px;'}
+`
+const StyledAcropolis = styled(Acropolis)`
+  height: auto;
+  width: 100%;
+`
+const StyledInfoDiv = styled.div`
+  flex: 1;
+  padding: 0 9.375vw 62px;
+  text-align: center;
+`
+const Styled404Div = styled.div`
+  font-size: 88px;
+  font-weight: bold;
+  line-height: 112px;
+`
+const StyledMessageLine1 = styled.div`
+  font-size: 28px;
+  font-weight: bold;
+`
+const StyledMessageLine2 = styled.div`
+  font-size: 24px;
+`
+const StyledMessageLine3 = styled.div`
+  font-size: 16px;
+  margin-top: 25px;
+`
+const _404 = ({ Web3 }) => (
+  <StyledDiv Web3={Web3}>
+    <StyledAcropolis />
+    <StyledInfoDiv className="quaternary-background theme-background">
+      <Styled404Div className="primary-color theme-color">
+        {Web3 && 'Web3 '}404
+      </Styled404Div>
+      <StyledMessageLine1 className="ternary-color theme-color">
+        Oops,
+      </StyledMessageLine1>
+      <StyledMessageLine2 className="ternary-color theme-color">
+        {Web3
+          ? 'The gods are having trouble finding your Web3 provider.'
+          : 'Something went wrong in Athens!'}
+      </StyledMessageLine2>
+      <StyledMessageLine3 className="ternary-color theme-color">
+        {Web3
+          ? "Please make sure you have your wallet unlocked on Mainnet or Kovan. If you don't have a wallet, we recommend you install MetaMask on desktop and Trust on mobile."
+          : 'The greek gods are not available at the moment.'}
+      </StyledMessageLine3>
+    </StyledInfoDiv>
+  </StyledDiv>
+)
+
+_404.propTypes = {
+  Web3: PropTypes.bool
+}
+
+_404.defaultProps = {
+  Web3: false
+}
+
+export default _404

src/containers/cases.js

@@ -9,6 +9,9 @@ import styled from 'styled-components/macro'
 const StyledRadioGroup = styled(Radio.Group)`
   float: right;
 `
+const StyledCol = styled(Col)`
+  color: gainsboro;
+`
 export default () => {
   const { useCacheCall, useCacheEvents } = useDrizzle()
   const drizzleState = useDrizzleState(drizzleState => ({
@@ -49,6 +52,7 @@ export default () => {
         )
       : { activeIDs: [], executedIDs: [], loading: true }
   )
+  const filteredDisputes = disputes[filter ? 'activeIDs' : 'executedIDs']
   return (
     <>
       <TopBanner
@@ -75,11 +79,17 @@ export default () => {
       <Divider />
       <Spin spinning={disputes.loading}>
         <Row gutter={48}>
-          {disputes[filter ? 'activeIDs' : 'executedIDs'].map(ID => (
-            <Col key={ID} md={12} xl={8}>
-              <CaseCard ID={ID} />
-            </Col>
-          ))}
+          {filteredDisputes.length === 0 ? (
+            <StyledCol>
+              You don't have any {filter ? 'active' : 'executed'} disputes.
+            </StyledCol>
+          ) : (
+            filteredDisputes.map(ID => (
+              <Col key={ID} md={12} xl={8}>
+                <CaseCard ID={ID} />
+              </Col>
+            ))
+          )}
         </Row>
       </Spin>
     </>

src/containers/courts.js

@@ -6,7 +6,12 @@ import CourtCascaderModal from '../components/court-cascader-modal'
 import CourtDrawer from '../components/court-drawer'
 import StakeModal from '../components/stake-modal'
 import TopBanner from '../components/top-banner'
+import styled from 'styled-components/macro'
 
+const StyledCol = styled(Col)`
+  color: gainsboro;
+  margin-top: 10px;
+`
 export default () => {
   const { useCacheCall } = useDrizzle()
   const drizzleState = useDrizzleState(drizzleState => ({
@@ -38,14 +43,18 @@ export default () => {
       <Spin spinning={!subcourtIDs}>
         <Row gutter={40}>
           {subcourtIDs &&
-            subcourtIDs.map(ID => (
-              <Col key={ID} md={12} xl={8}>
-                <CourtCard
-                  ID={ID}
-                  onClick={setActiveID}
-                  onStakeClick={setStakingID}
-                />
-              </Col>
+            (subcourtIDs.length === 0 ? (
+              <StyledCol>You don't have stake in any courts.</StyledCol>
+            ) : (
+              subcourtIDs.map(ID => (
+                <Col key={ID} md={12} xl={8}>
+                  <CourtCard
+                    ID={ID}
+                    onClick={setActiveID}
+                    onStakeClick={setStakingID}
+                  />
+                </Col>
+              ))
             ))}
         </Row>
       </Spin>