♻️ Adjust alignment on singleTransaction component

LiskHQ · Jun 24, 2019 · ba2a8c7 · ba2a8c7
1 parent ea8a47d
commit ba2a8c7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/src/components/singleTransactionV2/singleTransactionV2.css b/src/components/singleTransactionV2/singleTransactionV2.css
@@ -1,6 +1,12 @@
 @import '../app/variablesV2.css';
 @import '../app/mixins.css';
 
+.container {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+
 .wrapper {
   margin: 20px 0 40px;
   padding: 0;

diff --git a/src/components/singleTransactionV2/singleTransactionV2.js b/src/components/singleTransactionV2/singleTransactionV2.js
@@ -4,13 +4,13 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { translate } from 'react-i18next';
 import { DateTimeFromTimestamp } from '../timestamp';
 import LiskAmount from '../liskAmount';
-import EmptyState from '../emptyState';
 import svg from '../../utils/svgIcons';
 import BoxV2 from '../boxV2';
 import { SecondaryButtonV2 } from '../toolbox/buttons/button';
 import TransactionDetailViewV2 from '../transactionsV2/transactionDetailViewV2/transactionDetailViewV2';
 import styles from './singleTransactionV2.css';
 import transactionTypes from '../../constants/transactionTypes';
+import NotFound from '../notFound';
 
 class SingleTransactionV2 extends React.Component {
   constructor(props) {
@@ -80,9 +80,8 @@ class SingleTransactionV2 extends React.Component {
         break;
     }
 
-
     return (
-      <div className={`${grid.row} ${grid['center-xs']}`}>
+      <div className={`${grid.row} ${grid['center-xs']} ${styles.container}`}>
       { transaction.id && !transaction.error ? (
         <BoxV2 className={`${grid['col-sm-8']} ${grid['col-md-4']} ${styles.wrapper}`}>
           <header className={`${styles.detailsHeader} tx-header`}>
@@ -158,11 +157,8 @@ class SingleTransactionV2 extends React.Component {
             </footer>
           </main>
         </BoxV2>
-      ) : typeof transaction === 'string' && (
-        <BoxV2 className={`${grid['col-sm-8']} ${grid['col-md-4']}`}>
-          <EmptyState title={this.props.t('No results')}
-            message={this.props.t('Search for Lisk ID, Delegate or Transaction ID')} />
-        </BoxV2>
+      ) : transaction.errors && transaction.errors.length && (
+        <NotFound />
       )}
       </div>
     );

diff --git a/src/components/singleTransactionV2/singleTransactionV2.test.js b/src/components/singleTransactionV2/singleTransactionV2.test.js
@@ -171,7 +171,11 @@ describe('Single Transaction V2 Component', () => {
   });
 
   describe('No results', () => {
-    const transaction = 'No transaction found';
+    const transaction = {
+      errors: [{
+        code: 'INVALID_REQUEST_PARAMETER',
+      }],
+    };
 
     const store = configureMockStore([thunk])({
       account: accounts.genesis,
@@ -194,7 +198,7 @@ describe('Single Transaction V2 Component', () => {
     });
 
     it('Should render no result screen', () => {
-      expect(wrapper).toContainMatchingElement('EmptyState');
+      expect(wrapper).toContainMatchingElement('NotFound');
     });
   });
 });