Merge pull request #5410 from LiskHQ/5349-introduce-new-transaction-column

Implemented additional value column on transaction table

Author: ManuGowda

src/locales/en/common.json

@@ -770,6 +770,7 @@
   "Validator slot status": "Validator slot status",
   "Validator weight": "Validator weight",
   "Validators": "Validators",
+  "Value": "Value",
   "Verify message": "Verify message",
   "Verify the integrity of a signed message": "Verify the integrity of a signed message",
   "Version": "Version",

src/modules/blockchainApplication/manage/hooks/useApplicationManagement.test.js

@@ -25,6 +25,7 @@ const mockCurrentApplication = mockApplications[3];
 const mockSetApplication = jest.fn();
 
 jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
   useSelector: jest.fn().mockImplementation((fn) => fn(mockState)),
   useDispatch: () => mockDispatch,
 }));

src/modules/blockchainApplication/manage/hooks/useCurrentApplication.test.js

@@ -30,6 +30,7 @@ const mockHistory = {
   push: jest.fn(),
 };
 jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
   useSelector: jest.fn().mockImplementation((fn) => fn(mockState)),
   useDispatch: () => mockDispatch,
 }));

src/modules/blockchainApplication/manage/hooks/useGetDefaultApplication.test.js

@@ -17,6 +17,7 @@ const refetchBlockchainApplicationMeta = jest.fn();
 const refetchApplicationExplore = jest.fn();
 
 jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
   useSelector: jest.fn().mockImplementation((fn) => fn(mockState)),
   useDispatch: () => mockDispatch,
 }));

src/modules/pos/validator/components/LatestStakes/index.test.js

@@ -3,7 +3,7 @@ import { mockTransactions } from '@transaction/__fixtures__';
 import { useTransactions } from '@transaction/hooks/queries';
 import { mockAppsTokens } from '@token/fungible/__fixtures__';
 import usePosToken from '@pos/validator/hooks/usePosToken';
-import { useTokenBalances } from '@token/fungible/hooks/queries';
+import { useNetworkSupportedTokens, useTokenBalances } from '@token/fungible/hooks/queries';
 import { useValidators } from '../../hooks/queries';
 import LatestStakes from './index';
 import { mockValidators } from '../../__fixtures__';
