feat: finalised xmtp

JustaName-id · Dec 4, 2024 · e7d8870 · e7d8870
1 parent bafad7b
commit e7d8870
Show file tree

Hide file tree

Showing 13 changed files with 538 additions and 340 deletions.
diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/Chat/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/Chat/index.tsx
@@ -125,8 +125,7 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
     await refreshConsentList();
     await allow([conversation.peerAddress]);
     void refreshConsentList();
-    // TODO: check if this is needed
-    // onRequestAllowed();
+    setIsRequest(false)
     setIsRequestChangeLoading(false);
   };
 
@@ -162,24 +161,28 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
   const computeHeight = useMemo(() => {
     const additionalHeight = [];
     const height = '100vh - 50px - 3rem - 1.5rem - 73px - 15px';
+    if (isRequest) {
+      additionalHeight.push('-40px');
+    }
     if (replyMessage) {
       if (isStringContent) {
         additionalHeight.push('46px');
       } else if (mimeType === 'audio/wav') {
         additionalHeight.push('61px');
       } else if (type === 'video' || type === 'image') {
         additionalHeight.push('116px');
+      } else {
+        additionalHeight.push('47px');
       }
     }
 
     if (isMessagesSenderOnly) {
       additionalHeight.push('59px');
     }
 
-    return `calc( ${height} ${
-      additionalHeight.length > 0 ? ' - ' + additionalHeight.join(' - ') : ''
-    } )`;
-  }, [replyMessage, isMessagesSenderOnly, isStringContent, mimeType, type]);
+    return `calc( ${height} ${additionalHeight.length > 0 ? ' - ' + additionalHeight.join(' - ') : ''
+      } )`;
+  }, [replyMessage, isMessagesSenderOnly, isStringContent, mimeType, type, isRequest]);
 
   return (
     <Flex
@@ -251,10 +254,10 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
               src={
                 primaryName
                   ? sanitizeEnsImage({
-                      name: primaryName,
-                      chainId: 1,
-                      image: records?.sanitizedRecords?.avatar,
-                    })
+                    name: primaryName,
+                    chainId: 1,
+                    image: records?.sanitizedRecords?.avatar,
+                  })
                   : undefined
               }
               style={{
@@ -281,18 +284,22 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
                   ? primaryName
                   : formatAddress(conversation.peerAddress)}
               </P>
-              {/* {(!!primaryName) && (
-                <P style={{
-                  fontSize: 10,
-                  fontWeight: 900,
-                  lineHeight: 1
-                }} >{formatAddress(conversation.peerAddress)}</P>
-              )} */}
+              {primaryName && (
+                <P
+                  style={{
+                    fontSize: 10,
+                    fontWeight: 600,
+                    lineHeight: 1,
+                  }}
+                >
+                  {formatAddress(conversation.peerAddress)}
+                </P>
+              )}
             </Flex>
           </Flex>
         </Flex>
         <Flex direction="row" align="center" gap="15px">
-          <Popover>
+          <Popover  >
             <PopoverTrigger>
               <TuneIcon
                 width={24}
@@ -303,19 +310,18 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
                 }}
               />
             </PopoverTrigger>
-            <PopoverContent
+            <PopoverContent side='left'
               style={{
                 padding: '0px',
                 width: '100%',
                 borderRadius: '10px',
                 // zIndex: 110,
-                backgroundColor: 'white',
+                backgroundColor: 'var(--justweb3-destructive-color)',
               }}
             >
               <Flex
                 direction="column"
                 style={{
-                  padding: '8px',
                   gap: '10px',
                   borderRadius: '10px',
                 }}
@@ -331,21 +337,22 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
                   }}
                   onClick={() => blockAddress(conversation.peerAddress)}
                 >
-                  <P
-                    style={{
-                      color: 'var(--justweb3-primary-color)',
-                      fontWeight: 500,
-                    }}
-                  >
-                    Block
-                  </P>
                   <BlockedAccountIcon
                     width="22"
                     height="22"
                     style={{
                       cursor: 'pointer',
                     }}
