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 { 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,34 +79,55 @@ export const TransactionItemComponent = ({
const transactionAddress = truncateAddress(address);
return (
<Wrapper alignItems='center' justifyContent='space-between'>
<RowComponent alignItems='center'>
<RowComponent alignItems='center'>
<Icon
src={isReceived ? ReceivedIcon : SentIcon}
alt='Transaction Type Icon'
/>
<TransactionColumn>
<TransactionTypeLabel isReceived={isReceived} value={type} />
<TransactionTime value={transactionTime} />
</TransactionColumn>
</RowComponent>
<TextComponent value={transactionAddress} align='left' />
</RowComponent>
<ColumnComponent alignItems='flex-end'>
<TextComponent
value={transactionValueInZec}
color={
isReceived
? theme.colors.transactionReceived
: theme.colors.transactionSent
}
<ModalComponent
renderTrigger={toggleVisibility => (
<Wrapper
alignItems='center'
justifyContent='space-between'
onClick={toggleVisibility}
>
<RowComponent alignItems='center'>
<RowComponent alignItems='center'>
<Icon
src={isReceived ? ReceivedIcon : SentIcon}
alt='Transaction Type Icon'
/>
<TransactionColumn>
<TransactionTypeLabel isReceived={isReceived} value={type} />
<TransactionTime value={transactionTime} />
</TransactionColumn>
</RowComponent>
<TextComponent value={transactionAddress} align='left' />
</RowComponent>
<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}
color={theme.colors.inactiveItem}
/>
</ColumnComponent>
</Wrapper>
)}
</ModalComponent>
);
};