Epic: Dashboard

src/routes/Home/index.tsx

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react'
+import styled from 'styled-components'
+import { Breadcrumb, BreadcrumbElement, Menu } from '@gnosis.pm/safe-react-components'
+
+import Page from 'src/components/layout/Page'
+import Row from 'src/components/layout/Row'
+import Col from 'src/components/layout/Col'
+
+const Card = styled.div`
+  background: #fff;
+  padding: 0 20px 30px;
+  border-radius: 8px;
+  flex: 1;
+  max-width: 500px;
+  margin: 10px;
+`
+
+function Home(): ReactElement {
+  return (
+    <Page>
+      <Menu>
+        <Col start="sm" sm={6} xs={12}>
+          <Breadcrumb>
+            <BreadcrumbElement iconType="assets" text="Dashboard" color="primary" />
+          </Breadcrumb>
+        </Col>
+
+        <Col end="sm" sm={6} xs={12} />
+      </Menu>
+
+      <Row>
+        <Card>
+          <h2>Owned Safes</h2>
+        </Card>
+
+        <Card>
+          <h2>Transactions to Sign</h2>
+        </Card>
+
+        <Card>
+          <h2>Gas Fees</h2>
+        </Card>
+      </Row>
+    </Page>
+  )
+}
+
+export default Home

src/routes/index.tsx

@@ -6,22 +6,21 @@ import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
 import { LoadingContainer } from 'src/components/LoaderContainer'
 import { lastViewedSafe } from 'src/logic/currentSession/store/selectors'
 import {
-  generateSafeRoute,
   LOAD_SPECIFIC_SAFE_ROUTE,
   OPEN_SAFE_ROUTE,
   ADDRESSED_ROUTE,
-  SAFE_ROUTES,
   WELCOME_ROUTE,
   ROOT_ROUTE,
   LOAD_SAFE_ROUTE,
   getNetworkRootRoutes,
   extractSafeAddress,
+  HOME_ROUTE,
 } from './routes'
-import { getShortName } from 'src/config'
 import { setChainId } from 'src/logic/config/utils'
 import { setChainIdFromUrl } from 'src/utils/history'
 import { usePageTracking } from 'src/utils/googleTagManager'
 
+const Home = React.lazy(() => import('./Home'))
 const Welcome = React.lazy(() => import('./welcome/Welcome'))
 const CreateSafePage = React.lazy(() => import('./CreateSafePage/CreateSafePage'))
 const LoadSafePage = React.lazy(() => import('./LoadSafePage/LoadSafePage'))
@@ -82,20 +81,15 @@ const Routes = (): React.ReactElement => {
           }
 
           if (defaultSafe) {
-            return (
-              <Redirect
-                to={generateSafeRoute(SAFE_ROUTES.ASSETS_BALANCES, {
-                  shortName: getShortName(),
-                  safeAddress: defaultSafe,
-                })}
-              />
-            )
+            return <Redirect to={HOME_ROUTE} />
           }
 
           return <Redirect to={WELCOME_ROUTE} />
         }}
       />
 
+      <Route component={Home} exact path={HOME_ROUTE} />
+
       <Route component={Welcome} exact path={WELCOME_ROUTE} />
 
       <Route component={CreateSafePage} exact path={OPEN_SAFE_ROUTE} />

src/routes/routes.ts

@@ -41,6 +41,7 @@ export const LOAD_SPECIFIC_SAFE_ROUTE = `/load/:${SAFE_ADDRESS_SLUG}?` // ? = op
 
 // Routes independant of safe/network
 export const ROOT_ROUTE = '/'
+export const HOME_ROUTE = '/home'
 export const WELCOME_ROUTE = '/welcome'
 export const OPEN_SAFE_ROUTE = '/open'
 export const LOAD_SAFE_ROUTE = generatePath(LOAD_SPECIFIC_SAFE_ROUTE) // By providing no slug, we get '/load'