Merge pull request #5438 from LiskHQ/realease-bug-fixes-13-nov

Bug fix transaction details, staking and transaction filtering
LiskHQ · Nov 14, 2023 · e83f2d2 · e83f2d2
2 parents dfb0795 + 5f763e4
commit e83f2d2
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 37 deletions.
diff --git a/src/modules/account/hooks/useCurrentAccount.js b/src/modules/account/hooks/useCurrentAccount.js
@@ -24,32 +24,42 @@ export function useCurrentAccount() {
     // clear stakes list during login or accounts switch
     const relativeUrlPath = referrer || routes.wallet.path;
 
+    function pushUrlState() {
+      const { pathname, search } = new URL(relativeUrlPath, window.location.origin);
+      history.push({
+        pathname,
+        search,
+        state: urlState,
+      });
+    }
+
     if (pendingStakes.length) {
-      const onCancel = /* istanbul ignore next */ () =>
-        removeSearchParamsFromUrl(history, ['modal']);
-      const onConfirm = /* istanbul ignore next */ () => {
+      if (urlState) {
         dispatch(setCurrentAccount(encryptedAccount));
-
         dispatch(stakesReset());
-        history.push(relativeUrlPath);
-      };
-      const state = createConfirmSwitchState({
-        mode: 'pendingStakes',
-        type: 'account',
-        onCancel,
-        onConfirm,
-      });
-      removeThenAppendSearchParamsToUrl(history, { modal: 'confirmationDialog' }, ['modal'], state);
+        pushUrlState();
+      }else {
+        const onCancel = /* istanbul ignore next */ () =>
+          removeSearchParamsFromUrl(history, ['modal']);
+        const onConfirm = /* istanbul ignore next */ () => {
+          dispatch(setCurrentAccount(encryptedAccount));
+
+          dispatch(stakesReset());
+          history.push(relativeUrlPath);
+        };
+        const state = createConfirmSwitchState({
+          mode: 'pendingStakes',
+          type: 'account',
+          onCancel,
+          onConfirm,
+        });
+        removeThenAppendSearchParamsToUrl(history, { modal: 'confirmationDialog' }, ['modal'], state);
+      }
     } else {
       dispatch(setCurrentAccount(encryptedAccount));
       if (redirect) {
         if (urlState) {
-          const { pathname, search } = new URL(relativeUrlPath, window.location.origin);
-          history.push({
-            pathname,
-            search,
-            state: urlState,
-          });
+          pushUrlState();
         } else {
           history.push(relativeUrlPath);
         }

diff --git a/...plication/explore/components/BlockchainApplicationDetails/BlockchainApplicationDetails.js b/...plication/explore/components/BlockchainApplicationDetails/BlockchainApplicationDetails.js
@@ -50,7 +50,7 @@ const BlockchainApplicationDetails = ({ history, location }) => {
     lastCertificateHeight,
     lastUpdated,
     logo,
-    depositedLsk = 0,
+    escrowedLSK = '0',
   } = aggregatedApplicationData;
   const { setApplication } = useApplicationManagement();
 
@@ -145,7 +145,7 @@ const BlockchainApplicationDetails = ({ history, location }) => {
           ) : (
             <ValueAndLabel label={t('Deposited:')} direction="horizontal">
               <span className={styles.value}>
-                <TokenAmount val={depositedLsk} isLsk />
+                <TokenAmount val={escrowedLSK} isLsk />
               </span>
             </ValueAndLabel>
           )}

diff --git a/...kchainApplication/explore/components/BlockchainApplicationRow/BlockchainApplicationRow.js b/...kchainApplication/explore/components/BlockchainApplicationRow/BlockchainApplicationRow.js
@@ -68,7 +68,7 @@ const BlockchainApplicationRow = ({ data, className, t }) => {
         <ChainName title={application.chainName} logo={getLogo(application)} />
         <ChainId id={application.chainID} />
         <ChainStatus status={application.status} t={t} />
-        <DepositAmount amount={application.depositedLsk} />
+        <DepositAmount amount={application.escrowedLSK} />
       </DialogLink>
     </div>
   );

diff --git a/src/modules/blockchainApplication/manage/components/AddApplicationRow/AddApplicationRow.js b/src/modules/blockchainApplication/manage/components/AddApplicationRow/AddApplicationRow.js
@@ -26,7 +26,7 @@ const AddApplicationRow = ({ data, className }) => (
       data={{ chainId: data.chainID, mode: 'addApplication' }}
     >
       <ChainName title={data.chainName} logo={getLogo(data)} />
-      <DepositAmount amount={data.depositedLsk} />
+      <DepositAmount amount={data.escrowedLSK} />
     </DialogLink>
   </div>
 );

diff --git a/...dules/blockchainApplication/manage/components/AddApplicationRow/AddApplicationRow.test.js b/...dules/blockchainApplication/manage/components/AddApplicationRow/AddApplicationRow.test.js
@@ -5,7 +5,7 @@ import AddApplicationRow from './AddApplicationRow';
 const props = {
   data: {
     chainName: 'Sample app',
-    depositedLsk: 50000000,
+    escrowedLSK: 50000000,
   },
 };
 

diff --git a/...ckchainApplication/manage/components/RemoveApplicationDetails/RemoveApplicationDetails.js b/...ckchainApplication/manage/components/RemoveApplicationDetails/RemoveApplicationDetails.js
@@ -51,7 +51,7 @@ const RemoveApplicationDetails = ({ location, onCancel, nextStep, history }) =>
     lastCertificateHeight,
     lastUpdated,
     projectPage,
-    depositedLsk = 0,
+    escrowedLSK = "0",
   } = application;
 
   const reloadAppDetails = () => {
@@ -182,7 +182,7 @@ const RemoveApplicationDetails = ({ location, onCancel, nextStep, history }) =>
             <div className={styles.balanceRow}>
               <span>{t('Deposited:')}</span>
               <span>
-                <TokenAmount isLsk val={depositedLsk} />
+                <TokenAmount isLsk val={escrowedLSK} />
               </span>
             </div>
           )}

