Merge remote-tracking branch 'origin/develop' into WALLET-439-cw-migr…

…ate-to-casper-wallet-core-fetching-cep-18-tokens

e2e-tests/popup/buy-cspr/buy-cspr.spec.ts

@@ -39,7 +39,7 @@ popup.describe('Popup UI: buy cspr', () => {
     }
   );
 
-  popup(
+  popup.skip(
     'should redirect to Ramp provider page',
     async ({ popupPage, unlockVault, context }) => {
       await unlockVault();

package.json

@@ -86,7 +86,7 @@
     "micro-aes-gcm": "0.3.3",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.0.2",
+    "react-dom": "^18.3.1",
     "react-hook-form": "7.48.2",
     "react-i18next": "14.1.0",
     "react-infinite-scroll-hook": "^4.1.1",
@@ -126,7 +126,7 @@
     "@types/md5": "^2.3.5",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.3.0",
     "@types/react-virtualized": "^9.21.30",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/parser": "^5.62.0",

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/onboarding/pages/create-vault-password/index.tsx

@@ -3,7 +3,7 @@ import { useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { TermsLink } from '@src/constants';
+import { TERMS_URLS } from '@src/constants';
 
 import { Stepper } from '@onboarding/components/stepper';
 import { RouterPath } from '@onboarding/router';
@@ -69,7 +69,7 @@ export function CreateVaultPasswordPage({
         onClick={event => {
           event.stopPropagation();
           event.preventDefault();
-          window.open(TermsLink.Tos, '_blank');
+          window.open(TERMS_URLS.tos, '_blank');
         }}
         color="contentAction"
       >
@@ -80,7 +80,7 @@ export function CreateVaultPasswordPage({
         onClick={event => {
           event.stopPropagation();
           event.preventDefault();
-          window.open(TermsLink.Privacy, '_blank');
+          window.open(TERMS_URLS.privacy, '_blank');
         }}
         color="contentAction"
       >

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}