fix: added click to copy

push-protocol · Oct 18, 2023 · 7177cf9 · 7177cf9
1 parent e51a33f
commit 7177cf9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -13,7 +13,7 @@ const ChatViewComponentTest = () => {
   return (
     <div>
       <h2>Chat UI Test page</h2>
-      <CreateGroupModal onClose={()=>{console.log('in close')}} />
+      {/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
       <ChatViewComponentCard>
         <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} />
       </ChatViewComponentCard>

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
@@ -31,7 +31,7 @@ import addIcon from '../../../icons/addicon.svg';
 import DismissAdmin from '../../../icons/dismissadmin.svg';
 import AddAdmin from '../../../icons/addadmin.svg';
 import Remove from '../../../icons/remove.svg';
-import { shortenText } from '../../../helpers';
+import { copyToClipboard, shortenText } from '../../../helpers';
 import TokenGatedIcon from '../../../icons/TokenGatedIcon.svg';
 import ConditionsComponent from '../CreateGroup/ConditionsComponent';
 import { ConditionArray } from '../exportedTypes';
@@ -223,7 +223,7 @@ export const ConditionsInformation = ({
       {Object.keys(ACCESS_TYPE_TITLE).map((key) => (
         <>
           <Span fontSize="16px" fontWeight="500" alignSelf="start">
-            {  ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE]?.heading}
+            {ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE]?.heading}
           </Span>
           <ConditionSection
             width="100%"
@@ -331,7 +331,7 @@ const GroupInformation = ({
     useState<boolean>(false);
   const [memberList, setMemberList] = useState<any>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [checkedValue, setchecked] = useState<boolean>(false);
+  const [copyText, setCopyText] = useState<string>('');
   const [selectedMemberAddress, setSelectedMemberAddress] = useState<
     string | null
   >(null);
@@ -520,21 +520,52 @@ const GroupInformation = ({
         <Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
           Chat ID
         </Span>
-        <Span
-          textAlign="start"
-          fontSize="18px"
-          color={theme.textColor?.modalSubHeadingText}
+        <Section
+          gap="5px"
+          alignSelf="start"
+          onClick={() => {
+            copyToClipboard(groupInfo?.chatId);
+            setCopyText('copied');
+          }}
+          onMouseEnter={() => {
+            setCopyText('click to copy');
+          }}
+          onMouseLeave={() => {
+            setCopyText('');
+          }}
         >
-          {shortenText(groupInfo?.chatId,8,true)}
-        </Span>
+          <Span
+            textAlign="start"
+            fontSize="16px"
+            fontWeight="400"
+            color={theme.textColor?.modalSubHeadingText}
+          >
+            {shortenText(groupInfo?.chatId, 8, true)}
+          </Span>
+          {!!copyText && (
+            <Span
+              cursor="pointer"
+              position='relative'
+              padding="2px 10px"
+              color={theme.textColor?.modalSubHeadingText}
+              fontSize="14px"
+              fontWeight="400"
+              background={theme.backgroundColor?.modalHoverBackground}
+              borderRadius="16px"
+            >
+              {copyText}
+            </Span>
+          )}
+        </Section>
       </GroupDescription>
       <GroupDescription>
         <Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
           Group Description
         </Span>
         <Span
           textAlign="start"
-          fontSize="18px"
+          fontSize="16px"
+          fontWeight="400"
           color={theme.textColor?.modalSubHeadingText}
         >
           {groupInfo?.groupDescription}
@@ -847,11 +878,16 @@ export const GroupInfoModal = ({
               />
 
               <Section flexDirection="column" alignItems="flex-start" gap="5px">
-                <Span fontSize="20px" color={theme.textColor?.modalHeadingText}>
+                <Span
+                  fontSize="20px"
+                  fontWeight="500"
+                  color={theme.textColor?.modalHeadingText}
+                >
                   {groupInfo?.groupName}
                 </Span>
                 <Span
                   fontSize="16px"
+                  fontWeight="500"
                   color={theme.textColor?.modalSubHeadingText}
                 >
                   {groupInfo?.members?.length} Members