feat(explore-table-filter): add basic text filtering to explore page (#4105)

* feat(explore-table-filter): add basic text filtering to explore page token table

* pr feedback

Author: JFrankfurt

src/components/Explore/SearchBar.tsx

@@ -1,8 +1,11 @@
 import useTheme from 'hooks/useTheme'
+import { useAtom } from 'jotai'
 import { useState } from 'react'
 import { Search } from 'react-feather'
 import styled from 'styled-components/macro'
 
+import { filterStringAtom } from './state'
+
 export const SMALL_MEDIA_BREAKPOINT = '580px'
 
 const StyledSearchBar = styled.div<{ focused: boolean }>`
@@ -38,12 +41,15 @@ const SearchInput = styled.input`
 export default function SearchBar() {
   const theme = useTheme()
   const [isFocused, setFocused] = useState(false)
+  const [filterString, setFilterString] = useAtom(filterStringAtom)
 
   return (
     <StyledSearchBar focused={isFocused}>
       <Search size={20} color={theme.text3} />
       <SearchInput
         type="text"
+        value={filterString}
+        onChange={({ target: { value } }) => setFilterString(value)}
         placeholder="Search token or paste address"
         id="searchBar"
         onFocus={() => setFocused(true)}

src/components/Explore/TokenRow.tsx

@@ -4,10 +4,10 @@ import { useCurrency, useToken } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
 import { TimePeriod, TokenData } from 'hooks/useTopTokens'
 import { useAtom } from 'jotai'
+import { useAtomValue } from 'jotai/utils'
 import { darken } from 'polished'
-import React, { ReactNode } from 'react'
-import { ArrowDownRight, ArrowUpRight, Heart } from 'react-feather'
-import { ArrowDown, ArrowUp } from 'react-feather'
+import { ReactNode, useMemo } from 'react'
+import { ArrowDown, ArrowDownRight, ArrowUp, ArrowUpRight, Heart } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { formatAmount, formatDollarAmount } from 'utils/formatDollarAmt'
@@ -19,7 +19,7 @@ import {
   MOBILE_MEDIA_BREAKPOINT,
   SMALL_MEDIA_BREAKPOINT,
 } from './constants'
-import { favoritesAtom } from './state'
+import { favoritesAtom, filterStringAtom } from './state'
 import { TIME_DISPLAYS } from './TimeSelector'
 
 enum Category {
@@ -481,14 +481,30 @@ export default function LoadedRow({
   listNumber: number
   timePeriod: TimePeriod
 }) {
+  const filterString = useAtomValue(filterStringAtom)
   const token = useToken(tokenAddress)
-  const tokenName = token?.name
-  const tokenSymbol = token?.symbol
+  const currency = useCurrency(tokenAddress)
+  const tokenName = token?.name ?? ''
+  const tokenSymbol = token?.symbol ?? ''
   const tokenData = data[tokenAddress]
   const [favoriteTokens, updateFavoriteTokens] = useAtom(favoritesAtom)
   const theme = useTheme()
   const isFavorited = favoriteTokens.includes(tokenAddress)
 
+  const showRow = useMemo(() => {
+    if (!filterString) {
+      return true
+    }
+    const lowercaseFilterString = filterString.toLowerCase()
+    const addressIncludesFilterString = tokenAddress.toLowerCase().includes(lowercaseFilterString)
+    const nameIncludesFilterString = tokenName.toLowerCase().includes(lowercaseFilterString)
+    const symbolIncludesFilterString = tokenSymbol.toLowerCase().includes(lowercaseFilterString)
+    return nameIncludesFilterString || symbolIncludesFilterString || addressIncludesFilterString
+  }, [filterString, tokenAddress, tokenName, tokenSymbol])
+
+  if (!showRow) {
+    return null
+  }
   const tokenPercentChangeInfo = (
     <>
       {tokenData.delta}%
@@ -530,7 +546,7 @@ export default function LoadedRow({
       listNumber={listNumber}
       tokenInfo={
         <ClickableName to={`tokens/${tokenAddress}`}>
-          <CurrencyLogo currency={useCurrency(tokenAddress)} />
+          <CurrencyLogo currency={currency} />
           <TokenInfoCell>
             <TokenName>{tokenName}</TokenName>
             <TokenSymbol>{tokenSymbol}</TokenSymbol>

src/components/Explore/TokenTable.tsx

@@ -1,7 +1,5 @@
-import { TimePeriod } from 'hooks/useTopTokens'
-import useTopTokens from 'hooks/useTopTokens'
+import useTopTokens, { TimePeriod } from 'hooks/useTopTokens'
 import { useAtom } from 'jotai'
-import React from 'react'
 import styled from 'styled-components/macro'
 
 import { MOBILE_MEDIA_BREAKPOINT } from './constants'
@@ -39,7 +37,7 @@ const TokenRowsContainer = styled.div`
 `
 const LOADING_ROWS = Array(10)
   .fill(0)
-  .map((item, index) => {
+  .map((_item, index) => {
     return <LoadingRow key={`${index}`} />
   })
 

src/components/Explore/state.ts

@@ -1,4 +1,6 @@
+import { atom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 
 export const favoritesAtom = atomWithStorage<string[]>('favorites', [])
 export const showFavoritesAtom = atomWithStorage<boolean>('showFavorites', false)
+export const filterStringAtom = atom<string>('')