From f88c5f8e65b846c66f0715fe2e11e08e23314c66 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Thu, 23 May 2024 16:27:21 +0530 Subject: [PATCH 1/3] Skeleton loader added to Unlock Profile --- .../chat/unlockProfile/UnlockProfile.tsx | 165 +++++++++++++----- src/helpers/connectWalletHelper.ts | 27 +++ 2 files changed, 144 insertions(+), 48 deletions(-) create mode 100644 src/helpers/connectWalletHelper.ts diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx index b3997eb870..958ea8f01b 100644 --- a/src/components/chat/unlockProfile/UnlockProfile.tsx +++ b/src/components/chat/unlockProfile/UnlockProfile.tsx @@ -5,9 +5,10 @@ import { useContext, useEffect, useState } from 'react'; import styled, { useTheme } from 'styled-components'; // Internal Compoonents -import { ButtonV2, ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { ButtonV2, ImageV2, ItemHV2, ItemVV2, Skeleton, SkeletonLine, SpanV2 } from 'components/reusables/SharedStylingV2'; import { AppContext } from 'contexts/AppContext'; import { useAccount, useDeviceWidthCheck } from 'hooks'; +import { retrieveUserPGPKeyFromStorage } from 'helpers/connectWalletHelper'; // Internal Configs import { device, size } from 'config/Globals'; @@ -74,6 +75,19 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps const isMobile = useDeviceWidthCheck(parseInt(size.tablet)); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + if (wallet?.accounts?.length > 0) { + const decryptedPGPKeys = retrieveUserPGPKeyFromStorage(account); + console.log("decryptedPGPKeys", decryptedPGPKeys); + if (decryptedPGPKeys) { + setIsLoading(true); + } + } + + }, [account]) + return ( @@ -92,22 +106,45 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps /> - - {activeStatus.title} - - - {activeStatus.body} - + + {!isLoading ? ( + <> + + {activeStatus.title} + + + {activeStatus.body} + + + ) : ( + + + + + + + )} + @@ -150,23 +187,43 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps alignItems="baseline" flexDirection={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? 'column' : 'row'} > - connectWallet()} - > - Connect Wallet - - - - Unlock Profile - + + {!isLoading ? ( + <> + connectWallet()} + > + Connect Wallet + + + + Unlock Profile + + + ) : ( + + + + + + )} @@ -209,21 +266,21 @@ const RenderToolTip = ({ children, type }) => { placementProps={ type === UNLOCK_PROFILE_TYPE.MODAL ? { - background: 'black', - width: '220px', - padding: '8px 12px', - top: '10px', - left: '60px', - borderRadius: '4px 12px 12px 12px', - } + background: 'black', + width: '220px', + padding: '8px 12px', + top: '10px', + left: '60px', + borderRadius: '4px 12px 12px 12px', + } : { - background: 'black', - width: '120px', - padding: '8px 12px', - bottom: '0px', - right: '-30px', - borderRadius: '12px 12px 12px 4px', - } + background: 'black', + width: '120px', + padding: '8px 12px', + bottom: '0px', + right: '-30px', + borderRadius: '12px 12px 12px 4px', + } } tooltipContent={ (props.activeStatus !== props.status ? 'not-allowed' : 'pointer')}; `; +const SkeletonWrapper = styled.div` + overflow: hidden; + min-width:220px; +`; + +const SkeletonContainer = styled(Skeleton)` + max-width: -webkit-fill-available; + border-radius: 5px; + gap: 16px; + display: flex; +`; + export default UnlockProfile; diff --git a/src/helpers/connectWalletHelper.ts b/src/helpers/connectWalletHelper.ts new file mode 100644 index 0000000000..14eed32836 --- /dev/null +++ b/src/helpers/connectWalletHelper.ts @@ -0,0 +1,27 @@ +import * as w2wHelper from 'helpers/w2w'; + +export const retrieveUserPGPKeyFromStorage = (account: string) => { + const key = getUniquePGPKey(account); + const value = localStorage.getItem(key); + + if (isPGPKey(value)) { + return value; + } + + return null; +}; + +const isPGPKey = (str: string | null) => { + if (!str) return false; + + const pgpPublicKeyRegex = /-----BEGIN PGP PUBLIC KEY BLOCK-----[\s\S]*-----END PGP PUBLIC KEY BLOCK-----/; + const pgpPrivateKeyRegex = /-----BEGIN PGP PRIVATE KEY BLOCK-----[\s\S]*-----END PGP PRIVATE KEY BLOCK-----/; + + return pgpPublicKeyRegex.test(str) || pgpPrivateKeyRegex.test(str); +}; + +const getUniquePGPKey = (account: string) => { + let address = w2wHelper.walletToCAIP10({ account }); + const uniqueKey = `push-user-${address}-pgp`; + return uniqueKey; +}; From 904d5fb80e94b5fee04644249e5a7e7de7399592 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Mon, 27 May 2024 16:22:53 +0530 Subject: [PATCH 2/3] Skeleton added for Remember Me Also --- .../chat/unlockProfile/UnlockProfile.tsx | 56 ++++++++++++------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx index 958ea8f01b..5ada4f6a08 100644 --- a/src/components/chat/unlockProfile/UnlockProfile.tsx +++ b/src/components/chat/unlockProfile/UnlockProfile.tsx @@ -230,26 +230,44 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps {/* Remember Me Tag */} {activeStatus.status === PROFILESTATE.UNLOCK_PROFILE && ( - - - - + {!isLoading ? ( + + + + + Remember Me + + + + + ) : ( + - Remember Me - - - + + + )} + + )} ); From 03f0cab2cf404f49fbd9735ecbe4dced9adc1cb0 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Thu, 30 May 2024 18:24:06 +0530 Subject: [PATCH 3/3] Resolved Comments --- src/components/chat/unlockProfile/UnlockProfile.tsx | 3 +-- src/helpers/connectWalletHelper.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx index 5ada4f6a08..f0fe2bf145 100644 --- a/src/components/chat/unlockProfile/UnlockProfile.tsx +++ b/src/components/chat/unlockProfile/UnlockProfile.tsx @@ -78,9 +78,8 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps const [isLoading, setIsLoading] = useState(false); useEffect(() => { - if (wallet?.accounts?.length > 0) { + if (wallet?.accounts?.length) { const decryptedPGPKeys = retrieveUserPGPKeyFromStorage(account); - console.log("decryptedPGPKeys", decryptedPGPKeys); if (decryptedPGPKeys) { setIsLoading(true); } diff --git a/src/helpers/connectWalletHelper.ts b/src/helpers/connectWalletHelper.ts index 14eed32836..5447756291 100644 --- a/src/helpers/connectWalletHelper.ts +++ b/src/helpers/connectWalletHelper.ts @@ -1,6 +1,6 @@ import * as w2wHelper from 'helpers/w2w'; -export const retrieveUserPGPKeyFromStorage = (account: string) => { +export const retrieveUserPGPKeyFromStorage = (account: string): string | null => { const key = getUniquePGPKey(account); const value = localStorage.getItem(key);