diff --git a/src/components/chat/w2wChat/groupChat/groupInfo/groupInfoModalContent.tsx b/src/components/chat/w2wChat/groupChat/groupInfo/groupInfoModalContent.tsx index f6cf9f3aa5..f60a923780 100644 --- 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(Context); const { connectedUser } = useContext(ChatUserContext); + const [copyText, setCopyText] = useState(''); const { account } = useAccount(); const groupInfoToast = useToast(); const [selectedMemeberAddress, setSelectedMemeberAddress] = React.useState(null); @@ -50,7 +52,9 @@ export const GroupInfoModalContent = ({ onClose }: ModalInnerComponentType) => { const [memberList, setMemberList] = React.useState([]); const [isLoading, setIsLoading] = React.useState(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) => { - + + + Chat ID + + { + copyToClipboard(currentChat?.groupInformation?.chatId); + setCopyText('copied'); + }} + onMouseEnter={() => { + setCopyText('click to copy'); + }} + onMouseLeave={() => { + setCopyText(''); + }} + > + + {shortenText(currentChat?.groupInformation?.chatId,isMobile?10:20,isMobile?10:20)} + + {!!copyText && ( + + {copyText} + + )} + + 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 index 417fba83e4..eb84beac90 100644 --- 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 index b6bc8802e8..738369dc9a 100644 --- 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"