feat(transactions): add fee to transactions lists

app/components/transaction-daily.js

@@ -39,16 +39,17 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
     <Day value={transactionsDate} />
     <TransactionsWrapper>
       {transactions.map(({
-        date, type, address, amount, transactionId,
+        date, type, address, amount, transactionId, fees,
       }) => (
         <Fragment key={`${address}-${type}-${amount}-${date}`}>
           <TransactionItemComponent
             transactionId={transactionId}
             type={type}
             date={date}
-            address={address || ''}
+            address={address || 'N/A'}
             amount={amount}
             zecPrice={zecPrice}
+            fees={fees}
           />
         </Fragment>
       ))}

app/components/transaction-details.js

@@ -21,7 +21,6 @@ import { ColumnComponent } from './column';
 import { appTheme } from '../theme';
 
 import { formatNumber } from '../utils/format-number';
-import { truncateAddress } from '../utils/truncate-address';
 import { openExternal } from '../utils/open-external';
 
 const Wrapper = styled.div`
@@ -127,8 +126,8 @@ type Props = {
   zecPrice: number,
   date: string,
   transactionId: string,
-  from: string,
-  to: string,
+  address: string,
+  fees: number | string,
   handleClose: () => void,
   theme: AppTheme,
 };
@@ -139,35 +138,25 @@ const Component = ({
   zecPrice,
   date,
   transactionId,
-  from,
-  to,
+  address,
+  fees,
   handleClose,
   theme,
 }: Props) => {
   const isReceived = type === 'receive';
-  const receivedIcon = theme.mode === DARK
-    ? ReceivedIconDark
-    : ReceivedIconLight;
-  const sentIcon = theme.mode === DARK
-    ? SentIconDark
-    : SentIconLight;
+  const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
+  const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
 
   return (
     <Wrapper>
       <CloseIconWrapper>
-        <CloseIconImg
-          src={CloseIcon}
-          onClick={handleClose}
-        />
+        <CloseIconImg src={CloseIcon} onClick={handleClose} />
       </CloseIconWrapper>
       <TitleWrapper>
         <TextComponent value='Transaction Details' align='center' />
       </TitleWrapper>
       <DetailsWrapper>
-        <Icon
-          src={isReceived ? receivedIcon : sentIcon}
-          alt='Transaction Type Icon'
-        />
+        <Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
         <TextComponent
           isBold
           size={2.625}
@@ -194,10 +183,14 @@ const Component = ({
         <ColumnComponent>
           <TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
           <TextComponent
-            value={formatNumber({
-              value: new BigNumber(amount).times(0.1).toNumber(),
-              append: 'ZEC ',
-            })}
+            value={
+              fees === 'N/A'
+                ? 'N/A'
+                : formatNumber({
+                  value: new BigNumber(fees).toFormat(4),
+                  append: 'ZEC ',
+                })
+            }
           />
         </ColumnComponent>
       </InfoRow>
@@ -207,7 +200,7 @@ const Component = ({
           <Label value='TRANSACTION ID' />
           <TransactionId
             onClick={
-              from !== '(Shielded)'
+              address !== '(Shielded)'
                 ? () => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)
                 : () => {}
             }
@@ -219,15 +212,8 @@ const Component = ({
       <Divider />
       <InfoRow>
         <ColumnComponent width='100%'>
-          <Label value='FROM' />
-          <Ellipsis value={from} />
-        </ColumnComponent>
-      </InfoRow>
-      <Divider />
-      <InfoRow>
-        <ColumnComponent width='100%'>
-          <Label value='TO' />
-          <Ellipsis value={truncateAddress(to) || 'N/A'} />
+          <Label value='Address' />
+          <Ellipsis value={address} />
         </ColumnComponent>
       </InfoRow>
     </Wrapper>

app/components/transaction-item.js

@@ -71,6 +71,7 @@ export type Transaction = {
   date: string,
   address: string,
   amount: number,
+  fees: number | string,
   zecPrice: number,
   transactionId: string,
   theme: AppTheme,
@@ -81,6 +82,7 @@ const Component = ({
   date,
   address,
   amount,
+  fees,
   zecPrice,
   transactionId,
   theme,
@@ -97,12 +99,8 @@ const Component = ({
   });
   const transactionAddress = truncateAddress(address);
 
-  const receivedIcon = theme.mode === DARK
-    ? ReceivedIconDark
-    : ReceivedIconLight;
-  const sentIcon = theme.mode === DARK
-    ? SentIconDark
-    : SentIconLight;
+  const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
+  const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
 
   return (
     <ModalComponent
@@ -127,10 +125,7 @@ const Component = ({
             <TextComponent
               isBold
               value={transactionValueInZec}
-              color={isReceived
-                ? theme.colors.transactionReceived
-                : theme.colors.transactionSent
-              }
+              color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
             />
             <TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
           </ColumnComponent>
@@ -141,8 +136,8 @@ const Component = ({
         <TransactionDetailsComponent
           amount={amount}
           date={date}
-          from={address}
-          to=''
+          address={address}
+          fees={fees}
           transactionId={transactionId}
           handleClose={toggleVisibility}
           type={type}

app/components/wallet-address.js

@@ -67,7 +67,7 @@ const QRCodeContainer = styled.div`
 `;
 
 const QRCodeWrapper = styled.div`
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   padding: 10px;
 `;
 
@@ -139,13 +139,9 @@ class Component extends PureComponent<Props, State> {
     const { address, theme } = this.props;
     const { showQRCode, showCopiedTooltip } = this.state;
 
-    const qrCodeIcon = theme.mode === DARK
-      ? ScanIconDark
-      : ScanIconLight;
+    const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight;
 
-    const copyIcon = theme.mode === DARK
-      ? CopyIconDark
-      : CopyIconLight;
+    const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;
 
     return (
       <ColumnComponent width='100%'>
@@ -155,27 +151,18 @@ class Component extends PureComponent<Props, State> {
             onClick={this.toggleMoreInfo}
             onDoubleClick={this.showMoreInfo}
           />
-          <CopyToClipboard
-            text={address}
-            onCopy={this.copyAddress}
-          >
+          <CopyToClipboard text={address} onCopy={this.copyAddress}>
             <IconButton onClick={() => {}}>
               {!showCopiedTooltip ? null : (
                 <CopyTooltip>
                   <TooltipText value='Copied!' />
                 </CopyTooltip>
               )}
-              <IconImage
-                src={copyIcon}
-                alt='Copy Address'
-              />
+              <IconImage src={copyIcon} alt='Copy Address' />
             </IconButton>
           </CopyToClipboard>
           <IconButton onClick={this.toggleMoreInfo}>
-            <IconImage
-              src={qrCodeIcon}
-              alt='See QRCode'
-            />
+            <IconImage src={qrCodeIcon} alt='See QRCode' />
           </IconButton>
         </AddressWrapper>
         {!showQRCode ? null : (

app/containers/dashboard.js

@@ -50,11 +50,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 
     const formattedTransactions: Array<Object> = flow([
       arr => arr.map(transaction => ({
-        transactionId: transaction.txid,
+        transactionId: transaction.txid || 'N/A',
         type: transaction.category,
         date: new Date(transaction.time * 1000).toISOString(),
         address: transaction.address,
         amount: Math.abs(transaction.amount),
+        fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
       })),
       arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
       obj => Object.keys(obj).map(day => ({

app/containers/transactions.js

@@ -70,6 +70,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
         date: new Date(transaction.time * 1000).toISOString(),
         address: transaction.address,
         amount: new BigNumber(transaction.amount).absoluteValue().toNumber(),
+        fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
       })),
     );
 

app/views/transactions.js

@@ -111,6 +111,7 @@ export class TransactionsView extends PureComponent<Props> {
         <TransactionItemComponent
           address={transaction.address}
           amount={transaction.amount}
+          fees={transaction.fees}
           date={transaction.date}
           transactionId={transaction.transactionId}
           type={transaction.type}