fix: fixed tooltip

push-protocol · Mar 18, 2024 · a43e1a3 · a43e1a3
1 parent 86f34fd
commit a43e1a3
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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;