feat: cargo project at root

src-gui/src/renderer/components/navigation/Navigation.tsx

@@ -0,0 +1,41 @@
+import { Drawer, makeStyles, Box } from '@material-ui/core';
+import NavigationHeader from './NavigationHeader';
+import NavigationFooter from './NavigationFooter';
+
+export const drawerWidth = 240;
+
+const useStyles = makeStyles({
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+  },
+  drawerContainer: {
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+  },
+});
+
+export default function Navigation() {
+  const classes = useStyles();
+
+  return (
+    <Drawer
+      className={classes.drawer}
+      variant="permanent"
+      classes={{
+        paper: classes.drawerPaper,
+      }}
+    >
+      <Box className={classes.drawerContainer}>
+        <NavigationHeader />
+        <NavigationFooter />
+      </Box>
+    </Drawer>
+  );
+}

src-gui/src/renderer/components/navigation/NavigationFooter.tsx

@@ -0,0 +1,47 @@
+import RedditIcon from '@material-ui/icons/Reddit';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import { Box, makeStyles } from '@material-ui/core';
+import LinkIconButton from '../icons/LinkIconButton';
+import UnfinishedSwapsAlert from '../alert/UnfinishedSwapsAlert';
+import FundsLeftInWalletAlert from '../alert/FundsLeftInWalletAlert';
+import RpcStatusAlert from '../alert/RpcStatusAlert';
+import DiscordIcon from '../icons/DiscordIcon';
+import { DISCORD_URL } from '../pages/help/ContactInfoBox';
+import MoneroWalletRpcUpdatingAlert from '../alert/MoneroWalletRpcUpdatingAlert';
+
+const useStyles = makeStyles((theme) => ({
+  outer: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(1),
+    gap: theme.spacing(1),
+  },
+  linksOuter: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+  },
+}));
+
+export default function NavigationFooter() {
+  const classes = useStyles();
+
+  return (
+    <Box className={classes.outer}>
+      <FundsLeftInWalletAlert />
+      <UnfinishedSwapsAlert />
+      <RpcStatusAlert />
+      <MoneroWalletRpcUpdatingAlert />
+      <Box className={classes.linksOuter}>
+        <LinkIconButton url="https://reddit.com/r/unstoppableswap">
+          <RedditIcon />
+        </LinkIconButton>
+        <LinkIconButton url="https://github.com/UnstoppableSwap/unstoppableswap-gui">
+          <GitHubIcon />
+        </LinkIconButton>
+        <LinkIconButton url={DISCORD_URL}>
+          <DiscordIcon />
+        </LinkIconButton>
+      </Box>
+    </Box>
+  );
+}

src-gui/src/renderer/components/navigation/NavigationHeader.tsx

@@ -0,0 +1,30 @@
+import { Box, List } from '@material-ui/core';
+import SwapHorizOutlinedIcon from '@material-ui/icons/SwapHorizOutlined';
+import HistoryOutlinedIcon from '@material-ui/icons/HistoryOutlined';
+import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
+import RouteListItemIconButton from './RouteListItemIconButton';
+import UnfinishedSwapsBadge from './UnfinishedSwapsCountBadge';
+
+export default function NavigationHeader() {
+  return (
+    <Box>
+      <List>
+        <RouteListItemIconButton name="Swap" route="/swap">
+          <SwapHorizOutlinedIcon />
+        </RouteListItemIconButton>
+        <RouteListItemIconButton name="History" route="/history">
+          <UnfinishedSwapsBadge>
+            <HistoryOutlinedIcon />
+          </UnfinishedSwapsBadge>
+        </RouteListItemIconButton>
+        <RouteListItemIconButton name="Wallet" route="/wallet">
+          <AccountBalanceWalletIcon />
+        </RouteListItemIconButton>
+        <RouteListItemIconButton name="Help" route="/help">
+          <HelpOutlineIcon />
+        </RouteListItemIconButton>
+      </List>
+    </Box>
+  );
+}

src-gui/src/renderer/components/navigation/RouteListItemIconButton.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+
+export default function RouteListItemIconButton({
+  name,
+  route,
+  children,
+}: {
+  name: string;
+  route: string;
+  children: ReactNode;
+}) {
+  const navigate = useNavigate();
+
+  return (
+    <ListItem button onClick={() => navigate(route)} key={name}>
+      <ListItemIcon>{children}</ListItemIcon>
+      <ListItemText primary={name} />
+    </ListItem>
+  );
+}

src-gui/src/renderer/components/navigation/UnfinishedSwapsCountBadge.tsx

@@ -0,0 +1,19 @@
+import { Badge } from '@material-ui/core';
+import { useResumeableSwapsCount } from 'store/hooks';
+
+export default function UnfinishedSwapsBadge({
+  children,
+}: {
+  children: JSX.Element;
+}) {
+  const resumableSwapsCount = useResumeableSwapsCount();
+
+  if (resumableSwapsCount > 0) {
+    return (
+      <Badge badgeContent={resumableSwapsCount} color="primary">
+        {children}
+      </Badge>
+    );
+  }
+  return children;
+}