From 18807afea158f64eb0241b89cdafde3ec1847f4a Mon Sep 17 00:00:00 2001
From: Samuel Siegart <samsiegart@gmail.com>
Date: Mon, 11 Oct 2021 11:22:19 -0700
Subject: [PATCH] feat(react-wallet): Create app layout with left nav and app
 bar (#3941)

* feat(react-wallet): Create app layout with left nav and app bar

* feat(react-wallet): Fix font family quote usage
---
 .../dapp-svelte-wallet/react-ui/package.json  |  1 +
 .../react-ui/public/index.html                |  6 +-
 .../dapp-svelte-wallet/react-ui/src/App.css   | 14 ---
 .../dapp-svelte-wallet/react-ui/src/App.js    | 89 ++++++++++++++++---
 .../react-ui/src/components/AppBar.js         | 61 +++++++++++++
 .../react-ui/src/components/NavMenu.js        | 80 +++++++++++++++++
 .../src/components/WalletConnection.js        | 34 +++++--
 .../components/tests/WalletConnection.test.js | 25 +++++-
 .../dapp-svelte-wallet/react-ui/src/index.css | 17 ----
 .../dapp-svelte-wallet/react-ui/src/index.js  |  7 +-
 .../react-ui/src/tests/App.test.js            | 64 +++++++++++--
 .../react-ui/src/views/Contacts.js            |  7 ++
 .../react-ui/src/views/Dapps.js               |  7 ++
 .../react-ui/src/views/Dashboard.js           |  7 ++
 .../react-ui/src/views/Issuers.js             |  7 ++
 .../react-ui/src/views/Purses.js              |  7 ++
 16 files changed, 374 insertions(+), 59 deletions(-)
 delete mode 100644 packages/dapp-svelte-wallet/react-ui/src/App.css
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/components/AppBar.js
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/components/NavMenu.js
 delete mode 100644 packages/dapp-svelte-wallet/react-ui/src/index.css
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/views/Contacts.js
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/views/Dapps.js
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/views/Dashboard.js
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/views/Issuers.js
 create mode 100644 packages/dapp-svelte-wallet/react-ui/src/views/Purses.js
diff --git a/packages/dapp-svelte-wallet/react-ui/package.json b/packages/dapp-svelte-wallet/react-ui/package.json
index 892680ba9c7..89a8bbd87ab 100644
--- a/packages/dapp-svelte-wallet/react-ui/package.json
+++ b/packages/dapp-svelte-wallet/react-ui/package.json
@@ -17,6 +17,7 @@
     "eslint-plugin-jest": "^24.5.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "ses": "^0.14.3"
   },
diff --git a/packages/dapp-svelte-wallet/react-ui/public/index.html b/packages/dapp-svelte-wallet/react-ui/public/index.html
index a420e5e59a5..65d21bc4c8e 100644
--- a/packages/dapp-svelte-wallet/react-ui/public/index.html
+++ b/packages/dapp-svelte-wallet/react-ui/public/index.html
@@ -28,6 +28,10 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Agoric wallet" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -44,7 +48,7 @@
     -->
     <title>Agoric Wallet</title>
   </head>
-  <body>
+  <body style="overflow-x: hidden; overflow-y: scroll">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/packages/dapp-svelte-wallet/react-ui/src/App.css b/packages/dapp-svelte-wallet/react-ui/src/App.css
deleted file mode 100644
index c4034ce7ba5..00000000000
--- a/packages/dapp-svelte-wallet/react-ui/src/App.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
diff --git a/packages/dapp-svelte-wallet/react-ui/src/App.js b/packages/dapp-svelte-wallet/react-ui/src/App.js
index 3dac9bb3d19..7387aaf6292 100644
--- a/packages/dapp-svelte-wallet/react-ui/src/App.js
+++ b/packages/dapp-svelte-wallet/react-ui/src/App.js
@@ -1,22 +1,85 @@
 /* eslint-disable react/display-name */
 import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { CssBaseline } from '@material-ui/core';
+import {
+  createTheme,
+  makeStyles,
+  ThemeProvider,
+} from '@material-ui/core/styles';
 
