add more user information to member sidebar

packages/status-react/src/components/member-sidebar/disconnect-dialog.tsx

@@ -20,7 +20,7 @@ export const DisconnectDialog = (props: Props) => {
         <Flex direction="column" align="center" gap="2">
           <Avatar size={64} />
           <Heading weight="600">{account.username}</Heading>
-          <Text color="gray">Chatkey: {account.chatKey}</Text>
+          <Text color="gray">Chatkey: {account.publicKey}</Text>
           <EmojiHash />
         </Flex>
       </Dialog.Body>

packages/status-react/src/components/member-sidebar/member-item.tsx

@@ -18,7 +18,12 @@ export const MemberItem = (props: Props) => {
 
   return (
     <Flex gap="2" align="center" css={{ height: 56 }}>
-      <Avatar size={32} indicator={indicator} colorHash={colorHash} />
+      <Avatar
+        size={32}
+        indicator={indicator}
+        name={username}
+        colorHash={colorHash}
+      />
       <div>
         <Flex align="center" gap={1}>
           <Text size="15" color="accent" truncate>

packages/status-react/src/components/member-sidebar/user-item.tsx

@@ -17,7 +17,7 @@ export const UserItem = (props: Props) => {
   return (
     <Flex align="center" justify="between">
       <Flex gap="2" align="center" css={{ height: 56 }}>
-        <Avatar size={32} />
+        <Avatar size={32} name={account.username} />
         <div>
           <Flex align="center" gap={1}>
             <Text size="15" color="accent">