Implement edit multi signature profile

src/locales/en/common.json

@@ -232,6 +232,7 @@
   "Estimated reward": "Estimated reward",
   "Events": "Events",
   "Execution status": "Execution status",
+  "Existing members": "Existing members",
   "Expand": "Expand",
   "Expand sidebar": "Expand sidebar",
   "Expiry": "Expiry",
@@ -505,12 +506,12 @@
   "Redo": "Redo",
   "Register keys": "Register keys",
   "Register multisignature": "Register multisignature",
-  "Register multisignature account": "Register multisignature account",
   "Register sidechain": "Register sidechain",
   "Register validator": "Register validator",
   "Register validator summary": "Register validator summary",
   "Registered": "Registered",
   "Registered validators": "Registered validators",
+  "Registering members": "Registering members",
   "Registrant": "Registrant",
   "Reject": "Reject",
   "Rejected the pairing request from {{sanitizedName}}": "Rejected the pairing request from {{sanitizedName}}",

src/modules/account/components/AccountManagementDropdown/AccountManagementDropdown.test.js

@@ -5,6 +5,7 @@ import { truncateAddress, truncateAccountName } from '@wallet/utils/account';
 import { mockHWAccounts } from '@hardwareWallet/__fixtures__';
 import { mockAppsTokens } from '@token/fungible/__fixtures__';
 import { useTokenBalances } from '@token/fungible/hooks/queries';
+import { useAuth } from '@auth/hooks/queries';
 import AccountManagementDropdown from './AccountManagementDropdown';
 
 const mockCurrentAccount = mockSavedAccounts[0];
@@ -14,8 +15,12 @@ jest.mock('../../../account/hooks/useCurrentAccount.js', () => ({
 }));
 
 jest.mock('@token/fungible/hooks/queries/useTokenBalances');