-import WalletConnection from './components/WalletConnection';
+import AppBar from './components/AppBar';
+import NavMenu from './components/NavMenu';
+import Contacts from './views/Contacts.js';
+import Dapps from './views/Dapps.js';
+import Dashboard from './views/Dashboard.js';
+import Purses from './views/Purses.js';
+import Issuers from './views/Issuers.js';
 
-import './App.css';
-import { withApplicationContext } from './contexts/Application';
+const appBarHeight = '64px';
+const navMenuWidth = '240px';
 
-const App = ({ connectionState }) => {
+const appTheme = createTheme({
+  palette: {
+    background: {
+      default: '#ffffff',
+    },
+  },
+  typography: {
+    fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
+    fontWeightRegular: 500,
+    h1: {
+      fontFamily: ['Montserrat', 'Arial', 'sans-serif'].join(','),
+      fontSize: '32px',
+      fontWeight: '700',
+      letterSpacing: '-1.5px',
+      lineHeight: '48px',
+      margin: 0,
+    },
+  },
+  appBarHeight,
+  navMenuWidth,
+});
+
+const useStyles = makeStyles(_ => ({
+  main: {
+    boxSizing: 'border-box',
+    padding: '32px',
+    marginLeft: navMenuWidth,
+    position: 'absolute',
+    width: `calc(100vw - ${navMenuWidth})`,
+    top: appBarHeight,
+  },
+}));
+
+const App = () => {
+  const classes = useStyles();
   return (
-    <div className="App">
-      <header className="App-header">
-        Connection Status: {connectionState}
-      </header>
-      <WalletConnection></WalletConnection>
-    </div>
+    <ThemeProvider theme={appTheme}>
+      <CssBaseline />
+      <NavMenu />
+      <main className={classes.main}>
+        <Switch>
+          <Route path="/purses">
+            <Purses />
+          </Route>
+          <Route path="/dapps">
+            <Dapps />
+          </Route>
+          <Route path="/contacts">
+            <Contacts />
+          </Route>
+          <Route path="/issuers">
+            <Issuers />
+          </Route>
+          <Route path="/">
+            <Dashboard />
+          </Route>
+        </Switch>
+      </main>
+      <AppBar />
+    </ThemeProvider>
   );
 };
 
-export default withApplicationContext(App, context => ({
-  connectionState: context.connectionState,
-}));
+export default App;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/components/AppBar.js b/packages/dapp-svelte-wallet/react-ui/src/components/AppBar.js
new file mode 100644
index 00000000000..b137a0eedc3
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/components/AppBar.js
@@ -0,0 +1,61 @@
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+
+import WalletConnection from './WalletConnection';
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.default,
+    borderBottom: '1px solid #eaecef',
+    margin: 'auto',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: theme.appBarHeight,
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+  },
+  productLink: {
+    marginLeft: '16px',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  productLogo: {
+    transform: 'scale(0.85)',
+  },
+  appBarSection: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: '4px',
+    height: '100%',
+  },
+}));
+
+const AppBar = () => {
+  const classes = useStyles(useTheme());
+  return (
+    <header className={classes.header}>
+      <div className={classes.appBarSection}>
+        <a href="https://agoric.com" className={classes.productLink}>
+          <img
+            src="https://agoric.com/wp-content/themes/agoric_2021_theme/assets/img/logo.svg"
+            className={classes.productLogo}
+            alt="Agoric"
+            width="200"
+          />
+        </a>
+      </div>
+      <div className={classes.appBarSection}>
+        <div className={classes.connector}>
+          <WalletConnection></WalletConnection>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default AppBar;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/components/NavMenu.js b/packages/dapp-svelte-wallet/react-ui/src/components/NavMenu.js
new file mode 100644
index 00000000000..aabb14afd68
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/components/NavMenu.js
@@ -0,0 +1,80 @@
+import { useMemo, forwardRef } from 'react';
+import { Link, useRouteMatch } from 'react-router-dom';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import { ListItemText, ListItemIcon } from '@material-ui/core';
+import DashboardIcon from '@material-ui/icons/Dashboard';
+import AccountBalanceWallet from '@material-ui/icons/AccountBalanceWallet';
+import Apps from '@material-ui/icons/Apps';
+import People from '@material-ui/icons/People';
+import AddCircle from '@material-ui/icons/AddCircle';
+
+const useStyles = makeStyles(theme => ({
+  nav: {
+    position: 'fixed',
+    top: theme.appBarHeight,
+    width: theme.navMenuWidth,
+    height: `calc(100vh - ${theme.appBarHeight})`,
+    overflowY: 'auto',
+  },
+  sectionHeader: {
+    padding: '16px',
+    fontFamily: ['Montserrat', 'Arial', 'sans-serif'].join(','),
+    fontWeight: 700,
+    letterSpacing: '0.15px',
+    fontSize: '16px',
+  },
+}));
+
+const ListItemLink = ({ icon, primary, to }) => {
+  const match = useRouteMatch({
+    path: to,
+    exact: true,
+  });
+
+  const renderLink = useMemo(
+    () =>
+      forwardRef((itemProps, ref) => {
+        return <Link to={to} ref={ref} {...itemProps} role={undefined} />;
+      }),
+    [to],
+  );
+
+  return (
+    <li>
+      <ListItem
+        selected={match !== null}
+        button
+        style={{ borderRadius: '0 32px 32px 0' }}
+        component={renderLink}
+      >
+        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+        <ListItemText primary={primary} />
+      </ListItem>
+    </li>
+  );
+};
+
+const NavMenu = () => {
+  const styles = useStyles(useTheme());
+
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.sectionHeader}>Wallet</div>
+      <List>
+        <ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
+        <ListItemLink
+          to="/purses"
+          primary="Purses"
+          icon={<AccountBalanceWallet />}
+        />
+        <ListItemLink to="/dapps" primary="Dapps" icon={<Apps />} />
+        <ListItemLink to="/contacts" primary="Contacts" icon={<People />} />
+        <ListItemLink to="/issuers" primary="Issuers" icon={<AddCircle />} />
+      </List>
+    </nav>
+  );
+};
+
+export default NavMenu;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/components/WalletConnection.js b/packages/dapp-svelte-wallet/react-ui/src/components/WalletConnection.js
index 1b305a957c2..1cee686e9bd 100644
--- a/packages/dapp-svelte-wallet/react-ui/src/components/WalletConnection.js
+++ b/packages/dapp-svelte-wallet/react-ui/src/components/WalletConnection.js
@@ -1,11 +1,26 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/display-name */
 import { makeReactAgoricWalletConnection } from '@agoric/wallet-connection/react.js';
