feat: show user name to self

src/Bootstrap.tsx

@@ -49,7 +49,7 @@ function Bootstrap({
 
   return (
     <Router>
-      <Shell>
+      <Shell userPeerId={userId}>
         {hasLoadedSettings ? (
           <Routes>
             {['/', '/index.html'].map(path => (

src/components/PeerNameDisplay/PeerNameDisplay.tsx

@@ -1,9 +1,13 @@
+import Typography, { TypographyProps } from '@mui/material/Typography'
 import { funAnimalName } from 'fun-animal-names'
 
-interface PeerNameDisplayProps {
+interface PeerNameDisplayProps extends TypographyProps {
   children: string
 }
 
-export const PeerNameDisplay = ({ children }: PeerNameDisplayProps) => {
+export const PeerNameDisplay = ({
-  return <>{funAnimalName(children)}</>
+  children,
+  ...rest
+}: PeerNameDisplayProps) => {
+  return <Typography {...rest}>{funAnimalName(children)}</Typography>
 }

src/components/Shell/Shell.test.tsx

@@ -4,10 +4,10 @@ import { MemoryRouter as Router } from 'react-router-dom'
 
 import { Shell, ShellProps } from './Shell'
 
-const ShellStub = (overrides: ShellProps = {}) => {
+const ShellStub = (overrides: Partial<ShellProps> = {}) => {
   return (
     <Router>
-      <Shell {...overrides} />
+      <Shell userPeerId="abc123" {...overrides} />
     </Router>
   )
 }

src/components/Shell/Shell.tsx

@@ -35,8 +35,11 @@ import Brightness7Icon from '@mui/icons-material/Brightness7'
 
 import { ShellContext } from 'ShellContext'
 import { AlertOptions } from 'models/shell'
+import { PeerNameDisplay } from 'components/PeerNameDisplay'
 
-export interface ShellProps extends PropsWithChildren {}
+export interface ShellProps extends PropsWithChildren {
+  userPeerId: string
+}
 
 const drawerWidth = 240
 
@@ -97,7 +100,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   justifyContent: 'flex-end',
 }))
 
-export const Shell = ({ children }: ShellProps) => {
+export const Shell = ({ children, userPeerId }: ShellProps) => {
   const [isAlertShowing, setIsAlertShowing] = useState(false)
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [doShowPeers, setDoShowPeers] = useState(false)
@@ -247,6 +250,22 @@ export const Shell = ({ children }: ShellProps) => {
               </IconButton>
             </DrawerHeader>
             <Divider />
+            <ListItem disablePadding>
+              <ListItemText
+                sx={{
+                  padding: '1em 1.5em',
+                }}
+                primary={
+                  <>
+                    <Typography>Your user name: </Typography>
+                    <PeerNameDisplay sx={{ fontWeight: 'bold' }}>
+                      {userPeerId}
+                    </PeerNameDisplay>
+                  </>
+                }
+              />
+            </ListItem>
+            <Divider />
             <List role="navigation">
               <Link to="/">
                 <ListItem disablePadding>