1032/filter tokens orders widget

src/api/exchange/ExchangeApi.ts

@@ -104,6 +104,11 @@ export interface ExchangeApi extends DepositApi {
   cancelOrders(params: CancelOrdersParams): Promise<Receipt>
 }
 
+export interface DetailedAuctionElement extends AuctionElement {
+  buyToken: TokenDetails | null
+  sellToken: TokenDetails | null
+}
+
 export interface AuctionElement extends Order {
   user: string
   sellTokenBalance: BN

src/components/DepositWidget/index.tsx

@@ -3,20 +3,18 @@ import Modali from 'modali'
 import styled from 'styled-components'
 import BN from 'bn.js'
 
-// Assets
-import searchIcon from 'assets/img/search.svg'
-
 // Utils, const, types
 import { logDebug, getToken } from 'utils'
 import { ZERO, MEDIA } from 'const'
 import { TokenBalanceDetails } from 'types'
-import { TokenLocalState } from 'reducers-actions'
 import { LocalTokensState } from 'reducers-actions/localTokens'
+import { TokenLocalState } from 'reducers-actions'
 
 // Components
 import { CardTable } from 'components/Layout/Card'
 import ErrorMsg from 'components/ErrorMsg'
 import Widget from 'components/Layout/Widget'
+import FilterTools from 'components/FilterTools'
 
 // DepositWidget: subcomponents
 import { Row } from 'components/DepositWidget/Row'
@@ -183,19 +181,8 @@ const BalancesWidget = styled(Widget)`
       }
     }
   }
-`
-
-const BalanceTools = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  align-items: center;
-  order: 1;
-
-  > .balances-manageTokens {
+  // button
+  .balances-manageTokens {
     font-size: 1.4rem;
     color: var(--color-text-active);
     letter-spacing: 0;
@@ -217,7 +204,8 @@ const BalanceTools = styled.div`
     }
   }
 
-  > .balances-hideZero {
+  // label + radio input
+  .balances-hideZero {
     display: flex;
     flex-flow: row nowrap;
     font-size: 1.4rem;
@@ -236,65 +224,6 @@ const BalanceTools = styled.div`
       margin: 0 0 0 0.5rem;
     }
   }
-
-  > .balances-searchTokens {
-    display: flex;
-    width: auto;
-    max-width: 100%;
-    position: relative;
-    height: 5.6rem;
-    margin: 1.6rem;
-
-    @media ${MEDIA.mobile} {
-      width: 100%;
-      height: 4.6rem;
-      margin: 0 0 2.4rem;
-    }
-
-    > input {
-      margin: 0;
-      width: 35rem;
-      max-width: 100%;
-      background: var(--color-background-input) url(${searchIcon}) no-repeat left 1.6rem center/1.6rem;
-      border-radius: 0.6rem 0.6rem 0 0;
-      border: 0;
-      font-size: 1.4rem;
-      line-height: 1;
-      box-sizing: border-box;
-      border-bottom: 0.2rem solid transparent;
-      font-weight: var(--font-weight-normal);
-      padding: 0 1.6rem 0 4.8rem;
-      outline: 0;
-
-      @media ${MEDIA.mobile} {
-        font-size: 1.3rem;
-        width: 100%;
-      }
-
-      &::placeholder {
-        font-size: inherit;
-        color: inherit;
-      }
-
-      &:focus {
-        border-bottom: 0.2rem solid var(--color-text-active);
-        border-color: var(--color-text-active);
-        color: var(--color-text-active);
-      }
-
-      &.error {
-        border-color: var(--color-error);
-      }
-
-      &.warning {
-        border-color: orange;
-      }
-
-      &:disabled {
-        box-shadow: none;
-      }
-    }
-  }
 `
 
 const NoTokensMessage = styled.tr`
@@ -414,23 +343,21 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
 
   return (
     <BalancesWidget>
-      <BalanceTools>
-        <label className="balances-searchTokens">
-          <input
-            placeholder="Search token by Name, Symbol or Address"
-            type="text"
-            value={search}
-            onChange={handleSearch}
-          />
-        </label>
+      <FilterTools
+        resultName="tokens"
+        searchValue={search}
+        handleSearch={handleSearch}
+        showFilter={(!!search || hideZeroBalances) && displayedBalances?.length > 0}
+        dataLength={displayedBalances.length}
+      >
         <label className="balances-hideZero">
           <input type="checkbox" checked={hideZeroBalances} onChange={handleHideZeroBalances} />
           <b>Hide zero balances</b>
         </label>
         <button type="button" className="balances-manageTokens" onClick={toggleModal}>
           Manage Tokens
         </button>
-      </BalanceTools>
+      </FilterTools>
       {error ? (
         <ErrorMsg title="oops..." message="Something happened while loading the balances" />
       ) : (

src/components/FilterTools.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import styled from 'styled-components'
+// Components
+import FormMessage from './TradeWidget/FormMessage'
+// Assets
+import searchIcon from 'assets/img/search.svg'
+// Misc
+import { MEDIA } from 'const'
+
+export const BalanceTools = styled.div<{ $css?: string | false }>`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  align-items: center;
+  order: 0;
+
+  ${FormMessage} {
+    color: var(--color-text-primary);
+    background: var(--color-background-validation-warning);
+    font-size: x-small;
+    margin: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: max-content;
+    padding: 0.1rem 1.6rem 0.1rem 0.5rem;
+    border-radius: 0 1.6rem 0rem 0rem;
+  }
+
+  // label + search input
+  > .balances-searchTokens {
+    display: flex;
+    width: auto;
+    max-width: 100%;
+    position: relative;
+    height: 5.6rem;
+    margin: 1.6rem;
+
+    > input {
+      margin: 0;
+      width: 35rem;
+      max-width: 100%;
+      background: var(--color-background-input) url(${searchIcon}) no-repeat left 1.6rem center/1.6rem;
+      border-radius: 0.6rem 0.6rem 0 0;
+      border: 0;
+      font-size: 1.4rem;
+      line-height: 1;
+      box-sizing: border-box;
+      border-bottom: 0.2rem solid transparent;
+      font-weight: var(--font-weight-normal);
+      padding: 0 1.6rem 0 4.8rem;
+      outline: 0;
+
+      @media ${MEDIA.mobile} {
+        font-size: 1.3rem;
+        width: 100%;
+      }
+
+      &::placeholder {
+        font-size: inherit;
+        color: inherit;
+      }
+
+      &:focus {
+        color: var(--color-text-active);
+      }
+
+      &:focus {
+        border-bottom: 0.2rem solid var(--color-text-active);
+        border-color: var(--color-text-active);
+
+        transition: all 0.2s ease-in-out;
+      }
+
+      &.error {
+        border-color: var(--color-error);
+      }
+
+      &.warning {
+        border-color: orange;
+      }
+
+      &:disabled {
+        box-shadow: none;
+      }
+    }
+    @media ${MEDIA.mobile} {
+      width: 100%;
+      height: 4.6rem;
+      margin: 0 0 2.4rem;
+
+      > ${FormMessage} {
+        bottom: -1.2rem;
+        border-radius: 0 0 1.6rem 0rem;
+      }
+    }
+  }
+  ${({ $css = '' }): string | false => $css}
+`
+
+interface Props {
+  customStyles?: string | false
+  className?: string
+  dataLength: number
+  resultName?: string
+  searchValue: string
+  showFilter: boolean
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const FilterTools: React.FC<Props> = ({
+  children,
+  className,
+  customStyles,
+  dataLength,
+  resultName = 'results',
+  searchValue,
+  showFilter,
+  handleSearch,
+}) => (
+  <BalanceTools className={className} $css={customStyles}>
+    <label className="balances-searchTokens">
+      <input
+        placeholder="Search token by Name, Symbol or Address"
+        type="text"
+        value={searchValue}
+        onChange={handleSearch}
+      />
+      {showFilter && (
+        <FormMessage id="filterLabel">
+          Filter: Showing {dataLength} {dataLength === 1 ? 'result' : resultName}
+        </FormMessage>
+      )}
+    </label>
+    <>{children}</>
+  </BalanceTools>
+)
+
+export default FilterTools

src/components/OrdersWidget/OrderRow.tsx

@@ -4,7 +4,6 @@ import { toast } from 'toastify'
 // types, utils and services
 import { TokenDetails } from 'types'
 import { isOrderUnlimited, isNeverExpiresOrder, calculatePrice, formatPrice, invertPrice } from '@gnosis.pm/dex-js'
-import { getTokenFromExchangeById } from 'services'
 
 // assets
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -27,8 +26,8 @@ import {
   dateToBatchId,
   getTimeRemainingInBatch,
 } from 'utils'
-import { onErrorFactory } from 'utils/onError'
-import { AuctionElement } from 'api/exchange/ExchangeApi'
+
+import { DetailedAuctionElement } from 'api/exchange/ExchangeApi'
 
 import { OrderRowWrapper } from 'components/OrdersWidget/OrderRow.styled'
 import { displayTokenSymbolOrLink } from 'utils/display'
@@ -247,24 +246,19 @@ const Status: React.FC<Pick<Props, 'order' | 'isOverBalance' | 'transactionHash'
   )
 }
 
-async function fetchToken(
-  tokenId: number,
+function fetchToken(
   orderId: string,
-  networkId: number,
+  token: TokenDetails | null,
   setFn: React.Dispatch<React.SetStateAction<TokenDetails | null>>,
   isPendingOrder?: boolean,
-): Promise<void> {
-  const token = await getTokenFromExchangeById({ tokenId, networkId })
-
+): void {
   // It is unlikely the token ID coming form the order won't exist
   // Still, if that ever happens, store null and keep this order hidden
   setFn(token)
 
   // Also, inform the user this token failed and the order is hidden.
   if (!token && !isPendingOrder) {
-    toast.warn(
-      `Token id ${tokenId} used on orderId ${orderId} is not a valid ERC20 token. Order will not be displayed.`,
-    )
+    toast.warn(`Token used on orderId ${orderId} is not a valid ERC20 token. Order will not be displayed.`)
   }
 }
 
@@ -282,7 +276,7 @@ const ResponsiveRowSizeToggler: React.FC<ResponsiveRowSizeTogglerProps> = ({ han
 }
 
 interface Props {
-  order: AuctionElement
+  order: DetailedAuctionElement
   isOverBalance: boolean
   networkId: number
   pending?: boolean
@@ -293,8 +287,6 @@ interface Props {
   isPendingOrder?: boolean
 }
 
-const onError = onErrorFactory('Failed to fetch token')
-
 const OrderRow: React.FC<Props> = props => {
   const {
     order,
@@ -314,16 +306,16 @@ const OrderRow: React.FC<Props> = props => {
   const [openCard, setOpenCard] = useSafeState(true)
 
   useEffect(() => {
-    fetchToken(order.buyTokenId, order.id, networkId, setBuyToken, isPendingOrder).catch(onError)
-    fetchToken(order.sellTokenId, order.id, networkId, setSellToken, isPendingOrder).catch(onError)
+    fetchToken(order.id, order.buyToken as TokenDetails, setBuyToken, isPendingOrder)
+    fetchToken(order.id, order.sellToken as TokenDetails, setSellToken, isPendingOrder)
   }, [isPendingOrder, networkId, order, setBuyToken, setSellToken])
 
   const isUnlimited = isOrderUnlimited(order.priceDenominator, order.priceNumerator)
 
   return (
     sellToken &&
     buyToken && (
-      <OrderRowWrapper className={pending ? 'pending' : ''} $open={openCard}>
+      <OrderRowWrapper data-order-id={order.id} className={pending ? 'pending' : ''} $open={openCard}>
         <DeleteOrder
           isMarkedForDeletion={isMarkedForDeletion}
           toggleMarkedForDeletion={toggleMarkedForDeletion}