Merge pull request #1369 from nervosnetwork/develop

package.json

@@ -28,7 +28,7 @@
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
     "react-outside-click-handler": "^1.3.0",
-    "react-query": "3.39.3",
+    "@tanstack/react-query": "4.0.5",
     "react-resize-detector": "7.1.2",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
@@ -40,7 +40,7 @@
     "@sentry/webpack-plugin": "2.7.1",
     "@testing-library/react": "12.1.5",
     "@types/echarts": "4.9.19",
-    "@types/eslint": "7.29.0",
+    "@types/eslint": "8.44.6",
     "@types/jest": "26.0.24",
     "@types/node": "16.18.58",
     "@types/react": "17.0.65",
@@ -49,11 +49,11 @@
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "^18.0.0",
     "@types/styled-components": "5.1.28",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "create-react-app": "^5.0.0",
-    "eslint": "7.32.0",
+    "eslint": "8.52.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "^2.28.1",

src/App.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { DefaultTheme, ThemeProvider } from 'styled-components'
 import Routers from './routes'
 import Toast from './components/Toast'

src/components/Header/BlockchainComp/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useLayoutEffect, FC, memo } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { isMainnet } from '../../../utils/chain'
 import WhiteDropdownIcon from '../../../assets/white_dropdown.png'
 import BlueDropUpIcon from '../../../assets/blue_drop_up.png'

src/components/NftCollectionInventory/index.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import { useTranslation } from 'react-i18next'

src/components/NftCollectionOverview/index.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { explorerService } from '../../services/ExplorerService'

src/components/NftCollectionTransfers/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'

src/components/QueryResult/index.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react'
-import { UseQueryResult } from 'react-query'
+import { DefinedUseQueryResult } from '@tanstack/react-query'
 import { LOADING_WAITING_TIME } from '../../constants/common'
 import Error from '../Error'
 import Loading from '../Loading'
