Resolve unsupported UI elements (#289)

* fix button ref

* comment out unsopported ui elements

* hide chat input if no account

* comment out avatar dropdown menu

packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx

@@ -56,7 +56,17 @@ export const CommunityDialog = () => {
               fill="currentColor"
             />
           </svg>
-          <Button href="https://status.im/get">Download Status</Button>
+          <Button
+            onClick={() =>
+              window.open(
+                'https://status.im/get',
+                '_blank',
+                'noopener,noreferrer'
+              )
+            }
+          >
+            Download Status
+          </Button>
         </Flex>
       </Dialog.Body>
     </Dialog>

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

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react'
 
 import { useChatContext } from '~/src/contexts/chat-context'
-import { EmojiIcon } from '~/src/icons/emoji-icon'
-import { GifIcon } from '~/src/icons/gif-icon'
-import { ImageIcon } from '~/src/icons/image-icon'
-import { StickerIcon } from '~/src/icons/sticker-icon'
+// import { EmojiIcon } from '~/src/icons/emoji-icon'
+// import { GifIcon } from '~/src/icons/gif-icon'
+// import { ImageIcon } from '~/src/icons/image-icon'
+// import { StickerIcon } from '~/src/icons/sticker-icon'
 import { styled } from '~/src/styles/config'
-import { Box, Flex, IconButton } from '~/src/system'
 
+// import { Box, Flex, IconButton } from '~/src/system'
 import { InputReply } from './input-reply'
 
 interface Props {
@@ -47,11 +47,11 @@ export const ChatInput = (props: Props) => {
 
   return (
     <Wrapper>
-      <Box css={{ paddingBottom: 6 }}>
+      {/* <Box css={{ paddingBottom: 6 }}>
         <IconButton label="Add file" color="gray">
           <ImageIcon />
         </IconButton>
-      </Box>
+      </Box> */}
       <Bubble>
         {state.message && (
           <InputReply message={state.message} member={state.member} />
@@ -64,7 +64,7 @@ export const ChatInput = (props: Props) => {
             onChange={handleChange}
             onKeyDown={handleKeyDown}
           />
-          <Flex>
+          {/* <Flex>
             <IconButton label="Pick emoji">
               <EmojiIcon />
             </IconButton>
@@ -74,7 +74,7 @@ export const ChatInput = (props: Props) => {
             <IconButton label="Pick gif">
               <GifIcon />
             </IconButton>
-          </Flex>
+          </Flex> */}
         </InputWrapper>
       </Bubble>
     </Wrapper>

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

@@ -4,7 +4,7 @@ import { useMatch } from 'react-router-dom'
 
 import { UserProfileDialog } from '~/src/components/user-profile-dialog'
 import { useChatContext } from '~/src/contexts/chat-context'
-import { BellIcon } from '~/src/icons/bell-icon'
+// import { BellIcon } from '~/src/icons/bell-icon'
 // import { PinIcon } from '~/src/icons/pin-icon'
 import { useProtocol } from '~/src/protocol'
 import { styled } from '~/src/styles/config'
@@ -14,9 +14,9 @@ import {
   Button,
   ContextMenu,
   ContextMenuTrigger,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  EmojiHash,
+  // DropdownMenu,
+  // DropdownMenuTrigger,
+  // EmojiHash,
   Flex,
   Image,
   Text,
@@ -176,15 +176,15 @@ export const ChatMessage = (props: Props) => {
           {responseTo && <MessageReply messageId={responseTo} />}
           <Flex gap={2}>
             <Box>
-              <DropdownMenuTrigger>
-                <button type="button">
-                  <Avatar
-                    size={44}
-                    name={member.username}
-                    colorHash={member.colorHash}
-                  />
-                </button>
-                <DropdownMenu>
+              {/* <DropdownMenuTrigger>
+                <button type="button"> */}
+              <Avatar
+                size={44}
+                name={member.username}
+                colorHash={member.colorHash}
+              />
+              {/* </button> */}
+              {/* <DropdownMenu>
                   <Flex direction="column" align="center" gap="1">
                     <Avatar size="36" />
                     <Text>{member.username}</Text>
@@ -211,7 +211,7 @@ export const ChatMessage = (props: Props) => {
                     Mark as Untrustworthy
                   </DropdownMenu.Item>
                 </DropdownMenu>
-              </DropdownMenuTrigger>
+              </DropdownMenuTrigger> */}
             </Box>
 
             <Box css={{ flex: 1 }}>

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

@@ -2,14 +2,17 @@ import React from 'react'
 
 import { useMatch } from 'react-router-dom'
 
-import { ChatMenu } from '~/src/components/chat-menu'
+// import { ChatMenu } from '~/src/components/chat-menu'
 import { useAppState } from '~/src/contexts/app-context'
-import { BellIcon } from '~/src/icons/bell-icon'
-import { DotsIcon } from '~/src/icons/dots-icon'
+// import { BellIcon } from '~/src/icons/bell-icon'
+// import { DotsIcon } from '~/src/icons/dots-icon'
 import { GroupIcon } from '~/src/icons/group-icon'
 import { useChat } from '~/src/protocol'
 import { styled } from '~/src/styles/config'
-import { DropdownMenuTrigger, Flex, IconButton, Separator } from '~/src/system'
+import {
+  /*DropdownMenuTrigger,*/ Flex,
+  IconButton /*,Separator*/,
+} from '~/src/system'
 
 import { ChatInfo } from '../chat-info'
 
@@ -40,18 +43,18 @@ export const Navbar = (props: Props) => {
           </IconButton>
         )}
 
-        <DropdownMenuTrigger>
+        {/* <DropdownMenuTrigger>
           <IconButton label="Options">
             <DotsIcon />
           </IconButton>
           <ChatMenu type="dropdown" />
-        </DropdownMenuTrigger>
+        </DropdownMenuTrigger> */}
 
-        <Separator orientation="vertical" css={{ height: 24 }} />
+        {/* <Separator orientation="vertical" css={{ height: 24 }} /> */}
 
-        <IconButton label="Show Activity Center">
+        {/* <IconButton label="Show Activity Center">
           <BellIcon />
-        </IconButton>
+        </IconButton> */}
       </Flex>
     </NavbarWrapper>
   )

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

@@ -7,7 +7,7 @@ import { useMatch } from 'react-router-dom'
 import { MemberSidebar } from '~/src/components/member-sidebar'
 import { useAppState } from '~/src/contexts/app-context'
 import { ChatProvider, useChatContext } from '~/src/contexts/chat-context'
-import { useChat, useMessages, useProtocol } from '~/src/protocol'
+import { useAccount, useChat, useMessages, useProtocol } from '~/src/protocol'
 import { styled } from '~/src/styles/config'
 import { Avatar, Flex, Heading, Text } from '~/src/system'
 
@@ -38,6 +38,7 @@ const ChatStart = (props: ChatStartProps) => {
 const Body = () => {
   const { client } = useProtocol()
   const { state } = useChatContext()
+  const { account } = useAccount()
 
   const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
   const chatId = params.id!
@@ -63,7 +64,7 @@ const Body = () => {
           <ChatMessage key={message.messageId} message={message} />
         ))}
       </ContentWrapper>
-      <ChatInput onSubmit={handleMessageSubmit} />
+      {account && <ChatInput onSubmit={handleMessageSubmit} />}
     </>
   )
 }