feat(react): add user profile dialog to chat message

packages/status-react/src/components/chat-menu/index.tsx

@@ -87,7 +87,7 @@ export const ChatMenu = (props: Props) => {
     <Menu>
       <Menu.Item
         icon={<BellIcon />}
-        onSelect={() => userProfileDialog.open({ contact: 'Satoshi' })}
+        onSelect={() => userProfileDialog.open({ name: 'Satoshi' })}
       >
         View Profile
       </Menu.Item>

packages/status-react/src/components/user-profile-dialog/index.tsx

@@ -3,18 +3,18 @@ import React from 'react'
 import { Avatar, Dialog, EmojiHash, Heading, Text } from '~/src/system'
 
 interface Props {
-  contact: string
+  name: string
 }
 
 // TODO: Add all states of contact, wait for desktop release
 export const UserProfileDialog = (props: Props) => {
-  const { contact, ...dialogProps } = props
+  const { name, ...dialogProps } = props
 
   return (
-    <Dialog title={`${contact}'s Profile`} size="640" {...dialogProps}>
+    <Dialog title={`${name}'s Profile`} size="640" {...dialogProps}>
       <Dialog.Body align="center">
         <Avatar size="80" />
-        <Heading size="22">{contact}</Heading>
+        <Heading size="22">{name}</Heading>
         <Text>Chatkey:0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377</Text>
         <EmojiHash />
       </Dialog.Body>

packages/status-react/src/routes/chat/components/chat-message/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 
+import { UserProfileDialog } from '~/src/components/user-profile-dialog'
 import { useChatContext } from '~/src/contexts/chat-context'
 import { BellIcon } from '~/src/icons/bell-icon'
 import { PinIcon } from '~/src/icons/pin-icon'
@@ -16,6 +17,7 @@ import {
   Flex,
   Image,
   Text,
+  useDialog,
 } from '~/src/system'
 
 import { ChatInput } from '../chat-input'
@@ -60,6 +62,8 @@ export const ChatMessage = (props: Props) => {
 
   const { dispatch } = useChatContext()
 
+  const userProfileDialog = useDialog(UserProfileDialog)
+
   const handleReplyClick = () => {
     dispatch({
       type: 'SET_REPLY',
@@ -160,7 +164,12 @@ export const ChatMessage = (props: Props) => {
                     <EmojiHash />
                   </Flex>
                   <DropdownMenu.Separator />
-                  <DropdownMenu.Item icon={<BellIcon />}>
+                  <DropdownMenu.Item
+                    icon={<BellIcon />}
+                    onSelect={() =>
+                      userProfileDialog.open({ name: contact.name })
+                    }
+                  >
                     View Profile
                   </DropdownMenu.Item>
                   <DropdownMenu.Item icon={<BellIcon />}>