Release/2.4.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Casper Wallet",
   "description": "Securely manage your CSPR tokens and interact with dapps with the self-custody wallet for the Casper blockchain.",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "author": "MAKE LLC",
   "scripts": {
     "devtools:redux": "redux-devtools --hostname=localhost",
@@ -52,7 +52,7 @@
     "styled-components": "^5"
   },
   "dependencies": {
-    "@bringweb3/chrome-extension-kit": "1.6.3",
+    "@bringweb3/chrome-extension-kit": "1.6.4",
     "@formatjs/intl": "2.10.4",
     "@hookform/resolvers": "2.9.10",
     "@lapo/asn1js": "1.2.4",

scripts/build_all.sh

@@ -1,3 +1,3 @@
 HASH=$(git rev-parse --short HEAD)
 
-npm run build:chrome && npm run build:firefox && cd ./build && zip -r casper-wallet-2.4.0rc7#$HASH.zip ./* && npm run build:src
+npm run build:chrome && npm run build:firefox && cd ./build && zip -r casper-wallet-2.4.2rc1#$HASH.zip ./* && npm run build:src

src/apps/connect-to-app/pages/approve-connection/index.tsx

@@ -8,7 +8,10 @@ import { ErrorMessages } from '@src/constants';
 import { useAccountManager } from '@popup/hooks/use-account-actions-with-events';
 
 import { closeCurrentWindow } from '@background/close-current-window';
-import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+import {
+  parseRequestTabId,
+  sendSdkResponseToSpecificTab
+} from '@background/send-sdk-response-to-specific-tab';
 
 import { sdkMethod } from '@content/sdk-method';
 
@@ -42,8 +45,9 @@ export function ApproveConnectionPage({
 }: Props) {
   const searchParams = new URLSearchParams(document.location.search);
   const requestId = searchParams.get('requestId');
+  const requestTabId = parseRequestTabId(searchParams);
 
-  if (!requestId) {
+  if (!requestId || requestTabId == null) {
     throw Error(
       `${ErrorMessages.common.MISSING_SEARCH_PARAM.description} ${requestId}`
     );
@@ -57,14 +61,16 @@ export function ApproveConnectionPage({
   const handleApproveConnection = async () => {
     await connectAccounts(selectedAccountNames, origin, siteTitle);
     await sendSdkResponseToSpecificTab(
-      sdkMethod.connectResponse(true, { requestId })
+      sdkMethod.connectResponse(true, { requestId }),
+      requestTabId
     );
     navigate(RouterPath.Connecting);
   };
 
   const handleCancel = async () => {
     await sendSdkResponseToSpecificTab(
-      sdkMethod.connectResponse(false, { requestId })
+      sdkMethod.connectResponse(false, { requestId }),
+      requestTabId
     );
     closeCurrentWindow();
   };

src/apps/connect-to-app/pages/select-account/index.tsx

@@ -10,7 +10,10 @@ import {
   selectConnectedAccountNamesWithActiveOrigin,
   selectIsActiveAccountConnectedWithActiveOrigin
 } from '@background/redux/vault/selectors';
-import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+import {
+  parseRequestTabId,
+  sendSdkResponseToSpecificTab
+} from '@background/send-sdk-response-to-specific-tab';
 
 import { sdkMethod } from '@content/sdk-method';
 
@@ -44,11 +47,12 @@ export function SelectAccountPage({
 }: SelectAccountPageProps) {
   const searchParams = new URLSearchParams(document.location.search);
   const requestId = searchParams.get('requestId');
+  const requestTabId = parseRequestTabId(searchParams);
 
   const connectedAccountNames =
     useSelector(selectConnectedAccountNamesWithActiveOrigin) ?? [];
 
-  if (!requestId) {
+  if (!requestId || requestTabId == null) {
     throw Error(
       `${ErrorMessages.common.MISSING_SEARCH_PARAM.description} ${requestId}`
     );
@@ -59,7 +63,8 @@ export function SelectAccountPage({
   );
   if (isActiveAccountConnected) {
     sendSdkResponseToSpecificTab(
-      sdkMethod.connectResponse(true, { requestId })
+      sdkMethod.connectResponse(true, { requestId }),
+      requestTabId
     ).then(() => {
       closeCurrentWindow();
     });
@@ -70,7 +75,8 @@ export function SelectAccountPage({
 
   const handleCancel = async () => {
     await sendSdkResponseToSpecificTab(
-      sdkMethod.connectResponse(false, { requestId })
+      sdkMethod.connectResponse(false, { requestId }),
+      requestTabId
     );
     closeCurrentWindow();
   };

src/apps/connect-to-app/pages/switch-account/content.tsx

@@ -42,9 +42,12 @@ import {
   UnconnectedAccountsList
 } from './unconnected-accounts-list';
 
-type SwitchAccountContentProps = { requestId: string };
+type SwitchAccountContentProps = { requestId: string; requestTabId: number };
 
-export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
+export function SwitchAccountContent({
+  requestId,
+  requestTabId
+}: SwitchAccountContentProps) {
   const activeOrigin = useSelector(selectActiveOrigin);
   const activeAccount = useSelector(selectVaultActiveAccount);
   const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys);
@@ -122,6 +125,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
               </ParagraphContainer>
               <UnconnectedAccountsList
                 requestId={requestId}
+                requestTabId={requestTabId}
                 unconnectedAccountsList={unconnectedAccountsList}
                 accountsInfo={accountsInfo}
               />
@@ -165,7 +169,10 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
                         onClick={async () => {
                           await changeActiveAccount(account.name);
                           await sendSdkResponseToSpecificTab(
-                            sdkMethod.switchAccountResponse(true, { requestId })
+                            sdkMethod.switchAccountResponse(true, {
+                              requestId
+                            }),
+                            requestTabId
                           );
                           closeCurrentWindow();
                         }}
@@ -180,6 +187,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
             />
             <UnconnectedAccountsList
               requestId={requestId}
+              requestTabId={requestTabId}
               unconnectedAccountsList={unconnectedAccountsList}
               accountsInfo={accountsInfo}
             />

src/apps/connect-to-app/pages/switch-account/index.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 import { ErrorMessages } from '@src/constants';
 
 import { closeCurrentWindow } from '@background/close-current-window';
-import { sendSdkResponseToSpecificTab } from '@background/send-sdk-response-to-specific-tab';
+import {
+  parseRequestTabId,
+  sendSdkResponseToSpecificTab
+} from '@background/send-sdk-response-to-specific-tab';
 
 import { sdkMethod } from '@content/sdk-method';
 
@@ -18,16 +21,18 @@ import { SwitchAccountContent } from './content';
 export function SwitchAccountPage() {
   const searchParams = new URLSearchParams(document.location.search);
   const requestId = searchParams.get('requestId');
+  const requestTabId = parseRequestTabId(searchParams);
 
-  if (!requestId) {
+  if (!requestId || requestTabId == null) {
     throw Error(
       `${ErrorMessages.common.MISSING_SEARCH_PARAM.description} ${requestId}`
     );
   }
 
   const handleCancel = async () => {
     await sendSdkResponseToSpecificTab(
-      sdkMethod.connectResponse(false, { requestId })
+      sdkMethod.connectResponse(false, { requestId }),
+      requestTabId
     );
     closeCurrentWindow();
   };
@@ -44,7 +49,12 @@ export function SwitchAccountPage() {
           )}
         />
       )}
-      renderContent={() => <SwitchAccountContent requestId={requestId} />}
+      renderContent={() => (
+        <SwitchAccountContent
+          requestId={requestId}
+          requestTabId={requestTabId}
+        />
+      )}
     />
   );
 }

src/apps/connect-to-app/pages/switch-account/unconnected-accounts-list.tsx

@@ -45,12 +45,14 @@ export const SpaceBetweenContainer = styled(CentredFlexRow)`
 interface UnconnectedAccountsListProps {
   unconnectedAccountsList: AccountListRowWithAccountHash<AccountListRows>[];
   requestId: string;
+  requestTabId: number;
   accountsInfo: Record<string, IAccountInfo> | undefined;
 }
 
 export const UnconnectedAccountsList = ({
   unconnectedAccountsList,
   requestId,
+  requestTabId,
   accountsInfo
 }: UnconnectedAccountsListProps) => {
   const activeOrigin = useSelector(selectActiveOrigin);
@@ -103,7 +105,8 @@ export const UnconnectedAccountsList = ({
                       activeOrigin
                     );
                     await sendSdkResponseToSpecificTab(
-                      sdkMethod.switchAccountResponse(false, { requestId })
+                      sdkMethod.switchAccountResponse(false, { requestId }),
+                      requestTabId
                     );
                     closeCurrentWindow();
                   }}

src/apps/signature-request/pages/decrypt-message/decrypt-message-content.tsx

@@ -1,40 +1,77 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import {
+  AlignedFlexRow,
   ContentContainer,
+  FlexColumn,
   PageContainer,
   ParagraphContainer,
-  SpacingSize
+  SpacingSize,
+  VerticalSpaceContainer
 } from '@libs/layout';
 import { FormField, Input, TextArea, Typography } from '@libs/ui/components';
 import { truncateKey } from '@libs/ui/components/hash/utils';
+import { MaybeLink } from '@libs/ui/components/maybe-link/maybe-link';
+import { getFaviconUrlFromOrigin } from '@libs/ui/components/site-favicon-badge/site-favicon-badge';
+
+const Favicon = styled.img`
+  width: 40px;
+  height: 40px;
+
+  object-fit: contain;
+  object-position: center;
+
+  border-radius: ${({ theme }) => theme.borderRadius.twenty}px;
+`;
 
 export interface SignMessageContentProps {
   message: string;
   hasDecryptionError: boolean;
   decryptedMessage: string;
   publicKeyHex: string;
+  origin: string | null;
 }
 
 export function DecryptMessageContent({
   message,
   hasDecryptionError,
   decryptedMessage,
-  publicKeyHex
+  publicKeyHex,
+  origin
 }: SignMessageContentProps) {
   const { t } = useTranslation();
   const theme = useTheme();
+  const faviconUrl = getFaviconUrlFromOrigin(origin);
 
   return (
     <PageContainer>
       <ContentContainer>
-        <ParagraphContainer top={SpacingSize.XL}>
-          <Typography type="header">
-            <Trans t={t}>Decrypt Message Request</Trans>
-          </Typography>
-        </ParagraphContainer>
+        <VerticalSpaceContainer top={SpacingSize.Medium}>
+          <AlignedFlexRow gap={SpacingSize.Small}>
+            {faviconUrl && (
+              <div>
+                <Favicon src={faviconUrl} />
+              </div>
+            )}
+            <FlexColumn flexGrow={1}>
+              <Typography type="header">
+                <Trans t={t}>Decrypt Request</Trans>
+              </Typography>
+              <MaybeLink link={origin}>
+                <Typography
+                  type="captionRegular"
+                  color={'contentAction'}
+                  ellipsis
+                  style={{ maxWidth: '296px' }}
+                >
+                  <Trans t={t}>{origin}</Trans>
+                </Typography>
+              </MaybeLink>
+            </FlexColumn>
+          </AlignedFlexRow>
+        </VerticalSpaceContainer>
         {hasDecryptionError && (
           <ParagraphContainer top={SpacingSize.XL}>
             <FormField label={t('Decryption error:')}>