feat: show recommend network and previous network

common/components/ChainItem.tsx

@@ -14,7 +14,8 @@ export const ChainItem: React.FC<IChainItemProps> = ({ chain }) => {
     <>
       <Fieldset className={classnames('chain', { current: currentChainId === chain.chainId })}>
         <Fieldset.Title className="chain-title">
-          {chain.nativeCurrency?.symbol ?? ''}
+          {/* {chain.nativeCurrency?.symbol ?? ''} */}
+          {chain.chain}
           <Tag type="lite" className="chain-tag">
             {chain.network}
           </Tag>

common/components/SearchRecommend.tsx

@@ -0,0 +1,59 @@
+import { Tag, Grid } from '@geist-ui/react'
+import { useEffect, useMemo, useState } from 'react'
+import { EVM_BOX_PERSIST } from '../constants'
+import { useChain } from '../hooks/useChain'
+
+const ChainIdMap = {
+  BSC: '56',
+  HECO: '128',
+  xDAI: '100',
+  FTM: '250',
+}
+const DEFAULT_RECOMMEND = [
+  ChainIdMap.BSC,
+  ChainIdMap.FTM,
+  ChainIdMap.HECO,
+  // ChainIdMap.xDAI,
+]
+
+export const useRecommend = (chains: Chain[]): Chain[] => {
+  const [recommends, setRecommends] = useState<Array<number | string>>(DEFAULT_RECOMMEND)
+  const recommendChains = useMemo(() => {
+    return recommends.map(item => chains.find(chain => String(chain.chainId) === item)).filter(Boolean)
+  }, [recommends])
+
+  useEffect(() => {
+    const prevSelect = window.localStorage.getItem(EVM_BOX_PERSIST) || ''
+
+    setRecommends([...prevSelect.split(','), ...DEFAULT_RECOMMEND])
+  }, [])
+
+  return recommendChains as Chain[]
+}
+
+export const SearchRecommend: React.FC<{ chains: Chain[] }> = ({ chains }) => {
+  const recommends = useRecommend(chains)
+  const [, addEthChain] = useChain()
+
+  return (
+    <div className="search-recommends">
+      <Grid.Container gap={2}>
+        <Grid>
+          <span>{recommends.length > DEFAULT_RECOMMEND.length ? 'Recent' : 'HOT'}: </span>
+        </Grid>
+        {
+          recommends.filter(Boolean).splice(0, 2).map((chain: Chain) => (
+            <Grid key={chain.chainId}>
+              <Tag type="success" onClick={() => addEthChain(chain)} >{chain.chain}({chain.network})</Tag>
+            </Grid>),
+          )
+        }
+      </Grid.Container>
+      <style jsx>{`
+        .search-recommends {
+          margin-top: calc(15.25pt + 1px * 0);
+        }
+      `}</style>
+    </div>
+  )
+}

common/components/index.ts

@@ -1,2 +1,3 @@
 export * from './ChainItem'
 export * from './GithubCorner'
+export * from './SearchRecommend'

common/constants.ts

@@ -0,0 +1 @@
+export const EVM_BOX_PERSIST = 'evm_box_persist'

common/hooks/useChain.tsx

@@ -1,6 +1,7 @@
 import { useToasts } from '@geist-ui/react'
 import { utils } from 'ethers'
 import { useEffect, useState } from 'react'
+import { EVM_BOX_PERSIST } from '../constants'
 import { useDApp } from './useDApp'
 
 const { hexValue } = utils
@@ -34,6 +35,9 @@ export const useChain = (): [number | undefined, (chain: Chain) => void] => {
       setToast({
         text: 'add network successfully!',
       })
+      const prev = window.localStorage.getItem(EVM_BOX_PERSIST)
+      const persist = [chain.chainId, prev].filter(Boolean).join(',')
+      window.localStorage.setItem(EVM_BOX_PERSIST, persist)
     }).catch((e: Error) => {
       setToast({
         text: 'add network failed: ' + e.message,

pages/index.tsx

@@ -8,14 +8,15 @@ import { Search } from '@geist-ui/react-icons'
 import { GetStaticProps } from 'next'
 import { FormEventHandler, useState } from 'react'
 import debounce from 'lodash/debounce'
-import { GithubCorner, ChainItem } from '../common/components'
+import { GithubCorner, ChainItem, SearchRecommend } from '../common/components'
 
 interface HomeProps {
   chains: Chain[]
 }
 
 export const Home: React.FC<HomeProps> = ({ chains }) => {
   const [filter, setFilter] = useState<Chain[]>(chains)
+  const [searchFocused, setSearchFocused] = useState(false)
 
   const searchNetwork: FormEventHandler<HTMLInputElement> = (e) => {
     const searchContent = (e.target as HTMLInputElement).value.trim()
@@ -50,7 +51,16 @@ export const Home: React.FC<HomeProps> = ({ chains }) => {
           <h2>EVM Box</h2>
           <p>Use Your favorite EVM Compatible Network</p>
         </Page.Header>
-        <Input width="100%" icon={<Search />} placeholder="Search Network" onChange={onSearch} clearable />
+        <Input
+          width="100%"
+          placeholder="Search Network"
+          icon={<Search />}
+          onFocus={() => setSearchFocused(true)}
+          onBlur={() => setSearchFocused(false)}
+          onChange={onSearch}
+          clearable
+        />
+        {!searchFocused && <SearchRecommend chains={chains} />}
         <Divider />
 
         <Grid.Container gap={2} className="network__container">