zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feature: add TransactionDetails modal in TransactionItem

This commit is contained in:
George Lima 2018-12-19 15:31:01 -03:00
parent ed0622c22f
commit a9e89a275c
1 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
app/components/transaction-item.js
View File

@ -9,6 +9,8 @@ import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
import { RowComponent } from './row'; import { RowComponent } from './row';
import { ColumnComponent } from './column'; import { ColumnComponent } from './column';
import { TextComponent } from './text'; import { TextComponent } from './text';
import { ModalComponent } from './modal';
import { TransactionDetailsComponent } from './transaction-details';
import theme from '../theme'; import theme from '../theme';
@ -53,6 +55,7 @@ export type Transaction = {
address: string, address: string,
amount: number, amount: number,
zecPrice: number, zecPrice: number,
transactionId: string,
}; };
export const TransactionItemComponent = ({ export const TransactionItemComponent = ({
@ -61,6 +64,7 @@ export const TransactionItemComponent = ({
address, address,
amount, amount,
zecPrice, zecPrice,
transactionId,
}: Transaction) => { }: Transaction) => {
const isReceived = type === 'receive'; const isReceived = type === 'receive';
const transactionTime = dateFns.format(new Date(date), 'HH:mm A'); const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
@ -75,34 +79,55 @@ export const TransactionItemComponent = ({
const transactionAddress = truncateAddress(address); const transactionAddress = truncateAddress(address);
return ( return (
<Wrapper alignItems='center' justifyContent='space-between'> <ModalComponent
<RowComponent alignItems='center'> renderTrigger={toggleVisibility => (
<RowComponent alignItems='center'> <Wrapper
<Icon alignItems='center'
src={isReceived ? ReceivedIcon : SentIcon} justifyContent='space-between'
alt='Transaction Type Icon' onClick={toggleVisibility}
/> >
<TransactionColumn> <RowComponent alignItems='center'>
<TransactionTypeLabel isReceived={isReceived} value={type} /> <RowComponent alignItems='center'>
<TransactionTime value={transactionTime} /> <Icon
</TransactionColumn> src={isReceived ? ReceivedIcon : SentIcon}
</RowComponent> alt='Transaction Type Icon'
<TextComponent value={transactionAddress} align='left' /> />
</RowComponent> <TransactionColumn>
<ColumnComponent alignItems='flex-end'> <TransactionTypeLabel isReceived={isReceived} value={type} />
<TextComponent <TransactionTime value={transactionTime} />
value={transactionValueInZec} </TransactionColumn>
color={ </RowComponent>
isReceived <TextComponent value={transactionAddress} align='left' />
? theme.colors.transactionReceived </RowComponent>
: theme.colors.transactionSent <ColumnComponent alignItems='flex-end'>
} <TextComponent
value={transactionValueInZec}
color={
isReceived
? theme.colors.transactionReceived
: theme.colors.transactionSent
}
/>
<TextComponent
value={transactionValueInUsd}
color={theme.colors.inactiveItem}
/>
</ColumnComponent>
</Wrapper>
)}
>
{toggleVisibility => (
<TransactionDetailsComponent
amount={amount}
date={date}
from={address}
to=''
transactionId={transactionId}
handleClose={toggleVisibility}
type={type}
zecPrice={zecPrice}
/> />
<TextComponent )}
value={transactionValueInUsd} </ModalComponent>
color={theme.colors.inactiveItem}
/>
</ColumnComponent>
</Wrapper>
); );
}; };