Merge pull request #163 from BeamMW/feature/txs

Feature/txs

src/app/containers/Wallet/components/Wallet/EmptyTransaction.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { styled } from '@linaria/react';
+import { TxEmptyState } from '@app/shared/icons';
+
+const EmptyStateWrapper = styled.div`
+  text-align: center;
+  padding: 50px 0;
+  flex-direction: row;
+  > svg {
+    margin: 0 auto;
+    text-align: center;
+  }
+`;
+const EmptyListTitle = styled.div`
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+  opacity: 0.5;
+  margin: 20px 0;
+`;
+
+const EmptyTransaction = () => (
+  <EmptyStateWrapper>
+    <TxEmptyState />
+    <EmptyListTitle>Your transaction list is empty</EmptyListTitle>
+  </EmptyStateWrapper>
+);
+
+export default EmptyTransaction;

src/app/containers/Wallet/components/Wallet/Transactions.tsx

@@ -4,6 +4,7 @@ import { styled } from '@linaria/react';
 import { Contract, Transaction } from '@core/types';
 
 import { AssetLabel, StatusLabel } from '@app/shared/components';
+import EmptyTransaction from '@app/containers/Wallet/components/Wallet/EmptyTransaction';
 
 const ListStyled = styled.ul`
   margin: 0 -20px;
@@ -39,7 +40,7 @@ const fromInvokeData = (data: Contract, fee: number): Partial<Transaction> => {
   return null;
 };
 
-const Transactions: React.FC<TransactionsProps> = ({ data: transactions }) => (
+const Transactions: React.FC<TransactionsProps> = ({ data: transactions }) => (transactions.length ? (
   <ListStyled>
     {transactions.map((tx, index) => {
       const { invoke_data: contracts } = tx;
@@ -60,6 +61,8 @@ const Transactions: React.FC<TransactionsProps> = ({ data: transactions }) => (
       );
     })}
   </ListStyled>
-);
+) : (
+  <EmptyTransaction />
+));
 
 export default Transactions;

src/app/containers/Wallet/containers/Wallet/Wallet.tsx

@@ -71,11 +71,9 @@ const Wallet = () => {
         <Assets data={assets} />
       </Section>
 
-      {sliced.length > 0 && (
-        <Section title="Transactions" showAllAction={sliced.length > TXS_MAX ? () => {} : undefined}>
-          <Transactions data={sliced} />
-        </Section>
-      )}
+      <Section title="Transactions" showAllAction={sliced.length > TXS_MAX ? () => {} : undefined}>
+        <Transactions data={sliced} />
+      </Section>
     </Window>
   );
 };

src/app/shared/icons/index.ts

@@ -44,6 +44,7 @@ import TxPendingIcon from './icon-tx-pending.svg';
 import TxPendingMPIcon from './icon-tx-pending-mp.svg';
 import TxPendingOffIcon from './icon-tx-pending-off.svg';
 import TxPendingOwnIcon from './icon-tx-pending-own.svg';
+import TxEmptyState from './icon-tx-empty.svg';
 
 export {
   AddIcon,
@@ -84,4 +85,5 @@ export {
   TxPendingOffIcon,
   TxPendingOwnIcon,
   TxExpiredIcon,
+  TxEmptyState,
 };