[transactions filter] Add filter by tx id

app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.jsx

@@ -92,6 +92,7 @@ const selectTicketTypeFromFilter = (filter) => {
 
 const MyTickets = ({ toggleIsLegacy }) => {
   const {
+    intl,
     tickets,
     tsDate,
     noMoreTickets,
@@ -113,6 +114,7 @@ const MyTickets = ({ toggleIsLegacy }) => {
   const [selectedSortOrderKey, setSortOrderKey] = useState(
     ticketsFilter.listDirection
   );
+  const [searchText, setSearchText] = useState(ticketsFilter.search);
 
   const onChangeFilter = (filter) => {
     const newFilter = { ...ticketsFilter, ...filter };
@@ -129,11 +131,18 @@ const MyTickets = ({ toggleIsLegacy }) => {
     setSortOrderKey(type.value);
   };
 
+  const onChangeSearchText = (searchText) => {
+    onChangeFilter({ search: searchText });
+    setSearchText(searchText);
+  };
   const loadMoreThreshold = 90 + Math.max(0, window.innerHeight - 765);
 
   return (
     <TicketListPage
       {...{
+        intl,
+        searchText,
+        onChangeSearchText,
         selectedTicketTypeKey,
         selectedSortOrderKey,
         loadMoreThreshold,

app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css

@@ -10,11 +10,10 @@
 }
 
 .ticketsButtons {
-  text-align: right;
-  margin-right: 20px;
   margin-left: auto;
   display: flex;
-  align-items: center;
+  line-height: 1.2rem;
+  padding-top: 0.5rem;
 }
 
 .subtitle {

app/components/views/TicketsPage/MyTicketsTab/Page.jsx

@@ -1,4 +1,4 @@
-import { FormattedMessage as T } from "react-intl";
+import { FormattedMessage as T, defineMessages } from "react-intl";
 import { Tooltip, Paginator } from "pi-ui";
 import InfiniteScroll from "react-infinite-scroller";
 import {
@@ -9,8 +9,19 @@ import {
 import { TxHistory, Subtitle } from "shared";
 import { EyeFilterMenu, QRModalButton } from "buttons";
 import styles from "./MyTicketsTab.module.css";
+import { TextInput } from "inputs";
+
+const messages = defineMessages({
+  filterByHashPlaceholder: {
+    id: "txhistory.filterByHashPlaceholder",
+    defaultMessage: "Filter by Hash"
+  }
+});
 
 const subtitleMenu = ({
+  intl,
+  searchText,
+  onChangeSearchText,
   sortTypes,
   ticketTypes,
   selectedSortOrderKey,
@@ -24,6 +35,13 @@ const subtitleMenu = ({
   prepareQRs
 }) => (
   <div className={styles.ticketsButtons}>
+    <TextInput
+      id="filterByHashInput"
+      type="text"
+      placeholder={intl.formatMessage(messages.filterByHashPlaceholder)}
+      value={searchText}
+      onChange={(e) => onChangeSearchText(e.target.value)}
+    />
     <Tooltip
       contentClassName={styles.sortByTooltip}
       content={<T id="tickets.sortby.tooltip" m="Sort By" />}>
@@ -84,6 +102,9 @@ const subtitleMenu = ({
 );
 
 const TicketListPage = ({
+  intl,
+  searchText,
+  onChangeSearchText,
   tickets,
   noMoreTickets,
   getTickets,
@@ -112,6 +133,9 @@ const TicketListPage = ({
         title={<T id="mytickets.subtitle" m="My Tickets" />}
         className={styles.subtitle}
         children={subtitleMenu({
+          intl,
+          searchText,
+          onChangeSearchText,
           sortTypes,
           ticketTypes,
           selectedSortOrderKey,

app/components/views/TicketsPage/MyTicketsTab/hooks.js

@@ -6,8 +6,10 @@ import * as ta from "actions/TransactionActions";
 import { UNMINED, IMMATURE, LIVE } from "constants";
 import { isEqual } from "lodash";
 import QRCode from "qrcode";
+import { useIntl } from "react-intl";
 
 export const useTicketsList = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
 
   // selectors
@@ -76,6 +78,7 @@ export const useTicketsList = () => {
   }, [tickets, qrHashes]);
 
   return {
+    intl,
     tickets,
     tsDate,
     noMoreTickets,

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

@@ -12,9 +12,9 @@ import {
 import styles from "./HistoryPage.module.css";
 
 const messages = defineMessages({
-  filterByAddrPlaceholder: {
-    id: "txhistory.filterByAddrPlaceholder",
-    defaultMessage: "Filter by Address"
+  filterByAddrOrHashPlaceholder: {
+    id: "txhistory.filterByAddrOrHashPlaceholder",
+    defaultMessage: "Filter by Address or Hash"
   }
 });
 
@@ -36,9 +36,9 @@ const subtitleMenu = ({
   <div className={styles.historyContainer}>
     <div className={styles.historySearchTx}>
       <TextInput
-        id="filterByAddrInput"
+        id="filterByAddrOrHashInput"
         type="text"
-        placeholder={intl.formatMessage(messages.filterByAddrPlaceholder)}
+        placeholder={intl.formatMessage(messages.filterByAddrOrHashPlaceholder)}
         value={searchText}
         onChange={(e) => onChangeSearchText(e.target.value)}
       />

app/selectors.js

@@ -840,7 +840,8 @@ export const filteredRegularTxs = createSelector(
                 address.length > 1 &&
                 address.toLowerCase().indexOf(filter.search.toLowerCase()) !==
                   -1
-            ) != undefined
+            ) != undefined ||
+            v.txHash.toLowerCase().includes(filter.search.toLowerCase())
           : true
       )
       .filter((v) =>
@@ -864,6 +865,11 @@ export const filteredStakeTxs = createSelector(
   (transactions, filter) => {
     const filteredTxs = Object.keys(transactions)
       .map((hash) => transactions[hash])
+      .filter((v) =>
+        filter.search
+          ? v.txHash.toLowerCase().includes(filter.search.toLowerCase())
+          : true
+      )
       .filter((v) => (filter.status ? filter.status === v.status : true));
 
     return filteredTxs;