Merge pull request #5282 from LiskHQ/5278-implement-wc-message-signin…

…g-account-journey

Handle add/switch account flow on WC message signing method

.github/workflows/semgrep.yml

@@ -30,16 +30,17 @@ jobs:
       # Fetch project source with GitHub Actions Checkout.
       - uses: actions/checkout@v3
       # Run the "semgrep ci" command on the command line of the docker image.
-      - run: semgrep --sarif --output=semgrep.sarif --metrics=off --exclude=*.test.js
+      - run: semgrep --sarif --metrics=off --exclude=*.test.js
         env:
           # Connect to Semgrep Cloud Platform through your SEMGREP_APP_TOKEN.
           # Generate a token from Semgrep Cloud Platform > Settings
           # and add it to your GitHub secrets.
           # SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}
           SEMGREP_RULES: 'p/javascript p/r2c p/r2c-security-audit p/r2c-best-practices p/nodejs p/nodejsscan ./.github/semgrep/rule.yaml'
 
-      - name: Upload SARIF file for GitHub Advanced Security Dashboard
-        uses: github/codeql-action/upload-sarif@v2
-        with:
-          sarif_file: semgrep.sarif
-        if: always()
+      # this should be re-instated when the --output option command works with the semgrep exec command
+      # - name: Upload SARIF file for GitHub Advanced Security Dashboard
+      #   uses: github/codeql-action/upload-sarif@v2
+      #   with:
+      #     sarif_file: semgrep.sarif
+      #   if: always()

libs/wcm/hooks/useSession.js

@@ -6,7 +6,7 @@ import { onApprove, onReject } from '../utils/sessionHandlers';
 import { EVENTS, STATUS, ERROR_CASES } from '../constants/lifeCycle';
 import { useEvents } from './useEvents';
 
