add mix tx filter

app/components/shared/TxHistory/RegularTxRow.jsx

@@ -50,6 +50,7 @@ const RegularTxRow = ({
   txAccountNameDebited,
   timeMessage,
   className,
+  isMix,
   ...props
 }) => (
   <Row {...{ ...props, txAccountName, pending, overview }}>
@@ -80,6 +81,7 @@ const RegularTxRow = ({
       {!pending && (
         <div className={styles.timeDateSpacer}>{timeMessage(txTs)}</div>
       )}
+      { isMix && <span className={styles.isMix}>mixed</span> }
     </div>
   </Row>
 );

app/components/shared/TxHistory/TxHistory.module.css

@@ -92,7 +92,6 @@
 
 .overviewInfo {
   display: grid;
-  grid-template-columns: 1fr 8fr 8fr;
 }
 
 .overviewInfo .txDirection {
@@ -328,6 +327,11 @@
   display: none !important;
 }
 
+.isMix {
+  font-size: 7pt;
+  margin-left: auto;
+}
+
 @media screen and (max-width: 1179px) {
   .overviewRow {
     width: 315px;
@@ -364,7 +368,6 @@
     padding: 5px 20px 27px 20px !important;
   }
   .info {
-    grid-template-columns: 0.5fr 3fr 3fr;
     padding-bottom: 1rem;
   }
   .myTickets {

app/components/views/TransactionsPage/HistoryTab/HistoryTab.jsx

@@ -84,13 +84,25 @@ const HistoryTab = () => {
   };
 
   const onChangeFilter = (value) => {
+    console.log(value);
     if (isChangingFilterTimer) {
       clearTimeout(isChangingFilterTimer);
     }
-    const changeFilter = (vs) => {
+    const changeFilter = (newFilterOpt) => {
+      if (newFilterOpt.type) {
+        // if -1 it is all options, so we clean the filter.
+        if (newFilterOpt.type === -1) {
+          // TODO enable filtering more than one type each time.
+          transactionsFilter.types = [];
+        } else {
+          // otherwise we push it to the array option.
+          transactionsFilter.types.push(newFilterOpt.type);
+        }
+        delete(newFilterOpt.type);
+      }
       const newFilter = {
         ...transactionsFilter,
-        ...vs
+        ...newFilterOpt
       };
       clearTimeout(isChangingFilterTimer);
       onChangeTransactionsFilter(newFilter);

app/components/views/TransactionsPage/HistoryTab/helpers.js

@@ -2,7 +2,8 @@ import { FormattedMessage as T } from "react-intl";
 import {
   TRANSACTION_DIR_SENT,
   TRANSACTION_DIR_RECEIVED,
-  TRANSACTION_DIR_TRANSFERRED
+  TRANSACTION_DIR_TRANSFERRED,
+  TRANSACTION_MIXED
 } from "constants";
 
 export const selectedTxTypeFromFilter = (filter) => {
@@ -33,22 +34,31 @@ export const getSortTypes = () => ([
 export const getTxTypes = () => ([
   {
     key: "all",
-    value: { direction: null },
+    value: { direction: null, type: -1 },
     label: <T id="txFilter.type.all" m="All" />
   },
+  // -1 cleans the filter types, and right now we are cleaning transaction
+  // types if a direction is set, instead of acumullating them, because we
+  // need to apply changes on EyeFilterMenu Component, for having multiple
+  // options marked.
   {
     key: "sent",
-    value: { direction: TRANSACTION_DIR_SENT },
+    value: { direction: TRANSACTION_DIR_SENT, type: -1 },
     label: <T id="txFilter.type.sent" m="Sent" />
   },
   {
     key: "receiv",
-    value: { direction: TRANSACTION_DIR_RECEIVED },
+    value: { direction: TRANSACTION_DIR_RECEIVED, type: -1 },
     label: <T id="txFilter.type.received" m="Received" />
   },
   {
     key: "transf",
-    value: { direction: TRANSACTION_DIR_TRANSFERRED },
+    value: { direction: TRANSACTION_DIR_TRANSFERRED, type: -1 },
     label: <T id="txFilter.type.transfered" m="Transfered" />
+  },
+  {
+    key: "mixed",
+    value: { type: TRANSACTION_MIXED },
+    label: <T id="txFilter.type.mixed" m="Mixed" />
   }
 ]);

app/constants/Decrediton.js

@@ -73,12 +73,14 @@ export const TRANSFER = "transfer";
 export const COINBASE = "coinbase";
 export const REGULAR = "regular";
 export const ELIGIBLE = "eligible";
+export const MIXED = "mixed";
 export const ALL = "all";
 
 // tx directions
 export const TRANSACTION_DIR_SENT = "sent";
 export const TRANSACTION_DIR_RECEIVED = "received";
 export const TRANSACTION_DIR_TRANSFERRED = "transfer";
+export const TRANSACTION_MIXED = "mixed";
 
 // Default name to particular accounts
 export const DEFAULT_ACCOUNT = "default";

app/selectors.js

@@ -31,6 +31,7 @@ import {
   DCRDATA_URL_MAINNET
 } from "./middleware/dcrdataapi";
 import { dateToLocal, dateToUTC } from "./helpers/dateFormat";
+import { isMixTx } from "./helpers/transactions";
 import {
   MIN_RELAY_FEE,
   DCR,
@@ -41,6 +42,7 @@ import {
   TRANSACTION_DIR_SENT,
   TRANSACTION_DIR_RECEIVED,
   TRANSACTION_DIR_TRANSFERRED,
+  TRANSACTION_MIXED,
   VOTED,
   LIVE,
   UNMINED,
@@ -544,8 +546,8 @@ export const numTicketsToBuy = get(["control", "numTicketsToBuy"]);
 
 // transactionNormalizer normalizes regular decred's regular transactions
 export const transactionNormalizer = createSelector(
-  [accounts, txURLBuilder, blockURLBuilder],
-  (accounts, txURLBuilder, blockURLBuilder) => {
+  [accounts, txURLBuilder, blockURLBuilder, chainParams],
+  (accounts, txURLBuilder, blockURLBuilder, chainParams) => {
     const findAccount = (num) =>
       accounts.find((account) => account.getAccountNumber() === num);
     const getAccountName = (num) =>
@@ -623,6 +625,11 @@ export const transactionNormalizer = createSelector(
               txAccountName: creditedAccountName
             };
 
+      const { isMix } = isMixTx(wallet.decodeRawTransaction(
+        Buffer.from(tx.getTransaction()),
+        chainParams
+      ));
+
       return {
         txUrl,
         txBlockUrl,
@@ -636,9 +643,11 @@ export const transactionNormalizer = createSelector(
         txOutputs,
         txBlockHash,
         txNumericType: type,
+        txIsMixed: isMix,
         rawTx,
         outputs,
         creditAddresses,
+        isMix,
         ...txDetails
       };
     };
@@ -725,7 +734,18 @@ export const filteredRegularTxs = createSelector(
       )
       .filter((v) =>
         filter.maxAmount ? Math.abs(v.txAmount) <= filter.maxAmount : true
-      );
+      )
+      .filter((v) => {
+        let isSameType = true;
+        if (filter.types.length > 0) {
+          isSameType = false;
+          filter.types.forEach(type =>
+            type === v.txType || (type === TRANSACTION_MIXED && v.isMix) ?
+              isSameType = true : null
+          );
+        }
+        return isSameType;
+      });
 
     return filteredTxs;
   }