From a43e1a3982152a3394a1c902b86af7bcb60a5197 Mon Sep 17 00:00:00 2001
From: Monalisha Mishra <mishramonalisha76@gmail.com>
Date: Mon, 18 Mar 2024 18:58:38 +0530
Subject: [PATCH] fix: fixed tooltip

---
 .../chat/ChatProfile/ChatProfile.tsx          |  9 +--
 .../chat/reusables/ProfileContainer.tsx       | 74 ++++++++++---------
 .../src/lib/components/reusables/Tooltip.tsx  |  8 +-
 3 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
index c098f26e8..01320356c 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -108,12 +108,11 @@ export const ChatProfile: React.FC<IChatProfile> = ({
 
   const getProfileName = () => {
     return Object.keys(groupInfo || {}).length
-      ? groupInfo?.groupName
+      ? shortenText(groupInfo?.chatId || '', 6, true)
       : chatInfo
       ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true)
       : shortenText(chatId?.split(':')[1], 6, true);
   };
-
   useEffect(() => {
     if (!chatId) return;
     fetchProfileData();
@@ -142,10 +141,10 @@ export const ChatProfile: React.FC<IChatProfile> = ({
             member={{
               wallet: getProfileName() as string,
               image: getImage(),
-              web3Name: web3Name,
-              completeWallet:chatInfo?chatInfo?.wallets:null
+              web3Name: web3Name?web3Name:groupInfo?.groupName,
+              completeWallet:chatInfo?.wallets??groupInfo?.chatId
             }}
-            copy={!!chatInfo}
+            copy={!!chatInfo|| !!groupInfo}
             customStyle={{
               fontSize: theme?.fontWeight?.chatProfileText,
               textColor: theme?.textColor?.chatProfileText,
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
index b19e30f3f..b235990bf 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -28,7 +28,9 @@ export const ProfileContainer = ({
   copy,
   customStyle,
 }: ProfileProps) => {
-  const [copyText, setCopyText] = useState<string>('Copy to clipboard');
+  const [copyText, setCopyText] = useState<string>();
+
+
 
   return (
     <Section justifyContent="flex-start">
@@ -48,7 +50,7 @@ export const ProfileContainer = ({
           src={member?.image}
         />
       </Section>
-      <Section flexDirection="column" alignItems="start" gap="5px">
+      <Section flexDirection="column" alignItems="start" gap="5px" >
         {!!member?.web3Name && (
           <Span
             fontSize={customStyle?.fontSize ?? '18px'}
@@ -61,41 +63,45 @@ export const ProfileContainer = ({
             {member?.web3Name}
           </Span>
         )}
-        <Section gap="5px">
-          <Span
-            fontSize={
-              member?.web3Name ? '14px' : customStyle?.fontSize ?? '18px'
-            }
-            fontWeight={
-              member?.web3Name ? '500' : customStyle?.fontWeight ?? '400'
-            }
-            color={
-              member?.web3Name
-                ? theme.textColor?.modalSubHeadingText
-                : customStyle?.textColor ?? theme.textColor?.modalSubHeadingText
-            }
-            position="relative"
+        <Tooltip content={copyText}>
+          <Section
+            gap="5px"
+       cursor='pointer'
+            onMouseEnter={() => {
+              setCopyText('Copy to clipboard');
+            }}
+            onMouseLeave={() => {
+              setCopyText('');
+            }}
+            onClick={() => {
+              copyToClipboard(member?.completeWallet || '');
+              setCopyText('copied');
+            }}
           >
-            {member.wallet}
-          </Span>
-          {!!copy && (
-            <Tooltip content={copyText}>
-              <Div
-                cursor="pointer"
-                onClick={() => {
-                  copyToClipboard(member?.completeWallet||'');
-                  setCopyText('copied');
-                  setTimeout(() => {
-                    setCopyText('Copy to clipboard')
-                  }, 5000);
-              
-                }}
-              >
+            <Span
+              fontSize={
+                member?.web3Name ? '14px' : customStyle?.fontSize ?? '18px'
+              }
+              fontWeight={
+                member?.web3Name ? '500' : customStyle?.fontWeight ?? '400'
+              }
+              color={
+                member?.web3Name
+                  ? theme.textColor?.modalSubHeadingText
+                  : customStyle?.textColor ??
+                    theme.textColor?.modalSubHeadingText
+              }
+              position="relative"
+            >
+              {member.wallet}
+            </Span>
+            {!!copy && copyText && (
+              <Div cursor="pointer" >
                 <CopySvg2 />
               </Div>
-            </Tooltip>
-          )}
-        </Section>
+            )}
+          </Section>
+        </Tooltip>
       </Section>
     </Section>
   );
diff --git a/packages/uiweb/src/lib/components/reusables/Tooltip.tsx b/packages/uiweb/src/lib/components/reusables/Tooltip.tsx
index 887fbd9fe..7e1242c41 100644
--- a/packages/uiweb/src/lib/components/reusables/Tooltip.tsx
+++ b/packages/uiweb/src/lib/components/reusables/Tooltip.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 type TooltipPropType = {
   children: React.ReactNode;
   direction?: string;
-  content: string;
+  content?: string;
   delay?: number;
 };
 export const Tooltip: React.FC<TooltipPropType> = ({
@@ -33,10 +33,12 @@ export const Tooltip: React.FC<TooltipPropType> = ({
       // When to show the tooltip
       onMouseEnter={showTip}
       onMouseLeave={hideTip}
+      id='tooltip-span'
     >
       {/* Wrapping */}
       {children}
       {active && (
+       content && 
         <TooltipContent className={`${direction || 'top'}`}>
           {/* Content */}
           {content}
@@ -62,8 +64,8 @@ const TooltipWrapper = styled.div`
 const TooltipContent = styled.div`
   position: absolute;
   border-radius: 8px 8px 8px 4px;
-  // left: 50%;
-  transform: translateX(6%);
+  left: 50%;
+  transform: translateX(-50%);
   padding: 7px;
   color: #fff;
   background: #000;