Merge pull request #401 from lightninglabs/home-screen

ui: add home screen and update sessions list

Author: jamaljsr

app/package.json

@@ -37,6 +37,8 @@
     "mobx": "6.3.2",
     "mobx-react-lite": "3.2.0",
     "mobx-utils": "6.0.4",
+    "qrcode.react": "^3.1.0",
+    "rc-dialog": "^8.9.0",
     "rc-select": "11.5.0",
     "rc-tooltip": "4.2.1",
     "react": "17.0.2",

app/src/App.scss

@@ -16,6 +16,7 @@
 
 // react-component component styles
 @import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
+@import '../node_modules/rc-dialog/assets/index.css';
 @import './assets/styles/rc-select.scss';
 
 // react-toastify styles

app/src/AppRoutes.tsx

@@ -4,6 +4,7 @@ import { Layout } from 'components/layout';
 
 const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
 const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
+const LazyHomePage = React.lazy(() => import('components/home/HomePage'));
 const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'));
 const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
 const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
@@ -14,6 +15,14 @@ const AppRoutes: React.FC = () => {
     <Routes>
       <Route path="/" element={<LazyAuthPage />} />
       <Route>
+        <Route
+          path="home"
+          element={
+            <Layout>
+              <LazyHomePage />
+            </Layout>
+          }
+        />
         <Route
           path="loop"
           element={

app/src/__tests__/components/layout/Layout.spec.tsx

@@ -28,31 +28,31 @@ describe('Layout component', () => {
   it('should navigate to the History page', () => {
     const { getByText, store } = render();
     expect(store.router.location.pathname).toBe('/loop');
-    fireEvent.click(getByText('History'));
+    fireEvent.click(getByText('Loop History'));
     expect(store.router.location.pathname).toBe('/history');
-    expect(getByText('History').parentElement).toHaveClass('active');
+    expect(getByText('Loop History').parentElement).toHaveClass('active');
   });
 
   it('should navigate back to the Loop page', () => {
     const { getByText, store } = render();
     expect(store.router.location.pathname).toBe('/loop');
-    fireEvent.click(getByText('History'));
+    fireEvent.click(getByText('Loop History'));
     expect(store.router.location.pathname).toBe('/history');
-    expect(getByText('History').parentElement).toHaveClass('active');
-    fireEvent.click(getByText('Lightning Loop'));
+    expect(getByText('Loop History').parentElement).toHaveClass('active');
+    fireEvent.click(getByText('Loop'));
     expect(store.router.location.pathname).toBe('/loop');
-    expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
+    expect(getByText('Loop').parentElement).toHaveClass('active');
   });
 
   it('should navigate to the Pool page', () => {
     const { getByText, store } = render();
     expect(store.router.location.pathname).toBe('/loop');
-    fireEvent.click(getByText('Lightning Pool'));
+    fireEvent.click(getByText('Pool'));
     expect(store.router.location.pathname).toBe('/pool');
-    expect(getByText('Lightning Pool').parentElement).toHaveClass('active');
-    fireEvent.click(getByText('Lightning Loop'));
+    expect(getByText('Pool').parentElement).toHaveClass('active');
+    fireEvent.click(getByText('Loop'));
     expect(store.router.location.pathname).toBe('/loop');
-    expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
+    expect(getByText('Loop').parentElement).toHaveClass('active');
   });
 
   it('should navigate to the Settings page', () => {
@@ -61,8 +61,8 @@ describe('Layout component', () => {
     fireEvent.click(getByText('Settings'));
     expect(store.router.location.pathname).toBe('/settings');
     expect(getByText('Settings').parentElement).toHaveClass('active');
-    fireEvent.click(getByText('Lightning Loop'));
+    fireEvent.click(getByText('Loop'));
     expect(store.router.location.pathname).toBe('/loop');
-    expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
+    expect(getByText('Loop').parentElement).toHaveClass('active');
   });
 });

app/src/assets/icons/bolt-outlined.svg

@@ -30,6 +30,8 @@ import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-cw.svg';
 import { ReactComponent as SettingsIcon } from 'assets/icons/settings.svg';
 import { ReactComponent as CancelIcon } from 'assets/icons/slash.svg';
 import { ReactComponent as UserPlusIcon } from 'assets/icons/user-plus.svg';
+import { ReactComponent as QRCodeIcon } from 'assets/icons/qr.svg';
+import { ReactComponent as BoltOutlinedIcon } from 'assets/icons/bolt-outlined.svg';
 
 interface IconProps {
   size?: 'x-small' | 'small' | 'medium' | 'large';
@@ -119,3 +121,5 @@ export const Settings = Icon.withComponent(SettingsIcon);
 export const UserPlus = Icon.withComponent(UserPlusIcon);
 export const BarChart = Icon.withComponent(BarChartIcon);
 export const List = Icon.withComponent(ListIcon);
+export const QRCode = Icon.withComponent(QRCodeIcon);
+export const BoltOutlined = Icon.withComponent(BoltOutlinedIcon);