v2.20.2 (#916)

* Work on ledger notification * Converted nativeAuth ttl seconds to time string * push unlinked yarn.lock * changed UI nativeAuth description * updated CHANGELOG.md * - * updated ledger UI confirm screen only for ledger with usernames feature * fix double login with providers (#912) * fix double login with providers * regenerate yarn lock * reset version * 2.20.1 * changelog * resolved comments * put back version * resolved comments * update readme * update readme * Ag fix transaction cancel (#915) * fix transaction cancel * 2.20.2 * changelog * changelog * revert npm version * 2.20.2 --------- Co-authored-by: Tudor Morar <[email protected]> Co-authored-by: Theodor Dumitrache <[email protected]> Co-authored-by: Theodor Dumitrache <[email protected]> Co-authored-by: cipriandraghici <[email protected]>
multiversx · Sep 13, 2023 · 20f669f · 20f669f
1 parent a34aba8
commit 20f669f
Show file tree

Hide file tree

Showing 11 changed files with 327 additions and 175 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,8 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-[v2.20.1]](https://github.com/multiversx/mx-sdk-dapp/pull/913)] - 2023-09-08
- - [Fix double login when session is invalid and user is loggedout](https://github.com/multiversx/mx-sdk-dapp/pull/912)
+## [[v2.20.2]](https://github.com/multiversx/mx-sdk-dapp/pull/913)] - 2023-09-13
+- [Changed Ledger authentication texts for v.23 of MultiversX app](https://github.com/multiversx/mx-sdk-dapp/pull/910)
+- [Fix transaction cancellation when a transaction toast is discarded](https://github.com/multiversx/mx-wallet-dapp/pull/915)
+
+## [[v2.20.1]](https://github.com/multiversx/mx-sdk-dapp/pull/913)] - 2023-09-08
+
+- [Fix double login when session is invalid and user is loggedout](https://github.com/multiversx/mx-sdk-dapp/pull/912)
+
 ## [[v2.20.0]](https://github.com/multiversx/mx-sdk-dapp/pull/911)] - 2023-09-07
 
 - [Add batch transactions documentation](https://github.com/multiversx/mx-sdk-dapp/pull/909)

diff --git a/README.md b/README.md
@@ -537,7 +537,7 @@ or the `useSignTransactions` hook defined below. If you don't use one of these,
 Sending sync transactions in batches (batch transactions mechanism)
 </summary>
 
-### Sending Transactions
+### Sending transactions synchronously in batches
 
 The API for sending sync transactions is a function called **sendBatchTransactions**:
 
@@ -547,7 +547,7 @@ It can be used to send a group of transactions (that ca be synchronized) with mi
 
 
 ```typescript
-const { sessionId, error } = await sendBatchTransactions({
+const { batchId, error } = await sendBatchTransactions({
     transactions: [
       [
         {
@@ -603,9 +603,9 @@ const { sessionId, error } = await sendBatchTransactions({
   });
 ```
 
-It returns a Promise that will be fulfilled with `{error?: string; sessionId: string | null;}`
+It returns a Promise that will be fulfilled with `{error?: string; batchId: string | null;}`
 
-- `sessionId` is the transactions' session id used to compose the `batchId` which will be used to send the batch to the batch service and to track the transactions status and react to it.
+- `batchId` is the transactions' batch id used to send the batch to the batch service and to track the transactions status and react to it. This is composed by the `sessionId` (received after signing) and the user address. Eg. `12123423123-erd1address...`.
 - `error` is the error that can appear during the signing/sending process.
 
 ### How to synchronize transactions ?

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

diff --git a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/ConfirmAddress.tsx b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/ConfirmAddress.tsx
@@ -9,6 +9,7 @@ import { tokenLoginSelector } from 'reduxStore/selectors';
 import { WithClassnameType } from '../../../types';
 
 import styles from './confirmAddressStyles.scss';
+import { getAuthTokenText } from './helpers';
 
 export interface ConfirmAddressPropsType extends WithClassnameType {
   token?: string;
@@ -41,6 +42,11 @@ export const ConfirmAddress = ({
   const tokenLogin = useSelector(tokenLoginSelector);
   const loginToken = tokenLogin?.loginToken ?? token;
 
+  const authTokenText = getAuthTokenText({
+    loginToken,
+    version: ledgerAccount?.version
+  });
+
   return (
     <div
       className={classNames(
@@ -68,7 +74,7 @@ export const ConfirmAddress = ({
             ledgerModalConfirmDescriptionClassName
           )}
         >
-          For security, please confirm that your address:
+          {authTokenText?.confirmAddressText}
         </div>
 
         <div
@@ -77,42 +83,38 @@ export const ConfirmAddress = ({
             ledgerModalConfirmDataClassName
           )}
         >
-          <>{ledgerAccount?.address ?? ''}</>
+          {ledgerAccount?.address ?? ''}
         </div>
       </div>
 
-      {loginToken && (
-        <div className={styles.ledgerConfirmAddressSection}>
-          <div
-            className={classNames(
-              styles.ledgerConfirmAddressDescription,
-              ledgerModalConfirmDescriptionClassName
-            )}
-          >
-            and Auth Token:
-          </div>
-
-          <div
-            className={classNames(
-              styles.ledgerConfirmAddressData,
-              ledgerModalConfirmDataClassName
-            )}
-          >
-            {`${loginToken}{}`}
-          </div>
-
-          <div
-            className={classNames(
-              styles.ledgerConfirmAddressDescription,
-              ledgerModalConfirmDescriptionClassName
-            )}
-          >
-            {loginToken
-              ? 'are the one shown on your Ledger device screen now.'
-              : 'is the one shown on your Ledger device screen now.'}
-          </div>
+      <div className={styles.ledgerConfirmAddressSection}>
+        <div
+          className={classNames(
+            styles.ledgerConfirmAddressDescription,
+            ledgerModalConfirmDescriptionClassName
+          )}
+        >
+          {authTokenText?.authText}
         </div>
-      )}
+
+        <div
+          className={classNames(
+            styles.ledgerConfirmAddressData,
+            ledgerModalConfirmDataClassName
+          )}
+        >
+          {authTokenText?.data}
+        </div>
+
+        <div
+          className={classNames(
+            styles.ledgerConfirmAddressDescription,
+            ledgerModalConfirmDescriptionClassName
+          )}
+        >
+          {authTokenText?.areShownText}
+        </div>
+      </div>
 
       <div
         className={classNames(

diff --git a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/getAuthTokenText.ts b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/getAuthTokenText.ts
@@ -0,0 +1,45 @@
+import { decodeLoginToken } from 'services/nativeAuth/helpers/decodeLoginToken';
+import getLedgerVersionOptions from 'utils/operations/ledger/getLedgerVersionOptions';
+import { secondsToTimeString } from './secondsToTimeString';
+
+export const getAuthTokenText = ({
+  loginToken,
+  version
+}: {
+  loginToken?: string;
+  version?: string;
+}) => {
+  if (!loginToken || !version) {
+    return null;
+  }
+
+  const { ledgerWithUsernames } = getLedgerVersionOptions(version);
+  const nativeAuthInfo = decodeLoginToken(loginToken);
+  if (nativeAuthInfo == null) {
+    return null;
+  }
+
+  const confirmAddressText = 'For security, please confirm that your address:';
+  const authText = 'and Auth Token:';
+  const areShownText = 'are the one shown on your Ledger device screen now.';
+
+  if (ledgerWithUsernames) {
+    const time = secondsToTimeString(nativeAuthInfo.ttl);
+
+    const confirmAddressText = 'For security, please confirm your address:';
+    const authText = 'and authorize:';
+
+    return {
+      data: `${nativeAuthInfo.origin} for ${time}.`,
+      confirmAddressText,
+      authText
+    };
+  }
+
+  return {
+    data: `${loginToken}{}`,
+    confirmAddressText,
+    authText,
+    areShownText
+  };
+};
diff --git a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/index.ts b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from './getAuthTokenText';
+export * from './secondsToTimeString';
diff --git a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/secondsToTimeString.ts b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/secondsToTimeString.ts
@@ -0,0 +1,29 @@
+import { isString } from 'lodash';
+
+export const secondsToTimeString = (seconds: number) => {
+  if (seconds <= 0 || isNaN(seconds) || !seconds || isString(seconds)) {
+    return 'N/A time';
+  }
+
+  if (seconds >= 86400) {
+    return 'more than one day';
+  }
+
+  const hours = Math.floor(seconds / 3600);
+  const remainingSeconds = seconds % 3600;
+  const minutes = Math.floor(remainingSeconds / 60);
+  const remainingSecondsAfterMinutes = remainingSeconds % 60;
+
+  const parts = [];
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}min`);
+  }
+  if (remainingSecondsAfterMinutes > 0) {
+    parts.push(`${remainingSecondsAfterMinutes}sec`);
+  }
+
+  return parts.join(' ');
+};
diff --git a/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/tests/secondsToTimeString.test.ts b/src/UI/ledger/LedgerLoginContainer/ConfirmAddress/helpers/tests/secondsToTimeString.test.ts
@@ -0,0 +1,51 @@
+import { secondsToTimeString } from '../secondsToTimeString';
+
+describe('secondsToTimeString tests', () => {
+  it('converts 0 seconds to "N/A time"', () => {
+    expect(secondsToTimeString(0)).toBe('N/A time');
+  });
+
+  it('converts NaN to "N/A time"', () => {
+    expect(secondsToTimeString(NaN)).toBe('N/A time');
+  });
+
+  it('converts undefined to "N/A time"', () => {
+    expect(secondsToTimeString(undefined as any)).toBe('N/A time');
+  });
+
+  it('converts -1 to "N/A time"', () => {
+    expect(secondsToTimeString(-1)).toBe('N/A time');
+  });
+
+  it('converts null to "N/A time"', () => {
+    expect(secondsToTimeString(null as any)).toBe('N/A time');
+  });
+
+  it('converts string values to "N/A time"', () => {
+    expect(secondsToTimeString('abc' as any)).toBe('N/A time');
+    expect(secondsToTimeString('123' as any)).toBe('N/A time');
+  });
+
+  it('converts seconds less than a minute correctly', () => {
+    expect(secondsToTimeString(45)).toBe('45sec');
+    expect(secondsToTimeString(59)).toBe('59sec');
+  });
+
+  it('converts seconds to minutes and seconds correctly', () => {
+    expect(secondsToTimeString(60)).toBe('1min');
+    expect(secondsToTimeString(123)).toBe('2min 3sec');
+    expect(secondsToTimeString(599)).toBe('9min 59sec');
+  });
+
+  it('converts seconds to hours, minutes, and seconds correctly', () => {
+    expect(secondsToTimeString(3600)).toBe('1h');
+    expect(secondsToTimeString(3666)).toBe('1h 1min 6sec');
+    expect(secondsToTimeString(7200)).toBe('2h');
+    expect(secondsToTimeString(7323)).toBe('2h 2min 3sec');
+  });
+
+  it('handles more than 24 hours', () => {
+    expect(secondsToTimeString(86400)).toBe('more than one day');
+    expect(secondsToTimeString(100000)).toBe('more than one day');
+  });
+});
diff --git a/src/hooks/transactions/useSignTransactionsCommonData.tsx b/src/hooks/transactions/useSignTransactionsCommonData.tsx
@@ -66,15 +66,13 @@ export const useSignTransactionsCommonData = () => {
   function clearSignInfo(sessionId?: string) {
     const isExtensionProvider = provider instanceof ExtensionProvider;
 
-    dispatch(clearAllTransactionsToSign());
     dispatch(clearTransactionsInfoForSessionId(sessionId));
 
     if (!isExtensionProvider) {
       return;
     }
 
     clearTransactionStatusMessage();
-    ExtensionProvider.getInstance()?.cancelAction?.();
   }
 
   return {

diff --git a/src/services/transactions/sendBatchTransactions.test.ts b/src/services/transactions/sendBatchTransactions.test.ts
@@ -1,7 +1,7 @@
-import { sendBatchTransactions } from './sendBatchTransactions';
 import { addressSelector } from 'reduxStore/selectors';
 import { store } from 'reduxStore/store';
 import { getWindowLocation } from 'utils/window/getWindowLocation';
+import { sendBatchTransactions } from './sendBatchTransactions';
 import { signTransactions } from './signTransactions';
 import { transformTransactionsToSign } from './utils/transformTransactionsToSign';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './getAuthTokenText';
		export * from './secondsToTimeString';