feat: mvp

izayl · Apr 12, 2021 · dcf1166 · dcf1166
1 parent e9beffd
commit dcf1166
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 6 deletions.
diff --git a/common/components/ChainItem.tsx b/common/components/ChainItem.tsx
@@ -45,7 +45,7 @@ export const ChainItem: React.FC<IChainItemProps> = ({ chain }) => {
               currentChainId === chain.chainId
                 ? 'current network'
                 : enable && (
-                  <Button auto size="mini" onClick={() => addEthChain(chain)}>
+                  <Button type="secondary" ghost size="mini" onClick={() => addEthChain(chain)}>
                   Add
                   </Button>
                 )
@@ -59,8 +59,8 @@ export const ChainItem: React.FC<IChainItemProps> = ({ chain }) => {
             width: 100%;
           }
 
-          :global(.chain .current) {
-            background: pink;
+          :global(.current .content) {
+            background: antiquewhite;
           }
           :global(.chain-title) {
             display: flex !important;

diff --git a/common/hooks/useDApp.tsx b/common/hooks/useDApp.tsx
@@ -9,7 +9,7 @@ export const useDApp = () => {
       setEnable(false)
       const action = {
         name: 'download',
-        handler: () => window.open('tbd'),
+        handler: () => window.open('//token.im/download?index=0'),
       }
       return setToast({
         text: 'Your current browser is not support dapp, trying use imToken or MetaMask',

diff --git a/package.json b/package.json
@@ -14,12 +14,14 @@
     "classnames": "^2.3.1",
     "ethers": "^5.1.0",
     "inter-ui": "^3.18.0",
+    "lodash": "^4.17.21",
     "next": "latest",
     "react": "^16.13.0",
     "react-dom": "^16.13.0"
   },
   "devDependencies": {
     "@izayl/eslint-config": "^0.3.0",
+    "@types/lodash": "^4.14.168",
     "@types/node": "12.0.12",
     "@types/react": "^16",
     "@types/react-dom": "^16",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,24 +6,53 @@ import {
 } from '@geist-ui/react'
 import { Search } from '@geist-ui/react-icons'
 import { GetStaticProps } from 'next'
+import { FormEventHandler, useState } from 'react'
+import debounce from 'lodash/debounce'
 import { ChainItem } from '../common/components/ChainItem'
 
 interface HomeProps {
   chains: Chain[]
 }
 
 export const Home: React.FC<HomeProps> = ({ chains }) => {
+  const [filter, setFilter] = useState<Chain[]>(chains)
+
+  const searchNetwork: FormEventHandler<HTMLInputElement> = (e) => {
+    const searchContent = (e.target as HTMLInputElement).value.trim()
+    console.log(searchContent, 's')
+    if (!searchContent) {
+      setFilter(chains)
+    } else {
+      const searchResult = filter.filter(chain => {
+        const { name, shortName, chain: chainText, network } = chain
+        return [name, shortName, chainText, network].map(item => item.toLowerCase()).some(item => item.indexOf(searchContent.toLowerCase()) > -1)
+      })
+      setFilter(searchResult)
+    }
+  }
+
+  const debouncedSearch = debounce(searchNetwork, 500)
+
+  const onSearch: FormEventHandler<HTMLInputElement> = (e) => {
+    if (e.persist) {
+      e.persist()
+      debouncedSearch(e)
+    } else {
+      setFilter(chains)
+    }
+  }
+
   return (
     <div className="chainlist">
       <Page>
         <Page.Header>
           <h2>Add Network</h2>
         </Page.Header>
-        <Input width="100%" icon={<Search />} placeholder="Search Network" />
+        <Input width="100%" icon={<Search />} placeholder="Search Network" onChange={onSearch} clearable />
         <Divider />
 
         <Grid.Container gap={2} className="network__container">
-          {chains.map((chain: Chain) => (
+          {filter.map((chain: Chain) => (
             <Grid sm={12} xs={24} key={chain.chainId}>
               <ChainItem chain={chain} />
             </Grid>

diff --git a/yarn.lock b/yarn.lock
@@ -540,6 +540,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.168":
+  version "4.14.168"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/node@*":
   version "14.14.37"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"