-
 import React, { useCallback } from 'react';
 import { E } from '@agoric/eventual-send';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+
 import { withApplicationContext } from '../contexts/Application';
 
+const useStyles = makeStyles(_ => ({
+  hidden: {
+    display: 'none',
+  },
+  connector: {
+    marginRight: '16px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '100%',
+  },
+}));
+
 // Create a wrapper for agoric-wallet-connection that is specific to
 // the app's instance of React.
 const AgoricWalletConnection = makeReactAgoricWalletConnection(React);
@@ -51,7 +66,8 @@ const getAccessToken = () => {
   return accessToken;
 };
 
-const WalletConnection = ({ setConnectionState }) => {
+const WalletConnection = ({ setConnectionState, connectionState }) => {
+  const classes = useStyles();
   const onWalletState = useCallback(ev => {
     const { walletConnection, state } = ev.detail;
     console.log('onWalletState', state);
@@ -78,12 +94,20 @@ const WalletConnection = ({ setConnectionState }) => {
   }, []);
 
   return (
-    <span className="hidden">
-      <AgoricWalletConnection onState={onWalletState} />
-    </span>
+    <div className={classes.connector}>
+      <Typography variant="body1">
+        Connection Status:{' '}
+        {connectionState === 'admin' ? 'Connected' : 'Disconnected'}
+      </Typography>
+      <AgoricWalletConnection
+        onState={onWalletState}
+        className={classes.hidden}
+      />
+    </div>
   );
 };
 
 export default withApplicationContext(WalletConnection, context => ({
   setConnectionState: context.setConnectionState,
+  connectionState: context.connectionState,
 }));
diff --git a/packages/dapp-svelte-wallet/react-ui/src/components/tests/WalletConnection.test.js b/packages/dapp-svelte-wallet/react-ui/src/components/tests/WalletConnection.test.js
index 57d31f76937..a2f172836e7 100644
--- a/packages/dapp-svelte-wallet/react-ui/src/components/tests/WalletConnection.test.js
+++ b/packages/dapp-svelte-wallet/react-ui/src/components/tests/WalletConnection.test.js
@@ -20,8 +20,15 @@ jest.mock('@agoric/wallet-connection/react.js', () => {
 });
 
 const setConnectionState = jest.fn();
+let connectionStatus = 'idle';
 const withApplicationContext = (Component, _) => ({ ...props }) => {
-  return <Component setConnectionState={setConnectionState} {...props} />;
+  return (
+    <Component
+      setConnectionState={setConnectionState}
+      connectionState={connectionStatus}
+      {...props}
+    />
+  );
 };
 jest.mock('../../contexts/Application', () => {
   return { withApplicationContext };
@@ -45,6 +52,22 @@ describe('WalletConnection', () => {
     expect(setConnectionState).toHaveBeenCalledWith('connecting');
   });
 
+  test('displays the current connection status', () => {
+    let currentConnectionStatus = component.findWhere(
+      node =>
+        node.type() === 'p' && node.text().startsWith('Connection Status:'),
+    );
+    expect(currentConnectionStatus.text()).toContain('Disconnected');
+
+    connectionStatus = 'admin';
+    component.setProps({ connectionStatus });
+    currentConnectionStatus = component.findWhere(
+      node =>
+        node.type() === 'p' && node.text().startsWith('Connection Status:'),
+    );
+    expect(currentConnectionStatus.text()).toContain('Connected');
+  });
+
   test('resets the connection on error state', () => {
     const reset = jest.fn();
 
diff --git a/packages/dapp-svelte-wallet/react-ui/src/index.css b/packages/dapp-svelte-wallet/react-ui/src/index.css
deleted file mode 100644
index a25b9f31a3e..00000000000
--- a/packages/dapp-svelte-wallet/react-ui/src/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-.hidden {
-  display: none;
-}
diff --git a/packages/dapp-svelte-wallet/react-ui/src/index.js b/packages/dapp-svelte-wallet/react-ui/src/index.js
index d0e6ef2c295..3780b2fa554 100644
--- a/packages/dapp-svelte-wallet/react-ui/src/index.js
+++ b/packages/dapp-svelte-wallet/react-ui/src/index.js
@@ -3,8 +3,7 @@ import '@agoric/eventual-send/shim';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import './index.css';
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App.js';
 import ApplicationContextProvider from './contexts/Application';
 
@@ -12,7 +11,9 @@ Error.stackTraceLimit = Infinity;
 
 ReactDOM.render(
   <ApplicationContextProvider>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </ApplicationContextProvider>,
   document.getElementById('root'),
 );
diff --git a/packages/dapp-svelte-wallet/react-ui/src/tests/App.test.js b/packages/dapp-svelte-wallet/react-ui/src/tests/App.test.js
index 1c3a3e8194b..f491cda1a3b 100644
--- a/packages/dapp-svelte-wallet/react-ui/src/tests/App.test.js
+++ b/packages/dapp-svelte-wallet/react-ui/src/tests/App.test.js
@@ -1,7 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
 import App from '../App';
+import Dashboard from '../views/Dashboard';
+import Purses from '../views/Purses';
+import Dapps from '../views/Dapps';
+import Contacts from '../views/Contacts';
+import Issuers from '../views/Issuers';
 
 jest.mock('../components/WalletConnection', () => () => 'WalletConnection');
+jest.mock('../views/Dashboard', () => () => 'Dashboard');
+jest.mock('../views/Purses', () => () => 'Purses');
+jest.mock('../views/Dapps', () => () => 'Dapps');
+jest.mock('../views/Contacts', () => () => 'Contacts');
+jest.mock('../views/Issuers', () => () => 'Issuers');
 
 const connectionState = 'connecting';
 const withApplicationContext = (Component, _) => ({ ...props }) => {
@@ -11,9 +22,52 @@ jest.mock('../contexts/Application', () => {
   return { withApplicationContext };
 });
 
-test('renders the wallet connection status', () => {
-  render(<App />);
+test('renders the dashboard view', () => {
+  const component = mount(
+    <MemoryRouter initialEntries={['/']}>
+      <App />
+    </MemoryRouter>,
+  );
 
-  const connectionStatus = screen.getByText(/Connection Status:/i);
-  expect(connectionStatus.textContent).toContain(connectionState);
+  expect(component.find(Dashboard)).toHaveLength(1);
+});
+
+test('renders the purses view', () => {
+  const component = mount(
+    <MemoryRouter initialEntries={['/purses']}>
+      <App />
+    </MemoryRouter>,
+  );
+
+  expect(component.find(Purses)).toHaveLength(1);
+});
+
+test('renders the dapps view', () => {
+  const component = mount(
+    <MemoryRouter initialEntries={['/dapps']}>
+      <App />
+    </MemoryRouter>,
+  );
+
+  expect(component.find(Dapps)).toHaveLength(1);
+});
+
+test('renders the contacts view', () => {
+  const component = mount(
+    <MemoryRouter initialEntries={['/contacts']}>
+      <App />
+    </MemoryRouter>,
+  );
+
+  expect(component.find(Contacts)).toHaveLength(1);
+});
+
+test('renders the issuers view', () => {
+  const component = mount(
+    <MemoryRouter initialEntries={['/issuers']}>
+      <App />
+    </MemoryRouter>,
+  );
+
+  expect(component.find(Issuers)).toHaveLength(1);
 });
diff --git a/packages/dapp-svelte-wallet/react-ui/src/views/Contacts.js b/packages/dapp-svelte-wallet/react-ui/src/views/Contacts.js
new file mode 100644
index 00000000000..ff47d3eae53
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/views/Contacts.js
@@ -0,0 +1,7 @@
+import { Typography } from '@material-ui/core';
+
+const Contacts = () => {
+  return <Typography variant="h1">Contacts</Typography>;
+};
+
+export default Contacts;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/views/Dapps.js b/packages/dapp-svelte-wallet/react-ui/src/views/Dapps.js
new file mode 100644
index 00000000000..6a9900a1ded
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/views/Dapps.js
@@ -0,0 +1,7 @@
+import { Typography } from '@material-ui/core';
+
+const Dapps = () => {
+  return <Typography variant="h1">Dapps</Typography>;
+};
+
+export default Dapps;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/views/Dashboard.js b/packages/dapp-svelte-wallet/react-ui/src/views/Dashboard.js
new file mode 100644
index 00000000000..0b43202a07d
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/views/Dashboard.js
@@ -0,0 +1,7 @@
+import { Typography } from '@material-ui/core';
+
+const Dashboard = () => {
+  return <Typography variant="h1">Dashboard</Typography>;
+};
+
+export default Dashboard;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/views/Issuers.js b/packages/dapp-svelte-wallet/react-ui/src/views/Issuers.js
new file mode 100644
index 00000000000..c58ee2f2540
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/views/Issuers.js
@@ -0,0 +1,7 @@
+import { Typography } from '@material-ui/core';
+
+const Issuers = () => {
+  return <Typography variant="h1">Issuers</Typography>;
+};
+
+export default Issuers;
diff --git a/packages/dapp-svelte-wallet/react-ui/src/views/Purses.js b/packages/dapp-svelte-wallet/react-ui/src/views/Purses.js
new file mode 100644
index 00000000000..e8ce3801ef0
--- /dev/null
+++ b/packages/dapp-svelte-wallet/react-ui/src/views/Purses.js
@@ -0,0 +1,7 @@
+import { Typography } from '@material-ui/core';
+
+const Purses = () => {
+  return <Typography variant="h1">Purses</Typography>;
+};
+
+export default Purses;