diff --git a/src/modules/common/components/filterDropdownButton/selectFilter.js b/src/modules/common/components/filterDropdownButton/selectFilter.js
@@ -19,10 +19,12 @@ const SelectFilter = ({
 
   if (isLoading) return null;
 
-  const options = Object.keys(moduleCommandSchemas).map((key) => ({
-    value: key,
-    label: getModuleCommandTitle()[key],
-  }));
+  const options = Object.keys(moduleCommandSchemas)
+    .map((key) => ({
+      value: key,
+      label: getModuleCommandTitle()[key],
+    }))
+    .filter((option) => option.label);
 
   options.unshift({ value: '', label: placeholder });
 

diff --git a/src/modules/transaction/components/TransactionDetailsView/index.js b/src/modules/transaction/components/TransactionDetailsView/index.js
@@ -1,10 +1,10 @@
 /* eslint-disable max-statements */
-import React, { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
 import ReactJson from 'react-json-view';
 import { useTranslation } from 'react-i18next';
 import { isEmpty } from 'src/utils/helpers';
-import { parseSearchParams } from 'src/utils/searchParams';
+import { parseSearchParams, removeSearchParamsFromUrl } from 'src/utils/searchParams';
 import Box from 'src/theme/box';
 import BoxContent from 'src/theme/box/content';
 import Heading from 'src/modules/common/components/Heading';
@@ -20,10 +20,12 @@ import TransactionEvents from '../TransactionEvents';
 import { useFees, useTransactions } from '../../hooks/queries';
 import TransactionDetailRow from '../TransactionDetailRow';
 import header from './headerMap';
-import { splitModuleAndCommand } from '../../utils';
+import { getTransactionValue, splitModuleAndCommand } from '../../utils';
 
 const TransactionDetails = () => {
   const { search } = useLocation();
+  const history = useHistory();
+  const paramsJsonViewRef = useRef();
   const transactionID = parseSearchParams(search).transactionID;
   const showParams = JSON.parse(parseSearchParams(search).showParams || 'false');
   const { t } = useTranslation();
@@ -82,6 +84,10 @@ const TransactionDetails = () => {
         label: t('Fee'),
         value: <TokenAmount val={fee} token={feeToken} />,
       },
+      {
+        label: t('Value'),
+        value: getTransactionValue(transactionData, feeToken),
+      },
       {
         label: t('Date'),
         value: <DateTimeFromTimestamp fulltime time={block.timestamp} />,
@@ -126,6 +132,12 @@ const TransactionDetails = () => {
     return <NotFound t={t} />;
   }
 
+  useEffect(() => {
+    if (showParams && paramsJsonViewRef.current) paramsJsonViewRef.current.scrollIntoView();
+
+    setIsParamsCollapsed(showParams);
+  }, [showParams]);
+
   return (
     <div className={styles.wrapper}>
       <Heading title={t('Transaction')} />
@@ -143,11 +155,17 @@ const TransactionDetails = () => {
               headerClassName={styles.tableHeader}
               additionalRowProps={{
                 isParamsCollapsed,
-                onToggleJsonView: () => setIsParamsCollapsed((state) => !state),
+                onToggleJsonView: () => {
+                  setIsParamsCollapsed((state) => {
+                    if (state) removeSearchParamsFromUrl(history, ['showParams']);
+                    return !state;
+                  });
+                },
               }}
             />
             {!isLoading && (
               <div
+                ref={paramsJsonViewRef}
                 data-testid="transaction-param-json-viewer"
                 className={`${styles.jsonContainer} ${!isParamsCollapsed ? styles.shrink : ''}`}
               >

diff --git a/src/modules/transaction/components/TransactionDetailsView/styles.css b/src/modules/transaction/components/TransactionDetailsView/styles.css
@@ -5,6 +5,7 @@
   display: block;
   padding: 0 var(--horizontal-padding-l);
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 .wrapper {

diff --git a/tests/fixtures/blockchainApplicationsExplore.js b/tests/fixtures/blockchainApplicationsExplore.js
@@ -11,7 +11,7 @@ const blockchainApplicationsExplore = [
     },
     lastCertificateHeight: 1000,
     lastUpdated: 1666566000000,
-    depositedLsk: 50000000,
+    escrowedLSK: 50000000,
   },
   {
     chainName: 'Colecti',
@@ -28,7 +28,7 @@ const blockchainApplicationsExplore = [
     },
     lastCertificateHeight: 900,
     lastUpdated: 1666566000000,
-    depositedLsk: 500000000,
+    escrowedLSK: 500000000,
   },
 ];