feature: add cspr name support (#1057)

* add csprName support, update the home page and header, remove unused code * added cspr name support to deploys list * fix e2e tests * fix onboarding e2e tests
make-software · Sep 16, 2024 · da427a5 · da427a5
1 parent 3dfdb5c
commit da427a5
Show file tree

Hide file tree

Showing 65 changed files with 681 additions and 813 deletions.
diff --git a/e2e-tests/constants.ts b/e2e-tests/constants.ts
@@ -78,7 +78,7 @@ export const RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS = {
 };
 
 export const RECOVER_SECOND_ACCOUNT_FROM_TWELVE_WORDS = {
-  accountName: 'Account 1',
+  accountName: 'Account 2',
   publicKey:
     '02022cafccfb61ffc4e4221e4d2c38eec6035d579d04c1396b1c2027dc0729c53589',
   truncatedPublicKey: '02022...53589'

diff --git a/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts b/e2e-tests/onboarding-flow/recover-secret-phrase-flow.spec.ts
@@ -50,7 +50,9 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
       await page.getByText('All accounts').click();
 
       await onboardingExpect(
-        page.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+        page
+          .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
       await onboardingExpect(
         page.getByText(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey).nth(0)
@@ -100,10 +102,12 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
       await page.getByText('All accounts').click();
 
       await onboardingExpect(
-        page.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+        page
+          .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
       await onboardingExpect(
-        page.getByText(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey).nth(0)
+        page.getByText(DEFAULT_FIRST_ACCOUNT.truncatedPublicKey).nth(1)
       ).toBeVisible();
       await onboardingExpect(
         page.getByText(DEFAULT_SECOND_ACCOUNT.accountName)
@@ -158,7 +162,11 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
       await page.getByText('All accounts').click();
 
       await onboardingExpect(
-        page.getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName)
+        page
+          .getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName, {
+            exact: true
+          })
+          .nth(1)
       ).toBeVisible();
       await onboardingExpect(
         page
@@ -213,12 +221,16 @@ onboarding.describe('Onboarding UI: recover secret phrase flow', () => {
       await page.getByText('All accounts').click();
 
       await onboardingExpect(
-        page.getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName)
+        page
+          .getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.accountName, {
+            exact: true
+          })
+          .nth(1)
       ).toBeVisible();
       await onboardingExpect(
         page
           .getByText(RECOVER_FIRST_ACCOUNT_FROM_TWELVE_WORDS.truncatedPublicKey)
-          .nth(0)
+          .nth(1)
       ).toBeVisible();
       await onboardingExpect(
         page.getByText(RECOVER_SECOND_ACCOUNT_FROM_TWELVE_WORDS.accountName)

diff --git a/e2e-tests/popup/connect-account/connect-account.spec.ts b/e2e-tests/popup/connect-account/connect-account.spec.ts
@@ -56,7 +56,9 @@ popup.describe('Popup UI: connect account', () => {
         page.getByRole('button', { name: 'Disconnect' })
       ).toBeVisible();
       await popupExpect(
-        page.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+        page
+          .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
     }
   );
@@ -98,7 +100,9 @@ popup.describe('Popup UI: connect account', () => {
         page.getByRole('button', { name: 'Disconnect' })
       ).toBeVisible();
       await popupExpect(
-        page.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+        page
+          .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
       await popupExpect(
         page.getByText(ACCOUNT_NAMES.defaultSecondAccountName)

diff --git a/e2e-tests/popup/contacts/contacts.spec.ts b/e2e-tests/popup/contacts/contacts.spec.ts
@@ -68,7 +68,9 @@ popup.describe('Popup UI: contacts', () => {
       ).toBeVisible();
 
       await popupExpect(
-        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+        popupPage
+          .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
 
       await popupExpect(
@@ -135,7 +137,10 @@ popup.describe('Popup UI: contacts', () => {
       await unlockVault();
       await addContact();
 
-      await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click();
+      await popupPage
+        .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+        .nth(1)
+        .click();
 
       await popupExpect(
         popupPage.getByRole('heading', {
@@ -144,7 +149,9 @@ popup.describe('Popup UI: contacts', () => {
       ).toBeVisible();
 
       await popupExpect(
-        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.publicKey)
+        popupPage
+          .getByText(DEFAULT_FIRST_ACCOUNT.publicKey, { exact: true })
+          .nth(1)
       ).toBeVisible();
     }
   );
@@ -155,7 +162,10 @@ popup.describe('Popup UI: contacts', () => {
       await unlockVault();
       await addContact();
 
-      await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click();
+      await popupPage
+        .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+        .nth(1)
+        .click();
 
       await popupPage.getByTestId('edit-contact-button').click();
 
@@ -190,7 +200,9 @@ popup.describe('Popup UI: contacts', () => {
       await popupPage.getByRole('button', { name: 'Save' }).click();
 
       await popupExpect(
-        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+        popupPage
+          .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+          .nth(1)
       ).not.toBeVisible();
 
       await popupPage.getByText(DEFAULT_SECOND_ACCOUNT.accountName).click();
@@ -213,7 +225,10 @@ popup.describe('Popup UI: contacts', () => {
       await unlockVault();
       await addContact();
 
-      await popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName).click();
+      await popupPage
+        .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+        .nth(1)
+        .click();
 
       await popupPage.getByTestId('delete-contact-button').click();
 
@@ -233,7 +248,9 @@ popup.describe('Popup UI: contacts', () => {
       await popupPage.getByRole('button', { name: 'Delete' }).click();
 
       await popupExpect(
-        popupPage.getByText(DEFAULT_FIRST_ACCOUNT.accountName)
+        popupPage
+          .getByText(DEFAULT_FIRST_ACCOUNT.accountName, { exact: true })
+          .nth(1)
       ).not.toBeVisible();
     }
   );

diff --git a/e2e-tests/popup/disconnect-account/disconnect-account.spec.ts b/e2e-tests/popup/disconnect-account/disconnect-account.spec.ts
@@ -28,7 +28,9 @@ popup.describe('Popup UI: disconnect account', () => {
       await popupPage.getByText('Connected sites').click();
 
       await popupExpect(
-        popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+        popupPage
+          .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
       await popupExpect(
         popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName)
@@ -40,7 +42,9 @@ popup.describe('Popup UI: disconnect account', () => {
       await disconnectIcons[0].click();
 
       await popupExpect(
-        popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+        popupPage
+          .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true })
+          .nth(1)
       ).not.toBeVisible();
       await popupExpect(
         popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName)
@@ -55,7 +59,9 @@ popup.describe('Popup UI: disconnect account', () => {
       await popupPage.getByText('Connected sites').click();
 
       await popupExpect(
-        popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+        popupPage
+          .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true })
+          .nth(1)
       ).toBeVisible();
       await popupExpect(
         popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName)

diff --git a/e2e-tests/popup/rename-account/rename-account.spec.ts b/e2e-tests/popup/rename-account/rename-account.spec.ts
@@ -7,7 +7,8 @@ popup.describe('Popup UI: rename account', () => {
     async ({ popupPage, unlockVault }) => {
       await unlockVault();
 
-      await popupPage.getByTestId('popover-children-container').click();
+      await popupPage.getByTestId('connection-status-modal').click();
+      await popupPage.getByTestId('popover-children-container').nth(0).click();
 
       await popupPage.getByText('Rename').click();
 

diff --git a/src/apps/popup/pages/account-settings/content.tsx b/src/apps/popup/pages/account-settings/content.tsx
@@ -17,8 +17,6 @@ import {
   selectVaultLedgerAccountNames
 } from '@background/redux/vault/selectors';
 
-import { useFetchAccountInfo } from '@hooks/use-fetch-account-info';
-
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
   ContentContainer,
@@ -27,6 +25,7 @@ import {
   TileContainer,
   VerticalSpaceContainer
 } from '@libs/layout';
+import { useFetchAccountInfo } from '@libs/services/account-info';
 import {
   Hash,
   HashVariant,
@@ -49,19 +48,16 @@ export function AccountSettingsPageContent() {
   }
 
   const accountHash = getAccountHashFromPublicKey(account.publicKey);
-  const { accountInfoStandardName } = useFetchAccountInfo(account);
+  const accountInfo = useFetchAccountInfo([account.publicKey]);
+
+  const csprName = accountInfo && accountInfo[accountHash]?.csprName;
 
   return (
     <>
       <ContentContainer>
         <Tile>
           <TileContainer paddingVertical={SpacingSize.XL}>
             <Typography type="header">{account.name}</Typography>
-            {accountInfoStandardName && (
-              <Typography type="body" ellipsis>
-                {accountInfoStandardName}
-              </Typography>
-            )}
             <VerticalSpaceContainer top={SpacingSize.XL}>
               <QRCodeCanvas
                 id="qrCode"
@@ -83,6 +79,18 @@ export function AccountSettingsPageContent() {
                 />
               </FlexColumn>
             </VerticalSpaceContainer>
+            {csprName ? (
+              <VerticalSpaceContainer top={SpacingSize.XL}>
+                <FlexColumn gap={SpacingSize.Small}>
+                  <Typography type="bodySemiBold">
+                    <Trans t={t}>CSPR.name</Trans>
+                  </Typography>
+                  <Typography type="captionRegular" color="contentSecondary">
+                    {csprName}
+                  </Typography>
+                </FlexColumn>
+              </VerticalSpaceContainer>
+            ) : null}
             <VerticalSpaceContainer top={SpacingSize.XL}>
               <FlexColumn gap={SpacingSize.Small}>
                 <Typography type="bodySemiBold">

diff --git a/src/apps/popup/pages/all-accounts/content.tsx b/src/apps/popup/pages/all-accounts/content.tsx
@@ -4,24 +4,29 @@ import { useSelector } from 'react-redux';
 
 import {
   selectConnectedAccountNamesWithActiveOrigin,
+  selectVaultAccountsPublicKeys,
   selectVaultActiveAccountName,
   selectVaultHiddenAccounts,
   selectVaultVisibleAccounts
 } from '@background/redux/vault/selectors';
 
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import { ContentContainer, SpacingSize } from '@libs/layout';
-import { AccountListRows } from '@libs/types/account';
+import { useFetchAccountInfo } from '@libs/services/account-info';
+import {
+  AccountListRowWithAccountHash,
+  AccountListRows
+} from '@libs/types/account';
 import { List } from '@libs/ui/components';
 import { AccountListItem } from '@libs/ui/components/account-list/account-list-item';
 import { sortAccounts } from '@libs/ui/components/account-list/utils';
 
 export const AllAccountsContent = () => {
   const [visibleAccountsWithId, setVisibleAccountsWithId] = useState<
-    AccountListRows[]
+    AccountListRowWithAccountHash<AccountListRows>[]
   >([]);
   const [hiddenAccountsWithId, setHiddeAccountsWithId] = useState<
-    AccountListRows[]
+    AccountListRowWithAccountHash<AccountListRows>[]
   >([]);
 
   const { t } = useTranslation();
@@ -31,6 +36,9 @@ export const AllAccountsContent = () => {
   const connectedAccountNames =
     useSelector(selectConnectedAccountNamesWithActiveOrigin) || [];
   const activeAccountName = useSelector(selectVaultActiveAccountName);
+  const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys);
+
+  const accountInfo = useFetchAccountInfo(accountsPublicKeys);
 
   useEffect(() => {
     const visibleAccountListRows = sortAccounts(
@@ -77,6 +85,7 @@ export const AllAccountsContent = () => {
               isActiveAccount={isActiveAccount}
               isConnected={isConnected}
               showHideAccountItem
+              accountInfo={accountInfo}
             />
           );
         }}
@@ -97,6 +106,7 @@ export const AllAccountsContent = () => {
                 isActiveAccount={false}
                 isConnected={isConnected}
                 showHideAccountItem
+                accountInfo={accountInfo}
               />
             );
           }}

diff --git a/...ponents/contacts-plate/contacts-plate.tsx → ...es/contacts/components/contacts-plate.tsx b/...ponents/contacts-plate/contacts-plate.tsx → ...es/contacts/components/contacts-plate.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { RouterPath, useTypedNavigate } from '@popup/router';
 
+import { selectAllPublicKeys } from '@background/redux/contacts/selectors';
+
 import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout';
+import { useFetchAccountInfo } from '@libs/services/account-info';
 import { Avatar, Hash, HashVariant, Typography } from '@libs/ui/components';
 
 const Container = styled(AlignedFlexRow)`
@@ -15,23 +19,40 @@ const Container = styled(AlignedFlexRow)`
 interface ContactsPlateProps {
   publicKey: string;
   name: string;
+  accountHash: string;
 }
 
-export const ContactsPlate = ({ publicKey, name }: ContactsPlateProps) => {
+export const ContactsPlate = ({
+  publicKey,
+  name,
+  accountHash
+}: ContactsPlateProps) => {
   const navigate = useTypedNavigate();
 
+  const contactPublicKeys = useSelector(selectAllPublicKeys);
+  const accountInfo = useFetchAccountInfo(contactPublicKeys);
+
+  const csprName = accountInfo && accountInfo[accountHash]?.csprName;
+  const brandingLogo = accountInfo && accountInfo[accountHash]?.brandingLogo;
+
   return (
     <Container
       gap={SpacingSize.Medium}
       onClick={() => {
         navigate(RouterPath.ContactDetails.replace(':contactName', name));
       }}
     >
-      <Avatar publicKey={publicKey} size={24} borderRadius={2} />
+      <Avatar
+        publicKey={publicKey}
+        size={24}
+        borderRadius={2}
+        brandingLogo={brandingLogo}
+      />
       <FlexColumn>
         <Typography type="captionRegular">{name}</Typography>
         <Hash
           value={publicKey}
+          csprName={csprName}
           variant={HashVariant.CaptionHash}
           truncatedSize="medium"
           truncated

diff --git a/...s/popup/pages/contacts/empty-contacts.tsx → ...es/contacts/components/empty-contacts.tsx b/...s/popup/pages/contacts/empty-contacts.tsx → ...es/contacts/components/empty-contacts.tsx