-export const useSession = () => {
+export const useSession = ({ isEnabled = true } = {}) => {
   const [hasLoaded, setHasLoaded] = useState(false);
   const {
     events,
@@ -119,12 +119,12 @@ export const useSession = () => {
   );
 
   useEffect(() => {
-    if (signClient?.session && !hasLoaded) {
+    if (signClient?.session && !hasLoaded && isEnabled) {
       (async () => {
         await loadSessions();
       })();
     }
-  }, [signClient, sessions]);
+  }, [signClient, sessions, isEnabled]);
 
   return {
     hasLoaded,

src/locales/en/common.json

@@ -448,6 +448,7 @@
   "Personalize each transaction with a custom message.": "Personalize each transaction with a custom message.",
   "Ping device": "Ping device",
   "Please add a member beyond yourself for registering multisignature account.": "Please add a member beyond yourself for registering multisignature account.",
+  "Please add an account to your wallet before connecting external applications.": "Please add an account to your wallet before connecting external applications.",
   "Please choose the correct words from the list below to complete your secret recovery phrase.": "Please choose the correct words from the list below to complete your secret recovery phrase.",
   "Please click on “Switch to signing account” ": "Please click on “Switch to signing account” ",
   "Please confirm the transaction on your {{deviceModel}}": "Please confirm the transaction on your {{deviceModel}}",
@@ -465,6 +466,7 @@
   "Please open the Lisk app on your hardware wallet device to see your accounts.": "Please open the Lisk app on your hardware wallet device to see your accounts.",
   "Please reconnect your hardware wallet to sign this transaction": "Please reconnect your hardware wallet to sign this transaction",
   "Please review and verify the transaction details before signing.": "Please review and verify the transaction details before signing.",
+  "Please select a current account on your wallet before connecting external applications.": "Please select a current account on your wallet before connecting external applications.",
   "Please sign in": "Please sign in",
   "Please write down these 12/24 words carefully, and store them in a safe place.": "Please write down these 12/24 words carefully, and store them in a safe place.",
   "Please write down these seed values carefully. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.": "Please write down these seed values carefully. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.",

src/modules/blockchainApplication/connection/components/RequestSignMessageDialog/RequestSignMessageConfirmation/index.js

@@ -40,7 +40,7 @@ export function RequestSignMessageConfirmation({ nextStep, address, message }) {
         />
         <p className={styles.label}>{t('Message')}</p>
         <div className={styles.messageBox}>{message}</div>
-        <PrimaryButton className={styles.btnContinue} onClick={onClick}>
+        <PrimaryButton className={classNames(styles.btnContinue, 'continue-btn')} onClick={onClick}>
           {t('Continue')}
         </PrimaryButton>
       </div>

src/modules/blockchainApplication/connection/components/RequestSignMessageDialog/index.js

@@ -15,6 +15,7 @@ import TxSignatureCollector from '@transaction/components/TxSignatureCollector';
 import SignedMessage from '@message/components/signedMessage';
 import { RequestSignMessageConfirmation } from '@blockchainApplication/connection/components/RequestSignMessageDialog/RequestSignMessageConfirmation';
 import styles from './RequestSignMessageDialog.css';
+import RequestSummary from '../RequestSummary';
 
 // eslint-disable-next-line max-statements
 const RequestSignMessageDialog = () => {
@@ -27,19 +28,14 @@ const RequestSignMessageDialog = () => {
   const reduxDispatch = useDispatch();
 
   const { peer, requiredNamespaces } = sessionRequest || {};
-  const {
-    metadata: { pubkey },
-  } = currentAccount;
   const event = events?.find((e) => e.name === EVENTS.SESSION_REQUEST);
   const { message, address } = event?.meta?.params?.request?.params || {};
-
   const { icons, name, url } = peer?.metadata || {};
 
   const onMultiStepChange = useCallback(({ step: { current } }) => {
     setMultiStepPosition(current);
   }, []);
-
-  const isPasswordStep = multiStepPosition === 1;
+  const isPasswordStep = multiStepPosition === 2;
 
   useEffect(() => {
     reduxDispatch(emptyTransactionsData());
@@ -75,10 +71,11 @@ const RequestSignMessageDialog = () => {
         })}
         onChange={onMultiStepChange}
       >
+        <RequestSummary history={history} message={message} />
         <RequestSignMessageConfirmation message={message} address={address} />
         <TxSignatureCollector
           type="message"
-          transactionJSON={{ senderPublicKey: pubkey, params: {} }}
+          transactionJSON={{ senderPublicKey: currentAccount.metadata?.pubkey, params: {} }}
         />
         <SignedMessage history={history} account={currentAccount} />
       </MultiStep>

src/modules/blockchainApplication/connection/components/RequestSignMessageDialog/index.test.js

@@ -11,16 +11,51 @@ import { useEvents } from '@libs/wcm/hooks/useEvents';
 import { EVENTS } from '@libs/wcm/constants/lifeCycle';
 import BlockchainAppDetailsHeader from '@blockchainApplication/explore/components/BlockchainAppDetailsHeader';
 import { mountWithRouterAndQueryClient } from 'src/utils/testHelpers';
+import mockSavedAccounts from '@tests/fixtures/accounts';
+import mockApplicationsManage from '@tests/fixtures/blockchainApplicationsManage';
+import { useAccounts, useCurrentAccount } from '@account/hooks';
+import { codec, cryptography } from '@liskhq/lisk-client';
+import * as accountUtils from '@wallet/utils/account';
+import { useBlockchainApplicationMeta } from '@blockchainApplication/manage/hooks/queries/useBlockchainApplicationMeta';
+import wallets from '@tests/constants/wallets';
 import RequestSignMessageDialog from './index';
 
+const address = mockSavedAccounts[0].metadata.address;
+const [appManage1, appManage2] = mockApplicationsManage;
+const mockSetCurrentAccount = jest.fn();
+const mockCurrentAccount = mockSavedAccounts[0];
+const reject = jest.fn();
+
+jest.spyOn(codec.codec, 'decode');
+jest.spyOn(cryptography.address, 'getLisk32AddressFromPublicKey').mockReturnValue(address);
+jest.mock('@account/hooks/useCurrentAccount');
+
+jest.mock('@blockchainApplication/manage/hooks/queries/useBlockchainApplicationMeta');
 jest.mock('@libs/wcm/hooks/usePairings');
 jest.mock('@libs/wcm/hooks/useSession');
 jest.mock('@libs/wcm/hooks/useEvents');
+jest.mock('@account/hooks/useAccounts');
 jest.mock('@walletconnect/utils', () => ({
   getSdkError: jest.fn((str) => str),
 }));
 
-const reject = jest.fn();
+jest
+  .spyOn(accountUtils, 'extractAddressFromPublicKey')
+  .mockReturnValue(mockCurrentAccount.metadata.address);
+useSession.mockReturnValue({ reject, sessionRequest: defaultContext.sessionRequest });
+
+useCurrentAccount.mockReturnValue([mockCurrentAccount, mockSetCurrentAccount]);
+useAccounts.mockReturnValue({
+  getAccountByAddress: () => mockSavedAccounts[0],
+  accounts: mockSavedAccounts,
+});
+
+useBlockchainApplicationMeta.mockReturnValue({
+  data: { data: [appManage1, appManage2] },
+  isLoading: false,
+  isFetching: false,
+});
+
 useSession.mockReturnValue({ reject, sessionRequest: defaultContext.sessionRequest });
 useEvents.mockReturnValue({
   events: [
@@ -56,7 +91,7 @@ describe('RequestSignMessageDialog', () => {
 
   it('should not crash when session or events are undefined', () => {
     useSession.mockReturnValue({});
-    useEvents.mockReturnValue({});
+    useEvents.mockReturnValue({ events: [] });
 
     const wrapper = shallow(<RequestSignMessageDialog history={{}} />);
     expect(wrapper).toContainMatchingElement(Dialog);
@@ -69,11 +104,32 @@ describe('RequestSignMessageDialog', () => {
 
   it('should hide header on password step', () => {
     useSession.mockReturnValue({});
-    useEvents.mockReturnValue({});
+    useEvents.mockReturnValue({
+      events: [
+        {
+          name: EVENTS.SESSION_REQUEST,
+          meta: {
+            params: {
+              chainId: 'lisk:00000001',
+              request: {
+                method: 'sign_transaction',
+                params: {
+                  message: 'test-message',
+                  address: wallets.genesis.publicKey,
+                },
+              },
+            },
+          },
+        },
+      ],
+    });
 
     const props = { history: {} };
-    const wrapper = mountWithRouterAndQueryClient(RequestSignMessageDialog, { props });
-    wrapper.find('button').simulate('click');
+    const wrapper = mountWithRouterAndQueryClient(RequestSignMessageDialog, {
+      props,
+    });
+    wrapper.find('button').at(1).simulate('click');
+    wrapper.find('.continue-btn').at(1).simulate('click');
     expect(wrapper).not.toContainMatchingElement(BlockchainAppDetailsHeader);
   });
 });