+jest.mock('@auth/hooks/queries/useAuth');
 
 describe('AccountManagementDropdown', () => {
+  useAuth.mockReturnValue({
+    data: {},
+  });
   useTokenBalances.mockReturnValue({
     data: {
       data: [{ name: 'Lisk', symbol: 'LSK', availableBalance: 0, ...mockAppsTokens.data[0] }],
@@ -76,4 +81,19 @@ describe('AccountManagementDropdown', () => {
     fireEvent.click(screen.getByText('Backup account'));
     expect(screen.getByText('Register multisignature account')).toBeVisible();
   });
+
+  it('Should have edit register multisignature enabled', () => {
+    useAuth.mockReturnValue({
+      data: { data: { numberOfSignatures: 3 } },
+    });
+
+    const props = {
+      currentAccount: mockHWAccounts[0],
+      onMenuClick: mockOnMenuClick,
+    };
+    renderWithRouterAndQueryClient(AccountManagementDropdown, props);
+    fireEvent.click(screen.getByAltText('dropdownArrowIcon'));
+    fireEvent.click(screen.getByText('Backup account'));
+    expect(screen.getByText('Edit multisignature account')).toBeVisible();
+  });
 });

src/modules/account/const/accountMenu.js

@@ -37,8 +37,8 @@ export const accountMenu = ({
         }
       : {},
     icon: 'multiSignatureOutline',
-    label: 'Register multisignature account',
-    isHidden: authData?.data?.numberOfSignatures > 0 || hasNetworkError || isLoadingNetwork,
+    isHidden: hasNetworkError || isLoadingNetwork,
+    label: `${authData?.data?.numberOfSignatures > 0 ? 'Edit' : 'Register'} multisignature account`,
   },
   {
     component: 'removeSelectedAccount',

src/modules/transaction/components/MultiSignatureReview/MultiSignatureReview.js

@@ -31,7 +31,7 @@ const Members = ({ members = [], t }) => {
   const rightColumn = members.slice(sliceIndex, members.length);
   return (
     <div className={styles.membersContainer}>
-      <p>{t('Members')}</p>
+      <p>{t('Registering members')}</p>
       <div>
         {leftColumn.map((member, i) => (
           <Member member={member} i={i} key={`registerMultiSignature-members-list-${i}`} t={t} />
@@ -58,17 +58,27 @@ const InfoColumn = ({ title, children, className }) => (
   </div>
 );
 
-const MultiSignatureReview = ({ t, members, fee, numberOfSignatures, token }) => (
+const MultiSignatureReview = ({
+  t,
+  members,
+  fee,
+  numberOfSignatures,
+  token,
+  isMultisignature,
+  isRegisterMultisigature,
+}) => (
   <>
     <Members members={members} t={t} />
-    <div className={styles.infoContainer}>
-      <InfoColumn title={t('Required signatures')} className="info-numberOfSignatures">
-        {numberOfSignatures}
-      </InfoColumn>
-      <InfoColumn title={t('Fees')} className="info-fee">
-        <TokenAmount val={fee} token={token} />
-      </InfoColumn>
-    </div>
+    {!isMultisignature && isRegisterMultisigature && (
+      <div className={styles.infoContainer}>
+        <InfoColumn title={t('Required signatures')} className="info-numberOfSignatures">
+          {numberOfSignatures}
+        </InfoColumn>
+        <InfoColumn title={t('Fees')} className="info-fee">
+          <TokenAmount val={fee} token={token} />
+        </InfoColumn>
+      </div>
+    )}
   </>
 );
 

src/modules/transaction/components/MultiSignatureReview/MultiSignatureReview.test.js

@@ -26,6 +26,8 @@ describe('Multisignature Review component', () => {
     fee: 2000000,
     numberOfSignatures: 2,
     token: { ...mockAppsTokens.data[0], availableBalance: '1000000000' },
+    isMultisignature: false,
+    isRegisterMultisigature: true,
   };
 
   beforeEach(() => {

src/modules/transaction/components/Multisignature/Multisignature.js

@@ -57,7 +57,7 @@ const ErrorActions = ({ t, status, message, network, application }) => (
   </a>
 );
 
-// eslint-disable-next-line max-statements
+// eslint-disable-next-line max-statements, complexity
 const Multisignature = ({
   transactions,
   title,
@@ -107,7 +107,6 @@ const Multisignature = ({
   };
 
   useEffect(() => resetTransactionResult, []);
-
   useEffect(() => () => clearTimeout(ref.current), []);
 
   return (
@@ -135,17 +134,17 @@ const Multisignature = ({
           />
         ) : null}
         {status.code !== txStatusTypes.broadcastSuccess &&
-        status.code !== txStatusTypes.broadcastError ? (
-          <SecondaryButton className={`${styles.copy} copy-button`} onClick={onCopy}>
-            <span className={styles.buttonContent}>
-              <Icon name={copied ? 'transactionStatusSuccessful' : 'copy'} />
-              {t(copied ? 'Copied' : 'Copy')}
-            </span>
-          </SecondaryButton>
-        ) : null}
-        {status.code === txStatusTypes.multisigSignatureSuccess ? (
+          status.code !== txStatusTypes.broadcastError && (
+            <SecondaryButton className={`${styles.copy} copy-button`} onClick={onCopy}>
+              <span className={styles.buttonContent}>
+                <Icon name={copied ? 'transactionStatusSuccessful' : 'copy'} />
+                {t(copied ? 'Copied' : 'Copy')}
+              </span>
+            </SecondaryButton>
+          )}
+        {(status.code === txStatusTypes.multisigSignatureSuccess) && (
           <FullySignedActions onDownload={onDownload} t={t} onSend={onSend} />
-        ) : null}
+        )}
         {status.code === txStatusTypes.multisigSignaturePartialSuccess ? (
           <PartiallySignedActions onDownload={onDownload} t={t} />
         ) : null}

src/modules/transaction/components/RegisterMultisignatureGroup/RegisterMultisignatureGroup.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { extractAddressFromPublicKey } from '@wallet/utils/account';
 import MultiSignatureReview from '../MultiSignatureReview';
 
-const RegisterMultisignatureGroup = ({ t, transactionJSON, formProps }) => {
+const RegisterMultisignatureGroup = ({ t, transactionJSON, formProps, account }) => {
   const mandatory = transactionJSON.params.mandatoryKeys.map((item) => ({
     address: extractAddressFromPublicKey(item),
     publicKey: item,
@@ -21,6 +21,8 @@ const RegisterMultisignatureGroup = ({ t, transactionJSON, formProps }) => {
       token={formProps.fields.token}
       members={[...mandatory, ...optional]}
       numberOfSignatures={transactionJSON.params.numberOfSignatures}
+      isMultisignature={account.summary.isMultisignature}
+      isRegisterMultisigature
     />
   );
 };

src/modules/transaction/components/TransactionDetails/index.js

@@ -14,6 +14,7 @@ export { default as Recipient } from './recipient';
 export { default as NumberOfSignatures } from './numberOfSignatures';
 export { default as Sender } from './sender';
 export { default as SignedAndRemainingMembersList } from './signedAndRemainingMembersList';
+export { default as SignedAndRemainingSignatureList } from './signedAndRemainingSignatureList';
 export { default as TransactionId } from './transactionId';
 export { default as TxDate } from './txDate';
 export { default as Stakes } from './stakes';

src/modules/transaction/components/TransactionDetails/layoutSchema.css

@@ -186,7 +186,8 @@
     "sender sender"
     "numberOfSignatures fee"
     "members members"
-    "signedAndRemainingMembersList signedAndRemainingMembersList";
+    "signedAndRemainingMembersList signedAndRemainingMembersList"
+    "signedAndRemainingSignatureList signedAndRemainingSignatureList";
 }
 
 .reportValidatorMisbehavior {

src/modules/transaction/components/TransactionDetails/layoutSchema.js

@@ -23,6 +23,7 @@ import {
   Module,
   Nonce,
   GenericParams,
+  SignedAndRemainingSignatureList,
 } from 'src/modules/transaction/components/TransactionDetails';
 import styles from './layoutSchema.css';
 
@@ -94,7 +95,14 @@ export const LayoutSchema = {
     className: styles.multiSigLayout,
   },
   [`${registerMultisignature}-preview`]: {
-    components: [Sender, Members, NumberOfSignatures, Fee, SignedAndRemainingMembersList],
+    components: [
+      Sender,
+      Members,
+      NumberOfSignatures,
+      Fee,
+      SignedAndRemainingMembersList,
+      SignedAndRemainingSignatureList,
+    ],
     className: styles.multiSigRegisterPreview,
   },
   [unlock]: {

src/modules/transaction/components/TransactionDetails/signedAndRemainingMembersList.js

@@ -39,6 +39,7 @@ const SignedAndRemainingMembersList = ({ t }) => {
       needed={needed}
       required={required}
       className={styles.signedAndRemainingMembersList}
+      title={isMultisignatureRegistration ? 'Multisignature params signature' : 'Members'}
       t={t}
     />
   );

src/modules/transaction/components/TransactionDetails/signedAndRemainingSignatureList.js

@@ -0,0 +1,32 @@
+import React, { useMemo, useContext } from 'react';
+import { SignedAndRemainingMembers } from '@wallet/components/multisignatureMembers';
+import { calculateRemainingAndSignedMembers } from '@wallet/utils/account';
+import TransactionDetailsContext from '../../context/transactionDetailsContext';
+import styles from './styles.css';
+
+const SignedAndRemainingSignatureList = ({ t }) => {
+  const { transaction, wallet } = useContext(TransactionDetailsContext);
+  const keys = wallet.keys;
+
+  const { signed, remaining } = useMemo(
+    () => calculateRemainingAndSignedMembers(keys, transaction, false),
+    [wallet]
+  );
+
+  const required = keys.numberOfSignatures;
+  const needed = required - signed.length;
+
+  return (
+    <SignedAndRemainingMembers
+      signed={signed}
+      remaining={remaining}
+      needed={needed}
+      required={required}
+      className={styles.signedAndRemainingSignatureList}
+      title="Signatures"
+      t={t}
+    />
+  );
+};
+
+export default SignedAndRemainingSignatureList;

src/modules/transaction/components/TransactionDetails/styles.css

@@ -162,6 +162,10 @@
   grid-area: signedAndRemainingMembersList;
 }
 
+.signedAndRemainingSignatureList {
+  grid-area: signedAndRemainingSignatureList;
+}
+
 .genericParams {
   grid-area: genericParams;
   padding-top: var(--vertical-padding-m);

src/modules/transaction/components/TransactionInfo/TransactionInfo.js

@@ -8,7 +8,7 @@ import CustomTransactionInfo from './CustomTransactionInfo';
 
 const Members = ({ members, t }) => (
   <section>
-    <label>{t('Members')}</label>
+    <label>{t('Existing members')}</label>
     <div className={styles.membersContainer}>
       {members.map((member, i) => (
         <div className={styles.memberInfo} key={i + 1}>

src/modules/transaction/configuration/statusConfig.js

@@ -131,24 +131,26 @@ export const getTransactionStatus = (account, transactions, options = {}) => {
   // signature success
   if (!isEmpty(transactions.signedTransaction)) {
     const numberOfSignatures = getNumberOfSignatures(account, transactions.signedTransaction);
+    const isRegisterMultisignature =
+      moduleCommand === MODULE_COMMANDS_NAME_MAP.registerMultisignature;
+    const isMultisignature = account?.summary?.isMultisignature || options.isMultisignature;
+
     let nonEmptySignatures = transactions.signedTransaction.signatures.filter(
       (sig) => sig.length > 0
     ).length;
 
-    if (moduleCommand === MODULE_COMMANDS_NAME_MAP.registerMultisignature) {
+    if (isRegisterMultisignature && !isMultisignature) {
       nonEmptySignatures = transactions.signedTransaction.params.signatures.filter(
         (sig) => sig.compare(Buffer.alloc(64)) > 0
       ).length;
     }
 
-    const isMultisignature = account?.summary?.isMultisignature || options.isMultisignature;
-
     if (
       nonEmptySignatures < numberOfSignatures ||
       (isMultisignature &&
         nonEmptySignatures === numberOfSignatures &&
         !options.canSenderSignTx &&
-        moduleCommand === MODULE_COMMANDS_NAME_MAP.registerMultisignature)
+        isRegisterMultisignature)
     ) {
       return { code: txStatusTypes.multisigSignaturePartialSuccess };
     }

src/modules/transaction/configuration/statusConfig.test.js

@@ -1,4 +1,5 @@
 import { mockCommandParametersSchemas } from 'src/modules/common/__fixtures__';
+import wallets from '@tests/constants/wallets';
 import { getTransactionStatus } from './statusConfig';
 import { txStatusTypes } from './txStatus';
 
@@ -74,10 +75,13 @@ describe('Transaction signature status', () => {
   });
 
   it('should return transaction status for fully signed transaction', () => {
-    const account = {};
+    const account = { summary: { isMultisignature: true } };
     const transactions = {
       txSignatureError: null,
-      signedTransaction,
+      signedTransaction: {
+        ...signedTransaction,
+        signatures: [...signedTransaction.signatures, wallets.genesis.summary.publicKey],
+      },
     };
     const isMultisignature = true;
     const status = getTransactionStatus(account, transactions, {

src/modules/transaction/utils/transaction.js

@@ -281,6 +281,7 @@ const signTransactionUsingHW = async (
   return { ...signedTransaction, id };
 };
 
+// eslint-disable-next-line max-statements
 export const sign = async (
   wallet,
   schema,
@@ -290,11 +291,28 @@ export const sign = async (
   senderAccount,
   options
 ) => {
+  const moduleCommand = joinModuleAndCommand(transaction);
   if (wallet.metadata?.isHW) {
     return signTransactionUsingHW(wallet, schema, chainID, transaction, senderAccount, options);
   }
 
-  if (options?.txInitiatorAccount?.numberOfSignatures > 0) {
+  const isMultiSignatureAccount = options?.txInitiatorAccount?.numberOfSignatures > 0;
+  const isRegisterMultisignature =
+    moduleCommand === MODULE_COMMANDS_NAME_MAP.registerMultisignature;
+  const paramSignatures = transaction.params.signatures;
+  const areParamsSignaturesFullySigned =
+    isMultiSignatureAccount &&
+    paramSignatures?.filter((sig) => sig.length !== 64 || Buffer.from(sig).equals(Buffer.alloc(64)))
+      .length === 0 &&
+    paramSignatures?.length ===
+      transaction.params.mandatoryKeys?.length + transaction.params.optionalKeys?.length;
+
+  const isEditRegisterMultiSignature = isRegisterMultisignature && isMultiSignatureAccount;
+
+  if (
+    (isMultiSignatureAccount && !isRegisterMultisignature) ||
+    (isEditRegisterMultiSignature && areParamsSignaturesFullySigned)
+  ) {
     return signMultisigUsingPrivateKey(
       schema,
       chainID,