Uniswap · JacobInCode · Jan 20, 2021 · Jan 21, 2021 · Jan 21, 2021
diff --git a/package.json b/package.json
@@ -132,6 +132,7 @@
     "graphql-tag": "^2.11.0",
     "moment": "^2.29.1",
     "react-apollo": "^3.1.5",
+    "react-filter-search": "^1.0.11",
     "react-twitter-auth": "^0.0.13",
     "react-twitter-embed": "^3.0.3",
     "react-twitter-widgets": "^1.9.5",

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Search as SearchIcon, X } from 'react-feather'
+
+const StyledSearch = styled.form`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-self: flex-end;
+  width: 100%;
+
+  input {
+    border: none;
+    background-color: transparent;
+    border: 0.5px solid #838383;
+    font-size: 14px;
+    text-align: left;
+    padding: 8px;
+    padding-left: 2rem;
+    width: 100%;
+
+    border: 0.5px solid #838383;
+    border-radius: 8px;
+  }
+  @media screen and (max-width: 414px) {
+    width: 100%;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  input:focus {
+    background-color: white;
+  }
+`
+
+interface SearchProps {
+  handleChange: (event: { target: HTMLInputElement }) => void
+  value: any
+  setValue: (value: string) => void
+}
+
+export default function Search({ handleChange, value, setValue }: SearchProps) {
+  return (
+    <StyledSearch className="search">
+      <SearchIcon
+        color={'#838383'}
+        style={{
+          marginLeft: '8px',
+          pointerEvents: 'none',
+          position: 'absolute'
+        }}
+        size={16}
+      />
+      <input placeholder="Search" type="text" value={value} onChange={e => handleChange(e)} />
+
+      {value !== '' ? (
+        <X
+          style={{
+            marginLeft: '-24px',
+            cursor: 'pointer'
+          }}
+          onClick={() => setValue('')}
+          size={20}
+        />
+      ) : (
+        <X
+          style={{
+            marginLeft: '-24px',
+            cursor: 'pointer',
+            opacity: 0
+          }}
+          onClick={() => setValue('')}
+          size={20}
+        />
+      )}
+    </StyledSearch>
+  )
+}
diff --git a/src/components/governance/DelegateList.tsx b/src/components/governance/DelegateList.tsx
@@ -27,6 +27,9 @@ import { useTokenBalance } from '../../state/wallet/hooks'
 import { useAllIdentities, useTwitterProfileData } from '../../state/social/hooks'
 import { nameOrAddress } from '../../utils/getName'
 import { FETCHING_INTERVAL } from '../../state/governance/reducer'
