feature: add cspr name support to contact details page

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 (
     <PageContainer>
@@ -141,7 +141,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
                     <SpaceBetweenContainer>
                       <LeftAlignedFlexColumn>
                         <ConnectionStatusBadge
-                          isConnected
+                          isConnected={true}
                           displayContext="accountList"
                         />
                         <Typography type="body">{account.name}</Typography>

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;
 

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;

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 (

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 (
     <ContentContainer>
       <Tile>
@@ -44,6 +56,16 @@ export const ContactDetails = ({ contact }: ContactDetailsProps) => {
               variant={HashVariant.CaptionHash}
               color="contentPrimary"
             />
+            {csprName ? (
+              <FlexColumn gap={SpacingSize.Small}>
+                <Typography type="bodySemiBold">
+                  <Trans t={t}>CSPR.name</Trans>
+                </Typography>
+                <Typography type="captionRegular" color="contentSecondary">
+                  {csprName}
+                </Typography>
+              </FlexColumn>
+            ) : null}
             <Typography type="captionRegular" color="contentSecondary">
               <Trans t={t}>
                 Last edited: {formatShortTimestamp(contact.lastModified)}

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<string> | undefined;
+  brandingLogo: Maybe<string> | 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 (
     <Container
       gap={SpacingSize.Medium}

src/apps/popup/pages/contacts/content.tsx

@@ -7,6 +7,7 @@ import { EmptyContacts } from '@popup/pages/contacts/components/empty-contacts';
 
 import {
   selectAllContacts,
+  selectAllContactsPublicKeys,
   selectLastModified
 } from '@background/redux/contacts/selectors';
 
@@ -16,6 +17,7 @@ import {
   ParagraphContainer,
   SpacingSize
 } from '@libs/layout';
+import { useFetchAccountsInfo } from '@libs/services/account-info';
 import { List, Typography } from '@libs/ui/components';
 import { formatShortTimestamp } from '@libs/ui/utils';
 
@@ -24,13 +26,16 @@ export const ContactsBookPageContent = () => {
 
   const contacts = useSelector(selectAllContacts);
   const lastModified = useSelector(selectLastModified);
+  const contactPublicKeys = useSelector(selectAllContactsPublicKeys);
 
   const contactsWithId = contacts.map((contact, index) => ({
     ...contact,
     id: index,
     accountHash: getAccountHashFromPublicKey(contact.publicKey)
   }));
 
+  const accountsInfo = useFetchAccountsInfo(contactPublicKeys);
+
   if (contactsWithId.length === 0) {
     return <EmptyContacts />;
   }
@@ -53,13 +58,20 @@ export const ContactsBookPageContent = () => {
       )}
       <List
         rows={contactsWithId}
-        renderRow={({ publicKey, name, accountHash }) => (
-          <ContactsPlate
-            publicKey={publicKey}
-            name={name}
-            accountHash={accountHash}
-          />
-        )}
+        renderRow={({ publicKey, name, accountHash }) => {
+          const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;
+          const brandingLogo =
+            accountsInfo && accountsInfo[accountHash]?.brandingLogo;
+
+          return (
+            <ContactsPlate
+              publicKey={publicKey}
+              name={name}
+              csprName={csprName}
+              brandingLogo={brandingLogo}
+            />
+          );
+        }}
         marginLeftForItemSeparatorLine={54}
       />
     </ContentContainer>

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);
 

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,

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;
 

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'
+      )
     });
 };