@@ -12,7 +12,7 @@ export function QueryResult<TData, TError>({
   errorRender,
   loadingRender,
 }: {
-  query: UseQueryResult<TData, TError>
+  query: DefinedUseQueryResult<TData, TError>
   children: (data: TData) => ReactElement
   delayLoading?: boolean
   errorRender?: (err: TError) => ReactElement
@@ -22,10 +22,9 @@ export function QueryResult<TData, TError>({
 
   switch (query.status) {
     case 'error':
-      return errorRender ? errorRender(query.error) : <Error />
+      return errorRender && query.error ? errorRender(query.error) : <Error />
     case 'success':
       return children(query.data)
-    case 'idle':
     case 'loading':
     default:
       return loadingRender ? (

src/components/SortButton/index.tsx

@@ -1,39 +1,27 @@
-import { useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as SortIcon } from '../../assets/sort_icon.svg'
 import styles from './styles.module.scss'
-
-enum SortOrder {
-  Asc = 'asc',
-  Desc = 'desc',
-}
+import { useSortParam } from '../../utils/hook'
 
 /*
  * REFACTOR: could be refactored for https://github.com/Magickbase/ckb-explorer-frontend/pull/8#discussion_r1267484265
  */
-const SortButton: React.FC<{
-  field: string
-}> = ({ field }) => {
-  const { push } = useHistory()
-  const { search, pathname } = useLocation()
-
-  const query = new URLSearchParams(search)
-
-  const [sortKey, sortOrder] = query.get('sort')?.split('.') ?? []
-
-  const isActive = sortKey === field
+export function SortButton<T extends string>({
+  field,
+  sortParam,
+}: {
+  field: T
+  sortParam?: ReturnType<typeof useSortParam<T>>
+}) {
+  const sortParamByQuery = useSortParam()
+  const { sortBy, orderBy, handleSortClick } = sortParam ?? sortParamByQuery
+  const isActive = sortBy === field
 
   const handleClick = () => {
-    const shouldAsc = isActive && sortOrder === SortOrder.Desc
-    push(
-      `${pathname}?${new URLSearchParams({
-        ...Object.fromEntries(query),
-        sort: shouldAsc ? `${field}.${SortOrder.Asc}` : `${field}.${SortOrder.Desc}`,
-      })}`,
-    )
+    handleSortClick(field)
   }
 
   return (
-    <button type="button" className={styles.container} data-order={isActive ? sortOrder : null} onClick={handleClick}>
+    <button type="button" className={styles.container} data-order={isActive ? orderBy : null} onClick={handleClick}>
       <SortIcon />
     </button>
   )

src/components/SortButton/styles.module.scss

@@ -3,9 +3,9 @@
   border: none;
   outline: none;
   background: none;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: text-top;
-  margin: 0 8px;
+  margin-left: 8px;
   cursor: pointer;
 
   &[data-order='desc'] {

src/contexts/providers/dasQuery.tsx

@@ -1,5 +1,5 @@
 import { createContext, FC, useCallback, useContext, useMemo, useRef } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { explorerService } from '../../services/ExplorerService'
 import type { DASAccount, DASAccountMap } from '../../services/ExplorerService/fetcher'
 import { unique } from '../../utils/array'

src/locales/en.json

@@ -560,6 +560,7 @@
       "decimal": "Decimal",
       "search_placeholder": "Transaction / Address",
       "unknown_token": "Unknown Token",
+      "unknown_amount": "Unknown Amount",
       "submit_token_info": "Submit Token Info",
       "unknown_token_description": "The token’s information is incomplete. If you are the owner of this token, please submit token info.",
       "tokens": "Tokens",

src/locales/zh.json

@@ -560,6 +560,7 @@
       "decimal": "小数位",
       "search_placeholder": "交易/地址",
       "unknown_token": "未知资产",
+      "unknown_amount": "未知数量",
       "submit_token_info": "提交代币信息",
       "unknown_token_description": "此代币信息暂时不完整，如果你是此代币的拥有者，请提交代币信息",
       "tokens": "代币",

src/pages/Address/AddressComp.tsx

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios'
 import { useState, useEffect, FC } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Radio } from 'antd'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'

src/pages/Address/index.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import AddressHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'
@@ -58,15 +58,15 @@ export const Address = () => {
         />
 
         <QueryResult query={addressInfoQuery} delayLoading>
-          {data => <AddressOverview address={data} />}
+          {data => (data ? <AddressOverview address={data} /> : <div />)}
         </QueryResult>
 
         <QueryResult query={addressTransactionsQuery} delayLoading>
           {data => (
             <AddressTransactions
               address={address}
-              transactions={data.transactions}
-              transactionsTotal={data.total}
+              transactions={data?.transactions ?? []}
+              transactionsTotal={data?.total ?? 0}
               timeOrderBy={sortBy === 'time' ? orderBy : 'desc'}
             />
           )}

src/pages/BlockDetail/index.tsx

@@ -1,5 +1,5 @@
 import { useParams, useLocation } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import BlockHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'
@@ -66,8 +66,8 @@ export default () => {
               onPageChange={setPage}
               currentPage={currentPage}
               pageSize={pageSize}
-              total={data.total}
-              transactions={data.transactions}
+              total={data?.total ?? 0}
+              transactions={data?.transactions ?? []}
             />
           )}
         </QueryResult>

src/pages/BlockList/index.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useMemo, FC } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { parseSimpleDate } from '../../utils/date'
 import { BlockListPanel, ContentTable, HighLightValue, BlockRewardContainer, BlockRewardPanel } from './styled'
 import Content from '../../components/Content'

src/pages/FeeRateTracker/index.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import styles from './styles.module.scss'
 import Content from '../../components/Content'

src/pages/Home/index.tsx

@@ -1,7 +1,7 @@
 import { FC, memo, useMemo, useRef } from 'react'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useResizeDetector } from 'react-resize-detector'
 import {
   HomeHeaderItemPanel,
@@ -197,7 +197,7 @@ export default () => {
   const tipBlockNumber = useLatestBlockNumber()
 
   const blocksQuery = useQuery(
-    'latest_blocks',
+    ['latest_blocks'],
     async () => {
       // Using the size of list pages to request will be more friendly to the data reuse of the list pages.
       const { data, meta } = await explorerService.api.fetchLatestBlocks(ListPageParams.PageSize)

src/pages/NervosDao/index.tsx

@@ -1,6 +1,6 @@
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import Content from '../../components/Content'
 import { DaoContentPanel, DaoTabBarPanel } from './styled'
 import DaoTransactions from './DaoTransactions'
@@ -90,16 +90,16 @@ export const NervosDao = () => {
               <DaoTransactions
                 currentPage={currentPage}
                 pageSize={pageSize}
-                transactions={data.transactions}
-                total={data.total}
+                transactions={data?.transactions ?? []}
+                total={data?.total ?? 0}
                 onPageChange={setPage}
-                filterNoResult={!!params.filter && data.total === 0}
+                filterNoResult={!!params.filter && data?.total === 0}
               />
             )}
           </QueryResult>
         ) : (
           <QueryResult query={queryNervosDaoDepositors} delayLoading>
-            {data => <DepositorRank depositors={data} filter={params.filter} />}
+            {data => <DepositorRank depositors={data ?? []} filter={params.filter} />}
           </QueryResult>
         )}
       </DaoContentPanel>

src/pages/NftCollectionInfo/index.tsx

@@ -1,5 +1,5 @@
 import { Link, useParams, useHistory } from 'react-router-dom'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Popover } from 'antd'
 import { TFunction, useTranslation } from 'react-i18next'
 import Content from '../../components/Content'

src/pages/NftCollectionInfo/styles.module.scss

@@ -244,13 +244,12 @@
   padding-left: 0.8rem;
 
   svg {
-    height: 1rem;
-    width: 1rem;
+    color: #999;
   }
 
   &[data-is-active='true'] {
-    svg path {
-      fill: var(--primary-color);
+    svg {
+      color: var(--primary-color);
     }
   }
 }