feature: add TransactionDetails modal in TransactionItem

app/components/transaction-item.js

@@ -9,6 +9,8 @@ import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
 import { RowComponent } from './row';
 import { ColumnComponent } from './column';
 import { TextComponent } from './text';
+import { ModalComponent } from './modal';
+import { TransactionDetailsComponent } from './transaction-details';
 
 import theme from '../theme';
 
@@ -53,6 +55,7 @@ export type Transaction = {
   address: string,
   amount: number,
   zecPrice: number,
+  transactionId: string,
 };
 
 export const TransactionItemComponent = ({
@@ -61,6 +64,7 @@ export const TransactionItemComponent = ({
   address,
   amount,
   zecPrice,
+  transactionId,
 }: Transaction) => {
   const isReceived = type === 'receive';
   const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
@@ -75,7 +79,13 @@ export const TransactionItemComponent = ({
   const transactionAddress = truncateAddress(address);
 
   return (
-    <Wrapper alignItems='center' justifyContent='space-between'>
+    <ModalComponent
+      renderTrigger={toggleVisibility => (
+        <Wrapper
+          alignItems='center'
+          justifyContent='space-between'
+          onClick={toggleVisibility}
+        >
           <RowComponent alignItems='center'>
             <RowComponent alignItems='center'>
               <Icon
@@ -104,5 +114,20 @@ export const TransactionItemComponent = ({
             />
           </ColumnComponent>
         </Wrapper>
+      )}
+    >
+      {toggleVisibility => (
+        <TransactionDetailsComponent
+          amount={amount}
+          date={date}
+          from={address}
+          to=''
+          transactionId={transactionId}
+          handleClose={toggleVisibility}
+          type={type}
+          zecPrice={zecPrice}
+        />
+      )}
+    </ModalComponent>
   );
 };