Add base layout

renderer/src/App.tsx

@@ -6,6 +6,7 @@ import Sentry from 'src/components/Sentry'
 import Plausible from 'src/components/Plausible'
 import { HelmetProvider, Helmet } from 'react-helmet-async'
 import { ROUTES } from 'src/lib/routes'
+import Layout from 'src/components/Layout'
 
 const App = ():JSX.Element => {
   return (
@@ -19,13 +20,13 @@ const App = ():JSX.Element => {
           <Route
             path="*"
             element={
-            <>
+            <Layout>
               <Sentry />
               <Plausible />
               <Routes>
                 <Route path={ROUTES.dashboard} element={<Dashboard />} />
               </Routes>
-            </>
+            </Layout>
             }
           >
           </Route>

renderer/src/components/Layout.tsx

@@ -0,0 +1,29 @@
+import { ReactNode, useState } from 'react'
+import Sidebar from 'src/components/Sidebar'
+import UpdateBanner from 'src/components/UpdateBanner'
+import Modal from 'src/components/Modal'
+import WalletWidget from 'src/components/WalletWidget'
+
+const Layout = ({ children }: {children: ReactNode}) => {
+  const [walletCurtainIsOpen, setWalletCurtainIsOpen] = useState(false)
+
+  const toggleCurtain = () => setWalletCurtainIsOpen(!walletCurtainIsOpen)
+
+  return (
+    <div className='h-screen w-screen overflow-hidden bg-grayscale-100'>
+      <div className='w-full flex flex-wrap justify-end'>
+        <UpdateBanner />
+        <Modal isOpen={walletCurtainIsOpen} setIsOpen={toggleCurtain} />
+        <WalletWidget onClick={toggleCurtain} />
+      </div>
+      <div className='flex w-full'>
+      <Sidebar />
+      <main className='flex-1'>
+        {children}
+      </main>
+      </div>
+    </div>
+  )
+}
+
+export default Layout

renderer/src/components/Sidebar.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom'
+import { ROUTES } from 'src/lib/routes'
+
+const Sidebar = () => {
+  return (
+    <nav className='flex flex-col gap-4 mt-6 px-4'>
+        <Link to={ROUTES.dashboard}>Dashboard</Link>
+        <Link to={ROUTES.modules}>Modules</Link>
+        <Link to={ROUTES.wallet}>Wallet</Link>
+        <Link to={ROUTES.settings}>Settings</Link>
+    </nav>
+  )
+}
+
+export default Sidebar

renderer/src/pages/dashboard/Dashboard.tsx

@@ -1,9 +1,5 @@
-import { useState } from 'react'
 import HeaderBackgroundImage from 'src/assets/img/header.png'
-import Modal from 'src/components/Modal'
 import ActivityLog from 'src/components/ActivityLog'
-import UpdateBanner from 'src/components/UpdateBanner'
-import WalletWidget from 'src/components/WalletWidget'
 import useStationActivity from 'src/hooks/StationActivity'
 import { formatTokenValue } from 'src/utils/number-ops'
 
@@ -15,69 +11,58 @@ once a month, provided you have earned more than the payout threshold.
 
 const Dashboard = (): JSX.Element => {
   const { totalJobs, scheduledRewards, activities } = useStationActivity()
-  const [walletCurtainIsOpen, setWalletCurtainIsOpen] = useState<boolean>(false)
-  const toggleCurtain = () => setWalletCurtainIsOpen(!walletCurtainIsOpen)
 
   return (
-    <div className="h-screen w-screen overflow-hidden bg-grayscale-100">
-      <UpdateBanner />
-      <div className=''>
-        <Modal isOpen={walletCurtainIsOpen} setIsOpen={toggleCurtain} />
-      </div>
-      <div className="relative">
-        <div className="max-w-[744px] mx-auto">
-          <div
-            className="absolute left-0 z-0 top-0 w-full h-[300px] bg-no-repeat bg-center"
-            style={{
-              backgroundImage: `url(${HeaderBackgroundImage})`,
-              WebkitMaskImage: 'linear-gradient(black, transparent)',
-              maskImage: 'linear-gradient(black, transparent)'
-            }}
-          >
-          </div>
-          <div className="h-[300px] flex flex-col relative z-20">
-            <div className="flex-grow flex pt-4 justify-end justify-items-end">
-              <WalletWidget onClick={toggleCurtain} />
-            </div>
-            <div className="mb-6">
-              <p className="w-fit text-body-3xs text-grayscale-700 uppercase">Total Jobs Completed</p>
-              <p className="w-fit text-header-m font-bold font-number total-jobs" title="total jobs">
-                {totalJobs.toLocaleString()}
-              </p>
-            </div>
-            <div className="mb-6">
-              <p className="w-fit text-body-3xs text-grayscale-700 uppercase">Scheduled rewards</p>
-              <p
-                className="w-fit text-header-m font-bold font-number total-earnings"
-                title={scheduledRewardsTooltip}
-              >
-                {formatTokenValue(scheduledRewards)}<span className="text-header-3xs">&nbsp;FIL</span>
-              </p>
-            </div>
-          </div>
-        </div>
+    <div className="relative">
+      <div className="max-w-[744px] mx-auto">
         <div
-          className="pointer-events-none absolute h-14 bg-grayscale-100 w-full z-20"
+          className="absolute left-0 z-0 top-0 w-full h-[300px] bg-no-repeat bg-center"
           style={{
+            backgroundImage: `url(${HeaderBackgroundImage})`,
             WebkitMaskImage: 'linear-gradient(black, transparent)',
             maskImage: 'linear-gradient(black, transparent)'
           }}
         >
         </div>
-        <div tabIndex={0} className="h-[calc(100vh_-_300px)] overflow-y-auto pt-12 relative z-10">
-          <div className="max-w-[744px] mx-auto overflow-hidden">
-            <ActivityLog activities={activities} />
+        <div className="h-[300px] flex flex-col relative z-20">
+          <div className="mb-6">
+            <p className="w-fit text-body-3xs text-grayscale-700 uppercase">Total Jobs Completed</p>
+            <p className="w-fit text-header-m font-bold font-number total-jobs" title="total jobs">
+              {totalJobs.toLocaleString()}
+            </p>
+          </div>
+          <div className="mb-6">
+            <p className="w-fit text-body-3xs text-grayscale-700 uppercase">Scheduled rewards</p>
+            <p
+              className="w-fit text-header-m font-bold font-number total-earnings"
+              title={scheduledRewardsTooltip}
+            >
+              {formatTokenValue(scheduledRewards)}<span className="text-header-3xs">&nbsp;FIL</span>
+            </p>
           </div>
         </div>
-        <div
-          className="pointer-events-none fixed h-14 bg-grayscale-100 w-full z-10 bottom-0"
-          style={{
-            WebkitMaskImage: 'linear-gradient(transparent, black)',
-            maskImage: 'linear-gradient(transparent, black)'
-          }}
-        >
+      </div>
+      <div
+        className="pointer-events-none absolute h-14 bg-grayscale-100 w-full z-20"
+        style={{
+          WebkitMaskImage: 'linear-gradient(black, transparent)',
+          maskImage: 'linear-gradient(black, transparent)'
+        }}
+      >
+      </div>
+      <div tabIndex={0} className="h-[calc(100vh_-_300px)] overflow-y-auto pt-12 relative z-10">
+        <div className="max-w-[744px] mx-auto overflow-hidden">
+          <ActivityLog activities={activities} />
         </div>
       </div>
+      <div
+        className="pointer-events-none fixed h-14 bg-grayscale-100 w-full z-10 bottom-0"
+        style={{
+          WebkitMaskImage: 'linear-gradient(transparent, black)',
+          maskImage: 'linear-gradient(transparent, black)'
+        }}
+      >
+      </div>
     </div>
   )
 }

renderer/src/test/wallet-interaction.test.tsx

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom'
 import 'src/lib/station-config'
 import { BrowserRouter } from 'react-router-dom'
 import Dashboard from 'src/pages/dashboard/Dashboard'
+import Layout from 'src/components/Layout'
 
 const mockedTransferAllFunds = vi.fn(() => new Promise((resolve, reject) => ({})))
 
@@ -79,7 +80,7 @@ describe('Dashboard wallet interactions', () => {
           getUpdaterStatus: vi.fn(() => new Promise((resolve, reject) => ({})))
         }
       })
-      render(<BrowserRouter><Dashboard /></BrowserRouter>)
+      render(<BrowserRouter><Layout><Dashboard /></Layout></BrowserRouter>)
     })
 
     test('Wallet displays correct balance', () => {

renderer/src/test/wallet.test.tsx

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom'
 import 'src/lib/station-config'
 import { BrowserRouter } from 'react-router-dom'
 import Dashboard from 'src/pages/dashboard/Dashboard'
+import Layout from 'src/components/Layout'
 
 const mockedSetDestinationWalletAddress = vi.fn()
 
@@ -73,7 +74,7 @@ describe('Dashboard wallet display', () => {
           getUpdaterStatus: vi.fn(() => new Promise((resolve, reject) => ({})))
         }
       })
-      render(<BrowserRouter><Dashboard /></BrowserRouter>)
+      render(<BrowserRouter><Layout><Dashboard /></Layout></BrowserRouter>)
     })
 
     test('Wallet curtain opens on click widget and closes on click background shadow', () => {