+import useENSName from '../../hooks/useENSName'
+import FilterResults from 'react-filter-search'
+import Search from '../Search'
 
 const ColumnLabel = styled(TYPE.darkGray)`
   white-space: no-wrap;
@@ -174,6 +177,15 @@ export default function DelegateList({ hideZero }: { hideZero: boolean }) {
 
   const maxPage = maxCount ? Math.floor(maxCount / FETCHING_INTERVAL) + 1 : 1
 
+  const [value, setValue] = useState('')
+
+  function handleChange(event: { target: HTMLInputElement }) {
+    const { value } = event.target
+    console.log('HERE', value)
+
+    setValue(value)
+  }
+
   const DelegateRow = ({ d, index }: { d: DelegateData; index: number }) => {
     const name = nameOrAddress(d.id, allIdentities, true, d.autonomous)
     const votes = parseFloat(parseFloat(d.delegatedVotes.toString()).toFixed(0)).toLocaleString()
@@ -182,6 +194,8 @@ export default function DelegateList({ hideZero }: { hideZero: boolean }) {
 
     const imageURL = d.imageURL ?? twitterData?.profileURL ?? undefined
 
+    const { ENSName } = useENSName(d.id ?? undefined)
+
     return (
       <DataRow>
         <AutoRow gap="10px" style={{ flexWrap: 'nowrap' }}>
@@ -204,7 +218,7 @@ export default function DelegateList({ hideZero }: { hideZero: boolean }) {
               <AutoColumn gap="6px">
                 <TYPE.black style={{ fontWeight: imageURL ? 500 : 400 }}>{name}</TYPE.black>
                 {d.handle || d.autonomous ? (
-                  <TYPE.black fontSize="12px">{shortenAddress(d.id)}</TYPE.black>
+                  <TYPE.black fontSize="12px">{ENSName !== null ? ENSName : shortenAddress(d.id)}</TYPE.black>
                 ) : (
                   <TYPE.black fontSize="12px" style={{ opacity: '0.6' }}>
                     {d.EOA ? '👤 EOA' : ' 📜 Smart Contract'}
@@ -248,54 +262,73 @@ export default function DelegateList({ hideZero }: { hideZero: boolean }) {
   }
 
   const delegateList = useMemo(() => {
-    return chainId && combinedDelegates && activeProtocol
-      ? combinedDelegates
-          // filter for non zero votes
-          .filter(d => (hideZero ? !!(d.delegatedVotesRaw > 1) : true))
-          .slice((page - 1) * FETCHING_INTERVAL, (page - 1) * FETCHING_INTERVAL + FETCHING_INTERVAL)
-          .map((d, i) => {
-            return <DelegateRow d={d} index={i} key={i} />
-          })
-      : null
-  }, [chainId, activeProtocol, combinedDelegates, page, hideZero])
+    return chainId && combinedDelegates && activeProtocol ? (
+      <FilterResults
+        value={value}
+        data={combinedDelegates}
+        renderResults={(results: DelegateData[]) =>
+          results.length === 0 ? (
+            <AutoRow justify="center" height="100px">
+              <TYPE.black textAlign="center" style={{ opacity: '0.6' }}>
+                None found!
+              </TYPE.black>
+            </AutoRow>
+          ) : (
+            results
+              // filter for non zero votes
+              .filter(d => (hideZero ? !!(d.delegatedVotesRaw > 1) : true))
+              .slice((page - 1) * FETCHING_INTERVAL, (page - 1) * FETCHING_INTERVAL + FETCHING_INTERVAL)
+              .map((d, i) => <DelegateRow d={d} index={i} key={i} />)
+          )
+        }
+      />
+    ) : null
+  }, [chainId, activeProtocol, combinedDelegates, page, hideZero, value])
 
   return (
-    <GreyCard padding="1rem 0">
-      <AutoColumn gap="lg">
-        <DataRow>
-          <ColumnLabel>Rank</ColumnLabel>
-          <OnlyAboveLarge>
-            <ColumnLabel textAlign="end">Proposals Voted</ColumnLabel>
-          </OnlyAboveLarge>
-          <OnlyAboveLarge>
-            <ColumnLabel textAlign="end">Vote Weight</ColumnLabel>
-          </OnlyAboveLarge>
-          <ColumnLabel textAlign="end">Total Votes</ColumnLabel>
-        </DataRow>
-        {delegateList ?? (
-          <Row justify="center">
-            <Loader />
-          </Row>
-        )}
-      </AutoColumn>
-      <PageButtons>
-        <div
-          onClick={() => {
-            setPage(page === 1 ? page : page - 1)
-          }}
-        >
-          <Arrow faded={page === 1 ? true : false}>←</Arrow>
-        </div>
-        <TYPE.body>{'Page ' + page + ' of ' + maxPage}</TYPE.body>
-        <div
-          onClick={() => {
-            setPage(page === maxPage ? page : page + 1)
-            page !== maxPage && maxFetched && setMaxFetched(maxFetched + FETCHING_INTERVAL)
-          }}
-        >
-          <Arrow faded={page === maxPage ? true : false}>→</Arrow>
-        </div>
-      </PageButtons>
-    </GreyCard>
+    <>
+      <GreyCard padding="1rem 1rem">
+        <AutoRow justify="center">
+          <Search handleChange={handleChange} value={value} setValue={setValue} />
+        </AutoRow>
+      </GreyCard>
+      <GreyCard padding="1rem 0">
+        <AutoColumn gap="lg">
+          <DataRow>
+            <ColumnLabel>Rank</ColumnLabel>
+            <OnlyAboveLarge>
+              <ColumnLabel textAlign="end">Proposals Voted</ColumnLabel>
+            </OnlyAboveLarge>
+            <OnlyAboveLarge>
+              <ColumnLabel textAlign="end">Vote Weight</ColumnLabel>
+            </OnlyAboveLarge>
+            <ColumnLabel textAlign="end">Total Votes</ColumnLabel>
+          </DataRow>
+          {delegateList ?? (
+            <Row justify="center">
+              <Loader />
+            </Row>
+          )}
+        </AutoColumn>
+        <PageButtons>
+          <div
+            onClick={() => {
+              setPage(page === 1 ? page : page - 1)
+            }}
+          >
+            <Arrow faded={page === 1 ? true : false}>←</Arrow>
+          </div>
+          <TYPE.body>{'Page ' + page + ' of ' + maxPage}</TYPE.body>
+          <div
+            onClick={() => {
+              setPage(page === maxPage ? page : page + 1)
+              page !== maxPage && maxFetched && setMaxFetched(maxFetched + FETCHING_INTERVAL)
+            }}
+          >
+            <Arrow faded={page === maxPage ? true : false}>→</Arrow>
+          </div>
+        </PageButtons>
+      </GreyCard>
+    </>
   )
 }
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -26,3 +26,5 @@ declare module 'multihashes' {
 }
 
 declare module '*.ttf'
+
+declare module 'react-filter-search'
diff --git a/yarn.lock b/yarn.lock
@@ -13200,6 +13200,11 @@ react-feather@^2.0.8:
   dependencies:
     prop-types "^15.7.2"
 
+react-filter-search@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/react-filter-search/-/react-filter-search-1.0.11.tgz#8f38d968c56ca55431bd1353f02a137276181ec1"
+  integrity sha512-iHTUToEyUYbXqb/hNn8KM4zo0NtbGamEKuBJc0kvnXyJZBCUbkD9TQW+DaeA3wwV0sRZ0r64MXIEHJWHPw+Omw==
+
 react-focus-lock@^2.3.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.0.tgz#12e3a3940e897c26e2c2a0408cd25ea3c99b3709"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,3 +26,5 @@ declare module 'multihashes' {
		}

		declare module '*.ttf'

		declare module 'react-filter-search'