+                    fill='var(--justweb3-background-color)'
                   />
+                  <P
+                    style={{
+                      color: 'var(--justweb3-background-color)',
+                      fontWeight: 500,
+                    }}
+                  >
+                    Block
+                  </P>
                 </Flex>
               </Flex>
             </PopoverContent>
@@ -549,7 +556,7 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
             {isMessagesSenderOnly && (
               <Flex
                 direction="column"
-                gap="10px"
+                gap="5px"
                 style={{
                   padding: '10px',
                   borderRadius: '10px',
@@ -561,7 +568,7 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
                     fontSize: '14px',
                     fontWeight: 900,
                     lineHeight: '100%',
-                    color: 'black',
+                    color: 'var(--justweb3-foreground-color-3)',
                   }}
                 >
                   Message in user’s Requests

diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/ChatButton/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatButton/index.tsx
@@ -1,27 +1,53 @@
+import { useMountedAccount } from '@justaname.id/react';
 import { ArrowIcon, ClickableItem } from '@justweb3/ui';
-import { useClient } from '@xmtp/react-sdk';
-import { useWalletClient } from 'wagmi';
+import { Client, ClientOptions, useClient } from '@xmtp/react-sdk';
+import { useEthersSigner } from '../../hooks';
+import { XmtpEnvironment } from '../../plugins';
+import { storeKeys, loadKeys, wipeKeys } from '../../utils/xmtp';
 
 export interface ChatButtonProps {
   handleOpen: (open: boolean) => void;
+  env: XmtpEnvironment;
 }
-export const ChatButton: React.FC<ChatButtonProps> = ({ handleOpen }) => {
+export const ChatButton: React.FC<ChatButtonProps> = ({ handleOpen, env }) => {
   const { initialize } = useClient();
   const { client } = useClient();
-  const { data: walletClient } = useWalletClient();
+  const walletClient = useEthersSigner()
+  const { address } = useMountedAccount()
 
   const handleChat = async () => {
     if (!client) {
-      initialize({
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        signer: walletClient,
-        options: {
-          env: 'dev',
-        },
-      }).then(() => {
-        handleOpen(true);
-      });
+      const signer = await walletClient
+      try {
+        if (!signer) {
+          return
+        }
+        const clientOptions: Partial<Omit<ClientOptions, 'codecs'>> = {
+          appVersion: 'JustWeb3/1.0.0',
+          env: env
+        }
+        let keys = loadKeys(address ?? '', env)
+        if (!keys) {
+          keys = await Client.getKeys(signer, {
+            env: env,
+            skipContactPublishing: false,
+            // persistConversations: false,
+          })
+          storeKeys(address ?? '', keys, env)
+        }
+        await initialize({
+          keys,
+          options: clientOptions,
+          signer: signer,
+        }).then(() => {
+          handleOpen(true);
+        })
+
+        // handleClient(client)
+      } catch (error) {
+        console.error('Failed to initialize XMTP Client:', error)
+        wipeKeys(address ?? '', env)
+      }
     } else {
       handleOpen(true);
     }

diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/ChatSheet/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatSheet/index.tsx
@@ -1,13 +1,14 @@
 import {
+  AddIcon,
+  Flex,
   Sheet,
   SheetContent,
   SheetTitle,
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger,
+  TabsTrigger
 } from '@justweb3/ui';
-import React, { useEffect, useMemo } from 'react';
 import {
   CachedConversation,
   ContentTypeMetadata,
@@ -16,6 +17,7 @@ import {
   useStreamAllMessages,
   useStreamConversations,
 } from '@xmtp/react-sdk';
+import React, { useEffect, useMemo } from 'react';
 import { ChatList } from '../ChatList';
 
 export interface ChatSheetProps {
@@ -24,17 +26,19 @@ export interface ChatSheetProps {
   handleOpenChat: (
     conversation: CachedConversation<ContentTypeMetadata> | null
   ) => void;
+  handleNewChat: () => void;
 }
 
 export const ChatSheet: React.FC<ChatSheetProps> = ({
   open,
   handleOpen,
   handleOpenChat,
+  handleNewChat
 }) => {
   const [tab, setTab] = React.useState('Chats');
   const { conversations, isLoading } = useConversations();
   const [isConsentListLoading, setIsConsentListLoading] = React.useState(true);
-  const { loadConsentList, entries } = useConsent();
+  const { loadConsentList, entries, } = useConsent();
 
   const allowedConversations = useMemo(() => {
     return conversations.filter(
@@ -74,6 +78,21 @@ export const ChatSheet: React.FC<ChatSheetProps> = ({
     <Sheet open={open} onOpenChange={handleOpen}>
       <SheetContent side="right" overlay={false} style={{ width: '100%' }}>
         <SheetTitle>Chats</SheetTitle>
+        <Flex align='center' justify='center' style={{
+          width: 45,
+          height: 45,
+          borderRadius: '50%',
+          backgroundColor: 'var(--justweb3-primary-color',
+          cursor: 'pointer',
+          position: 'absolute',
+          bottom: '2rem',
+          right: '2rem'
+        }}>
+          <AddIcon
+            onClick={handleNewChat}
+            fill={'var(--justweb3-background-color'}
+            width={35} height={35} />
+        </Flex>
         <Tabs
           defaultValue={'Chats'}
           value={tab}
@@ -96,9 +115,27 @@ export const ChatSheet: React.FC<ChatSheetProps> = ({
             </TabsTrigger>
             <TabsTrigger
               value={'Requests'}
-              style={{ flexBasis: 'calc( 100% / 3)' }}
+              style={{ flexBasis: 'calc( 100% / 3)', position: "relative" }}
             >
               Requests
+              {requestConversations.length > 0 && (
+                <Flex
+                  justify='center'
+                  align='center'
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    right: 10,
+                    color: 'var(--justweb3-background-color)',
+                    background: 'var(--justweb3-primary-color)',
+                    width: 17,
+                    height: 17,
+                    borderRadius: '50%',
+                    lineHeight: 0.5,
+                    fontSize: '10px'
+                  }}
+                >{requestConversations.length}</Flex>
+              )}
             </TabsTrigger>
             <TabsTrigger
               value={'Blocked'}

diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/CustomVoicePreview/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/CustomVoicePreview/index.tsx
@@ -1,7 +1,7 @@
-import { Flex, P, PauseIcon, PlayIcon, CloseIcon } from '@justweb3/ui';
-import { formatTime } from '../../utils/formatVoiceTime';
+import { CloseIcon, Flex, P, PauseIcon, PlayIcon } from '@justweb3/ui';
 import React, { useEffect, useRef, useState } from 'react';
 import useGetAudioDuration from '../../hooks/useGetAudioDuration';
+import { formatTime } from '../../utils/formatVoiceTime';
 
 
 interface CustomVoicePreviewProps {
@@ -58,7 +58,7 @@ const CustomVoicePreview: React.FC<CustomVoicePreviewProps> = ({
         <Flex direction="row" align="center" justify='space-between' gap='10px' style={{
             background: 'var(--justweb3-primary-color)',
             padding: '5px',
-            borderRadius: '10px',
+            borderRadius: '100px',
         }} >
             {playing ?
                 <PauseIcon fill='white' width={22} height={22} style={{
@@ -78,7 +78,6 @@ const CustomVoicePreview: React.FC<CustomVoicePreviewProps> = ({
             }} >{playing || currentTime > 0 ? formatTime(currentTime) : formatTime(audioDuration ?? 0)}</P>
             <CloseIcon width={18} height={18} fill='white' style={{
                 cursor: 'pointer',
-                scale: '1.1',
             }} onClick={onCancel} />
         </Flex>
     );