From 716a6f708b74616fb424a9f523d8743740aac410 Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Wed, 2 Oct 2024 12:46:25 +0300 Subject: [PATCH] added cspr name support to contact details page --- .../pages/switch-account/content.tsx | 6 ++--- .../popup/pages/account-settings/content.tsx | 4 ++- .../pages/connect-another-account/index.tsx | 4 +-- .../popup/pages/connected-sites/index.tsx | 4 +-- .../popup/pages/contact-details/details.tsx | 22 ++++++++++++++++ .../contacts/components/contacts-plate.tsx | 17 ++++-------- src/apps/popup/pages/contacts/content.tsx | 26 ++++++++++++++----- .../header/header-connection-status.tsx | 8 ++++-- .../account-info/use-fetch-accounts-info.ts | 2 +- .../active-account-plate.tsx | 9 ++++--- src/libs/ui/forms/form-validation-rules.ts | 4 ++- 11 files changed, 72 insertions(+), 34 deletions(-) diff --git a/src/apps/connect-to-app/pages/switch-account/content.tsx b/src/apps/connect-to-app/pages/switch-account/content.tsx index ce479aef8..af4446c11 100644 --- a/src/apps/connect-to-app/pages/switch-account/content.tsx +++ b/src/apps/connect-to-app/pages/switch-account/content.tsx @@ -47,7 +47,7 @@ type SwitchAccountContentProps = { requestId: string }; export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) { const activeOrigin = useSelector(selectActiveOrigin); const activeAccount = useSelector(selectVaultActiveAccount); - const publicKeys = useSelector(selectVaultAccountsPublicKeys); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); const connectedAccountsToActiveTab = useSelector( selectConnectedAccountsWithActiveOrigin ); @@ -77,7 +77,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) { account => account.name !== activeAccount?.name ); - const accountsInfo = useFetchAccountsInfo(publicKeys); + const accountsInfo = useFetchAccountsInfo(accountsPublicKeys); return ( @@ -141,7 +141,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) { {account.name} diff --git a/src/apps/popup/pages/account-settings/content.tsx b/src/apps/popup/pages/account-settings/content.tsx index fd964cc6a..b43a6fbcc 100644 --- a/src/apps/popup/pages/account-settings/content.tsx +++ b/src/apps/popup/pages/account-settings/content.tsx @@ -12,6 +12,7 @@ import { dispatchToMainStore } from '@background/redux/utils'; import { hideAccountFromListChanged } from '@background/redux/vault/actions'; import { selectVaultAccount, + selectVaultAccountsPublicKeys, selectVaultHiddenAccountsNames, selectVaultImportedAccountNames, selectVaultLedgerAccountNames @@ -42,13 +43,14 @@ export function AccountSettingsPageContent() { const account = useSelector((state: RootState) => selectVaultAccount(state, accountName || '') ); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); if (!account) { throw new Error("Account doesn't exist"); } + const accountsInfo = useFetchAccountsInfo(accountsPublicKeys); const accountHash = getAccountHashFromPublicKey(account.publicKey); - const accountsInfo = useFetchAccountsInfo([account.publicKey]); const csprName = accountsInfo && accountsInfo[accountHash]?.csprName; diff --git a/src/apps/popup/pages/connect-another-account/index.tsx b/src/apps/popup/pages/connect-another-account/index.tsx index f5dcb115f..3c5e3d0b2 100644 --- a/src/apps/popup/pages/connect-another-account/index.tsx +++ b/src/apps/popup/pages/connect-another-account/index.tsx @@ -58,7 +58,7 @@ export function ConnectAnotherAccountPageContent() { const { targetAccountName } = useParams(); const activeOrigin = useSelector(selectActiveOrigin); - const publicKeys = useSelector(selectVaultAccountsPublicKeys); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); const { connectAnotherAccountWithEvent: connectAccount, @@ -87,7 +87,7 @@ export function ConnectAnotherAccountPageContent() { targetAccount?.publicKey ); - const accountsInfo = useFetchAccountsInfo(publicKeys); + const accountsInfo = useFetchAccountsInfo(accountsPublicKeys); const targetAccountCsprName = accountsInfo && accountsInfo[targetAccountHash]?.csprName; diff --git a/src/apps/popup/pages/connected-sites/index.tsx b/src/apps/popup/pages/connected-sites/index.tsx index c3ec3879e..b2560728d 100644 --- a/src/apps/popup/pages/connected-sites/index.tsx +++ b/src/apps/popup/pages/connected-sites/index.tsx @@ -32,11 +32,11 @@ export function ConnectedSitesPage() { const accountsByOrigin = useSelector(selectAccountsByOriginDict); const siteNameByOriginDict = useSelector(selectSiteNameByOriginDict); - const publicKeys = useSelector(selectVaultAccountsPublicKeys); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); const isNoSitesConnected = !Object.entries(accountsByOrigin).length; - const accountsInfo = useFetchAccountsInfo(publicKeys); + const accountsInfo = useFetchAccountsInfo(accountsPublicKeys); if (isNoSitesConnected) { return ( diff --git a/src/apps/popup/pages/contact-details/details.tsx b/src/apps/popup/pages/contact-details/details.tsx index 3655ce83b..5482d06a5 100644 --- a/src/apps/popup/pages/contact-details/details.tsx +++ b/src/apps/popup/pages/contact-details/details.tsx @@ -1,14 +1,19 @@ import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; +import { selectAllContactsPublicKeys } from '@background/redux/contacts/selectors'; import { Contact } from '@background/redux/contacts/types'; +import { getAccountHashFromPublicKey } from '@libs/entities/Account'; import { ContentContainer, + FlexColumn, LeftAlignedFlexColumn, SpacingSize } from '@libs/layout'; +import { useFetchAccountsInfo } from '@libs/services/account-info'; import { Avatar, Hash, @@ -32,6 +37,13 @@ interface ContactDetailsProps { export const ContactDetails = ({ contact }: ContactDetailsProps) => { const { t } = useTranslation(); + const contactPublicKeys = useSelector(selectAllContactsPublicKeys); + + const accountsInfo = useFetchAccountsInfo(contactPublicKeys); + + const accountHash = getAccountHashFromPublicKey(contact.publicKey); + const csprName = accountsInfo && accountsInfo[accountHash]?.csprName; + return ( @@ -44,6 +56,16 @@ export const ContactDetails = ({ contact }: ContactDetailsProps) => { variant={HashVariant.CaptionHash} color="contentPrimary" /> + {csprName ? ( + + + CSPR.name + + + {csprName} + + + ) : null} Last edited: {formatShortTimestamp(contact.lastModified)} diff --git a/src/apps/popup/pages/contacts/components/contacts-plate.tsx b/src/apps/popup/pages/contacts/components/contacts-plate.tsx index 8e0a3b226..421ca3a82 100644 --- a/src/apps/popup/pages/contacts/components/contacts-plate.tsx +++ b/src/apps/popup/pages/contacts/components/contacts-plate.tsx @@ -1,13 +1,10 @@ +import { Maybe } from 'casper-wallet-core/src/typings/common'; import React from 'react'; -import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { RouterPath, useTypedNavigate } from '@popup/router'; -import { selectAllContactsPublicKeys } from '@background/redux/contacts/selectors'; - import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout'; -import { useFetchAccountsInfo } from '@libs/services/account-info'; import { Avatar, Hash, HashVariant, Typography } from '@libs/ui/components'; const Container = styled(AlignedFlexRow)` @@ -19,22 +16,18 @@ const Container = styled(AlignedFlexRow)` interface ContactsPlateProps { publicKey: string; name: string; - accountHash: string; + csprName: Maybe | undefined; + brandingLogo: Maybe | undefined; } export const ContactsPlate = ({ publicKey, name, - accountHash + csprName, + brandingLogo }: ContactsPlateProps) => { const navigate = useTypedNavigate(); - const contactPublicKeys = useSelector(selectAllContactsPublicKeys); - const accountsInfo = useFetchAccountsInfo(contactPublicKeys); - - const csprName = accountsInfo && accountsInfo[accountHash]?.csprName; - const brandingLogo = accountsInfo && accountsInfo[accountHash]?.brandingLogo; - return ( { const contacts = useSelector(selectAllContacts); const lastModified = useSelector(selectLastModified); + const contactPublicKeys = useSelector(selectAllContactsPublicKeys); const contactsWithId = contacts.map((contact, index) => ({ ...contact, @@ -31,6 +34,8 @@ export const ContactsBookPageContent = () => { accountHash: getAccountHashFromPublicKey(contact.publicKey) })); + const accountsInfo = useFetchAccountsInfo(contactPublicKeys); + if (contactsWithId.length === 0) { return ; } @@ -53,13 +58,20 @@ export const ContactsBookPageContent = () => { )} ( - - )} + renderRow={({ publicKey, name, accountHash }) => { + const csprName = accountsInfo && accountsInfo[accountHash]?.csprName; + const brandingLogo = + accountsInfo && accountsInfo[accountHash]?.brandingLogo; + + return ( + + ); + }} marginLeftForItemSeparatorLine={54} /> diff --git a/src/libs/layout/header/header-connection-status.tsx b/src/libs/layout/header/header-connection-status.tsx index 1f1ce3af0..839c02459 100644 --- a/src/libs/layout/header/header-connection-status.tsx +++ b/src/libs/layout/header/header-connection-status.tsx @@ -1,7 +1,10 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; +import { + selectVaultAccountsPublicKeys, + selectVaultActiveAccount +} from '@background/redux/vault/selectors'; import { getAccountHashFromPublicKey } from '@libs/entities/Account'; import { @@ -30,8 +33,9 @@ export function HeaderConnectionStatus({ isConnected }: HeaderConnectionStatusProps) { const activeAccount = useSelector(selectVaultActiveAccount); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); - const accountsInfo = useFetchAccountsInfo([activeAccount?.publicKey!]); + const accountsInfo = useFetchAccountsInfo(accountsPublicKeys); const accountHash = getAccountHashFromPublicKey(activeAccount?.publicKey); diff --git a/src/libs/services/account-info/use-fetch-accounts-info.ts b/src/libs/services/account-info/use-fetch-accounts-info.ts index c550555fa..273eb8817 100644 --- a/src/libs/services/account-info/use-fetch-accounts-info.ts +++ b/src/libs/services/account-info/use-fetch-accounts-info.ts @@ -19,7 +19,7 @@ export const useFetchAccountsInfo = (accountPublicKeys: string[]) => { const accountHashesString = accountHashes.toString(); const { data: accountsInfo } = useQuery({ - queryKey: ['ACCOUNT_INFO', accountHashesString], + queryKey: ['ACCOUNT_INFO', accountHashesString, network], queryFn: async () => { return await accountInfoRepository.getAccountsInfo({ accountHashes, diff --git a/src/libs/ui/components/active-account-plate/active-account-plate.tsx b/src/libs/ui/components/active-account-plate/active-account-plate.tsx index aba7d66cc..931cb6c63 100644 --- a/src/libs/ui/components/active-account-plate/active-account-plate.tsx +++ b/src/libs/ui/components/active-account-plate/active-account-plate.tsx @@ -3,7 +3,10 @@ import { Trans, useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; -import { selectVaultActiveAccount } from '@background/redux/vault/selectors'; +import { + selectVaultAccountsPublicKeys, + selectVaultActiveAccount +} from '@background/redux/vault/selectors'; import { getAccountHashFromPublicKey } from '@libs/entities/Account'; import { @@ -56,11 +59,11 @@ export const ActiveAccountPlate = ({ const { t } = useTranslation(); const activeAccount = useSelector(selectVaultActiveAccount); + const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys); - const accountsInfo = useFetchAccountsInfo([activeAccount?.publicKey!]); + const accountsInfo = useFetchAccountsInfo(accountsPublicKeys); const accountHash = getAccountHashFromPublicKey(activeAccount?.publicKey); - const csprName = accountsInfo && accountsInfo[accountHash]?.csprName; const brandingLogo = accountsInfo && accountsInfo[accountHash]?.brandingLogo; diff --git a/src/libs/ui/forms/form-validation-rules.ts b/src/libs/ui/forms/form-validation-rules.ts index 0a7789715..dec1876bb 100644 --- a/src/libs/ui/forms/form-validation-rules.ts +++ b/src/libs/ui/forms/form-validation-rules.ts @@ -137,7 +137,9 @@ export const useRecipientPublicKeyRule = () => { return false; }, - message: t('Recipient should be a valid public key or cspr name') + message: t( + 'The recipient should be a valid public key, CSPR.name or contact name' + ) }); };