@@ -24,6 +24,7 @@ describe('Latest stakes', () => {
 
   usePosToken.mockReturnValue({ token: mockAppsTokens.data[0] });
   useTokenBalances.mockReturnValue({ data: mockAppsTokens.data[0] });
+  useNetworkSupportedTokens.mockReturnValue({ data: mockAppsTokens.data });
 
   it('displays initial table of stakes', () => {
     useValidators.mockReturnValue({

src/modules/pos/validator/components/Overview/Registrations.test.js

@@ -4,12 +4,6 @@ import * as queryHooks from '../../hooks/queries/useRegistrations';
 import { useRegistrations } from '../../hooks/queries';
 import Registrations from './Registrations';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key) => key,
-  }),
-}));
-
 jest.spyOn(queryHooks, 'useRegistrations');
 
 describe('Registrations', () => {

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

@@ -1,6 +1,6 @@
 import { mountWithRouter } from 'src/utils/testHelpers';
 import mockManagedApplications from '@tests/fixtures/blockchainApplicationsManage';
-import { useTokenBalances } from '@token/fungible/hooks/queries';
+import { useNetworkSupportedTokens, useTokenBalances } from '@token/fungible/hooks/queries';
 import { mockAppsTokens } from '@token/fungible/__fixtures__';
 import { useCurrentApplication } from '@blockchainApplication/manage/hooks';
 import { mockBlocks } from '@block/__fixtures__';
@@ -18,6 +18,7 @@ jest.mock('@token/fungible/hooks/queries');
 useTokenBalances.mockReturnValue({ data: mockAppsTokens.data[0] });
 useLatestBlock.mockReturnValue({ data: mockBlocks.data[0] });
 useCurrentApplication.mockReturnValue([mockManagedApplications[1], mockSetApplication]);
+useNetworkSupportedTokens.mockReturnValue({ data: mockAppsTokens.data });
 
 describe('BlockDetails page', () => {
   let wrapper;

src/modules/transaction/components/Explorer/ExplorerTransactionsHeaderMap.js

@@ -3,28 +3,28 @@ import styles from './ExplorerTransactions.css';
 
 export default (t, activeToken, changeSort) => [
   {
-    title: t('ID'),
+    title: t('Recipient'),
     classList: `${grid['col-xs-3']} ${styles.transactionTitle}`,
   },
   {
-    title: t('Height'),
+    title: t('Type'),
     classList: grid['col-xs-2'],
-    sort: {
-      fn: changeSort,
-      key: 'timestamp',
-    },
   },
   {
-    title: t('Type'),
-    classList: grid['col-xs-3'],
+    title: t('Value'),
+    classList: `${grid['col-xs-2']} ${grid['col-md-2']}`,
   },
   {
     title: t('Date'),
-    classList: `${grid['col-xs-2']} ${grid['col-md-2']}`,
+    classList: `${grid['col-xs-1']} ${grid['col-md-2']}`,
   },
   {
-    title: t('Fee'),
-    classList: `${grid['col-xs-1']} ${grid['col-md-1']}`,
+    title: t('Height'),
+    classList: grid['col-xs-2'],
+    sort: {
+      fn: changeSort,
+      key: 'timestamp',
+    },
   },
   {
     title: t('Status'),

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

@@ -25,8 +25,9 @@ import { splitModuleAndCommand } from '../../utils';
 const TransactionDetails = () => {
   const { search } = useLocation();
   const transactionID = parseSearchParams(search).transactionID;
+  const showParams = JSON.parse(parseSearchParams(search).showParams || 'false');
   const { t } = useTranslation();
-  const [isParamsCollapsed, setIsParamsCollapsed] = useState(false);
+  const [isParamsCollapsed, setIsParamsCollapsed] = useState(showParams);
   const { data: fees } = useFees();
   const feeTokenID = fees?.data?.feeTokenID;
   const { data: token } = useAppsMetaTokens({
@@ -139,12 +140,14 @@ const TransactionDetails = () => {
                 onToggleJsonView: () => setIsParamsCollapsed((state) => !state),
               }}
             />
-            <div
-              data-testid="transaction-param-json-viewer"
-              className={`${styles.jsonContainer} ${!isParamsCollapsed ? styles.shrink : ''}`}
-            >
-              <ReactJson name={false} src={transactionData.params} theme={jsonViewerTheme} />
-            </div>
+            {!isLoading && (
+              <div
+                data-testid="transaction-param-json-viewer"
+                className={`${styles.jsonContainer} ${!isParamsCollapsed ? styles.shrink : ''}`}
+              >
+                <ReactJson name={false} src={transactionData.params} theme={jsonViewerTheme} />
+              </div>
+            )}
           </BoxContent>
         </Box>
         <Box isLoading={isLoading} className={styles.container}>

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

@@ -70,6 +70,10 @@
   box-sizing: border-box;
   font-size: var(--paragraph-font-size-s);
 
+  & > div:first-child {
+    overflow-x: auto;
+  }
+
   &.shrink {
     display: none;
   }

src/modules/transaction/components/TransactionMonitor/TransactionHeaderMap.js

@@ -14,15 +14,19 @@ export default (changeSort, t) => [
   },
   {
     title: t('Height'),
-    classList: `${grid['col-xs-2']} ${styles.transactionFeeCell}`,
+    classList: `${grid['col-xs-1']} ${styles.transactionFeeCell}`,
     sort: {
       fn: changeSort,
       key: 'height',
     },
   },
   {
     title: t('Type'),
-    classList: `${grid['col-xs-3']} ${grid['col-md-3']}`,
+    classList: `${grid['col-xs-2']} ${grid['col-md-2']}`,
+  },
+  {
+    title: t('Value'),
+    classList: `${grid['col-xs-2']} ${grid['col-md-2']}`,
   },
   {
     title: t('Date'),

src/modules/transaction/components/TransactionMonitor/TransactionMonitorList.test.js

@@ -5,7 +5,7 @@ import { mountWithRouterAndQueryClient } from 'src/utils/testHelpers';
 import { DEFAULT_LIMIT } from 'src/utils/monitor';
 import { mockBlocks } from '@block/__fixtures__';
 import { useLatestBlock } from '@block/hooks/queries/useLatestBlock';
-import { useTokenBalances } from '@token/fungible/hooks/queries';
+import { useNetworkSupportedTokens, useTokenBalances } from '@token/fungible/hooks/queries';
 import { mockAppsTokens } from '@token/fungible/__fixtures__';
 import mockManagedApplications from '@tests/fixtures/blockchainApplicationsManage';
 import { useCurrentApplication } from '@blockchainApplication/manage/hooks/useCurrentApplication';
@@ -90,6 +90,7 @@ describe('Transactions monitor page', () => {
   };
 
   useTokenBalances.mockReturnValue({ data: mockAppsTokens.data[0] });
+  useNetworkSupportedTokens.mockReturnValue({ data: mockAppsTokens.data });
   useLatestBlock.mockReturnValue({ data: mockBlocks.data[0] });
   useCurrentApplication.mockReturnValue([mockManagedApplications[1], mockSetApplication]);
   useCommandSchema.mockReturnValue({

src/modules/transaction/components/TransactionRow/components.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
-import { getTransactionAmount } from '@transaction/utils/transaction';
+import { getTransactionValue } from '@transaction/utils/transaction';
 import { MODULE_COMMANDS_NAME_MAP } from 'src/modules/transaction/configuration/moduleCommand';
 import DateTimeFromTimestamp from 'src/modules/common/components/timestamp';
 import WalletVisual from '@wallet/components/walletVisual';
@@ -22,7 +22,6 @@ import { getValidatorDetailsClass } from '@pos/validator/components/ValidatorsTa
 import styles from './row.css';
 import TransactionRowContext from '../../context/transactionRowContext';
 import TransactionTypeFigure from '../TransactionTypeFigure';
-import TransactionAmount from '../TransactionAmount';
 
 export const ID = ({ isWallet }) => {
   const { data, address } = useContext(TransactionRowContext);
@@ -54,13 +53,20 @@ export const Type = () => {
   return <span className={styles.type}>{formatTransactionType(data.moduleCommand)}</span>;
 };
 
-export const ValidatorDetails = () => {
-  const { data, activeTab } = useContext(TransactionRowContext);
+export const ValidatorDetails = ({ isWallet }) => {
+  const { data, activeTab, address } = useContext(TransactionRowContext);
 
   return (
     <span className={getValidatorDetailsClass(activeTab)}>
       <div className={styles.validatorColumn}>
         <div className={`${styles.validatorDetails}`}>
+          {isWallet && (
+            <Icon
+              name={
+                data.sender.address === address ? 'sentTransactionIcon' : 'receivedTransactionIcon'
+              }
+            />
+          )}
           <WalletVisual address={data.sender.address} />
           <div>
             <p className={styles.validatorName}>{data.sender.name}</p>
@@ -72,7 +78,7 @@ export const ValidatorDetails = () => {
   );
 };
 
-export const Sender = () => <ValidatorDetails />;
+export const Sender = ({ isWallet }) => <ValidatorDetails isWallet={isWallet} />;
 
 export const Recipient = () => {
   const { data, avatarSize } = useContext(TransactionRowContext);
@@ -140,30 +146,8 @@ export const Date = ({ t }) => {
 };
 
 export const Amount = () => {
-  const { data, layout, activeToken, host, token } = useContext(TransactionRowContext);
-
-  if (layout !== 'full') {
-    return (
-      <span>
-        <TransactionAmount
-          host={host}
-          token={activeToken}
-          showRounded
-          recipient={data.params.recipientAddress}
-          moduleCommand={data.moduleCommand}
-          amount={getTransactionAmount(data)}
-        />
-      </span>
-    );
-  }
-  return (
-    <span className={styles.amount}>
-      <TokenAmount val={getTransactionAmount(data)} token={token} />
-      <span className={`${styles.fee} hideOnLargeViewPort`}>
-        <TokenAmount val={data.fee} token={token} />
-      </span>
-    </span>
-  );
+  const { data, token } = useContext(TransactionRowContext);
+  return <span className={styles.amount}>{getTransactionValue(data, token)}</span>;
 };
 
 export const Fee = ({ t }) => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useTokenBalances } from '@token/fungible/hooks/queries';
+import { useNetworkSupportedTokens } from '@token/fungible/hooks/queries';
 import routes from 'src/routes/routes';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { useCurrentApplication } from '@blockchainApplication/manage/hooks';
@@ -24,8 +24,11 @@ const TransactionRow = ({
 }) => {
   const Layout = LayoutSchema[layout] || LayoutSchema.default;
   const [currentApplication] = useCurrentApplication();
-  const { data: tokens } = useTokenBalances();
-  const token = tokens?.data?.find(({ chainID }) => chainID === currentApplication.chainID) || {};
+  const networkSupportedTokens = useNetworkSupportedTokens(currentApplication);
+
+  const token =
+    networkSupportedTokens.data?.find(({ chainID }) => chainID === currentApplication.chainID) ||
+    {};
 
   return (
     <Link

src/modules/transaction/components/TransactionRow/index.test.js

@@ -2,7 +2,7 @@ import { mountWithRouter } from 'src/utils/testHelpers';
 import moment from 'moment';
 import accounts from '@tests/constants/wallets';
 import { truncateAddress } from '@wallet/utils/account';
-import { useTokenBalances } from '@token/fungible/hooks/queries';
+import { useNetworkSupportedTokens, useTokenBalances } from '@token/fungible/hooks/queries';
 import { mockAppsTokens } from '@token/fungible/__fixtures__';
 import Row from '.';
 import { mockTransactions } from '../../__fixtures__';
@@ -56,6 +56,7 @@ const transfer = {
 
 jest.mock('@token/fungible/hooks/queries');
 useTokenBalances.mockReturnValue({ data: mockAppsTokens.data[0] });
+useNetworkSupportedTokens.mockReturnValue({ data: mockAppsTokens.data });
 
 describe('Transaction Row', () => {
   const t = (str) => str;
@@ -99,7 +100,7 @@ describe('Transaction Row', () => {
         layout: 'hosted',
       };
       const wrapper = mountWithRouter(Row, props, {});
-      expect(wrapper.find('Sender')).toHaveLength(0);
+      expect(wrapper.find('Sender')).toHaveLength(1);
     });
   });
 

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

@@ -10,12 +10,11 @@ import {
   Status,
   ValidatorDetails,
   Round,
-  Fee,
 } from './components';
 import styles from './schemas.css';
 
-const hosted = [ID, Height, Type, Date, Fee, Status];
-const full = [ID, Sender, Height, Type, Date, Status];
+const hosted = [Sender, Type, Amount, Date, Height, Status];
+const full = [ID, Sender, Height, Type, Amount, Date, Status];
 const minimal = [Counterpart, Amount];
 const stake = [ValidatorDetails, Date, Round, Params];
 

src/modules/transaction/components/TransactionRow/row.css

@@ -27,7 +27,7 @@
 .amount {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: flex-start !important;
 
   & > .fee {
     font-family: var(--content-font);
@@ -99,6 +99,10 @@
   flex-direction: row;
   align-items: center;
 
+  & > img {
+    margin-right: 10px;
+  }
+
   & > div {
     display: flex;
     flex-direction: column;