Merge pull request #1302 from ethereum-push-notification-service/comp…

…onent-chat-info updated uiweb and added chat id
push-protocol · Nov 16, 2023 · bf5a5e5 · bf5a5e5
2 parents 54d1fcb + aeb46d0
commit bf5a5e5
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 15 deletions.
diff --git a/src/components/chat/w2wChat/groupChat/groupInfo/groupInfoModalContent.tsx b/src/components/chat/w2wChat/groupChat/groupInfo/groupInfoModalContent.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ethers } from 'ethers';
 
 // External Packages
@@ -37,10 +37,12 @@ import useToast from 'hooks/useToast';
 import { MdCheckCircle, MdError } from 'react-icons/md';
 import { AddWalletContent } from '../createGroup/AddWalletContent';
 import GroupModalHeader from '../createGroup/GroupModalHeader';
+import { copyToClipboard, shortenText } from 'helpers/UtilityHelper';
 
 export const GroupInfoModalContent = ({ onClose }: ModalInnerComponentType) => {
   const { currentChat, setChat, inbox, receivedIntents }: AppContext = useContext<AppContext>(Context);
   const { connectedUser } = useContext(ChatUserContext);
+  const [copyText, setCopyText] = useState<string>('');
   const { account } = useAccount();
   const groupInfoToast = useToast();
   const [selectedMemeberAddress, setSelectedMemeberAddress] = React.useState<string | null>(null);
@@ -50,7 +52,9 @@ export const GroupInfoModalContent = ({ onClose }: ModalInnerComponentType) => {
   const [memberList, setMemberList] = React.useState<any>([]);
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const groupCreator = currentChat?.groupInformation?.groupCreator;
-  const membersExceptGroupCreator = currentChat?.groupInformation?.members.filter((x) => x.wallet?.toLowerCase() !== groupCreator?.toLowerCase());
+  const membersExceptGroupCreator = currentChat?.groupInformation?.members.filter(
+    (x) => x.wallet?.toLowerCase() !== groupCreator?.toLowerCase()
+  );
   const groupMembers = [...membersExceptGroupCreator, ...currentChat?.groupInformation?.pendingMembers];
 
   const isAccountOwnerAdmin = currentChat?.groupInformation?.members?.some(
@@ -388,7 +392,57 @@ export const GroupInfoModalContent = ({ onClose }: ModalInnerComponentType) => {
                   </SpanV2>
                 </ItemVV2>
               </InfoContainer>
-
+              <DescriptionContainer
+                alignItems="flex-start"
+                margin="0px 0px 18px 0px"
+              >
+                <SpanV2
+                  fontSize="18px"
+                  fontWeight={500}
+                  margin="0px 0px 5px 0px"
+                  color={theme.modalProfileTextColor}
+                >
+                  Chat ID
+                </SpanV2>
+                <ItemHV2
+
+                  alignSelf="start"
+                  onClick={() => {
+                    copyToClipboard(currentChat?.groupInformation?.chatId);
+                    setCopyText('copied');
+                  }}
+                  onMouseEnter={() => {
+                    setCopyText('click to copy');
+                  }}
+                  onMouseLeave={() => {
+                    setCopyText('');
+                  }}
+                >
+                  <SpanV2
+
+                   textAlign="start"
+                    fontSize="18px"
+                    fontWeight="400"
+                    style={{ color: `${theme.modalDescriptionTextColor}` }}
+                  >
+                    {shortenText(currentChat?.groupInformation?.chatId,isMobile?10:20,isMobile?10:20)}
+                  </SpanV2>
+                  {!!copyText && (
+                    <SpanV2
+                      cursor="pointer"
+                      position="relative"
+                      padding="2px 10px"
+                      style={{ color: `${theme.modalDescriptionTextColor}` }}
+                      fontSize="16px"
+                      fontWeight="400"
+                      // background={theme.backgroundColor?.modalHoverBackground}
+                      borderRadius="16px"
+                    >
+                      {copyText}
+                    </SpanV2>
+                  )}
+                </ItemHV2>
+              </DescriptionContainer>
               <DescriptionContainer
                 alignItems="flex-start"
                 margin="0px 0px 18px 0px"
@@ -568,7 +622,7 @@ const AddWalletContainer = styled(ItemHV2)`
   padding: 15px 24px;
   margin-bottom: 15px;
   cursor: pointer;
-  @media(max-width:480px){
+  @media (max-width: 480px) {
     min-width: 300px;
     max-width: 300px;
   }

diff --git a/src/components/reusables/SharedStylingV2.js b/src/components/reusables/SharedStylingV2.js
@@ -163,6 +163,7 @@ export const ButtonV2 = styled.button`
 export const SpanV2 = styled.span`
   align-self: ${(props) => props.alignSelf || 'auto'};
   background: ${(props) => props.background || 'transparent'};
+  cursor: ${(props) => props.cursor || 'default'};
   border-radius: ${(props) => props.borderRadius || 'initial'};
   bottom: ${(props) => props.bottom || 'auto'};
   color: ${(props) => props.color || 'inherit'};

diff --git a/src/helpers/UtilityHelper.ts b/src/helpers/UtilityHelper.ts
@@ -314,4 +314,16 @@ export const getWeb3Name=({isGroup, address, web3NameList})=>{
   return web3Name;
 }
 
+export const copyToClipboard = (val:string) => {
+  if (navigator && navigator.clipboard) {
+    navigator.clipboard.writeText(val);
+  } else {
+    const el = document.createElement('textarea');
+    el.value = val;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+  }
+};
 export default UtilityHelper;
diff --git a/yarn.lock b/yarn.lock
@@ -2445,6 +2445,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ensdomains/address-encoder@npm:^0.2.22":
+  version: 0.2.22
+  resolution: "@ensdomains/address-encoder@npm:0.2.22"
+  dependencies:
+    bech32: ^2.0.0
+    blakejs: ^1.1.0
+    bn.js: ^4.11.8
+    bs58: ^4.0.1
+    crypto-addr-codec: ^0.1.8
+    js-crc: ^0.2.0
+    js-sha256: ^0.9.0
+    js-sha512: ^0.8.0
+    nano-base32: ^1.0.1
+    ripemd160: ^2.0.2
+    sha3: ^2.1.3
+  checksum: c21dde6170984cde68977a8bdb84560630ee8e94ee890bae6ed5819004b95ac87a259df3268eaef15891b66a16a4cd9f4d9b0320c8a40c84583f9f600572cc42
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/android-arm64@npm:0.19.2"
@@ -5438,7 +5457,7 @@ __metadata:
     "@types/react-scroll-to-bottom": ^4.2.0
     "@types/styled-components": 5.1.26
     "@uniswap/widgets": ^2.47.3
-    "@unstoppabledomains/resolution": ^8.5.0
+    "@unstoppabledomains/resolution": 9.2.2
     "@web3-onboard/coinbase": ^2.2.5
     "@web3-onboard/core": ^2.20.4
     "@web3-onboard/injected-wallets": ^2.9.0
@@ -8515,6 +8534,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@unstoppabledomains/resolution@npm:9.2.2":
+  version: 9.2.2
+  resolution: "@unstoppabledomains/resolution@npm:9.2.2"
+  dependencies:
+    "@ensdomains/address-encoder": ^0.2.22
+    "@ethersproject/abi": ^5.0.1
+    bip44-constants: ^8.0.103
+    bn.js: ^4.4.0
+    content-hash: ^2.5.2
+    cross-fetch: 4.0.0
+    crypto-js: ^4.1.1
+    elliptic: ^6.5.4
+    ethereum-ens-network-map: ^1.0.2
+    js-sha256: ^0.9.0
+    js-sha3: ^0.8.0
+  checksum: 4f7fbcfc41c4e4ce1c5e5431df80cecec3341bdf7b81c18b5830d4f33cf05ff6af522d1c5e75e906630f64fe7f109ced9f85b5791eb132a84a107897193b64cd
+  languageName: node
+  linkType: hard
+
 "@unstoppabledomains/resolution@npm:^8.5.0":
   version: 8.5.0
   resolution: "@unstoppabledomains/resolution@npm:8.5.0"
@@ -11042,6 +11080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"big-integer@npm:1.6.36":
+  version: 1.6.36
+  resolution: "big-integer@npm:1.6.36"
+  checksum: 8cb9366ab72975a94ace5a99f6f81e0624dc8a5d14349df1f331d75ceec405c9286ad04c2a1188bc4ec4aa65cbbf1f8065f5d6b529fdb4a9d9867bbdfa769306
+  languageName: node
+  linkType: hard
+
 "big-integer@npm:^1.6.16":
   version: 1.6.51
   resolution: "big-integer@npm:1.6.51"
@@ -11110,6 +11155,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bip44-constants@npm:^8.0.103":
+  version: 8.0.103
+  resolution: "bip44-constants@npm:8.0.103"
+  checksum: 945fc98f21282fc8473d71726d934d00e4577ae7d642077a548ec79a5308fceac1b0e2aae63600a9c1536eb8f6b1133848f369d1d939a90982f689357959d946
+  languageName: node
+  linkType: hard
+
 "bip66@npm:^1.1.5":
   version: 1.1.5
   resolution: "bip66@npm:1.1.5"
@@ -12743,6 +12795,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-fetch@npm:4.0.0, cross-fetch@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "cross-fetch@npm:4.0.0"
+  dependencies:
+    node-fetch: ^2.6.12
+  checksum: ecca4f37ffa0e8283e7a8a590926b66713a7ef7892757aa36c2d20ffa27b0ac5c60dcf453119c809abe5923fc0bae3702a4d896bfb406ef1077b0d0018213e24
+  languageName: node
+  linkType: hard
+
 "cross-fetch@npm:^3.0.5, cross-fetch@npm:^3.0.6, cross-fetch@npm:^3.1.4":
   version: 3.1.5
   resolution: "cross-fetch@npm:3.1.5"
@@ -12752,15 +12813,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-fetch@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "cross-fetch@npm:4.0.0"
-  dependencies:
-    node-fetch: ^2.6.12
-  checksum: ecca4f37ffa0e8283e7a8a590926b66713a7ef7892757aa36c2d20ffa27b0ac5c60dcf453119c809abe5923fc0bae3702a4d896bfb406ef1077b0d0018213e24
-  languageName: node
-  linkType: hard
-
 "cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
@@ -12772,6 +12824,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crypto-addr-codec@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "crypto-addr-codec@npm:0.1.8"
+  dependencies:
+    base-x: ^3.0.8
+    big-integer: 1.6.36
+    blakejs: ^1.1.0
+    bs58: ^4.0.1
+    ripemd160-min: 0.0.6
+    safe-buffer: ^5.2.0
+    sha3: ^2.1.1
+  checksum: c9d16a81eeb7cf6ac9392349dcf7d4bd5b9f3dd73c60e472fe6cba256dc2f9ba45b756f23b65a2e1abfe0612cfb4e85dd8e480783288bba239eade8abb4c4f43
+  languageName: node
+  linkType: hard
+
 "crypto-browserify@npm:^3.12.0":
   version: 3.12.0
   resolution: "crypto-browserify@npm:3.12.0"
@@ -15486,6 +15553,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ethereum-ens-network-map@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "ethereum-ens-network-map@npm:1.0.2"
+  checksum: 34fa160f2b1ee8ec31bfe3dcec7b4becd4a6110acde171f43b9c28e0adc126dbded9dc6747d03088b6c99f04582887e6a23cb24b718321712c85208965835ea1
+  languageName: node
+  linkType: hard
+
 "ethereumjs-abi@npm:^0.6.8":
   version: 0.6.8
   resolution: "ethereumjs-abi@npm:0.6.8"
@@ -19744,6 +19818,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-crc@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "js-crc@npm:0.2.0"
+  checksum: 3e307ae64236b745658e0df50d56809a810e67f39e45b7c1302433f10560819bea1d457841b2bac0eb42b72c96d60ae4c3232613275ea6c482b3cdb98a8bab09
+  languageName: node
+  linkType: hard
+
 "js-sdsl@npm:^4.1.4":
   version: 4.4.0
   resolution: "js-sdsl@npm:4.4.0"
@@ -19779,6 +19860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-sha512@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "js-sha512@npm:0.8.0"
+  checksum: 32ca371ebd14c6c5c83360fd8b036cad2211537bef546b199ac8b901917299cab4c68f7f7c26ae72f836bbce0349cb463df9a62cdb4c90e38090fdb4db89ee87
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -21960,6 +22048,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nano-base32@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "nano-base32@npm:1.0.1"
+  checksum: 1abe4229f7197ac35c91376b0a897c01d783dc0bbad35b45b70486bdca79c552d8cc7f3780ae9c815d865e3d52adacf1ca4d805ef0bfd4718f982ef5942a8285
+  languageName: node
+  linkType: hard
+
 "nano-css@npm:^5.3.1":
   version: 5.3.5
   resolution: "nano-css@npm:5.3.5"
@@ -26507,7 +26602,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ripemd160@npm:^2.0.0, ripemd160@npm:^2.0.1":
+"ripemd160-min@npm:0.0.6":
+  version: 0.0.6
+  resolution: "ripemd160-min@npm:0.0.6"
+  checksum: 3253fec273aee407e736df0baf69f90c65f56573d6fc537532041112e7c09a2f665ee2e618ef4a88eb494923d36614322eac26ddf35a504fcfedb422fd414c75
+  languageName: node
+  linkType: hard
+
+"ripemd160@npm:^2.0.0, ripemd160@npm:^2.0.1, ripemd160@npm:^2.0.2":
   version: 2.0.2
   resolution: "ripemd160@npm:2.0.2"
   dependencies:
@@ -27184,6 +27286,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sha3@npm:^2.1.1, sha3@npm:^2.1.3":
+  version: 2.1.4
+  resolution: "sha3@npm:2.1.4"
+  dependencies:
+    buffer: 6.0.3
+  checksum: fb49c8e18143cc46babc0e5d83d5f5d0149e645f26633a0e6a9aa2514df2ef91f10b6ece20da229e7ead8b8002d8e9514dcc747ef96a25b749294d6385c6f29f
+  languageName: node
+  linkType: hard
+
 "shallowequal@npm:^1.0.1, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"