From a59bfda757ab94c923c4d8e9d6c3ad496314c3c6 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 1 Oct 2023 01:59:09 +0800
Subject: [PATCH 1/9] chore(deps): update dependency @types/echarts to v4.9.19
 (#110)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json |  2 +-
 yarn.lock    | 20 ++++----------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 2e7f37db7..0881a7210 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@sentry/webpack-plugin": "2.7.1",
     "@testing-library/react": "12.1.5",
-    "@types/echarts": "4.9.18",
+    "@types/echarts": "4.9.19",
     "@types/eslint": "7.29.0",
     "@types/jest": "26.0.24",
     "@types/node": "16.18.50",
diff --git a/yarn.lock b/yarn.lock
index a77565d7f..279207d2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2560,10 +2560,10 @@
   resolved "https://registry.yarnpkg.com/@types/deep-freeze-strict/-/deep-freeze-strict-1.1.0.tgz#447a6a2576191344aa42310131dd3df5c41492c4"
   integrity sha512-fILflsS66kGQ4iIBzYoxuQCWK1wQdy/ooguTofUk0KSxA+G5ZzH8WdU8mf6IU+5cMBW+j9u+eh+7kv63R3O9Tw==
 
-"@types/echarts@4.9.18":
-  version "4.9.18"
-  resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.9.18.tgz#6a789192ae7e958e5e11b1efdeab0794a54d0a31"
-  integrity sha512-Qav4M1i1qmPemMywMnDGIbvIBB/9pdrDKLI1dyMho4Yz/ldCB3ry2zGeH0UhAhgmaoPgwYrCDo8xd1UeByz+rw==
+"@types/echarts@4.9.19":
+  version "4.9.19"
+  resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.9.19.tgz#6c50ccde9f4458edfc36a9c78f81511ec1853941"
+  integrity sha512-mtQzTmBFLQ1tyAmP667OTr7oOceyfqHRMa0tkIj9FBOKYY0ggG6OGE4AfUtDw2gOuPEEw4vzD+y0OJWKi1IZHQ==
   dependencies:
     "@types/zrender" "*"
 
@@ -2910,23 +2910,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
-"@types/three@0.149.0":
-  version "0.149.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.149.0.tgz#f48c03ffcf35b2d196f3532b51bc845e96f6090e"
-  integrity sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg==
-  dependencies:
-    "@types/webxr" "*"
-
 "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
-"@types/webxr@*":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.1.tgz#4908349419104bd476a4252d04e4c3abb496748d"
-  integrity sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ==
-
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"

From becc58f9dae99ea2bb7f7a5f9461f3f982b14bfd Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 7 Oct 2023 10:04:16 +0700
Subject: [PATCH 2/9] chore(deps): update dependency @types/node to v16.18.58
 (#111)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0881a7210..cbabedf19 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@types/echarts": "4.9.19",
     "@types/eslint": "7.29.0",
     "@types/jest": "26.0.24",
-    "@types/node": "16.18.50",
+    "@types/node": "16.18.58",
     "@types/react": "17.0.65",
     "@types/react-dom": "17.0.20",
     "@types/react-outside-click-handler": "^1.3.0",
diff --git a/yarn.lock b/yarn.lock
index 279207d2a..7d2ec28f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2741,10 +2741,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.11.0.tgz#390ea202539c61c8fa6ba4428b57e05bc36dc47b"
   integrity sha512-uM4mnmsIIPK/yeO+42F2RQhGUIs39K2RFmugcJANppXe6J1nvH87PvzPZYpza7Xhhs8Yn9yIAVdLZ84z61+0xQ==
 
-"@types/node@16.18.50":
-  version "16.18.50"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.50.tgz#93003cf0251a2ecd26dad6dc757168d648519805"
-  integrity sha512-OiDU5xRgYTJ203v4cprTs0RwOCd5c5Zjv+K5P8KSqfiCsB1W3LcamTUMcnQarpq5kOYbhHfSOgIEJvdPyb5xyw==
+"@types/node@16.18.58":
+  version "16.18.58"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.58.tgz#bf66f63983104ed57c754f4e84ccaf16f8235adb"
+  integrity sha512-YGncyA25/MaVtQkjWW9r0EFBukZ+JulsLcVZBlGUfIb96OBMjkoRWwQo5IEWJ8Fj06Go3GHw+bjYDitv6BaGsA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"

From 2e5634cbee06211e5c343640ef4ea300d04682c2 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 7 Oct 2023 12:58:28 +0700
Subject: [PATCH 3/9] chore(deps): update dependency @types/styled-components
 to v5.1.28 (#112)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index cbabedf19..b660af19a 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/styled-components": "5.1.26",
+    "@types/styled-components": "5.1.28",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "5.62.0",
     "antd-dayjs-webpack-plugin": "^1.0.6",
diff --git a/yarn.lock b/yarn.lock
index 7d2ec28f7..6cb83ded4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2901,10 +2901,10 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/styled-components@5.1.26":
-  version "5.1.26"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af"
-  integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==
+"@types/styled-components@5.1.28":
+  version "5.1.28"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.28.tgz#3b86c4d373924ff6976de788843cab445d9ab15b"
+  integrity sha512-nu0VKNybkjvUqJAXWtRqKd7j3iRUl8GbYSTvZNuIBJcw/HUp1Y4QUXNLlj7gcnRV/t784JnHAlvRnSnE3nPbJA==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"

From b0d73bbe6982da0354b8940f133ee463d7ebd389 Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Sat, 7 Oct 2023 13:58:17 +0800
Subject: [PATCH 4/9] feat(typeId): show type id from the property "id" in
 response (#105)

* feat(typeId): show type id from the property "id" in response

* feat(typeId): use the same style as code hash
---
 src/pages/Script/index.tsx          | 8 +++-----
 src/pages/Script/styles.module.scss | 5 +++++
 src/pages/Script/types.ts           | 3 +--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/pages/Script/index.tsx b/src/pages/Script/index.tsx
index 907d56bf1..f3a179da1 100644
--- a/src/pages/Script/index.tsx
+++ b/src/pages/Script/index.tsx
@@ -39,7 +39,7 @@ const scriptHashNameMap = new Map<string, string>(
 )
 
 const getScriptInfo = (scriptInfo: ScriptInfo) => {
-  const { scriptName, scriptType, typeId, codeHash, hashType, capacityOfDeployedCells, capacityOfReferringCells } =
+  const { scriptName, scriptType, id, codeHash, hashType, capacityOfDeployedCells, capacityOfReferringCells } =
     scriptInfo
   const items: OverviewItemData[] = [
     {
@@ -58,8 +58,7 @@ const getScriptInfo = (scriptInfo: ScriptInfo) => {
     },
     {
       title: i18n.t('scripts.type_id'),
-      tooltip: i18n.t('glossary.type_id'),
-      content: typeId || '-',
+      content: id ? <CodeHashMessage codeHash={id} /> : '-',
     },
     {
       title: i18n.t('scripts.code_hash'),
@@ -123,10 +122,9 @@ export const ScriptPage = () => {
     status === 'success' && resp
       ? toCamelcase<Response.Response<ScriptInfo>>(resp?.data)!.data
       : ({
-          id: 0,
+          id: '-',
           scriptName: '',
           scriptType: '',
-          typeId: '',
           codeHash,
           hashType,
           capacityOfDeployedCells: '0',
diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss
index a4198a024..3f6f7ea26 100644
--- a/src/pages/Script/styles.module.scss
+++ b/src/pages/Script/styles.module.scss
@@ -143,3 +143,8 @@
 .hashType {
   text-transform: capitalize;
 }
+
+.typeId {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/pages/Script/types.ts b/src/pages/Script/types.ts
index 4df243d3a..e3bcee0f4 100644
--- a/src/pages/Script/types.ts
+++ b/src/pages/Script/types.ts
@@ -1,8 +1,7 @@
 export interface ScriptInfo {
-  id: number
+  id: string
   scriptName: string
   scriptType: string
-  typeId: string
   codeHash: string
   hashType: 'type' | 'data'
   capacityOfDeployedCells: string

From 8d19adc9ee9f820f97ef8bab87d6118d36fe4180 Mon Sep 17 00:00:00 2001
From: WhiteMind <WhiteMind@qq.com>
Date: Sat, 7 Oct 2023 14:56:54 +0800
Subject: [PATCH 5/9] Refactor: Remove useAppState and the global state it
 contains, implement in other ways (#103)

* refactor: remove statistics and app.tipBlockNumber from AppState

* refactor: remove primaryColor, secondaryColor, and chartColor from State.App

* refactor: remove language from State.App

* refactor: remove toast from State.App

* refactor: remove app from AppState

* refactor: remove maintenanceAlertVisible from State.Components

* refactor: remove headerSearchBarVisible from State.Components

* refactor: remove the last global state mobileMenuVisible

* feat: remove MaintenanceMsg in the Alert component

* feat: stop using the reorgStartedAt property
---
 package.json                                  |   1 +
 src/App.tsx                                   |  13 +-
 src/components/Alert/index.tsx                |  78 ----------
 src/components/Alert/styled.tsx               |  58 -------
 src/components/Card/HashCard/index.tsx        |  19 +--
 src/components/Content/index.tsx              |   8 +-
 src/components/Dropdown/Language/index.tsx    |   9 --
 .../Header/BlockchainComp/index.tsx           |   8 +-
 src/components/Header/LanguageComp/index.tsx  |  52 +------
 src/components/Header/MobileMenu/index.tsx    |   8 +-
 src/components/Header/MobileMenu/styled.tsx   |   8 +-
 src/components/Header/SearchComp/index.tsx    |  14 +-
 src/components/Header/index.module.scss       |  12 ++
 src/components/Header/index.tsx               | 141 +++++++++++-------
 src/components/Header/styled.tsx              |   6 -
 src/components/MaintainAlert/index.tsx        |  13 ++
 .../styles.module.scss                        |   0
 src/components/Search/index.tsx               |  20 +--
 src/components/Sheet/index.tsx                |  39 ++---
 src/components/Sheet/styled.tsx               |  31 +---
 src/components/Text/CopyTooltipText/index.tsx |  12 +-
 src/components/Toast/index.tsx                |  25 +++-
 .../TransactionItemCell/index.tsx             |   6 +-
 src/constants/cache.ts                        |   1 -
 src/constants/common.ts                       |   1 -
 src/contexts/actions/index.ts                 |  23 ---
 src/contexts/providers/hook.ts                |  43 +-----
 src/contexts/providers/index.tsx              |  28 ----
 src/contexts/reducer/app.ts                   |  73 ---------
 src/contexts/reducer/component.ts             |  37 -----
 src/contexts/reducer/index.ts                 |  30 ----
 src/contexts/reducer/page.ts                  |  20 ---
 src/contexts/states/app.ts                    |  26 ----
 src/contexts/states/components.ts             |   7 -
 src/contexts/states/index.ts                  |  14 --
 src/contexts/states/statistics.ts             |  17 ---
 src/locales/en.json                           |   2 -
 src/locales/zh.json                           |   2 -
 src/pages/BlockDetail/BlockComp.tsx           |   6 +-
 src/pages/Home/index.tsx                      |  44 ++----
 src/pages/NervosDao/DaoOverview/index.tsx     |  15 +-
 src/pages/Script/ScriptsComp.tsx              |  12 +-
 src/pages/SimpleUDT/index.tsx                 |   9 +-
 .../activities/AddressBalanceRank.tsx         |   2 +-
 .../activities/AddressCount.tsx               |   2 +-
 .../activities/BalanceDistribution.tsx        |   2 +-
 .../StatisticsChart/activities/CellCount.tsx  |   2 +-
 .../activities/TransactionCount.tsx           |   2 +-
 .../activities/TxFeeHistory.tsx               |   2 +-
 .../block/AverageBlockTime.tsx                |   2 +-
 .../block/BlockTimeDistribution.tsx           |   2 +-
 .../block/EpochTimeDistribution.tsx           |   2 +-
 src/pages/StatisticsChart/common/index.tsx    |   9 +-
 .../StatisticsChart/mining/Difficulty.tsx     |   2 +-
 .../mining/DifficultyHashRate.tsx             |   2 +-
 .../mining/DifficultyUncleRateEpoch.tsx       |   2 +-
 src/pages/StatisticsChart/mining/HashRate.tsx |   2 +-
 .../mining/MinerAddressDistribution.tsx       |   2 +-
 .../mining/MinerVersionDistribution.tsx       |   2 +-
 .../StatisticsChart/mining/UncleRate.tsx      |   2 +-
 .../monetary/AnnualPercentageCompensation.tsx |   2 +-
 .../monetary/InflationRate.tsx                |   2 +-
 .../StatisticsChart/monetary/Liquidity.tsx    |   2 +-
 .../monetary/SecondaryIssuance.tsx            |   2 +-
 .../StatisticsChart/monetary/TotalSupply.tsx  |   2 +-
 .../nervosDao/CirculationRatio.tsx            |   2 +-
 .../nervosDao/NewDaoDeposit.tsx               |   2 +-
 .../nervosDao/TotalDaoDeposit.tsx             |   2 +-
 .../TransactionCellScript/index.tsx           |  28 ++--
 src/pages/Transaction/TransactionComp.tsx     |   6 +-
 src/pages/Transaction/index.tsx               |   6 -
 src/routes/index.tsx                          |  46 +-----
 src/service/app/address.ts                    |  16 --
 src/service/app/alert.ts                      |  24 ---
 src/service/app/blockchain.ts                 |  31 +---
 src/service/app/statistics.ts                 |  18 ---
 src/service/http/fetcher.ts                   |   5 -
 src/service/http/interceptors.ts              |  47 ++----
 src/services/ExplorerService/hooks.ts         |  10 ++
 src/services/ExplorerService/index.ts         |  67 +++++++++
 src/types/index.d.ts                          |  57 +------
 src/utils/state.ts                            |  44 ++++++
 yarn.lock                                     |   5 +
 83 files changed, 426 insertions(+), 1032 deletions(-)
 delete mode 100644 src/components/Alert/index.tsx
 delete mode 100644 src/components/Alert/styled.tsx
 create mode 100644 src/components/MaintainAlert/index.tsx
 rename src/components/{Alert => MaintainAlert}/styles.module.scss (100%)
 delete mode 100644 src/contexts/actions/index.ts
 delete mode 100644 src/contexts/providers/index.tsx
 delete mode 100644 src/contexts/reducer/app.ts
 delete mode 100644 src/contexts/reducer/component.ts
 delete mode 100644 src/contexts/reducer/index.ts
 delete mode 100644 src/contexts/reducer/page.ts
 delete mode 100644 src/contexts/states/app.ts
 delete mode 100644 src/contexts/states/components.ts
 delete mode 100644 src/contexts/states/index.ts
 delete mode 100644 src/contexts/states/statistics.ts
 delete mode 100644 src/service/app/address.ts
 delete mode 100644 src/service/app/alert.ts
 delete mode 100644 src/service/app/statistics.ts
 create mode 100644 src/services/ExplorerService/hooks.ts
 create mode 100644 src/services/ExplorerService/index.ts
 create mode 100644 src/utils/state.ts

diff --git a/package.json b/package.json
index b660af19a..866ed5a75 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "moment": "2.29.4",
+    "observable-hooks": "^4.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
diff --git a/src/App.tsx b/src/App.tsx
index 15c2baa65..98e98e535 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,10 +4,10 @@ import { ThemeProvider } from 'styled-components'
 import 'antd/dist/antd.css'
 import Routers from './routes'
 import Toast from './components/Toast'
-import withProviders, { useAppState } from './contexts/providers'
 import useInitApp from './contexts/providers/hook'
 import { isMainnet } from './utils/chain'
 import { DASQueryContextProvider } from './contexts/providers/dasQuery'
+import { getPrimaryColor, getSecondaryColor } from './constants/common'
 
 const appStyle = {
   width: '100vw',
@@ -17,15 +17,14 @@ const appStyle = {
 
 const queryClient = new QueryClient()
 
-const App = withProviders(() => {
+const App = () => {
   useInitApp()
-  const { app } = useAppState()
   const theme = useMemo(
     () => ({
-      primary: app.primaryColor,
-      secondary: app.secondaryColor,
+      primary: getPrimaryColor(),
+      secondary: getSecondaryColor(),
     }),
-    [app.primaryColor, app.secondaryColor],
+    [],
   )
 
   return (
@@ -40,6 +39,6 @@ const App = withProviders(() => {
       </div>
     </ThemeProvider>
   )
-})
+}
 
 export default App
diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx
deleted file mode 100644
index 1632c9b75..000000000
--- a/src/components/Alert/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useEffect } from 'react'
-import { useAppState, useDispatch } from '../../contexts/providers'
-import { AlertPanel } from './styled'
-import i18n, { currentLanguage } from '../../utils/i18n'
-import { dayjs, parseSimpleDateNoSecond } from '../../utils/date'
-import SimpleButton from '../SimpleButton'
-import { ComponentActions } from '../../contexts/actions'
-import { AppCachedKeys } from '../../constants/cache'
-import { IS_MAINTAINING } from '../../constants/common'
-import styles from './styles.module.scss'
-
-const FIFTEEN_MINUTES = 15 * 60 * 1000
-
-const Alert = () => {
-  const dispatch = useDispatch()
-  const {
-    app: { appErrors },
-    components: { maintenanceAlertVisible },
-    statistics: { reorgStartedAt },
-  } = useAppState()
-  const [startTime, endTime] = appErrors[2].message
-
-  const hideAlert = () => {
-    sessionStorage.setItem(AppCachedKeys.MaintenanceAlert, 'hide')
-    dispatch({
-      type: ComponentActions.UpdateMaintenanceAlertVisible,
-      payload: {
-        maintenanceAlertVisible: false,
-      },
-    })
-  }
-
-  useEffect(() => {
-    const hideMaintenance = sessionStorage.getItem(AppCachedKeys.MaintenanceAlert) === 'hide'
-    if (startTime && endTime && !hideMaintenance) {
-      dispatch({
-        type: ComponentActions.UpdateMaintenanceAlertVisible,
-        payload: {
-          maintenanceAlertVisible: true,
-        },
-      })
-    }
-  }, [startTime, endTime, dispatch])
-
-  if (reorgStartedAt && new Date(reorgStartedAt).getTime() + FIFTEEN_MINUTES < new Date().getTime()) {
-    return (
-      <div className={styles.container}>
-        {i18n.t('toast.handling-reorg', {
-          time: dayjs(reorgStartedAt).format('YYYY-MM-DD HH:mm:ss'),
-        })}
-      </div>
-    )
-  }
-
-  if (IS_MAINTAINING) {
-    return <div className={styles.container}>{i18n.t('error.maintain')}</div>
-  }
-
-  return maintenanceAlertVisible ? (
-    <AlertPanel isEn={currentLanguage() === 'en'}>
-      <div>
-        <span>
-          {i18n.t('toast.maintenance', {
-            start: parseSimpleDateNoSecond(startTime, '-', false),
-            end: parseSimpleDateNoSecond(endTime, '-', false),
-          })}
-        </span>
-        <div className="alert__dismiss__panel">
-          <SimpleButton className="alert__dismiss" onClick={() => hideAlert()}>
-            {i18n.t('toast.dismiss')}
-          </SimpleButton>
-        </div>
-      </div>
-    </AlertPanel>
-  ) : null
-}
-
-export default Alert
diff --git a/src/components/Alert/styled.tsx b/src/components/Alert/styled.tsx
deleted file mode 100644
index b840dac59..000000000
--- a/src/components/Alert/styled.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import styled from 'styled-components'
-
-export const AlertPanel = styled.div`
-  position: sticky;
-  top: 0;
-  z-index: 9000;
-
-  > div {
-    width: 100%;
-    height: 48px;
-    background: #fa8f00;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 120px;
-    color: white;
-    font-size: 14px;
-    font-weight: 450;
-
-    @media (max-width: 1440px) {
-      padding: 0 100px;
-    }
-
-    @media (max-width: 1200px) {
-      padding: 0 45px;
-      height: 64px;
-    }
-
-    @media (max-width: 750px) {
-      padding: 8px 18px;
-      height: ${(props: { isEn: boolean }) => (props.isEn ? '120px' : '100px')};
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .alert__dismiss__panel {
-    @media (max-width: 750px) {
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
-  .alert__dismiss {
-    width: 100px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 2px;
-    border: solid 1px #fff;
-    text-align: center;
-
-    @media (max-width: 1200px) {
-      margin-left: 30px;
-    }
-  }
-`
diff --git a/src/components/Card/HashCard/index.tsx b/src/components/Card/HashCard/index.tsx
index 4892931ee..7c3e50002 100644
--- a/src/components/Card/HashCard/index.tsx
+++ b/src/components/Card/HashCard/index.tsx
@@ -5,9 +5,7 @@ import CopyIcon from '../../../assets/copy.png'
 import i18n from '../../../utils/i18n'
 import { v2AxiosIns } from '../../../service/http/fetcher'
 import { copyElementValue } from '../../../utils/util'
-import { AppActions } from '../../../contexts/actions'
 import SmallLoading from '../../Loading/SmallLoading'
-import { useDispatch } from '../../../contexts/providers'
 import { useIsMobile, useNewAddr, useDeprecatedAddr } from '../../../utils/hook'
 import SimpleButton from '../../SimpleButton'
 import { ReactComponent as OpenInNew } from '../../../assets/open_in_new.svg'
@@ -16,6 +14,7 @@ import { HashCardPanel, LoadingPanel } from './styled'
 import styles from './styles.module.scss'
 import AddressText from '../../AddressText'
 import { useDASAccount } from '../../../contexts/providers/dasQuery'
+import { useSetToast } from '../../Toast'
 
 const DASInfo: FC<{ address: string }> = ({ address }) => {
   const alias = useDASAccount(address)
@@ -50,7 +49,7 @@ export default ({
   showDASInfoOnHeader?: boolean | string
 }) => {
   const isMobile = useIsMobile()
-  const dispatch = useDispatch()
+  const setToast = useSetToast()
 
   const isTx = i18n.t('transaction.transaction') === title
   const newAddr = useNewAddr(hash)
@@ -59,12 +58,7 @@ export default ({
 
   const handleExportTxClick = async () => {
     const res = await v2AxiosIns(`transactions/${hash}/raw`).catch(error => {
-      dispatch({
-        type: AppActions.ShowToastMessage,
-        payload: {
-          message: error.message,
-        },
-      })
+      setToast({ message: error.message })
     })
     if (!res) return
 
@@ -110,12 +104,7 @@ export default ({
               className="hash__copy_icon"
               onClick={() => {
                 copyElementValue(document.getElementById('hash__value'))
-                dispatch({
-                  type: AppActions.ShowToastMessage,
-                  payload: {
-                    message: i18n.t('common.copied'),
-                  },
-                })
+                setToast({ message: i18n.t('common.copied') })
               }}
             >
               {!loading && <img src={CopyIcon} alt="copy" />}
diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 2e53749b5..9846cd689 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -1,18 +1,12 @@
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { useAppState } from '../../contexts/providers'
-import MobileMenu from '../Header/MobileMenu'
 
 const ContentPanel = styled.div`
   width: 100%;
   overflow-x: hidden;
   flex: 1;
-  margin-top: var(--navbar-height);
   background: #ededed;
 `
 export default ({ children, style }: { children: ReactNode; style?: any }) => {
-  const {
-    components: { mobileMenuVisible },
-  } = useAppState()
-  return <ContentPanel style={style}>{mobileMenuVisible ? <MobileMenu /> : children}</ContentPanel>
+  return <ContentPanel style={style}>{children}</ContentPanel>
 }
diff --git a/src/components/Dropdown/Language/index.tsx b/src/components/Dropdown/Language/index.tsx
index cf3df9ac0..4b1b4d7d3 100644
--- a/src/components/Dropdown/Language/index.tsx
+++ b/src/components/Dropdown/Language/index.tsx
@@ -1,6 +1,4 @@
 import i18n, { currentLanguage, changeLanguage } from '../../../utils/i18n'
-import { useDispatch } from '../../../contexts/providers'
-import { AppActions } from '../../../contexts/actions'
 import { LanguagePanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 
@@ -12,19 +10,12 @@ export const languageText = (lan: 'en' | 'zh' | null, reverse?: boolean) => {
 }
 
 export default ({ setShow, left, top }: { setShow: Function; left: number; top: number }) => {
-  const dispatch = useDispatch()
   const hideDropdown = () => {
     setShow(false)
   }
   const handleLanguage = () => {
     hideDropdown()
     changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
-    dispatch({
-      type: AppActions.UpdateAppLanguage,
-      payload: {
-        language: currentLanguage() === 'en' ? 'zh' : 'en',
-      },
-    })
   }
   return (
     <LanguagePanel left={left} top={top} onMouseLeave={hideDropdown}>
diff --git a/src/components/Header/BlockchainComp/index.tsx b/src/components/Header/BlockchainComp/index.tsx
index a0c554aff..66ead43ce 100644
--- a/src/components/Header/BlockchainComp/index.tsx
+++ b/src/components/Header/BlockchainComp/index.tsx
@@ -4,7 +4,6 @@ import { isMainnet } from '../../../utils/chain'
 import WhiteDropdownIcon from '../../../assets/white_dropdown.png'
 import BlueDropUpIcon from '../../../assets/blue_drop_up.png'
 import GreenDropUpIcon from '../../../assets/green_drop_up.png'
-import { useAppState } from '../../../contexts/providers'
 import { HeaderBlockchainPanel, MobileSubMenuPanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 import ChainDropdown from '../../Dropdown/ChainType'
@@ -27,15 +26,12 @@ const handleVersion = (nodeVersion: string) => {
 }
 
 const BlockchainDropdown: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
-  const {
-    app: { language },
-  } = useAppState()
   const [showChainType, setShowChainType] = useState(false)
   const [chainTypeLeft, setChainTypeLeft] = useState(0)
   const [chainTypeTop, setChainTypeTop] = useState(0)
 
   useLayoutEffect(() => {
-    if (showChainType && language) {
+    if (showChainType) {
       const chainDropdownComp = document.getElementById('header__blockchain__panel')
       if (chainDropdownComp) {
         const chainDropdownReact = chainDropdownComp.getBoundingClientRect()
@@ -45,7 +41,7 @@ const BlockchainDropdown: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
         }
       }
     }
-  }, [showChainType, language])
+  }, [showChainType])
   return (
     <HeaderBlockchainPanel
       id="header__blockchain__panel"
diff --git a/src/components/Header/LanguageComp/index.tsx b/src/components/Header/LanguageComp/index.tsx
index 9fbd85465..0665a6f5e 100644
--- a/src/components/Header/LanguageComp/index.tsx
+++ b/src/components/Header/LanguageComp/index.tsx
@@ -1,6 +1,4 @@
-import { useState, useLayoutEffect, memo } from 'react'
-import { useIsMobile } from '../../../utils/hook'
-import { useAppState, useDispatch } from '../../../contexts/providers'
+import { useState, useLayoutEffect, FC } from 'react'
 import i18n, { currentLanguage, changeLanguage } from '../../../utils/i18n'
 import { HeaderLanguagePanel, MobileSubMenuPanel } from './styled'
 import SimpleButton from '../../SimpleButton'
@@ -11,50 +9,18 @@ import GreenDropUpIcon from '../../../assets/green_drop_up.png'
 import { isMainnet } from '../../../utils/chain'
 import LanDropdown, { languageText } from '../../Dropdown/Language'
 
-import { AppDispatch } from '../../../contexts/reducer'
-import { ComponentActions, AppActions } from '../../../contexts/actions'
-
 const getDropdownIcon = (showDropdown: boolean) => {
   if (!showDropdown) return WhiteDropdownIcon
   return isMainnet() ? GreenDropUpIcon : BlueDropUpIcon
 }
 
-const languageAction = (dispatch: AppDispatch) => {
-  changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
-  dispatch({
-    type: AppActions.UpdateAppLanguage,
-    payload: {
-      language: currentLanguage() === 'en' ? 'zh' : 'en',
-    },
-  })
-  dispatch({
-    type: ComponentActions.UpdateHeaderMobileMenuVisible,
-    payload: {
-      mobileMenuVisible: false,
-    },
-  })
-}
-
-const hideMobileMenu = (dispatch: AppDispatch) => {
-  dispatch({
-    type: ComponentActions.UpdateHeaderMobileMenuVisible,
-    payload: {
-      mobileMenuVisible: false,
-    },
-  })
-}
-
-const LanguageDropdown = () => {
-  const {
-    app: { language },
-  } = useAppState()
-
+export const LanguageDropdown = () => {
   const [showLanguage, setShowLanguage] = useState(false)
   const [languageLeft, setLanguageLeft] = useState(0)
   const [languageTop, setLanguageTop] = useState(0)
 
   useLayoutEffect(() => {
-    if (showLanguage && language) {
+    if (showLanguage) {
       const languageDropdownComp = document.getElementById('header__language__panel')
       if (languageDropdownComp) {
         const languageDropdownReact = languageDropdownComp.getBoundingClientRect()
@@ -64,7 +30,7 @@ const LanguageDropdown = () => {
         }
       }
     }
-  }, [showLanguage, language])
+  }, [showLanguage])
 
   return (
     <HeaderLanguagePanel
@@ -90,8 +56,7 @@ const LanguageDropdown = () => {
   )
 }
 
-const LanguageMenu = () => {
-  const dispatch = useDispatch()
+export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMenu }) => {
   const [showSubMenu, setShowSubMenu] = useState(false)
 
   return (
@@ -116,7 +81,7 @@ const LanguageMenu = () => {
           <SimpleButton
             className="mobile__menus__sub__item"
             onClick={() => {
-              hideMobileMenu(dispatch)
+              hideMobileMenu()
             }}
           >
             {currentLanguage() === 'en' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')}
@@ -124,7 +89,8 @@ const LanguageMenu = () => {
           <SimpleButton
             className="mobile__menus__sub__item"
             onClick={() => {
-              languageAction(dispatch)
+              changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
+              hideMobileMenu()
             }}
           >
             {currentLanguage() === 'en' ? i18n.t('navbar.language_zh') : i18n.t('navbar.language_en')}
@@ -134,5 +100,3 @@ const LanguageMenu = () => {
     </MobileSubMenuPanel>
   )
 }
-
-export default memo(() => (useIsMobile() ? <LanguageMenu /> : <LanguageDropdown />))
diff --git a/src/components/Header/MobileMenu/index.tsx b/src/components/Header/MobileMenu/index.tsx
index 88d0f771b..954c0efd9 100644
--- a/src/components/Header/MobileMenu/index.tsx
+++ b/src/components/Header/MobileMenu/index.tsx
@@ -1,14 +1,14 @@
 import { MobileMenusPanel } from './styled'
 import MenuItems from '../MenusComp'
 import { SearchComp } from '../SearchComp'
-import LanguageComp from '../LanguageComp'
+import { LanguageMenu } from '../LanguageComp'
 import BlockchainComp from '../BlockchainComp'
 
-export default () => (
+export default ({ hideMobileMenu }: { hideMobileMenu: () => void }) => (
   <MobileMenusPanel>
     <MenuItems />
     <BlockchainComp />
-    <LanguageComp />
-    <SearchComp expanded setExpanded={() => {}} />
+    <LanguageMenu hideMobileMenu={hideMobileMenu} />
+    <SearchComp expanded hideMobileMenu={hideMobileMenu} />
   </MobileMenusPanel>
 )
diff --git a/src/components/Header/MobileMenu/styled.tsx b/src/components/Header/MobileMenu/styled.tsx
index 31ef9adc0..657b970ab 100644
--- a/src/components/Header/MobileMenu/styled.tsx
+++ b/src/components/Header/MobileMenu/styled.tsx
@@ -1,15 +1,13 @@
 import styled from 'styled-components'
 
 export const MobileMenusPanel = styled.div`
+  flex: 1;
   width: 100%;
   background: #1c1c1c;
   display: flex;
   flex-direction: column;
-  position: fixed;
-  position: -webkit-fixed;
   z-index: 2;
   color: white;
-  top: var(--navbar-height);
-  bottom: 0;
-  overflow: hidden;
+  overflow: auto;
+  overscroll-behavior: contain;
 `
diff --git a/src/components/Header/SearchComp/index.tsx b/src/components/Header/SearchComp/index.tsx
index 08b9074b1..5b0a4c623 100644
--- a/src/components/Header/SearchComp/index.tsx
+++ b/src/components/Header/SearchComp/index.tsx
@@ -4,10 +4,14 @@ import SearchLogo from '../../../assets/search_white.png'
 import { HeaderSearchPanel, HeaderSearchBarPanel } from './styled'
 
 export const SearchComp: FC<{
-  expanded: boolean
-  setExpanded: (expanded: boolean) => void
-}> = memo(({ expanded, setExpanded }) => {
-  const onEditEnd = useCallback(() => setExpanded(false), [setExpanded])
+  expanded?: boolean
+  setExpanded?: (expanded: boolean) => void
+  hideMobileMenu?: () => void
+}> = memo(({ expanded, setExpanded, hideMobileMenu }) => {
+  const onEditEnd = useCallback(() => {
+    setExpanded?.(false)
+    hideMobileMenu?.()
+  }, [hideMobileMenu, setExpanded])
 
   if (!expanded) {
     return (
@@ -16,7 +20,7 @@ export const SearchComp: FC<{
         tabIndex={-1}
         onKeyDown={() => {}}
         onClick={() => {
-          setExpanded(true)
+          setExpanded?.(true)
         }}
       >
         <img alt="header search bar" src={SearchLogo} />
diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss
index 8cdac0f95..d2643b1a8 100644
--- a/src/components/Header/index.module.scss
+++ b/src/components/Header/index.module.scss
@@ -15,3 +15,15 @@
     min-width: 0;
   }
 }
+
+.StickyContainer {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+
+  &.expanded {
+    height: 100vh;
+  }
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 006190e57..51430c30e 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,16 +1,19 @@
 import { FC, ReactNode, useEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router'
+import classNames from 'classnames'
+import { createBrowserHistory } from 'history'
 import LogoIcon from '../../assets/ckb_logo.png'
 import { HeaderPanel, HeaderEmptyPanel, HeaderMobileMenuPanel, HeaderLogoPanel } from './styled'
-import { useAppState, useDispatch } from '../../contexts/providers/index'
-import { ComponentActions } from '../../contexts/actions'
 import MenusComp from './MenusComp'
 import { SearchComp } from './SearchComp'
-import LanguageComp from './LanguageComp'
+import { LanguageDropdown } from './LanguageComp'
 import BlockchainComp from './BlockchainComp'
-import { currentLanguage } from '../../utils/i18n'
 import { useElementSize, useIsMobile } from '../../utils/hook'
 import styles from './index.module.scss'
+import MaintainAlert from '../MaintainAlert'
+import Sheet from '../Sheet'
+import { createGlobalState, useGlobalState } from '../../utils/state'
+import MobileMenu from './MobileMenu'
 
 const LogoComp = () => (
   <HeaderLogoPanel to="/">
@@ -18,22 +21,12 @@ const LogoComp = () => (
   </HeaderLogoPanel>
 )
 
-const MobileMenuComp = () => {
-  const dispatch = useDispatch()
-  const {
-    components: { mobileMenuVisible },
-  } = useAppState()
+const MobileMenuComp: FC<{ mobileMenuVisible: boolean; setMobileMenuVisible: (value: boolean) => void }> = ({
+  mobileMenuVisible,
+  setMobileMenuVisible,
+}) => {
   return (
-    <HeaderMobileMenuPanel
-      onClick={() => {
-        dispatch({
-          type: ComponentActions.UpdateHeaderMobileMenuVisible,
-          payload: {
-            mobileMenuVisible: !mobileMenuVisible,
-          },
-        })
-      }}
-    >
+    <HeaderMobileMenuPanel onClick={() => setMobileMenuVisible(!mobileMenuVisible)}>
       <div className={mobileMenuVisible ? 'close' : ''}>
         <div className="menu__icon__first" />
         <div className="menu__icon__second" />
@@ -65,45 +58,87 @@ const AutoExpand: FC<{
   )
 }
 
+const globalShowHeaderSearchBarCounter = createGlobalState<number>(0)
+
+export function useShowSearchBarInHeader(show: boolean) {
+  const [, setCounter] = useGlobalState(globalShowHeaderSearchBarCounter)
+
+  useEffect(() => {
+    if (!show) return
+
+    setCounter(counter => counter + 1)
+    return () => setCounter(counter => counter - 1)
+  }, [show, setCounter])
+}
+
+export function useIsShowSearchBarInHeader() {
+  const [counter] = useGlobalState(globalShowHeaderSearchBarCounter)
+  return counter > 0
+}
+
+const useRouterLocation = (callback: () => void) => {
+  const history = createBrowserHistory()
+  const savedCallback = useRef(() => {})
+  useEffect(() => {
+    savedCallback.current = callback
+  })
+  useEffect(() => {
+    const currentCallback = () => {
+      savedCallback.current()
+    }
+    const listen = history.listen(() => {
+      currentCallback()
+    })
+    return () => {
+      listen()
+    }
+  }, [history])
+}
+
 export default () => {
   const isMobile = useIsMobile()
   const { pathname } = useLocation()
-  const dispatch = useDispatch()
-  const {
-    components: { headerSearchBarVisible, maintenanceAlertVisible },
-  } = useAppState()
+  // TODO: This hard-coded implementation is not ideal, but currently the header is loaded before the page component,
+  // so we can only handle it this way temporarily, otherwise there will be flickering during loading.
+  const defaultSearchBarVisible = pathname !== '/' && pathname !== '/search/fail'
+  const isShowSearchBar = useIsShowSearchBarInHeader()
+  const [mobileMenuVisible, setMobileMenuVisible] = useState(false)
 
-  useEffect(() => {
-    dispatch({
-      type: ComponentActions.UpdateHeaderSearchBarVisible,
-      payload: {
-        headerSearchBarVisible: pathname !== '/' && pathname !== '/search/fail',
-      },
-    })
-  }, [dispatch, pathname])
+  useRouterLocation(() => setMobileMenuVisible(false))
 
   return (
-    <HeaderPanel isNotTop={maintenanceAlertVisible} isEn={currentLanguage() === 'en'}>
-      <LogoComp />
-      {!isMobile && (
-        <>
-          <AutoExpand
-            leftContent={<MenusComp />}
-            expandableWidthRange={{ minimum: 320, maximum: 440 }}
-            renderExpandable={(expanded, setExpanded) =>
-              headerSearchBarVisible && <SearchComp expanded={expanded} setExpanded={setExpanded} />
-            }
-          />
-          <BlockchainComp />
-          <LanguageComp />
-        </>
-      )}
-      {isMobile && (
-        <>
-          <HeaderEmptyPanel />
-          <MobileMenuComp />
-        </>
-      )}
-    </HeaderPanel>
+    <div
+      className={classNames(styles.StickyContainer, {
+        [styles.expanded]: mobileMenuVisible,
+      })}
+    >
+      <MaintainAlert />
+      <HeaderPanel>
+        <LogoComp />
+        {!isMobile && (
+          <>
+            <AutoExpand
+              leftContent={<MenusComp />}
+              expandableWidthRange={{ minimum: 320, maximum: 440 }}
+              renderExpandable={(expanded, setExpanded) =>
+                (defaultSearchBarVisible || isShowSearchBar) && (
+                  <SearchComp expanded={expanded} setExpanded={setExpanded} />
+                )
+              }
+            />
+            <BlockchainComp />
+            <LanguageDropdown />
+          </>
+        )}
+        {isMobile && (
+          <>
+            <HeaderEmptyPanel />
+            <MobileMenuComp mobileMenuVisible={mobileMenuVisible} setMobileMenuVisible={setMobileMenuVisible} />
+          </>
+        )}
+      </HeaderPanel>
+      <Sheet />
+      {mobileMenuVisible && <MobileMenu hideMobileMenu={() => setMobileMenuVisible(false)} />}
+    </div>
   )
 }
diff --git a/src/components/Header/styled.tsx b/src/components/Header/styled.tsx
index 3da7b6ef4..256871ce9 100644
--- a/src/components/Header/styled.tsx
+++ b/src/components/Header/styled.tsx
@@ -7,11 +7,7 @@ export const HeaderPanel = styled.div`
   width: 100%;
   min-height: var(--navbar-height);
   background-color: #040607;
-  position: fixed;
-  position: -webkit-fixed;
   overflow: visible;
-  top: ${(props: { isNotTop?: boolean }) => (props.isNotTop ? '48px' : '0')};
-  z-index: 10;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -23,12 +19,10 @@ export const HeaderPanel = styled.div`
 
   @media (max-width: 1200px) {
     padding: 0 45px;
-    top: ${(props: { isNotTop?: boolean }) => (props.isNotTop ? 'var(--navbar-height)' : '0')};
   }
 
   @media (max-width: 780px) {
     padding: 0 18px;
-    top: ${(props: { isNotTop?: boolean; isEn: boolean }) => (props.isNotTop ? (props.isEn ? '120px' : '100px') : '0')};
   }
 `
 
diff --git a/src/components/MaintainAlert/index.tsx b/src/components/MaintainAlert/index.tsx
new file mode 100644
index 000000000..77e395e14
--- /dev/null
+++ b/src/components/MaintainAlert/index.tsx
@@ -0,0 +1,13 @@
+import i18n from '../../utils/i18n'
+import { IS_MAINTAINING } from '../../constants/common'
+import styles from './styles.module.scss'
+
+const MaintainAlert = () => {
+  if (IS_MAINTAINING) {
+    return <div className={styles.container}>{i18n.t('error.maintain')}</div>
+  }
+
+  return null
+}
+
+export default MaintainAlert
diff --git a/src/components/Alert/styles.module.scss b/src/components/MaintainAlert/styles.module.scss
similarity index 100%
rename from src/components/Alert/styles.module.scss
rename to src/components/MaintainAlert/styles.module.scss
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 97f3412ab..c847b99e6 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -9,9 +9,6 @@ import ClearLogo from '../../assets/clear.png'
 import { addPrefixForHash, containSpecialChar } from '../../utils/string'
 import i18n from '../../utils/i18n'
 import { HttpErrorCode, SearchFailType } from '../../constants/common'
-import { AppDispatch } from '../../contexts/reducer'
-import { ComponentActions } from '../../contexts/actions'
-import { useDispatch } from '../../contexts/providers'
 import { useIsMobile } from '../../utils/hook'
 import { isChainTypeError } from '../../utils/chain'
 
@@ -43,24 +40,12 @@ const setSearchContent = (inputElement: any, content: string) => {
   }
 }
 
-const hideMobileMenu = (dispatch: AppDispatch) => {
-  dispatch({
-    type: ComponentActions.UpdateHeaderMobileMenuVisible,
-    payload: {
-      mobileMenuVisible: false,
-    },
-  })
-}
-
 const handleSearchResult = (
   searchValue: string,
   inputElement: any,
-  dispatch: AppDispatch,
   setSearchValue: Function,
   history: ReturnType<typeof useHistory>,
-  isMobile: boolean,
 ) => {
-  if (isMobile) hideMobileMenu(dispatch)
   const query = searchValue.trim().replace(',', '') // remove front and end blank and ','
   if (!query || containSpecialChar(query)) {
     history.push(`/search/fail?q=${query}`)
@@ -117,7 +102,6 @@ const Search: FC<{
   onEditEnd?: () => void
 }> = memo(({ content, hasButton, onEditEnd }) => {
   const isMobile = useIsMobile()
-  const dispatch = useDispatch()
   const history = useHistory()
   const [t] = useTranslation()
   const SearchPlaceholder = useMemo(() => t('navbar.search_placeholder'), [t])
@@ -153,7 +137,7 @@ const Search: FC<{
 
   const searchKeyAction = (event: any) => {
     if (event.keyCode === 13) {
-      handleSearchResult(searchValue, inputElement, dispatch, setSearchValue, history, isMobile)
+      handleSearchResult(searchValue, inputElement, setSearchValue, history)
       onEditEnd?.()
     }
   }
@@ -180,7 +164,7 @@ const Search: FC<{
       {hasButton && (
         <SearchButton
           onClick={() => {
-            handleSearchResult(searchValue, inputElement, dispatch, setSearchValue, history, isMobile)
+            handleSearchResult(searchValue, inputElement, setSearchValue, history)
             onEditEnd?.()
           }}
         >
diff --git a/src/components/Sheet/index.tsx b/src/components/Sheet/index.tsx
index 69ce549de..0cb700946 100644
--- a/src/components/Sheet/index.tsx
+++ b/src/components/Sheet/index.tsx
@@ -1,27 +1,28 @@
-import { useAppState } from '../../contexts/providers'
 import { SheetPanel, SheetPointPanel, SheetItem } from './styled'
-import { currentLanguage } from '../../utils/i18n'
+import { createGlobalState, createGlobalStateSetter, useGlobalState } from '../../utils/state'
+
+const globalNetworkErrMsgs = createGlobalState<string[]>([])
+const globalChainAlerts = createGlobalState<string[]>([])
+
+export const setNetworkErrMsgs = createGlobalStateSetter(globalNetworkErrMsgs)
+export const setChainAlerts = createGlobalStateSetter(globalChainAlerts)
 
 const Sheet = () => {
-  const {
-    app,
-    components: { maintenanceAlertVisible },
-  } = useAppState()
-  const messages: string[] = app.appErrors[1].message.concat(app.appErrors[0].message)
+  const [networkErrMsgs] = useGlobalState(globalNetworkErrMsgs)
+  const [chainAlerts] = useGlobalState(globalChainAlerts)
+  const messages: string[] = chainAlerts.concat(networkErrMsgs)
 
   return messages.length > 0 ? (
-    <SheetPanel isNotTop={maintenanceAlertVisible} isEn={currentLanguage() === 'en'}>
-      <div>
-        {messages.map((context: string, index: number) => {
-          const key = index
-          return (
-            <SheetPointPanel key={key} isSingle={messages.length === 1}>
-              {messages.length > 1 && <span>·</span>}
-              <SheetItem>{context}</SheetItem>
-            </SheetPointPanel>
-          )
-        })}
-      </div>
+    <SheetPanel>
+      {messages.map((context: string, index: number) => {
+        const key = index
+        return (
+          <SheetPointPanel key={key} isSingle={messages.length === 1}>
+            {messages.length > 1 && <span>·</span>}
+            <SheetItem>{context}</SheetItem>
+          </SheetPointPanel>
+        )
+      })}
     </SheetPanel>
   ) : null
 }
diff --git a/src/components/Sheet/styled.tsx b/src/components/Sheet/styled.tsx
index 8a77cb5ce..be826d8d1 100644
--- a/src/components/Sheet/styled.tsx
+++ b/src/components/Sheet/styled.tsx
@@ -2,31 +2,16 @@
 import styled from 'styled-components'
 
 export const SheetPanel = styled.div`
-  position: sticky;
-  top: ${(props: { isNotTop?: boolean }) => (props.isNotTop ? '112px' : '64px')};
-  z-index: 9000;
-
-  @media (max-width: 1200px) {
-    top: ${(props: { isNotTop?: boolean }) => (props.isNotTop ? '128px' : '64px')};
-  }
+  width: 100%;
+  background: #d03a3a;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 0 20px;
 
   @media (max-width: 750px) {
-    top: ${(props: { isNotTop?: boolean; isEn: boolean }) =>
-      props.isNotTop ? (props.isEn ? '184px' : '164px') : '64px'};
-  }
-
-  > div {
-    width: 100%;
-    background: #d03a3a;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0 20px;
-
-    @media (max-width: 750px) {
-      padding: 6px 0 10px;
-    }
+    padding: 6px 0 10px;
   }
 `
 
diff --git a/src/components/Text/CopyTooltipText/index.tsx b/src/components/Text/CopyTooltipText/index.tsx
index 73369ed2a..7582fc369 100644
--- a/src/components/Text/CopyTooltipText/index.tsx
+++ b/src/components/Text/CopyTooltipText/index.tsx
@@ -1,23 +1,17 @@
 import i18n from '../../../utils/i18n'
 import { copyElementValue } from '../../../utils/util'
-import { AppActions } from '../../../contexts/actions'
-import { useDispatch } from '../../../contexts/providers'
 import SimpleButton from '../../SimpleButton'
+import { useSetToast } from '../../Toast'
 
 export default ({ content }: { content: string }) => {
-  const dispatch = useDispatch()
+  const setToast = useSetToast()
   return (
     <SimpleButton
       id={`copy__content__${content}`}
       onClick={(event: any) => {
         event.stopPropagation()
         copyElementValue(document.getElementById(`copy__content__${content}`))
-        dispatch({
-          type: AppActions.ShowToastMessage,
-          payload: {
-            message: i18n.t('common.copied'),
-          },
-        })
+        setToast({ message: i18n.t('common.copied') })
         event.preventDefault()
       }}
     >
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index e581f842d..e48541539 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect, useReducer } from 'react'
+import { useState, useEffect, useReducer, useCallback } from 'react'
 import { useTimeoutWithUnmount } from '../../utils/hook'
-import { useAppState } from '../../contexts/providers'
 import { ToastItemPanel, ToastPanel } from './styled'
+import { createGlobalState, useGlobalState } from '../../utils/state'
 
 const getColor = (type: 'success' | 'warning' | 'danger') => {
   switch (type) {
@@ -81,10 +81,25 @@ const reducer = (state: any, action: any) => {
   }
 }
 
+const globalToast = createGlobalState<State.ToastMessage | null>(null)
+
+export function useSetToast() {
+  const [, setToast] = useGlobalState(globalToast)
+
+  return useCallback(
+    (data: Pick<State.ToastMessage, 'message' | 'duration'> & Partial<Pick<State.ToastMessage, 'type'>>) =>
+      setToast({
+        id: new Date().getTime(),
+        message: data.message,
+        type: data.type ?? 'success',
+        duration: data.duration,
+      }),
+    [setToast],
+  )
+}
+
 export default () => {
-  const {
-    app: { toast },
-  } = useAppState()
+  const [toast] = useGlobalState(globalToast)
   const [state, dispatch] = useReducer(reducer, initialState)
 
   useEffect(() => {
diff --git a/src/components/TransactionItem/TransactionItemCell/index.tsx b/src/components/TransactionItem/TransactionItemCell/index.tsx
index 478bd8e00..421d2939a 100644
--- a/src/components/TransactionItem/TransactionItemCell/index.tsx
+++ b/src/components/TransactionItem/TransactionItemCell/index.tsx
@@ -6,7 +6,7 @@ import NervosDAOCellIcon from '../../../assets/nervos_dao_cell.png'
 import NervosDAOWithdrawingIcon from '../../../assets/nervos_dao_withdrawing.png'
 import CurrentAddressIcon from '../../../assets/current_address.svg'
 import UDTTokenIcon from '../../../assets/udt_token.png'
-import i18n from '../../../utils/i18n'
+import i18n, { currentLanguage } from '../../../utils/i18n'
 import { localeNumberString, parseUDTAmount } from '../../../utils/number'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import {
@@ -20,7 +20,6 @@ import {
 import { CellType } from '../../../constants/common'
 import TransactionCellArrow from '../../Transaction/TransactionCellArrow'
 import DecimalCapacity from '../../DecimalCapacity'
-import { useAppState } from '../../../contexts/providers'
 import { parseDiffDate } from '../../../utils/date'
 import Cellbase from '../../Transaction/Cellbase'
 import styles from './index.module.scss'
@@ -93,9 +92,8 @@ const WithdrawPopoverItem = ({
 
 const WithdrawPopoverInfo = ({ cell }: { cell: State.Cell }) => {
   const isMobile = useIsMobile()
-  const { app } = useAppState()
   let width = 'short'
-  if (app.language === 'en') {
+  if (currentLanguage() === 'en') {
     width = isDaoDepositCell(cell.cellType) ? 'long' : 'medium'
   }
   return (
diff --git a/src/constants/cache.ts b/src/constants/cache.ts
index 4411ee276..aab0a6aa2 100644
--- a/src/constants/cache.ts
+++ b/src/constants/cache.ts
@@ -3,7 +3,6 @@ import CONFIG from '../config'
 export const AppCachedKeys = {
   AppLanguage: `${CONFIG.CHAIN_TYPE}-AppLanguage`,
   Version: `${CONFIG.CHAIN_TYPE}-Version`,
-  MaintenanceAlert: `${CONFIG.CHAIN_TYPE}-MaintenanceAlert`,
   NewAddrFormat: `is-address-format-new`,
 }
 
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 4dbe8d46f..5e35126a2 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -8,7 +8,6 @@ export const FLUSH_CHART_CACHE_POLLING_TIME = 300000 // 5 minutes
 export const LOADING_WAITING_TIME = 500
 export const DELAY_BLOCK_NUMBER = 11
 export const PAGE_CELL_COUNT = 200
-export const MAINTENANCE_ALERT_POLLING_TIME = 3600000 // 1 hour
 export const NEXT_HARD_FORK_EPOCH = 5414
 export const EPOCH_HOURS = 4
 export const ONE_DAY_SECOND = 24 * 60 * 60
diff --git a/src/contexts/actions/index.ts b/src/contexts/actions/index.ts
deleted file mode 100644
index 1c005368e..000000000
--- a/src/contexts/actions/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum AppActions {
-  UpdateModal = 'updateModal',
-  ShowToastMessage = 'showToastMessage',
-  UpdateAppErrors = 'updateAppErrors',
-  UpdateTipBlockNumber = 'updateTipBlockNumber',
-  UpdateAppLanguage = 'updateAppLanguage',
-  UpdateHardForkStatus = 'updateHardForkStatus',
-}
-
-export enum PageActions {
-  UpdateStatistics = 'updateStatistics',
-}
-
-export enum ComponentActions {
-  UpdateHeaderMobileMenuVisible = 'updateHeaderMobileMenuVisible',
-  UpdateHeaderSearchBarVisible = 'updateHeaderSearchBarVisible',
-  UpdateMaintenanceAlertVisible = 'updateMaintenanceAlertVisible',
-}
-
-export type StateActions = AppActions | PageActions | ComponentActions
-
-// eslint-disable-next-line no-undef
-export default StateActions
diff --git a/src/contexts/providers/hook.ts b/src/contexts/providers/hook.ts
index 6a8f03360..3bf187b45 100644
--- a/src/contexts/providers/hook.ts
+++ b/src/contexts/providers/hook.ts
@@ -1,61 +1,32 @@
 import { useState } from 'react'
-import { useHistory } from 'react-router'
 import { initAxiosInterceptors } from '../../service/http/interceptors'
-import {
-  MAINTENANCE_ALERT_POLLING_TIME,
-  FLUSH_CHART_CACHE_POLLING_TIME,
-  BLOCK_POLLING_TIME,
-} from '../../constants/common'
+import { FLUSH_CHART_CACHE_POLLING_TIME } from '../../constants/common'
 import { AppCachedKeys } from '../../constants/cache'
-import { AppDispatch } from '../reducer'
 import { fetchCachedData } from '../../utils/cache'
 import { changeLanguage } from '../../utils/i18n'
-import { useAppState, useDispatch } from '.'
-import { AppActions } from '../actions'
 import { useInterval } from '../../utils/hook'
-import { getMaintenanceInfo } from '../../service/app/alert'
 import flushCacheInfo from '../../service/app/charts/cache'
-import getStatistics from '../../service/app/statistics'
 
-const initAppLanguage = (app: State.App, dispatch: AppDispatch) => {
-  const language = fetchCachedData<'zh' | 'en'>(AppCachedKeys.AppLanguage) || app.language
-  // Warding: https://github.com/facebook/react/issues/18147
-  setTimeout(() => {
-    dispatch({
-      type: AppActions.UpdateAppLanguage,
-      payload: {
-        language,
-      },
-    })
-  }, 0)
+const initAppLanguage = () => {
+  const language =
+    fetchCachedData<'zh' | 'en'>(AppCachedKeys.AppLanguage) || (navigator.language.includes('zh') ? 'zh' : 'en')
   changeLanguage(language)
 }
 
 export const useInitApp = () => {
   const [init, setInit] = useState(false)
-  const { app } = useAppState()
-  const dispatch = useDispatch()
-  const history = useHistory()
 
   if (!init) {
     setInit(true)
-    initAxiosInterceptors(dispatch, history)
-    initAppLanguage(app, dispatch)
-    getMaintenanceInfo(dispatch)
+    initAxiosInterceptors()
+    // TODO: This function may not belong here.
+    initAppLanguage()
     flushCacheInfo()
-    getStatistics(dispatch)
   }
 
-  useInterval(() => {
-    getMaintenanceInfo(dispatch)
-  }, MAINTENANCE_ALERT_POLLING_TIME)
-
   useInterval(() => {
     flushCacheInfo()
   }, FLUSH_CHART_CACHE_POLLING_TIME)
-  useInterval(() => {
-    getStatistics(dispatch)
-  }, BLOCK_POLLING_TIME)
 }
 
 export default useInitApp
diff --git a/src/contexts/providers/index.tsx b/src/contexts/providers/index.tsx
deleted file mode 100644
index a2b1d73e0..000000000
--- a/src/contexts/providers/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createContext, useReducer, useContext } from 'react'
-import initState from '../states/index'
-import { AppDispatch, reducer } from '../reducer'
-
-export const AppContext = createContext<{ state: typeof initState; dispatch: AppDispatch }>({
-  state: initState,
-  dispatch: () => {},
-})
-
-const withProviders = (Comp: React.ComponentType) => (props: React.Props<any>) => {
-  const [providers, dispatch] = useReducer(reducer, initState)
-
-  return (
-    <AppContext.Provider
-      value={{
-        state: providers,
-        dispatch,
-      }}
-    >
-      <Comp {...props} />
-    </AppContext.Provider>
-  )
-}
-
-export const useAppState = () => useContext(AppContext).state
-export const useDispatch = () => useContext(AppContext).dispatch
-
-export default withProviders
diff --git a/src/contexts/reducer/app.ts b/src/contexts/reducer/app.ts
deleted file mode 100644
index 73ebcb798..000000000
--- a/src/contexts/reducer/app.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ChartColor, getPrimaryColor, getSecondaryColor } from '../../constants/common'
-import { AppActions } from '../actions'
-
-export const appReducer = (
-  state: State.AppState,
-  { type, payload }: { type: AppActions; payload: State.AppPayload },
-): State.AppState => {
-  switch (type) {
-    case AppActions.UpdateModal:
-      return {
-        ...state,
-        app: {
-          ...state.app,
-        },
-      }
-    case AppActions.ShowToastMessage:
-      return {
-        ...state,
-        app: {
-          ...state.app,
-          toast: {
-            id: new Date().getTime(),
-            message: payload.message,
-            type: payload.type,
-            duration: payload.duration,
-          },
-        },
-      }
-    case AppActions.UpdateAppErrors:
-      return {
-        ...state,
-        app: {
-          ...state.app,
-          appErrors: state.app.appErrors.map((error: State.AppError) => {
-            if (payload.appError.type === error.type) {
-              return payload.appError
-            }
-            return error
-          }) as typeof state.app.appErrors,
-        },
-      }
-    case AppActions.UpdateTipBlockNumber:
-      return {
-        ...state,
-        app: {
-          ...state.app,
-          tipBlockNumber: payload.tipBlockNumber,
-        },
-      }
-    case AppActions.UpdateAppLanguage:
-      return {
-        ...state,
-        app: {
-          ...state.app,
-          language: payload.language,
-        },
-      }
-    case AppActions.UpdateHardForkStatus:
-      return {
-        ...state,
-        app: {
-          ...state.app,
-          primaryColor: getPrimaryColor(),
-          secondaryColor: getSecondaryColor(),
-          chartColor: ChartColor,
-        },
-      }
-    default:
-      return state
-  }
-}
-
-export default appReducer
diff --git a/src/contexts/reducer/component.ts b/src/contexts/reducer/component.ts
deleted file mode 100644
index a4c1bf7ac..000000000
--- a/src/contexts/reducer/component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ComponentActions } from '../actions'
-
-export const componentReducer = (
-  state: State.AppState,
-  { type, payload }: { type: ComponentActions; payload: State.Components },
-): State.AppState => {
-  switch (type) {
-    case ComponentActions.UpdateHeaderMobileMenuVisible:
-      return {
-        ...state,
-        components: {
-          ...state.components,
-          mobileMenuVisible: payload.mobileMenuVisible,
-        },
-      }
-    case ComponentActions.UpdateHeaderSearchBarVisible:
-      return {
-        ...state,
-        components: {
-          ...state.components,
-          headerSearchBarVisible: payload.headerSearchBarVisible,
-        },
-      }
-    case ComponentActions.UpdateMaintenanceAlertVisible:
-      return {
-        ...state,
-        components: {
-          ...state.components,
-          maintenanceAlertVisible: payload.maintenanceAlertVisible,
-        },
-      }
-    default:
-      return state
-  }
-}
-
-export default componentReducer
diff --git a/src/contexts/reducer/index.ts b/src/contexts/reducer/index.ts
deleted file mode 100644
index 041ba4770..000000000
--- a/src/contexts/reducer/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import StateActions, { AppActions, PageActions, ComponentActions } from '../actions'
-import appReducer from './app'
-import pageReducer from './page'
-import componentReducer from './component'
-
-export type AppDispatch = React.Dispatch<{ type: StateActions; payload: any }> // TODO: add type of payload
-export type StateWithDispatch = State.AppState & { dispatch: AppDispatch }
-
-export const reducer = (
-  state: State.AppState,
-  { type, payload }: { type: StateActions; payload: any },
-): State.AppState => {
-  if (Object.values(AppActions).includes(type as AppActions)) {
-    return appReducer(state, {
-      type: type as AppActions,
-      payload,
-    })
-  }
-  if (Object.values(PageActions).includes(type as PageActions)) {
-    return pageReducer(state, {
-      type: type as PageActions,
-      payload,
-    })
-  }
-  return componentReducer(state, {
-    type: type as ComponentActions,
-    payload,
-  })
-}
diff --git a/src/contexts/reducer/page.ts b/src/contexts/reducer/page.ts
deleted file mode 100644
index 312165298..000000000
--- a/src/contexts/reducer/page.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PageActions } from '../actions'
-
-export const pageReducer = (
-  state: State.AppState,
-  { type, payload }: { type: PageActions; payload: State.PagePayload },
-): State.AppState => {
-  switch (type) {
-    // statistic chart page
-    case PageActions.UpdateStatistics:
-      return {
-        ...state,
-        statistics: payload.statistics,
-      }
-
-    default:
-      return state
-  }
-}
-
-export default pageReducer
diff --git a/src/contexts/states/app.ts b/src/contexts/states/app.ts
deleted file mode 100644
index db2c956a7..000000000
--- a/src/contexts/states/app.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ChartColor, getPrimaryColor, getSecondaryColor } from '../../constants/common'
-
-export const initApp: State.App = {
-  toast: null,
-  appErrors: [
-    {
-      type: 'Network',
-      message: [],
-    },
-    {
-      type: 'ChainAlert',
-      message: [],
-    },
-    {
-      type: 'Maintenance',
-      message: [],
-    },
-  ],
-  tipBlockNumber: 0,
-  language: navigator.language.includes('zh') ? 'zh' : 'en',
-  primaryColor: getPrimaryColor(),
-  secondaryColor: getSecondaryColor(),
-  chartColor: ChartColor,
-}
-
-export default initApp
diff --git a/src/contexts/states/components.ts b/src/contexts/states/components.ts
deleted file mode 100644
index b54d6c2d0..000000000
--- a/src/contexts/states/components.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const initComponents: State.Components = {
-  mobileMenuVisible: false,
-  headerSearchBarVisible: false,
-  maintenanceAlertVisible: false,
-}
-
-export default initComponents
diff --git a/src/contexts/states/index.ts b/src/contexts/states/index.ts
deleted file mode 100644
index 66c74d352..000000000
--- a/src/contexts/states/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import initApp from './app'
-import initStatistics from './statistics'
-import initComponents from './components'
-
-export type FetchStatus = keyof State.FetchStatus
-
-const initState: State.AppState = {
-  app: initApp,
-  statistics: initStatistics,
-
-  components: initComponents,
-}
-
-export default initState
diff --git a/src/contexts/states/statistics.ts b/src/contexts/states/statistics.ts
deleted file mode 100644
index c47b5c329..000000000
--- a/src/contexts/states/statistics.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const initStatistics: State.Statistics = {
-  tipBlockNumber: '0',
-  averageBlockTime: '0',
-  currentEpochDifficulty: '0',
-  hashRate: '0',
-  epochInfo: {
-    epochNumber: '0',
-    epochLength: '0',
-    index: '0',
-  },
-  estimatedEpochTime: '0',
-  transactionsLast24Hrs: '0',
-  transactionsCountPerMinute: '0',
-  reorgStartedAt: null,
-}
-
-export default initStatistics
diff --git a/src/locales/en.json b/src/locales/en.json
index 1eb30e271..70e1fc5c2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -79,8 +79,6 @@
       "too_many_request": "Too many requests, please try later",
       "data_too_large": "The data is too large, not available for download",
       "result_not_found": "Search result not found",
-      "maintenance": "Please note that CKB Explorer will be under maintenance from {{start}} to {{end}}. Data update during the period might be delayed.",
-      "dismiss": "Dismiss",
       "handling-reorg": "Reorg detected at {{time}} so CKB Explorer is checking data thoroughly. It may take half an hour, please visit later",
       "migration-notice": "Service of CKB explorer will have a migration on {{time}}, and the server might be unavailable temporarily"
     },
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 137aaf67b..b6c0c176e 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -79,8 +79,6 @@
       "too_many_request": "请求次数过多, 请稍后再试",
       "data_too_large": "数据过大，不支持下载",
       "result_not_found": "没有找到搜索结果",
-      "maintenance": "请注意 CKB 浏览器将于 {{start}} 至 {{end}} 处于维护状态，期间数据更新可能会有延迟。",
-      "dismiss": "知道了",
       "handling-reorg": " 检测到 {{time}} 发生 Reorg, CKB 浏览器正在彻底检查数据。所需时间约为半小时, 请稍后访问",
       "migration-notice": "浏览器服务将于 {{time}} 进行迁移, 可能出现短时不可用状态"
     },
diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx
index 97456cab7..5f15e2ae0 100644
--- a/src/pages/BlockDetail/BlockComp.tsx
+++ b/src/pages/BlockDetail/BlockComp.tsx
@@ -10,7 +10,6 @@ import DropDownBlueIcon from '../../assets/content_blue_drop_down.png'
 import PackUpBlueIcon from '../../assets/content_blue_pack_up.png'
 import OverviewCard, { OverviewItemData } from '../../components/Card/OverviewCard'
 import TransactionItem from '../../components/TransactionItem/index'
-import { useAppState } from '../../contexts/providers'
 import { parseSimpleDate } from '../../utils/date'
 import i18n from '../../utils/i18n'
 import { localeNumberString, handleDifficulty } from '../../utils/number'
@@ -39,6 +38,7 @@ import AddressText from '../../components/AddressText'
 import ComparedToMaxTooltip from '../../components/Tooltip/ComparedToMaxTooltip'
 import Filter from '../../components/Search/Filter'
 import { HelpTip } from '../../components/HelpTip'
+import { useLatestBlockNumber } from '../../services/ExplorerService'
 
 const CELL_BASE_ANCHOR = 'cellbase'
 
@@ -104,9 +104,7 @@ const BlockMinerReward = ({
 
 export const BlockOverview: FC<{ block: State.Block }> = ({ block }) => {
   const isMobile = useIsMobile()
-  const {
-    statistics: { tipBlockNumber },
-  } = useAppState()
+  const tipBlockNumber = useLatestBlockNumber()
   const [showAllOverview, setShowAllOverview] = useState(false)
   const minerReward = <DecimalCapacity value={localeNumberString(shannonToCkb(block.minerReward))} />
   const rootInfoItems = [
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b07e9f2f8..e1efa99ac 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import { FC, memo, useEffect, useMemo, useRef } from 'react'
+import { FC, memo, useMemo, useRef } from 'react'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
@@ -22,12 +22,10 @@ import {
 } from '../../constants/common'
 import { localeNumberString, handleHashRate, handleDifficulty } from '../../utils/number'
 import { handleBigNumber } from '../../utils/string'
-import { useAppState, useDispatch } from '../../contexts/providers'
 import i18n from '../../utils/i18n'
 import LatestBlocksIcon from '../../assets/latest_blocks.png'
 import LatestTransactionsIcon from '../../assets/latest_transactions.png'
 import { BlockCardItem, TransactionCardItem } from './TableCard'
-import { getTipBlockNumber } from '../../service/app/address'
 import Loading from '../../components/Loading/SmallLoading'
 import { useElementIntersecting, useInterval, useIsLGScreen, useIsMobile } from '../../utils/hook'
 import Banner from '../../components/Banner'
@@ -35,10 +33,11 @@ import { handleBlockchainAlert } from '../../service/app/blockchain'
 import Search from '../../components/Search'
 import AverageBlockTimeChart from './AverageBlockTimeChart'
 import HashRateChart from './HashRateChart'
-import { ComponentActions } from '../../contexts/actions'
 import styles from './index.module.scss'
 import { fetchLatestBlocks, fetchLatestTransactions } from '../../service/http/fetcher'
 import { RouteState } from '../../routes/state'
+import { useLatestBlockNumber, useStatistics } from '../../services/ExplorerService'
+import { useShowSearchBarInHeader } from '../../components/Header'
 
 interface BlockchainData {
   name: string
@@ -116,7 +115,6 @@ const getBlockchainDataList = (statistics: State.Statistics, isMobile: boolean,
 ]
 
 const HomeHeaderTopPanel: FC = memo(() => {
-  const dispatch = useDispatch()
   const ref = useRef<HTMLDivElement>(null)
 
   const { height: resizedHeight } = useResizeDetector({
@@ -125,6 +123,8 @@ const HomeHeaderTopPanel: FC = memo(() => {
   })
   const height = Math.round(resizedHeight ?? ref.current?.clientHeight ?? 0)
   const selfMarginTop = 20
+  // TODO: This does not take into account the height of the Alert and Search when they appear,
+  // so a dynamic `--headerHeight` variable may be needed.
   const headerHeight = 64
   const intersectingCheckOffset = height + selfMarginTop + headerHeight
 
@@ -140,26 +140,7 @@ const HomeHeaderTopPanel: FC = memo(() => {
     true,
   )
 
-  useEffect(() => {
-    if (ref.current == null) return
-
-    dispatch({
-      type: ComponentActions.UpdateHeaderSearchBarVisible,
-      payload: {
-        headerSearchBarVisible: !isFullDisplayInScreen,
-      },
-    })
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      dispatch({
-        type: ComponentActions.UpdateHeaderSearchBarVisible,
-        payload: {
-          headerSearchBarVisible: true,
-        },
-      })
-    }
-  }, [dispatch, isFullDisplayInScreen])
+  useShowSearchBarInHeader(!isFullDisplayInScreen)
 
   return (
     <div ref={ref} className={styles.HomeHeaderTopPanel}>
@@ -204,12 +185,9 @@ const TransactionList: FC<{ transactions: State.Transaction[]; tipBlockNumber: n
 export default () => {
   const isMobile = useIsMobile()
   const isLG = useIsLGScreen()
-  const dispatch = useDispatch()
   const history = useHistory<RouteState>()
-  const {
-    statistics,
-    app: { tipBlockNumber },
-  } = useAppState()
+  const statistics = useStatistics()
+  const tipBlockNumber = useLatestBlockNumber()
   const [t] = useTranslation()
 
   const blocksQuery = useQuery(
@@ -251,11 +229,7 @@ export default () => {
   )
 
   useInterval(() => {
-    getTipBlockNumber(dispatch)
-  }, BLOCK_POLLING_TIME)
-
-  useInterval(() => {
-    handleBlockchainAlert(dispatch)
+    handleBlockchainAlert()
   }, BLOCKCHAIN_ALERT_POLLING_TIME)
 
   const blockchainDataList = getBlockchainDataList(statistics, isMobile, isLG)
diff --git a/src/pages/NervosDao/DaoOverview/index.tsx b/src/pages/NervosDao/DaoOverview/index.tsx
index 335ddacfd..ae2dc4917 100644
--- a/src/pages/NervosDao/DaoOverview/index.tsx
+++ b/src/pages/NervosDao/DaoOverview/index.tsx
@@ -6,7 +6,6 @@ import 'echarts/lib/component/title'
 import 'echarts/lib/component/legend'
 import 'echarts/lib/component/legendScroll'
 import { Tooltip } from 'antd'
-import { useAppState } from '../../../contexts/providers'
 import {
   DaoOverviewPanel,
   DaoOverviewLeftPanel,
@@ -28,6 +27,7 @@ import DecimalCapacity from '../../../components/DecimalCapacity'
 import { useIsLGScreen, useIsMobile } from '../../../utils/hook'
 import { ReactChartCore } from '../../StatisticsChart/common'
 import { HelpTip } from '../../../components/HelpTip'
+import { ChartColor } from '../../../constants/common'
 
 interface NervosDaoItemContent {
   title: string
@@ -288,29 +288,26 @@ const NervosDaoPieItem = ({ item }: { item: NervosDaoPieItemContent }) => (
 export default ({ nervosDao }: { nervosDao: State.NervosDao }) => {
   const isMobile = useIsMobile()
   const isExactLG = useIsLGScreen(true)
-  const {
-    app: { chartColor },
-  } = useAppState()
 
   const nervosDaoPieItemContents = useCallback(
     (nervosDao: State.NervosDao): NervosDaoPieItemContent[] => [
       {
         title: i18n.t('nervos_dao.mining_reward'),
         content: <NervosDaoRightCapacity reward={nervosDao.miningReward} />,
-        color: chartColor.daoColors[0],
+        color: ChartColor.daoColors[0],
       },
       {
         title: i18n.t('nervos_dao.deposit_compensation'),
         content: <NervosDaoRightCapacity reward={nervosDao.depositCompensation} />,
-        color: chartColor.daoColors[1],
+        color: ChartColor.daoColors[1],
       },
       {
         title: i18n.t('nervos_dao.burnt'),
         content: <NervosDaoRightCapacity reward={nervosDao.treasuryAmount} />,
-        color: chartColor.daoColors[2],
+        color: ChartColor.daoColors[2],
       },
     ],
-    [chartColor],
+    [],
   )
 
   return (
@@ -324,7 +321,7 @@ export default ({ nervosDao }: { nervosDao: State.NervosDao }) => {
             <HelpTip title={i18n.t('glossary.secondary_issuance')} />
           </div>
           <ReactChartCore
-            option={getOption(nervosDao, chartColor.daoColors, isMobile)}
+            option={getOption(nervosDao, ChartColor.daoColors, isMobile)}
             notMerge
             lazyUpdate
             style={{
diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx
index 349a7d9a6..6fd870909 100644
--- a/src/pages/Script/ScriptsComp.tsx
+++ b/src/pages/Script/ScriptsComp.tsx
@@ -19,10 +19,9 @@ import { CellInScript, CkbTransactionInScript } from './types'
 import styles from './styles.module.scss'
 import { QueryResult } from '../../components/QueryResult'
 import AddressText from '../../components/AddressText'
-import { AppActions } from '../../contexts/actions'
-import { useDispatch } from '../../contexts/providers'
 import { ReactComponent as CopyIcon } from '../../assets/copy_icon.svg'
 import { ReactComponent as InfoMoreIcon } from '../../assets/info_more_icon.svg'
+import { useSetToast } from '../../components/Toast'
 
 export const ScriptTransactions = ({ page, size }: { page: number; size: number }) => {
   const history = useHistory()
@@ -213,7 +212,7 @@ export const ScriptCells = ({
 }
 
 export const CodeHashMessage = ({ codeHash }: { codeHash: string }) => {
-  const dispatch = useDispatch()
+  const setToast = useSetToast()
   return (
     <div className={styles.codeHashMessagePanel}>
       <AddressText className={styles.codeHash}>{codeHash}</AddressText>
@@ -222,12 +221,7 @@ export const CodeHashMessage = ({ codeHash }: { codeHash: string }) => {
         onClick={() => {
           navigator.clipboard.writeText(codeHash).then(
             () => {
-              dispatch({
-                type: AppActions.ShowToastMessage,
-                payload: {
-                  message: i18n.t('common.copied'),
-                },
-              })
+              setToast({ message: i18n.t('common.copied') })
             },
             error => {
               console.error(error)
diff --git a/src/pages/SimpleUDT/index.tsx b/src/pages/SimpleUDT/index.tsx
index ed2c1e0ef..d9850744b 100644
--- a/src/pages/SimpleUDT/index.tsx
+++ b/src/pages/SimpleUDT/index.tsx
@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Link, useHistory, useLocation, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from 'react-query'
 import { Popover } from 'antd'
 import SimpleUDTHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'
-import { useDispatch } from '../../contexts/providers/index'
-import { getTipBlockNumber } from '../../service/app/address'
 import i18n from '../../utils/i18n'
 import { SimpleUDTContentPanel, UDTTransactionTitlePanel, TypeScriptController } from './styled'
 import SimpleUDTComp, { SimpleUDTOverview } from './SimpleUDTComp'
@@ -43,7 +41,6 @@ enum TransactionType {
 
 export const SimpleUDT = () => {
   const isMobile = useIsMobile()
-  const dispatch = useDispatch()
   const { push } = useHistory()
   const { search } = useLocation()
   const [t] = useTranslation()
@@ -55,10 +52,6 @@ export const SimpleUDT = () => {
   const filter = query.get('filter')
   const type = query.get('type')
 
-  useEffect(() => {
-    getTipBlockNumber(dispatch)
-  }, [dispatch])
-
   const querySimpleUDT = useQuery(['simple-udt'], async () => {
     const wrapper = await fetchSimpleUDT(typeHash)
     const udt = wrapper.attributes
diff --git a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
index a4ca5707f..c2b415320 100644
--- a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
+++ b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
@@ -17,7 +17,7 @@ const getAddressWithRanking = (statisticAddressBalanceRanks: State.StatisticAddr
 
 const getOption = (
   statisticAddressBalanceRanks: State.StatisticAddressBalanceRank[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
   getAdaptAddressText: (address: string) => string,
diff --git a/src/pages/StatisticsChart/activities/AddressCount.tsx b/src/pages/StatisticsChart/activities/AddressCount.tsx
index 2247f04fa..9f012e921 100644
--- a/src/pages/StatisticsChart/activities/AddressCount.tsx
+++ b/src/pages/StatisticsChart/activities/AddressCount.tsx
@@ -9,7 +9,7 @@ import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
   statisticAddressCounts: State.StatisticAddressCount[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
index 790af37fd..e2f5057c9 100644
--- a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
+++ b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
@@ -15,7 +15,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: string }
 
 const getOption = (
   statisticBalanceDistributions: State.StatisticBalanceDistribution[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/activities/CellCount.tsx b/src/pages/StatisticsChart/activities/CellCount.tsx
index 769247f61..00fbca839 100644
--- a/src/pages/StatisticsChart/activities/CellCount.tsx
+++ b/src/pages/StatisticsChart/activities/CellCount.tsx
@@ -24,7 +24,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string,
 
 const getOption = (
   statisticCellCounts: State.StatisticCellCount[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/activities/TransactionCount.tsx b/src/pages/StatisticsChart/activities/TransactionCount.tsx
index 6b8108238..b2bdba4f1 100644
--- a/src/pages/StatisticsChart/activities/TransactionCount.tsx
+++ b/src/pages/StatisticsChart/activities/TransactionCount.tsx
@@ -9,7 +9,7 @@ import { fetchStatisticTransactionCount } from '../../../service/http/fetcher'
 
 const getOption = (
   statisticTransactionCounts: State.StatisticTransactionCount[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
index 73bc1eae6..9cdd96b25 100644
--- a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
+++ b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
@@ -11,7 +11,7 @@ import { fetchStatisticTxFeeHistory } from '../../../service/http/fetcher'
 
 const getOption = (
   statisticTxFeeHistories: State.StatisticTransactionFee[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/block/AverageBlockTime.tsx b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
index 23f5b463d..1c927bb41 100644
--- a/src/pages/StatisticsChart/block/AverageBlockTime.tsx
+++ b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
@@ -9,7 +9,7 @@ import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
   statisticAverageBlockTimes: State.StatisticAverageBlockTime[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
index 1451712ab..d0676b58a 100644
--- a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
+++ b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
@@ -7,7 +7,7 @@ import { fetchStatisticBlockTimeDistribution } from '../../../service/http/fetch
 
 const getOption = (
   statisticBlockTimeDistributions: State.StatisticBlockTimeDistribution[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
index 58958687b..8fd066415 100644
--- a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
+++ b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
@@ -9,7 +9,7 @@ import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
   statisticEpochTimeDistributions: State.StatisticEpochTimeDistribution[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx
index bf1a103e1..7b0423edb 100644
--- a/src/pages/StatisticsChart/common/index.tsx
+++ b/src/pages/StatisticsChart/common/index.tsx
@@ -21,9 +21,9 @@ import SmallLoading from '../../../components/Loading/SmallLoading'
 import i18n from '../../../utils/i18n'
 import Content from '../../../components/Content'
 import { useChartQueryWithCache, useIsMobile, usePrevious, useWindowResize } from '../../../utils/hook'
-import { useAppState } from '../../../contexts/providers'
 import { isDeepEqual } from '../../../utils/util'
 import { HelpTip } from '../../../components/HelpTip'
+import { ChartColor } from '../../../constants/common'
 
 const LoadingComp = ({ isThumbnail }: { isThumbnail?: boolean }) => (isThumbnail ? <SmallLoading /> : <Loading show />)
 
@@ -160,7 +160,7 @@ export interface SmartChartPageProps<T> {
   onFetched?: (dataList: T[]) => void
   getEChartOption: (
     dataList: T[],
-    chartColor: State.App['chartColor'],
+    chartColor: State.ChartColor,
     isMobile: boolean,
     isThumbnail: boolean,
   ) => echarts.EChartOption
@@ -183,7 +183,6 @@ export function SmartChartPage<T>({
   cacheMode = 'forever',
 }: SmartChartPageProps<T>): ReactElement {
   const isMobile = useIsMobile()
-  const { app } = useAppState()
 
   const query = useChartQueryWithCache(fetchData, cacheKey, cacheMode)
   const dataList = useMemo(() => query.data ?? [], [query.data])
@@ -194,8 +193,8 @@ export function SmartChartPage<T>({
   }, [onFetched, query.data])
 
   const option = useMemo(
-    () => getEChartOption(dataList, app.chartColor, isMobile, isThumbnail),
-    [app.chartColor, dataList, getEChartOption, isMobile, isThumbnail],
+    () => getEChartOption(dataList, ChartColor, isMobile, isThumbnail),
+    [dataList, getEChartOption, isMobile, isThumbnail],
   )
 
   const content = query.isLoading ? (
diff --git a/src/pages/StatisticsChart/mining/Difficulty.tsx b/src/pages/StatisticsChart/mining/Difficulty.tsx
index 3a47fbe10..e7ab8bfee 100644
--- a/src/pages/StatisticsChart/mining/Difficulty.tsx
+++ b/src/pages/StatisticsChart/mining/Difficulty.tsx
@@ -10,7 +10,7 @@ import { fetchStatisticDifficulty } from '../../../service/http/fetcher'
 
 const getOption = (
   statisticDifficulties: State.StatisticDifficulty[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
index c9904662c..ab5d54da4 100644
--- a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
+++ b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
@@ -9,7 +9,7 @@ import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
   statisticDifficultyHashRates: State.StatisticDifficultyHashRate[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
index 5e52f24d0..0964d11f3 100644
--- a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
+++ b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
@@ -22,7 +22,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: string }
 
 const getOption = (
   statisticChartData: State.StatisticDifficultyUncleRateEpoch[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/mining/HashRate.tsx b/src/pages/StatisticsChart/mining/HashRate.tsx
index 328c67be7..436dce2e7 100644
--- a/src/pages/StatisticsChart/mining/HashRate.tsx
+++ b/src/pages/StatisticsChart/mining/HashRate.tsx
@@ -10,7 +10,7 @@ import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
   statisticHashRates: State.StatisticHashRate[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
index 16f6e704c..aeb330096 100644
--- a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
+++ b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
@@ -22,7 +22,7 @@ const Colors = [
 
 const getOption = (
   statisticMinerAddresses: State.StatisticMinerAddress[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
   getAdaptAddressText: (address: string) => string,
diff --git a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
index 3f8960501..fca6331d3 100644
--- a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
+++ b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
@@ -25,7 +25,7 @@ interface VersionRecord {
 
 const getOption = (
   list: Array<VersionRecord>,
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/mining/UncleRate.tsx b/src/pages/StatisticsChart/mining/UncleRate.tsx
index f238a3e94..dee92a51e 100644
--- a/src/pages/StatisticsChart/mining/UncleRate.tsx
+++ b/src/pages/StatisticsChart/mining/UncleRate.tsx
@@ -13,7 +13,7 @@ const max = (statisticUncleRates: State.StatisticUncleRate[]) => {
 
 const getOption = (
   statisticUncleRates: State.StatisticUncleRate[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
index d83a87f36..69fe5a806 100644
--- a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
+++ b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
@@ -7,7 +7,7 @@ import { fetchStatisticAnnualPercentageCompensation } from '../../../service/htt
 
 const getOption = (
   statisticAnnualPercentageCompensations: State.StatisticAnnualPercentageCompensation[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/monetary/InflationRate.tsx b/src/pages/StatisticsChart/monetary/InflationRate.tsx
index 1c1859104..33beee833 100644
--- a/src/pages/StatisticsChart/monetary/InflationRate.tsx
+++ b/src/pages/StatisticsChart/monetary/InflationRate.tsx
@@ -7,7 +7,7 @@ import { fetchStatisticInflationRate } from '../../../service/http/fetcher'
 
 const getOption = (
   statisticInflationRates: State.StatisticInflationRate[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/monetary/Liquidity.tsx b/src/pages/StatisticsChart/monetary/Liquidity.tsx
index fe03c4d7f..07b411827 100644
--- a/src/pages/StatisticsChart/monetary/Liquidity.tsx
+++ b/src/pages/StatisticsChart/monetary/Liquidity.tsx
@@ -9,7 +9,7 @@ import { fetchStatisticLiquidity } from '../../../service/http/fetcher'
 
 const getOption = (
   statisticLiquidity: State.StatisticLiquidity[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
index 02218f2aa..3d3bb8a1d 100644
--- a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
+++ b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
@@ -23,7 +23,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string,
 
 const getOption = (
   statisticSecondaryIssuance: State.StatisticSecondaryIssuance[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
index 5e3d3461d..1283bb809 100644
--- a/src/pages/StatisticsChart/monetary/TotalSupply.tsx
+++ b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
@@ -28,7 +28,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string,
 
 const getOption = (
   statisticTotalSupplies: State.StatisticTotalSupply[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
index c4083051b..f48acc0ea 100644
--- a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
+++ b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
@@ -8,7 +8,7 @@ import { fetchStatisticCirculationRatio } from '../../../service/http/fetcher'
 
 const getOption = (
   statisticCirculationRatios: State.StatisticCirculationRatio[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
index cea097a73..94615c2f9 100644
--- a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
+++ b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
@@ -30,7 +30,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string,
 
 const getOption = (
   statisticNewDaoDeposits: State.StatisticNewDaoDeposit[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
index ee08cf6db..5f06290e7 100644
--- a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
+++ b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
@@ -30,7 +30,7 @@ const parseTooltip = ({ seriesName, data, color }: SeriesItem & { data: [string,
 
 const getOption = (
   statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[],
-  chartColor: State.App['chartColor'],
+  chartColor: State.ChartColor,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
index 117a57ea0..50c8a782d 100644
--- a/src/pages/Transaction/TransactionCellScript/index.tsx
+++ b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -17,10 +17,7 @@ import {
   TransactionDetailScriptButton,
 } from './styled'
 import i18n from '../../../utils/i18n'
-import { AppDispatch } from '../../../contexts/reducer'
-import { AppActions } from '../../../contexts/actions'
 import SmallLoading from '../../../components/Loading/SmallLoading'
-import { useDispatch } from '../../../contexts/providers'
 import CloseIcon from '../../../assets/modal_close.png'
 import { getContractHashTag } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
@@ -28,6 +25,7 @@ import HashTag from '../../../components/HashTag'
 import { ReactComponent as CopyIcon } from '../../../assets/copy_icon.svg'
 import { ReactComponent as OuterLinkIcon } from '../../../assets/outer_link_icon.svg'
 import { HelpTip } from '../../../components/HelpTip'
+import { useSetToast } from '../../../components/Toast'
 
 const initScriptContent = {
   lock: 'null',
@@ -60,7 +58,7 @@ const handleFetchCellInfo = async (
   state: CellState,
   setScriptFetchStatus: (val: boolean) => void,
   setContent: Function,
-  dispatch: AppDispatch,
+  setToast: ReturnType<typeof useSetToast>,
 ) => {
   setScriptFetchStatus(false)
 
@@ -94,12 +92,9 @@ const handleFetchCellInfo = async (
           if (error.response && error.response.data && error.response.data[0]) {
             const err = error.response.data[0]
             if (err.status === 400 && err.code === 1022) {
-              dispatch({
-                type: AppActions.ShowToastMessage,
-                payload: {
-                  message: i18n.t('toast.data_too_large'),
-                  type: 'warning',
-                },
+              setToast({
+                message: i18n.t('toast.data_too_large'),
+                type: 'warning',
               })
               return null
             }
@@ -244,7 +239,7 @@ const ScriptContentJson = ({
 )
 
 export default ({ cell, onClose }: { cell: State.Cell; onClose: Function }) => {
-  const dispatch = useDispatch()
+  const setToast = useSetToast()
   const [scriptFetched, setScriptFetched] = useState(false)
   const [content, setContent] = useState(null as State.Script | State.Data | CapacityUsage | null)
   const [state, setState] = useState(CellState.LOCK as CellState)
@@ -255,18 +250,13 @@ export default ({ cell, onClose }: { cell: State.Cell; onClose: Function }) => {
   }
 
   useEffect(() => {
-    handleFetchCellInfo(cell, state, setScriptFetched, setContent, dispatch)
-  }, [cell, state, dispatch])
+    handleFetchCellInfo(cell, state, setScriptFetched, setContent, setToast)
+  }, [cell, state, setToast])
 
   const onClickCopy = () => {
     navigator.clipboard.writeText(updateJsonFormat(content)).then(
       () => {
-        dispatch({
-          type: AppActions.ShowToastMessage,
-          payload: {
-            message: i18n.t('common.copied'),
-          },
-        })
+        setToast({ message: i18n.t('common.copied') })
       },
       error => {
         console.error(error)
diff --git a/src/pages/Transaction/TransactionComp.tsx b/src/pages/Transaction/TransactionComp.tsx
index 5d850dea9..91bbf97c0 100644
--- a/src/pages/Transaction/TransactionComp.tsx
+++ b/src/pages/Transaction/TransactionComp.tsx
@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
 import { Trans } from 'react-i18next'
 import OverviewCard, { OverviewItemData } from '../../components/Card/OverviewCard'
-import { useAppState } from '../../contexts/providers/index'
 import { parseSimpleDate } from '../../utils/date'
 import i18n from '../../utils/i18n'
 import { localeNumberString } from '../../utils/number'
@@ -28,6 +27,7 @@ import HashTag from '../../components/HashTag'
 import { useAddrFormatToggle } from '../../utils/hook'
 import ComparedToMaxTooltip from '../../components/Tooltip/ComparedToMaxTooltip'
 import { HelpTip } from '../../components/HelpTip'
+import { useLatestBlockNumber } from '../../services/ExplorerService'
 
 const showTxStatus = (txStatus: string) => txStatus?.replace(/^\S/, s => s.toUpperCase()) ?? '-'
 
@@ -109,9 +109,7 @@ const TransactionInfoItemWrapper = ({
 
 export const TransactionOverview: FC<{ transaction: State.Transaction }> = ({ transaction }) => {
   const [showParams, setShowParams] = useState<boolean>(false)
-  const {
-    app: { tipBlockNumber },
-  } = useAppState()
+  const tipBlockNumber = useLatestBlockNumber()
   const {
     blockNumber,
     cellDeps,
diff --git a/src/pages/Transaction/index.tsx b/src/pages/Transaction/index.tsx
index d32b4dff7..389362112 100644
--- a/src/pages/Transaction/index.tsx
+++ b/src/pages/Transaction/index.tsx
@@ -1,19 +1,15 @@
-import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { useQuery } from 'react-query'
 import TransactionHashCard from '../../components/Card/HashCard'
 import Content from '../../components/Content'
-import { getTipBlockNumber } from '../../service/app/address'
 import i18n from '../../utils/i18n'
 import { TransactionDiv as TransactionPanel } from './styled'
 import TransactionComp, { TransactionOverview } from './TransactionComp'
-import { useDispatch } from '../../contexts/providers'
 import { fetchTransactionByHash } from '../../service/http/fetcher'
 import { QueryResult } from '../../components/QueryResult'
 import { defaultTransactionInfo } from './state'
 
 export default () => {
-  const dispatch = useDispatch()
   const { hash: txHash } = useParams<{ hash: string }>()
 
   const query = useQuery(['transaction', txHash], async () => {
@@ -27,8 +23,6 @@ export default () => {
   const transaction = query.data ?? defaultTransactionInfo
   const { blockTimestamp, txStatus } = transaction
 
-  useEffect(() => getTipBlockNumber(dispatch), [dispatch])
-
   return (
     <Content>
       <TransactionPanel className="container">
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index e81b25a9b..1e08bbb1a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,15 +1,10 @@
-import { useEffect, useRef, Suspense, lazy, Component } from 'react'
+import { useEffect, Suspense, lazy, Component } from 'react'
 import { BrowserRouter as Router, Route, Redirect, Switch, useLocation } from 'react-router-dom'
 import { createBrowserHistory } from 'history'
 import Page from '../components/Page'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-import Sheet from '../components/Sheet'
-import { useDispatch, useAppState } from '../contexts/providers'
-import { ComponentActions } from '../contexts/actions'
-import { useIsMobile } from '../utils/hook'
 import { isChainTypeError } from '../utils/chain'
-import Alert from '../components/Alert'
 
 const Home = lazy(() => import('../pages/Home'))
 const Block = lazy(() => import('../pages/BlockDetail'))
@@ -341,25 +336,6 @@ const useRouter = (callback: Function) => {
   }, [callback, history])
 }
 
-const useRouterLocation = (callback: () => void) => {
-  const history = createBrowserHistory()
-  const savedCallback = useRef(() => {})
-  useEffect(() => {
-    savedCallback.current = callback
-  })
-  useEffect(() => {
-    const currentCallback = () => {
-      savedCallback.current()
-    }
-    const listen = history.listen(() => {
-      currentCallback()
-    })
-    return () => {
-      listen()
-    }
-  }, [history])
-}
-
 const RouterComp = ({ container, routeProps }: { container: CustomRouter.Route; routeProps: any }) => {
   const { pathname = '' } = useLocation()
   if (container.name === 'Address' && isChainTypeError(pathname.substring(pathname.lastIndexOf('/') + 1))) {
@@ -417,34 +393,16 @@ class PageErrorBoundary extends Component<PageErrorBoundaryProps, PageErrorBound
 }
 
 export default () => {
-  const isMobile = useIsMobile()
-  const dispatch = useDispatch()
-  const { components } = useAppState()
-  const { mobileMenuVisible } = components
-
   useRouter(() => {
     window.scrollTo(0, 0)
   })
 
-  useRouterLocation(() => {
-    if (mobileMenuVisible) {
-      dispatch({
-        type: ComponentActions.UpdateHeaderMobileMenuVisible,
-        payload: {
-          mobileMenuVisible: false,
-        },
-      })
-    }
-  })
-
   return (
     <Router>
       <Route
         render={(props: any) => (
           <Page>
-            <Alert />
             <Header />
-            <Sheet />
             <Suspense fallback={<span />}>
               <PageErrorBoundary>
                 <Switch location={props.location}>
@@ -458,7 +416,7 @@ export default () => {
                   <Redirect from="*" to="/404" />
                 </Switch>
               </PageErrorBoundary>
-              {!(isMobile && mobileMenuVisible) && <Footer />}
+              <Footer />
             </Suspense>
           </Page>
         )}
diff --git a/src/service/app/address.ts b/src/service/app/address.ts
deleted file mode 100644
index fd87ef18f..000000000
--- a/src/service/app/address.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { AppDispatch } from '../../contexts/reducer'
-import { AppActions } from '../../contexts/actions'
-import { fetchTipBlockNumber } from '../http/fetcher'
-
-export const getTipBlockNumber = (dispatch: AppDispatch) => {
-  fetchTipBlockNumber().then((wrapper: Response.Wrapper<State.Statistics> | null) => {
-    if (wrapper) {
-      dispatch({
-        type: AppActions.UpdateTipBlockNumber,
-        payload: {
-          tipBlockNumber: parseInt(wrapper.attributes.tipBlockNumber, 10),
-        },
-      })
-    }
-  })
-}
diff --git a/src/service/app/alert.ts b/src/service/app/alert.ts
deleted file mode 100644
index 290c48e66..000000000
--- a/src/service/app/alert.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { fetchMaintenanceInfo } from '../http/fetcher'
-import { AppDispatch } from '../../contexts/reducer'
-import { AppActions } from '../../contexts/actions'
-
-export const getMaintenanceInfo = (dispatch: AppDispatch) => {
-  fetchMaintenanceInfo().then((wrapper: Response.Wrapper<State.MaintenanceInfo> | null) => {
-    if (wrapper) {
-      const { maintenanceInfo = null } = wrapper.attributes
-      dispatch({
-        type: AppActions.UpdateAppErrors,
-        payload: {
-          appError: {
-            type: 'Maintenance',
-            message: maintenanceInfo ? [maintenanceInfo.startAt, maintenanceInfo.endAt] : [],
-          },
-        },
-      })
-    }
-  })
-}
-
-export default {
-  getMaintenanceInfo,
-}
diff --git a/src/service/app/blockchain.ts b/src/service/app/blockchain.ts
index 1408c9772..79b15be1d 100644
--- a/src/service/app/blockchain.ts
+++ b/src/service/app/blockchain.ts
@@ -1,6 +1,5 @@
 import { fetchBlockchainInfo } from '../http/fetcher'
-import { AppDispatch } from '../../contexts/reducer'
-import { AppActions } from '../../contexts/actions'
+import { setChainAlerts } from '../../components/Sheet'
 
 const alertNotEmpty = (wrapper: Response.Wrapper<State.BlockchainInfo> | null): boolean =>
   wrapper !== null &&
@@ -12,30 +11,16 @@ const alertNotEmpty = (wrapper: Response.Wrapper<State.BlockchainInfo> | null):
 
 const ALERT_TO_FILTER_OUT = 'CKB v0.105.* have bugs. Please upgrade to the latest version.'
 
-export const handleBlockchainAlert = (dispatch: AppDispatch) => {
+export const handleBlockchainAlert = () => {
   fetchBlockchainInfo().then((wrapper: Response.Wrapper<State.BlockchainInfo> | null) => {
     if (alertNotEmpty(wrapper)) {
-      dispatch({
-        type: AppActions.UpdateAppErrors,
-        payload: {
-          appError: {
-            type: 'ChainAlert',
-            message: wrapper!.attributes.blockchainInfo.alerts
-              .map(alert => alert.message)
-              .filter(msg => msg !== ALERT_TO_FILTER_OUT),
-          },
-        },
-      })
+      setChainAlerts(
+        wrapper!.attributes.blockchainInfo.alerts
+          .map(alert => alert.message)
+          .filter(msg => msg !== ALERT_TO_FILTER_OUT),
+      )
     } else {
-      dispatch({
-        type: AppActions.UpdateAppErrors,
-        payload: {
-          appError: {
-            type: 'ChainAlert',
-            message: [],
-          },
-        },
-      })
+      setChainAlerts([])
     }
   })
 }
diff --git a/src/service/app/statistics.ts b/src/service/app/statistics.ts
deleted file mode 100644
index ab8f01fc6..000000000
--- a/src/service/app/statistics.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { fetchStatistics } from '../http/fetcher'
-import { AppDispatch } from '../../contexts/reducer'
-import { PageActions } from '../../contexts/actions'
-
-export const getStatistics = (dispatch: AppDispatch) => {
-  return fetchStatistics().then((wrapper: Response.Wrapper<State.Statistics> | null) => {
-    if (wrapper) {
-      dispatch({
-        type: PageActions.UpdateStatistics,
-        payload: {
-          statistics: wrapper.attributes,
-        },
-      })
-    }
-  })
-}
-
-export default getStatistics
diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts
index 0606c8d74..813e9541e 100644
--- a/src/service/http/fetcher.ts
+++ b/src/service/http/fetcher.ts
@@ -477,11 +477,6 @@ export const fetchTokens = (page: number, size: number, sort?: string) =>
     },
   }).then((res: AxiosResponse) => toCamelcase<Response.Response<Response.Wrapper<State.UDT>[]>>(res.data))
 
-export const fetchMaintenanceInfo = () =>
-  axiosIns(`/statistics/maintenance_info`).then((res: AxiosResponse) =>
-    toCamelcase<Response.Wrapper<State.MaintenanceInfo>>(res.data.data),
-  )
-
 export const exportTransactions = ({
   type,
   id,
diff --git a/src/service/http/interceptors.ts b/src/service/http/interceptors.ts
index 7a9507abd..a562c43db 100644
--- a/src/service/http/interceptors.ts
+++ b/src/service/http/interceptors.ts
@@ -1,40 +1,22 @@
 import { AxiosError } from 'axios'
-import { useHistory } from 'react-router-dom'
 import { axiosIns } from './fetcher'
 import i18n from '../../utils/i18n'
-import { AppDispatch } from '../../contexts/reducer'
-import { AppActions } from '../../contexts/actions'
+import { setNetworkErrMsgs } from '../../components/Sheet'
 
 let timeout: ReturnType<typeof setTimeout> | null
 
-const updateNetworkError = (dispatch: AppDispatch, errMessage = 'toast.invalid_network') => {
+const updateNetworkError = (errMessage = 'toast.invalid_network') => {
   if (timeout) {
     clearTimeout(timeout)
   }
   timeout = setTimeout(() => {
-    dispatch({
-      type: AppActions.UpdateAppErrors,
-      payload: {
-        appError: {
-          type: 'Network',
-          message: [],
-        },
-      },
-    })
+    setNetworkErrMsgs([])
     timeout = null
   }, 2000)
-  dispatch({
-    type: AppActions.UpdateAppErrors,
-    payload: {
-      appError: {
-        type: 'Network',
-        message: [i18n.t(errMessage)],
-      },
-    },
-  })
+  setNetworkErrMsgs([i18n.t(errMessage)])
 }
 
-export const initAxiosInterceptors = (dispatch: AppDispatch, history: ReturnType<typeof useHistory>) => {
+export const initAxiosInterceptors = () => {
   axiosIns.interceptors.request.use(
     config => {
       if (config.method === 'get') {
@@ -55,32 +37,21 @@ export const initAxiosInterceptors = (dispatch: AppDispatch, history: ReturnType
         const { message }: { message: string } = error.response.data
         switch (error.response.status) {
           case 503:
-            if (message) {
-              dispatch({
-                type: AppActions.UpdateAppErrors,
-                payload: {
-                  appError: {
-                    type: 'Maintain',
-                    message: [message],
-                  },
-                },
-              })
-            }
-            history.replace('/maintain')
+            updateNetworkError(message || undefined)
             break
           case 422:
           case 404:
           case 400:
             break
           case 429:
-            updateNetworkError(dispatch, 'toast.too_many_request')
+            updateNetworkError('toast.too_many_request')
             break
           default:
-            updateNetworkError(dispatch)
+            updateNetworkError()
             break
         }
       } else {
-        updateNetworkError(dispatch)
+        updateNetworkError()
       }
       return Promise.reject(error)
     },
diff --git a/src/services/ExplorerService/hooks.ts b/src/services/ExplorerService/hooks.ts
new file mode 100644
index 000000000..7eff9d9ab
--- /dev/null
+++ b/src/services/ExplorerService/hooks.ts
@@ -0,0 +1,10 @@
+import { useObservableState } from 'observable-hooks'
+import { explorerService } from '.'
+
+export function useStatistics() {
+  return useObservableState(explorerService.latestStatistics$)
+}
+
+export function useLatestBlockNumber() {
+  return useObservableState(explorerService.latestBlockNumber$)
+}
diff --git a/src/services/ExplorerService/index.ts b/src/services/ExplorerService/index.ts
new file mode 100644
index 000000000..989322703
--- /dev/null
+++ b/src/services/ExplorerService/index.ts
@@ -0,0 +1,67 @@
+import { BehaviorSubject, Subscription, map, switchMap, timer } from 'rxjs'
+import { fetchStatistics, fetchTipBlockNumber } from '../../service/http/fetcher'
+import { BLOCK_POLLING_TIME } from '../../constants/common'
+
+const initStatistics: State.Statistics = {
+  tipBlockNumber: '0',
+  averageBlockTime: '0',
+  currentEpochDifficulty: '0',
+  hashRate: '0',
+  epochInfo: {
+    epochNumber: '0',
+    epochLength: '0',
+    index: '0',
+  },
+  estimatedEpochTime: '0',
+  transactionsLast24Hrs: '0',
+  transactionsCountPerMinute: '0',
+  reorgStartedAt: null,
+}
+
+class ExplorerService {
+  // Here, we can use an `Observable` with `shareReplay` to automatically start the subscription.
+  // However, in order to get the value from the Observable, we must subscribe to it.
+  // This process usually makes the code asynchronous, and the Observable is a type that may have a null value,
+  // so we need to do related logic, which will make the overall code design complex.
+  // Therefore, we choose to implement it with a Subject here.
+  latestStatistics$ = new BehaviorSubject<State.Statistics>(initStatistics)
+
+  // Although the data is also available in latestStatistics$, it seems to have a longer caching time,
+  // so another API is used here to obtain it separately.
+  latestBlockNumber$ = new BehaviorSubject<number>(0)
+
+  private callbacksAtStop?: Subscription
+
+  constructor() {
+    this.start()
+  }
+
+  start() {
+    this.callbacksAtStop = new Subscription()
+    this.callbacksAtStop.add(
+      timer(0, BLOCK_POLLING_TIME)
+        .pipe(
+          switchMap(fetchStatistics),
+          map(wrapper => wrapper.attributes),
+        )
+        .subscribe(this.latestStatistics$),
+    )
+
+    this.callbacksAtStop.add(
+      timer(0, BLOCK_POLLING_TIME)
+        .pipe(
+          switchMap(fetchTipBlockNumber),
+          map(wrapper => Number(wrapper.attributes.tipBlockNumber)),
+        )
+        .subscribe(this.latestBlockNumber$),
+    )
+  }
+
+  stop() {
+    this.callbacksAtStop?.unsubscribe()
+  }
+}
+
+export const explorerService = new ExplorerService()
+
+export * from './hooks'
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index bfc5436aa..d0af2140a 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -586,57 +586,16 @@ declare namespace State {
     transactionsStatus: FetchStatus
   }
 
-  export interface PageState {
-    statistics: Statistics
-  }
-
-  export interface PagePayload extends PageState {}
-
   export type TransactionCsvExportType = 'address_transactions' | 'blocks' | 'udts' | 'nft'
 
-  export interface App {
-    toast: ToastMessage | null
-    appErrors: [
-      { type: 'Network'; message: string[] },
-      { type: 'ChainAlert'; message: string[] },
-      { type: 'Maintenance'; message: string[] },
-    ]
-    tipBlockNumber: number
-
-    language: 'en' | 'zh'
-    primaryColor: string
-    secondaryColor: string
-    chartColor: {
-      areaColor: string
-      colors: string[]
-      moreColors: string[]
-      totalSupplyColors: string[]
-      daoColors: string[]
-      secondaryIssuanceColors: string[]
-      liquidityColors: string[]
-    }
-  }
-
-  export interface AppPayload extends App, ToastMessage {
-    appError: AppError
-  }
-
-  export interface Components {
-    mobileMenuVisible: boolean
-    headerSearchBarVisible: boolean
-    maintenanceAlertVisible: boolean
-  }
-
-  export interface AppState extends PageState {
-    app: App
-    components: Components
-  }
-
-  export interface MaintenanceInfo {
-    maintenanceInfo: {
-      startAt: string
-      endAt: string
-    }
+  export interface ChartColor {
+    areaColor: string
+    colors: string[]
+    moreColors: string[]
+    totalSupplyColors: string[]
+    daoColors: string[]
+    secondaryIssuanceColors: string[]
+    liquidityColors: string[]
   }
 
   type SortOrderTypes = 'asc' | 'desc'
diff --git a/src/utils/state.ts b/src/utils/state.ts
new file mode 100644
index 000000000..2ed705eb3
--- /dev/null
+++ b/src/utils/state.ts
@@ -0,0 +1,44 @@
+/**
+ * Since there are currently few places where global state is used, and they are all simple scenarios,
+ * here we use RxJS to implement a simple global state management to avoid introducing too much complexity.
+ * If more complex scenarios need to be handled in the future, zustand can be considered,
+ * which supports asynchronous processing, computed properties, and is framework-agnostic.
+ */
+import { useObservableState } from 'observable-hooks'
+import { Dispatch, SetStateAction, useCallback } from 'react'
+import { BehaviorSubject } from 'rxjs'
+
+export type GlobalState<T> = BehaviorSubject<T>
+
+export function createGlobalState<T>(initState: T): GlobalState<T> {
+  return new BehaviorSubject<T>(initState)
+}
+
+export function setGlobalState<T>(globalState: GlobalState<T>, value: T) {
+  globalState.next(value)
+}
+
+export function getGlobalState<T>(globalState: GlobalState<T>): T {
+  return globalState.getValue()
+}
+
+export function createGlobalStateSetter<T>(globalState: GlobalState<T>): (value: T) => void {
+  return (value: T) => setGlobalState(globalState, value)
+}
+
+export function useGlobalState<T>(globalState: GlobalState<T>): [T, Dispatch<SetStateAction<T>>] {
+  const state = useObservableState(globalState)
+
+  const setState = useCallback<Dispatch<SetStateAction<T>>>(
+    (state: T | ((prevState: T) => T)) => {
+      // TODO: Here, `as` is used because `T` does not have a constraint to prohibit function types of states.
+      // However, implementing this constraint is difficult, so `as` is used for now.
+      const finalState =
+        typeof state === 'function' ? (state as (prevState: T) => T)(getGlobalState(globalState)) : state
+      globalState.next(finalState)
+    },
+    [globalState],
+  )
+
+  return [state, setState]
+}
diff --git a/yarn.lock b/yarn.lock
index 6cb83ded4..026aea414 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9029,6 +9029,11 @@ oblivious-set@1.0.0:
   resolved "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
   integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
 
+observable-hooks@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/observable-hooks/-/observable-hooks-4.2.3.tgz#69e3353caafd7887ad9030bd440b053304e8d2d1"
+  integrity sha512-d6fYTIU+9sg1V+CT0GhgoE/ntjIqcy9DGaYGE6ELGVP4ojaWIEsaLvL/05hLOM+AL7aySN4DCTLvj6dDF9T8XA==
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"

From 3365797ab157d2c7ca649185e7566e3873911ad3 Mon Sep 17 00:00:00 2001
From: WhiteMind <WhiteMind@qq.com>
Date: Sat, 7 Oct 2023 15:38:30 +0800
Subject: [PATCH 6/9] fix: stylelint ineffectiveness and differences in
 stylelint execution on different os (#107)

* fix: stylelint ineffectiveness and differences in stylelint execution on different os

* chore: format by stylelint

* fix: manually fixing some stylelint issues that can't be fixed automatically

* feat: stylelint only exec from the staged files

* fix: code error caused by merge PR #103
---
 .husky/pre-commit                             |   3 +-
 .stylelintrc.js                               |  64 +++++
 .stylelintrc.json                             |   9 -
 package.json                                  |   9 +-
 src/assets/fonts/fonts.css                    |   2 +-
 src/components/Banner/index.module.scss       |   3 +-
 .../Card/HashCard/styles.module.scss          |   9 +-
 src/components/Card/TitleCard/styled.tsx      |   3 +-
 .../MaintainAlert/styles.module.scss          |   2 +-
 .../NftCollectionInventory/styles.module.scss |  10 +-
 .../NftCollectionOverview/styles.module.scss  |   7 +-
 .../NftCollectionTransfers/styles.module.scss |  19 +-
 .../NftHolderList/styles.module.scss          |  13 +-
 .../NftItemTransfers/styles.module.scss       |  19 +-
 src/components/Pagination/styled.tsx          |   2 +-
 .../PaginationWithRear/styles.module.scss     |  13 +-
 src/components/SortButton/styles.module.scss  |   1 +
 src/components/Table/styled.tsx               |   2 +-
 src/components/Text/index.module.scss         |   4 +-
 .../ComparedToMaxTooltip/styles.module.scss   |  11 +-
 .../TransactionItemCell/index.module.scss     |   8 +-
 .../TransactionLiteIncome/index.module.scss   |   5 +-
 .../TransactionLiteItem/index.module.scss     |  26 +-
 src/index.css                                 |  17 +-
 src/pages/404/index.module.scss               |   2 +-
 src/pages/Address/styles.module.scss          |  43 +++-
 src/pages/BlockDetail/styles.module.scss      |  18 +-
 src/pages/BlockList/styles.module.scss        |   2 +
 src/pages/Error/index.module.scss             |   8 +-
 .../ExportTransactions/styles.module.scss     |  74 ++++--
 src/pages/FeeRateTracker/index.tsx            |   4 +-
 src/pages/FeeRateTracker/styles.module.scss   |  43 +++-
 src/pages/Home/TableCard/index.module.scss    |   2 +-
 src/pages/Home/index.module.scss              |  93 +++----
 .../NervosDao/DepositorRank/index.module.scss |   2 +-
 src/pages/NervosDao/styled.tsx                |   4 +-
 .../NftCollectionInfo/styles.module.scss      |  58 +++--
 src/pages/NftCollections/styles.module.scss   |  44 +++-
 src/pages/NftInfo/styles.module.scss          |  19 +-
 src/pages/Script/styles.module.scss           |  31 ++-
 src/pages/ScriptList/styles.module.scss       |  18 +-
 src/pages/SimpleUDT/styles.module.scss        |  22 +-
 src/pages/Tokens/styled.tsx                   |  10 +-
 .../TransactionCell/styles.module.scss        |   1 +
 .../TransactionCellList/styles.module.scss    |   2 +
 .../TransactionCellScript/styled.tsx          |   1 +
 src/pages/TransactionList/index.module.scss   |  10 +-
 yarn.lock                                     | 233 +++++++++++++++++-
 48 files changed, 758 insertions(+), 247 deletions(-)
 create mode 100644 .stylelintrc.js
 delete mode 100644 .stylelintrc.json

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 6895490a2..45a45ee2f 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,6 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint:css
+yarn lint-staged
 yarn test
-npx lint-staged
diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 000000000..d30228a72
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,64 @@
+const package = require('./package.json')
+
+module.exports = {
+  customSyntax: 'postcss-scss',
+  extends: ['stylelint-config-standard'],
+  rules: {
+    'no-empty-source': null,
+    // Due to the large number of non-standard names previously used, it is not possible to quickly correct all names,
+    // so these rules have been temporarily disabled.
+    'selector-class-pattern': null,
+    'selector-id-pattern': null,
+    'custom-property-pattern': null,
+    // This rule provides little benefit relative to the cost of implementing it, so it has been disabled.
+    'no-descending-specificity': null,
+
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        // to support `:global`
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+  },
+
+  overrides: [
+    {
+      files: ['*.scss', '**/*.scss'],
+      extends: ['stylelint-config-standard-scss'],
+      rules: {
+        'scss/dollar-variable-pattern': null,
+      },
+    },
+    {
+      files: ['*.tsx', '**/*.tsx'],
+      customSyntax: 'postcss-styled-syntax',
+      // Currently, it is difficult to integrate postcss into styled-components to achieve CSS compatibility, unless a complex but not robust implementation is done manually.
+      // However, considering the implementation cost and the possibility that we may gradually abandon styled-components in the future, we do not adopt this solution.
+      // Therefore, without postcss to automatically handle compatibility, we need to handle it manually and avoid introducing syntax that is too high for stylelint.
+      // So here we introduce stylelint-no-unsupported-browser-features to help identify unsupported features and manually disable some stylelint rules that involve high-version features.
+      plugins: ['stylelint-no-unsupported-browser-features'],
+      rules: {
+        'media-feature-range-notation': null,
+        'plugin/no-unsupported-browser-features': [
+          true,
+          {
+            browsers: package.browserslist,
+            // TODO: Perhaps the browserslist should be adjusted to a more reasonable range, at least to a level that is compatible with CSS variables.
+            ignore: [
+              'css-nesting',
+              'css-sticky',
+              'css-variables',
+              'mdn-text-decoration-shorthand',
+              'css-unset-value',
+              'flexbox-gap',
+              'css-font-stretch',
+              'css-overscroll-behavior',
+            ],
+            ignorePartialSupport: true,
+          },
+        ],
+      },
+    },
+  ],
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
deleted file mode 100644
index 9b3086224..000000000
--- a/.stylelintrc.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "customSyntax": "postcss-styled-syntax",
-  "extends": ["stylelint-config-recommended", "stylelint-config-styled-components", "stylelint-config-standard"],
-  "rules": {
-    "no-empty-source": null,
-    "selector-class-pattern": null,
-    "selector-id-pattern": null
-  }
-}
diff --git a/package.json b/package.json
index 866ed5a75..de1db4932 100644
--- a/package.json
+++ b/package.json
@@ -64,15 +64,17 @@
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",
+    "postcss-scss": "4.0.8",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
     "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-no-unsupported-browser-features": "7.0.0",
     "stylelint-processor-styled-components": "^1.10.0",
     "timezone-mock": "^1.1.4",
     "ts-jest": "27.1.5",
@@ -80,8 +82,6 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "lint": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:css": "stylelint src/**/*.tsx",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --watchAll=false",
     "eject": "react-app-rewired eject",
@@ -105,6 +105,7 @@
   ],
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",
-    "*.{ts,tsx,json,html,scss}": "prettier --write"
+    "*.{ts,tsx,json,html,scss}": "prettier --write",
+    "*.{scss,css,tsx}": "stylelint --fix"
   }
 }
diff --git a/src/assets/fonts/fonts.css b/src/assets/fonts/fonts.css
index 64582cb8f..e32583b1d 100644
--- a/src/assets/fonts/fonts.css
+++ b/src/assets/fonts/fonts.css
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'Lato';
+  font-family: Lato;
   src: local('Lato'), url('./Lato-Regular.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
diff --git a/src/components/Banner/index.module.scss b/src/components/Banner/index.module.scss
index e98dc92b9..88bd18fa2 100644
--- a/src/components/Banner/index.module.scss
+++ b/src/components/Banner/index.module.scss
@@ -9,7 +9,8 @@ $backgroudColor: #232323;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 100%;
-  @media (max-width: 750px) {
+
+  @media (width <= 750px) {
     background-image: url('../../assets/ckb_explorer_banner_phone.svg');
   }
 }
diff --git a/src/components/Card/HashCard/styles.module.scss b/src/components/Card/HashCard/styles.module.scss
index a709f450d..62b91cc6f 100644
--- a/src/components/Card/HashCard/styles.module.scss
+++ b/src/components/Card/HashCard/styles.module.scss
@@ -9,13 +9,16 @@
     width: 22px;
     height: 22px;
     pointer-events: none;
+
     path {
       fill: #999;
     }
   }
-  @media screen and (max-width: 750px) {
+
+  @media screen and (width <= 750px) {
     height: 22px;
     margin-left: 2px;
+
     svg {
       width: 16px;
       height: 16px;
@@ -34,9 +37,11 @@
   cursor: pointer;
   width: 22px;
   height: 22px;
+
   &:hover {
     color: var(--primary-color);
   }
+
   svg {
     pointer-events: none;
   }
@@ -62,7 +67,7 @@
   font-size: 16px;
   font-weight: 500;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     max-width: 90px;
     font-size: 13px;
   }
diff --git a/src/components/Card/TitleCard/styled.tsx b/src/components/Card/TitleCard/styled.tsx
index 5be66eb68..8e057da79 100644
--- a/src/components/Card/TitleCard/styled.tsx
+++ b/src/components/Card/TitleCard/styled.tsx
@@ -41,8 +41,9 @@ export const TitleCardPanel = styled.div`
 
     @media (max-width: 750px) {
       flex-direction: column-reverse;
+
       > div:first-child {
-        padding: 16px 0 0 0;
+        padding: 16px 0 0;
         justify-content: flex-end;
       }
     }
diff --git a/src/components/MaintainAlert/styles.module.scss b/src/components/MaintainAlert/styles.module.scss
index bb4a92fbf..c50fa3457 100644
--- a/src/components/MaintainAlert/styles.module.scss
+++ b/src/components/MaintainAlert/styles.module.scss
@@ -12,7 +12,7 @@
   background-color: #fa8f00;
   z-index: 9;
 
-  @media screen and (max-width: 800px) {
+  @media screen and (width <= 800px) {
     text-align: left;
   }
 }
diff --git a/src/components/NftCollectionInventory/styles.module.scss b/src/components/NftCollectionInventory/styles.module.scss
index 66db8fa78..57d796897 100644
--- a/src/components/NftCollectionInventory/styles.module.scss
+++ b/src/components/NftCollectionInventory/styles.module.scss
@@ -24,21 +24,25 @@
     border-radius: 8px;
     object-fit: cover;
   }
+
   .tokenId,
   .owner {
     display: flex;
     width: 100%;
     line-height: 1em;
+
     span:first-of-type {
       flex-basis: 80px;
       flex-shrink: 0;
     }
+
     span,
     a {
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
+
   .tokenId {
     padding-top: 15px;
     padding-bottom: 10px;
@@ -50,15 +54,15 @@
     }
   }
 
-  @media screen and (max-width: 1280px) {
+  @media screen and (width <= 1280px) {
     grid-template-columns: repeat(3, 1fr);
   }
 
-  @media screen and (max-width: 860px) {
+  @media screen and (width <= 860px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media screen and (max-width: 540px) {
+  @media screen and (width <= 540px) {
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/components/NftCollectionOverview/styles.module.scss b/src/components/NftCollectionOverview/styles.module.scss
index 3ea56a85a..a5ff0c30c 100644
--- a/src/components/NftCollectionOverview/styles.module.scss
+++ b/src/components/NftCollectionOverview/styles.module.scss
@@ -3,7 +3,7 @@
   background-color: #fff;
   margin-bottom: 18px;
   padding: 20px 40px;
-  box-shadow: #dfdfdf 2px 2px 6px 0px;
+  box-shadow: #dfdfdf 2px 2px 6px 0;
   border-radius: 6px;
 
   .header {
@@ -11,6 +11,7 @@
     font-size: 20px;
     font-weight: 700;
     line-height: 30px;
+
     img {
       width: 30px;
       height: 30px;
@@ -35,13 +36,13 @@
   color: #494949;
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (width <= 1200px) {
   .container {
     margin: 40px 45px 24px;
   }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (width <= 750px) {
   .container {
     margin: 40px 8px 24px;
   }
diff --git a/src/components/NftCollectionTransfers/styles.module.scss b/src/components/NftCollectionTransfers/styles.module.scss
index 40d6acccd..8f147cf2a 100644
--- a/src/components/NftCollectionTransfers/styles.module.scss
+++ b/src/components/NftCollectionTransfers/styles.module.scss
@@ -10,6 +10,7 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
@@ -81,32 +82,39 @@
   ul,
   dl {
     list-style: none;
+
     .item {
       padding-bottom: 16px;
     }
   }
+
   li {
     padding: 16px;
+
     &:not(:last-child) {
       border-bottom: 1px solid #d8d8d8;
     }
   }
+
   dl > div {
     display: flex;
     width: 100%;
   }
+
   dt {
     width: 100px;
   }
+
   dd {
     text-align: right;
     flex: 1;
   }
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (width <= 1200px) {
     table {
       display: none;
     }
+
     ul {
       display: block;
     }
@@ -120,13 +128,16 @@
 .tokenId {
   overflow: hidden;
   text-overflow: ellipsis;
-  @media screen and (max-width: 1800px) {
+
+  @media screen and (width <= 1800px) {
     max-width: 200px;
   }
-  @media screen and (max-width: 1400px) {
+
+  @media screen and (width <= 1400px) {
     max-width: 120px;
   }
-  @media screen and (max-width: 1200px) {
+
+  @media screen and (width <= 1200px) {
     max-width: 80px;
   }
 }
diff --git a/src/components/NftHolderList/styles.module.scss b/src/components/NftHolderList/styles.module.scss
index 506d67bad..5a7641276 100644
--- a/src/components/NftHolderList/styles.module.scss
+++ b/src/components/NftHolderList/styles.module.scss
@@ -11,6 +11,7 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
@@ -18,10 +19,11 @@
       text-transform: capitalize;
       white-space: nowrap;
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         &:first-child {
           padding-right: 0;
         }
+
         &:last-child {
           padding-left: 0;
         }
@@ -49,7 +51,7 @@
     max-width: 0.25vw;
 
     &:last-child {
-      @media screen and (max-width: 750px) {
+      @media screen and (width <= 750px) {
         text-align: right;
       }
     }
@@ -58,7 +60,8 @@
     &:last-child {
       padding-left: 40px;
       padding-right: 40px;
-      @media screen and (max-width: 750px) {
+
+      @media screen and (width <= 750px) {
         padding-left: 16px;
         padding-right: 16px;
       }
@@ -75,13 +78,13 @@
   font-family: inherit;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (width >= 1024px) {
   .addr:last-child {
     display: none;
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (width <= 1024px) {
   .addr:first-child {
     display: none;
   }
diff --git a/src/components/NftItemTransfers/styles.module.scss b/src/components/NftItemTransfers/styles.module.scss
index 85835b945..69f40bfc9 100644
--- a/src/components/NftItemTransfers/styles.module.scss
+++ b/src/components/NftItemTransfers/styles.module.scss
@@ -2,10 +2,6 @@
   background: #fff;
   border-top-right-radius: 6px;
   padding: 0 15px;
-  ul {
-    margin: 0;
-    margin-bottom: 4px;
-  }
 
   table {
     position: relative;
@@ -17,6 +13,7 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
@@ -24,7 +21,8 @@
       text-transform: capitalize;
       white-space: nowrap;
     }
-    &:after {
+
+    &::after {
       position: absolute;
       left: -15px;
       top: 44px;
@@ -91,37 +89,46 @@
 
   ul {
     display: none;
+    margin: 0;
+    margin-bottom: 4px;
   }
 
   ul,
   dl {
     list-style: none;
+
     .item {
       padding-bottom: 16px;
     }
   }
+
   li {
     padding: 16px;
+
     &:not(:last-child) {
       border-bottom: 1px solid #d8d8d8;
     }
   }
+
   dl > div {
     display: flex;
     width: 100%;
   }
+
   dt {
     width: 100px;
   }
+
   dd {
     text-align: right;
     flex: 1;
   }
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (width <= 1200px) {
     table {
       display: none;
     }
+
     ul {
       display: block;
     }
diff --git a/src/components/Pagination/styled.tsx b/src/components/Pagination/styled.tsx
index 19ba57c9a..89b274e84 100644
--- a/src/components/Pagination/styled.tsx
+++ b/src/components/Pagination/styled.tsx
@@ -203,7 +203,7 @@ export const PaginationRightItem = styled.div`
       background: #ddd;
     }
 
-    @media (max-max-width: 750px) {
+    @media (max-width: 750px) {
       margin-left: 10px;
       font-size: 12px;
     }
diff --git a/src/components/PaginationWithRear/styles.module.scss b/src/components/PaginationWithRear/styles.module.scss
index 2d8847412..361b51cb5 100644
--- a/src/components/PaginationWithRear/styles.module.scss
+++ b/src/components/PaginationWithRear/styles.module.scss
@@ -1,13 +1,12 @@
 .paginationWithRear {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   justify-content: flex-end;
   width: 100%;
   margin-top: 4px;
   background-color: white;
   border-radius: 0 0 6px 6px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
   padding: 0 40px;
 
   .pagination {
@@ -15,7 +14,8 @@
     box-shadow: none;
     flex: 1 0.8 auto;
     min-width: 650px;
-    @media (max-width: 750px) {
+
+    @media (width <= 750px) {
       min-width: auto;
       border-radius: 0;
     }
@@ -26,6 +26,7 @@
       max-width: 120px;
     }
   }
+
   :global(.pagination__goto__page) {
     min-width: 42px;
   }
@@ -34,7 +35,7 @@
     display: flex;
     justify-content: flex-end;
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       height: 50px;
       border-radius: 0 0 6px 6px;
       border-top: 1px solid #f0f0f0;
@@ -42,7 +43,7 @@
     }
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     justify-content: flex-end;
     margin-top: 5px;
     padding: 0 20px;
diff --git a/src/components/SortButton/styles.module.scss b/src/components/SortButton/styles.module.scss
index 65f4f075b..ee10ee868 100644
--- a/src/components/SortButton/styles.module.scss
+++ b/src/components/SortButton/styles.module.scss
@@ -13,6 +13,7 @@
       fill: var(--primary-color);
     }
   }
+
   &[data-order='asc'] {
     svg > path:last-child {
       fill: var(--primary-color);
diff --git a/src/components/Table/styled.tsx b/src/components/Table/styled.tsx
index 39fd2cc12..ddda06be3 100644
--- a/src/components/Table/styled.tsx
+++ b/src/components/Table/styled.tsx
@@ -29,7 +29,7 @@ export const TableTitleRowItem = styled.div`
     border: none;
     outline: none;
     background-color: transparent;
-    color: #333333;
+    color: #333;
     font-size: 18px;
     font-weight: 450;
     text-align: center;
diff --git a/src/components/Text/index.module.scss b/src/components/Text/index.module.scss
index 1c450c9da..9a1c829cc 100644
--- a/src/components/Text/index.module.scss
+++ b/src/components/Text/index.module.scss
@@ -2,7 +2,7 @@
   color: var(--primary-color);
   font-size: 14px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     font-size: 13px;
   }
 
@@ -10,7 +10,7 @@
     color: var(--primary-color);
     margin-top: 3px;
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       margin-top: 1px;
     }
   }
diff --git a/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss b/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss
index da93b4fc4..8cc5a6f97 100644
--- a/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss
+++ b/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss
@@ -1,7 +1,7 @@
 :global(.ant-tooltip) {
   max-width: 320px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     max-width: 250px;
   }
 }
@@ -11,32 +11,39 @@
     border-radius: 8px;
     mix-blend-mode: normal;
     padding: 10px 16px;
+
     > div {
       font-weight: 400;
       margin: 0;
+
       > div:first-child {
         font-size: 16px;
         line-height: 19px;
-        padding: 0 0 3px 0;
+        padding: 0 0 3px;
       }
+
       > div:nth-child(2) {
         font-size: 14px;
         line-height: 16px;
         padding: 3px 0;
       }
     }
+
     > div.inEpoch {
       margin-bottom: 10px;
+
       :global(.ant-progress-bg) {
         background-color: var(--primary-color);
       }
     }
+
     > div.inChain {
       :global(.ant-progress-bg) {
         background-color: #346dff;
       }
     }
   }
+
   hr {
     margin: 8px 0;
     opacity: 0.2;
diff --git a/src/components/TransactionItem/TransactionItemCell/index.module.scss b/src/components/TransactionItem/TransactionItemCell/index.module.scss
index 31e8cbf6e..fa77318dd 100644
--- a/src/components/TransactionItem/TransactionItemCell/index.module.scss
+++ b/src/components/TransactionItem/TransactionItemCell/index.module.scss
@@ -22,15 +22,15 @@
   min-width: 0;
   width: 260px;
 
-  @media (max-width: 1440px) {
+  @media (width <= 1440px) {
     width: 148px;
   }
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     width: 260px;
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     width: 460px;
   }
 }
@@ -39,7 +39,7 @@
   margin-left: 6px;
   width: 14px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     margin-bottom: 2px;
   }
 }
diff --git a/src/components/TransactionItem/TransactionLiteIncome/index.module.scss b/src/components/TransactionItem/TransactionLiteIncome/index.module.scss
index 22ae15c75..a7a471803 100644
--- a/src/components/TransactionItem/TransactionLiteIncome/index.module.scss
+++ b/src/components/TransactionItem/TransactionLiteIncome/index.module.scss
@@ -3,17 +3,20 @@
     font-weight: 500;
     font-size: 16px;
     line-height: 19px;
+
     > div:not(:last-child) {
       font-size: 14px;
       line-height: 16px;
     }
-    @media (min-width: 751px) and (max-width: 960px) {
+
+    @media (width >= 751px) and (width <= 960px) {
       > div:not(:last-child) {
         display: none;
       }
     }
   }
 }
+
 .increased {
   color: var(--primary-color);
 }
diff --git a/src/components/TransactionItem/TransactionLiteItem/index.module.scss b/src/components/TransactionItem/TransactionLiteItem/index.module.scss
index 007fee3d3..9ba70ddd5 100644
--- a/src/components/TransactionItem/TransactionLiteItem/index.module.scss
+++ b/src/components/TransactionItem/TransactionLiteItem/index.module.scss
@@ -1,6 +1,6 @@
 .transactionLitePanel {
   width: 100%;
-  background-color: #ffffff;
+  background-color: #fff;
   padding: 0 40px;
   display: flex;
 
@@ -33,26 +33,33 @@
       font-weight: 400;
       font-size: 16px;
       line-height: 19px;
-      color: #333333;
+      color: #333;
+
       &:first-child {
         width: 28%;
         padding-right: 20px;
-        @media (min-width: 1200px) {
+
+        @media (width >= 1200px) {
           padding-right: 50px;
         }
       }
+
       &:nth-child(2) {
         width: 13%;
       }
+
       &:nth-child(3) {
         width: 20%;
       }
+
       &:nth-child(4) {
         width: 27%;
+
         > span:last-child {
           margin-left: 16px;
         }
       }
+
       &:last-child {
         width: 12%;
         text-align: right;
@@ -60,37 +67,46 @@
       }
     }
   }
-  @media (max-width: 750px) {
+
+  @media (width <= 750px) {
     padding: 0 16px;
     margin-bottom: 4px;
+
     .transactionLiteRow {
       flex-direction: column;
       border-top: none;
       padding: 0;
+
       > div {
         width: 100% !important;
         padding: 16px 0 !important;
+
         > div:first-child {
-          color: #666666;
+          color: #666;
           margin-bottom: 8px;
         }
+
         &:not(:first-child) {
           border-top: 1px solid #f0f0f0;
         }
       }
+
       > div:first-child {
         > a > div {
           padding-right: 38px;
         }
       }
+
       > div:nth-child(4) {
         > span:last-child {
           margin-left: 24px;
         }
       }
+
       > div:last-child {
         text-align: left;
         width: 100%;
+
         > div:last-child > div {
           justify-content: flex-start;
         }
diff --git a/src/index.css b/src/index.css
index bbb6b93c9..ebdad4178 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import './assets/fonts/fonts.css';
+@import url('./assets/fonts/fonts.css');
 
 body {
   --primary-color: #00cc9b;
@@ -6,6 +6,7 @@ body {
   --primary-chiffon-color: #e6fcf7;
   --navbar-height: 64px;
   --table-separator-color: #f5f5f5;
+
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
@@ -24,11 +25,11 @@ body[data-chain-type='testnet'] {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: Lato, sans-serif, Montserrat, PingFang SC, -apple-system;
+  font-family: Lato, sans-serif, Montserrat, "PingFang SC", -apple-system;
 }
 
 .monospace {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 *[role]:focus {
@@ -40,21 +41,21 @@ body[data-chain-type='testnet'] {
   margin: 0 120px;
 }
 
-@media (max-width: 1440px) {
+@media (width <= 1440px) {
   .container {
     width: auto;
     margin: 0 100px;
   }
 }
 
-@media (max-width: 1200px) {
+@media (width <= 1200px) {
   .container {
     width: auto;
     margin: 0 45px;
   }
 }
 
-@media (max-width: 750px) {
+@media (width <= 750px) {
   .container {
     width: auto;
     margin: 0 18px;
@@ -68,13 +69,13 @@ a {
   color: inherit;
 }
 
-@media (max-width: 750px) {
+@media (width <= 750px) {
   .rc-pagination-options-quick-jumper {
     display: none;
   }
 }
 
-@media (max-width: 750px) {
+@media (width <= 750px) {
   .ant-popover-inner-content {
     padding: 5px !important;
   }
diff --git a/src/pages/404/index.module.scss b/src/pages/404/index.module.scss
index 8237578b3..42172c089 100644
--- a/src/pages/404/index.module.scss
+++ b/src/pages/404/index.module.scss
@@ -9,7 +9,7 @@
   margin: 0 auto;
   display: block;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     width: 282px;
     height: 130px;
   }
diff --git a/src/pages/Address/styles.module.scss b/src/pages/Address/styles.module.scss
index 7a118ed89..160edf44c 100644
--- a/src/pages/Address/styles.module.scss
+++ b/src/pages/Address/styles.module.scss
@@ -1,11 +1,11 @@
 .addressWidthModify {
   max-width: 80%;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     max-width: 40%;
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     max-width: 100%;
   }
 }
@@ -13,32 +13,38 @@
 .transactionTitleCard {
   height: 80px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     height: 152px;
     flex-direction: column;
     align-items: flex-start;
     padding: 0;
+
     > div {
       display: flex;
       align-items: center;
       padding: 0 12px;
     }
+
     > div:first-child {
       margin: 0;
       height: 56px;
     }
+
     > div:last-child {
       width: 100%;
       order: 3;
       height: 92px;
+
       > div {
         width: 100%;
+
         > label {
           width: 50%;
         }
       }
     }
-    &:after {
+
+    &::after {
       content: ' ';
       order: 2;
       background: #ededed;
@@ -52,9 +58,11 @@
   display: flex;
   align-items: center;
   padding-right: 2.6rem;
+
   svg {
     cursor: pointer;
   }
+
   &[data-is-active='true'] {
     svg {
       path {
@@ -72,27 +80,33 @@
     font-weight: 400;
     font-size: 16px;
     line-height: 38px;
-    color: #333333;
+    color: #333;
     border: 1px solid #e5e5e5;
     box-shadow: none !important;
+
     &::before {
       content: none !important;
     }
+
     &:hover {
-      color: #333333;
-      background: #ffffff;
+      color: #333;
+      background: #fff;
     }
+
     &:first-child {
       border-radius: 4px 0 0 4px;
     }
+
     &:last-child {
       border-radius: 0 4px 4px 0;
     }
+
     &:global(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
-      background: #333333;
-      border-color: #333333 !important;
+      background: #333;
+      border-color: #333 !important;
+
       &:hover {
-        background: #333333;
+        background: #333;
       }
     }
   }
@@ -101,7 +115,7 @@
 .liteTransactionHeader {
   display: flex;
   width: 100%;
-  background-color: #ffffff;
+  background-color: #fff;
   margin-top: 4px;
   padding: 23px 40px 22px;
   flex-direction: row;
@@ -109,20 +123,25 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 19px;
-  color: #333333;
+  color: #333;
+
   > div {
     &:first-child {
       width: 28%;
     }
+
     &:nth-child(2) {
       width: 13%;
     }
+
     &:nth-child(3) {
       width: 20%;
     }
+
     &:nth-child(4) {
       width: 20%;
     }
+
     &:last-child {
       width: 19%;
       text-align: right;
diff --git a/src/pages/BlockDetail/styles.module.scss b/src/pages/BlockDetail/styles.module.scss
index 78e6778b5..ef289b782 100644
--- a/src/pages/BlockDetail/styles.module.scss
+++ b/src/pages/BlockDetail/styles.module.scss
@@ -1,46 +1,56 @@
 .blockNumber {
   display: flex;
   align-items: center;
+
   .prev,
   .next {
     display: flex;
     align-items: center;
+
     svg {
       rect {
         fill: var(--primary-color);
         opacity: 0.15;
       }
+
       path {
         stroke: var(--primary-color);
       }
     }
+
     &:hover {
       svg {
         rect {
           fill: var(--primary-color);
           opacity: 1;
         }
+
         path {
           stroke: #fff;
         }
       }
     }
+
     &[data-disabled='true'] {
       pointer-events: none;
+
       svg {
         rect {
           fill: #f0f0f0;
           opacity: 1;
         }
+
         path {
           stroke: #999;
         }
       }
     }
   }
+
   .prev {
     margin-right: 8px;
   }
+
   .next {
     margin-left: 8px;
     transform: rotate(0.5turn);
@@ -50,21 +60,22 @@
 .addressWidthModify {
   max-width: 80%;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     max-width: 40%;
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     max-width: 100%;
   }
 }
 
 .transactionTitleCard {
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     height: 110px;
+
     :global(.title__card__rear > div) {
       // hack default style of TitleCard
       padding: 0 !important;
@@ -75,6 +86,7 @@
       height: 12px;
       width: 12px;
     }
+
     input {
       padding-left: 38px;
     }
diff --git a/src/pages/BlockList/styles.module.scss b/src/pages/BlockList/styles.module.scss
index 639017514..b0712d109 100644
--- a/src/pages/BlockList/styles.module.scss
+++ b/src/pages/BlockList/styles.module.scss
@@ -2,11 +2,13 @@
   display: flex;
   margin-left: 8px;
   cursor: pointer;
+
   &[data-order='asc'] {
     svg > path:last-child {
       fill: var(--primary-color);
     }
   }
+
   &[data-order='desc'] {
     svg > path:first-child {
       fill: var(--primary-color);
diff --git a/src/pages/Error/index.module.scss b/src/pages/Error/index.module.scss
index 85657907d..50ec13058 100644
--- a/src/pages/Error/index.module.scss
+++ b/src/pages/Error/index.module.scss
@@ -10,14 +10,14 @@
 
 .pageCrashedError {
   width: 800px;
-  margin: 16px auto 0 auto;
+  margin: 16px auto 0;
 }
 
 .backHome {
   width: 152px;
   height: 48px;
   display: block;
-  font-family: 'Roboto';
+  font-family: Roboto, inherit, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -25,7 +25,7 @@
   text-align: center;
   text-transform: capitalize;
   color: #fff;
-  background: #333333;
+  background: #333;
   border-radius: 4px;
   margin: 40px auto;
   border: none;
@@ -44,7 +44,7 @@
   border: 1px dashed #9c9c9c;
   padding: 6px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     width: 228px;
     height: 108px;
   }
diff --git a/src/pages/ExportTransactions/styles.module.scss b/src/pages/ExportTransactions/styles.module.scss
index b30230eb9..e7372fa76 100644
--- a/src/pages/ExportTransactions/styles.module.scss
+++ b/src/pages/ExportTransactions/styles.module.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
 
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     margin: 0;
   }
 }
@@ -12,7 +12,8 @@
   display: flex;
   justify-content: center;
   margin-top: 40px;
-  @media screen and (max-width: 750px) {
+
+  @media screen and (width <= 750px) {
     margin-top: 20px;
     width: calc(100% - 32px);
     justify-content: start;
@@ -23,16 +24,18 @@
     font-size: 24px;
     line-height: 28px;
 
-    @media screen and (max-width: 750px) {
+    @media screen and (width <= 750px) {
       font-size: 20px;
       line-height: normal;
     }
   }
+
   > span:first-child {
-    color: #333333;
+    color: #333;
   }
+
   > span:last-child {
-    color: #999999;
+    color: #999;
   }
 }
 
@@ -47,10 +50,10 @@
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
-    color: #333333;
+    color: #333;
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     display: none;
   }
 }
@@ -65,7 +68,8 @@
   min-width: 342px;
   border-radius: 4px;
   background: white;
-  @media screen and (max-width: 750px) {
+
+  @media screen and (width <= 750px) {
     margin-top: 12px;
     margin-bottom: 20px;
     width: calc(100% - 32px);
@@ -76,18 +80,22 @@
     justify-content: center;
     width: 100%;
   }
+
   .exportHeader {
     flex-direction: column;
+
     > div:first-child {
       padding-top: 24px;
       padding-bottom: 4px;
-      @media screen and (max-width: 750px) {
+
+      @media screen and (width <= 750px) {
         padding: 16px 0;
       }
+
       text-align: center;
       font-weight: 500;
       font-size: 16px;
-      color: #333333;
+      color: #333;
     }
 
     :global(div.ant-tabs-nav-wrap) {
@@ -102,7 +110,7 @@
       justify-content: center;
       align-items: center;
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         width: 80px;
         margin-left: 10px;
         margin-right: 10px;
@@ -118,17 +126,17 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
-      color: #333333;
+      color: #333;
     }
 
     :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
       font-weight: 500;
       font-size: 14px;
       line-height: 16px;
-      color: #333333;
+      color: #333;
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       margin-top: 12px;
     }
   }
@@ -140,7 +148,7 @@
     margin-top: 16px;
     color: #666;
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       margin-top: 8px;
       flex-direction: column;
 
@@ -153,24 +161,30 @@
     .heightInputPanel {
       margin-left: 24px;
       margin-right: 24px;
-      @media screen and (max-width: 750px) {
+
+      @media screen and (width <= 750px) {
         margin-left: 16px;
         margin-right: 16px;
       }
+
       display: flex;
       flex-direction: column;
       width: 40%;
       max-width: 256px;
+
       :global(.ant-picker:hover) {
         border-radius: 4px;
+
         &:hover {
           border-color: var(--primary-color) !important;
         }
       }
+
       :global(.ant-input-number-affix-wrapper) {
         &:hover {
           border-color: var(--primary-color) !important;
         }
+
         border-radius: 4px;
       }
 
@@ -178,14 +192,15 @@
         display: none !important;
       }
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         width: 100%;
         max-width: 312px;
       }
 
       > div:first-child {
         margin-bottom: 12px;
-        @media (max-width: 750px) {
+
+        @media (width <= 750px) {
           margin-bottom: 8px;
         }
       }
@@ -220,7 +235,7 @@
       padding-top: 56px;
       padding-bottom: 40px;
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         padding: 24px 8px 16px;
         max-width: 312px;
       }
@@ -256,22 +271,26 @@
         max-width: 560px;
         font-size: 14px;
 
-        @media screen and (max-width: 750px) {
+        @media screen and (width <= 750px) {
           max-width: 312px;
         }
       }
+
       &.successHint {
-        border: 1px solid rgba(0, 204, 155, 1);
-        background: rgba(230, 252, 247, 1);
-        color: rgba(0, 204, 155, 1);
+        border: 1px solid rgb(0 204 155 / 100%);
+        background: rgb(230 252 247 / 100%);
+        color: rgb(0 204 155 / 100%);
+
         path {
-          fill: rgba(0, 204, 155, 1);
+          fill: rgb(0 204 155 / 100%);
         }
       }
+
       .hintText {
         line-height: 20px;
         word-break: break-all;
       }
+
       &.errorHint {
         border: 1px solid #ffa6a6;
         background: #fff2f2;
@@ -287,14 +306,17 @@
       margin-bottom: 56px;
       width: 152px;
       height: 48px;
+
       &[disabled] {
         opacity: 0.5;
         cursor: not-allowed;
       }
-      @media screen and (max-width: 750px) {
+
+      @media screen and (width <= 750px) {
         margin-top: 20px;
         margin-bottom: 24px;
       }
+
       background: var(--primary-color);
       color: white;
       border: none;
@@ -321,9 +343,11 @@
 
   :global(.ant-picker-today-btn) {
     color: var(--primary-color);
+
     &:hover {
       color: var(--primary-color);
     }
+
     &:active {
       color: var(--primary-color);
     }
diff --git a/src/pages/FeeRateTracker/index.tsx b/src/pages/FeeRateTracker/index.tsx
index 25d78a6f0..1ab2438aa 100644
--- a/src/pages/FeeRateTracker/index.tsx
+++ b/src/pages/FeeRateTracker/index.tsx
@@ -12,10 +12,10 @@ import {
   LastNDaysTransactionFeeRateChart,
 } from './FeeRateTrackerComp'
 import Loading from '../../components/Loading'
-import { useAppState } from '../../contexts/providers'
 import i18n from '../../utils/i18n'
 import { localeNumberString } from '../../utils/number'
 import { getFeeRateSamples } from '../../utils/chart'
+import { useStatistics } from '../../services/ExplorerService'
 
 const FeeRateTracker = () => {
   const lastFetchedTime = useRef(Number.MAX_SAFE_INTEGER)
@@ -23,7 +23,7 @@ const FeeRateTracker = () => {
   const [secondAfterUpdate, setSecondAfterUpdate] = useState<number>(0)
   const isMobile = useIsMobile()
 
-  const { statistics } = useAppState()
+  const statistics = useStatistics()
 
   const { data: transactionFeesStatistic } = useQuery<FeeRateTracker.TransactionFeesStatistic>(
     ['statistics-transaction_fees'],
diff --git a/src/pages/FeeRateTracker/styles.module.scss b/src/pages/FeeRateTracker/styles.module.scss
index 638f1b7df..94f94a579 100644
--- a/src/pages/FeeRateTracker/styles.module.scss
+++ b/src/pages/FeeRateTracker/styles.module.scss
@@ -1,7 +1,6 @@
 .feeRateTrackerPanel {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: center;
 
   .title {
@@ -9,7 +8,7 @@
     font-weight: 500;
     font-size: 24px;
     line-height: 28px;
-    color: #333333;
+    color: #333;
     margin: 40px 12px 16px;
   }
 
@@ -19,17 +18,19 @@
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 28px;
+
     > div {
       margin: 12px;
       display: flex;
       width: calc(50% - 24px);
       height: 375px;
-      background-color: #ffffff;
+      background-color: #fff;
       flex-direction: column;
       justify-content: center;
-      box-shadow: 0 4px 4px rgba(16, 16, 16, 0.05);
+      box-shadow: 0 4px 4px rgb(16 16 16 / 5%);
       border-radius: 4px;
     }
+
     .feeRateSection {
       position: relative;
 
@@ -39,7 +40,7 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
-        color: #666666;
+        color: #666;
         position: absolute;
         top: 0;
         right: 0;
@@ -70,6 +71,7 @@
             width: 32px;
             height: 32px;
           }
+
           > .priority {
             width: 80px;
             height: 30px;
@@ -81,46 +83,55 @@
             margin-top: 20px;
             margin-bottom: 20px;
           }
+
           > .shannonsPerByte {
-            color: #333333;
+            color: #333;
             font-weight: 500;
             font-size: 16px;
             line-height: 18px;
             margin-bottom: 12px;
             text-align: center;
           }
+
           > .secs {
-            color: #666666;
+            color: #666;
             font-weight: 400;
             font-size: 14px;
             line-height: 16px;
           }
         }
+
         .card.low {
           > .icon > svg > path {
             fill: #23bff0;
           }
+
           > .priority {
             color: #23bff0;
             background-color: #e8f9ff;
           }
         }
+
         .card.average {
           border-left: 1px solid;
           border-right: 1px solid;
           border-image: linear-gradient(to bottom, transparent 36%, #e5e5e5 36%, #e5e5e5 64%, transparent 64%) 1;
+
           > .icon > svg > path {
             fill: #00cc9b;
           }
+
           > .priority {
             color: #00cc9b;
             background-color: #e8fff1;
           }
         }
+
         .card.high {
           > .icon > svg > path {
             fill: #ff5656;
           }
+
           > .priority {
             color: #ff5656;
             background-color: #ffe8e8;
@@ -128,11 +139,12 @@
         }
       }
     }
+
     .chartTitle {
       display: flex;
       justify-content: center;
       text-align: center;
-      color: #333333;
+      color: #333;
       width: 100%;
       font-weight: 400;
       font-size: 16px;
@@ -140,18 +152,20 @@
       white-space: pre-line;
       padding: 24px;
     }
+
     .chart {
       height: 100%;
       width: 100%;
       font-size: 13px;
-      background-color: #ffffff;
+      background-color: #fff;
       box-shadow: 2px 2px 0 0 #dfdfdf;
     }
   }
 
-  @media (max-width: 1280px) {
+  @media (width <= 1280px) {
     .charts {
       flex-direction: column;
+
       > div {
         width: 100%;
         margin: 0 0 20px;
@@ -159,29 +173,34 @@
     }
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     .title {
       margin: 20px 0 12px;
       font-size: 20px;
       line-height: 23px;
     }
+
     .charts {
       width: 100%;
       margin: 0;
+
       .feeRateSection {
         height: auto;
 
         .updatedTimeCounter {
           padding: 16px;
         }
+
         .cards {
           margin-top: 48px;
           margin-bottom: 32px;
           flex-direction: column;
           align-items: center;
+
           .card {
             padding: 32px 0;
           }
+
           .card.average {
             border-width: 1px 0;
             border-style: solid;
diff --git a/src/pages/Home/TableCard/index.module.scss b/src/pages/Home/TableCard/index.module.scss
index eb55ad5aa..1f1772608 100644
--- a/src/pages/Home/TableCard/index.module.scss
+++ b/src/pages/Home/TableCard/index.module.scss
@@ -4,7 +4,7 @@
   font-size: 14px;
   margin-top: 3px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     font-size: 13px;
     margin-top: 1px;
   }
diff --git a/src/pages/Home/index.module.scss b/src/pages/Home/index.module.scss
index ccc0f3965..1e230baf0 100644
--- a/src/pages/Home/index.module.scss
+++ b/src/pages/Home/index.module.scss
@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     display: block;
   }
 
@@ -18,10 +18,11 @@
       margin-right: 8px;
     }
 
-    @media (max-width: 1200px) {
+    @media (width <= 1200px) {
       margin-bottom: 20px;
     }
-    @media (max-width: 375px) {
+
+    @media (width <= 375px) {
       font-size: 16px;
       margin-bottom: 14px;
     }
@@ -32,7 +33,7 @@
     width: 600px;
     flex-grow: 2;
 
-    @media (max-width: 1200px) {
+    @media (width <= 1200px) {
       width: 100%;
     }
   }
@@ -41,15 +42,15 @@
 .HomeStatisticBottomPanel {
   display: flex;
   padding: 20px 5px;
-  margin: 0px 0px 20px 0px;
-  box-shadow: 0 2px 6px 0 rgb(77, 77, 77, 0.2);
+  margin: 0 0 20px;
+  box-shadow: 0 2px 6px 0 rgb(77 77 77 / 20%);
   border-radius: 0 0 6px 6px;
-  background: #ffffff;
+  background: #fff;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     flex-direction: column;
-    padding: 10px 5px 0 5px;
-    box-shadow: 0 2px 6px 0 rgb(77, 77, 77, 0.2);
+    padding: 10px 5px 0;
+    box-shadow: 0 2px 6px 0 rgb(77 77 77 / 20%);
     border-radius: 0 0 6px 6px;
   }
 
@@ -65,7 +66,7 @@
     width: auto;
     margin: 0 30px;
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       margin: 0 20px;
     }
   }
@@ -77,6 +78,7 @@
       .home__statistic__left__data {
         background: linear-gradient(134deg, #3fb39e, #1ec196 51%, #3cc6b7 100%);
       }
+
       .home__statistic__left__chart {
         background: linear-gradient(134deg, #0bad8e 2%, #20c5a5 48%, #0baab1 99%);
       }
@@ -89,11 +91,11 @@
   width: 100%;
   display: flex;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     height: 213px;
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     flex-direction: column;
     height: 150px;
   }
@@ -102,16 +104,16 @@
     flex: 1;
     min-width: 0;
     display: flex;
-    border-radius: 6px 0 0 0;
+    border-radius: 6px 0 0;
     border: 2px solid #6b88cf;
 
-    @media (max-width: 1200px) {
+    @media (width <= 1200px) {
       flex-direction: column;
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       border-radius: 6px 6px 0 0;
-      border: 0px solid;
+      border: 0 solid;
     }
 
     .home__statistic__left__data {
@@ -121,41 +123,42 @@
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      border-radius: 6px 0 0 0;
+      border-radius: 6px 0 0;
       background: linear-gradient(314deg, #6093e4, #6b88cf 49%, #7074de 80%);
 
-      @media (min-width: 1440px) {
+      @media (width >= 1440px) {
         flex: 0;
         width: 246px;
         min-width: 246px;
       }
 
-      @media (max-width: 1200px) {
-        padding: 15px 30px 10px 30px;
+      @media (width <= 1200px) {
+        padding: 15px 30px 10px;
         flex-direction: row;
       }
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         border-radius: 6px 6px 0 0;
         padding: 15px 23px 10px 20px;
-        margin: 0px;
+        margin: 0;
       }
     }
+
     .home__statistic__left__chart {
       flex: 2;
       margin: -2px;
-      padding: 5px 5px 0px 10px;
+      padding: 5px 5px 0 10px;
       border-radius: 0;
       background: linear-gradient(304deg, #6e85e0 2%, #577cdb 48%, #486ecc 99%);
 
-      @media (max-width: 1200px) {
+      @media (width <= 1200px) {
         padding: 6px 20px;
       }
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         flex: 0;
         display: none;
-        margin: 0px;
+        margin: 0;
       }
     }
   }
@@ -167,13 +170,13 @@
     border-radius: 0 6px 0 0;
     border: 2px solid #334350;
 
-    @media (max-width: 1200px) {
+    @media (width <= 1200px) {
       flex-direction: column;
       border-radius: 0 6px 0 0;
       border: 2px solid #444c5a;
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       flex-direction: column;
       border-radius: 0;
     }
@@ -187,62 +190,66 @@
       justify-content: space-between;
       background: linear-gradient(134deg, #444b57, #39424a 48%, #444c5a 96%);
 
-      @media (min-width: 1440px) {
+      @media (width >= 1440px) {
         flex: 0;
         width: 246px;
         min-width: 246px;
       }
 
-      @media (max-width: 1200px) {
-        padding: 15px 30px 10px 30px;
+      @media (width <= 1200px) {
+        padding: 15px 30px 10px;
         margin: -2px;
-        border-radius: 0px 6px 0px 0px;
+        border-radius: 0 6px 0 0;
         flex-direction: row;
       }
 
-      @media (max-width: 750px) {
-        padding: 15px 20px 10px 20px;
+      @media (width <= 750px) {
+        padding: 15px 20px 10px;
       }
     }
+
     .home__statistic__right__chart {
       flex: 2;
       margin: -2px;
       padding: 5px 5px 0 10px;
-      border-radius: 0px 6px 0px 0px;
+      border-radius: 0 6px 0 0;
       background: linear-gradient(118deg, #31383e, #35414d 48%, #334350);
 
-      @media (max-width: 1200px) {
-        border-radius: 0px;
+      @media (width <= 1200px) {
+        border-radius: 0;
         padding: 6px 20px;
       }
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         flex: 0;
         display: none;
-        margin: 0px;
+        margin: 0;
       }
     }
   }
-}
 
-.HomeStatisticTopPanel {
   &.AfterHardFork {
     .home__statistic__left__panel {
       border-color: #232323;
       background-color: #232323;
+
       .home__statistic__left__data {
         background: #232323;
       }
+
       .home__statistic__left__chart {
         background: #232323;
       }
     }
+
     .home__statistic__right__panel {
       border-color: #484e4e;
       background-color: #484e4e;
+
       .home__statistic__right__data {
         background: #484e4e;
       }
+
       .home__statistic__right__chart {
         background: #484e4e;
       }
@@ -257,7 +264,7 @@
   align-items: center;
   justify-content: center;
   background: #f8f9fa;
-  border: 0px solid white;
+  border: 0 solid white;
   border-radius: 0 0 6px 6px;
   cursor: pointer;
 
diff --git a/src/pages/NervosDao/DepositorRank/index.module.scss b/src/pages/NervosDao/DepositorRank/index.module.scss
index c28926b18..3ce437e22 100644
--- a/src/pages/NervosDao/DepositorRank/index.module.scss
+++ b/src/pages/NervosDao/DepositorRank/index.module.scss
@@ -4,7 +4,7 @@
   text-align: center;
   color: var(--primary-color);
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     width: 100%;
     padding: 0;
     text-align: start;
diff --git a/src/pages/NervosDao/styled.tsx b/src/pages/NervosDao/styled.tsx
index 099573e8f..40499db13 100644
--- a/src/pages/NervosDao/styled.tsx
+++ b/src/pages/NervosDao/styled.tsx
@@ -37,7 +37,6 @@ export const DaoContentPanel = styled.div`
 
 export const DaoTabBarPanel = styled.div`
   width: 100%;
-
   background: white;
   display: flex;
   margin-top: 20px;
@@ -53,11 +52,12 @@ export const DaoTabBarPanel = styled.div`
   }
 
   @media (max-width: 750px) {
-    padding: 10px 0px;
+    padding: 10px 0;
     flex-direction: column;
     justify-content: center;
     font-size: 14px;
     align-items: stretch;
+
     > div {
       padding-left: 10px;
       padding-right: 10px;
diff --git a/src/pages/NftCollectionInfo/styles.module.scss b/src/pages/NftCollectionInfo/styles.module.scss
index 5bd81b489..0febe02be 100644
--- a/src/pages/NftCollectionInfo/styles.module.scss
+++ b/src/pages/NftCollectionInfo/styles.module.scss
@@ -1,5 +1,5 @@
 .container {
-  margin: 0px 120px 60px;
+  margin: 0 120px 60px;
 }
 
 .header {
@@ -7,6 +7,7 @@
   justify-content: space-between;
   align-items: center;
   padding-bottom: 20px;
+
   h5 {
     font-size: 24px;
     font-weight: bold;
@@ -27,7 +28,7 @@
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     flex-direction: column;
     justify-content: stretch;
     padding: 1rem;
@@ -40,7 +41,7 @@
     font-size: 1.25rem;
     align-self: stretch;
 
-    @media screen and (max-width: 750px) {
+    @media screen and (width <= 750px) {
       justify-content: space-between;
     }
 
@@ -53,14 +54,17 @@
 
       &:not(:last-child) {
         margin-right: 4rem;
-        @media screen and (max-width: 1440px) {
+
+        @media screen and (width <= 1440px) {
           margin-right: 3rem;
         }
-        @media screen and (max-width: 1280px) {
+
+        @media screen and (width <= 1280px) {
           margin-right: 1rem;
         }
       }
-      @media screen and (max-width: 1280px) {
+
+      @media screen and (width <= 1280px) {
         font-size: 0.875rem;
       }
 
@@ -68,23 +72,28 @@
         font-weight: 500;
         border-bottom-color: var(--primary-color);
       }
-      @media screen and (max-width: 750px) {
+
+      @media screen and (width <= 750px) {
         border-width: 2px;
         font-size: 1.125rem;
       }
     }
   }
+
   .filters {
     display: flex;
-    @media screen and (max-width: 750px) {
+
+    @media screen and (width <= 750px) {
       & > div {
         margin-top: 1.5rem;
+
         &:first-child {
           flex: 1;
         }
       }
     }
-    @media screen and (max-width: 750px) {
+
+    @media screen and (width <= 750px) {
       width: 100%;
     }
   }
@@ -93,25 +102,30 @@
     display: flex;
     flex-direction: column;
     width: 200px;
+
     a {
       display: flex;
       justify-content: space-between;
       color: var(--primary-color);
-      padding: 10px 0px 10px 10px;
+      padding: 10px 0 10px 10px;
       margin-right: 8px;
       border-radius: 8px;
+
       &:hover {
         background: var(--primary-hover-bg-color);
         color: var(--primary-color);
         cursor: pointer;
       }
+
       &[data-is-active='false'] {
         color: #000;
+
         svg {
           display: none;
         }
       }
     }
+
     svg path {
       fill: var(--primary-color);
     }
@@ -133,6 +147,7 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
@@ -140,7 +155,8 @@
       text-transform: capitalize;
       white-space: nowrap;
     }
-    &:after {
+
+    &::after {
       position: absolute;
       left: -15px;
       bottom: -2px;
@@ -174,6 +190,7 @@
     &:not(:first-of-type) {
       text-align: right;
     }
+
     &:first-child,
     &:last-child {
       padding-left: 25px;
@@ -186,15 +203,15 @@
   }
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (width <= 1200px) {
   .container {
-    margin: 0px 45px 60px;
+    margin: 0 45px 60px;
   }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (width <= 750px) {
   .container {
-    margin: 0px 8px 60px;
+    margin: 0 8px 60px;
   }
 }
 
@@ -225,10 +242,12 @@
   align-items: center;
   cursor: pointer;
   padding-left: 0.8rem;
+
   svg {
     height: 1rem;
     width: 1rem;
   }
+
   &[data-is-active='true'] {
     svg path {
       fill: var(--primary-color);
@@ -240,25 +259,30 @@
   display: flex;
   flex-direction: column;
   width: 200px;
+
   a {
     display: flex;
     justify-content: space-between;
     color: var(--primary-color);
-    padding: 10px 0px 10px 10px;
+    padding: 10px 0 10px 10px;
     margin-right: 8px;
     border-radius: 8px;
+
     &:hover {
       background: var(--primary-hover-bg-color);
       color: var(--primary-color);
       cursor: pointer;
     }
+
     &[data-is-active='false'] {
       color: #000;
+
       svg {
         display: none;
       }
     }
   }
+
   svg path {
     fill: var(--primary-color);
   }
@@ -268,7 +292,7 @@
   :global {
     .ant-popover-inner {
       border-radius: 8px;
-      box-shadow: 0px 2px 10px 0px #eeeeee;
+      box-shadow: 0 2px 10px 0 #eee;
     }
   }
 }
diff --git a/src/pages/NftCollections/styles.module.scss b/src/pages/NftCollections/styles.module.scss
index a5712bde1..18d0a5a24 100644
--- a/src/pages/NftCollections/styles.module.scss
+++ b/src/pages/NftCollections/styles.module.scss
@@ -7,6 +7,7 @@
   justify-content: space-between;
   align-items: center;
   padding-bottom: 20px;
+
   h5 {
     font-size: 24px;
     font-weight: bold;
@@ -25,6 +26,7 @@
     position: relative;
     width: 100%;
     margin-bottom: 4px;
+
     .typeFilter,
     .holderMinted {
       justify-content: end;
@@ -35,6 +37,7 @@
     position: relative;
     font-size: 14px;
     font-weight: 700;
+
     th {
       vertical-align: middle;
       padding-top: 12px;
@@ -42,7 +45,8 @@
       text-transform: capitalize;
       white-space: nowrap;
     }
-    &:after {
+
+    &::after {
       position: absolute;
       left: -15px;
       top: 44px;
@@ -76,6 +80,7 @@
     &:not(:first-of-type) {
       text-align: right;
     }
+
     &:first-child,
     &:last-child {
       padding-left: 25px;
@@ -115,9 +120,11 @@
   .typeFilter {
     display: flex;
     align-items: center;
+
     svg {
       cursor: pointer;
     }
+
     &[data-is-active='true'] {
       svg path {
         fill: var(--primary-color);
@@ -127,12 +134,14 @@
 
   .activeIcon {
     color: var(--primary-color);
+
     svg {
       path {
         fill: var(--primary-color);
       }
     }
   }
+
   .filter {
     height: 1rem;
   }
@@ -142,25 +151,30 @@
   display: flex;
   flex-direction: column;
   width: 200px;
+
   a {
     display: flex;
     justify-content: space-between;
     color: var(--primary-color);
-    padding: 10px 0px 10px 10px;
+    padding: 10px 0 10px 10px;
     margin-right: 8px;
     border-radius: 8px;
+
     &:hover {
       background: var(--primary-hover-bg-color);
       color: var(--primary-color);
       cursor: pointer;
     }
+
     &[data-is-active='false'] {
       color: #000;
+
       svg {
         display: none;
       }
     }
   }
+
   svg path {
     fill: var(--primary-color);
   }
@@ -170,7 +184,7 @@
   :global {
     .ant-popover-inner {
       border-radius: 8px;
-      box-shadow: 0px 2px 10px 0px #eeeeee;
+      box-shadow: 0 2px 10px 0 #eee;
     }
   }
 }
@@ -181,6 +195,7 @@
       color: var(--primary-color);
     }
   }
+
   svg {
     cursor: pointer;
   }
@@ -190,6 +205,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+
   .sortActive {
     color: var(--primary-color);
   }
@@ -203,10 +219,12 @@ div[data-role='mobile-list'] {
     display: flex;
     height: 3rem;
     background: #fff;
+
     & > div {
       white-space: nowrap;
       flex: 1;
     }
+
     padding: 0 1rem;
     border-radius: 8px;
     overflow: hidden;
@@ -217,10 +235,12 @@ div[data-role='mobile-list'] {
     margin-left: 36px;
     margin-bottom: 10px;
     display: flex;
+
     dt {
       flex: 1;
       min-width: 105px;
     }
+
     dd {
       flex: 1;
       margin: 0;
@@ -229,7 +249,8 @@ div[data-role='mobile-list'] {
 
   .listHeader + div {
     position: relative;
-    &:before {
+
+    &::before {
       position: absolute;
       left: -15px;
       top: -10px;
@@ -240,22 +261,27 @@ div[data-role='mobile-list'] {
       background-color: #ededed;
     }
   }
+
   .listItem {
     border-bottom: 1px solid #f0f0f0;
     padding: 1rem 1rem 0;
     background: #fff;
+
     dt::after {
       content: ':';
     }
+
     dd {
       a {
         font-weight: 500 !important;
       }
     }
   }
+
   .holderMinted {
     padding-left: 36px;
   }
+
   .loading {
     text-align: center;
   }
@@ -267,22 +293,25 @@ div[data-role='mobile-list'] {
   }
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (width <= 1200px) {
   .container {
     margin: 40px 45px 60px;
   }
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (width <= 1000px) {
   .container {
     margin: 40px 8px 60px;
+
     table[data-role='desktop-list'] {
       display: none;
     }
+
     div[data-role='mobile-list'] {
       display: block;
     }
   }
+
   .antPopover {
     :global {
       .ant-popover-inner-content {
@@ -291,7 +320,8 @@ div[data-role='mobile-list'] {
     }
   }
 }
-@media screen and (max-width: 350px) {
+
+@media screen and (width <= 350px) {
   div[data-role='mobile-list'] {
     font-size: 0.8rem;
   }
diff --git a/src/pages/NftInfo/styles.module.scss b/src/pages/NftInfo/styles.module.scss
index 722d02b1f..e12f50dc3 100644
--- a/src/pages/NftInfo/styles.module.scss
+++ b/src/pages/NftInfo/styles.module.scss
@@ -1,18 +1,19 @@
 .container {
   --margin-top: 104px;
   --margin-bottom: 40px;
+
   width: 1200px;
   margin: var(--margin-top) auto var(--margin-bottom);
   flex: 1;
 
-  @media screen and (max-width: 1232px) {
+  @media screen and (width <= 1232px) {
     box-sizing: border-box;
     width: 100%;
     padding-left: 16px;
     padding-right: 16px;
   }
 
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     --margin-top: 84px;
     --margin-bottom: 20px;
   }
@@ -22,12 +23,15 @@
   padding: 24px;
   background: #fff;
   display: flex;
+
   & > div {
     overflow: hidden;
   }
+
   .info {
     width: 100%;
   }
+
   .cover {
     width: 440px;
     height: 440px;
@@ -45,6 +49,7 @@
     text-overflow: ellipsis;
     line-height: 1;
   }
+
   .items {
     dl {
       margin: 0;
@@ -52,12 +57,14 @@
       flex-direction: column;
       line-height: 1;
     }
+
     dt {
       font-size: 14px;
       font-weight: 400;
       color: #999;
       margin: 40px 0 20px;
     }
+
     dd {
       margin: 0;
       overflow: hidden;
@@ -65,23 +72,27 @@
     }
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (width <= 800px) {
     flex-direction: column;
     align-items: center;
+
     .cover {
       margin-bottom: 16px;
       margin-right: 0;
     }
+
     .name,
     .itmes {
       width: 440px;
     }
   }
-  @media screen and (max-width: 472px) {
+
+  @media screen and (width <= 472px) {
     .cover {
       width: 320px;
       height: 320px;
     }
+
     .name,
     .items {
       width: 100%;
diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss
index 3f6f7ea26..13d04a455 100644
--- a/src/pages/Script/styles.module.scss
+++ b/src/pages/Script/styles.module.scss
@@ -10,7 +10,7 @@
   margin-top: 25px;
   margin-bottom: 40px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     margin: 0;
     padding: 20px;
   }
@@ -21,24 +21,29 @@
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  background-color: #ffffff;
+  background-color: #fff;
   border-radius: 6px 6px 0 0;
-  :global(.ant-tabs-nav:before) {
+
+  :global(.ant-tabs-nav::before) {
     border-bottom-width: 4px;
   }
+
   :global(.ant-tabs-nav-list) {
     margin-left: 40px;
   }
+
   :global(.ant-tabs-tab-btn) {
-    color: #333333 !important;
+    color: #333 !important;
     font-weight: 400;
     font-size: 20px;
     line-height: 23px;
     margin-bottom: 0;
   }
+
   :global(.ant-tabs-tab-btn[aria-selected='true']) {
     font-weight: 500;
   }
+
   :global(.ant-tabs-ink-bar) {
     background: linear-gradient(
       to right,
@@ -57,54 +62,66 @@
   table {
     width: 100%;
     line-height: 1.2;
+
     tr {
       border-bottom: 1px solid #e5e5e5;
     }
+
     tbody tr:last-child {
       border-bottom: none;
     }
+
     th {
       font-size: 1rem;
       font-weight: 500;
       color: #333;
     }
+
     th,
     td {
       white-space: nowrap;
       padding: 22px 0;
       user-select: none;
       cursor: default;
+
       &:nth-child(3) {
         padding-left: 22px;
+
         div {
           justify-content: flex-start;
         }
       }
     }
+
     td:first-child {
       max-width: 25vw;
     }
+
     a {
       color: var(--primary-color);
     }
   }
 }
+
 .scriptCellsPanel {
   padding: 0 40px;
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (width <= 1200px) {
     padding: 0 10px;
   }
 }
+
 .scriptDecimalCenter {
   > div {
     align-items: baseline;
   }
 }
+
 .cellInfoMore {
   > div {
     float: right;
   }
+
   :global(.transaction__cell__info__content) {
     width: fit-content !important;
     padding: 0 20px;
@@ -127,13 +144,13 @@
     margin-right: 16px;
   }
 
-  @media screen and (max-width: 1300px) {
+  @media screen and (width <= 1300px) {
     .codeHash {
       width: 280px !important;
     }
   }
 
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     .codeHash {
       width: 600px !important;
     }
diff --git a/src/pages/ScriptList/styles.module.scss b/src/pages/ScriptList/styles.module.scss
index 8762af0eb..a928db18e 100644
--- a/src/pages/ScriptList/styles.module.scss
+++ b/src/pages/ScriptList/styles.module.scss
@@ -5,9 +5,9 @@ $accent-color: #efefef;
   font-size: 24px;
   font-weight: 700;
   max-width: 1080px;
-  margin: 45px auto 20px auto;
+  margin: 45px auto 20px;
 
-  @media screen and (max-width: 1140px) {
+  @media screen and (width <= 1140px) {
     margin: 45px 15px 20px;
   }
 }
@@ -15,11 +15,11 @@ $accent-color: #efefef;
 .container {
   background: white;
   max-width: 1080px;
-  margin: 0 auto 45px auto;
+  margin: 0 auto 45px;
   padding: 16px;
   border-radius: 6px;
 
-  @media screen and (max-width: 1140px) {
+  @media screen and (width <= 1140px) {
     margin: 20px 15px;
   }
 
@@ -41,6 +41,7 @@ $accent-color: #efefef;
   .links {
     display: flex;
     align-items: center;
+
     a {
       margin-right: 10px;
       margin-bottom: 20px;
@@ -57,7 +58,7 @@ $accent-color: #efefef;
     user-select: none;
     transition: background 0.3s;
 
-    @media screen and (max-width: 400px) {
+    @media screen and (width <= 400px) {
       word-break: break-all;
     }
 
@@ -69,12 +70,12 @@ $accent-color: #efefef;
       text-decoration: line-through;
     }
 
-    &:before {
+    &::before {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       left: 0.75rem;
-      font-family: 'mono';
+      font-family: initial;
       content: '▲';
       width: 1.75rem;
       height: 1.75rem;
@@ -98,7 +99,8 @@ $accent-color: #efefef;
   details[open] {
     summary {
       background: $accent-color;
-      &:before {
+
+      &::before {
         transform: translateY(-50%) rotate(0.5turn);
       }
     }
diff --git a/src/pages/SimpleUDT/styles.module.scss b/src/pages/SimpleUDT/styles.module.scss
index 158777a6e..622176197 100644
--- a/src/pages/SimpleUDT/styles.module.scss
+++ b/src/pages/SimpleUDT/styles.module.scss
@@ -4,11 +4,13 @@
 
   svg {
     pointer-events: none;
+
     path {
       fill: #999;
     }
   }
-  @media screen and (max-width: 750px) {
+
+  @media screen and (width <= 750px) {
     margin-left: 2px;
   }
 }
@@ -16,11 +18,11 @@
 .addressWidthModify {
   max-width: 80%;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     max-width: 40%;
   }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     max-width: 100%;
   }
 }
@@ -31,7 +33,8 @@
   > div:last-child {
     margin-left: 8px;
   }
-  @media screen and (max-width: 750px) {
+
+  @media screen and (width <= 750px) {
     width: 100%;
   }
 }
@@ -41,10 +44,12 @@
   display: none;
   cursor: pointer;
   padding-left: 0.8rem;
+
   svg {
     height: 1rem;
     width: 1rem;
   }
+
   &[data-is-active='true'] {
     svg path {
       fill: var(--primary-color);
@@ -56,25 +61,30 @@
   display: flex;
   flex-direction: column;
   width: 200px;
+
   a {
     display: flex;
     justify-content: space-between;
     color: var(--primary-color);
-    padding: 10px 0px 10px 10px;
+    padding: 10px 0 10px 10px;
     margin-right: 8px;
     border-radius: 8px;
+
     &:hover {
       background: var(--primary-hover-bg-color);
       color: var(--primary-color);
       cursor: pointer;
     }
+
     &[data-is-active='false'] {
       color: #000;
+
       svg {
         display: none;
       }
     }
   }
+
   svg path {
     fill: var(--primary-color);
   }
@@ -84,7 +94,7 @@
   :global {
     .ant-popover-inner {
       border-radius: 8px;
-      box-shadow: 0px 2px 10px 0px #eeeeee;
+      box-shadow: 0 2px 10px 0 #eee;
     }
   }
 }
diff --git a/src/pages/Tokens/styled.tsx b/src/pages/Tokens/styled.tsx
index f3676a6d1..f551010c7 100644
--- a/src/pages/Tokens/styled.tsx
+++ b/src/pages/Tokens/styled.tsx
@@ -66,19 +66,19 @@ export const TokensTableTitle = styled.div`
   }
 
   @media (max-width: 1000px) {
-    >span: nth-child(1) {
+    > span:nth-child(1) {
       flex: 3.4;
     }
 
-    >span: nth-child(2) {
+    > span:nth-child(2) {
       flex: 2.5;
     }
 
-    >span: nth-child(3) {
+    > span:nth-child(3) {
       flex: 2.1;
     }
 
-    >span: nth-child(4) {
+    > span:nth-child(4) {
       flex: 2;
     }
   }
@@ -197,7 +197,7 @@ export const TokensTableItem = styled.div`
     flex: 1.8;
     font-size: 12px;
     text-align: right;
-    color: #000000;
+    color: #000;
 
     @media (max-width: 1000px) {
       flex: 2;
diff --git a/src/pages/Transaction/TransactionCell/styles.module.scss b/src/pages/Transaction/TransactionCell/styles.module.scss
index 071083558..79114f071 100644
--- a/src/pages/Transaction/TransactionCell/styles.module.scss
+++ b/src/pages/Transaction/TransactionCell/styles.module.scss
@@ -3,6 +3,7 @@
   height: 15px;
   margin-left: 2px;
   cursor: pointer;
+
   &:hover {
     path {
       fill: var(--primary-color);
diff --git a/src/pages/Transaction/TransactionCellList/styles.module.scss b/src/pages/Transaction/TransactionCellList/styles.module.scss
index cc986ed73..1e54a5c6d 100644
--- a/src/pages/Transaction/TransactionCellList/styles.module.scss
+++ b/src/pages/Transaction/TransactionCellList/styles.module.scss
@@ -9,11 +9,13 @@
   padding: 0 6px;
   opacity: 0.5;
   cursor: pointer;
+
   svg {
     pointer-events: none;
     width: 24px;
     height: 22.5px;
   }
+
   &:hover {
     opacity: 1;
   }
diff --git a/src/pages/Transaction/TransactionCellScript/styled.tsx b/src/pages/Transaction/TransactionCellScript/styled.tsx
index 9602b1b57..4fc1708cf 100644
--- a/src/pages/Transaction/TransactionCellScript/styled.tsx
+++ b/src/pages/Transaction/TransactionCellScript/styled.tsx
@@ -22,6 +22,7 @@ export const TransactionDetailItem = styled.div`
   @media (max-width: 750px) {
     margin-top: 5px;
   }
+
   &::after {
     position: absolute;
     left: 2px;
diff --git a/src/pages/TransactionList/index.module.scss b/src/pages/TransactionList/index.module.scss
index e143ae6ff..7abba6184 100644
--- a/src/pages/TransactionList/index.module.scss
+++ b/src/pages/TransactionList/index.module.scss
@@ -1,7 +1,7 @@
 .tabs {
-  margin: 24px 0 40px 0;
+  margin: 24px 0 40px;
 
-  @media screen and (max-width: 750px) {
+  @media screen and (width <= 750px) {
     margin: 20px 0;
   }
 
@@ -13,7 +13,7 @@
     overflow: auto;
     background: #fff;
     border-radius: 4px 4px 0 0;
-    box-shadow: 0px 4px 4px rgba(16, 16, 16, 0.05);
+    box-shadow: 0 4px 4px rgb(16 16 16 / 5%);
 
     .tab {
       position: relative;
@@ -99,7 +99,7 @@
   margin-top: 4px;
   padding: 0 40px;
   background: #fff;
-  box-shadow: 0px 4px 4px rgba(16, 16, 16, 0.05);
+  box-shadow: 0 4px 4px rgb(16 16 16 / 5%);
 
   .colHash {
     font-size: 14px;
@@ -113,11 +113,13 @@
   display: flex;
   margin-left: 8px;
   cursor: pointer;
+
   &[data-order='asc'] {
     svg > path:last-child {
       fill: var(--primary-color);
     }
   }
+
   &[data-order='desc'] {
     svg > path:first-child {
       fill: var(--primary-color);
diff --git a/yarn.lock b/yarn.lock
index 026aea414..52552d3ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2731,6 +2731,11 @@
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
   integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==
 
+"@types/minimatch@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
 "@types/minimist@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
@@ -3611,6 +3616,11 @@ array-buffer-byte-length@^1.0.0:
     call-bind "^1.0.2"
     is-array-buffer "^3.0.1"
 
+array-differ@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
+  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -3720,6 +3730,11 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
 
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
 asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -4147,6 +4162,16 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.9"
 
+browserslist@^4.21.5:
+  version "4.21.11"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.11.tgz#35f74a3e51adc4d193dcd76ea13858de7b8fecb8"
+  integrity sha512-xn1UXOKUz7DjdGlg9RrUr0GGiWzI97UQJnugHtH0OLDfJB7jMgoIkYvRIEO1l9EeEERVqeqLYOcFBW9ldjypbQ==
+  dependencies:
+    caniuse-lite "^1.0.30001538"
+    electron-to-chromium "^1.4.526"
+    node-releases "^2.0.13"
+    update-browserslist-db "^1.0.13"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -4275,6 +4300,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz#987437b266260b640a23cd18fbddb509d7f69f3e"
   integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==
 
+caniuse-lite@^1.0.30001487, caniuse-lite@^1.0.30001538:
+  version "1.0.30001539"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz#325a387ab1ed236df2c12dc6cd43a4fff9903a44"
+  integrity sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA==
+
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
@@ -4388,6 +4418,15 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4781,6 +4820,14 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
+css-tokenize@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/css-tokenize/-/css-tokenize-1.0.1.tgz#4625cb1eda21c143858b7f81d6803c1d26fc14be"
+  integrity sha512-gLmmbJdwH9HLY4bcA17lnZ8GgPwEXRbvxBJGHnkiB6gLhRpTzjkjtMIvz7YORGW/Ptv2oMk8b5g+u7mRD6Dd7A==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^1.0.33"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5188,6 +5235,21 @@ document.contains@^1.0.1:
   dependencies:
     define-properties "^1.1.3"
 
+doiuse@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/doiuse/-/doiuse-6.0.2.tgz#0161e68a0bbc9525d3cebdfcbe5adb90023793e2"
+  integrity sha512-eBTs23NOX+EAYPr4RbCR6J4DRW/TML3uMo37y0X1whlkersDYFCk9HmCl09KX98cis22VKsV1QaxfVNauJ3NBw==
+  dependencies:
+    browserslist "^4.21.5"
+    caniuse-lite "^1.0.30001487"
+    css-tokenize "^1.0.1"
+    duplexify "^4.1.2"
+    ldjson-stream "^1.2.1"
+    multimatch "^5.0.0"
+    postcss "^8.4.21"
+    source-map "^0.7.4"
+    yargs "^17.7.1"
+
 dom-accessibility-api@^0.5.9:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
@@ -5303,6 +5365,16 @@ duplexer@^0.1.2:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
+duplexify@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.2.tgz#18b4f8d28289132fa0b9573c898d9f903f81c7b0"
+  integrity sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==
+  dependencies:
+    end-of-stream "^1.4.1"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+    stream-shift "^1.0.0"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -5332,6 +5404,11 @@ electron-to-chromium@^1.4.251:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
   integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
 
+electron-to-chromium@^1.4.526:
+  version "1.4.529"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.529.tgz#8c3377a05e5737f899770d14524dd8e2e4cb2351"
+  integrity sha512-6uyPyXTo8lkv8SWAmjKFbG42U073TXlzD4R8rW3EzuznhFS2olCIAfjjQtV2dV2ar/vRF55KUd3zQYnCB0dd3A==
+
 elliptic@6.5.4, elliptic@^6.5.4:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -5375,6 +5452,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 enhanced-resolve@^5.10.0:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
@@ -8265,6 +8349,14 @@ language-tags@=1.0.5, language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+ldjson-stream@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ldjson-stream/-/ldjson-stream-1.2.1.tgz#91beceda5ac4ed2b17e649fb777e7abfa0189c2b"
+  integrity sha512-xw/nNEXafuPSLu8NjjG3+atVVw+8U1APZAQylmwQn19Hgw6rC7QjHvP6MupnHWCrzSm9m0xs5QWkCLuRvBPjgQ==
+  dependencies:
+    split2 "^0.2.1"
+    through2 "^0.6.1"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -8732,6 +8824,17 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+multimatch@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6"
+  integrity sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==
+  dependencies:
+    "@types/minimatch" "^3.0.3"
+    array-differ "^3.0.0"
+    array-union "^2.1.0"
+    arrify "^2.0.1"
+    minimatch "^3.0.4"
+
 nano-time@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
@@ -8801,6 +8904,11 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
+node-releases@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
+  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+
 node-releases@^2.0.6:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae"
@@ -9051,7 +9159,7 @@ on-headers@~1.0.2:
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0, once@^1.3.3:
+once@^1.3.0, once@^1.3.3, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@@ -9531,6 +9639,11 @@ postcss-media-minmax@^5.0.0:
   resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz#7140bddec173e2d6d657edbd8554a55794e2a5b5"
   integrity sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==
 
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
 postcss-merge-longhand@^5.1.7:
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz#24a1bdf402d9ef0e70f568f39bdc0344d568fb16"
@@ -9820,6 +9933,11 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
+postcss-scss@4.0.8, postcss-scss@^4.0.7:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.8.tgz#12a4991a902a782d4e9b86b1f217d5181c6c4f32"
+  integrity sha512-Cr0X8Eu7xMhE96PJck6ses/uVVXDtE5ghUTKNUYgm8ozgP2TkgV3LWs3WgLV1xaSSLq8ZFiXaUrj0LVgG1fGEA==
+
 postcss-selector-not@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
@@ -9880,6 +9998,15 @@ postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.4:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.16, postcss@^8.4.21:
+  version "8.4.30"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.30.tgz#0e0648d551a606ef2192a26da4cabafcc09c1aa7"
+  integrity sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.4.27:
   version "8.4.28"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
@@ -10751,6 +10878,16 @@ read-pkg@^6.0.0:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@^1.0.33, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readable-stream@^2.0.1, readable-stream@^2.1.4:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -10773,15 +10910,14 @@ readable-stream@^3.0.6:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~1.1.9:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
+readable-stream@^3.1.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
   dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
 
 readdirp@~3.6.0:
   version "3.6.0"
@@ -11425,7 +11561,7 @@ source-map@^0.5.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.7.3:
+source-map@^0.7.3, source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
@@ -11491,6 +11627,13 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split2@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-0.2.1.tgz#02ddac9adc03ec0bb78c1282ec079ca6e85ae900"
+  integrity sha512-D/oTExYAkC9nWleOCTOyNmAuzfAT/6rHGBA9LIK7FVnGo13CSvrKCUzKenwH6U1s2znY9MqH6v0UQTEDa3vJmg==
+  dependencies:
+    through2 "~0.6.1"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -11530,6 +11673,11 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
+stream-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
 string-argv@0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
@@ -11783,11 +11931,28 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+stylelint-config-recommended-scss@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-13.0.0.tgz#dd8c319e15a6412262cd8554e4aad9bfba1bbb11"
+  integrity sha512-7AmMIsHTsuwUQm7I+DD5BGeIgCvqYZ4BpeYJJpb1cUXQwrJAKjA+GBotFZgUEGP8lAM+wmd91ovzOi8xfAyWEw==
+  dependencies:
+    postcss-scss "^4.0.7"
+    stylelint-config-recommended "^13.0.0"
+    stylelint-scss "^5.1.0"
+
 stylelint-config-recommended@^13.0.0:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz#c48a358cc46b629ea01f22db60b351f703e00597"
   integrity sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==
 
+stylelint-config-standard-scss@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-11.0.0.tgz#98332b68a9c98b6fce54c7698741e103719942b5"
+  integrity sha512-fGE79NBOLg09a9afqGH/guJulRULCaQWWv4cv1v2bMX92B+fGb0y56WqIguwvFcliPmmUXiAhKrrnXilIeXoHA==
+  dependencies:
+    stylelint-config-recommended-scss "^13.0.0"
+    stylelint-config-standard "^34.0.0"
+
 stylelint-config-standard@^34.0.0:
   version "34.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz#309f3c48118a02aae262230c174282e40e766cf4"
@@ -11800,6 +11965,15 @@ stylelint-config-styled-components@^0.1.1:
   resolved "https://registry.yarnpkg.com/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede"
   integrity sha512-z5Xz/9GmvxO6e/DLzBMwkB85zHxEEjN6K7Cj80Bi+o/9vR9eS3GX3E9VuMnX9WLFYulqbqLtTapGGY28JBiy9Q==
 
+stylelint-no-unsupported-browser-features@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-7.0.0.tgz#91834a0f285da7f91116515d79c4b03531ba5d44"
+  integrity sha512-O5VYlBhr+lpJ6jeTJSy+SMbHJhW5h5EJxsoicYcTi/07m45V/CF1mQidwRQLjv8y9BFQMpioWz60O89IkmbaNw==
+  dependencies:
+    doiuse "^6.0.1"
+    lodash "^4.17.15"
+    postcss "^8.4.16"
+
 stylelint-processor-styled-components@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.10.0.tgz#8082fc68779476aac411d3afffac0bc833d77a29"
@@ -11810,6 +11984,17 @@ stylelint-processor-styled-components@^1.10.0:
     micromatch "^4.0.2"
     postcss "^7.0.26"
 
+stylelint-scss@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-5.2.1.tgz#810299e4141fa38852bd14536a90e4942c8f387f"
+  integrity sha512-ZoTJUM85/qqpQHfEppjW/St//8s6p9Qsg8deWlYlr56F9iUgC9vXeIDQvH4odkRRJLTLFQzYMALSOFCQ3MDkgw==
+  dependencies:
+    known-css-properties "^0.28.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^6.0.13"
+    postcss-value-parser "^4.2.0"
+
 stylelint@^15.10.1:
   version "15.10.3"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.10.3.tgz#995e4512fdad450fb83e13f3472001f6edb6469c"
@@ -12088,7 +12273,7 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
-through2@~0.6.3:
+through2@^0.6.1, through2@~0.6.1, through2@~0.6.3:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
   integrity sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=
@@ -12451,6 +12636,14 @@ upath@^1.2.0:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-browserslist-db@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
@@ -13104,6 +13297,11 @@ yargs-parser@20.x, yargs-parser@^20.2.2, yargs-parser@^20.2.9:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
@@ -13117,6 +13315,19 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yargs@^17.7.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From e8aeca9770e23dd3f0d416c75d688baf8b901654 Mon Sep 17 00:00:00 2001
From: WhiteMind <WhiteMind@qq.com>
Date: Sun, 8 Oct 2023 18:45:06 +0800
Subject: [PATCH 7/9] Refactor: move fetcher codes to ExplorerService (#115)

* refactor: move fetcher codes to ExplorerService

* refactor: move Response namespace to ExplorerService
---
 src/components/Card/HashCard/index.tsx        |   4 +-
 .../Header/BlockchainComp/index.tsx           |   4 +-
 .../NftCollectionInventory/index.tsx          |   4 +-
 .../NftCollectionOverview/index.tsx           |   4 +-
 .../NftCollectionTransfers/index.tsx          |   4 +-
 src/components/Search/index.tsx               |   5 +-
 src/contexts/providers/dasQuery.tsx           |   4 +-
 src/contexts/providers/hook.ts                |   2 -
 src/pages/Address/AddressComp.tsx             |   6 +-
 src/pages/Address/index.tsx                   |  11 +-
 src/pages/BlockDetail/index.tsx               |   6 +-
 src/pages/BlockList/index.tsx                 |   4 +-
 src/pages/ExportTransactions/index.tsx        |  15 +-
 src/pages/FeeRateTracker/index.tsx            |   5 +-
 .../Home/AverageBlockTimeChart/index.tsx      |   8 +-
 src/pages/Home/HashRateChart/index.tsx        |   4 +-
 src/pages/Home/index.tsx                      |   7 +-
 src/pages/NervosDao/index.tsx                 |  12 +-
 src/pages/NftCollectionInfo/index.tsx         |   8 +-
 src/pages/NftCollections/index.tsx            |   4 +-
 src/pages/NftInfo/index.tsx                   |   8 +-
 src/pages/Script/ScriptsComp.tsx              |   6 +-
 src/pages/Script/index.tsx                    |   4 +-
 src/pages/SimpleUDT/index.tsx                 |   6 +-
 .../activities/AddressBalanceRank.tsx         |   4 +-
 .../activities/AddressCount.tsx               |   4 +-
 .../activities/BalanceDistribution.tsx        |   4 +-
 .../StatisticsChart/activities/CellCount.tsx  |   4 +-
 .../activities/TransactionCount.tsx           |   4 +-
 .../activities/TxFeeHistory.tsx               |   4 +-
 .../block/AverageBlockTime.tsx                |   4 +-
 .../block/BlockTimeDistribution.tsx           |   4 +-
 .../block/EpochTimeDistribution.tsx           |   4 +-
 src/pages/StatisticsChart/common/index.tsx    |   1 +
 .../StatisticsChart/mining/Difficulty.tsx     |   4 +-
 .../mining/DifficultyHashRate.tsx             |   4 +-
 .../mining/DifficultyUncleRateEpoch.tsx       |   4 +-
 src/pages/StatisticsChart/mining/HashRate.tsx |   4 +-
 .../mining/MinerAddressDistribution.tsx       |   4 +-
 .../mining/MinerVersionDistribution.tsx       |   4 +-
 .../StatisticsChart/mining/UncleRate.tsx      |   4 +-
 .../monetary/AnnualPercentageCompensation.tsx |   4 +-
 .../monetary/InflationRate.tsx                |   4 +-
 .../StatisticsChart/monetary/Liquidity.tsx    |   4 +-
 .../monetary/SecondaryIssuance.tsx            |   4 +-
 .../StatisticsChart/monetary/TotalSupply.tsx  |   4 +-
 .../nervosDao/CirculationRatio.tsx            |   4 +-
 .../nervosDao/NewDaoDeposit.tsx               |   4 +-
 .../nervosDao/TotalDaoDeposit.tsx             |   4 +-
 src/pages/Tokens/index.tsx                    |   4 +-
 .../TransactionCellScript/index.tsx           |  15 +-
 src/pages/Transaction/index.tsx               |   4 +-
 src/pages/TransactionList/index.tsx           |   8 +-
 src/service/app/blockchain.ts                 |   4 +-
 src/service/app/charts/cache.ts               |   4 +-
 src/service/http/interceptors.ts              |  61 --------
 .../ExplorerService}/fetcher.ts               | 135 ++++++++----------
 src/services/ExplorerService/index.ts         |   9 +-
 src/services/ExplorerService/requester.ts     |  76 ++++++++++
 src/services/ExplorerService/types.ts         |  27 ++++
 src/types/index.d.ts                          |  28 ----
 src/utils/hook.ts                             |   2 +
 62 files changed, 318 insertions(+), 301 deletions(-)
 delete mode 100644 src/service/http/interceptors.ts
 rename src/{service/http => services/ExplorerService}/fetcher.ts (79%)
 create mode 100644 src/services/ExplorerService/requester.ts
 create mode 100644 src/services/ExplorerService/types.ts

diff --git a/src/components/Card/HashCard/index.tsx b/src/components/Card/HashCard/index.tsx
index 7c3e50002..a8959fa30 100644
--- a/src/components/Card/HashCard/index.tsx
+++ b/src/components/Card/HashCard/index.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 import { Tooltip } from 'antd'
 import CopyIcon from '../../../assets/copy.png'
 import i18n from '../../../utils/i18n'
-import { v2AxiosIns } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { copyElementValue } from '../../../utils/util'
 import SmallLoading from '../../Loading/SmallLoading'
 import { useIsMobile, useNewAddr, useDeprecatedAddr } from '../../../utils/hook'
@@ -57,7 +57,7 @@ export default ({
   const counterpartAddr = newAddr === hash ? deprecatedAddr : newAddr
 
   const handleExportTxClick = async () => {
-    const res = await v2AxiosIns(`transactions/${hash}/raw`).catch(error => {
+    const res = await explorerService.api.requesterV2(`transactions/${hash}/raw`).catch(error => {
       setToast({ message: error.message })
     })
     if (!res) return
diff --git a/src/components/Header/BlockchainComp/index.tsx b/src/components/Header/BlockchainComp/index.tsx
index 66ead43ce..22779bd71 100644
--- a/src/components/Header/BlockchainComp/index.tsx
+++ b/src/components/Header/BlockchainComp/index.tsx
@@ -9,7 +9,7 @@ import SimpleButton from '../../SimpleButton'
 import ChainDropdown from '../../Dropdown/ChainType'
 import { useIsMobile } from '../../../utils/hook'
 import { ChainName, MAINNET_URL, TESTNET_URL } from '../../../constants/common'
-import { fetchNodeVersion } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { AppCachedKeys } from '../../../constants/cache'
 import { fetchCachedData, storeCachedData } from '../../../utils/cache'
 
@@ -122,7 +122,7 @@ export default memo(() => {
   const query = useQuery(
     ['node_version'],
     async () => {
-      const wrapper = await fetchNodeVersion()
+      const wrapper = await explorerService.api.fetchNodeVersion()
       const nodeVersion = wrapper.attributes.version
       storeCachedData(AppCachedKeys.Version, `${nodeVersion}&${new Date().getTime()}`)
       return nodeVersion
diff --git a/src/components/NftCollectionInventory/index.tsx b/src/components/NftCollectionInventory/index.tsx
index 3fc77be3e..f21baff5a 100644
--- a/src/components/NftCollectionInventory/index.tsx
+++ b/src/components/NftCollectionInventory/index.tsx
@@ -8,7 +8,7 @@ import { ReactComponent as Cover } from '../../assets/nft_cover.svg'
 import i18n from '../../utils/i18n'
 import styles from './styles.module.scss'
 import { getPrimaryColor } from '../../constants/common'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { handleNftImgError, patchMibaoImg } from '../../utils/util'
 
 const primaryColor = getPrimaryColor()
@@ -33,7 +33,7 @@ const NftCollectionInventory: React.FC<{
   isLoading: boolean
 }> = ({ list, collection, isLoading }) => {
   const { data: info } = useQuery<AxiosResponse<{ icon_url: string | null }>>(['collection-info', collection], () =>
-    v2AxiosIns(`nft/collections/${collection}`),
+    explorerService.api.requesterV2(`nft/collections/${collection}`),
   )
 
   if (!list.length) {
diff --git a/src/components/NftCollectionOverview/index.tsx b/src/components/NftCollectionOverview/index.tsx
index 0fb3ec2ed..7a8730b2a 100644
--- a/src/components/NftCollectionOverview/index.tsx
+++ b/src/components/NftCollectionOverview/index.tsx
@@ -2,7 +2,7 @@ import type { AxiosResponse } from 'axios'
 import { Link } from 'react-router-dom'
 import { useQuery } from 'react-query'
 import { Tooltip } from 'antd'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import i18n from '../../utils/i18n'
 import styles from './styles.module.scss'
 import { handleNftImgError, patchMibaoImg } from '../../utils/util'
@@ -23,7 +23,7 @@ interface InfoRes {
 
 const NftCollectionOverview = ({ id }: { id: string }) => {
   const { isLoading, data } = useQuery<AxiosResponse<InfoRes>>(['collection-info', id], () =>
-    v2AxiosIns(`nft/collections/${id}`),
+    explorerService.api.requesterV2(`nft/collections/${id}`),
   )
   const info = data?.data
 
diff --git a/src/components/NftCollectionTransfers/index.tsx b/src/components/NftCollectionTransfers/index.tsx
index e7adc26bf..952889f79 100644
--- a/src/components/NftCollectionTransfers/index.tsx
+++ b/src/components/NftCollectionTransfers/index.tsx
@@ -11,7 +11,7 @@ import i18n from '../../utils/i18n'
 import styles from './styles.module.scss'
 import { getPrimaryColor } from '../../constants/common'
 import { handleNftImgError, patchMibaoImg } from '../../utils/util'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { dayjs } from '../../utils/date'
 import { useParsedDate, useTimestamp } from '../../utils/hook'
 
@@ -28,7 +28,7 @@ const NftCollectionTransfers: FC<TransferCollectionProps> = props => {
   const { collection } = props
 
   const { data: info } = useQuery<AxiosResponse<{ icon_url: string | null }>>(['collection-info', collection], () =>
-    v2AxiosIns(`nft/collections/${collection}`),
+    explorerService.api.requesterV2(`nft/collections/${collection}`),
   )
 
   return (
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index c847b99e6..01f6778d0 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router'
 import { AxiosError } from 'axios'
 import { useTranslation } from 'react-i18next'
 import { SearchImage, SearchInputPanel, SearchPanel, SearchButton, SearchContainer } from './styled'
-import { fetchSearchResult } from '../../service/http/fetcher'
+import { explorerService, Response } from '../../services/ExplorerService'
 import SearchLogo from '../../assets/search_black.png'
 import ClearLogo from '../../assets/clear.png'
 import { addPrefixForHash, containSpecialChar } from '../../utils/string'
@@ -57,7 +57,8 @@ const handleSearchResult = (
   }
 
   setSearchLoading(inputElement)
-  fetchSearchResult(addPrefixForHash(query))
+  explorerService.api
+    .fetchSearchResult(addPrefixForHash(query))
     .then((response: any) => {
       const { data } = response
       if (!response || !data.type) {
diff --git a/src/contexts/providers/dasQuery.tsx b/src/contexts/providers/dasQuery.tsx
index 8abd3bd83..f420225a2 100644
--- a/src/contexts/providers/dasQuery.tsx
+++ b/src/contexts/providers/dasQuery.tsx
@@ -1,6 +1,6 @@
 import { createContext, FC, useCallback, useContext, useMemo, useRef } from 'react'
 import { useQuery } from 'react-query'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { unique } from '../../utils/array'
 import { throttle } from '../../utils/function'
 import { pick } from '../../utils/object'
@@ -26,7 +26,7 @@ interface PendingQuery {
 }
 
 async function fetchDASAccounts(addresses: string[]): Promise<DASAccountMap> {
-  const { data } = await v2AxiosIns.post<Record<string, string>>('das_accounts', {
+  const { data } = await explorerService.api.requesterV2.post<Record<string, string>>('das_accounts', {
     addresses,
   })
   const dataWithNormalizeEmptyValue = Object.fromEntries(
diff --git a/src/contexts/providers/hook.ts b/src/contexts/providers/hook.ts
index 3bf187b45..3588c9ef6 100644
--- a/src/contexts/providers/hook.ts
+++ b/src/contexts/providers/hook.ts
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { initAxiosInterceptors } from '../../service/http/interceptors'
 import { FLUSH_CHART_CACHE_POLLING_TIME } from '../../constants/common'
 import { AppCachedKeys } from '../../constants/cache'
 import { fetchCachedData } from '../../utils/cache'
@@ -18,7 +17,6 @@ export const useInitApp = () => {
 
   if (!init) {
     setInit(true)
-    initAxiosInterceptors()
     // TODO: This function may not belong here.
     initAppLanguage()
     flushCacheInfo()
diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx
index 8bf0989f1..4bac42138 100644
--- a/src/pages/Address/AddressComp.tsx
+++ b/src/pages/Address/AddressComp.tsx
@@ -6,7 +6,7 @@ import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import OverviewCard, { OverviewItemData } from '../../components/Card/OverviewCard'
 import TransactionItem from '../../components/TransactionItem/index'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import i18n from '../../utils/i18n'
 import { parseSporeCellData } from '../../utils/spore'
 import { localeNumberString, parseUDTAmount } from '../../utils/number'
@@ -272,7 +272,7 @@ export const AddressOverview: FC<{ address: State.Address }> = ({ address }) =>
 
   const { data: initList } = useQuery<AxiosResponse<CoTAList>>(
     ['cota-list', address.addressHash],
-    () => v2AxiosIns(`nft/items?owner=${address.addressHash}&standard=cota`),
+    () => explorerService.api.requesterV2(`nft/items?owner=${address.addressHash}&standard=cota`),
     {
       enabled: !!address?.addressHash,
     },
@@ -281,7 +281,7 @@ export const AddressOverview: FC<{ address: State.Address }> = ({ address }) =>
   const { data: cotaList } = useQuery<CoTAList['data']>(['cota-list', initList?.data.pagination.series], () =>
     Promise.all(
       (initList?.data.pagination.series ?? []).map(p =>
-        v2AxiosIns(`nft/items?owner=${address.addressHash}&standard=cota&page=${p}`),
+        explorerService.api.requesterV2(`nft/items?owner=${address.addressHash}&standard=cota&page=${p}`),
       ),
     ).then(list => {
       return list.reduce((total, acc) => [...total, ...acc.data.data], [] as CoTAList['data'])
diff --git a/src/pages/Address/index.tsx b/src/pages/Address/index.tsx
index 284033e32..b2a91539a 100644
--- a/src/pages/Address/index.tsx
+++ b/src/pages/Address/index.tsx
@@ -5,7 +5,7 @@ import Content from '../../components/Content'
 import i18n from '../../utils/i18n'
 import { AddressContentPanel } from './styled'
 import { AddressTransactions, AddressOverview } from './AddressComp'
-import { fetchAddressInfo, fetchTransactionsByAddress } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { QueryResult } from '../../components/QueryResult'
 import { usePaginationParamsInListPage, useSortParam } from '../../utils/hook'
 import { isAxiosError } from '../../utils/error'
@@ -18,7 +18,7 @@ export const Address = () => {
   const { sortBy, orderBy, sort } = useSortParam<'time'>(s => s === 'time')
 
   const addressInfoQuery = useQuery(['address_info', address], async () => {
-    const wrapper = await fetchAddressInfo(address)
+    const wrapper = await explorerService.api.fetchAddressInfo(address)
     const result: State.Address = {
       ...wrapper.attributes,
       type: wrapper.type === 'lock_hash' ? 'LockHash' : 'Address',
@@ -30,7 +30,12 @@ export const Address = () => {
     ['address_transactions', address, currentPage, pageSize, sort],
     async () => {
       try {
-        const { data, meta } = await fetchTransactionsByAddress(address, currentPage, pageSize, sort)
+        const { data, meta } = await explorerService.api.fetchTransactionsByAddress(
+          address,
+          currentPage,
+          pageSize,
+          sort,
+        )
         return {
           transactions: data.map(wrapper => wrapper.attributes),
           total: meta ? meta.total : 0,
diff --git a/src/pages/BlockDetail/index.tsx b/src/pages/BlockDetail/index.tsx
index 5f00135e9..e60af85d6 100644
--- a/src/pages/BlockDetail/index.tsx
+++ b/src/pages/BlockDetail/index.tsx
@@ -6,7 +6,7 @@ import i18n from '../../utils/i18n'
 import { BlockDetailPanel } from './styled'
 import { BlockComp, BlockOverview } from './BlockComp'
 import { usePaginationParamsInPage } from '../../utils/hook'
-import { fetchBlock, fetchTransactionsByBlockHash } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { assert } from '../../utils/error'
 import { QueryResult } from '../../components/QueryResult'
 import { defaultBlockInfo } from './state'
@@ -19,7 +19,7 @@ export default () => {
   const filter = new URLSearchParams(search).get('filter')
 
   const queryBlock = useQuery(['block', blockHeightOrHash], async () => {
-    const wrapper = await fetchBlock(blockHeightOrHash)
+    const wrapper = await explorerService.api.fetchBlock(blockHeightOrHash)
     const block = wrapper.attributes
     return block
   })
@@ -31,7 +31,7 @@ export default () => {
     async () => {
       assert(blockHash != null)
       try {
-        const { data, meta } = await fetchTransactionsByBlockHash(blockHash, {
+        const { data, meta } = await explorerService.api.fetchTransactionsByBlockHash(blockHash, {
           page: currentPage,
           size: pageSizeParam,
           filter,
diff --git a/src/pages/BlockList/index.tsx b/src/pages/BlockList/index.tsx
index bcc531a3c..3b7563825 100644
--- a/src/pages/BlockList/index.tsx
+++ b/src/pages/BlockList/index.tsx
@@ -15,7 +15,7 @@ import DecimalCapacity from '../../components/DecimalCapacity'
 import { ItemCardData, ItemCardGroup } from '../../components/Card/ItemCard'
 import AddressText from '../../components/AddressText'
 import { useIsMobile, useMediaQuery, usePaginationParamsInListPage, useSortParam } from '../../utils/hook'
-import { fetchBlocks } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { RouteState } from '../../routes/state'
 import { ReactComponent as SortIcon } from '../../assets/sort_icon.svg'
 import { CsvExport } from '../../components/CsvExport'
@@ -176,7 +176,7 @@ export default () => {
   const query = useQuery(
     ['blocks', currentPage, pageSize, sort],
     async () => {
-      const { data, meta } = await fetchBlocks(currentPage, pageSize, sort)
+      const { data, meta } = await explorerService.api.fetchBlocks(currentPage, pageSize, sort)
       return {
         blocks: data.map(wrapper => wrapper.attributes),
         total: meta?.total ?? 0,
diff --git a/src/pages/ExportTransactions/index.tsx b/src/pages/ExportTransactions/index.tsx
index 9b2af3289..3ba27a7f5 100644
--- a/src/pages/ExportTransactions/index.tsx
+++ b/src/pages/ExportTransactions/index.tsx
@@ -15,7 +15,7 @@ import { ReactComponent as BlockIcon } from '../../assets/block_icon.svg'
 import { ReactComponent as ErrorIcon } from '../../assets/error_icon.svg'
 import { ReactComponent as SuccessIcon } from '../../assets/success_icon.svg'
 import { omit } from '../../utils/object'
-import { exportTransactions } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 
 const ExportTransactions = () => {
   const [t, { language }] = useTranslation()
@@ -116,12 +116,13 @@ const ExportTransactions = () => {
     }
     setHint({ type: 'success', msg: 'download_processed' })
     setIsDownloading(true)
-    exportTransactions({
-      type,
-      id,
-      date: tab === 'date' ? { start: startDate, end: endDate } : undefined,
-      block: tab === 'height' ? { from: fromHeight!, to: toHeight! } : undefined,
-    })
+    explorerService.api
+      .exportTransactions({
+        type,
+        id,
+        date: tab === 'date' ? { start: startDate, end: endDate } : undefined,
+        block: tab === 'height' ? { from: fromHeight!, to: toHeight! } : undefined,
+      })
       .then((resp: string | null) => {
         setIsDownloading(false)
         if (!resp) {
diff --git a/src/pages/FeeRateTracker/index.tsx b/src/pages/FeeRateTracker/index.tsx
index 1ab2438aa..1564a3492 100644
--- a/src/pages/FeeRateTracker/index.tsx
+++ b/src/pages/FeeRateTracker/index.tsx
@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react'
 import { useQuery } from 'react-query'
-import { v2AxiosIns } from '../../service/http/fetcher'
 import styles from './styles.module.scss'
 import Content from '../../components/Content'
 import { toCamelcase } from '../../utils/util'
@@ -15,7 +14,7 @@ import Loading from '../../components/Loading'
 import i18n from '../../utils/i18n'
 import { localeNumberString } from '../../utils/number'
 import { getFeeRateSamples } from '../../utils/chart'
-import { useStatistics } from '../../services/ExplorerService'
+import { explorerService, useStatistics } from '../../services/ExplorerService'
 
 const FeeRateTracker = () => {
   const lastFetchedTime = useRef(Number.MAX_SAFE_INTEGER)
@@ -28,7 +27,7 @@ const FeeRateTracker = () => {
   const { data: transactionFeesStatistic } = useQuery<FeeRateTracker.TransactionFeesStatistic>(
     ['statistics-transaction_fees'],
     () =>
-      v2AxiosIns.get(`statistics/transaction_fees`).then(({ status, data }) => {
+      explorerService.api.requesterV2.get(`statistics/transaction_fees`).then(({ status, data }) => {
         if (status === 200 && data) {
           lastFetchedTime.current = Date.now()
           deltaSecond.current = 0
diff --git a/src/pages/Home/AverageBlockTimeChart/index.tsx b/src/pages/Home/AverageBlockTimeChart/index.tsx
index 8a1ef118e..aa5fa8671 100644
--- a/src/pages/Home/AverageBlockTimeChart/index.tsx
+++ b/src/pages/Home/AverageBlockTimeChart/index.tsx
@@ -9,7 +9,7 @@ import SmallLoading from '../../../components/Loading/SmallLoading'
 import { HomeChartLink, ChartLoadingPanel } from './styled'
 import ChartNoDataImage from '../../../assets/chart_no_data_white.png'
 import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook'
-import { fetchStatisticAverageBlockTimes } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { ReactChartCore } from '../../StatisticsChart/common'
 
@@ -106,7 +106,11 @@ const getOption = (
 export default memo(() => {
   const isLG = useIsLGScreen()
 
-  const query = useChartQueryWithCache(fetchStatisticAverageBlockTimes, ChartCachedKeys.AverageBlockTime, 'date')
+  const query = useChartQueryWithCache(
+    explorerService.api.fetchStatisticAverageBlockTimes,
+    ChartCachedKeys.AverageBlockTime,
+    'date',
+  )
   const fullStatisticAverageBlockTimes = useMemo(() => query.data ?? [], [query.data])
 
   const statisticAverageBlockTimes = useMemo(() => {
diff --git a/src/pages/Home/HashRateChart/index.tsx b/src/pages/Home/HashRateChart/index.tsx
index f07fcec0d..3c9608c75 100644
--- a/src/pages/Home/HashRateChart/index.tsx
+++ b/src/pages/Home/HashRateChart/index.tsx
@@ -10,7 +10,7 @@ import SmallLoading from '../../../components/Loading/SmallLoading'
 import { HomeChartLink, ChartLoadingPanel } from './styled'
 import ChartNoDataImage from '../../../assets/chart_no_data_white.png'
 import { useChartQueryWithCache, useIsLGScreen } from '../../../utils/hook'
-import { fetchStatisticHashRate } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { ReactChartCore } from '../../StatisticsChart/common'
 
@@ -100,7 +100,7 @@ const getOption = (statisticHashRates: State.StatisticHashRate[], useMiniStyle:
 export default memo(() => {
   const isLG = useIsLGScreen()
 
-  const query = useChartQueryWithCache(fetchStatisticHashRate, ChartCachedKeys.HashRate, 'date')
+  const query = useChartQueryWithCache(explorerService.api.fetchStatisticHashRate, ChartCachedKeys.HashRate, 'date')
   const fullStatisticHashRates = useMemo(() => query.data ?? [], [query.data])
 
   const statisticHashRates = useMemo(() => {
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index e1efa99ac..cbdcbd692 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -34,9 +34,8 @@ import Search from '../../components/Search'
 import AverageBlockTimeChart from './AverageBlockTimeChart'
 import HashRateChart from './HashRateChart'
 import styles from './index.module.scss'
-import { fetchLatestBlocks, fetchLatestTransactions } from '../../service/http/fetcher'
 import { RouteState } from '../../routes/state'
-import { useLatestBlockNumber, useStatistics } from '../../services/ExplorerService'
+import { explorerService, useLatestBlockNumber, useStatistics } from '../../services/ExplorerService'
 import { useShowSearchBarInHeader } from '../../components/Header'
 
 interface BlockchainData {
@@ -194,7 +193,7 @@ export default () => {
     '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 fetchLatestBlocks(ListPageParams.PageSize)
+      const { data, meta } = await explorerService.api.fetchLatestBlocks(ListPageParams.PageSize)
       const blocks = data.map(wrapper => wrapper.attributes)
       return {
         blocks,
@@ -209,7 +208,7 @@ export default () => {
   const transactionsQuery = useQuery(
     ['latest_transactions'],
     async () => {
-      const { data, meta } = await fetchLatestTransactions(ListPageParams.PageSize)
+      const { data, meta } = await explorerService.api.fetchLatestTransactions(ListPageParams.PageSize)
       const transactions = data.map(wrapper => wrapper.attributes)
       return {
         transactions,
diff --git a/src/pages/NervosDao/index.tsx b/src/pages/NervosDao/index.tsx
index 5732f748f..fd453e01e 100644
--- a/src/pages/NervosDao/index.tsx
+++ b/src/pages/NervosDao/index.tsx
@@ -9,13 +9,9 @@ import DepositorRank from './DepositorRank'
 import { usePaginationParamsInPage, useSearchParams } from '../../utils/hook'
 import DaoOverview from './DaoOverview'
 import SimpleButton from '../../components/SimpleButton'
-import {
-  fetchNervosDao,
-  fetchNervosDaoDepositors,
-  fetchNervosDaoTransactionsByFilter,
-} from '../../service/http/fetcher'
 import { QueryResult } from '../../components/QueryResult'
 import { defaultNervosDaoInfo } from './state'
+import { explorerService } from '../../services/ExplorerService'
 
 export const NervosDao = () => {
   const { push } = useHistory()
@@ -26,7 +22,7 @@ export const NervosDao = () => {
   const tab = (params.tab as 'transactions' | 'depositors') || 'transactions'
 
   const queryNervosDao = useQuery(['nervos-dao'], async () => {
-    const wrapper = await fetchNervosDao()
+    const wrapper = await explorerService.api.fetchNervosDao()
     const nervosDao = wrapper.attributes
     return nervosDao
   })
@@ -34,7 +30,7 @@ export const NervosDao = () => {
   const queryNervosDaoTransactions = useQuery(
     ['nervos-dao-transactions', currentPage, _pageSize, params.filter],
     async () => {
-      const { data, meta } = await fetchNervosDaoTransactionsByFilter({
+      const { data, meta } = await explorerService.api.fetchNervosDaoTransactionsByFilter({
         filter: params.filter,
         page: currentPage,
         size: _pageSize,
@@ -53,7 +49,7 @@ export const NervosDao = () => {
   const queryNervosDaoDepositors = useQuery(
     ['nervos-dao-depositors'],
     async () => {
-      const { data } = await fetchNervosDaoDepositors()
+      const { data } = await explorerService.api.fetchNervosDaoDepositors()
       return { depositors: data.map(wrapper => wrapper.attributes) }
     },
     {
diff --git a/src/pages/NftCollectionInfo/index.tsx b/src/pages/NftCollectionInfo/index.tsx
index b90c2fab9..116601412 100644
--- a/src/pages/NftCollectionInfo/index.tsx
+++ b/src/pages/NftCollectionInfo/index.tsx
@@ -11,7 +11,7 @@ import NftCollectionInventory from '../../components/NftCollectionInventory'
 import Filter from '../../components/Search/Filter'
 import { ReactComponent as FilterIcon } from '../../assets/filter_icon.svg'
 import { ReactComponent as SelectedCheckIcon } from '../../assets/selected_check_icon.svg'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import i18n from '../../utils/i18n'
 import { useSearchParams, useIsMobile } from '../../utils/hook'
 import styles from './styles.module.scss'
@@ -116,7 +116,7 @@ const NftCollectionInfo = () => {
   const { isLoading: isTransferListLoading, data: transferListRes } = useQuery<AxiosResponse<TransferListRes>>(
     ['nft-collection-transfer-list', id, page, filter, type],
     () =>
-      v2AxiosIns(`/nft/transfers`, {
+      explorerService.api.requesterV2(`/nft/transfers`, {
         params: {
           page,
           collection_id: id,
@@ -132,7 +132,7 @@ const NftCollectionInfo = () => {
   const { isLoading: isHolderListLoading, data: rawHolderList } = useQuery<AxiosResponse<HolderListRes>>(
     ['nft-collection-holder-list', id, page, sort, filter],
     () =>
-      v2AxiosIns(`/nft/collections/${id}/holders`, {
+      explorerService.api.requesterV2(`/nft/collections/${id}/holders`, {
         params: {
           page,
           sort,
@@ -147,7 +147,7 @@ const NftCollectionInfo = () => {
   const { isLoading: isInventoryLoading, data: inventoryList } = useQuery<AxiosResponse<InventoryRes>>(
     ['nft-collection-inventory', id, page],
     () =>
-      v2AxiosIns(`/nft/collections/${id}/items`, {
+      explorerService.api.requesterV2(`/nft/collections/${id}/items`, {
         params: {
           page,
         },
diff --git a/src/pages/NftCollections/index.tsx b/src/pages/NftCollections/index.tsx
index 1e07c846d..49e1cd212 100644
--- a/src/pages/NftCollections/index.tsx
+++ b/src/pages/NftCollections/index.tsx
@@ -5,7 +5,7 @@ import Content from '../../components/Content'
 import { NFTCollection, ListOnDesktop, ListOnMobile, isTxFilterType } from './List'
 import Pagination from '../../components/Pagination'
 import { getPrimaryColor } from '../../constants/common'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import i18n from '../../utils/i18n'
 import { udtSubmitEmail } from '../../utils/util'
 import { useSearchParams, useSortParam } from '../../utils/hook'
@@ -38,7 +38,7 @@ const NftCollections = () => {
   const isValidFilter = isTxFilterType(type) && type !== 'all'
 
   const { isLoading, data } = useQuery<AxiosResponse<Res>>(['nft-collections', page, sort, type], () =>
-    v2AxiosIns('nft/collections', {
+    explorerService.api.requesterV2('nft/collections', {
       params: {
         page,
         sort,
diff --git a/src/pages/NftInfo/index.tsx b/src/pages/NftInfo/index.tsx
index e6d397f35..c1aa6c6e1 100644
--- a/src/pages/NftInfo/index.tsx
+++ b/src/pages/NftInfo/index.tsx
@@ -8,7 +8,7 @@ import i18n from '../../utils/i18n'
 import NftItemTransfers, { TransferListRes } from '../../components/NftItemTransfers'
 import Pagination from '../../components/Pagination'
 import { ReactComponent as Cover } from '../../assets/nft_cover.svg'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { getPrimaryColor } from '../../constants/common'
 import styles from './styles.module.scss'
 import { patchMibaoImg, handleNftImgError } from '../../utils/util'
@@ -45,12 +45,14 @@ const NftInfo = () => {
         icon_url: string
       }
     }>
-  >(['nft-item-info', collection, id], () => v2AxiosIns(`nft/collections/${collection}/items/${id}`))
+  >(['nft-item-info', collection, id], () =>
+    explorerService.api.requesterV2(`nft/collections/${collection}/items/${id}`),
+  )
 
   const { isLoading: isTransferListLoading, data: transferListRes } = useQuery<AxiosResponse<TransferListRes>>(
     ['nft-item-transfer-list', collection, id, page],
     () =>
-      v2AxiosIns(`/nft/transfers`, {
+      explorerService.api.requesterV2(`/nft/transfers`, {
         params: {
           page,
           collection_id: collection,
diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx
index 6fd870909..b0a37c14c 100644
--- a/src/pages/Script/ScriptsComp.tsx
+++ b/src/pages/Script/ScriptsComp.tsx
@@ -6,7 +6,7 @@ import camelcase from 'camelcase'
 import { useParams } from 'react-router-dom'
 import Pagination from '../../components/Pagination'
 import TransactionItem from '../../components/TransactionItem/index'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService, Response } from '../../services/ExplorerService'
 import i18n from '../../utils/i18n'
 import { TransactionCellDetailModal, TransactionCellInfoPanel } from '../Transaction/TransactionCell/styled'
 import SimpleButton from '../../components/SimpleButton'
@@ -28,7 +28,7 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
   const { codeHash, hashType } = useParams<{ codeHash: string; hashType: string }>()
 
   const transactionsQuery = useQuery(['scripts_ckb_transactions', codeHash, hashType, page, size], async () => {
-    const { data, meta } = await v2AxiosIns
+    const { data, meta } = await explorerService.api.requesterV2
       .get(`scripts/ckb_transactions`, {
         params: {
           code_hash: codeHash,
@@ -124,7 +124,7 @@ export const ScriptCells = ({
   const { codeHash, hashType } = useParams<{ codeHash: string; hashType: string }>()
 
   const cellsQuery = useQuery([`scripts_${cellType}`, codeHash, hashType, page, size], async () => {
-    const { data, meta } = await v2AxiosIns
+    const { data, meta } = await explorerService.api.requesterV2
       .get(`scripts/${cellType}`, {
         params: {
           code_hash: codeHash,
diff --git a/src/pages/Script/index.tsx b/src/pages/Script/index.tsx
index f3a179da1..08070d8f2 100644
--- a/src/pages/Script/index.tsx
+++ b/src/pages/Script/index.tsx
@@ -18,7 +18,7 @@ import { shannonToCkb, toCamelcase } from '../../utils/util'
 import DecimalCapacity from '../../components/DecimalCapacity'
 import { ScriptInfo, ScriptTabType } from './types'
 import styles from './styles.module.scss'
-import { v2AxiosIns } from '../../service/http/fetcher'
+import { explorerService, Response } from '../../services/ExplorerService'
 
 const scriptDataList = isMainnet() ? MainnetContractHashTags : TestnetContractHashTags
 
@@ -110,7 +110,7 @@ export const ScriptPage = () => {
   const [pageOfReferringCells, setPageOfReferringCells] = useState<number>(1)
 
   const { status, data: resp } = useQuery<AxiosResponse>(['scripts_general_info', codeHash, hashType], () =>
-    v2AxiosIns.get(`scripts/general_info`, {
+    explorerService.api.requesterV2.get(`scripts/general_info`, {
       params: {
         code_hash: codeHash,
         hash_type: hashType,
diff --git a/src/pages/SimpleUDT/index.tsx b/src/pages/SimpleUDT/index.tsx
index d9850744b..4d33a8953 100644
--- a/src/pages/SimpleUDT/index.tsx
+++ b/src/pages/SimpleUDT/index.tsx
@@ -18,7 +18,7 @@ import { isMainnet } from '../../utils/chain'
 import Filter from '../../components/Search/Filter'
 import { localeNumberString } from '../../utils/number'
 import Script from '../../components/Script'
-import { fetchSimpleUDT, fetchSimpleUDTTransactions } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { deprecatedAddrToNewAddr } from '../../utils/util'
 import { QueryResult } from '../../components/QueryResult'
 import { defaultUDTInfo } from './state'
@@ -53,7 +53,7 @@ export const SimpleUDT = () => {
   const type = query.get('type')
 
   const querySimpleUDT = useQuery(['simple-udt'], async () => {
-    const wrapper = await fetchSimpleUDT(typeHash)
+    const wrapper = await explorerService.api.fetchSimpleUDT(typeHash)
     const udt = wrapper.attributes
     return udt
   })
@@ -63,7 +63,7 @@ export const SimpleUDT = () => {
   const querySimpleUDTTransactions = useQuery(
     ['simple-udt-transactions', typeHash, currentPage, _pageSize, filter, type],
     async () => {
-      const { data, meta } = await fetchSimpleUDTTransactions({
+      const { data, meta } = await explorerService.api.fetchSimpleUDTTransactions({
         typeHash,
         page: currentPage,
         size: pageSize,
diff --git a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
index c2b415320..3426ee07e 100644
--- a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
+++ b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
@@ -6,7 +6,7 @@ import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
-import { fetchStatisticAddressBalanceRank } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useAdaptPCEllipsis } from '../../../utils/hook'
 
@@ -99,7 +99,7 @@ const getOption = (
 }
 
 const fetchStatisticAddressBalanceRanks = async () => {
-  const resp = await fetchStatisticAddressBalanceRank()
+  const resp = await explorerService.api.fetchStatisticAddressBalanceRank()
   return resp.attributes.addressBalanceRanking
 }
 
diff --git a/src/pages/StatisticsChart/activities/AddressCount.tsx b/src/pages/StatisticsChart/activities/AddressCount.tsx
index 9f012e921..6d41c6084 100644
--- a/src/pages/StatisticsChart/activities/AddressCount.tsx
+++ b/src/pages/StatisticsChart/activities/AddressCount.tsx
@@ -4,7 +4,7 @@ import i18n, { currentLanguage } from '../../../utils/i18n'
 import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { fetchStatisticAddressCount } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
@@ -104,7 +104,7 @@ export const AddressCountChart = ({ isThumbnail = false }: { isThumbnail?: boole
       title={t('statistic.address_count')}
       description={t('statistic.address_count_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticAddressCount}
+      fetchData={explorerService.api.fetchStatisticAddressCount}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.AddressCount}
diff --git a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
index e2f5057c9..65146d09c 100644
--- a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
+++ b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
@@ -5,7 +5,7 @@ import { DATA_ZOOM_CONFIG, handleAxis, handleLogGroupAxis } from '../../../utils
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticBalanceDistribution } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 270 : 110)
 
@@ -147,7 +147,7 @@ const getOption = (
 }
 
 const fetchStatisticBalanceDistributions = async () => {
-  const wrapper = await fetchStatisticBalanceDistribution()
+  const wrapper = await explorerService.api.fetchStatisticBalanceDistribution()
   const balanceDistributionArray = wrapper.attributes.addressBalanceDistribution
   const balanceDistributions = balanceDistributionArray.map(distribution => {
     const [balance, addresses, sumAddresses] = distribution
diff --git a/src/pages/StatisticsChart/activities/CellCount.tsx b/src/pages/StatisticsChart/activities/CellCount.tsx
index 00fbca839..159f09b0c 100644
--- a/src/pages/StatisticsChart/activities/CellCount.tsx
+++ b/src/pages/StatisticsChart/activities/CellCount.tsx
@@ -5,7 +5,7 @@ import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticCellCount } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 125 : 80)
 
@@ -165,7 +165,7 @@ export const CellCountChart = ({ isThumbnail = false }: { isThumbnail?: boolean
     <SmartChartPage
       title={t('statistic.cell_count')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticCellCount}
+      fetchData={explorerService.api.fetchStatisticCellCount}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.CellCount}
diff --git a/src/pages/StatisticsChart/activities/TransactionCount.tsx b/src/pages/StatisticsChart/activities/TransactionCount.tsx
index b2bdba4f1..933d35e2f 100644
--- a/src/pages/StatisticsChart/activities/TransactionCount.tsx
+++ b/src/pages/StatisticsChart/activities/TransactionCount.tsx
@@ -5,7 +5,7 @@ import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticTransactionCount } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticTransactionCounts: State.StatisticTransactionCount[],
@@ -100,7 +100,7 @@ export const TransactionCountChart = ({ isThumbnail = false }: { isThumbnail?: b
     <SmartChartPage
       title={t('statistic.transaction_count')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticTransactionCount}
+      fetchData={explorerService.api.fetchStatisticTransactionCount}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.TransactionCount}
diff --git a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
index 9cdd96b25..75b8aa870 100644
--- a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
+++ b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
@@ -7,7 +7,7 @@ import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticTxFeeHistory } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticTxFeeHistories: State.StatisticTransactionFee[],
@@ -107,7 +107,7 @@ export const TxFeeHistoryChart = ({ isThumbnail = false }: { isThumbnail?: boole
       title={t('statistic.tx_fee_history')}
       description={t('statistic.tx_fee_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticTxFeeHistory}
+      fetchData={explorerService.api.fetchStatisticTxFeeHistory}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.TransactionFee}
diff --git a/src/pages/StatisticsChart/block/AverageBlockTime.tsx b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
index 1c927bb41..128e7a3e3 100644
--- a/src/pages/StatisticsChart/block/AverageBlockTime.tsx
+++ b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
@@ -4,7 +4,7 @@ import { parseDateNoTime, parseSimpleDate, parseSimpleDateNoSecond } from '../..
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
-import { fetchStatisticAverageBlockTimes } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
@@ -184,7 +184,7 @@ export const AverageBlockTimeChart = ({ isThumbnail = false }: { isThumbnail?: b
       title={t('statistic.average_block_time')}
       description={t('statistic.average_block_time_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticAverageBlockTimes}
+      fetchData={explorerService.api.fetchStatisticAverageBlockTimes}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.AverageBlockTime}
diff --git a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
index d0676b58a..8d4cde2a6 100644
--- a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
+++ b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
@@ -3,7 +3,7 @@ import i18n, { currentLanguage } from '../../../utils/i18n'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticBlockTimeDistribution } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticBlockTimeDistributions: State.StatisticBlockTimeDistribution[],
@@ -90,7 +90,7 @@ const getOption = (
 const fetchStatisticBlockTimeDistributions = async () => {
   const {
     attributes: { blockTimeDistribution },
-  } = await fetchStatisticBlockTimeDistribution()
+  } = await explorerService.api.fetchStatisticBlockTimeDistribution()
   const sumBlocks = blockTimeDistribution
     .flatMap(data => Number(data[1]))
     .reduce((previous, current) => previous + current)
diff --git a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
index 8fd066415..6b3d552fd 100644
--- a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
+++ b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
@@ -4,7 +4,7 @@ import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
 import { parseHourFromMinute } from '../../../utils/date'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
-import { fetchStatisticEpochTimeDistribution } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
@@ -94,7 +94,7 @@ const getOption = (
 const fetchStatisticEpochTimeDistributions = async () => {
   const {
     attributes: { epochTimeDistribution },
-  } = await fetchStatisticEpochTimeDistribution()
+  } = await explorerService.api.fetchStatisticEpochTimeDistribution()
   const statisticEpochTimeDistributions: State.StatisticEpochTimeDistribution[] = epochTimeDistribution.map(data => {
     const [time, epoch] = data
     return {
diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx
index 7b0423edb..5d66b21f2 100644
--- a/src/pages/StatisticsChart/common/index.tsx
+++ b/src/pages/StatisticsChart/common/index.tsx
@@ -24,6 +24,7 @@ import { useChartQueryWithCache, useIsMobile, usePrevious, useWindowResize } fro
 import { isDeepEqual } from '../../../utils/util'
 import { HelpTip } from '../../../components/HelpTip'
 import { ChartColor } from '../../../constants/common'
+import { Response } from '../../../services/ExplorerService'
 
 const LoadingComp = ({ isThumbnail }: { isThumbnail?: boolean }) => (isThumbnail ? <SmallLoading /> : <Loading show />)
 
diff --git a/src/pages/StatisticsChart/mining/Difficulty.tsx b/src/pages/StatisticsChart/mining/Difficulty.tsx
index e7ab8bfee..3bd7b723b 100644
--- a/src/pages/StatisticsChart/mining/Difficulty.tsx
+++ b/src/pages/StatisticsChart/mining/Difficulty.tsx
@@ -6,7 +6,7 @@ import { parseDateNoTime } from '../../../utils/date'
 import { handleDifficulty } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticDifficulty } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticDifficulties: State.StatisticDifficulty[],
@@ -103,7 +103,7 @@ export const DifficultyChart = ({ isThumbnail = false }: { isThumbnail?: boolean
     <SmartChartPage
       title={t('block.difficulty')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticDifficulty}
+      fetchData={explorerService.api.fetchStatisticDifficulty}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.Difficulty}
diff --git a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
index ab5d54da4..dcf53f444 100644
--- a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
+++ b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
@@ -4,7 +4,7 @@ import i18n, { currentLanguage } from '../../../utils/i18n'
 import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
 import { handleDifficulty, handleHashRate } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
-import { fetchStatisticDifficultyHashRate } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
@@ -185,7 +185,7 @@ export const DifficultyHashRateChart = ({ isThumbnail = false }: { isThumbnail?:
     <SmartChartPage
       title={`${t('block.difficulty')} & ${t('block.hash_rate')} & ${t('block.uncle_rate')}`}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticDifficultyHashRate}
+      fetchData={explorerService.api.fetchStatisticDifficultyHashRate}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.DifficultyHashRate}
diff --git a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
index 0964d11f3..51b833e52 100644
--- a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
+++ b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
@@ -6,7 +6,7 @@ import { handleAxis } from '../../../utils/chart'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { parseHourFromMillisecond } from '../../../utils/date'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticDifficultyUncleRateEpoch } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 90 : 80)
 
@@ -199,7 +199,7 @@ export const DifficultyUncleRateEpochChart: FC<{ isThumbnail?: boolean }> = ({ i
     <SmartChartPage
       title={`${t('block.epoch_time')} & ${t('block.epoch_length')}`}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticDifficultyUncleRateEpoch}
+      fetchData={explorerService.api.fetchStatisticDifficultyUncleRateEpoch}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.DifficultyUncleRateEpoch}
diff --git a/src/pages/StatisticsChart/mining/HashRate.tsx b/src/pages/StatisticsChart/mining/HashRate.tsx
index 436dce2e7..941f7a377 100644
--- a/src/pages/StatisticsChart/mining/HashRate.tsx
+++ b/src/pages/StatisticsChart/mining/HashRate.tsx
@@ -5,7 +5,7 @@ import { DATA_ZOOM_CONFIG, handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { handleHashRate } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { fetchStatisticHashRate } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 const getOption = (
@@ -101,7 +101,7 @@ export const HashRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean }
       title={t('block.hash_rate')}
       description={t('glossary.hash_rate')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticHashRate}
+      fetchData={explorerService.api.fetchStatisticHashRate}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.HashRate}
diff --git a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
index aeb330096..29b67e5dd 100644
--- a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
+++ b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import i18n, { currentLanguage } from '../../../utils/i18n'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticMinerAddressDistribution } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { useAdaptMobileEllipsis, useAdaptPCEllipsis, useIsMobile } from '../../../utils/hook'
 
 const Colors = [
@@ -85,7 +85,7 @@ const getOption = (
 const fetchStatisticMinerAddresses = async () => {
   const {
     attributes: { minerAddressDistribution },
-  } = await fetchStatisticMinerAddressDistribution()
+  } = await explorerService.api.fetchStatisticMinerAddressDistribution()
   const blockSum = Object.values(minerAddressDistribution).reduce((sum, val) => sum + Number(val), 0)
   const statisticMinerAddresses: State.StatisticMinerAddress[] = Object.entries(minerAddressDistribution).map(
     ([key, val]) => ({
diff --git a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
index fca6331d3..0ff226310 100644
--- a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
+++ b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
@@ -3,7 +3,7 @@ import { EChartOption } from 'echarts'
 import i18n, { currentLanguage } from '../../../utils/i18n'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticMinerVersionDistribution } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const Colors = [
   '#069ECD',
@@ -100,7 +100,7 @@ const getOption = (
 }
 
 const fetchData = async () => {
-  const { data: list } = await fetchStatisticMinerVersionDistribution()
+  const { data: list } = await explorerService.api.fetchStatisticMinerVersionDistribution()
   const totalBlocks = list.reduce((acc, cur) => acc + cur.blocksCount, 0)
   return list.map(v => ({
     version: v.version,
diff --git a/src/pages/StatisticsChart/mining/UncleRate.tsx b/src/pages/StatisticsChart/mining/UncleRate.tsx
index dee92a51e..de8589e86 100644
--- a/src/pages/StatisticsChart/mining/UncleRate.tsx
+++ b/src/pages/StatisticsChart/mining/UncleRate.tsx
@@ -3,7 +3,7 @@ import i18n, { currentLanguage } from '../../../utils/i18n'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
-import { fetchStatisticUncleRate } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 const max = (statisticUncleRates: State.StatisticUncleRate[]) => {
@@ -117,7 +117,7 @@ export const UncleRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean
       title={t('block.uncle_rate')}
       description={t('statistic.uncle_rate_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticUncleRate}
+      fetchData={explorerService.api.fetchStatisticUncleRate}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.UncleRate}
diff --git a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
index 69fe5a806..561a136f8 100644
--- a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
+++ b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
@@ -3,7 +3,7 @@ import i18n, { currentLanguage } from '../../../utils/i18n'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticAnnualPercentageCompensation } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticAnnualPercentageCompensations: State.StatisticAnnualPercentageCompensation[],
@@ -93,7 +93,7 @@ const getOption = (
 const fetchStatisticAnnualPercentageCompensations = async () => {
   const {
     attributes: { nominalApc },
-  } = await fetchStatisticAnnualPercentageCompensation()
+  } = await explorerService.api.fetchStatisticAnnualPercentageCompensation()
   const statisticAnnualPercentageCompensations = nominalApc
     .filter((_apc, index) => index % 3 === 0 || index === nominalApc.length - 1)
     .map((apc, index) => ({
diff --git a/src/pages/StatisticsChart/monetary/InflationRate.tsx b/src/pages/StatisticsChart/monetary/InflationRate.tsx
index 33beee833..b1fbf438f 100644
--- a/src/pages/StatisticsChart/monetary/InflationRate.tsx
+++ b/src/pages/StatisticsChart/monetary/InflationRate.tsx
@@ -3,7 +3,7 @@ import i18n, { currentLanguage } from '../../../utils/i18n'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticInflationRate } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticInflationRates: State.StatisticInflationRate[],
@@ -142,7 +142,7 @@ const getOption = (
 const fetchStatisticInflationRates = async () => {
   const {
     attributes: { nominalApc, nominalInflationRate, realInflationRate },
-  } = await fetchStatisticInflationRate()
+  } = await explorerService.api.fetchStatisticInflationRate()
   const statisticInflationRates = []
   for (let i = 0; i < nominalApc.length; i++) {
     if (i % 6 === 0 || i === nominalApc.length - 1) {
diff --git a/src/pages/StatisticsChart/monetary/Liquidity.tsx b/src/pages/StatisticsChart/monetary/Liquidity.tsx
index 07b411827..15c8b55d7 100644
--- a/src/pages/StatisticsChart/monetary/Liquidity.tsx
+++ b/src/pages/StatisticsChart/monetary/Liquidity.tsx
@@ -5,7 +5,7 @@ import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../commo
 import { DATA_ZOOM_CONFIG, parseNumericAbbr } from '../../../utils/chart'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticLiquidity } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticLiquidity: State.StatisticLiquidity[],
@@ -183,7 +183,7 @@ export const LiquidityChart = ({ isThumbnail = false }: { isThumbnail?: boolean
     <SmartChartPage
       title={t('statistic.liquidity')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticLiquidity}
+      fetchData={explorerService.api.fetchStatisticLiquidity}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.Liquidity}
diff --git a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
index 3d3bb8a1d..92ace10ed 100644
--- a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
+++ b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
@@ -4,7 +4,7 @@ import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticSecondaryIssuance } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 155 : 70)
 
@@ -168,7 +168,7 @@ export const SecondaryIssuanceChart = ({ isThumbnail = false }: { isThumbnail?:
       title={t('nervos_dao.secondary_issuance')}
       description={t('statistic.secondary_issuance_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticSecondaryIssuance}
+      fetchData={explorerService.api.fetchStatisticSecondaryIssuance}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.SecondaryIssuance}
diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
index 1283bb809..6b187d07c 100644
--- a/src/pages/StatisticsChart/monetary/TotalSupply.tsx
+++ b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
@@ -6,7 +6,7 @@ import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticTotalSupply } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 125 : 80)
 
@@ -179,7 +179,7 @@ export const TotalSupplyChart = ({ isThumbnail = false }: { isThumbnail?: boolea
       title={t('statistic.total_supply')}
       description={t('statistic.total_supply_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticTotalSupply}
+      fetchData={explorerService.api.fetchStatisticTotalSupply}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.TotalSupply}
diff --git a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
index f48acc0ea..635918e4c 100644
--- a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
+++ b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
@@ -4,7 +4,7 @@ import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticCirculationRatio } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const getOption = (
   statisticCirculationRatios: State.StatisticCirculationRatio[],
@@ -105,7 +105,7 @@ export const CirculationRatioChart = ({ isThumbnail = false }: { isThumbnail?: b
       title={t('statistic.circulation_ratio')}
       description={t('statistic.deposit_to_circulation_ratio_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticCirculationRatio}
+      fetchData={explorerService.api.fetchStatisticCirculationRatio}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.DepositCirculationRatio}
diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
index 94615c2f9..1f1fce355 100644
--- a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
+++ b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
@@ -7,7 +7,7 @@ import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
 import { tooltipWidth, tooltipColor, SeriesItem, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticNewDaoDeposit } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 140 : 120)
 
@@ -178,7 +178,7 @@ export const NewDaoDepositChart = ({ isThumbnail = false }: { isThumbnail?: bool
       title={t('statistic.new_dao_deposit_depositor')}
       note={isMainnet() ? `${t('common.note')}1MB = 1,000,000 CKBytes` : undefined}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticNewDaoDeposit}
+      fetchData={explorerService.api.fetchStatisticNewDaoDeposit}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.DailyDeposit}
diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
index 5f06290e7..bcea6e440 100644
--- a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
+++ b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
@@ -7,7 +7,7 @@ import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { fetchStatisticTotalDaoDeposit } from '../../../service/http/fetcher'
+import { explorerService } from '../../../services/ExplorerService'
 
 const widthSpan = (value: string) => tooltipWidth(value, currentLanguage() === 'en' ? 168 : 110)
 
@@ -176,7 +176,7 @@ export const TotalDaoDepositChart = ({ isThumbnail = false }: { isThumbnail?: bo
       description={t('statistic.total_dao_deposit_description')}
       note={isMainnet() ? `${t('common.note')}1GB = 1,000,000,000 CKBytes` : undefined}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticTotalDaoDeposit}
+      fetchData={explorerService.api.fetchStatisticTotalDaoDeposit}
       getEChartOption={getOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.TotalDeposit}
diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx
index a56d0c6b2..5418ab54c 100644
--- a/src/pages/Tokens/index.tsx
+++ b/src/pages/Tokens/index.tsx
@@ -24,7 +24,7 @@ import { udtSubmitEmail } from '../../utils/util'
 import SmallLoading from '../../components/Loading/SmallLoading'
 import styles from './styles.module.scss'
 import { useIsMobile, usePaginationParamsInPage } from '../../utils/hook'
-import { fetchTokens } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { QueryResult } from '../../components/QueryResult'
 
 const TokenItem = ({ token, isLast }: { token: State.UDT; isLast?: boolean }) => {
@@ -102,7 +102,7 @@ export default () => {
   const sort = new URLSearchParams(location.search).get('sort')
 
   const query = useQuery(['tokens', currentPage, _pageSize, sort], async () => {
-    const { data, meta } = await fetchTokens(currentPage, _pageSize, sort ?? undefined)
+    const { data, meta } = await explorerService.api.fetchTokens(currentPage, _pageSize, sort ?? undefined)
     if (data == null || data.length === 0) {
       throw new Error('Tokens empty')
     }
diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
index 50c8a782d..0a33bfba6 100644
--- a/src/pages/Transaction/TransactionCellScript/index.tsx
+++ b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import { useEffect, useState, ReactNode, useRef } from 'react'
 import BigNumber from 'bignumber.js'
-import { fetchCellData, fetchScript } from '../../../service/http/fetcher'
+import { explorerService, Response } from '../../../services/ExplorerService'
 import { CellState } from '../../../constants/common'
 import { hexToUtf8 } from '../../../utils/string'
 import {
@@ -64,7 +64,10 @@ const handleFetchCellInfo = async (
 
   const fetchLock = async () => {
     if (cell.id) {
-      const wrapper: Response.Wrapper<State.Script> | null = await fetchScript('lock_scripts', `${cell.id}`)
+      const wrapper: Response.Wrapper<State.Script> | null = await explorerService.api.fetchScript(
+        'lock_scripts',
+        `${cell.id}`,
+      )
       return wrapper ? wrapper.attributes : initScriptContent.lock
     }
     return initScriptContent.lock
@@ -72,7 +75,10 @@ const handleFetchCellInfo = async (
 
   const fetchType = async () => {
     if (cell.id) {
-      const wrapper: Response.Wrapper<State.Script> | null = await fetchScript('type_scripts', `${cell.id}`)
+      const wrapper: Response.Wrapper<State.Script> | null = await explorerService.api.fetchScript(
+        'type_scripts',
+        `${cell.id}`,
+      )
       return wrapper ? wrapper.attributes : initScriptContent.type
     }
     return initScriptContent.type
@@ -80,7 +86,8 @@ const handleFetchCellInfo = async (
 
   const fetchData = async () => {
     if (cell.id) {
-      return fetchCellData(`${cell.id}`)
+      return explorerService.api
+        .fetchCellData(`${cell.id}`)
         .then((wrapper: Response.Wrapper<State.Data> | null) => {
           const dataValue: State.Data = wrapper ? wrapper.attributes : initScriptContent.data
           if (wrapper && cell.isGenesisOutput) {
diff --git a/src/pages/Transaction/index.tsx b/src/pages/Transaction/index.tsx
index 389362112..1f4046f18 100644
--- a/src/pages/Transaction/index.tsx
+++ b/src/pages/Transaction/index.tsx
@@ -5,7 +5,7 @@ import Content from '../../components/Content'
 import i18n from '../../utils/i18n'
 import { TransactionDiv as TransactionPanel } from './styled'
 import TransactionComp, { TransactionOverview } from './TransactionComp'
-import { fetchTransactionByHash } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { QueryResult } from '../../components/QueryResult'
 import { defaultTransactionInfo } from './state'
 
@@ -13,7 +13,7 @@ export default () => {
   const { hash: txHash } = useParams<{ hash: string }>()
 
   const query = useQuery(['transaction', txHash], async () => {
-    const wrapper = await fetchTransactionByHash(txHash)
+    const wrapper = await explorerService.api.fetchTransactionByHash(txHash)
     const transaction = wrapper.attributes
     if (transaction.displayOutputs && transaction.displayOutputs.length > 0) {
       transaction.displayOutputs[0].isGenesisOutput = transaction.blockNumber === 0
diff --git a/src/pages/TransactionList/index.tsx b/src/pages/TransactionList/index.tsx
index b96e0ae2e..f3854cf9a 100644
--- a/src/pages/TransactionList/index.tsx
+++ b/src/pages/TransactionList/index.tsx
@@ -12,7 +12,7 @@ import DecimalCapacity from '../../components/DecimalCapacity'
 import { ItemCardData, ItemCardGroup } from '../../components/Card/ItemCard'
 import AddressText from '../../components/AddressText'
 import { useIsMobile, usePaginationParamsInListPage, useSearchParams, useSortParam } from '../../utils/hook'
-import { fetchPendingTransactions, fetchPendingTransactionsCount, fetchTransactions } from '../../service/http/fetcher'
+import { explorerService } from '../../services/ExplorerService'
 import { Tabs } from './Tabs'
 import styles from './index.module.scss'
 import { QueryResult } from '../../components/QueryResult'
@@ -241,7 +241,7 @@ const TransactionsPanel: FC<{ type: TxStatus }> = ({ type }) => {
       const [, type] = queryKey
       switch (type) {
         case 'pending': {
-          const resp = await fetchPendingTransactions(currentPage, pageSize, sort)
+          const resp = await explorerService.api.fetchPendingTransactions(currentPage, pageSize, sort)
           return {
             transactions: resp.data,
             total: resp.meta?.total ?? 0,
@@ -249,7 +249,7 @@ const TransactionsPanel: FC<{ type: TxStatus }> = ({ type }) => {
         }
         case 'confirmed':
         default: {
-          const resp = await fetchTransactions(currentPage, pageSize, sort)
+          const resp = await explorerService.api.fetchTransactions(currentPage, pageSize, sort)
           return {
             transactions: resp.data.map(wrapper => wrapper.attributes) ?? [],
             total: resp.meta?.total ?? 0,
@@ -309,7 +309,7 @@ const TransactionsPanel: FC<{ type: TxStatus }> = ({ type }) => {
 export default () => {
   const { tab } = useSearchParams('tab')
 
-  const { data } = useQuery(['transactions-count'], fetchPendingTransactionsCount)
+  const { data } = useQuery(['transactions-count'], explorerService.api.fetchPendingTransactionsCount)
 
   return (
     <Content>
diff --git a/src/service/app/blockchain.ts b/src/service/app/blockchain.ts
index 79b15be1d..bc8374718 100644
--- a/src/service/app/blockchain.ts
+++ b/src/service/app/blockchain.ts
@@ -1,4 +1,4 @@
-import { fetchBlockchainInfo } from '../http/fetcher'
+import { explorerService, Response } from '../../services/ExplorerService'
 import { setChainAlerts } from '../../components/Sheet'
 
 const alertNotEmpty = (wrapper: Response.Wrapper<State.BlockchainInfo> | null): boolean =>
@@ -12,7 +12,7 @@ const alertNotEmpty = (wrapper: Response.Wrapper<State.BlockchainInfo> | null):
 const ALERT_TO_FILTER_OUT = 'CKB v0.105.* have bugs. Please upgrade to the latest version.'
 
 export const handleBlockchainAlert = () => {
-  fetchBlockchainInfo().then((wrapper: Response.Wrapper<State.BlockchainInfo> | null) => {
+  explorerService.api.fetchBlockchainInfo().then((wrapper: Response.Wrapper<State.BlockchainInfo> | null) => {
     if (alertNotEmpty(wrapper)) {
       setChainAlerts(
         wrapper!.attributes.blockchainInfo.alerts
diff --git a/src/service/app/charts/cache.ts b/src/service/app/charts/cache.ts
index fc7818c98..5f189fb45 100644
--- a/src/service/app/charts/cache.ts
+++ b/src/service/app/charts/cache.ts
@@ -1,9 +1,9 @@
-import { fetchFlushChartCache } from '../../http/fetcher'
+import { explorerService, Response } from '../../../services/ExplorerService'
 import { removeCachedData, fetchCachedData } from '../../../utils/cache'
 import { ChartCachedKeys } from '../../../constants/cache'
 
 export const flushCacheInfo = () => {
-  fetchFlushChartCache().then((wrapper: Response.Wrapper<State.StatisticCacheInfo> | null) => {
+  explorerService.api.fetchFlushChartCache().then((wrapper: Response.Wrapper<State.StatisticCacheInfo> | null) => {
     if (wrapper && wrapper.attributes.flushCacheInfo.length > 0) {
       // eslint-disable-next-line no-restricted-syntax
       for (const [, value] of Object.entries(ChartCachedKeys)) {
diff --git a/src/service/http/interceptors.ts b/src/service/http/interceptors.ts
deleted file mode 100644
index a562c43db..000000000
--- a/src/service/http/interceptors.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { AxiosError } from 'axios'
-import { axiosIns } from './fetcher'
-import i18n from '../../utils/i18n'
-import { setNetworkErrMsgs } from '../../components/Sheet'
-
-let timeout: ReturnType<typeof setTimeout> | null
-
-const updateNetworkError = (errMessage = 'toast.invalid_network') => {
-  if (timeout) {
-    clearTimeout(timeout)
-  }
-  timeout = setTimeout(() => {
-    setNetworkErrMsgs([])
-    timeout = null
-  }, 2000)
-  setNetworkErrMsgs([i18n.t(errMessage)])
-}
-
-export const initAxiosInterceptors = () => {
-  axiosIns.interceptors.request.use(
-    config => {
-      if (config.method === 'get') {
-        // eslint-disable-next-line no-param-reassign
-        config.data = {
-          unused: 0,
-        }
-      }
-      return config
-    },
-    error => Promise.reject(error),
-  )
-
-  axiosIns.interceptors.response.use(
-    response => response,
-    (error: AxiosError) => {
-      if (error && error.response && error.response.data) {
-        const { message }: { message: string } = error.response.data
-        switch (error.response.status) {
-          case 503:
-            updateNetworkError(message || undefined)
-            break
-          case 422:
-          case 404:
-          case 400:
-            break
-          case 429:
-            updateNetworkError('toast.too_many_request')
-            break
-          default:
-            updateNetworkError()
-            break
-        }
-      } else {
-        updateNetworkError()
-      }
-      return Promise.reject(error)
-    },
-  )
-}
-
-export default initAxiosInterceptors
diff --git a/src/service/http/fetcher.ts b/src/services/ExplorerService/fetcher.ts
similarity index 79%
rename from src/service/http/fetcher.ts
rename to src/services/ExplorerService/fetcher.ts
index 813e9541e..7efa1ee0d 100644
--- a/src/service/http/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -1,32 +1,17 @@
-import axios, { AxiosResponse } from 'axios'
+import { AxiosResponse } from 'axios'
 import BigNumber from 'bignumber.js'
 import { Dayjs } from 'dayjs'
-import CONFIG from '../../config'
 import { pick } from '../../utils/object'
 import { toCamelcase } from '../../utils/util'
+import { requesterV1, requesterV2 } from './requester'
+import { Response } from './types'
 
-const baseURL = `${CONFIG.API_URL}/api/v1/`
-
-export const axiosIns = axios.create({
-  baseURL,
-  headers: {
-    'Content-Type': 'application/vnd.api+json',
-    Accept: 'application/vnd.api+json',
-  },
-  data: null,
-})
-
-export const v2AxiosIns = axios.create({
-  baseURL: `${CONFIG.API_URL}/api/v2/`,
-  headers: {
-    'Content-Type': 'application/vnd.api+json',
-    Accept: 'application/vnd.api+json',
-  },
-  data: null,
-})
+// TODO: Temporarily compatible with old code, it exists in the form of `explorerService.api.requesterV2`,
+// and in the future, the `requester` should be hidden from the outside.
+export { requesterV2 }
 
 export const fetchBlocks = (page: number, size: number, sort?: string) =>
-  axiosIns
+  requesterV1
     .get('blocks', {
       params: {
         page,
@@ -39,7 +24,7 @@ export const fetchBlocks = (page: number, size: number, sort?: string) =>
 export const fetchLatestBlocks = (size: number) => fetchBlocks(1, size)
 
 export const fetchAddressInfo = (address: string) =>
-  axiosIns
+  requesterV1
     .get(`addresses/${address}`)
     .then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.Address>>(res.data.data))
 
@@ -50,7 +35,7 @@ export const fetchTransactionsByAddress = (
   sort?: string,
   txTypeFilter?: string,
 ) =>
-  axiosIns
+  requesterV1
     .get(`address_transactions/${address}`, {
       params: {
         page,
@@ -62,12 +47,12 @@ export const fetchTransactionsByAddress = (
     .then((res: AxiosResponse) => toCamelcase<Response.Response<Response.Wrapper<State.Transaction>[]>>(res.data))
 
 export const fetchTransactionByHash = (hash: string) =>
-  axiosIns
+  requesterV1
     .get(`transactions/${hash}`)
     .then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.Transaction>>(res.data.data))
 
 export const fetchTransactions = (page: number, size: number, sort?: string) =>
-  axiosIns
+  requesterV1
     .get('transactions', {
       params: {
         page,
@@ -80,7 +65,7 @@ export const fetchTransactions = (page: number, size: number, sort?: string) =>
 export const fetchLatestTransactions = (size: number) => fetchTransactions(1, size)
 
 export const fetchPendingTransactions = (page: number, size: number, sort?: string) =>
-  v2AxiosIns
+  requesterV2
     .get('pending_transactions', {
       params: {
         page,
@@ -104,7 +89,7 @@ export const fetchTransactionsByBlockHash = (
     filter: string | null
   }>,
 ) =>
-  axiosIns
+  requesterV1
     .get(`/block_transactions/${blockHash}`, {
       params: {
         page,
@@ -116,22 +101,22 @@ export const fetchTransactionsByBlockHash = (
     .then((res: AxiosResponse) => toCamelcase<Response.Response<Response.Wrapper<State.Transaction>[]>>(res.data))
 
 export const fetchBlock = (blockHeightOrHash: string) =>
-  axiosIns
+  requesterV1
     .get(`blocks/${blockHeightOrHash}`)
     .then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.Block>>(res.data.data))
 
 export const fetchScript = (scriptType: 'lock_scripts' | 'type_scripts', id: string) =>
-  axiosIns
+  requesterV1
     .get(`/cell_output_${scriptType}/${id}`)
     .then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.Script>>(res.data.data))
 
 export const fetchCellData = (id: string) =>
-  axiosIns
+  requesterV1
     .get(`/cell_output_data/${id}`)
     .then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.Data>>(res.data.data))
 
 export const fetchSearchResult = (param: string) =>
-  axiosIns
+  requesterV1
     .get('suggest_queries', {
       params: {
         q: param,
@@ -140,12 +125,12 @@ export const fetchSearchResult = (param: string) =>
     .then((res: AxiosResponse) => toCamelcase<any>(res.data))
 
 export const fetchStatistics = () =>
-  axiosIns
+  requesterV1
     .get('statistics')
     .then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.Statistics>>(res.data.data))
 
 export const fetchStatisticInfo = (infoName: string) =>
-  axiosIns.get(`statistics/${infoName}`).then((res: AxiosResponse) => res.data)
+  requesterV1.get(`statistics/${infoName}`).then((res: AxiosResponse) => res.data)
 
 export const fetchTipBlockNumber = () =>
   fetchStatisticInfo('tip_block_number').then(wrapper => toCamelcase<Response.Wrapper<State.Statistics>>(wrapper.data))
@@ -156,17 +141,17 @@ export const fetchBlockchainInfo = () =>
   )
 
 export const fetchNodeVersion = () =>
-  axiosIns('/nets/version').then((res: AxiosResponse) =>
+  requesterV1('/nets/version').then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.NodeVersion>>(res.data.data),
   )
 
 export const fetchNervosDao = () =>
-  axiosIns('/contracts/nervos_dao').then((res: AxiosResponse) =>
+  requesterV1('/contracts/nervos_dao').then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.NervosDao>>(res.data.data),
   )
 
 export const fetchNervosDaoTransactions = (page: number, size: number) =>
-  axiosIns('/contract_transactions/nervos_dao', {
+  requesterV1('/contract_transactions/nervos_dao', {
     params: {
       page,
       page_size: size,
@@ -174,12 +159,12 @@ export const fetchNervosDaoTransactions = (page: number, size: number) =>
   }).then((res: AxiosResponse) => toCamelcase<Response.Response<Response.Wrapper<State.Transaction>[]>>(res.data))
 
 export const fetchNervosDaoTransactionsByHash = (hash: string) =>
-  axiosIns(`/dao_contract_transactions/${hash}`).then((res: AxiosResponse) =>
+  requesterV1(`/dao_contract_transactions/${hash}`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.Transaction>>(res.data.data),
   )
 
 export const fetchNervosDaoTransactionsByAddress = (address: string, page: number, size: number) =>
-  axiosIns(`/address_dao_transactions/${address}`, {
+  requesterV1(`/address_dao_transactions/${address}`, {
     params: {
       page,
       page_size: size,
@@ -195,7 +180,7 @@ export const fetchNervosDaoTransactionsByFilter = ({
   size: number
   filter?: string
 }) =>
-  axiosIns(`/contract_transactions/nervos_dao`, {
+  requesterV1(`/contract_transactions/nervos_dao`, {
     params: {
       page,
       page_size: size,
@@ -205,42 +190,42 @@ export const fetchNervosDaoTransactionsByFilter = ({
   }).then((res: AxiosResponse) => toCamelcase<Response.Response<Response.Wrapper<State.Transaction>[]>>(res.data))
 
 export const fetchNervosDaoDepositors = () =>
-  axiosIns(`/dao_depositors`).then((res: AxiosResponse) =>
+  requesterV1(`/dao_depositors`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.NervosDaoDepositor>[]>>(res.data),
   )
 
 export const fetchStatisticTransactionCount = () =>
-  axiosIns(`/daily_statistics/transactions_count`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/transactions_count`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticTransactionCount>[]>>(res.data),
   )
 
 export const fetchStatisticAddressCount = () =>
-  axiosIns(`/daily_statistics/addresses_count`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/addresses_count`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticAddressCount>[]>>(res.data),
   )
 
 export const fetchStatisticTotalDaoDeposit = () =>
-  axiosIns(`/daily_statistics/total_depositors_count-total_dao_deposit`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/total_depositors_count-total_dao_deposit`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticTotalDaoDeposit>[]>>(res.data),
   )
 
 export const fetchStatisticNewDaoDeposit = () =>
-  axiosIns(`/daily_statistics/daily_dao_deposit-daily_dao_depositors_count`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/daily_dao_deposit-daily_dao_depositors_count`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticNewDaoDeposit>[]>>(res.data),
   )
 
 export const fetchStatisticNewDaoWithdraw = () =>
-  axiosIns(`/daily_statistics/daily_dao_withdraw`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/daily_dao_withdraw`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticNewDaoWithdraw>[]>>(res.data),
   )
 
 export const fetchStatisticCirculationRatio = () =>
-  axiosIns(`/daily_statistics/circulation_ratio`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/circulation_ratio`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticCirculationRatio>[]>>(res.data),
   )
 
 export const fetchStatisticDifficultyHashRate = () =>
-  axiosIns(`/epoch_statistics/difficulty-uncle_rate-hash_rate`).then((res: AxiosResponse) => {
+  requesterV1(`/epoch_statistics/difficulty-uncle_rate-hash_rate`).then((res: AxiosResponse) => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<State.StatisticDifficultyHashRate>[]>>(res.data)
     return {
       ...resp,
@@ -257,12 +242,12 @@ export const fetchStatisticDifficultyHashRate = () =>
   })
 
 export const fetchStatisticDifficulty = () =>
-  axiosIns(`/daily_statistics/avg_difficulty`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/avg_difficulty`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticDifficulty>[]>>(res.data),
   )
 
 export const fetchStatisticHashRate = () =>
-  axiosIns(`/daily_statistics/avg_hash_rate`).then((res: AxiosResponse) => {
+  requesterV1(`/daily_statistics/avg_hash_rate`).then((res: AxiosResponse) => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<State.StatisticHashRate>[]>>(res.data)
     return {
       ...resp,
@@ -277,7 +262,7 @@ export const fetchStatisticHashRate = () =>
   })
 
 export const fetchStatisticUncleRate = () =>
-  axiosIns(`/daily_statistics/uncle_rate`).then((res: AxiosResponse) => {
+  requesterV1(`/daily_statistics/uncle_rate`).then((res: AxiosResponse) => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<State.StatisticUncleRate>[]>>(res.data)
     return {
       ...resp,
@@ -292,17 +277,17 @@ export const fetchStatisticUncleRate = () =>
   })
 
 export const fetchStatisticMinerAddressDistribution = () =>
-  axiosIns(`/distribution_data/miner_address_distribution`).then((res: AxiosResponse) =>
+  requesterV1(`/distribution_data/miner_address_distribution`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticMinerAddressDistribution>>(res.data.data),
   )
 
 export const fetchStatisticMinerVersionDistribution = () =>
-  v2AxiosIns(`/blocks/ckb_node_versions`).then((res: AxiosResponse) =>
+  requesterV2(`/blocks/ckb_node_versions`).then((res: AxiosResponse) =>
     toCamelcase<{ data: Array<{ version: string; blocksCount: number }> }>(res.data),
   )
 
 export const fetchStatisticCellCount = (): Promise<Response.Response<Response.Wrapper<State.StatisticCellCount>[]>> =>
-  axiosIns(`/daily_statistics/live_cells_count-dead_cells_count`).then(res => {
+  requesterV1(`/daily_statistics/live_cells_count-dead_cells_count`).then(res => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<Omit<State.StatisticCellCount, 'allCellsCount'>>[]>>(
       res.data,
     )
@@ -321,7 +306,7 @@ export const fetchStatisticCellCount = (): Promise<Response.Response<Response.Wr
   })
 
 export const fetchStatisticDifficultyUncleRateEpoch = () =>
-  axiosIns(`/epoch_statistics/epoch_time-epoch_length`).then((res: AxiosResponse) => {
+  requesterV1(`/epoch_statistics/epoch_time-epoch_length`).then((res: AxiosResponse) => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<State.StatisticDifficultyUncleRateEpoch>[]>>(res.data)
     return {
       ...resp,
@@ -334,27 +319,27 @@ export const fetchStatisticDifficultyUncleRateEpoch = () =>
   })
 
 export const fetchStatisticAddressBalanceRank = () =>
-  axiosIns(`/statistics/address_balance_ranking`).then((res: AxiosResponse) =>
+  requesterV1(`/statistics/address_balance_ranking`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticAddressBalanceRanking>>(res.data.data),
   )
 
 export const fetchStatisticBalanceDistribution = () =>
-  axiosIns(`/distribution_data/address_balance_distribution`).then((res: AxiosResponse) =>
+  requesterV1(`/distribution_data/address_balance_distribution`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticAddressBalanceDistribution>>(res.data.data),
   )
 
 export const fetchStatisticTxFeeHistory = () =>
-  axiosIns(`/daily_statistics/total_tx_fee`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/total_tx_fee`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticTransactionFee>[]>>(res.data),
   )
 
 export const fetchStatisticBlockTimeDistribution = () =>
-  axiosIns(`/distribution_data/block_time_distribution`).then((res: AxiosResponse) =>
+  requesterV1(`/distribution_data/block_time_distribution`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticBlockTimeDistributions>>(res.data.data),
   )
 
 export const fetchStatisticAverageBlockTimes = () =>
-  axiosIns(`/distribution_data/average_block_time`).then((res: AxiosResponse) => {
+  requesterV1(`/distribution_data/average_block_time`).then((res: AxiosResponse) => {
     const {
       attributes: { averageBlockTime },
     } = toCamelcase<Response.Wrapper<State.StatisticAverageBlockTimes>>(res.data.data)
@@ -362,37 +347,37 @@ export const fetchStatisticAverageBlockTimes = () =>
   })
 
 export const fetchStatisticOccupiedCapacity = () =>
-  axiosIns(`/daily_statistics/occupied_capacity`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/occupied_capacity`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticOccupiedCapacity>[]>>(res.data),
   )
 
 export const fetchStatisticEpochTimeDistribution = () =>
-  axiosIns(`/distribution_data/epoch_time_distribution`).then((res: AxiosResponse) =>
+  requesterV1(`/distribution_data/epoch_time_distribution`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticEpochTimeDistributions>>(res.data.data),
   )
 
 export const fetchStatisticNewNodeCount = () =>
-  axiosIns(`/daily_statistics/nodes_count`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/nodes_count`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticNewNodeCount>[]>>(res.data),
   )
 
 export const fetchStatisticNodeDistribution = () =>
-  axiosIns(`/distribution_data/nodes_distribution`).then((res: AxiosResponse) =>
+  requesterV1(`/distribution_data/nodes_distribution`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticNodeDistributions>>(res.data.data),
   )
 
 export const fetchStatisticTotalSupply = () =>
-  axiosIns(`/daily_statistics/circulating_supply-burnt-locked_capacity`).then((res: AxiosResponse) =>
+  requesterV1(`/daily_statistics/circulating_supply-burnt-locked_capacity`).then((res: AxiosResponse) =>
     toCamelcase<Response.Response<Response.Wrapper<State.StatisticTotalSupply>[]>>(res.data),
   )
 
 export const fetchStatisticAnnualPercentageCompensation = () =>
-  axiosIns(`/monetary_data/nominal_apc`).then((res: AxiosResponse) =>
+  requesterV1(`/monetary_data/nominal_apc`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticAnnualPercentageCompensations>>(res.data.data),
   )
 
 export const fetchStatisticSecondaryIssuance = () =>
-  axiosIns(`/daily_statistics/treasury_amount-mining_reward-deposit_compensation`).then((res: AxiosResponse) => {
+  requesterV1(`/daily_statistics/treasury_amount-mining_reward-deposit_compensation`).then((res: AxiosResponse) => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<State.StatisticSecondaryIssuance>[]>>(res.data)
     return {
       ...resp,
@@ -416,12 +401,12 @@ export const fetchStatisticSecondaryIssuance = () =>
   })
 
 export const fetchStatisticInflationRate = () =>
-  axiosIns(`/monetary_data/nominal_apc50-nominal_inflation_rate-real_inflation_rate`).then((res: AxiosResponse) =>
+  requesterV1(`/monetary_data/nominal_apc50-nominal_inflation_rate-real_inflation_rate`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticInflationRates>>(res.data.data),
   )
 
 export const fetchStatisticLiquidity = () =>
-  axiosIns(`/daily_statistics/circulating_supply-liquidity`).then((res: AxiosResponse) => {
+  requesterV1(`/daily_statistics/circulating_supply-liquidity`).then((res: AxiosResponse) => {
     const resp = toCamelcase<Response.Response<Response.Wrapper<State.StatisticLiquidity>[]>>(res.data)
     return {
       ...resp,
@@ -438,12 +423,12 @@ export const fetchStatisticLiquidity = () =>
   })
 
 export const fetchFlushChartCache = () =>
-  axiosIns(`statistics/flush_cache_info`).then((res: AxiosResponse) =>
+  requesterV1(`statistics/flush_cache_info`).then((res: AxiosResponse) =>
     toCamelcase<Response.Wrapper<State.StatisticCacheInfo>>(res.data.data),
   )
 
 export const fetchSimpleUDT = (typeHash: string) =>
-  axiosIns(`/udts/${typeHash}`).then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.UDT>>(res.data.data))
+  requesterV1(`/udts/${typeHash}`).then((res: AxiosResponse) => toCamelcase<Response.Wrapper<State.UDT>>(res.data.data))
 
 export const fetchSimpleUDTTransactions = ({
   typeHash,
@@ -458,7 +443,7 @@ export const fetchSimpleUDTTransactions = ({
   filter?: string | null
   type?: string | null
 }) =>
-  axiosIns(`/udt_transactions/${typeHash}`, {
+  requesterV1(`/udt_transactions/${typeHash}`, {
     params: {
       page,
       page_size: size,
@@ -469,7 +454,7 @@ export const fetchSimpleUDTTransactions = ({
   }).then((res: AxiosResponse) => toCamelcase<Response.Response<Response.Wrapper<State.Transaction>[]>>(res.data))
 
 export const fetchTokens = (page: number, size: number, sort?: string) =>
-  axiosIns(`/udts`, {
+  requesterV1(`/udts`, {
     params: {
       page,
       page_size: size,
@@ -495,11 +480,11 @@ export const exportTransactions = ({
     end_number: block?.to,
   }
   if (type === 'nft') {
-    return v2AxiosIns
+    return requesterV2
       .get(`/nft/transfers/download_csv`, { params: { ...rangeParams, collection_id: id } })
       .then(res => toCamelcase<string>(res.data))
   }
-  return axiosIns
+  return requesterV1
     .get(`/${type}/download_csv`, { params: { ...rangeParams, id } })
     .then(res => toCamelcase<string>(res.data))
 }
diff --git a/src/services/ExplorerService/index.ts b/src/services/ExplorerService/index.ts
index 989322703..349f49ea5 100644
--- a/src/services/ExplorerService/index.ts
+++ b/src/services/ExplorerService/index.ts
@@ -1,6 +1,6 @@
 import { BehaviorSubject, Subscription, map, switchMap, timer } from 'rxjs'
-import { fetchStatistics, fetchTipBlockNumber } from '../../service/http/fetcher'
 import { BLOCK_POLLING_TIME } from '../../constants/common'
+import * as apiFetcher from './fetcher'
 
 const initStatistics: State.Statistics = {
   tipBlockNumber: '0',
@@ -19,6 +19,8 @@ const initStatistics: State.Statistics = {
 }
 
 class ExplorerService {
+  api = apiFetcher
+
   // Here, we can use an `Observable` with `shareReplay` to automatically start the subscription.
   // However, in order to get the value from the Observable, we must subscribe to it.
   // This process usually makes the code asynchronous, and the Observable is a type that may have a null value,
@@ -41,7 +43,7 @@ class ExplorerService {
     this.callbacksAtStop.add(
       timer(0, BLOCK_POLLING_TIME)
         .pipe(
-          switchMap(fetchStatistics),
+          switchMap(this.api.fetchStatistics),
           map(wrapper => wrapper.attributes),
         )
         .subscribe(this.latestStatistics$),
@@ -50,7 +52,7 @@ class ExplorerService {
     this.callbacksAtStop.add(
       timer(0, BLOCK_POLLING_TIME)
         .pipe(
-          switchMap(fetchTipBlockNumber),
+          switchMap(this.api.fetchTipBlockNumber),
           map(wrapper => Number(wrapper.attributes.tipBlockNumber)),
         )
         .subscribe(this.latestBlockNumber$),
@@ -65,3 +67,4 @@ class ExplorerService {
 export const explorerService = new ExplorerService()
 
 export * from './hooks'
+export * from './types'
diff --git a/src/services/ExplorerService/requester.ts b/src/services/ExplorerService/requester.ts
new file mode 100644
index 000000000..5d984e922
--- /dev/null
+++ b/src/services/ExplorerService/requester.ts
@@ -0,0 +1,76 @@
+import axios, { AxiosError } from 'axios'
+import CONFIG from '../../config'
+import i18n from '../../utils/i18n'
+import { setNetworkErrMsgs } from '../../components/Sheet'
+
+export const requesterV1 = axios.create({
+  baseURL: `${CONFIG.API_URL}/api/v1/`,
+  headers: {
+    'Content-Type': 'application/vnd.api+json',
+    Accept: 'application/vnd.api+json',
+  },
+  data: null,
+})
+
+// TODO: need interceptors?
+export const requesterV2 = axios.create({
+  baseURL: `${CONFIG.API_URL}/api/v2/`,
+  headers: {
+    'Content-Type': 'application/vnd.api+json',
+    Accept: 'application/vnd.api+json',
+  },
+  data: null,
+})
+
+let timeout: ReturnType<typeof setTimeout> | null
+
+const updateNetworkError = (errMessage = 'toast.invalid_network') => {
+  if (timeout) {
+    clearTimeout(timeout)
+  }
+  timeout = setTimeout(() => {
+    setNetworkErrMsgs([])
+    timeout = null
+  }, 2000)
+  setNetworkErrMsgs([i18n.t(errMessage)])
+}
+
+requesterV1.interceptors.request.use(
+  config => {
+    if (config.method === 'get') {
+      // eslint-disable-next-line no-param-reassign
+      config.data = {
+        unused: 0,
+      }
+    }
+    return config
+  },
+  error => Promise.reject(error),
+)
+
+requesterV1.interceptors.response.use(
+  response => response,
+  (error: AxiosError) => {
+    if (error && error.response && error.response.data) {
+      const { message }: { message: string } = error.response.data
+      switch (error.response.status) {
+        case 503:
+          updateNetworkError(message || undefined)
+          break
+        case 422:
+        case 404:
+        case 400:
+          break
+        case 429:
+          updateNetworkError('toast.too_many_request')
+          break
+        default:
+          updateNetworkError()
+          break
+      }
+    } else {
+      updateNetworkError()
+    }
+    return Promise.reject(error)
+  },
+)
diff --git a/src/services/ExplorerService/types.ts b/src/services/ExplorerService/types.ts
new file mode 100644
index 000000000..1de3e208d
--- /dev/null
+++ b/src/services/ExplorerService/types.ts
@@ -0,0 +1,27 @@
+export namespace Response {
+  export interface Response<T> {
+    data: T
+    meta?: Meta
+    error?: Error[]
+  }
+
+  export interface Error {
+    id: string
+    code: number
+    status: number
+    title: string
+    detail: string
+    href: string
+  }
+
+  export interface Meta {
+    total: number
+    pageSize: number
+  }
+
+  export interface Wrapper<T> {
+    id: number
+    type: string
+    attributes: T
+  }
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index d0af2140a..3a35fa49b 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -610,31 +610,3 @@ declare namespace CustomRouter {
     comp: React.FunctionComponent<any>
   }
 }
-
-declare namespace Response {
-  export interface Response<T> {
-    data: T
-    meta?: Meta
-    error?: Error[]
-  }
-
-  export interface Error {
-    id: string
-    code: number
-    status: number
-    title: string
-    detail: string
-    href: string
-  }
-
-  export interface Meta {
-    total: number
-    pageSize: number
-  }
-
-  export interface Wrapper<T> {
-    id: number
-    type: string
-    attributes: T
-  }
-}
diff --git a/src/utils/hook.ts b/src/utils/hook.ts
index c0f124ec6..3aa6efd4e 100644
--- a/src/utils/hook.ts
+++ b/src/utils/hook.ts
@@ -25,6 +25,8 @@ import {
 } from './cache'
 import { parseDate } from './date'
 import { omit } from './object'
+// TODO: This file depends on higher-level abstractions, so it should not be in the utils folder. It should be moved to `src/hooks/index.ts`.
+import { Response } from '../services/ExplorerService'
 
 /**
  * Returns the value of the argument from the previous render

From ea622beafcda42bc37e5b284abcd0c5d94964bcb Mon Sep 17 00:00:00 2001
From: WhiteMind <WhiteMind@qq.com>
Date: Mon, 9 Oct 2023 09:21:03 +0800
Subject: [PATCH 8/9] Refactor: Remove !important used in CSS (#106)

* refactor: remove the use of !important in the NftList and optimize the style code

* refactor: remove the use of !important in the AddressComp

* refactor: remove the use of !important in the ExportTransactions page

* refactor: remove the use of !important in the ScriptsComp

* refactor: remove unnecessary !important

* refactor: remove the use of !important in the NftCollections

* refactor: remove the use of !important in the BlockDetail

* refactor: remove the use of !important in the TransactionLiteItem

* refactor: remove the use of !important in the Home

* refactor: remove the use of !important in the Tokens
---
 src/App.tsx                                   |  1 -
 src/components/Card/TitleCard/index.tsx       |  5 +-
 .../NftCollectionTransfers/styles.module.scss |  2 +-
 .../NftHolderList/styles.module.scss          |  2 +-
 src/components/Search/Filter/styled.tsx       |  2 +-
 .../TransactionLiteItem/index.module.scss     |  7 +-
 src/index.css                                 |  2 +-
 src/index.tsx                                 |  2 +
 src/pages/Address/styles.module.scss          | 58 +++++++--------
 src/pages/BlockDetail/BlockComp.tsx           |  1 +
 src/pages/BlockDetail/styles.module.scss      |  9 +--
 src/pages/ExportTransactions/index.tsx        |  2 +
 .../ExportTransactions/styles.module.scss     | 71 +++++++++----------
 .../Home/AverageBlockTimeChart/styled.tsx     |  4 +-
 src/pages/Home/HashRateChart/styled.tsx       |  4 +-
 src/pages/NftCollections/List.tsx             |  2 +-
 src/pages/NftCollections/styles.module.scss   | 24 +++----
 src/pages/Script/ScriptsComp.tsx              |  4 +-
 src/pages/Script/styles.module.scss           | 54 ++++++++------
 src/pages/Tokens/styled.tsx                   |  5 +-
 20 files changed, 138 insertions(+), 123 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 98e98e535..aacfb16b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
 import { useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { ThemeProvider } from 'styled-components'
-import 'antd/dist/antd.css'
 import Routers from './routes'
 import Toast from './components/Toast'
 import useInitApp from './contexts/providers/hook'
diff --git a/src/components/Card/TitleCard/index.tsx b/src/components/Card/TitleCard/index.tsx
index c960e2919..fe4d9b1ff 100644
--- a/src/components/Card/TitleCard/index.tsx
+++ b/src/components/Card/TitleCard/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { TitleCardPanel } from './styled'
 
 export default ({
@@ -5,14 +6,16 @@ export default ({
   isSingle,
   className,
   rear,
+  rearClassName,
 }: {
   title: React.ReactNode
   isSingle?: boolean
   className?: string
   rear?: React.ReactNode
+  rearClassName?: string
 }) => (
   <TitleCardPanel isSingle={isSingle} className={className} hasRear={!!rear}>
     <div className="title__card__content">{title}</div>
-    {rear ? <div className="title__card__rear">{rear}</div> : null}
+    {rear ? <div className={classNames('title__card__rear', rearClassName)}>{rear}</div> : null}
   </TitleCardPanel>
 )
diff --git a/src/components/NftCollectionTransfers/styles.module.scss b/src/components/NftCollectionTransfers/styles.module.scss
index 8f147cf2a..97673636f 100644
--- a/src/components/NftCollectionTransfers/styles.module.scss
+++ b/src/components/NftCollectionTransfers/styles.module.scss
@@ -71,7 +71,7 @@
   }
 
   .noRecord {
-    text-align: center !important;
+    text-align: center;
   }
 
   ul {
diff --git a/src/components/NftHolderList/styles.module.scss b/src/components/NftHolderList/styles.module.scss
index 5a7641276..80b3f3e46 100644
--- a/src/components/NftHolderList/styles.module.scss
+++ b/src/components/NftHolderList/styles.module.scss
@@ -69,7 +69,7 @@
   }
 
   .noRecord {
-    text-align: center !important;
+    text-align: center;
   }
 }
 
diff --git a/src/components/Search/Filter/styled.tsx b/src/components/Search/Filter/styled.tsx
index 3f991cab5..a66b67719 100644
--- a/src/components/Search/Filter/styled.tsx
+++ b/src/components/Search/Filter/styled.tsx
@@ -29,7 +29,7 @@ export const FilterImage = styled(SimpleButton)`
   z-index: 2;
   display: flex;
   justify-content: center;
-  cursor: ${(props: { isClear?: boolean }) => (props.isClear ? 'pointer' : 'default !important')};
+  cursor: ${(props: { isClear?: boolean }) => (props.isClear ? 'pointer' : 'default')};
 
   @media (max-width: 750px) {
     margin-left: ${(props: { isClear?: boolean }) => (props.isClear ? '-14%' : '0')};
diff --git a/src/components/TransactionItem/TransactionLiteItem/index.module.scss b/src/components/TransactionItem/TransactionLiteItem/index.module.scss
index 9ba70ddd5..dd1a1051c 100644
--- a/src/components/TransactionItem/TransactionLiteItem/index.module.scss
+++ b/src/components/TransactionItem/TransactionLiteItem/index.module.scss
@@ -78,8 +78,11 @@
       padding: 0;
 
       > div {
-        width: 100% !important;
-        padding: 16px 0 !important;
+        // This selector is just to increase the specificity.
+        &:nth-child(n) {
+          width: 100%;
+          padding: 16px 0;
+        }
 
         > div:first-child {
           color: #666;
diff --git a/src/index.css b/src/index.css
index ebdad4178..d7cc03268 100644
--- a/src/index.css
+++ b/src/index.css
@@ -77,7 +77,7 @@ a {
 
 @media (width <= 750px) {
   .ant-popover-inner-content {
-    padding: 5px !important;
+    padding: 5px;
   }
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index 71b03c878..6c151f60f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,6 @@
 import ReactDOM from 'react-dom'
+import 'antd/dist/antd.css'
+// This should be after all third-party library styles so that it can override them.
 import './index.css'
 import './utils/i18n'
 import App from './App'
diff --git a/src/pages/Address/styles.module.scss b/src/pages/Address/styles.module.scss
index 160edf44c..c91b47fae 100644
--- a/src/pages/Address/styles.module.scss
+++ b/src/pages/Address/styles.module.scss
@@ -73,40 +73,42 @@
 }
 
 .layoutButtons {
-  > label {
-    height: 40px;
-    width: 120px;
-    text-align: center;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 38px;
-    color: #333;
-    border: 1px solid #e5e5e5;
-    box-shadow: none !important;
-
-    &::before {
-      content: none !important;
-    }
-
-    &:hover {
+  :global {
+    .ant-radio-button-wrapper {
+      height: 40px;
+      width: 120px;
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 38px;
       color: #333;
-      background: #fff;
-    }
+      border: 1px solid #e5e5e5;
+      box-shadow: none;
 
-    &:first-child {
-      border-radius: 4px 0 0 4px;
-    }
+      &::before {
+        content: none;
+      }
 
-    &:last-child {
-      border-radius: 0 4px 4px 0;
-    }
+      &:hover {
+        color: #333;
+        background: #fff;
+      }
 
-    &:global(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
-      background: #333;
-      border-color: #333 !important;
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
 
-      &:hover {
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
+
+      &.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
         background: #333;
+        border-color: #333;
+
+        &:hover {
+          background: #333;
+        }
       }
     }
   }
diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx
index 5f15e2ae0..127b61187 100644
--- a/src/pages/BlockDetail/BlockComp.tsx
+++ b/src/pages/BlockDetail/BlockComp.tsx
@@ -336,6 +336,7 @@ export const BlockComp = ({
         title={`${i18n.t('transaction.transactions')} (${localeNumberString(total)})`}
         className={styles.transactionTitleCard}
         isSingle
+        rearClassName={styles.rear}
         rear={
           <Filter
             showReset={!!filter}
diff --git a/src/pages/BlockDetail/styles.module.scss b/src/pages/BlockDetail/styles.module.scss
index ef289b782..5852a26ec 100644
--- a/src/pages/BlockDetail/styles.module.scss
+++ b/src/pages/BlockDetail/styles.module.scss
@@ -76,10 +76,11 @@
     align-items: flex-start;
     height: 110px;
 
-    :global(.title__card__rear > div) {
-      // hack default style of TitleCard
-      padding: 0 !important;
-      justify-content: space-between !important;
+    .rear {
+      > div:first-child {
+        padding: 0;
+        justify-content: space-between;
+      }
     }
 
     img {
diff --git a/src/pages/ExportTransactions/index.tsx b/src/pages/ExportTransactions/index.tsx
index 3ba27a7f5..ea6db962a 100644
--- a/src/pages/ExportTransactions/index.tsx
+++ b/src/pages/ExportTransactions/index.tsx
@@ -239,6 +239,7 @@ const ExportTransactions = () => {
                             value={fromHeight}
                             min={0}
                             parser={heightParser}
+                            controls={false}
                             onChange={h =>
                               updateSearchParams(
                                 params =>
@@ -256,6 +257,7 @@ const ExportTransactions = () => {
                             min={0}
                             parser={heightParser}
                             value={toHeight}
+                            controls={false}
                             onChange={h =>
                               updateSearchParams(
                                 params => (h ? { ...params, 'to-height': h.toString() } : omit(params, ['to-height'])),
diff --git a/src/pages/ExportTransactions/styles.module.scss b/src/pages/ExportTransactions/styles.module.scss
index e7372fa76..e9e1d9321 100644
--- a/src/pages/ExportTransactions/styles.module.scss
+++ b/src/pages/ExportTransactions/styles.module.scss
@@ -161,35 +161,36 @@
     .heightInputPanel {
       margin-left: 24px;
       margin-right: 24px;
-
-      @media screen and (width <= 750px) {
-        margin-left: 16px;
-        margin-right: 16px;
-      }
-
       display: flex;
       flex-direction: column;
       width: 40%;
       max-width: 256px;
 
-      :global(.ant-picker:hover) {
-        border-radius: 4px;
-
-        &:hover {
-          border-color: var(--primary-color) !important;
-        }
+      @media screen and (width <= 750px) {
+        margin-left: 16px;
+        margin-right: 16px;
       }
 
-      :global(.ant-input-number-affix-wrapper) {
-        &:hover {
-          border-color: var(--primary-color) !important;
+      :global {
+        .ant-picker {
+          border-radius: 4px;
+          box-shadow: none;
+
+          &:hover,
+          &.ant-picker-focused {
+            border-color: var(--primary-color);
+          }
         }
 
-        border-radius: 4px;
-      }
+        .ant-input-number-affix-wrapper {
+          border-radius: 4px;
+          box-shadow: none;
 
-      :global(.ant-input-number-handler-wrap) {
-        display: none !important;
+          &:hover,
+          &.ant-input-number-affix-wrapper-focused {
+            border-color: var(--primary-color);
+          }
+        }
       }
 
       @media (width <= 750px) {
@@ -331,29 +332,23 @@
 }
 
 .calendar {
-  :global(.ant-picker-cell-selected .ant-picker-cell-inner) {
-    background-color: var(--primary-color) !important;
-  }
-
-  :global(.ant-picker-cell-today .ant-picker-cell-inner) {
-    &::before {
-      border: 1px solid var(--primary-color);
+  :global {
+    .ant-picker-cell-selected .ant-picker-cell-inner {
+      background-color: var(--primary-color);
     }
-  }
 
-  :global(.ant-picker-today-btn) {
-    color: var(--primary-color);
-
-    &:hover {
-      color: var(--primary-color);
+    .ant-picker-cell-today .ant-picker-cell-inner {
+      &::before {
+        border: 1px solid var(--primary-color);
+      }
     }
 
-    &:active {
-      color: var(--primary-color);
+    .ant-picker-today-btn {
+      &,
+      &:hover,
+      &:active {
+        color: var(--primary-color);
+      }
     }
   }
 }
-
-:global(.ant-picker-focused) {
-  border-color: var(--primary-color) !important;
-}
diff --git a/src/pages/Home/AverageBlockTimeChart/styled.tsx b/src/pages/Home/AverageBlockTimeChart/styled.tsx
index 7047e7ee6..46a436996 100644
--- a/src/pages/Home/AverageBlockTimeChart/styled.tsx
+++ b/src/pages/Home/AverageBlockTimeChart/styled.tsx
@@ -2,8 +2,8 @@ import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
 export const HomeChartLink = styled(Link)`
-  div {
-    cursor: pointer !important;
+  canvas {
+    cursor: pointer;
   }
 `
 
diff --git a/src/pages/Home/HashRateChart/styled.tsx b/src/pages/Home/HashRateChart/styled.tsx
index 7047e7ee6..46a436996 100644
--- a/src/pages/Home/HashRateChart/styled.tsx
+++ b/src/pages/Home/HashRateChart/styled.tsx
@@ -2,8 +2,8 @@ import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
 export const HomeChartLink = styled(Link)`
-  div {
-    cursor: pointer !important;
+  canvas {
+    cursor: pointer;
   }
 `
 
diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx
index 111d1226d..ac63d6db3 100644
--- a/src/pages/NftCollections/List.tsx
+++ b/src/pages/NftCollections/List.tsx
@@ -323,7 +323,7 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: Array<NFTCollect
                           className="monospace"
                           style={{
                             color: primaryColor,
-                            fontWeight: 700,
+                            fontWeight: 500,
                           }}
                         >{`${item.creator.slice(0, 8)}...${item.creator.slice(-8)}`}</Link>
                       </Tooltip>
diff --git a/src/pages/NftCollections/styles.module.scss b/src/pages/NftCollections/styles.module.scss
index 18d0a5a24..4823b570d 100644
--- a/src/pages/NftCollections/styles.module.scss
+++ b/src/pages/NftCollections/styles.module.scss
@@ -154,10 +154,10 @@
 
   a {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     color: var(--primary-color);
     padding: 10px 0 10px 10px;
-    margin-right: 8px;
     border-radius: 8px;
 
     &:hover {
@@ -166,6 +166,10 @@
       cursor: pointer;
     }
 
+    &[data-is-active='true'] {
+      pointer-events: none;
+    }
+
     &[data-is-active='false'] {
       color: #000;
 
@@ -186,6 +190,10 @@
       border-radius: 8px;
       box-shadow: 0 2px 10px 0 #eee;
     }
+
+    .ant-popover-inner-content {
+      padding: 14px 24px 14px 16px;
+    }
   }
 }
 
@@ -270,12 +278,6 @@ div[data-role='mobile-list'] {
     dt::after {
       content: ':';
     }
-
-    dd {
-      a {
-        font-weight: 500 !important;
-      }
-    }
   }
 
   .holderMinted {
@@ -311,14 +313,6 @@ div[data-role='mobile-list'] {
       display: block;
     }
   }
-
-  .antPopover {
-    :global {
-      .ant-popover-inner-content {
-        padding: 14px 15px 14px 12px !important;
-      }
-    }
-  }
 }
 
 @media screen and (width <= 350px) {
diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx
index b0a37c14c..ae383a85e 100644
--- a/src/pages/Script/ScriptsComp.tsx
+++ b/src/pages/Script/ScriptsComp.tsx
@@ -215,7 +215,9 @@ export const CodeHashMessage = ({ codeHash }: { codeHash: string }) => {
   const setToast = useSetToast()
   return (
     <div className={styles.codeHashMessagePanel}>
-      <AddressText className={styles.codeHash}>{codeHash}</AddressText>
+      <div className={styles.codeHash}>
+        <AddressText>{codeHash}</AddressText>
+      </div>
 
       <CopyIcon
         onClick={() => {
diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss
index 13d04a455..db280e2be 100644
--- a/src/pages/Script/styles.module.scss
+++ b/src/pages/Script/styles.module.scss
@@ -24,27 +24,37 @@
   background-color: #fff;
   border-radius: 6px 6px 0 0;
 
-  :global(.ant-tabs-nav::before) {
-    border-bottom-width: 4px;
-  }
+  :global {
+    .ant-tabs-nav {
+      &::before {
+        border-bottom-width: 4px;
+      }
+    }
 
-  :global(.ant-tabs-nav-list) {
-    margin-left: 40px;
-  }
+    .ant-tabs-nav-list {
+      margin-left: 40px;
+    }
 
-  :global(.ant-tabs-tab-btn) {
-    color: #333 !important;
-    font-weight: 400;
-    font-size: 20px;
-    line-height: 23px;
-    margin-bottom: 0;
-  }
+    .ant-tabs-tab-btn {
+      color: #333;
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 23px;
+      margin-bottom: 0;
+
+      &[aria-selected='true'] {
+        font-weight: 500;
+      }
+    }
 
-  :global(.ant-tabs-tab-btn[aria-selected='true']) {
-    font-weight: 500;
+    .ant-tabs-tab-active {
+      .ant-tabs-tab-btn {
+        color: #333;
+      }
+    }
   }
 
-  :global(.ant-tabs-ink-bar) {
+  & > :global(.ant-tabs-nav .ant-tabs-ink-bar) {
     background: linear-gradient(
       to right,
       transparent 30%,
@@ -52,8 +62,8 @@
       var(--primary-color) 70%,
       transparent 70%
     );
-    height: 3px !important;
-    bottom: 3px !important;
+    height: 3px;
+    bottom: 3px;
   }
 }
 
@@ -123,7 +133,7 @@
   }
 
   :global(.transaction__cell__info__content) {
-    width: fit-content !important;
+    width: fit-content;
     padding: 0 20px;
     line-height: 0;
   }
@@ -140,19 +150,19 @@
   min-width: 0;
 
   .codeHash {
-    width: 350px !important;
+    width: 350px;
     margin-right: 16px;
   }
 
   @media screen and (width <= 1300px) {
     .codeHash {
-      width: 280px !important;
+      width: 280px;
     }
   }
 
   @media screen and (width <= 750px) {
     .codeHash {
-      width: 600px !important;
+      width: 600px;
     }
   }
 }
diff --git a/src/pages/Tokens/styled.tsx b/src/pages/Tokens/styled.tsx
index f551010c7..25fbf07dc 100644
--- a/src/pages/Tokens/styled.tsx
+++ b/src/pages/Tokens/styled.tsx
@@ -88,11 +88,12 @@ export const TokensTableTitle = styled.div`
     height: fit-content;
     padding: 5px 20px;
 
-    > span {
+    // This selector is just to increase the specificity.
+    > span:nth-child(n) {
       display: inline-block;
       white-space: nowrap;
       margin: 10px 0;
-      flex: 0 !important;
+      flex: 0;
     }
   }
 `

From bf2865fe824871e58ae149d53a72f6c0e5359eef Mon Sep 17 00:00:00 2001
From: WhiteMind <WhiteMind@qq.com>
Date: Mon, 9 Oct 2023 10:05:49 +0800
Subject: [PATCH 9/9] Refactor: optimize and simplify the routes code (#108)

refactor: optimize and simplify the routes code
---
 src/routes/index.tsx | 255 ++++++++++++-------------------------------
 src/types/index.d.ts |  10 --
 2 files changed, 69 insertions(+), 196 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 1e08bbb1a..933f9f947 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,6 +1,5 @@
-import { useEffect, Suspense, lazy, Component } from 'react'
-import { BrowserRouter as Router, Route, Redirect, Switch, useLocation } from 'react-router-dom'
-import { createBrowserHistory } from 'history'
+import { Suspense, lazy, Component } from 'react'
+import { BrowserRouter as Router, Route, Redirect, Switch, RouteProps } from 'react-router-dom'
 import Page from '../components/Page'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
@@ -53,297 +52,191 @@ const ScriptList = lazy(() => import('../pages/ScriptList'))
 const FeeRateTracker = lazy(() => import('../pages/FeeRateTracker'))
 const ExportTransactions = lazy(() => import('../pages/ExportTransactions'))
 
-const Containers: CustomRouter.Route[] = [
+const routes: RouteProps[] = [
   {
-    name: 'Home',
     path: '/',
-    exact: true,
-    comp: Home,
+    component: Home,
   },
   {
-    name: 'BlockList',
     path: '/block/list',
-    exact: true,
-    comp: BlockList,
+    component: BlockList,
   },
   {
-    name: 'Address',
     path: '/address/:address',
-    exact: true,
-    comp: Address,
+    render: routeProps => {
+      const { pathname } = routeProps.location
+      if (isChainTypeError(pathname.substring(pathname.lastIndexOf('/') + 1))) {
+        return <SearchFail {...routeProps} address={pathname.substring(pathname.lastIndexOf('/') + 1)} />
+      }
+      return <Address />
+    },
   },
   {
-    name: 'Script',
     path: '/script/:codeHash/:hashType/:tab?',
-    exact: true,
-    comp: ScriptPage,
+    component: ScriptPage,
   },
   {
-    name: 'Block',
     path: '/block/:param',
-    exact: true,
-    comp: Block,
+    component: Block,
   },
   {
-    name: 'TransactionList',
     path: '/transaction/list',
-    exact: true,
-    comp: TransactionList,
+    component: TransactionList,
   },
   {
-    name: 'Transaction',
     path: '/transaction/:hash',
-    exact: true,
-    comp: Transaction,
+    component: Transaction,
   },
   {
-    name: 'SimpleUDT',
     path: '/sudt/:hash',
-    exact: true,
-    comp: SimpleUDT,
+    component: SimpleUDT,
   },
   {
-    name: 'NftCollections',
     path: '/nft-collections',
-    exact: true,
-    comp: NftCollections,
+    component: NftCollections,
   },
   {
-    name: 'NftCollectionInfo',
     path: '/nft-collections/:id',
-    exact: true,
-    comp: NftCollectionInfo,
+    component: NftCollectionInfo,
   },
   {
-    name: 'NftInfo',
     path: '/nft-info/:collection/:id',
-    exact: true,
-    comp: NftInfo,
+    component: NftInfo,
   },
   {
-    name: 'NervosDao',
     path: '/nervosdao',
-    exact: true,
-    comp: NervosDao,
+    component: NervosDao,
   },
   {
-    name: 'Tokens',
     path: '/tokens',
-    exact: true,
-    comp: Tokens,
+    component: Tokens,
   },
   {
-    name: 'Charts',
     path: '/charts',
-    exact: true,
-    comp: StatisticsChart,
+    component: StatisticsChart,
   },
   {
-    name: 'DifficultyHashRateChart',
     path: '/charts/difficulty-hash-rate',
-    exact: true,
-    comp: DifficultyHashRateChart,
+    component: DifficultyHashRateChart,
   },
   {
-    name: 'DifficultyUncleRateEpochChart',
     path: '/charts/epoch-time-length',
-    exact: true,
-    comp: DifficultyUncleRateEpochChart,
+    component: DifficultyUncleRateEpochChart,
   },
   {
-    name: 'DifficultyChart',
     path: '/charts/difficulty',
-    exact: true,
-    comp: DifficultyChart,
+    component: DifficultyChart,
   },
   {
-    name: 'HashRateChart',
     path: '/charts/hash-rate',
-    exact: true,
-    comp: HashRateChart,
+    component: HashRateChart,
   },
   {
-    name: 'UncleRateChart',
     path: '/charts/uncle-rate',
-    exact: true,
-    comp: UncleRateChart,
+    component: UncleRateChart,
   },
   {
-    name: 'MinerAddressDistributionChart',
     path: '/charts/miner-address-distribution',
-    exact: true,
-    comp: MinerAddressDistributionChart,
+    component: MinerAddressDistributionChart,
   },
   {
-    name: 'MinerVersionDistributionChart',
     path: '/charts/miner-version-distribution',
-    exact: true,
-    comp: MinerVersionDistributionChart,
+    component: MinerVersionDistributionChart,
   },
   {
-    name: 'TransactionCountChart',
     path: '/charts/transaction-count',
-    exact: true,
-    comp: TransactionCountChart,
+    component: TransactionCountChart,
   },
   {
-    name: 'AddressCountChart',
     path: '/charts/address-count',
-    exact: true,
-    comp: AddressCountChart,
+    component: AddressCountChart,
   },
   {
-    name: 'TotalDaoDepositChart',
     path: '/charts/total-dao-deposit',
-    exact: true,
-    comp: TotalDaoDepositChart,
+    component: TotalDaoDepositChart,
   },
   {
-    name: 'NewDaoDepositChart',
     path: '/charts/new-dao-deposit',
-    exact: true,
-    comp: NewDaoDepositChart,
+    component: NewDaoDepositChart,
   },
   {
-    name: 'CirculationRatioChart',
     path: '/charts/circulation-ratio',
-    exact: true,
-    comp: CirculationRatioChart,
+    component: CirculationRatioChart,
   },
   {
-    name: 'CellCountChart',
     path: '/charts/cell-count',
-    exact: true,
-    comp: CellCountChart,
+    component: CellCountChart,
   },
   {
-    name: 'AddressBalanceRankChart',
     path: '/charts/address-balance-rank',
-    exact: true,
-    comp: AddressBalanceRankChart,
+    component: AddressBalanceRankChart,
   },
   {
-    name: 'BalanceDistributionChart',
     path: '/charts/balance-distribution',
-    exact: true,
-    comp: BalanceDistributionChart,
+    component: BalanceDistributionChart,
   },
   {
-    name: 'TxFeeHistoryChart',
     path: '/charts/tx-fee-history',
-    exact: true,
-    comp: TxFeeHistoryChart,
+    component: TxFeeHistoryChart,
   },
   {
-    name: 'BlockTimeDistributionChart',
     path: '/charts/block-time-distribution',
-    exact: true,
-    comp: BlockTimeDistributionChart,
+    component: BlockTimeDistributionChart,
   },
   {
-    name: 'AverageBlockTimeChart',
     path: '/charts/average-block-time',
-    exact: true,
-    comp: AverageBlockTimeChart,
+    component: AverageBlockTimeChart,
   },
   {
-    name: 'EpochTimeDistributionChart',
     path: '/charts/epoch-time-distribution',
-    exact: true,
-    comp: EpochTimeDistributionChart,
+    component: EpochTimeDistributionChart,
   },
   {
-    name: 'TotalSupplyChart',
     path: '/charts/total-supply',
-    exact: true,
-    comp: TotalSupplyChart,
+    component: TotalSupplyChart,
   },
   {
-    name: 'AnnualPercentageCompensationChart',
     path: '/charts/nominal-apc',
-    exact: true,
-    comp: AnnualPercentageCompensationChart,
+    component: AnnualPercentageCompensationChart,
   },
   {
-    name: 'SecondaryIssuanceChart',
     path: '/charts/secondary-issuance',
-    exact: true,
-    comp: SecondaryIssuanceChart,
+    component: SecondaryIssuanceChart,
   },
   {
-    name: 'InflationRateChart',
     path: '/charts/inflation-rate',
-    exact: true,
-    comp: InflationRateChart,
+    component: InflationRateChart,
   },
   {
-    name: 'LiquidityChart',
     path: '/charts/liquidity',
-    exact: true,
-    comp: LiquidityChart,
+    component: LiquidityChart,
   },
   {
-    name: 'SearchFail',
     path: '/search/fail',
-    exact: true,
-    comp: SearchFail,
+    component: SearchFail,
   },
   {
-    name: 'ScriptList',
     path: '/scripts',
-    exact: true,
-    comp: ScriptList,
+    component: ScriptList,
   },
   {
-    name: 'FeeRateTracker',
     path: '/fee-rate-tracker',
-    exact: true,
-    comp: FeeRateTracker,
+    component: FeeRateTracker,
   },
   {
-    name: '404',
     path: '/404',
-    exact: true,
-    comp: NotFoundPage,
+    component: NotFoundPage,
   },
   {
-    name: 'Error',
     path: '/error',
-    exact: true,
-    comp: ErrorPage,
+    component: ErrorPage,
   },
   {
-    name: 'ExportTransactions',
     path: '/export-transactions',
-    exact: true,
-    comp: ExportTransactions,
+    component: ExportTransactions,
   },
 ]
 
-const useRouter = (callback: Function) => {
-  const history = createBrowserHistory()
-  useEffect(() => {
-    let currentUrl = `${history.location.pathname}${history.location.search}`
-    const listen = history.listen((location: any) => {
-      if (currentUrl !== `${location.pathname}${location.search}`) {
-        callback()
-      }
-      currentUrl = `${location.pathname}${location.search}`
-    })
-    return () => {
-      listen()
-    }
-  }, [callback, history])
-}
-
-const RouterComp = ({ container, routeProps }: { container: CustomRouter.Route; routeProps: any }) => {
-  const { pathname = '' } = useLocation()
-  if (container.name === 'Address' && isChainTypeError(pathname.substring(pathname.lastIndexOf('/') + 1))) {
-    return <SearchFail {...routeProps} address={pathname.substring(pathname.lastIndexOf('/') + 1)} />
-  }
-  return <container.comp {...routeProps} />
-}
-
 type PageErrorBoundaryState = {
   error?: Error | null
   info: {
@@ -393,34 +286,24 @@ class PageErrorBoundary extends Component<PageErrorBoundaryProps, PageErrorBound
 }
 
 export default () => {
-  useRouter(() => {
-    window.scrollTo(0, 0)
-  })
-
   return (
     <Router>
-      <Route
-        render={(props: any) => (
-          <Page>
-            <Header />
-            <Suspense fallback={<span />}>
-              <PageErrorBoundary>
-                <Switch location={props.location}>
-                  {Containers.map(container => (
-                    <Route
-                      {...container}
-                      key={container.name}
-                      render={routeProps => <RouterComp container={container} routeProps={routeProps} />}
-                    />
-                  ))}
-                  <Redirect from="*" to="/404" />
-                </Switch>
-              </PageErrorBoundary>
-              <Footer />
-            </Suspense>
-          </Page>
-        )}
-      />
+      <Page>
+        <Header />
+        <Suspense fallback={<span />}>
+          <PageErrorBoundary>
+            <Switch>
+              {routes.map((route, idx) => (
+                // `routes` is immutable, so using idx as the key has no impact.
+                // eslint-disable-next-line react/no-array-index-key
+                <Route key={idx} exact {...route} />
+              ))}
+              <Redirect from="*" to="/404" />
+            </Switch>
+          </PageErrorBoundary>
+          <Footer />
+        </Suspense>
+      </Page>
     </Router>
   )
 }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 3a35fa49b..d5aa7b43d 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -600,13 +600,3 @@ declare namespace State {
 
   type SortOrderTypes = 'asc' | 'desc'
 }
-
-declare namespace CustomRouter {
-  interface Route {
-    name: string
-    path: string
-    params?: string
-    exact?: boolean
-    comp: React.FunctionComponent<any>
-  }
-}