diff --git a/.eslintrc.js b/.eslintrc.js
index e88c2f0ee..447fd234e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -99,6 +99,7 @@ module.exports = {
         allow: ['^.*_'],
       },
     ],
+    '@typescript-eslint/array-type': 'error',
   },
   env: {
     jest: true,
diff --git a/src/App.tsx b/src/App.tsx
index aacfb16b7..aa0ff34fa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { ThemeProvider } from 'styled-components'
+import { DefaultTheme, ThemeProvider } from 'styled-components'
 import Routers from './routes'
 import Toast from './components/Toast'
 import useInitApp from './contexts/providers/hook'
@@ -18,7 +18,7 @@ const queryClient = new QueryClient()
 
 const App = () => {
   useInitApp()
-  const theme = useMemo(
+  const theme = useMemo<DefaultTheme>(
     () => ({
       primary: getPrimaryColor(),
       secondary: getSecondaryColor(),
diff --git a/src/__mocks__/block.ts b/src/__mocks__/block.ts
deleted file mode 100644
index 614c23be2..000000000
--- a/src/__mocks__/block.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { toCamelcase } from '../utils/util'
-
-export const blockMock = () => {
-  return toCamelcase<{
-    block: State.Block
-    transactions: State.Transaction[]
-    total: number
-    status: State.FetchStatus
-  }>({
-    block: {
-      block_hash: '0xd48737284040b2c6d221a16ba65b1497593ffb7b9cd250a1d0f40aecc5c8d4c0',
-      block_index_in_epoch: '209',
-      cell_consumed: '6100000000',
-      difficulty: '72969622108522274',
-      epoch: '1038',
-      length: '1800',
-      miner_hash: 'ckb1qyqgsqsd549m333prhzyvdvedluuuas9u2ssxkmf53',
-      miner_reward: '106544901066',
-      nonce: '218174220386130088675393873778844041472',
-      number: '1706701',
-      proposals_count: '0',
-      received_tx_fee: '0',
-      received_tx_fee_status: 'pending',
-      reward: '106544901066',
-      reward_status: 'pending',
-      start_number: '1706492',
-      timestamp: '1589002865754',
-      total_cell_capacity: '111298326112',
-      total_transaction_fee: '0',
-      transactions_count: '1',
-      transactions_root: '0xefa2d4a0c3c673ddcbf165a217bb8eb5c01765faaf51702a58b45184816a79a6',
-      uncle_block_hashes: null,
-      uncles_count: '0',
-      version: '0',
-    },
-    transactions: {
-      data: [
-        {
-          is_cellbase: true,
-          witnesses: [
-            '0x5d0000000c00000055000000490000001000000030000000310000009bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce80114000000dde7801c073dfb3464c7b1f05b806bb2bbb84e990400000000000000',
-          ],
-          cell_deps: [],
-          header_deps: null,
-          transaction_hash: '0xa8651bdc77bb196443ffd89ec8802ad6725bd36ba43a159cf15951e2102b2a65',
-          transaction_fee: '0',
-          block_number: '1706099',
-          version: '0',
-          block_timestamp: '1588997260542',
-          display_inputs: [
-            {
-              id: '',
-              from_cellbase: true,
-              capacity: '',
-              address_hash: '',
-              target_block_number: '1706088',
-              generated_tx_hash: '0xa8651bdc77bb196443ffd89ec8802ad6725bd36ba43a159cf15951e2102b2a65',
-            },
-          ],
-          display_outputs: [
-            {
-              id: '2275538',
-              capacity: '139900315691.0',
-              address_hash: 'ckb1qyqquqf8c6002yzr72qvz3kxfa7zfnrsm4sqflv9zd',
-              target_block_number: '1706088',
-              base_reward: '133925154970',
-              commit_reward: '0',
-              proposal_reward: '0',
-              secondary_reward: '5975160721',
-              status: 'live',
-              consumed_tx_hash: '',
-            },
-          ],
-        },
-        {
-          is_cellbase: false,
-          witnesses: [
-            '0x55000000100000005500000055000000410000008d0c7c8a9a433018911f24c47a0a561c9778dc0c9766767158f33c02561165640c80e6978657e312823704f028866e65a339bdc062e63cf75ecb30d3b8f4e8db01',
-            '0x',
-          ],
-          cell_deps: [
-            {
-              dep_type: 'dep_group',
-              out_point: {
-                index: 0,
-                tx_hash: '0x71a7ba8fc96349fea0ed3a5c47992e3b4084b031a42264a018e0072e8172e46c',
-              },
-            },
-            {
-              dep_type: 'code',
-              out_point: {
-                index: 2,
-                tx_hash: '0xe2fb199810d49a4d8beec56718ba2593b665db9d52299a0f9e6e75416d73ff5c',
-              },
-            },
-          ],
-          header_deps: null,
-          transaction_hash: '0x79238be9c68d888b976cdc86e40a0ca03f223d7487033cc0755283b79376ec66',
-          transaction_fee: '3684',
-          block_number: '1706099',
-          version: '0',
-          block_timestamp: '1588997260542',
-          display_inputs: [
-            {
-              id: '2115183',
-              from_cellbase: false,
-              capacity: '930300000000.0',
-              address_hash: 'ckb1qyqz67uumxel602l5t6zqf7qhqt6untg9z9qukhlha',
-              generated_tx_hash: '0x5f0cec7e77478158a60242f02768c94db075de90b93735dd413241e3ac9dfd21',
-              cell_index: '0',
-              cell_type: 'normal',
-            },
-            {
-              id: '2114922',
-              from_cellbase: false,
-              capacity: '9971320520000.0',
-              address_hash: 'ckb1qyqz67uumxel602l5t6zqf7qhqt6untg9z9qukhlha',
-              generated_tx_hash: '0x44c67dc4b5648120841c6cb73d8b13c2b2d7474df500b87a2241c550b06179ea',
-              cell_index: '0',
-              cell_type: 'normal',
-            },
-          ],
-          display_outputs: [
-            {
-              id: '2275539',
-              capacity: '10800000000000.0',
-              address_hash: 'ckb1qyqzwn57q5p2a0mxv6s02zvs28ny3rjxh38qc2j3zn',
-              status: 'live',
-              consumed_tx_hash: '',
-              cell_type: 'nervos_dao_deposit',
-            },
-            {
-              id: '2275540',
-              capacity: '101620516316.0',
-              address_hash: 'ckb1qyqyg3ah0spf7ggsanjduvexl9psfp0fdypsa7jfwf',
-              status: 'live',
-              consumed_tx_hash: '',
-              cell_type: 'normal',
-            },
-          ],
-        },
-      ],
-    },
-    total: 2,
-    status: 'OK',
-  })
-}
-
-export default blockMock
diff --git a/src/__mocks__/charts.ts b/src/__mocks__/charts.ts
deleted file mode 100644
index f8bfe594d..000000000
--- a/src/__mocks__/charts.ts
+++ /dev/null
@@ -1,272 +0,0 @@
-export const AddressBalanceRankMock = [
-  {
-    ranking: '1',
-    address: 'ckb1qgqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqchfq7c4e0e864p98x0t7mc0k58thz83s97znnd',
-    balance: '840000000000000000',
-  },
-  {
-    ranking: '2',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32sdufwedw7a0w9dkvhpsah4mdk2gkfq63e0q6qzzqxzq8yqnqq85p',
-    balance: '285600000000000000',
-  },
-  {
-    ranking: '3',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32sn23uga5m8u5v87q98vr29qa8tl0ruu84gqfqzzqxzq8yqc2dxk6',
-    balance: '142800000000000000',
-  },
-  {
-    ranking: '4',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32s3y29vjv73cfm8qax220dwwmpdccl4upy4s9qzzqxzq8yqyd09am',
-    balance: '126000000000000000',
-  },
-  {
-    ranking: '5',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32338kguc9ftfvtsw7tsm89f6zsujdtjpw2pq4qzzqxzq8yqvxaz77',
-    balance: '84000000000000000',
-  },
-  {
-    ranking: '6',
-    address: 'ckb1qyq8z93tpxwj9ugm7yxafqtlyljeycum4zks4vzxjq',
-    balance: '67200000000000000',
-  },
-  {
-    ranking: '7',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32s8ulyn4d0l8ztr8fzy4hzjmnn0uufyknj4s9qzzqxzq8yqd5ry6k',
-    balance: '67073503700000000',
-  },
-  {
-    ranking: '8',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32se9x2xulmzuugf2ndr4v6mljxjvl4x4twpq4qzzqxzq8yqu5luw5',
-    balance: '56011200000000000',
-  },
-  {
-    ranking: '9',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32s3g55rl3hg5hfy3kcde0q6vvp4m742tkqasvqzzqxzq8yqxfg705',
-    balance: '42000000000000000',
-  },
-  {
-    ranking: '10',
-    address: 'ckb1qyqxpyph6y7t3qfv8sq4kjkyh4dkqns52ngqdfh6vu',
-    balance: '40320864200000000',
-  },
-  {
-    ranking: '11',
-    address: 'ckb1qyqql4j6ulr3pnhfkqy2y0sp692s48n2pwgsgzw2s9',
-    balance: '36400000000000000',
-  },
-  {
-    ranking: '12',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn3239p2wh7cvwsyn3jexs2y39d9d7u9wq3fsasvqzzqxzq8yq4eh30x',
-    balance: '27988800000000000',
-  },
-  {
-    ranking: '13',
-    address: 'ckb1qyqyj92w7wunlq0pczmmgrjddkp36pcum2vsmukrfv',
-    balance: '24549553800000000',
-  },
-  {
-    ranking: '14',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32spqzxnw7xlqh8ktjyryv8932ll2588d8ypq4qzzqxzq8yqk3m6dz',
-    balance: '24164832000000000',
-  },
-  {
-    ranking: '15',
-    address: 'ckb1qyqxn80cz3eehramv0zt26h35p9ucn7pqq7q79dkmx',
-    balance: '22400010000000000',
-  },
-  {
-    ranking: '16',
-    address: 'ckb1qyqyrryqd8j79g64h2xzhsqwt2l2dpjpsp2sqklpcl',
-    balance: '22400000000000000',
-  },
-  {
-    ranking: '17',
-    address: 'ckb1qyqp7zqdqut4554fym8vnrpxw5ju3nfcuumqwvxgp2',
-    balance: '22132859128410000',
-  },
-  {
-    ranking: '18',
-    address: 'ckb1qyq8k2zw044q88rm48wklnmw32y6rkdjwu6qq347h0',
-    balance: '22099999999998608',
-  },
-  {
-    ranking: '19',
-    address: 'ckb1qyq8cakcjf490h7vj9gegzhj8pur7hsguz3qlu2e5u',
-    balance: '20300743058852006',
-  },
-  {
-    ranking: '20',
-    address: 'ckb1qyqpv8lwwnme2qwx9y8qjycpdqjjglgdg9qszs4p7k',
-    balance: '18288760300000000',
-  },
-  {
-    ranking: '21',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn3230u4dyhg2h867ppde95279s6g3tmrp6kf6qrqzzqxzq8yqukyhwm',
-    balance: '18200000000000000',
-  },
-  {
-    ranking: '22',
-    address: 'ckb1qyqwuyg8jjdct8skueufvzt5zszuteqkc63q4vmp2r',
-    balance: '17460009137242396',
-  },
-  {
-    ranking: '23',
-    address: 'ckb1qyqt65zcqxammc32eq3t57kx84r2lhvyjx9s06r4s7',
-    balance: '16723490800000000',
-  },
-  {
-    ranking: '24',
-    address: 'ckb1qyqqhenp0fetvv4a585ptekfcuyrsq384g8s5tp8d9',
-    balance: '15598849369991648',
-  },
-  {
-    ranking: '25',
-    address: 'ckb1qyqqqe8h6kyw7zlls39wnfhppdarw858dx3smxlvwe',
-    balance: '14001508757900638',
-  },
-  {
-    ranking: '26',
-    address: 'ckb1qyqqad3nkgfsju8a94rufwgnjt42skp9qwmsuva9ur',
-    balance: '13313493791002283',
-  },
-  {
-    ranking: '27',
-    address: 'ckb1qyqvmvfcffghysdaqh27szr6lgvtwm7aalvsxfmam7',
-    balance: '13229662800000000',
-  },
-  {
-    ranking: '28',
-    address: 'ckb1qyqgvz8gftk7895d986ua7k74vzrky00qlrqc9tfe7',
-    balance: '13093820200000000',
-  },
-  {
-    ranking: '29',
-    address: 'ckb1qyqrsrv2avml5n8hjj77a6tmx20374qdvaqq2ffsgt',
-    balance: '12579109589000000',
-  },
-  {
-    ranking: '30',
-    address: 'ckb1qyqrhkqe5qgf2kwe0zwr8htaeurc0tq85q8q26m6tp',
-    balance: '12499900000000000',
-  },
-  {
-    ranking: '31',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32styjm07sggt3ftdmvwnclvuz4qqulqhrzasvqzzqxzq8yq4ylxra',
-    balance: '12082416000000000',
-  },
-  {
-    ranking: '32',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32s7pkxekjernj5a3ng5n9dz8fec4zwdppf6qrqzzqxzq8yqh0q8cm',
-    balance: '12075168000000000',
-  },
-  {
-    ranking: '33',
-    address: 'ckb1qyq08nz88qryjhqwj4frxynx2xflllf0v6fs0qugdt',
-    balance: '11729943334400000',
-  },
-  {
-    ranking: '34',
-    address: 'ckb1qyqgwl6f3x52ql4rx6cwt2wcjpnskxzn6acqlem5yp',
-    balance: '11432337699749000',
-  },
-  {
-    ranking: '35',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32s04es0ugg4ww2tafkv825lqkarj086kf86qrqzzqxzq8yqafkk7a',
-    balance: '11200000000000000',
-  },
-  {
-    ranking: '36',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn3232p7r2yh0v9dx574nuurnc4ql5aya8xjp6qrqzzqxzq8yqym65et',
-    balance: '11200000000000000',
-  },
-  {
-    ranking: '37',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32s334728lt9kxmzp65j409ralmrgygqrmr6qrqzzqxzq8yq06a2y5',
-    balance: '11200000000000000',
-  },
-  {
-    ranking: '38',
-    address: 'ckb1qyqq6t46vqpvj07reu3guad526724rucj7gqyt6dj2',
-    balance: '11199999999997726',
-  },
-  {
-    ranking: '39',
-    address: 'ckb1qyqwlpr6nas40kh46h4hs03k8ezfu229q3mqg7wjwe',
-    balance: '11143874332365963',
-  },
-  {
-    ranking: '40',
-    address: 'ckb1qyqtkxxnls3x78pnww3rxdhx4g8hwjswrl6san8whm',
-    balance: '11000000000000000',
-  },
-  {
-    ranking: '41',
-    address: 'ckb1qyqt5q7myl336x0tcn76266yp7ujxyxkf58q2eh2uh',
-    balance: '10866300000000000',
-  },
-  {
-    ranking: '42',
-    address: 'ckb1qyqy6mtud5sgctjwgg6gydd0ea05mr339lnslczzrc',
-    balance: '10300077100000000',
-  },
-  {
-    ranking: '43',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32350ke8rkurg45apculyaqmf2qjcaca0zjpq4qzzqxzq8yqj0k9a7',
-    balance: '10082016000000000',
-  },
-  {
-    ranking: '44',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn32sdqdj9ky0n6ak8tramtuhm79ughp22r5cpq4qzzqxzq8yqdsmszf',
-    balance: '10082016000000000',
-  },
-  {
-    ranking: '45',
-    address: 'ckb1qyqxaewt225xag52654r8ter4424l86mkvfsvvetsz',
-    balance: '10068971700000000',
-  },
-  {
-    ranking: '46',
-    address: 'ckb1qyq9uxwmunv0sxrtne4zedsnv69zra5krpjqqywc9w',
-    balance: '10000000000000000',
-  },
-  {
-    ranking: '47',
-    address:
-      'ckb1q3w9q60tppt7l3j7r09qcp7lxnp3vcanvgha8pmvsa3jplykxn323kte7wntr3f4jtsu4dz6wvd5u6e8wxxlypq4qzzqxzq8yq30xlae',
-    balance: '10000000000000000',
-  },
-  {
-    ranking: '48',
-    address: 'ckb1qyq86wla89n4ymnltvwdv63mkltj9n4tytqssewevx',
-    balance: '9658745000000000',
-  },
-  {
-    ranking: '49',
-    address: 'ckb1qyqzpjrn7qtwhe8fmnx5p98uyk45wlqadqdq273g50',
-    balance: '9208675909864514',
-  },
-  {
-    ranking: '50',
-    address: 'ckb1qyqdfh83q8t83el8xc48pxlle42yz33tl7tqkh3n2a',
-    balance: '9184554258000000',
-  },
-]
-
-export default AddressBalanceRankMock
diff --git a/src/__mocks__/home.ts b/src/__mocks__/home.ts
deleted file mode 100644
index fd6812867..000000000
--- a/src/__mocks__/home.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { toCamelcase } from '../utils/util'
-
-export const latestBlocksMock = () => {
-  return toCamelcase<State.Block[]>([
-    {
-      miner_hash: 'ckb1qyqqzmlaljcrd0mneh63sx4gzlyvhz0g35nsh6e30l',
-      number: '1686123',
-      timestamp: '1588834270583',
-      reward: '111302205934',
-      transactions_count: '1',
-      live_cell_changes: '1',
-    },
-    {
-      miner_hash: 'ckb1qyqdmeuqrsrnm7e5vnrmruzmsp4m9wacf6vsxasryq',
-      number: '1686122',
-      timestamp: '1588834268229',
-      reward: '111302206061',
-      transactions_count: '1',
-      live_cell_changes: '1',
-    },
-    {
-      miner_hash: 'ckb1qyqdmeuqrsrnm7e5vnrmruzmsp4m9wacf6vsxasryq',
-      number: '1686121',
-      timestamp: '1588834265890',
-      reward: '111302206188',
-      transactions_count: '1',
-      live_cell_changes: '1',
-    },
-  ]) as State.Block[]
-}
-
-export const latestTxMock = () => {
-  return toCamelcase<State.Transaction[]>([
-    {
-      transaction_hash: '0x896ff246313e0a9fc7b392af6665774460d6d8614783f40764b17864bde10643',
-      block_number: '1687517',
-      block_timestamp: '1588845263114',
-      capacity_involved: '111303491978',
-      live_cell_changes: '1',
-    },
-    {
-      transaction_hash: '0x19ec38d35659da5a9e5d941ee269a134002fa43344bf83e65ea4b2cbbc40a2c2',
-      block_number: '1687509',
-      block_timestamp: '1588845185757',
-      capacity_involved: '111303525492',
-      live_cell_changes: '1',
-    },
-    {
-      transaction_hash: '0x69df00a2b94ab0372a4ecd4ce8ac7dd44c15b406ed5154d5425f9bfb3119a8d0',
-      block_number: '1687501',
-      block_timestamp: '1588845110452',
-      capacity_involved: '111303562450',
-      live_cell_changes: '1',
-    },
-  ]) as State.Transaction[]
-}
-
-export const statisticMock = (): State.Statistics => {
-  return toCamelcase<State.Statistics>({
-    epoch_info: {
-      epoch_number: '1026',
-      epoch_length: '1800',
-      index: '1402',
-    },
-    tip_block_number: '1687044',
-    average_block_time: '8017.05',
-    current_epoch_difficulty: '62246971368478813',
-    hash_rate: '7722354397338.191716364963207719284020190144128439',
-    estimated_epoch_time: '14509117.647058823529411764705882352941176470588234368272300616634345632',
-    transactions_last_24hrs: '11302',
-    transactions_count_per_minute: '7.783411604018934645536699908',
-  }) as State.Statistics
-}
-
-export const TipBlockNumberMock = 1686163
diff --git a/src/components/CsvExport/index.tsx b/src/components/CsvExport/index.tsx
index ba4ebd341..33fe91452 100644
--- a/src/components/CsvExport/index.tsx
+++ b/src/components/CsvExport/index.tsx
@@ -2,8 +2,9 @@ import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import styles from './styles.module.scss'
 import { ReactComponent as ExportIcon } from '../../assets/export_icon.svg'
+import { SupportedExportTransactionType } from '../../services/ExplorerService'
 
-export function CsvExport({ type, id }: { type: State.TransactionCsvExportType; id?: string }) {
+export function CsvExport({ type, id }: { type: SupportedExportTransactionType; id?: string }) {
   const [t] = useTranslation()
   return (
     <Link
diff --git a/src/components/Header/BlockchainComp/styled.tsx b/src/components/Header/BlockchainComp/styled.tsx
index c183acdf5..ea3702d1e 100644
--- a/src/components/Header/BlockchainComp/styled.tsx
+++ b/src/components/Header/BlockchainComp/styled.tsx
@@ -55,7 +55,7 @@ export const HeaderBlockchainPanel = styled.div`
   }
 `
 
-export const MobileSubMenuPanel = styled.div`
+export const MobileSubMenuPanel = styled.div<{ showSubMenu: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -69,8 +69,7 @@ export const MobileSubMenuPanel = styled.div`
   }
 
   .mobileMenusMainItemContent {
-    color: ${(props: { showSubMenu: boolean; theme: State.Theme }) =>
-      props.showSubMenu ? props.theme.primary : 'white'};
+    color: ${props => (props.showSubMenu ? props.theme.primary : 'white')};
   }
 
   .mobileMenusMainItemContentHighlight {
diff --git a/src/components/Header/LanguageComp/styled.tsx b/src/components/Header/LanguageComp/styled.tsx
index 6ba02f502..a81eebe99 100644
--- a/src/components/Header/LanguageComp/styled.tsx
+++ b/src/components/Header/LanguageComp/styled.tsx
@@ -35,7 +35,7 @@ export const HeaderLanguagePanel = styled.div`
   }
 `
 
-export const MobileSubMenuPanel = styled.div`
+export const MobileSubMenuPanel = styled.div<{ showSubMenu: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -49,8 +49,7 @@ export const MobileSubMenuPanel = styled.div`
   }
 
   .mobileMenusMainItemContent {
-    color: ${(props: { showSubMenu: boolean; theme: State.Theme }) =>
-      props.showSubMenu ? props.theme.primary : 'white'};
+    color: ${props => (props.showSubMenu ? props.theme.primary : 'white')};
   }
 
   .mobileMenusMainItemContentHighlight {
diff --git a/src/components/NftCollectionInventory/index.tsx b/src/components/NftCollectionInventory/index.tsx
index b620fb240..ab1fa3dab 100644
--- a/src/components/NftCollectionInventory/index.tsx
+++ b/src/components/NftCollectionInventory/index.tsx
@@ -14,7 +14,7 @@ import type { NFTItem } from '../../services/ExplorerService/fetcher'
 const primaryColor = getPrimaryColor()
 
 const NftCollectionInventory: React.FC<{
-  list: Array<NFTItem>
+  list: NFTItem[]
   collection: string
   isLoading: boolean
 }> = ({ list, collection, isLoading }) => {
diff --git a/src/components/NftHolderList/index.tsx b/src/components/NftHolderList/index.tsx
index 3521f151c..a177f1c48 100644
--- a/src/components/NftHolderList/index.tsx
+++ b/src/components/NftHolderList/index.tsx
@@ -8,7 +8,7 @@ import styles from './styles.module.scss'
 export const primaryColor = getPrimaryColor()
 
 const NftHolderList: React.FC<{
-  list: Array<{ addr: string; quantity: number }>
+  list: { addr: string; quantity: number }[]
   isLoading: boolean
 }> = ({ list, isLoading }) => {
   const { t } = useTranslation()
diff --git a/src/components/Script/index.tsx b/src/components/Script/index.tsx
index 89ccd07ec..195ddb210 100644
--- a/src/components/Script/index.tsx
+++ b/src/components/Script/index.tsx
@@ -4,6 +4,7 @@ import { ScriptItemPanel, ScriptPanel } from './styled'
 import HashTag from '../HashTag'
 import { getContractHashTag } from '../../utils/util'
 import { HelpTip } from '../HelpTip'
+import { Script } from '../../models/Script'
 
 const ScriptItem = ({ title, tooltip, children }: { title: string; tooltip?: string; children?: ReactNode }) => (
   <ScriptItemPanel>
@@ -16,7 +17,7 @@ const ScriptItem = ({ title, tooltip, children }: { title: string; tooltip?: str
   </ScriptItemPanel>
 )
 
-const Script = ({ script }: { script: State.Script }) => {
+const ScriptComp = ({ script }: { script: Script }) => {
   const contractHashTag = getContractHashTag(script)
   const { t } = useTranslation()
 
@@ -38,4 +39,4 @@ const Script = ({ script }: { script: State.Script }) => {
   )
 }
 
-export default Script
+export default ScriptComp
diff --git a/src/components/Table/styled.tsx b/src/components/Table/styled.tsx
index adf87a0dc..f3fbf1438 100644
--- a/src/components/Table/styled.tsx
+++ b/src/components/Table/styled.tsx
@@ -96,7 +96,7 @@ export const TableMinerContentPanel = styled.div`
   margin: auto 0;
 
   .tableMinerContent {
-    color: ${(props: { theme: State.Theme }) => props.theme.primary};
+    color: ${props => props.theme.primary};
     text-decoration: none;
   }
 
diff --git a/src/components/Transaction/Cellbase/index.tsx b/src/components/Transaction/Cellbase/index.tsx
index 7919694d5..0c7e4f193 100644
--- a/src/components/Transaction/Cellbase/index.tsx
+++ b/src/components/Transaction/Cellbase/index.tsx
@@ -7,8 +7,9 @@ import TransactionCellArrow from '../TransactionCellArrow'
 import { localeNumberString } from '../../../utils/number'
 import HelpIcon from '../../../assets/qa_help.png'
 import styles from './index.module.scss'
+import { Cell } from '../../../models/Cell'
 
-const Cellbase = ({ cell, cellType, isDetail }: { cell: State.Cell; cellType: CellType; isDetail?: boolean }) => {
+const Cellbase = ({ cell, cellType, isDetail }: { cell: Cell; cellType: CellType; isDetail?: boolean }) => {
   if (!cell.targetBlockNumber || cell.targetBlockNumber <= 0) {
     return (
       <CellbasePanel>
diff --git a/src/components/Transaction/TransactionCellArrow/index.tsx b/src/components/Transaction/TransactionCellArrow/index.tsx
index 4b5ebf3e4..47fd63e41 100644
--- a/src/components/Transaction/TransactionCellArrow/index.tsx
+++ b/src/components/Transaction/TransactionCellArrow/index.tsx
@@ -8,8 +8,9 @@ import LiveCellIcon from '../../../assets/live_cell.png'
 import LiveCellBlueIcon from '../../../assets/live_cell_blue.png'
 import { isMainnet } from '../../../utils/chain'
 import { RightArrowImage, LeftArrowImage } from './styled'
+import { Cell } from '../../../models/Cell'
 
-const CellInputIcon = ({ cell }: { cell: State.Cell }) =>
+const CellInputIcon = ({ cell }: { cell: Cell }) =>
   cell.generatedTxHash ? (
     <Link to={`/transaction/${cell.generatedTxHash}#${cell.cellIndex}`}>
       <LeftArrowImage
@@ -20,7 +21,7 @@ const CellInputIcon = ({ cell }: { cell: State.Cell }) =>
     </Link>
   ) : null
 
-const CellOutputIcon = ({ cell }: { cell: State.Cell }) => {
+const CellOutputIcon = ({ cell }: { cell: Cell }) => {
   const { t } = useTranslation()
 
   if (cell.status === 'dead') {
@@ -37,5 +38,5 @@ const CellOutputIcon = ({ cell }: { cell: State.Cell }) => {
   )
 }
 
-export default ({ cell, cellType }: { cell: State.Cell; cellType: CellType }) =>
+export default ({ cell, cellType }: { cell: Cell; cellType: CellType }) =>
   cellType === CellType.Input ? <CellInputIcon cell={cell} /> : <CellOutputIcon cell={cell} />
diff --git a/src/components/TransactionItem/TransactionIncome/styled.tsx b/src/components/TransactionItem/TransactionIncome/styled.tsx
index c65803210..8df7a6ecd 100644
--- a/src/components/TransactionItem/TransactionIncome/styled.tsx
+++ b/src/components/TransactionItem/TransactionIncome/styled.tsx
@@ -11,7 +11,7 @@ export const TransactionIncomePanel = styled.div`
   }
 `
 
-export const TransactionCapacityValuePanel = styled.div`
+export const TransactionCapacityValuePanel = styled.div<{ increased: boolean }>`
   height: 36px;
   border-radius: 18px;
   background-color: white;
@@ -19,7 +19,7 @@ export const TransactionCapacityValuePanel = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: ${(props: { increased: boolean; theme: State.Theme }) => (props.increased ? props.theme.primary : '#FF6347')};
+  color: ${props => (props.increased ? props.theme.primary : '#FF6347')};
   font-size: 16px;
 
   img {
diff --git a/src/components/TransactionItem/TransactionItemCell/index.tsx b/src/components/TransactionItem/TransactionItemCell/index.tsx
index 0e1a11cf1..15eac0623 100644
--- a/src/components/TransactionItem/TransactionItemCell/index.tsx
+++ b/src/components/TransactionItem/TransactionItemCell/index.tsx
@@ -29,6 +29,7 @@ import { ReactComponent as BitAccountIcon } from '../../../assets/bit_account.sv
 import { useBoolean, useIsMobile } from '../../../utils/hook'
 import CopyTooltipText from '../../Text/CopyTooltipText'
 import EllipsisMiddle from '../../EllipsisMiddle'
+import { Cell, Cell$UDT, UDTInfo } from '../../../models/Cell'
 
 const AddressTextWithAlias: FC<{
   address: string
@@ -65,7 +66,7 @@ const AddressTextWithAlias: FC<{
   )
 }
 
-const useUdtAmount = (udt: State.UDTInfo) => {
+const useUdtAmount = (udt: UDTInfo) => {
   const { t } = useTranslation()
   return udt.published
     ? `${parseUDTAmount(udt.amount, udt.decimal)} ${udt.uan || udt.symbol}`
@@ -87,7 +88,7 @@ const WithdrawPopoverItem = ({
   </WithdrawItemPanel>
 )
 
-const WithdrawPopoverInfo = ({ cell }: { cell: State.Cell }) => {
+const WithdrawPopoverInfo = ({ cell }: { cell: Cell }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   const currentLanguage = useCurrentLanguage()
@@ -166,7 +167,7 @@ const WithdrawPopoverInfo = ({ cell }: { cell: State.Cell }) => {
   )
 }
 
-const TransactionCellNervosDao = ({ cell, cellType }: { cell: State.Cell; cellType: CellType }) => {
+const TransactionCellNervosDao = ({ cell, cellType }: { cell: Cell; cellType: CellType }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   return (
@@ -192,7 +193,7 @@ const TransactionCellNervosDao = ({ cell, cellType }: { cell: State.Cell; cellTy
   )
 }
 
-const TransactionCellUDT = ({ cell }: { cell: State.Cell$UDT }) => {
+const TransactionCellUDT = ({ cell }: { cell: Cell$UDT }) => {
   const isMobile = useIsMobile()
   const { extraInfo } = cell
 
@@ -213,7 +214,7 @@ const TransactionCellUDT = ({ cell }: { cell: State.Cell$UDT }) => {
   )
 }
 
-const TransactionCellCapacity = ({ cell, cellType }: { cell: State.Cell; cellType: CellType }) => {
+const TransactionCellCapacity = ({ cell, cellType }: { cell: Cell; cellType: CellType }) => {
   if (isDaoCell(cell.cellType)) {
     return <TransactionCellNervosDao cell={cell} cellType={cellType} />
   }
@@ -229,7 +230,7 @@ const TransactionCellCapacity = ({ cell, cellType }: { cell: State.Cell; cellTyp
   )
 }
 
-const TransactionCell = ({ cell, address, cellType }: { cell: State.Cell; address?: string; cellType: CellType }) => {
+const TransactionCell = ({ cell, address, cellType }: { cell: Cell; address?: string; cellType: CellType }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   if (cell.fromCellbase) {
diff --git a/src/components/TransactionItem/TransactionItemCell/styled.tsx b/src/components/TransactionItem/TransactionItemCell/styled.tsx
index a78197d4d..bb27a9ee5 100644
--- a/src/components/TransactionItem/TransactionItemCell/styled.tsx
+++ b/src/components/TransactionItem/TransactionItemCell/styled.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components'
 
-export const TransactionCellPanel = styled.div`
+export const TransactionCellPanel = styled.div<{ highLight?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 16px;
-  background: ${({ highLight = false }: { highLight?: boolean }) => (highLight ? '' : '#f5f5f5')};
+  background: ${({ highLight }) => (highLight ? '' : '#f5f5f5')};
 
   @media (min-width: 750px) {
     height: 20px;
@@ -18,8 +18,7 @@ export const TransactionCellPanel = styled.div`
   }
 
   .transactionCellAddress {
-    color: ${({ highLight = false, theme }: { highLight?: boolean; theme: State.Theme }) =>
-      highLight ? `${theme.primary}` : '#000000'};
+    color: ${({ highLight = false, theme }) => (highLight ? `${theme.primary}` : '#000000')};
     font-weight: 500;
     min-width: 0;
     width: 100%;
@@ -33,11 +32,11 @@ export const TransactionCellPanel = styled.div`
     }
 
     a {
-      color: ${({ theme }: { theme: State.Theme }) => `${theme.primary}`};
+      color: ${({ theme }) => `${theme.primary}`};
     }
 
     a:hover {
-      color: ${({ theme }: { theme: State.Theme }) => `${theme.primary}`};
+      color: ${({ theme }) => `${theme.primary}`};
     }
   }
 `
@@ -194,10 +193,10 @@ export const WithdrawItemPanel = styled.div`
   }
 
   a {
-    color: ${({ theme }: { theme: State.Theme }) => theme.primary};
+    color: ${({ theme }) => theme.primary};
   }
 
   a:hover {
-    color: ${({ theme }: { theme: State.Theme }) => `${theme.primary}`};
+    color: ${({ theme }) => `${theme.primary}`};
   }
 `
diff --git a/src/components/TransactionItem/TransactionItemCellList/index.tsx b/src/components/TransactionItem/TransactionItemCellList/index.tsx
index 5d2ed3d8f..db4878f17 100644
--- a/src/components/TransactionItem/TransactionItemCellList/index.tsx
+++ b/src/components/TransactionItem/TransactionItemCellList/index.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import TransactionCellListPanel from './styled'
+import { Cell } from '../../../models/Cell'
+import { Transaction } from '../../../models/Transaction'
 
 const MAX_CELL_SHOW_SIZE = 10
 
@@ -10,9 +12,9 @@ export default ({
   transaction,
   render,
 }: {
-  cells: State.Cell[]
-  transaction: State.Transaction
-  render: (cell: State.Cell) => ReactNode
+  cells: Cell[]
+  transaction: Transaction
+  render: (cell: Cell) => ReactNode
 }) => {
   const { t } = useTranslation()
   return (
diff --git a/src/components/TransactionItem/TransactionLiteItem/index.tsx b/src/components/TransactionItem/TransactionLiteItem/index.tsx
index a0a8439f8..9227ead3f 100644
--- a/src/components/TransactionItem/TransactionLiteItem/index.tsx
+++ b/src/components/TransactionItem/TransactionLiteItem/index.tsx
@@ -5,8 +5,9 @@ import AddressText from '../../AddressText'
 import styles from './index.module.scss'
 import TransactionLiteIncome from '../TransactionLiteIncome'
 import { useIsMobile, useParsedDate } from '../../../utils/hook'
+import { Transaction } from '../../../models/Transaction'
 
-const TransactionLiteItem = ({ transaction, address }: { transaction: State.Transaction; address?: string }) => {
+const TransactionLiteItem = ({ transaction, address }: { transaction: Transaction; address?: string }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   const parsedBlockCreateAt = useParsedDate(transaction.blockTimestamp)
diff --git a/src/components/TransactionItem/index.tsx b/src/components/TransactionItem/index.tsx
index 1ff620794..aedcc2514 100644
--- a/src/components/TransactionItem/index.tsx
+++ b/src/components/TransactionItem/index.tsx
@@ -10,6 +10,7 @@ import { FullPanel, TransactionHashBlockPanel, TransactionCellPanel, Transaction
 import { CellType } from '../../constants/common'
 import AddressText from '../AddressText'
 import { useIsLGScreen, useParsedDate } from '../../utils/hook'
+import { Transaction } from '../../models/Transaction'
 
 export interface CircleCorner {
   top?: boolean
@@ -27,7 +28,7 @@ const TransactionItem = ({
   },
   scrollIntoViewOnMount,
 }: {
-  transaction: State.Transaction
+  transaction: Transaction
   address?: string
   isBlock?: boolean
   titleCard?: ReactNode | null
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 97d14b299..ba4292cbe 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -96,6 +96,7 @@ export const ChartColor = {
   secondaryIssuanceColors: ['#484E4E', '#5824FB', '#31EEB3'],
   liquidityColors: ['#5824FB', '#484E4E', '#31EEB3'],
 }
+export type ChartColorConfig = typeof ChartColor
 
 export enum ChainName {
   Mainnet = 'mirana',
diff --git a/src/constants/scripts.ts b/src/constants/scripts.ts
index db6312bc2..e2c3dede3 100644
--- a/src/constants/scripts.ts
+++ b/src/constants/scripts.ts
@@ -1,3 +1,5 @@
+import { Script } from '../models/Script'
+
 export interface ContractHashTag {
   codeHashes: string[] // The code hashes whose hash type are type in mainnet and testnet are different
   txHashes: string[] //  mainnet and testnet contract tx hashes
@@ -7,7 +9,7 @@ export interface ContractHashTag {
   hashType: string
 }
 
-export const ScriptTagExtraRules = new Map<string, (s: State.Script) => string>([
+export const ScriptTagExtraRules = new Map<string, (s: Script) => string>([
   [
     'secp256k1 / multisig',
     script => (script.args.length === 28 * 2 + 2 ? 'secp256k1 / multisig / locktime' : 'secp256k1 / multisig'),
diff --git a/src/models/Address/UDTAccount.ts b/src/models/Address/UDTAccount.ts
new file mode 100644
index 000000000..c0b3c7de3
--- /dev/null
+++ b/src/models/Address/UDTAccount.ts
@@ -0,0 +1,67 @@
+export interface SUDT {
+  symbol: string
+  decimal: string
+  amount: string
+  typeHash: string
+  udtIconFile: string
+  uan?: string
+  udtType: 'sudt'
+  collection: undefined
+  cota: undefined
+}
+
+export interface MNFT {
+  symbol: string
+  decimal: string
+  amount: string
+  typeHash: string
+  udtIconFile: string
+  udtType: 'm_nft_token'
+  uan: undefined
+  collection: {
+    typeHash: string
+  }
+  cota: undefined
+}
+
+export interface NRC721 {
+  symbol: string
+  amount: string // token id in fact
+  typeHash: string
+  udtIconFile: string // base uri with token id in fact
+  udtType: 'nrc_721_token'
+  uan: undefined
+  collection: {
+    typeHash: string
+  }
+  cota: undefined
+}
+
+export interface CoTA {
+  symbol: string
+  amount: string
+  typeHash: string
+  udtIconFile: string // base uri with token id in fact
+  udtType: 'cota'
+  uan: undefined
+  collection: undefined
+  cota: {
+    cotaId: number
+    tokenId: number
+  }
+}
+
+export interface Spore {
+  symbol?: string
+  amount: string
+  typeHash: string
+  udtIconFile: string
+  udtType: 'spore_cell'
+  collection: {
+    typeHash: string | null
+  }
+  uan: undefined
+  cota: undefined
+}
+
+export type UDTAccount = SUDT | MNFT | NRC721 | CoTA | Spore
diff --git a/src/models/Address/index.ts b/src/models/Address/index.ts
new file mode 100644
index 000000000..4551798bb
--- /dev/null
+++ b/src/models/Address/index.ts
@@ -0,0 +1,31 @@
+import { Script } from '../Script'
+import { UDTAccount } from './UDTAccount'
+
+export interface LockInfo {
+  status: 'locked' | 'unlocked'
+  epochNumber: string
+  epochIndex: string
+  estimatedUnlockTime: string
+}
+
+export interface Address {
+  addressHash: string
+  lockHash: string
+  balance: string
+  balanceOccupied: string
+  transactionsCount: number
+  lockScript: Script
+  pendingRewardBlocksCount: number
+  type: 'Address' | 'LockHash' | ''
+  daoDeposit: number
+  interest: number
+  daoCompensation: number
+  lockInfo: LockInfo
+  liveCellsCount: string
+  minedBlocksCount: string
+  isSpecial: boolean
+  specialAddress: string
+  udtAccounts?: UDTAccount[]
+}
+
+export * from './UDTAccount'
diff --git a/src/models/Block/index.ts b/src/models/Block/index.ts
new file mode 100644
index 000000000..2c21aeb33
--- /dev/null
+++ b/src/models/Block/index.ts
@@ -0,0 +1,33 @@
+export interface Block {
+  blockHash: string
+  number: number
+  transactionsCount: number
+  proposalsCount: number
+  unclesCount: number
+  uncleBlockHashes: string[]
+  reward: string
+  rewardStatus: 'pending' | 'issued'
+  totalTransactionFee: string
+  receivedTxFee: string
+  receivedTxFeeStatus: 'pending' | 'calculated'
+  totalCellCapacity: string
+  minerHash: string
+  minerMessage: string
+  timestamp: number
+  difficulty: string
+  epoch: number
+  length: string
+  startNumber: number
+  version: number
+  nonce: string
+  transactionsRoot: string
+  blockIndexInEpoch: string
+  minerReward: string
+  liveCellChanges: string
+  size: number
+  largestBlockInEpoch: number
+  largestBlock: number
+  cycles: number | null
+  maxCyclesInEpoch: number | null
+  maxCycles: number | null
+}
diff --git a/src/models/Cell/index.ts b/src/models/Cell/index.ts
new file mode 100644
index 000000000..0f2961d1a
--- /dev/null
+++ b/src/models/Cell/index.ts
@@ -0,0 +1,112 @@
+import { Script } from '../Script'
+
+export interface UDTInfo {
+  symbol: string
+  amount: string
+  decimal: string
+  typeHash: string
+  published: boolean
+  uan?: string
+}
+
+export interface Nrc721TokenInfo {
+  amount: string
+  symbol: string
+}
+
+export interface NftIssuer {
+  issuerName: string
+}
+
+export interface NftClass {
+  className: string
+  total: string
+}
+
+export interface NftToken {
+  className: string
+  tokenId: string
+  total: string
+}
+
+export interface CellInfo {
+  lock: Script
+  type: Script
+  data: string
+}
+
+export interface Cell$Base {
+  id: number
+  addressHash: string
+  capacity: string
+  occupiedCapacity: string
+  fromCellbase: boolean
+  generatedTxHash: string
+  targetBlockNumber: number
+  baseReward: string
+  secondaryReward: string
+  commitReward: string
+  proposalReward: string
+  consumedTxHash: string
+  status: 'live' | 'dead'
+  isGenesisOutput: boolean
+  cellIndex: string
+  compensationStartedBlockNumber: number
+  compensationEndedBlockNumber: number
+  compensationStartedTimestamp: number
+  compensationEndedTimestamp: number
+  lockedUntilBlockNumber: number
+  lockedUntilBlockTimestamp: number
+  interest: string
+  daoTypeHash: string
+  cellInfo: CellInfo
+  since?: {
+    raw: string
+    median_timestamp?: string
+  }
+}
+
+export interface Cell$NoExtra extends Cell$Base {
+  cellType:
+    | 'normal'
+    | 'nervos_dao_deposit'
+    | 'nervos_dao_withdrawing'
+    | 'cota_registry'
+    | 'cota_regular'
+    // TODO: Perhaps nft_transfer, simple_transfer, and nft_mint should be removed, as they cannot be found
+    // at https://github.com/nervosnetwork/ckb-explorer/blob/develop/app/utils/ckb_utils.rb#L380.
+    | 'nft_transfer'
+    | 'simple_transfer'
+    | 'nft_mint'
+    | 'spore_cluster'
+    | 'spore_cell'
+    | 'nrc_721_factory'
+  extraInfo?: never
+}
+
+export interface Cell$UDT extends Cell$Base {
+  cellType: 'udt'
+  extraInfo: UDTInfo
+}
+
+export interface Cell$NftIssuer extends Cell$Base {
+  cellType: 'm_nft_issuer'
+  extraInfo: NftIssuer
+}
+
+export interface Cell$NftClass extends Cell$Base {
+  cellType: 'm_nft_class'
+  extraInfo: NftClass
+}
+
+export interface Cell$NftToken extends Cell$Base {
+  cellType: 'm_nft_token'
+  extraInfo: NftToken
+}
+
+export interface Cell$Nrc721Token extends Cell$Base {
+  cellType: 'nrc_721_token'
+  extraInfo: Nrc721TokenInfo
+}
+
+export type Cell = Cell$NoExtra | Cell$UDT | Cell$NftIssuer | Cell$NftClass | Cell$NftToken | Cell$Nrc721Token
diff --git a/src/models/Script/index.ts b/src/models/Script/index.ts
new file mode 100644
index 000000000..01698a5c8
--- /dev/null
+++ b/src/models/Script/index.ts
@@ -0,0 +1,5 @@
+export interface Script {
+  codeHash: string
+  args: string
+  hashType: string
+}
diff --git a/src/models/Transaction/index.ts b/src/models/Transaction/index.ts
new file mode 100644
index 000000000..33cb47d57
--- /dev/null
+++ b/src/models/Transaction/index.ts
@@ -0,0 +1,36 @@
+import { Cell } from '../Cell'
+
+export interface CellDep {
+  depType: string
+  outPoint: {
+    index: string
+    txHash: string
+  }
+}
+
+export interface Transaction {
+  transactionHash: string
+  blockNumber: number
+  blockTimestamp: number
+  transactionFee: string
+  income: string
+  isCellbase: boolean
+  targetBlockNumber: number
+  version: number
+  displayInputs: Cell[]
+  displayOutputs: Cell[]
+  cellDeps: CellDep[]
+  headerDeps: string[]
+  witnesses: string[]
+  liveCellChanges: string
+  capacityInvolved: string
+  txStatus: string
+  detailedMessage: string
+  bytes: number
+  largestTxInEpoch: number
+  largestTx: number
+  cycles: number | null
+  maxCyclesInEpoch: number | null
+  maxCycles: number | null
+  createTimestamp?: number
+}
diff --git a/src/models/UDT/index.ts b/src/models/UDT/index.ts
new file mode 100644
index 000000000..40e5a49ff
--- /dev/null
+++ b/src/models/UDT/index.ts
@@ -0,0 +1,19 @@
+import { Script } from '../Script'
+
+export interface UDT {
+  symbol: string
+  fullName: string
+  iconFile: string
+  published: boolean
+  description: string
+  totalAmount: string
+  addressesCount: string
+  decimal: string
+  h24CkbTransactionsCount: string
+  createdAt: string
+  typeHash: string
+  issuerAddress: string
+  typeScript: Script
+  displayName?: string
+  uan?: string
+}
diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx
index 747238fb8..ff6b7ed8a 100644
--- a/src/pages/Address/AddressComp.tsx
+++ b/src/pages/Address/AddressComp.tsx
@@ -48,8 +48,10 @@ import { LayoutLiteProfessional } from '../../constants/common'
 import { omit } from '../../utils/object'
 import { CsvExport } from '../../components/CsvExport'
 import PaginationWithRear from '../../components/PaginationWithRear'
+import { Transaction } from '../../models/Transaction'
+import { Address, SUDT, UDTAccount } from '../../models/Address'
 
-const addressAssetInfo = (address: State.Address, useMiniStyle: boolean, t: TFunction) => {
+const addressAssetInfo = (address: Address, useMiniStyle: boolean, t: TFunction) => {
   const items = [
     {
       title: '',
@@ -92,7 +94,7 @@ const addressAssetInfo = (address: State.Address, useMiniStyle: boolean, t: TFun
   return items
 }
 
-const UDT_LABEL: Record<State.UDTAccount['udtType'], string> = {
+const UDT_LABEL: Record<UDTAccount['udtType'], string> = {
   sudt: 'sudt',
   m_nft_token: 'm nft',
   nrc_721_token: 'nrc 721',
@@ -100,7 +102,7 @@ const UDT_LABEL: Record<State.UDTAccount['udtType'], string> = {
   spore_cell: 'Spore',
 }
 
-const AddressUDTItem = ({ udtAccount }: { udtAccount: State.UDTAccount }) => {
+const AddressUDTItem = ({ udtAccount }: { udtAccount: UDTAccount }) => {
   const { t } = useTranslation()
   const { symbol, uan, amount, udtIconFile, typeHash, udtType, collection, cota } = udtAccount
   const isSudt = udtType === 'sudt'
@@ -145,7 +147,7 @@ const AddressUDTItem = ({ udtAccount }: { udtAccount: State.UDTAccount }) => {
 
   switch (true) {
     case isSudt: {
-      property = parseUDTAmount(amount, (udtAccount as State.SUDT).decimal)
+      property = parseUDTAmount(amount, (udtAccount as SUDT).decimal)
       href = `/sudt/${typeHash}`
       break
     }
@@ -196,7 +198,7 @@ const lockScriptIcon = (show: boolean) => {
   return isMainnet() ? ArrowDownIcon : ArrowDownBlueIcon
 }
 
-const useAddressInfo = ({ liveCellsCount, minedBlocksCount, type, addressHash, lockInfo }: State.Address) => {
+const useAddressInfo = ({ liveCellsCount, minedBlocksCount, type, addressHash, lockInfo }: Address) => {
   const { t } = useTranslation()
   const items: OverviewItemData[] = [
     {
@@ -237,7 +239,7 @@ const useAddressInfo = ({ liveCellsCount, minedBlocksCount, type, addressHash, l
   return items
 }
 
-const AddressLockScript: FC<{ address: State.Address }> = ({ address }) => {
+const AddressLockScript: FC<{ address: Address }> = ({ address }) => {
   const [showLock, setShowLock] = useState<boolean>(false)
   const { t } = useTranslation()
 
@@ -254,7 +256,7 @@ const AddressLockScript: FC<{ address: State.Address }> = ({ address }) => {
   )
 }
 
-export const AddressOverview: FC<{ address: State.Address }> = ({ address }) => {
+export const AddressOverview: FC<{ address: Address }> = ({ address }) => {
   const isLG = useIsLGScreen()
   const { t } = useTranslation()
   const { udtAccounts = [] } = address
@@ -317,7 +319,7 @@ export const AddressTransactions = ({
   timeOrderBy,
 }: {
   address: string
-  transactions: State.Transaction[]
+  transactions: Transaction[]
   transactionsTotal: number
   timeOrderBy: OrderByType
 }) => {
@@ -403,12 +405,12 @@ export const AddressTransactions = ({
                 <div>{t('transaction.capacity_change')}</div>
               </div>
             )}
-            {txList.map((transaction: State.Transaction) => (
+            {txList.map((transaction: Transaction) => (
               <TransactionLiteItem address={address} transaction={transaction} key={transaction.transactionHash} />
             ))}
           </>
         ) : (
-          txList.map((transaction: State.Transaction, index: number) => (
+          txList.map((transaction: Transaction, index: number) => (
             <TransactionItem
               address={address}
               transaction={transaction}
diff --git a/src/pages/Address/state.ts b/src/pages/Address/state.ts
index e4a69e0e9..0e3d164b2 100644
--- a/src/pages/Address/state.ts
+++ b/src/pages/Address/state.ts
@@ -1,4 +1,6 @@
-export const defaultAddressInfo: State.Address = {
+import { Address } from '../../models/Address'
+
+export const defaultAddressInfo: Address = {
   addressHash: '',
   lockHash: '',
   balance: '0',
diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx
index 004bff31f..1d0c9e361 100644
--- a/src/pages/BlockDetail/BlockComp.tsx
+++ b/src/pages/BlockDetail/BlockComp.tsx
@@ -38,6 +38,8 @@ import ComparedToMaxTooltip from '../../components/Tooltip/ComparedToMaxTooltip'
 import Filter from '../../components/Search/Filter'
 import { HelpTip } from '../../components/HelpTip'
 import { useLatestBlockNumber } from '../../services/ExplorerService'
+import { Block } from '../../models/Block'
+import { Transaction } from '../../models/Transaction'
 
 const CELL_BASE_ANCHOR = 'cellbase'
 
@@ -102,7 +104,7 @@ const BlockMinerReward = ({
   )
 }
 
-export const BlockOverview: FC<{ block: State.Block }> = ({ block }) => {
+export const BlockOverview: FC<{ block: Block }> = ({ block }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   const tipBlockNumber = useLatestBlockNumber()
@@ -321,7 +323,7 @@ export const BlockComp = ({
   onPageChange: (page: number) => void
   currentPage: number
   pageSize: number
-  transactions: State.Transaction[]
+  transactions: Transaction[]
   total: number
 }) => {
   const { t } = useTranslation()
diff --git a/src/pages/BlockDetail/state.ts b/src/pages/BlockDetail/state.ts
index 6abedbafc..5c1354e98 100644
--- a/src/pages/BlockDetail/state.ts
+++ b/src/pages/BlockDetail/state.ts
@@ -1,4 +1,6 @@
-export const defaultBlockInfo: State.Block = {
+import { Block } from '../../models/Block'
+
+export const defaultBlockInfo: Block = {
   blockHash: '',
   number: 0,
   transactionsCount: 0,
diff --git a/src/pages/BlockList/index.tsx b/src/pages/BlockList/index.tsx
index 81609378a..b99d0f578 100644
--- a/src/pages/BlockList/index.tsx
+++ b/src/pages/BlockList/index.tsx
@@ -20,6 +20,7 @@ import { ReactComponent as SortIcon } from '../../assets/sort_icon.svg'
 import { CsvExport } from '../../components/CsvExport'
 import PaginationWithRear from '../../components/PaginationWithRear'
 import styles from './styles.module.scss'
+import { Block } from '../../models/Block'
 
 const BlockValueItem = ({ value, to }: { value: string; to: string }) => (
   <HighLightValue>
@@ -45,7 +46,7 @@ interface TableContentData {
 
 const LoadingSection = () => <div className={styles.loadingSection}>Loading...</div>
 
-const getTableContentDataList = (block: State.Block, index: number, page: number, isMaxW: boolean) => {
+const getTableContentDataList = (block: Block, index: number, page: number, isMaxW: boolean) => {
   const blockReward =
     index < DELAY_BLOCK_NUMBER && page === 1 ? (
       <BlockRewardContainer>
@@ -82,9 +83,9 @@ const getTableContentDataList = (block: State.Block, index: number, page: number
   ] as TableContentData[]
 }
 
-const BlockCardGroup: FC<{ blocks: State.Block[]; isFirstPage: boolean }> = ({ blocks, isFirstPage }) => {
+const BlockCardGroup: FC<{ blocks: Block[]; isFirstPage: boolean }> = ({ blocks, isFirstPage }) => {
   const { t } = useTranslation()
-  const items: ItemCardData<State.Block>[] = [
+  const items: ItemCardData<Block>[] = [
     {
       title: t('home.height'),
       render: block => <BlockValueItem value={localeNumberString(block.number)} to={`/block/${block.number}`} />,
@@ -245,7 +246,7 @@ export default () => {
               <LoadingSection />
             ) : (
               blockList.map(
-                (block: State.Block, blockIndex: number) =>
+                (block: Block, blockIndex: number) =>
                   block && (
                     <TableContentRow key={block.number}>
                       {getTableContentDataList(block, blockIndex, currentPage, isMaxW).map(
diff --git a/src/pages/ExportTransactions/index.tsx b/src/pages/ExportTransactions/index.tsx
index ea6db962a..ad4986544 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 { explorerService } from '../../services/ExplorerService'
+import { SupportedExportTransactionType, explorerService } from '../../services/ExplorerService'
 
 const ExportTransactions = () => {
   const [t, { language }] = useTranslation()
@@ -31,7 +31,7 @@ const ExportTransactions = () => {
     'from-height': fromHeightStr,
     'to-height': toHeightStr,
   } = useSearchParams('type', 'id', 'tab', 'start-date', 'end-date', 'from-height', 'to-height')
-  function isTransactionCsvExportType(s?: string): s is State.TransactionCsvExportType {
+  function isTransactionCsvExportType(s?: string): s is SupportedExportTransactionType {
     return !!s && ['address_transactions', 'blocks', 'udts', 'nft'].includes(s)
   }
 
diff --git a/src/pages/FeeRateTracker/FeeRateTrackerComp.tsx b/src/pages/FeeRateTracker/FeeRateTrackerComp.tsx
index df348d11b..ffb8f0f1e 100644
--- a/src/pages/FeeRateTracker/FeeRateTrackerComp.tsx
+++ b/src/pages/FeeRateTracker/FeeRateTrackerComp.tsx
@@ -103,7 +103,7 @@ export const ConfirmationTimeFeeRateChart = ({
   transactionFeeRates: FeeRateTracker.TransactionFeeRate[]
 }) => {
   const { t } = useTranslation()
-  const data = transactionFeeRates.reduce<Array<Array<number>>>((acc, cur) => {
+  const data = transactionFeeRates.reduce<number[][]>((acc, cur) => {
     if (!cur.confirmationTime) {
       return acc
     }
diff --git a/src/pages/Home/AverageBlockTimeChart/index.tsx b/src/pages/Home/AverageBlockTimeChart/index.tsx
index 993ff8442..10017f851 100644
--- a/src/pages/Home/AverageBlockTimeChart/index.tsx
+++ b/src/pages/Home/AverageBlockTimeChart/index.tsx
@@ -9,16 +9,13 @@ 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 { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { ReactChartCore } from '../../StatisticsChart/common'
 
 const useOption = () => {
   const { t } = useTranslation()
-  return (
-    statisticAverageBlockTimes: State.StatisticAverageBlockTime[],
-    useMiniStyle: boolean,
-  ): echarts.EChartOption => {
+  return (statisticAverageBlockTimes: ChartItem.AverageBlockTime[], useMiniStyle: boolean): echarts.EChartOption => {
     return {
       color: ['#ffffff'],
       title: {
diff --git a/src/pages/Home/HashRateChart/index.tsx b/src/pages/Home/HashRateChart/index.tsx
index 1158cf08c..5eafe6f2b 100644
--- a/src/pages/Home/HashRateChart/index.tsx
+++ b/src/pages/Home/HashRateChart/index.tsx
@@ -10,13 +10,13 @@ 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 { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { ReactChartCore } from '../../StatisticsChart/common'
 
 const useOption = () => {
   const { t } = useTranslation()
-  return (statisticHashRates: State.StatisticHashRate[], useMiniStyle: boolean): echarts.EChartOption => {
+  return (statisticHashRates: ChartItem.HashRate[], useMiniStyle: boolean): echarts.EChartOption => {
     return {
       color: ['#ffffff'],
       title: {
diff --git a/src/pages/Home/TableCard/index.tsx b/src/pages/Home/TableCard/index.tsx
index 777f9fee3..c734407a8 100644
--- a/src/pages/Home/TableCard/index.tsx
+++ b/src/pages/Home/TableCard/index.tsx
@@ -9,9 +9,11 @@ import { BlockRewardPlusPanel, BlockRewardPanel, BlockCardPanel, TransactionCard
 import AddressText from '../../../components/AddressText'
 import styles from './index.module.scss'
 import { useParsedDate } from '../../../utils/hook'
+import { Block } from '../../../models/Block'
+import { Transaction } from '../../../models/Transaction'
 
 // eslint-disable-next-line no-underscore-dangle
-const _BlockCardItem: FC<{ block: State.Block; isDelayBlock?: boolean }> = ({ block, isDelayBlock }) => {
+const _BlockCardItem: FC<{ block: Block; isDelayBlock?: boolean }> = ({ block, isDelayBlock }) => {
   const { t } = useTranslation()
   const liveCellChanges = Number(block.liveCellChanges)
   const blockReward = isDelayBlock ? (
@@ -74,7 +76,7 @@ export const BlockCardItem = memo(
 
 // eslint-disable-next-line no-underscore-dangle
 const _TransactionCardItem: FC<{
-  transaction: State.Transaction
+  transaction: Transaction
   tipBlockNumber: number
 }> = ({ transaction, tipBlockNumber }) => {
   const { t } = useTranslation()
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index eb773c3cd..7d5e7650e 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -38,6 +38,8 @@ import styles from './index.module.scss'
 import { RouteState } from '../../routes/state'
 import { explorerService, useLatestBlockNumber, useStatistics } from '../../services/ExplorerService'
 import { useShowSearchBarInHeader } from '../../components/Header'
+import { Block } from '../../models/Block'
+import { Transaction } from '../../models/Transaction'
 
 interface BlockchainData {
   name: string
@@ -70,8 +72,10 @@ const parseHashRate = (hashRate: string | undefined) => (hashRate ? handleHashRa
 
 const parseBlockTime = (blockTime: string | undefined) => (blockTime ? parseTime(Number(blockTime)) : '- -')
 
-const useBlockchainDataList = (statistics: State.Statistics, isMobile: boolean, isLG: boolean): BlockchainData[] => {
+const useBlockchainDataList = (isMobile: boolean, isLG: boolean): BlockchainData[] => {
   const { t } = useTranslation()
+  const statistics = useStatistics()
+
   return [
     {
       name: t('blockchain.latest_block'),
@@ -153,7 +157,7 @@ const HomeHeaderTopPanel: FC = memo(() => {
   )
 })
 
-const BlockList: FC<{ blocks: State.Block[] }> = memo(({ blocks }) => {
+const BlockList: FC<{ blocks: Block[] }> = memo(({ blocks }) => {
   return blocks.length > 0 ? (
     <>
       {blocks.map((block, index) => (
@@ -168,7 +172,7 @@ const BlockList: FC<{ blocks: State.Block[] }> = memo(({ blocks }) => {
   )
 })
 
-const TransactionList: FC<{ transactions: State.Transaction[]; tipBlockNumber: number }> = memo(
+const TransactionList: FC<{ transactions: Transaction[]; tipBlockNumber: number }> = memo(
   ({ transactions, tipBlockNumber }) => {
     return transactions.length > 0 ? (
       <>
@@ -190,7 +194,6 @@ export default () => {
   const { t } = useTranslation()
   const isLG = useIsLGScreen()
   const history = useHistory<RouteState>()
-  const statistics = useStatistics()
   const tipBlockNumber = useLatestBlockNumber()
 
   const blocksQuery = useQuery(
@@ -234,7 +237,7 @@ export default () => {
     handleBlockchainAlert()
   }, BLOCKCHAIN_ALERT_POLLING_TIME)
 
-  const blockchainDataList = useBlockchainDataList(statistics, isMobile, isLG)
+  const blockchainDataList = useBlockchainDataList(isMobile, isLG)
 
   return (
     <Content>
diff --git a/src/pages/NervosDao/DaoOverview/index.tsx b/src/pages/NervosDao/DaoOverview/index.tsx
index d27550d82..546c161cf 100644
--- a/src/pages/NervosDao/DaoOverview/index.tsx
+++ b/src/pages/NervosDao/DaoOverview/index.tsx
@@ -29,6 +29,9 @@ import { ReactChartCore } from '../../StatisticsChart/common'
 import { HelpTip } from '../../../components/HelpTip'
 import { ChartColor } from '../../../constants/common'
 import { assertNotArray } from '../../../utils/chart'
+import { APIReturn } from '../../../services/ExplorerService'
+
+type NervosDaoInfo = APIReturn<'fetchNervosDao'>
 
 interface NervosDaoItemContent {
   title: string
@@ -67,7 +70,7 @@ const daoIcon = (symbol: 'positive' | 'negative' | 'zero' | undefined) => {
   }
 }
 
-const useNervosDaoItemContents = (nervosDao: State.NervosDao): NervosDaoItemContent[] => {
+const useNervosDaoItemContents = (nervosDao: NervosDaoInfo): NervosDaoItemContent[] => {
   const { t } = useTranslation()
   return [
     {
@@ -133,7 +136,7 @@ const NervosDaoLeftItem = ({ item, firstLine }: { item: NervosDaoItemContent; fi
   </DaoOverviewLeftItemPanel>
 )
 
-const NervosDaoOverviewLeftComp: FC<{ nervosDao: State.NervosDao }> = ({ nervosDao }) => {
+const NervosDaoOverviewLeftComp: FC<{ nervosDao: NervosDaoInfo }> = ({ nervosDao }) => {
   const isMobile = useIsMobile()
   const leftItems = useNervosDaoItemContents(nervosDao)
 
@@ -183,7 +186,7 @@ const NervosDaoOverviewLeftComp: FC<{ nervosDao: State.NervosDao }> = ({ nervosD
   )
 }
 
-const useOption = (nervosDao: State.NervosDao, colors: string[], isMobile: boolean): echarts.EChartOption => {
+const useOption = (nervosDao: NervosDaoInfo, colors: string[], isMobile: boolean): echarts.EChartOption => {
   const { t } = useTranslation()
   const { miningReward, depositCompensation, treasuryAmount } = nervosDao
   const sum =
@@ -281,13 +284,13 @@ const NervosDaoPieItem = ({ item }: { item: NervosDaoPieItemContent }) => (
   </NervosDaoPieItemPanel>
 )
 
-export default ({ nervosDao }: { nervosDao: State.NervosDao }) => {
+export default ({ nervosDao }: { nervosDao: NervosDaoInfo }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   const isExactLG = useIsLGScreen(true)
 
   const nervosDaoPieItemContents = useCallback(
-    (nervosDao: State.NervosDao): NervosDaoPieItemContent[] => [
+    (nervosDao: NervosDaoInfo): NervosDaoPieItemContent[] => [
       {
         title: t('nervos_dao.mining_reward'),
         content: <NervosDaoRightCapacity reward={nervosDao.miningReward} />,
diff --git a/src/pages/NervosDao/DaoOverview/styled.tsx b/src/pages/NervosDao/DaoOverview/styled.tsx
index e6eda928a..78b2f80a1 100644
--- a/src/pages/NervosDao/DaoOverview/styled.tsx
+++ b/src/pages/NervosDao/DaoOverview/styled.tsx
@@ -147,7 +147,7 @@ export const DaoOverviewPieItemsPanel = styled.div`
   }
 `
 
-export const DaoOverviewLeftItemPanel = styled.div`
+export const DaoOverviewLeftItemPanel = styled.div<{ symbol?: string; hasChange?: boolean; hasTooltip?: boolean }>`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -177,8 +177,7 @@ export const DaoOverviewLeftItemPanel = styled.div`
       white-space: nowrap;
 
       @media (max-width: 1440px) {
-        max-width: ${(props: { symbol?: string; hasChange?: boolean; hasTooltip?: boolean }) =>
-          props.hasChange ? '130px' : '200px'};
+        max-width: ${props => (props.hasChange ? '130px' : '200px')};
       }
 
       @media (max-width: 1200px) {
@@ -187,13 +186,13 @@ export const DaoOverviewLeftItemPanel = styled.div`
 
       @media (max-width: 750px) {
         font-size: 12px;
-        max-width: ${(props: { hasChange?: boolean }) => (props.hasChange ? '90px' : '200px')};
+        max-width: ${props => (props.hasChange ? '90px' : '200px')};
       }
     }
 
     .daoOverviewItemChangeIcon {
-      width: ${(props: { symbol?: string }) => (props.symbol === 'zero' ? '10px' : '7px')};
-      height: ${(props: { symbol?: string }) => (props.symbol === 'zero' ? '7px' : '10px')};
+      width: ${props => (props.symbol === 'zero' ? '10px' : '7px')};
+      height: ${props => (props.symbol === 'zero' ? '7px' : '10px')};
       margin-left: 5px;
       margin-right: 3px;
     }
@@ -201,8 +200,7 @@ export const DaoOverviewLeftItemPanel = styled.div`
     .daoOverviewItemChange {
       font-size: 12px;
       font-weight: bold;
-      color: ${(props: { symbol?: string; theme: State.Theme }) =>
-        props.symbol === 'negative' ? '#FF464F' : props.theme.primary};
+      color: ${props => (props.symbol === 'negative' ? '#FF464F' : props.theme.primary)};
       cursor: default;
 
       @media (max-width: 750px) {
diff --git a/src/pages/NervosDao/DaoTransactions/index.tsx b/src/pages/NervosDao/DaoTransactions/index.tsx
index a23580018..b615aae07 100644
--- a/src/pages/NervosDao/DaoTransactions/index.tsx
+++ b/src/pages/NervosDao/DaoTransactions/index.tsx
@@ -4,6 +4,7 @@ import { TransactionsPagination, DAONoResultPanel } from './styled'
 import Pagination from '../../../components/Pagination'
 import { PageParams } from '../../../constants/common'
 import { deprecatedAddrToNewAddr } from '../../../utils/util'
+import { Transaction } from '../../../models/Transaction'
 
 export default ({
   currentPage = 1,
@@ -15,7 +16,7 @@ export default ({
 }: {
   currentPage: number
   pageSize: number
-  transactions: State.Transaction[]
+  transactions: Transaction[]
   total: number
   onPageChange: (page: number) => void
   filterNoResult?: boolean
@@ -45,7 +46,7 @@ export default ({
   return (
     <>
       {txList.map(
-        (transaction: State.Transaction, index: number) =>
+        (transaction: Transaction, index: number) =>
           transaction && (
             <TransactionItem
               key={transaction.transactionHash}
diff --git a/src/pages/NervosDao/DepositorRank/index.tsx b/src/pages/NervosDao/DepositorRank/index.tsx
index 3a41fe229..88742ee2d 100644
--- a/src/pages/NervosDao/DepositorRank/index.tsx
+++ b/src/pages/NervosDao/DepositorRank/index.tsx
@@ -15,6 +15,9 @@ import { ItemCardData, ItemCardGroup } from '../../../components/Card/ItemCard'
 import AddressText from '../../../components/AddressText'
 import styles from './index.module.scss'
 import { useIsMobile } from '../../../utils/hook'
+import { NervosDaoDepositor } from '../../../services/ExplorerService'
+
+type RankedDepositor = NervosDaoDepositor & { rank: number }
 
 const AddressTextCol = ({ address }: { address: string }) => {
   return (
@@ -29,10 +32,10 @@ const AddressTextCol = ({ address }: { address: string }) => {
   )
 }
 
-const DepositorCardGroup: FC<{ depositors: (State.NervosDaoDepositor & { rank: number })[] }> = ({ depositors }) => {
+const DepositorCardGroup: FC<{ depositors: RankedDepositor[] }> = ({ depositors }) => {
   const { t } = useTranslation()
 
-  const items: ItemCardData<State.NervosDaoDepositor & { rank: number }>[] = [
+  const items: ItemCardData<RankedDepositor>[] = [
     {
       title: t('nervos_dao.dao_title_rank'),
       render: depositor => depositor.rank,
@@ -54,9 +57,9 @@ const DepositorCardGroup: FC<{ depositors: (State.NervosDaoDepositor & { rank: n
   return <ItemCardGroup items={items} dataSource={depositors} getDataKey={(_, idx) => idx} />
 }
 
-export default ({ depositors, filter }: { depositors: State.NervosDaoDepositor[]; filter?: string }) => {
+export default ({ depositors, filter }: { depositors: NervosDaoDepositor[]; filter?: string }) => {
   const { t } = useTranslation()
-  const rankedDepositors = depositors.map((depositor, index) => ({
+  const rankedDepositors: RankedDepositor[] = depositors.map((depositor, index) => ({
     ...depositor,
     rank: index + 1,
   }))
diff --git a/src/pages/NervosDao/state.ts b/src/pages/NervosDao/state.ts
index 92fd9cd1c..1f4aa3d08 100644
--- a/src/pages/NervosDao/state.ts
+++ b/src/pages/NervosDao/state.ts
@@ -1,4 +1,6 @@
-export const defaultNervosDaoInfo: State.NervosDao = {
+import { APIReturn } from '../../services/ExplorerService'
+
+export const defaultNervosDaoInfo: APIReturn<'fetchNervosDao'> = {
   totalDeposit: '',
   depositorsCount: '',
   depositChanges: '',
diff --git a/src/pages/NftCollectionInfo/index.tsx b/src/pages/NftCollectionInfo/index.tsx
index 4decc3f1d..9ef1e5a7b 100644
--- a/src/pages/NftCollectionInfo/index.tsx
+++ b/src/pages/NftCollectionInfo/index.tsx
@@ -18,7 +18,7 @@ import NftHolderList from '../../components/NftHolderList'
 import Pagination from '../../components/Pagination'
 
 const tabs = ['transfers', 'holders', 'inventory']
-function getFilterList(t: TFunction): Array<Record<'title' | 'value', string>> {
+function getFilterList(t: TFunction): Record<'title' | 'value', string>[] {
   return [
     {
       value: 'mint',
diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx
index ad80f999d..1e60c7a85 100644
--- a/src/pages/NftCollections/List.tsx
+++ b/src/pages/NftCollections/List.tsx
@@ -14,7 +14,7 @@ import type { NFTCollection } from '../../services/ExplorerService/fetcher'
 
 type NftSortField = 'transactions' | 'holder' | 'minted'
 const primaryColor = getPrimaryColor()
-function useFilterList(): Array<Record<'title' | 'value', string>> {
+function useFilterList(): Record<'title' | 'value', string>[] {
   const { t } = useTranslation()
   return [
     {
@@ -142,7 +142,7 @@ const TypeInfo: React.FC<{ nft: NFTCollection }> = ({ nft: item }) => {
   )
 }
 
-export const ListOnDesktop: React.FC<{ isLoading: boolean; list: Array<NFTCollection> }> = ({ list, isLoading }) => {
+export const ListOnDesktop: React.FC<{ isLoading: boolean; list: NFTCollection[] }> = ({ list, isLoading }) => {
   const { t } = useTranslation()
   return (
     <table data-role="desktop-list">
@@ -245,7 +245,7 @@ export const ListOnDesktop: React.FC<{ isLoading: boolean; list: Array<NFTCollec
   )
 }
 
-export const ListOnMobile: React.FC<{ isLoading: boolean; list: Array<NFTCollection> }> = ({ list, isLoading }) => {
+export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[] }> = ({ list, isLoading }) => {
   const { t } = useTranslation()
   return (
     <div data-role="mobile-list">
diff --git a/src/pages/ScriptList/index.tsx b/src/pages/ScriptList/index.tsx
index d35099c84..1fde16316 100644
--- a/src/pages/ScriptList/index.tsx
+++ b/src/pages/ScriptList/index.tsx
@@ -188,7 +188,7 @@ export const scripts = new Map<string, ScriptAttributes>([
   ],
 ])
 
-const keysWithLinkValueInScript: Array<keyof ScriptAttributes> = ['rfc', 'code', 'deprecated', 'website']
+const keysWithLinkValueInScript: (keyof ScriptAttributes)[] = ['rfc', 'code', 'deprecated', 'website']
 
 const ScriptList: FC = () => {
   const { t } = useTranslation()
diff --git a/src/pages/SimpleUDT/SimpleUDTComp.tsx b/src/pages/SimpleUDT/SimpleUDTComp.tsx
index 1ffb77201..efa5e0402 100644
--- a/src/pages/SimpleUDT/SimpleUDTComp.tsx
+++ b/src/pages/SimpleUDT/SimpleUDTComp.tsx
@@ -12,6 +12,8 @@ import styles from './styles.module.scss'
 import AddressText from '../../components/AddressText'
 import PaginationWithRear from '../../components/PaginationWithRear'
 import { CsvExport } from '../../components/CsvExport'
+import { Transaction } from '../../models/Transaction'
+import { UDT } from '../../models/UDT'
 
 const useAddressContent = (address: string) => {
   const { t } = useTranslation()
@@ -41,7 +43,7 @@ const useAddressContent = (address: string) => {
   )
 }
 
-const useSimpleUDTInfo = (udt: State.UDT) => {
+const useSimpleUDTInfo = (udt: UDT) => {
   const { t } = useTranslation()
   const { displayName, uan, fullName, issuerAddress, symbol, addressesCount, decimal, totalAmount } = udt
   return [
@@ -73,7 +75,7 @@ const useSimpleUDTInfo = (udt: State.UDT) => {
   ] as OverviewItemData[]
 }
 
-export const SimpleUDTOverview = ({ children, udt }: { children: ReactNode; udt: State.UDT }) => {
+export const SimpleUDTOverview = ({ children, udt }: { children: ReactNode; udt: UDT }) => {
   return (
     <OverviewCard items={useSimpleUDTInfo(udt)} hideShadow>
       {children}
@@ -92,7 +94,7 @@ export const SimpleUDTComp = ({
 }: {
   currentPage: number
   pageSize: number
-  transactions: State.Transaction[]
+  transactions: Transaction[]
   total: number
   onPageChange: (page: number) => void
   filterNoResult?: boolean
@@ -112,7 +114,7 @@ export const SimpleUDTComp = ({
     <>
       <SimpleUDTTransactionsPanel>
         {transactions.map(
-          (transaction: State.Transaction, index: number) =>
+          (transaction: Transaction, index: number) =>
             transaction && (
               <TransactionItem
                 transaction={transaction}
diff --git a/src/pages/SimpleUDT/index.tsx b/src/pages/SimpleUDT/index.tsx
index dc761654e..acfd4f42d 100644
--- a/src/pages/SimpleUDT/index.tsx
+++ b/src/pages/SimpleUDT/index.tsx
@@ -24,6 +24,7 @@ import { defaultUDTInfo } from './state'
 import { ReactComponent as FilterIcon } from '../../assets/filter_icon.svg'
 import { ReactComponent as SelectedCheckIcon } from '../../assets/selected_check_icon.svg'
 import styles from './styles.module.scss'
+import { Cell } from '../../models/Cell'
 
 const typeScriptIcon = (show: boolean) => {
   if (show) {
@@ -70,7 +71,7 @@ export const SimpleUDT = () => {
         type,
       })
 
-      const ensureCellAddrIsNewFormat = (cell: State.Cell) => ({
+      const ensureCellAddrIsNewFormat = (cell: Cell) => ({
         ...cell,
         addressHash: deprecatedAddrToNewAddr(cell.addressHash),
       })
diff --git a/src/pages/SimpleUDT/state.ts b/src/pages/SimpleUDT/state.ts
index f0a29fdcd..89e1c867f 100644
--- a/src/pages/SimpleUDT/state.ts
+++ b/src/pages/SimpleUDT/state.ts
@@ -1,4 +1,6 @@
-export const defaultUDTInfo: State.UDT = {
+import { UDT } from '../../models/UDT'
+
+export const defaultUDTInfo: UDT = {
   symbol: '',
   fullName: '',
   totalAmount: '0',
diff --git a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
index 1fbef2947..619c4de9f 100644
--- a/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
+++ b/src/pages/StatisticsChart/activities/AddressBalanceRank.tsx
@@ -6,11 +6,12 @@ import { DATA_ZOOM_CONFIG, assertIsArray, parseNumericAbbr } from '../../../util
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useAdaptPCEllipsis } from '../../../utils/hook'
+import { ChartColorConfig } from '../../../constants/common'
 
-const getAddressWithRanking = (statisticAddressBalanceRanks: State.StatisticAddressBalanceRank[], ranking?: string) => {
+const getAddressWithRanking = (statisticAddressBalanceRanks: ChartItem.AddressBalanceRank[], ranking?: string) => {
   if (!ranking) return ''
   const addressBalanceRank = statisticAddressBalanceRanks.find(rank => rank.ranking === ranking)
   return addressBalanceRank ? addressBalanceRank.address : ''
@@ -20,8 +21,8 @@ const useOption = () => {
   const { t } = useTranslation()
   const currentLanguage = useCurrentLanguage()
   return (
-    statisticAddressBalanceRanks: State.StatisticAddressBalanceRank[],
-    chartColor: State.ChartColor,
+    statisticAddressBalanceRanks: ChartItem.AddressBalanceRank[],
+    chartColor: ChartColorConfig,
     isMobile: boolean,
     isThumbnail = false,
     getAdaptAddressText: (address: string) => string,
@@ -104,7 +105,7 @@ const useOption = () => {
   }
 }
 
-const toCSV = (statisticAddressBalanceRanks: State.StatisticAddressBalanceRank[]) =>
+const toCSV = (statisticAddressBalanceRanks: ChartItem.AddressBalanceRank[]) =>
   statisticAddressBalanceRanks
     ? statisticAddressBalanceRanks.map(data => [data.ranking, shannonToCkbDecimal(data.balance, 8)])
     : []
@@ -113,9 +114,7 @@ export const AddressBalanceRankChart = ({ isThumbnail = false }: { isThumbnail?:
   const history = useHistory()
   const [t] = useTranslation()
 
-  const [statisticAddressBalanceRanks, setStatisticAddressBalanceRanks] = useState<State.StatisticAddressBalanceRank[]>(
-    [],
-  )
+  const [statisticAddressBalanceRanks, setStatisticAddressBalanceRanks] = useState<ChartItem.AddressBalanceRank[]>([])
   const handleClick = useCallback(
     (param: echarts.CallbackDataParams) => {
       if (param && param.name && statisticAddressBalanceRanks.length > 0) {
@@ -130,7 +129,7 @@ export const AddressBalanceRankChart = ({ isThumbnail = false }: { isThumbnail?:
 
   const adaptPCEllipsis = useAdaptPCEllipsis(60)
   const parseOption = useOption()
-  const getEChartOption: SmartChartPageProps<State.StatisticAddressBalanceRank>['getEChartOption'] = useCallback(
+  const getEChartOption: SmartChartPageProps<ChartItem.AddressBalanceRank>['getEChartOption'] = useCallback(
     (...args) => parseOption(...args, address => adaptPCEllipsis(address, 6)),
     [adaptPCEllipsis, parseOption],
   )
diff --git a/src/pages/StatisticsChart/activities/AddressCount.tsx b/src/pages/StatisticsChart/activities/AddressCount.tsx
index b933c96f1..66b0af4f7 100644
--- a/src/pages/StatisticsChart/activities/AddressCount.tsx
+++ b/src/pages/StatisticsChart/activities/AddressCount.tsx
@@ -3,13 +3,14 @@ import { useTranslation } from 'react-i18next'
 import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/chart'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticAddressCounts: State.StatisticAddressCount[],
-  chartColor: State.ChartColor,
+  statisticAddressCounts: ChartItem.AddressCount[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -95,7 +96,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticAddressCounts?: State.StatisticAddressCount[]) =>
+const toCSV = (statisticAddressCounts?: ChartItem.AddressCount[]) =>
   statisticAddressCounts ? statisticAddressCounts.map(data => [data.createdAtUnixtimestamp, data.addressesCount]) : []
 
 export const AddressCountChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
diff --git a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
index 4b8cb04da..ee697141e 100644
--- a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
+++ b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
@@ -12,7 +12,8 @@ import {
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, currentLanguage: string) => tooltipWidth(value, currentLanguage === 'en' ? 270 : 110)
 
@@ -26,8 +27,8 @@ const parseTooltip = ({
 }
 
 const useOption = (
-  statisticBalanceDistributions: State.StatisticBalanceDistribution[],
-  chartColor: State.ChartColor,
+  statisticBalanceDistributions: ChartItem.BalanceDistribution[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -165,20 +166,7 @@ const useOption = (
   }
 }
 
-const fetchStatisticBalanceDistributions = async () => {
-  const { addressBalanceDistribution } = await explorerService.api.fetchStatisticBalanceDistribution()
-  const balanceDistributions = addressBalanceDistribution.map(distribution => {
-    const [balance, addresses, sumAddresses] = distribution
-    return {
-      balance,
-      addresses,
-      sumAddresses,
-    }
-  })
-  return balanceDistributions
-}
-
-const toCSV = (statisticBalanceDistributions?: State.StatisticBalanceDistribution[]) =>
+const toCSV = (statisticBalanceDistributions?: ChartItem.BalanceDistribution[]) =>
   statisticBalanceDistributions
     ? statisticBalanceDistributions.map((data, index) => [
         `"${handleLogGroupAxis(
@@ -197,7 +185,7 @@ export const BalanceDistributionChart = ({ isThumbnail = false }: { isThumbnail?
       title={t('statistic.balance_distribution')}
       description={t('statistic.balance_distribution_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticBalanceDistributions}
+      fetchData={explorerService.api.fetchStatisticBalanceDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.BalanceDistribution}
diff --git a/src/pages/StatisticsChart/activities/CellCount.tsx b/src/pages/StatisticsChart/activities/CellCount.tsx
index ced46d668..0af7b0e08 100644
--- a/src/pages/StatisticsChart/activities/CellCount.tsx
+++ b/src/pages/StatisticsChart/activities/CellCount.tsx
@@ -11,7 +11,8 @@ import {
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, currentLanguage: LanuageType) =>
   tooltipWidth(value, currentLanguage === 'en' ? 125 : 80)
@@ -43,8 +44,8 @@ const useTooltip = () => {
 }
 
 const useOption = (
-  statisticCellCounts: State.StatisticCellCount[],
-  chartColor: State.ChartColor,
+  statisticCellCounts: ChartItem.CellCount[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -175,7 +176,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticCellCounts: State.StatisticCellCount[]) =>
+const toCSV = (statisticCellCounts: ChartItem.CellCount[]) =>
   statisticCellCounts
     ? statisticCellCounts.map(data => [
         data.createdAtUnixtimestamp,
diff --git a/src/pages/StatisticsChart/activities/TransactionCount.tsx b/src/pages/StatisticsChart/activities/TransactionCount.tsx
index 357b76bc1..d2dc639ac 100644
--- a/src/pages/StatisticsChart/activities/TransactionCount.tsx
+++ b/src/pages/StatisticsChart/activities/TransactionCount.tsx
@@ -4,12 +4,13 @@ import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/char
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticTransactionCounts: State.StatisticTransactionCount[],
-  chartColor: State.ChartColor,
+  statisticTransactionCounts: ChartItem.TransactionCount[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -92,7 +93,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticTransactionCounts: State.StatisticTransactionCount[]) =>
+const toCSV = (statisticTransactionCounts: ChartItem.TransactionCount[]) =>
   statisticTransactionCounts
     ? statisticTransactionCounts.map(data => [data.createdAtUnixtimestamp, data.transactionsCount])
     : []
diff --git a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
index defd36968..bc57c545b 100644
--- a/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
+++ b/src/pages/StatisticsChart/activities/TxFeeHistory.tsx
@@ -6,12 +6,13 @@ import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticTxFeeHistories: State.StatisticTransactionFee[],
-  chartColor: State.ChartColor,
+  statisticTxFeeHistories: ChartItem.TransactionFee[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -97,7 +98,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticTxFeeHistories: State.StatisticTransactionFee[]) =>
+const toCSV = (statisticTxFeeHistories: ChartItem.TransactionFee[]) =>
   statisticTxFeeHistories
     ? statisticTxFeeHistories.map(data => [data.createdAtUnixtimestamp, shannonToCkbDecimal(data.totalTxFee, 8)])
     : []
diff --git a/src/pages/StatisticsChart/block/AverageBlockTime.tsx b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
index da2676fe9..91cbca489 100644
--- a/src/pages/StatisticsChart/block/AverageBlockTime.tsx
+++ b/src/pages/StatisticsChart/block/AverageBlockTime.tsx
@@ -3,13 +3,14 @@ import { parseDateNoTime, parseSimpleDate, parseSimpleDateNoSecond } from '../..
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
 import { DATA_ZOOM_CONFIG, assertIsArray, assertSerialsDataIsString, assertSerialsItem } from '../../../utils/chart'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticAverageBlockTimes: State.StatisticAverageBlockTime[],
-  chartColor: State.ChartColor,
+  statisticAverageBlockTimes: ChartItem.AverageBlockTime[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -30,7 +31,7 @@ const useOption = (
     containLabel: true,
   }
 
-  const maxAndMinAxis = (statisticAverageBlockTimes: State.StatisticAverageBlockTime[]) => {
+  const maxAndMinAxis = (statisticAverageBlockTimes: ChartItem.AverageBlockTime[]) => {
     const array = statisticAverageBlockTimes.flatMap(data => parseFloat(data.avgBlockTimeDaily))
     return {
       max: Math.ceil(Math.max(...array) / 1000),
@@ -178,7 +179,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticAverageBlockTimes: State.StatisticAverageBlockTime[]) =>
+const toCSV = (statisticAverageBlockTimes: ChartItem.AverageBlockTime[]) =>
   statisticAverageBlockTimes
     ? statisticAverageBlockTimes.map(data => [data.timestamp, data.avgBlockTimeDaily, data.avgBlockTimeWeekly])
     : []
diff --git a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
index 4f143ef2a..bb8ee2a11 100644
--- a/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
+++ b/src/pages/StatisticsChart/block/BlockTimeDistribution.tsx
@@ -2,12 +2,13 @@ import { useTranslation } from 'react-i18next'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticBlockTimeDistributions: State.StatisticBlockTimeDistribution[],
-  chartColor: State.ChartColor,
+  statisticBlockTimeDistributions: ChartItem.BlockTimeDistribution[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -89,29 +90,7 @@ const useOption = (
   }
 }
 
-const fetchStatisticBlockTimeDistributions = async () => {
-  const { blockTimeDistribution } = await explorerService.api.fetchStatisticBlockTimeDistribution()
-  const sumBlocks = blockTimeDistribution
-    .flatMap(data => Number(data[1]))
-    .reduce((previous, current) => previous + current)
-  const statisticBlockTimeDistributions = [
-    {
-      time: '0',
-      ratio: '0',
-    },
-  ].concat(
-    blockTimeDistribution.map(data => {
-      const [time, blocks] = data
-      return {
-        time,
-        ratio: (Number(blocks) / sumBlocks).toFixed(5),
-      }
-    }),
-  )
-  return statisticBlockTimeDistributions
-}
-
-const toCSV = (statisticBlockTimeDistributions: State.StatisticBlockTimeDistribution[]) =>
+const toCSV = (statisticBlockTimeDistributions: ChartItem.BlockTimeDistribution[]) =>
   statisticBlockTimeDistributions
     ? statisticBlockTimeDistributions.map(data => [data.time, Number(data.ratio).toFixed(4)])
     : []
@@ -123,7 +102,7 @@ export const BlockTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai
       title={t('statistic.block_time_distribution_more')}
       description={t('statistic.block_time_distribution_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticBlockTimeDistributions}
+      fetchData={explorerService.api.fetchStatisticBlockTimeDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.BlockTimeDistribution}
diff --git a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
index 0f347703f..ed3f85cea 100644
--- a/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
+++ b/src/pages/StatisticsChart/block/EpochTimeDistribution.tsx
@@ -3,13 +3,14 @@ import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { localeNumberString } from '../../../utils/number'
 import { parseHourFromMinute } from '../../../utils/date'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticEpochTimeDistributions: State.StatisticEpochTimeDistribution[],
-  chartColor: State.ChartColor,
+  statisticEpochTimeDistributions: ChartItem.EpochTimeDistribution[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -96,19 +97,7 @@ const useOption = (
   }
 }
 
-const fetchStatisticEpochTimeDistributions = async () => {
-  const { epochTimeDistribution } = await explorerService.api.fetchStatisticEpochTimeDistribution()
-  const statisticEpochTimeDistributions: State.StatisticEpochTimeDistribution[] = epochTimeDistribution.map(data => {
-    const [time, epoch] = data
-    return {
-      time,
-      epoch,
-    }
-  })
-  return statisticEpochTimeDistributions
-}
-
-const toCSV = (statisticEpochTimeDistributions: State.StatisticEpochTimeDistribution[]) =>
+const toCSV = (statisticEpochTimeDistributions: ChartItem.EpochTimeDistribution[]) =>
   statisticEpochTimeDistributions
     ? statisticEpochTimeDistributions.map(data => [parseHourFromMinute(data.time), data.epoch])
     : []
@@ -120,7 +109,7 @@ export const EpochTimeDistributionChart = ({ isThumbnail = false }: { isThumbnai
       title={t('statistic.epoch_time_distribution_more')}
       description={t('statistic.epoch_time_distribution_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticEpochTimeDistributions}
+      fetchData={explorerService.api.fetchStatisticEpochTimeDistribution}
       getEChartOption={useOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.EpochTimeDistribution}
diff --git a/src/pages/StatisticsChart/common/index.tsx b/src/pages/StatisticsChart/common/index.tsx
index d20266b92..002b6e05c 100644
--- a/src/pages/StatisticsChart/common/index.tsx
+++ b/src/pages/StatisticsChart/common/index.tsx
@@ -23,7 +23,7 @@ import Content from '../../../components/Content'
 import { useChartQueryWithCache, useIsMobile, usePrevious, useWindowResize } from '../../../utils/hook'
 import { isDeepEqual } from '../../../utils/util'
 import { HelpTip } from '../../../components/HelpTip'
-import { ChartColor } from '../../../constants/common'
+import { ChartColor, ChartColorConfig } from '../../../constants/common'
 import { Response } from '../../../services/ExplorerService'
 
 const LoadingComp = ({ isThumbnail }: { isThumbnail?: boolean }) => (isThumbnail ? <SmallLoading /> : <Loading show />)
@@ -165,7 +165,7 @@ export interface SmartChartPageProps<T> {
   onFetched?: (dataList: T[]) => void
   getEChartOption: (
     dataList: T[],
-    chartColor: State.ChartColor,
+    chartColor: ChartColorConfig,
     isMobile: boolean,
     isThumbnail?: boolean,
   ) => echarts.EChartOption
diff --git a/src/pages/StatisticsChart/mining/Difficulty.tsx b/src/pages/StatisticsChart/mining/Difficulty.tsx
index 56b8aa720..894e64ee8 100644
--- a/src/pages/StatisticsChart/mining/Difficulty.tsx
+++ b/src/pages/StatisticsChart/mining/Difficulty.tsx
@@ -5,12 +5,13 @@ import { parseDateNoTime } from '../../../utils/date'
 import { handleDifficulty } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticDifficulties: State.StatisticDifficulty[],
-  chartColor: State.ChartColor,
+  statisticDifficulties: ChartItem.Difficulty[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -96,7 +97,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticDifficulties: State.StatisticDifficulty[]) =>
+const toCSV = (statisticDifficulties: ChartItem.Difficulty[]) =>
   statisticDifficulties ? statisticDifficulties.map(data => [data.createdAtUnixtimestamp, data.avgDifficulty]) : []
 
 export const DifficultyChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
diff --git a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
index ecda3699e..f7e023cc1 100644
--- a/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
+++ b/src/pages/StatisticsChart/mining/DifficultyHashRate.tsx
@@ -9,13 +9,14 @@ import {
 } from '../../../utils/chart'
 import { handleDifficulty, handleHashRate } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticDifficultyHashRates: State.StatisticDifficultyHashRate[],
-  chartColor: State.ChartColor,
+  statisticDifficultyHashRates: ChartItem.DifficultyHashRate[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -187,7 +188,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticDifficultyHashRates: State.StatisticDifficultyHashRate[]) =>
+const toCSV = (statisticDifficultyHashRates: ChartItem.DifficultyHashRate[]) =>
   statisticDifficultyHashRates
     ? statisticDifficultyHashRates.map(data => [data.epochNumber, data.difficulty, data.hashRate, data.uncleRate])
     : []
diff --git a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
index e44710a2b..5e842b1a6 100644
--- a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
+++ b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
@@ -5,8 +5,9 @@ import { assertSerialsDataIsString, assertIsArray, assertSerialsItem, handleAxis
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { parseHourFromMillisecond } from '../../../utils/date'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, currentLanguage: LanuageType) =>
   tooltipWidth(value, currentLanguage === 'en' ? 90 : 80)
@@ -26,8 +27,8 @@ const useTooltip = () => {
 }
 
 const useOption = (
-  statisticChartData: State.StatisticDifficultyUncleRateEpoch[],
-  chartColor: State.ChartColor,
+  statisticChartData: ChartItem.DifficultyUncleRateEpoch[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -202,7 +203,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticDifficultyUncleRateEpochs: State.StatisticDifficultyUncleRateEpoch[]) =>
+const toCSV = (statisticDifficultyUncleRateEpochs: ChartItem.DifficultyUncleRateEpoch[]) =>
   statisticDifficultyUncleRateEpochs
     ? statisticDifficultyUncleRateEpochs.map(data => [data.epochNumber, data.epochTime, data.epochLength])
     : []
diff --git a/src/pages/StatisticsChart/mining/HashRate.tsx b/src/pages/StatisticsChart/mining/HashRate.tsx
index 0ec49dbf3..19d0d367f 100644
--- a/src/pages/StatisticsChart/mining/HashRate.tsx
+++ b/src/pages/StatisticsChart/mining/HashRate.tsx
@@ -4,13 +4,14 @@ import { DATA_ZOOM_CONFIG, assertIsArray, handleAxis } from '../../../utils/char
 import { parseDateNoTime } from '../../../utils/date'
 import { handleHashRate } from '../../../utils/number'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticHashRates: State.StatisticHashRate[],
-  chartColor: State.ChartColor,
+  statisticHashRates: ChartItem.HashRate[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -94,7 +95,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticHashRates: State.StatisticHashRate[]) =>
+const toCSV = (statisticHashRates: ChartItem.HashRate[]) =>
   statisticHashRates ? statisticHashRates.map(data => [data.createdAtUnixtimestamp, data.avgHashRate]) : []
 
 export const HashRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
diff --git a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
index 8e33f2f91..f667d4d49 100644
--- a/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
+++ b/src/pages/StatisticsChart/mining/MinerAddressDistribution.tsx
@@ -3,10 +3,11 @@ import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { tooltipColor, tooltipWidth, SmartChartPage, SmartChartPageProps } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { useAdaptMobileEllipsis, useAdaptPCEllipsis, useIsMobile } from '../../../utils/hook'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { assertNotArray } from '../../../utils/chart'
+import { ChartColorConfig } from '../../../constants/common'
 
 const Colors = [
   '#069ECD',
@@ -25,8 +26,8 @@ const useOption = () => {
   const { t } = useTranslation()
   const currentLanguage = useCurrentLanguage()
   return (
-    statisticMinerAddresses: State.StatisticMinerAddress[],
-    chartColor: State.ChartColor,
+    statisticMinerAddresses: ChartItem.MinerAddress[],
+    chartColor: ChartColorConfig,
     isMobile: boolean,
     isThumbnail = false,
     getAdaptAddressText: (address: string) => string,
@@ -88,19 +89,7 @@ const useOption = () => {
   }
 }
 
-const fetchStatisticMinerAddresses = async () => {
-  const { minerAddressDistribution } = 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]) => ({
-      address: key,
-      radio: (Number(val) / blockSum).toFixed(3),
-    }),
-  )
-  return statisticMinerAddresses
-}
-
-const toCSV = (statisticMinerAddresses: State.StatisticMinerAddress[]) =>
+const toCSV = (statisticMinerAddresses: ChartItem.MinerAddress[]) =>
   statisticMinerAddresses ? statisticMinerAddresses.map(data => [data.address, data.radio]) : []
 
 export const MinerAddressDistributionChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
@@ -120,7 +109,7 @@ export const MinerAddressDistributionChart = ({ isThumbnail = false }: { isThumb
   const adaptMobileEllipsis = useAdaptMobileEllipsis()
   const adaptPCEllipsis = useAdaptPCEllipsis(80)
   const parseOption = useOption()
-  const getEChartOption: SmartChartPageProps<State.StatisticMinerAddress>['getEChartOption'] = useCallback(
+  const getEChartOption: SmartChartPageProps<ChartItem.MinerAddress>['getEChartOption'] = useCallback(
     (...args) =>
       parseOption(...args, address => (isMobile ? adaptMobileEllipsis(address, 4) : adaptPCEllipsis(address, 2))),
     [adaptMobileEllipsis, adaptPCEllipsis, isMobile, parseOption],
@@ -131,7 +120,7 @@ export const MinerAddressDistributionChart = ({ isThumbnail = false }: { isThumb
       title={t('statistic.miner_addresses_rank')}
       isThumbnail={isThumbnail}
       chartProps={{ onClick: !isThumbnail ? onClick : undefined }}
-      fetchData={fetchStatisticMinerAddresses}
+      fetchData={explorerService.api.fetchStatisticMinerAddressDistribution}
       getEChartOption={getEChartOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.MinerAddressDistribution}
diff --git a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
index 7cc120d78..b49b00cbe 100644
--- a/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
+++ b/src/pages/StatisticsChart/mining/MinerVersionDistribution.tsx
@@ -4,6 +4,7 @@ import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { explorerService } from '../../../services/ExplorerService'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
 const Colors = [
   '#069ECD',
@@ -24,8 +25,8 @@ interface VersionRecord {
 }
 
 const useOption = (
-  list: Array<VersionRecord>,
-  chartColor: State.ChartColor,
+  list: VersionRecord[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -109,7 +110,7 @@ const fetchData = async () => {
   }))
 }
 
-const toCSV = (versionList: Array<VersionRecord>) => versionList?.map(r => [r.version, `${r.percent}%`]) ?? []
+const toCSV = (versionList: VersionRecord[]) => versionList?.map(r => [r.version, `${r.percent}%`]) ?? []
 
 export const MinerVersionDistributionChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
   const [t] = useTranslation()
diff --git a/src/pages/StatisticsChart/mining/UncleRate.tsx b/src/pages/StatisticsChart/mining/UncleRate.tsx
index 4457cfee1..384910617 100644
--- a/src/pages/StatisticsChart/mining/UncleRate.tsx
+++ b/src/pages/StatisticsChart/mining/UncleRate.tsx
@@ -2,18 +2,19 @@ import { useTranslation } from 'react-i18next'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartCachedKeys } from '../../../constants/cache'
 import { useCurrentLanguage } from '../../../utils/i18n'
+import { ChartColorConfig } from '../../../constants/common'
 
-const max = (statisticUncleRates: State.StatisticUncleRate[]) => {
+const max = (statisticUncleRates: ChartItem.UncleRate[]) => {
   const array = statisticUncleRates.flatMap(data => Number(data.uncleRate) * 100)
   return Math.max(5, Math.ceil(Math.max(...array)))
 }
 
 const useOption = (
-  statisticUncleRates: State.StatisticUncleRate[],
-  chartColor: State.ChartColor,
+  statisticUncleRates: ChartItem.UncleRate[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -110,7 +111,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticUncleRates: State.StatisticUncleRate[]) =>
+const toCSV = (statisticUncleRates: ChartItem.UncleRate[]) =>
   statisticUncleRates ? statisticUncleRates.map(data => [data.createdAtUnixtimestamp, data.uncleRate]) : []
 
 export const UncleRateChart = ({ isThumbnail = false }: { isThumbnail?: boolean }) => {
diff --git a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
index 2481af0e2..2a86d93d2 100644
--- a/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
+++ b/src/pages/StatisticsChart/monetary/AnnualPercentageCompensation.tsx
@@ -3,11 +3,12 @@ import { useCurrentLanguage } from '../../../utils/i18n'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticAnnualPercentageCompensations: State.StatisticAnnualPercentageCompensation[],
-  chartColor: State.ChartColor,
+  statisticAnnualPercentageCompensations: ChartItem.AnnualPercentageCompensation[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -93,18 +94,7 @@ const useOption = (
   }
 }
 
-const fetchStatisticAnnualPercentageCompensations = async () => {
-  const { nominalApc } = await explorerService.api.fetchStatisticAnnualPercentageCompensation()
-  const statisticAnnualPercentageCompensations = nominalApc
-    .filter((_apc, index) => index % 3 === 0 || index === nominalApc.length - 1)
-    .map((apc, index) => ({
-      year: 0.25 * index,
-      apc,
-    }))
-  return statisticAnnualPercentageCompensations
-}
-
-const toCSV = (statisticAnnualPercentageCompensations: State.StatisticAnnualPercentageCompensation[]) =>
+const toCSV = (statisticAnnualPercentageCompensations: ChartItem.AnnualPercentageCompensation[]) =>
   statisticAnnualPercentageCompensations
     ? statisticAnnualPercentageCompensations.map(data => [data.year, (Number(data.apc) / 100).toFixed(4)])
     : []
@@ -116,7 +106,7 @@ export const AnnualPercentageCompensationChart = ({ isThumbnail = false }: { isT
       title={t('statistic.nominal_apc')}
       description={t('statistic.nominal_rpc_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticAnnualPercentageCompensations}
+      fetchData={explorerService.api.fetchStatisticAnnualPercentageCompensation}
       getEChartOption={useOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.APC}
diff --git a/src/pages/StatisticsChart/monetary/InflationRate.tsx b/src/pages/StatisticsChart/monetary/InflationRate.tsx
index 50542b0ea..8e60d1a4f 100644
--- a/src/pages/StatisticsChart/monetary/InflationRate.tsx
+++ b/src/pages/StatisticsChart/monetary/InflationRate.tsx
@@ -3,11 +3,12 @@ import { useCurrentLanguage } from '../../../utils/i18n'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG, assertSerialsDataIsString, assertIsArray, assertSerialsItem } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticInflationRates: State.StatisticInflationRate[],
-  chartColor: State.ChartColor,
+  statisticInflationRates: ChartItem.InflationRate[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -147,24 +148,7 @@ const useOption = (
   }
 }
 
-const fetchStatisticInflationRates = async () => {
-  const { nominalApc, nominalInflationRate, realInflationRate } =
-    await explorerService.api.fetchStatisticInflationRate()
-  const statisticInflationRates = []
-  for (let i = 0; i < nominalApc.length; i++) {
-    if (i % 6 === 0 || i === nominalApc.length - 1) {
-      statisticInflationRates.push({
-        year: i % 6 === 0 ? Math.floor(i / 6) * 0.5 : 50,
-        nominalApc: nominalApc[i],
-        nominalInflationRate: nominalInflationRate[i],
-        realInflationRate: realInflationRate[i],
-      })
-    }
-  }
-  return statisticInflationRates
-}
-
-const toCSV = (statisticInflationRates: State.StatisticInflationRate[]) =>
+const toCSV = (statisticInflationRates: ChartItem.InflationRate[]) =>
   statisticInflationRates
     ? statisticInflationRates.map(data => [
         data.year,
@@ -181,7 +165,7 @@ export const InflationRateChart = ({ isThumbnail = false }: { isThumbnail?: bool
       title={t('statistic.inflation_rate')}
       description={t('statistic.inflation_rate_description')}
       isThumbnail={isThumbnail}
-      fetchData={fetchStatisticInflationRates}
+      fetchData={explorerService.api.fetchStatisticInflationRate}
       getEChartOption={useOption}
       toCSV={toCSV}
       cacheKey={ChartCachedKeys.InflationRate}
diff --git a/src/pages/StatisticsChart/monetary/Liquidity.tsx b/src/pages/StatisticsChart/monetary/Liquidity.tsx
index a5de0a39b..c282efb05 100644
--- a/src/pages/StatisticsChart/monetary/Liquidity.tsx
+++ b/src/pages/StatisticsChart/monetary/Liquidity.tsx
@@ -11,11 +11,12 @@ import {
 } from '../../../utils/chart'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticLiquidity: State.StatisticLiquidity[],
-  chartColor: State.ChartColor,
+  statisticLiquidity: ChartItem.Liquidity[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -178,7 +179,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticLiquidity: State.StatisticLiquidity[]) =>
+const toCSV = (statisticLiquidity: ChartItem.Liquidity[]) =>
   statisticLiquidity
     ? statisticLiquidity.map(data => [
         data.createdAtUnixtimestamp,
diff --git a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
index b5e9f890c..2915579ee 100644
--- a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
+++ b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
@@ -9,7 +9,8 @@ import {
   assertSerialsItem,
 } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, currentLanguage: LanuageType) =>
   tooltipWidth(value, currentLanguage === 'en' ? 155 : 70)
@@ -35,8 +36,8 @@ const useTooltip = () => {
 }
 
 const useOption = (
-  statisticSecondaryIssuance: State.StatisticSecondaryIssuance[],
-  chartColor: State.ChartColor,
+  statisticSecondaryIssuance: ChartItem.SecondaryIssuance[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -171,7 +172,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticSecondaryIssuance: State.StatisticSecondaryIssuance[]) =>
+const toCSV = (statisticSecondaryIssuance: ChartItem.SecondaryIssuance[]) =>
   statisticSecondaryIssuance
     ? statisticSecondaryIssuance.map(data => [
         data.createdAtUnixtimestamp,
diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
index 15dde1706..16a6adb72 100644
--- a/src/pages/StatisticsChart/monetary/TotalSupply.tsx
+++ b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
@@ -12,7 +12,8 @@ import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, currentLanguage: LanuageType) =>
   tooltipWidth(value, currentLanguage === 'en' ? 125 : 80)
@@ -45,8 +46,8 @@ const useTooltip = () => {
 }
 
 const useOption = (
-  statisticTotalSupplies: State.StatisticTotalSupply[],
-  chartColor: State.ChartColor,
+  statisticTotalSupplies: ChartItem.TotalSupply[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -187,7 +188,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticTotalSupplies: State.StatisticTotalSupply[]) =>
+const toCSV = (statisticTotalSupplies: ChartItem.TotalSupply[]) =>
   statisticTotalSupplies
     ? statisticTotalSupplies.map(data => [
         data.createdAtUnixtimestamp,
diff --git a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
index 51d812a73..a423ee114 100644
--- a/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
+++ b/src/pages/StatisticsChart/nervosDao/CirculationRatio.tsx
@@ -4,11 +4,12 @@ import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SmartChartPage } from '../common'
 import { DATA_ZOOM_CONFIG, assertIsArray } from '../../../utils/chart'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const useOption = (
-  statisticCirculationRatios: State.StatisticCirculationRatio[],
-  chartColor: State.ChartColor,
+  statisticCirculationRatios: ChartItem.CirculationRatio[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -94,7 +95,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticCirculationRatios: State.StatisticCirculationRatio[]) =>
+const toCSV = (statisticCirculationRatios: ChartItem.CirculationRatio[]) =>
   statisticCirculationRatios
     ? statisticCirculationRatios.map(data => [data.createdAtUnixtimestamp, data.circulationRatio])
     : []
diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
index 3baf2c035..d129676fb 100644
--- a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
+++ b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
@@ -13,7 +13,8 @@ import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
 import { tooltipWidth, tooltipColor, SeriesItem, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, language: LanuageType) => tooltipWidth(value, language === 'en' ? 140 : 120)
 
@@ -39,8 +40,8 @@ const useTooltip = () => {
 }
 
 const useOption = (
-  statisticNewDaoDeposits: State.StatisticNewDaoDeposit[],
-  chartColor: State.ChartColor,
+  statisticNewDaoDeposits: ChartItem.NewDaoDeposit[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
   isThumbnail = false,
 ): echarts.EChartOption => {
@@ -177,7 +178,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticNewDaoDeposits: State.StatisticNewDaoDeposit[]) =>
+const toCSV = (statisticNewDaoDeposits: ChartItem.NewDaoDeposit[]) =>
   statisticNewDaoDeposits
     ? statisticNewDaoDeposits.map(data => [
         data.createdAtUnixtimestamp,
diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
index eb0cd5f07..5d15a3ec0 100644
--- a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
+++ b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
@@ -13,7 +13,8 @@ import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { isMainnet } from '../../../utils/chain'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { ChartCachedKeys } from '../../../constants/cache'
-import { explorerService } from '../../../services/ExplorerService'
+import { ChartItem, explorerService } from '../../../services/ExplorerService'
+import { ChartColorConfig } from '../../../constants/common'
 
 const widthSpan = (value: string, language: LanuageType) => tooltipWidth(value, language === 'en' ? 168 : 110)
 
@@ -38,8 +39,8 @@ const useTooltip = () => {
 }
 
 const useOption = (
-  statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[],
-  chartColor: State.ChartColor,
+  statisticTotalDaoDeposits: ChartItem.TotalDaoDeposit[],
+  chartColor: ChartColorConfig,
   isMobile: boolean,
 
   isThumbnail = false,
@@ -175,7 +176,7 @@ const useOption = (
   }
 }
 
-const toCSV = (statisticTotalDaoDeposits: State.StatisticTotalDaoDeposit[]) =>
+const toCSV = (statisticTotalDaoDeposits: ChartItem.TotalDaoDeposit[]) =>
   statisticTotalDaoDeposits
     ? statisticTotalDaoDeposits.map(data => [
         data.createdAtUnixtimestamp,
diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx
index 6476ac738..e40ed673d 100644
--- a/src/pages/Tokens/index.tsx
+++ b/src/pages/Tokens/index.tsx
@@ -26,8 +26,9 @@ import styles from './styles.module.scss'
 import { useIsMobile, usePaginationParamsInPage } from '../../utils/hook'
 import { explorerService } from '../../services/ExplorerService'
 import { QueryResult } from '../../components/QueryResult'
+import { UDT } from '../../models/UDT'
 
-const TokenItem = ({ token, isLast }: { token: State.UDT; isLast?: boolean }) => {
+const TokenItem = ({ token, isLast }: { token: UDT; isLast?: boolean }) => {
   const { displayName, fullName, uan } = token
   const { t } = useTranslation()
 
diff --git a/src/pages/Transaction/TransactionCell/index.tsx b/src/pages/Transaction/TransactionCell/index.tsx
index a85676598..735516ebc 100644
--- a/src/pages/Transaction/TransactionCell/index.tsx
+++ b/src/pages/Transaction/TransactionCell/index.tsx
@@ -42,6 +42,7 @@ import { useDeprecatedAddr, useIsMobile, useNewAddr } from '../../../utils/hook'
 import { useDASAccount } from '../../../contexts/providers/dasQuery'
 import styles from './styles.module.scss'
 import AddressText from '../../../components/AddressText'
+import { Cell } from '../../../models/Cell'
 
 export const Addr: FC<{ address: string; isCellBase: boolean }> = ({ address, isCellBase }) => {
   const alias = useDASAccount(address)
@@ -86,7 +87,7 @@ const TransactionCellIndexAddress = ({
   index,
   isAddrNew,
 }: {
-  cell: State.Cell
+  cell: Cell
   cellType: CellType
   index: number
   isAddrNew: boolean
@@ -139,7 +140,7 @@ const TransactionCellIndexAddress = ({
   )
 }
 
-const useParseNftInfo = (cell: State.Cell) => {
+const useParseNftInfo = (cell: Cell) => {
   const { t } = useTranslation()
   if (cell.cellType === 'nrc_721_token') {
     const nftInfo = cell.extraInfo
@@ -170,7 +171,7 @@ const useParseNftInfo = (cell: State.Cell) => {
   }
 }
 
-const TransactionCellDetail = ({ cell }: { cell: State.Cell }) => {
+const TransactionCellDetail = ({ cell }: { cell: Cell }) => {
   const { t } = useTranslation()
   let detailTitle = t('transaction.ckb_capacity')
   let detailIcon
@@ -253,7 +254,7 @@ const TransactionCellDetail = ({ cell }: { cell: State.Cell }) => {
   )
 }
 
-const TransactionCellInfo = ({ cell, children }: { cell: State.Cell; children: string | ReactNode }) => {
+const TransactionCellInfo = ({ cell, children }: { cell: Cell; children: string | ReactNode }) => {
   const [showModal, setShowModal] = useState(false)
   return (
     <TransactionCellInfoPanel>
@@ -275,7 +276,7 @@ const TransactionCellInfo = ({ cell, children }: { cell: State.Cell; children: s
   )
 }
 
-const TransactionCellCapacityAmount = ({ cell }: { cell: State.Cell }) => {
+const TransactionCellCapacityAmount = ({ cell }: { cell: Cell }) => {
   const { t } = useTranslation()
   if (cell.cellType === 'udt') {
     const udtInfo = cell.extraInfo
@@ -302,7 +303,7 @@ export default ({
   showReward,
   isAddrNew,
 }: {
-  cell: State.Cell
+  cell: Cell
   cellType: CellType
   index: number
   txHash?: string
diff --git a/src/pages/Transaction/TransactionCell/styled.tsx b/src/pages/Transaction/TransactionCell/styled.tsx
index d1e2aa071..4940b13f8 100644
--- a/src/pages/Transaction/TransactionCell/styled.tsx
+++ b/src/pages/Transaction/TransactionCell/styled.tsx
@@ -98,10 +98,9 @@ export const TransactionCellAddressPanel = styled.div`
   }
 `
 
-export const TransactionCellHashPanel = styled.div`
-  color: ${({ highLight = false, theme }: { highLight?: boolean; theme: State.Theme }) =>
-    highLight ? `${theme.primary}` : '#000000'};
-  text-align: ${({ highLight = false }: { highLight?: boolean }) => (highLight ? 'left' : 'center')};
+export const TransactionCellHashPanel = styled.div<{ highLight?: boolean }>`
+  color: ${({ highLight = false, theme }) => (highLight ? `${theme.primary}` : '#000000')};
+  text-align: ${({ highLight = false }) => (highLight ? 'left' : 'center')};
   flex: 1;
   min-width: 0;
   display: flex;
diff --git a/src/pages/Transaction/TransactionCellList/index.tsx b/src/pages/Transaction/TransactionCellList/index.tsx
index df6e0a4e5..943b1aac2 100644
--- a/src/pages/Transaction/TransactionCellList/index.tsx
+++ b/src/pages/Transaction/TransactionCellList/index.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as DeprecatedAddrOn } from '../../../assets/deprecated_a
 import { ReactComponent as DeprecatedAddrOff } from '../../../assets/deprecated_addr_off.svg'
 import { ReactComponent as Warning } from '../../../assets/warning.svg'
 import styles from './styles.module.scss'
+import { Cell } from '../../../models/Cell'
 
 const SCROLL_BOTTOM_OFFSET = 5
 const SCROLL_LOADING_TIME = 400
@@ -20,8 +21,8 @@ export default ({
   showReward,
   addrToggle: { isAddrNew, setIsAddrNew },
 }: {
-  inputs?: State.Cell[]
-  outputs?: State.Cell[]
+  inputs?: Cell[]
+  outputs?: Cell[]
   txHash?: string
   showReward?: boolean
   addrToggle: {
diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
index 8ee2185cd..4f3960ccf 100644
--- a/src/pages/Transaction/TransactionCellScript/index.tsx
+++ b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -28,6 +28,7 @@ import { HelpTip } from '../../../components/HelpTip'
 import { useSetToast } from '../../../components/Toast'
 import { CellBasicInfo } from '../../../utils/transformer'
 import { isAxiosError } from '../../../utils/error'
+import { Script } from '../../../models/Script'
 
 enum CellInfo {
   LOCK = 1,
@@ -42,9 +43,9 @@ interface CellData {
   data: string
 }
 
-type CellInfoValue = State.Script | CellData | CapacityUsage | null | undefined
+type CellInfoValue = Script | CellData | CapacityUsage | null | undefined
 
-function isScript(content: CellInfoValue): content is State.Script {
+function isScript(content: CellInfoValue): content is Script {
   return content != null && 'codeHash' in content
 }
 
diff --git a/src/pages/Transaction/TransactionCellScript/styled.tsx b/src/pages/Transaction/TransactionCellScript/styled.tsx
index 7aec2f317..495ccdc4a 100644
--- a/src/pages/Transaction/TransactionCellScript/styled.tsx
+++ b/src/pages/Transaction/TransactionCellScript/styled.tsx
@@ -9,12 +9,12 @@ export const TransactionDetailContainer = styled.div`
   }
 `
 
-export const TransactionDetailItem = styled.div`
+export const TransactionDetailItem = styled.div<{ selected?: boolean }>`
   cursor: pointer;
   position: relative;
   display: flex;
   padding-bottom: 22px;
-  color: ${(props: { selected?: boolean }) => (props.selected ? '#000000' : 'rgba(0, 0, 0, 0.6)')};
+  color: ${props => (props.selected ? '#000000' : 'rgba(0, 0, 0, 0.6)')};
   font-weight: 600;
   font-size: 16px;
   align-items: center;
@@ -28,10 +28,10 @@ export const TransactionDetailItem = styled.div`
     left: 2px;
     bottom: 0;
     content: '';
-    background: ${(props: { theme: State.Theme }) => `${props.theme.primary}`};
+    background: ${props => `${props.theme.primary}`};
     width: calc(100% - 4px);
     height: 5px;
-    display: ${(props: { theme: State.Theme; selected: boolean }) => (props.selected ? 'block' : 'none')};
+    display: ${props => (props.selected ? 'block' : 'none')};
   }
 `
 
@@ -180,7 +180,6 @@ export const TransactionDetailCopyButton = styled.div`
   cursor: pointer;
   width: 150px;
   height: 40px;
-  background: ${props => props.theme.default};
   border: 1px ${props => props.theme.primary} solid;
   border-radius: 6px;
   display: flex;
diff --git a/src/pages/Transaction/TransactionComp/TransactionComp.tsx b/src/pages/Transaction/TransactionComp/TransactionComp.tsx
index 85a578974..d36f8dd1c 100644
--- a/src/pages/Transaction/TransactionComp/TransactionComp.tsx
+++ b/src/pages/Transaction/TransactionComp/TransactionComp.tsx
@@ -1,7 +1,9 @@
 import TransactionCellList from '../TransactionCellList'
 import { useAddrFormatToggle } from '../../../utils/hook'
+import { Cell } from '../../../models/Cell'
+import { Transaction } from '../../../models/Transaction'
 
-const handleCellbaseInputs = (inputs: State.Cell[], outputs: State.Cell[]) => {
+const handleCellbaseInputs = (inputs: Cell[], outputs: Cell[]) => {
   if (inputs[0] && inputs[0].fromCellbase && outputs[0] && outputs[0].baseReward) {
     const resultInputs = inputs
     resultInputs[0] = {
@@ -16,7 +18,7 @@ const handleCellbaseInputs = (inputs: State.Cell[], outputs: State.Cell[]) => {
   return inputs
 }
 
-export const TransactionComp = ({ transaction }: { transaction: State.Transaction }) => {
+export const TransactionComp = ({ transaction }: { transaction: Transaction }) => {
   const { transactionHash, displayInputs, displayOutputs, blockNumber, isCellbase } = transaction
 
   const { isNew: isAddrNew, setIsNew: setIsAddrNew } = useAddrFormatToggle()
diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx
index 0eec5ecd6..485350c77 100644
--- a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx
+++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx
@@ -1,11 +1,12 @@
 import { Tooltip } from 'antd'
 import styles from './TransactionBadge.module.scss'
+import { Cell } from '../../../../models/Cell'
 
 type Props = {
-  cellType: State.CellType
+  cellType: Cell['cellType']
   capacity?: string
 }
-const cellTypeDisplayMap: Record<State.CellType, string> = {
+const cellTypeDisplayMap: Record<Cell['cellType'], string> = {
   normal: '',
   udt: '',
   nervos_dao_deposit: 'Nervos DAO Deposit',
@@ -19,6 +20,9 @@ const cellTypeDisplayMap: Record<State.CellType, string> = {
   m_nft_token: '',
   nrc_721_token: '',
   nrc_721_factory: '',
+  nft_transfer: '',
+  simple_transfer: '',
+  nft_mint: '',
 }
 
 export const TransactionBadge = ({ cellType, capacity }: Props) => {
diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx
index 6488c43fe..0a437f7d8 100644
--- a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx
+++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx
@@ -10,10 +10,10 @@ import { shannonToCkb } from '../../../../utils/util'
 import { Addr } from '../../TransactionCell'
 import { defaultTransactionLiteDetails } from '../../state'
 import { TransactionBadge } from './TransactionBadge'
-import { explorerService } from '../../../../services/ExplorerService'
+import { TransactionRecord, TransactionRecordTransfer, explorerService } from '../../../../services/ExplorerService'
 import { useIsMobile } from '../../../../utils/hook'
 
-const getTransferItemTag = (transfer: State.LiteTransfer) => {
+const getTransferItemTag = (transfer: TransactionRecordTransfer) => {
   const { cellType, udtInfo, mNftInfo } = transfer
   if (cellType === 'm_nft_token' || cellType === 'm_nft_class' || cellType === 'm_nft_issuer') {
     return `NFT-${mNftInfo?.className ?? 'Unknown'}`
@@ -44,7 +44,7 @@ export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase })
     const ckbTransactionDetails = await explorerService.api.fetchTransactionLiteDetailsByHash(txHash)
     return ckbTransactionDetails.data
   })
-  const transactionLiteDetails: State.TransactionLiteDetails[] = query.data ?? defaultTransactionLiteDetails
+  const transactionLiteDetails: TransactionRecord[] = query.data ?? defaultTransactionLiteDetails
   return (
     <>
       {transactionLiteDetails &&
@@ -64,7 +64,7 @@ export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase })
   )
 }
 
-export const DesktopTransferItems = (props: { details: State.TransactionLiteDetails }) => {
+export const DesktopTransferItems = (props: { details: TransactionRecord }) => {
   const { details } = props
   const { transfers } = details
   return (
@@ -84,7 +84,7 @@ export const DesktopTransferItems = (props: { details: State.TransactionLiteDeta
   )
 }
 
-export const MobileTransferItems = (props: { details: State.TransactionLiteDetails }) => {
+export const MobileTransferItems = (props: { details: TransactionRecord }) => {
   const { details } = props
   const { transfers } = details
   return (
@@ -110,7 +110,7 @@ export const MobileTransferItems = (props: { details: State.TransactionLiteDetai
   )
 }
 
-const TransferAmount: FC<{ transfer: State.LiteTransfer }> = ({ transfer }) => {
+const TransferAmount: FC<{ transfer: TransactionRecordTransfer }> = ({ transfer }) => {
   const isUdt = transfer.cellType === 'udt'
   const isNft = transfer.cellType === 'm_nft_token'
 
diff --git a/src/pages/Transaction/TransactionComp/TransactionOverview.tsx b/src/pages/Transaction/TransactionComp/TransactionOverview.tsx
index 67f4a5821..33763d582 100644
--- a/src/pages/Transaction/TransactionComp/TransactionOverview.tsx
+++ b/src/pages/Transaction/TransactionComp/TransactionOverview.tsx
@@ -26,6 +26,7 @@ import {
   TransactionInfoItemPanel,
 } from './styled'
 import { useLatestBlockNumber } from '../../../services/ExplorerService'
+import { Transaction } from '../../../models/Transaction'
 
 const showTxStatus = (txStatus: string) => txStatus?.replace(/^\S/, s => s.toUpperCase()) ?? '-'
 const TransactionBlockHeight = ({ blockNumber, txStatus }: { blockNumber: number; txStatus: string }) => (
@@ -104,7 +105,7 @@ const TransactionInfoItemWrapper = ({
   </TransactionInfoContentPanel>
 )
 
-export const TransactionOverview: FC<{ transaction: State.Transaction; layout: LayoutLiteProfessional }> = ({
+export const TransactionOverview: FC<{ transaction: Transaction; layout: LayoutLiteProfessional }> = ({
   transaction,
   layout,
 }) => {
@@ -227,7 +228,7 @@ export const TransactionOverview: FC<{ transaction: State.Transaction; layout: L
     title: t('transaction.cycles'),
     content: liteTxCyclesDataContent,
   }
-  const overviewItems: Array<OverviewItemData> = []
+  const overviewItems: OverviewItemData[] = []
   if (txStatus === 'committed') {
     overviewItems.push(blockHeightData, timestampData)
     if (confirmation >= 0) {
diff --git a/src/pages/Transaction/TransactionReward/index.tsx b/src/pages/Transaction/TransactionReward/index.tsx
index aa4c77e18..d05cce57b 100644
--- a/src/pages/Transaction/TransactionReward/index.tsx
+++ b/src/pages/Transaction/TransactionReward/index.tsx
@@ -4,8 +4,9 @@ import { localeNumberString } from '../../../utils/number'
 import DecimalCapacity from '../../../components/DecimalCapacity'
 import { RewardPenal, RewardItemPenal } from './styled'
 import { useIsMobile } from '../../../utils/hook'
+import { Cell } from '../../../models/Cell'
 
-const useRewards = (cell: State.Cell, isMobile: boolean) => {
+const useRewards = (cell: Cell, isMobile: boolean) => {
   const { t } = useTranslation()
   return [
     {
@@ -27,7 +28,7 @@ const useRewards = (cell: State.Cell, isMobile: boolean) => {
   ]
 }
 
-const TransactionReward = ({ cell, showReward }: { cell: State.Cell; showReward?: boolean }) => {
+const TransactionReward = ({ cell, showReward }: { cell: Cell; showReward?: boolean }) => {
   const isMobile = useIsMobile()
   const { t } = useTranslation()
   // [0, 11] block doesn't show block reward and only cellbase show block reward
diff --git a/src/pages/Transaction/state.ts b/src/pages/Transaction/state.ts
index b00f3d128..9e8857770 100644
--- a/src/pages/Transaction/state.ts
+++ b/src/pages/Transaction/state.ts
@@ -1,4 +1,7 @@
-export const defaultTransactionInfo: State.Transaction = {
+import { Transaction } from '../../models/Transaction'
+import { TransactionRecord } from '../../services/ExplorerService'
+
+export const defaultTransactionInfo: Transaction = {
   transactionHash: '',
   blockNumber: 0,
   blockTimestamp: 0,
@@ -24,7 +27,7 @@ export const defaultTransactionInfo: State.Transaction = {
   maxCycles: null,
 }
 
-export const defaultTransactionLiteDetails: State.TransactionLiteDetails[] = [
+export const defaultTransactionLiteDetails: TransactionRecord[] = [
   {
     address: '',
     transfers: [],
diff --git a/src/pages/TransactionList/index.tsx b/src/pages/TransactionList/index.tsx
index 520be2039..9da30ab34 100644
--- a/src/pages/TransactionList/index.tsx
+++ b/src/pages/TransactionList/index.tsx
@@ -20,6 +20,7 @@ import { RouteState } from '../../routes/state'
 import { assert } from '../../utils/error'
 import { ReactComponent as SortIcon } from '../../assets/sort_icon.svg'
 import { TableTitleRowItem } from '../../components/Table/styled'
+import { Transaction } from '../../models/Transaction'
 
 type TxStatus = 'confirmed' | 'pending'
 
@@ -31,12 +32,12 @@ interface SortItemCardData<T> extends ItemCardData<T> {
 }
 
 const TransactionCardGroup: FC<{
-  transactions: State.Transaction[]
+  transactions: Transaction[]
   type: TxStatus
   sortButton: (sortRule?: ConfirmedSortByType | PendingSortByType) => ReactNode
 }> = ({ transactions, type, sortButton }) => {
   const { t } = useTranslation()
-  const itemHash: SortItemCardData<State.Transaction> = {
+  const itemHash: SortItemCardData<Transaction> = {
     title: t('transaction.transaction_hash'),
     render: transaction => (
       <AddressText
@@ -51,7 +52,7 @@ const TransactionCardGroup: FC<{
       </AddressText>
     ),
   }
-  const itemCapacity: SortItemCardData<State.Transaction> = {
+  const itemCapacity: SortItemCardData<Transaction> = {
     title: t('transaction.capacity'),
     sortRule: 'capacity',
     render: transaction => (
@@ -59,7 +60,7 @@ const TransactionCardGroup: FC<{
     ),
   }
 
-  const confirmedItems: SortItemCardData<State.Transaction>[] = [
+  const confirmedItems: SortItemCardData<Transaction>[] = [
     itemHash,
     {
       title: t('transaction.height'),
@@ -77,7 +78,7 @@ const TransactionCardGroup: FC<{
     },
   ]
 
-  const pendingItems: SortItemCardData<State.Transaction>[] = [
+  const pendingItems: SortItemCardData<Transaction>[] = [
     itemHash,
     itemCapacity,
     {
@@ -102,7 +103,7 @@ const TransactionCardGroup: FC<{
       <div className={styles.transactionCardHeader}>
         {items
           .filter(data => data.sortRule)
-          .map((data: SortItemCardData<State.Transaction>) => (
+          .map((data: SortItemCardData<Transaction>) => (
             <TableTitleRowItem width="fit-content" key={data.title}>
               <div>{data.title}</div>
               {sortButton(data.sortRule)}
@@ -120,13 +121,13 @@ const TransactionCardGroup: FC<{
 }
 
 const TransactionTable: FC<{
-  transactions: State.Transaction[]
+  transactions: Transaction[]
   type: TxStatus
   sortButton: (sortRule: ConfirmedSortByType | PendingSortByType) => ReactNode
 }> = ({ transactions, type, sortButton }) => {
   const [t] = useTranslation()
 
-  const colHash: Column<State.Transaction> = {
+  const colHash: Column<Transaction> = {
     key: 'hash',
     title: t('transaction.transaction_hash'),
     className: styles.colHash,
@@ -135,7 +136,7 @@ const TransactionTable: FC<{
     render: transaction => <AddressText disableTooltip>{transaction.transactionHash}</AddressText>,
   }
 
-  const confirmedColumns: Column<State.Transaction>[] = [
+  const confirmedColumns: Column<Transaction>[] = [
     colHash,
     {
       key: 'height',
@@ -170,7 +171,7 @@ const TransactionTable: FC<{
     },
   ]
 
-  const pendingColumns: Column<State.Transaction>[] = [
+  const pendingColumns: Column<Transaction>[] = [
     colHash,
     {
       key: 'capacity',
diff --git a/src/routes/state.ts b/src/routes/state.ts
index 2fcd6b12c..1459e0daa 100644
--- a/src/routes/state.ts
+++ b/src/routes/state.ts
@@ -1,8 +1,11 @@
+import { Block } from '../models/Block'
+import { Transaction } from '../models/Transaction'
+
 export interface RouteState$BlockListPage {
   type: 'BlockListPage'
   createTime: number
   blocksDataWithFirstPage: {
-    blocks: State.Block[]
+    blocks: Block[]
     total: number
   }
 }
@@ -11,7 +14,7 @@ export interface RouteState$TransactionListPage {
   type: 'TransactionListPage'
   createTime: number
   transactionsDataWithFirstPage: {
-    transactions: State.Transaction[]
+    transactions: Transaction[]
     total: number
   }
 }
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
index 8687340a7..2a278e843 100644
--- a/src/services/ExplorerService/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -5,8 +5,14 @@ import { ReactNode } from 'react'
 import { pick } from '../../utils/object'
 import { toCamelcase } from '../../utils/util'
 import { requesterV1, requesterV2 } from './requester'
-import { Response } from './types'
+import { ChartItem, NervosDaoDepositor, Response, SupportedExportTransactionType, TransactionRecord } from './types'
 import { assert } from '../../utils/error'
+import { Cell } from '../../models/Cell'
+import { Script } from '../../models/Script'
+import { Block } from '../../models/Block'
+import { Transaction } from '../../models/Transaction'
+import { Address } from '../../models/Address'
+import { UDT } from '../../models/UDT'
 
 async function v1Get<T>(...args: Parameters<typeof requesterV1.get>) {
   return requesterV1.get(...args).then(res => toCamelcase<Response.Response<T>>(res.data))
@@ -45,7 +51,7 @@ export enum SearchResultType {
 
 export const apiFetcher = {
   fetchBlocks: (page: number, size: number, sort?: string) =>
-    v1Get<Response.Wrapper<State.Block>[]>('blocks', {
+    v1Get<Response.Wrapper<Block>[]>('blocks', {
       params: {
         page,
         page_size: size,
@@ -56,15 +62,15 @@ export const apiFetcher = {
   fetchLatestBlocks: (size: number) => apiFetcher.fetchBlocks(1, size),
 
   fetchAddressInfo: (address: string) =>
-    v1GetWrapped<State.Address>(`addresses/${address}`).then(
-      (wrapper): State.Address => ({
+    v1GetWrapped<Address>(`addresses/${address}`).then(
+      (wrapper): Address => ({
         ...wrapper.attributes,
         type: wrapper.type === 'lock_hash' ? 'LockHash' : 'Address',
       }),
     ),
 
   fetchTransactionsByAddress: (address: string, page: number, size: number, sort?: string, txTypeFilter?: string) =>
-    v1GetUnwrappedPagedList<State.Transaction>(`address_transactions/${address}`, {
+    v1GetUnwrappedPagedList<Transaction>(`address_transactions/${address}`, {
       params: {
         page,
         page_size: size,
@@ -75,15 +81,15 @@ export const apiFetcher = {
 
   fetchTransactionRaw: (hash: string) => requesterV2.get<unknown>(`transactions/${hash}/raw`).then(res => res.data),
 
-  fetchTransactionByHash: (hash: string) => v1GetUnwrapped<State.Transaction>(`transactions/${hash}`),
+  fetchTransactionByHash: (hash: string) => v1GetUnwrapped<Transaction>(`transactions/${hash}`),
 
   fetchTransactionLiteDetailsByHash: (hash: string) =>
     requesterV2
       .get(`ckb_transactions/${hash}/details`)
-      .then((res: AxiosResponse) => toCamelcase<Response.Response<State.TransactionLiteDetails[]>>(res.data)),
+      .then((res: AxiosResponse) => toCamelcase<Response.Response<TransactionRecord[]>>(res.data)),
 
   fetchTransactions: (page: number, size: number, sort?: string) =>
-    v1GetUnwrappedPagedList<State.Transaction>('transactions', {
+    v1GetUnwrappedPagedList<Transaction>('transactions', {
       params: {
         page,
         page_size: size,
@@ -102,7 +108,7 @@ export const apiFetcher = {
           sort,
         },
       })
-      .then(res => toCamelcase<Response.Response<State.Transaction[]>>(res.data))
+      .then(res => toCamelcase<Response.Response<Transaction[]>>(res.data))
       .then(res => {
         assert(res.meta, 'Unexpected paged list response')
         return {
@@ -125,7 +131,7 @@ export const apiFetcher = {
       filter: string | null
     }>,
   ) =>
-    v1GetUnwrappedPagedList<State.Transaction>(`/block_transactions/${blockHash}`, {
+    v1GetUnwrappedPagedList<Transaction>(`/block_transactions/${blockHash}`, {
       params: {
         page,
         page_size,
@@ -134,10 +140,10 @@ export const apiFetcher = {
       },
     }),
 
-  fetchBlock: (blockHeightOrHash: string) => v1GetUnwrapped<State.Block>(`blocks/${blockHeightOrHash}`),
+  fetchBlock: (blockHeightOrHash: string) => v1GetUnwrapped<Block>(`blocks/${blockHeightOrHash}`),
 
   fetchScript: (scriptType: 'lock_scripts' | 'type_scripts', id: string) =>
-    v1GetNullableWrapped<State.Script>(`/cell_output_${scriptType}/${id}`),
+    v1GetNullableWrapped<Script>(`/cell_output_${scriptType}/${id}`),
 
   fetchCellData: (id: string) =>
     // TODO: When will it return an empty result?
@@ -145,10 +151,10 @@ export const apiFetcher = {
 
   fetchSearchResult: (param: string) =>
     v1Get<
-      | Response.Wrapper<State.Block, SearchResultType.Block>
-      | Response.Wrapper<State.Transaction, SearchResultType.Transaction>
-      | Response.Wrapper<State.Address, SearchResultType.Address>
-      | Response.Wrapper<State.Address, SearchResultType.LockHash>
+      | Response.Wrapper<Block, SearchResultType.Block>
+      | Response.Wrapper<Transaction, SearchResultType.Transaction>
+      | Response.Wrapper<Address, SearchResultType.Address>
+      | Response.Wrapper<Address, SearchResultType.LockHash>
       | Response.Wrapper<unknown, SearchResultType.UDT>
     >('suggest_queries', {
       params: {
@@ -156,10 +162,25 @@ export const apiFetcher = {
       },
     }),
 
-  fetchStatistics: () => v1GetUnwrapped<State.Statistics>(`statistics`),
+  fetchStatistics: () =>
+    v1GetUnwrapped<{
+      tipBlockNumber: string
+      averageBlockTime: string
+      currentEpochDifficulty: string
+      hashRate: string
+      epochInfo: {
+        epochNumber: string
+        epochLength: string
+        index: string
+      }
+      estimatedEpochTime: string
+      transactionsLast24Hrs: string
+      transactionsCountPerMinute: string
+      reorgStartedAt: string | null
+    }>(`statistics`),
 
   fetchTipBlockNumber: () =>
-    v1GetUnwrapped<Pick<State.Statistics, 'tipBlockNumber'>>('statistics/tip_block_number').then(
+    v1GetUnwrapped<Pick<APIReturn<'fetchStatistics'>, 'tipBlockNumber'>>('statistics/tip_block_number').then(
       statistics => statistics.tipBlockNumber,
     ),
 
@@ -182,11 +203,26 @@ export const apiFetcher = {
 
   fetchNodeVersion: () => v1GetUnwrapped<{ version: string }>('/nets/version'),
 
-  fetchNervosDao: () => v1GetUnwrapped<State.NervosDao>(`contracts/nervos_dao`),
+  fetchNervosDao: () =>
+    v1GetUnwrapped<{
+      totalDeposit: string
+      depositorsCount: string
+      depositChanges: string
+      unclaimedCompensationChanges: string
+      claimedCompensationChanges: string
+      depositorChanges: string
+      unclaimedCompensation: string
+      claimedCompensation: string
+      averageDepositTime: string
+      miningReward: string
+      depositCompensation: string
+      treasuryAmount: string
+      estimatedApc: string
+    }>(`contracts/nervos_dao`),
 
   // Unused currently
   fetchNervosDaoTransactions: (page: number, size: number) =>
-    v1Get<Response.Wrapper<State.Transaction>[]>(`contract_transactions/nervos_dao`, {
+    v1Get<Response.Wrapper<Transaction>[]>(`contract_transactions/nervos_dao`, {
       params: {
         page,
         page_size: size,
@@ -194,12 +230,11 @@ export const apiFetcher = {
     }),
 
   // Unused currently
-  fetchNervosDaoTransactionsByHash: (hash: string) =>
-    v1GetWrapped<State.Transaction>(`dao_contract_transactions/${hash}`),
+  fetchNervosDaoTransactionsByHash: (hash: string) => v1GetWrapped<Transaction>(`dao_contract_transactions/${hash}`),
 
   // Unused currently
   fetchNervosDaoTransactionsByAddress: (address: string, page: number, size: number) =>
-    v1Get<Response.Wrapper<State.Transaction>[]>(`address_dao_transactions/${address}`, {
+    v1Get<Response.Wrapper<Transaction>[]>(`address_dao_transactions/${address}`, {
       params: {
         page,
         page_size: size,
@@ -207,7 +242,7 @@ export const apiFetcher = {
     }),
 
   fetchNervosDaoTransactionsByFilter: ({ page, size, filter }: { page: number; size: number; filter?: string }) =>
-    v1GetUnwrappedPagedList<State.Transaction>(`contract_transactions/nervos_dao`, {
+    v1GetUnwrappedPagedList<Transaction>(`contract_transactions/nervos_dao`, {
       params: {
         page,
         page_size: size,
@@ -216,35 +251,37 @@ export const apiFetcher = {
       },
     }),
 
-  fetchNervosDaoDepositors: () => v1GetUnwrappedList<State.NervosDaoDepositor>(`/dao_depositors`),
+  fetchNervosDaoDepositors: () => v1GetUnwrappedList<NervosDaoDepositor>(`/dao_depositors`),
 
   fetchStatisticTransactionCount: () =>
-    v1GetUnwrappedList<State.StatisticTransactionCount>(`/daily_statistics/transactions_count`).then(items =>
+    v1GetUnwrappedList<ChartItem.TransactionCount>(`/daily_statistics/transactions_count`).then(items =>
       // filter latest exceptional data out
       items.filter((item, idx) => idx < items.length - 2 || item.transactionsCount !== '0'),
     ),
 
   fetchStatisticAddressCount: () =>
-    v1GetUnwrappedList<State.StatisticAddressCount>(`/daily_statistics/addresses_count`).then(items =>
+    v1GetUnwrappedList<ChartItem.AddressCount>(`/daily_statistics/addresses_count`).then(items =>
       // filter latest exceptional data out
       items.filter((item, idx) => idx < items.length - 2 || item.addressesCount !== '0'),
     ),
 
   fetchStatisticTotalDaoDeposit: () =>
-    v1GetUnwrappedList<State.StatisticTotalDaoDeposit>('/daily_statistics/total_depositors_count-total_dao_deposit'),
+    v1GetUnwrappedList<ChartItem.TotalDaoDeposit>('/daily_statistics/total_depositors_count-total_dao_deposit'),
 
   fetchStatisticNewDaoDeposit: () =>
-    v1GetUnwrappedList<State.StatisticNewDaoDeposit>('/daily_statistics/daily_dao_deposit-daily_dao_depositors_count'),
+    v1GetUnwrappedList<ChartItem.NewDaoDeposit>('/daily_statistics/daily_dao_deposit-daily_dao_depositors_count'),
 
   // Unused currently
   fetchStatisticNewDaoWithdraw: () =>
-    v1GetUnwrappedList<State.StatisticNewDaoWithdraw>('/daily_statistics/daily_dao_withdraw'),
+    v1GetUnwrappedList<{ dailyDaoWithdraw: string; createdAtUnixtimestamp: string }>(
+      '/daily_statistics/daily_dao_withdraw',
+    ),
 
   fetchStatisticCirculationRatio: () =>
-    v1GetUnwrappedList<State.StatisticCirculationRatio>('/daily_statistics/circulation_ratio'),
+    v1GetUnwrappedList<ChartItem.CirculationRatio>('/daily_statistics/circulation_ratio'),
 
   fetchStatisticDifficultyHashRate: () =>
-    v1GetUnwrappedList<State.StatisticDifficultyHashRate>(`/epoch_statistics/difficulty-uncle_rate-hash_rate`).then(
+    v1GetUnwrappedList<ChartItem.DifficultyHashRate>(`/epoch_statistics/difficulty-uncle_rate-hash_rate`).then(
       items => {
         return (
           items
@@ -261,13 +298,13 @@ export const apiFetcher = {
     ),
 
   fetchStatisticDifficulty: () =>
-    v1GetUnwrappedList<State.StatisticDifficulty>(`/daily_statistics/avg_difficulty`).then(items =>
+    v1GetUnwrappedList<ChartItem.Difficulty>(`/daily_statistics/avg_difficulty`).then(items =>
       // filter latest exceptional data out
       items.filter((item, idx) => idx < items.length - 2 || item.avgDifficulty !== '0.0'),
     ),
 
   fetchStatisticHashRate: () =>
-    v1GetUnwrappedList<State.StatisticHashRate>(`/daily_statistics/avg_hash_rate`).then(items => {
+    v1GetUnwrappedList<ChartItem.HashRate>(`/daily_statistics/avg_hash_rate`).then(items => {
       return (
         items
           // filter latest exceptional data out
@@ -280,7 +317,7 @@ export const apiFetcher = {
     }),
 
   fetchStatisticUncleRate: () =>
-    v1GetUnwrappedList<State.StatisticUncleRate>(`/daily_statistics/uncle_rate`).then(items => {
+    v1GetUnwrappedList<ChartItem.UncleRate>(`/daily_statistics/uncle_rate`).then(items => {
       return (
         items
           // filter latest exceptional data out
@@ -293,11 +330,22 @@ export const apiFetcher = {
     }),
 
   fetchStatisticMinerAddressDistribution: () =>
-    v1GetUnwrapped<State.StatisticMinerAddressDistribution>(`/distribution_data/miner_address_distribution`),
+    v1GetUnwrapped<{ minerAddressDistribution: Record<string, string> }>(
+      `/distribution_data/miner_address_distribution`,
+    ).then(({ minerAddressDistribution }) => {
+      const blockSum = Object.values(minerAddressDistribution).reduce((sum, val) => sum + Number(val), 0)
+      const statisticMinerAddresses: ChartItem.MinerAddress[] = Object.entries(minerAddressDistribution).map(
+        ([key, val]) => ({
+          address: key,
+          radio: (Number(val) / blockSum).toFixed(3),
+        }),
+      )
+      return statisticMinerAddresses
+    }),
 
   fetchStatisticMinerVersionDistribution: () =>
     requesterV2(`/blocks/ckb_node_versions`).then((res: AxiosResponse) =>
-      toCamelcase<{ data: Array<{ version: string; blocksCount: number }> }>(res.data),
+      toCamelcase<{ data: { version: string; blocksCount: number }[] }>(res.data),
     ),
 
   fetchStatisticTransactionFees: () =>
@@ -306,7 +354,7 @@ export const apiFetcher = {
       .then(res => toCamelcase<FeeRateTracker.TransactionFeesStatistic>(res.data)),
 
   fetchStatisticCellCount: () =>
-    v1GetUnwrappedList<Omit<State.StatisticCellCount, 'allCellsCount'>>(
+    v1GetUnwrappedList<Omit<ChartItem.CellCount, 'allCellsCount'>>(
       `/daily_statistics/live_cells_count-dead_cells_count`,
     ).then(items => {
       return items.map(item => ({
@@ -316,52 +364,115 @@ export const apiFetcher = {
     }),
 
   fetchStatisticDifficultyUncleRateEpoch: () =>
-    v1GetUnwrappedList<State.StatisticDifficultyUncleRateEpoch>(`/epoch_statistics/epoch_time-epoch_length`).then(
+    v1GetUnwrappedList<ChartItem.DifficultyUncleRateEpoch>(`/epoch_statistics/epoch_time-epoch_length`).then(
       // Data may enter the cache, so it is purify to reduce volume.
       items => items.map(item => pick(item, ['epochNumber', 'epochTime', 'epochLength'])),
     ),
 
   fetchStatisticAddressBalanceRank: () =>
-    v1GetUnwrapped<State.StatisticAddressBalanceRanking>(`/statistics/address_balance_ranking`).then(
-      res => res.addressBalanceRanking,
-    ),
+    v1GetUnwrapped<{ addressBalanceRanking: ChartItem.AddressBalanceRank[] }>(
+      `/statistics/address_balance_ranking`,
+    ).then(res => res.addressBalanceRanking),
 
   fetchStatisticBalanceDistribution: () =>
-    v1GetUnwrapped<State.StatisticAddressBalanceDistribution>(`/distribution_data/address_balance_distribution`),
+    v1GetUnwrapped<{ addressBalanceDistribution: string[][] }>(`/distribution_data/address_balance_distribution`).then(
+      ({ addressBalanceDistribution }) => {
+        const balanceDistributions = addressBalanceDistribution.map(distribution => {
+          const [balance, addresses, sumAddresses] = distribution
+          return {
+            balance,
+            addresses,
+            sumAddresses,
+          }
+        })
+        return balanceDistributions
+      },
+    ),
 
-  fetchStatisticTxFeeHistory: () => v1GetUnwrappedList<State.StatisticTransactionFee>(`/daily_statistics/total_tx_fee`),
+  fetchStatisticTxFeeHistory: () => v1GetUnwrappedList<ChartItem.TransactionFee>(`/daily_statistics/total_tx_fee`),
 
   fetchStatisticBlockTimeDistribution: () =>
-    v1GetUnwrapped<State.StatisticBlockTimeDistributions>(`/distribution_data/block_time_distribution`),
+    v1GetUnwrapped<{ blockTimeDistribution: string[][] }>(`/distribution_data/block_time_distribution`).then(
+      ({ blockTimeDistribution }) => {
+        const sumBlocks = blockTimeDistribution
+          .flatMap(data => Number(data[1]))
+          .reduce((previous, current) => previous + current)
+        const statisticBlockTimeDistributions = [
+          {
+            time: '0',
+            ratio: '0',
+          },
+        ].concat(
+          blockTimeDistribution.map(data => {
+            const [time, blocks] = data
+            return {
+              time,
+              ratio: (Number(blocks) / sumBlocks).toFixed(5),
+            }
+          }),
+        )
+        return statisticBlockTimeDistributions
+      },
+    ),
 
   fetchStatisticAverageBlockTimes: () =>
-    v1GetUnwrapped<State.StatisticAverageBlockTimes>(`/distribution_data/average_block_time`).then(
+    v1GetUnwrapped<{ averageBlockTime: ChartItem.AverageBlockTime[] }>(`/distribution_data/average_block_time`).then(
       res => res.averageBlockTime,
     ),
 
   // Unused currently
   fetchStatisticOccupiedCapacity: () =>
-    v1Get<Response.Wrapper<State.StatisticOccupiedCapacity>[]>(`/daily_statistics/occupied_capacity`),
+    v1Get<Response.Wrapper<{ occupiedCapacity: string; createdAtUnixtimestamp: string }>[]>(
+      `/daily_statistics/occupied_capacity`,
+    ),
 
   fetchStatisticEpochTimeDistribution: () =>
-    v1GetUnwrapped<State.StatisticEpochTimeDistributions>(`/distribution_data/epoch_time_distribution`),
+    v1GetUnwrapped<{ epochTimeDistribution: string[][] }>(`/distribution_data/epoch_time_distribution`).then(
+      ({ epochTimeDistribution }) => {
+        const statisticEpochTimeDistributions: ChartItem.EpochTimeDistribution[] = epochTimeDistribution.map(data => {
+          const [time, epoch] = data
+          return {
+            time,
+            epoch,
+          }
+        })
+        return statisticEpochTimeDistributions
+      },
+    ),
 
   // Unused currently
   fetchStatisticNewNodeCount: () =>
-    v1Get<Response.Wrapper<State.StatisticNewNodeCount>[]>(`/daily_statistics/nodes_count`),
+    v1Get<Response.Wrapper<{ nodesCount: string; createdAtUnixtimestamp: string }>[]>(`/daily_statistics/nodes_count`),
 
   // Unused currently
   fetchStatisticNodeDistribution: () =>
-    v1GetWrapped<State.StatisticNodeDistributions>(`/distribution_data/nodes_distribution`),
+    v1GetWrapped<{
+      nodesDistribution: {
+        city: string
+        count: number
+        postal: string
+        country: string
+        latitude: string
+        longitude: string
+      }[]
+    }>(`/distribution_data/nodes_distribution`),
 
   fetchStatisticTotalSupply: () =>
-    v1GetUnwrappedList<State.StatisticTotalSupply>(`/daily_statistics/circulating_supply-burnt-locked_capacity`),
+    v1GetUnwrappedList<ChartItem.TotalSupply>(`/daily_statistics/circulating_supply-burnt-locked_capacity`),
 
   fetchStatisticAnnualPercentageCompensation: () =>
-    v1GetUnwrapped<State.StatisticAnnualPercentageCompensations>(`/monetary_data/nominal_apc`),
+    v1GetUnwrapped<{ nominalApc: string[] }>(`/monetary_data/nominal_apc`).then(({ nominalApc }) => {
+      const statisticAnnualPercentageCompensations = nominalApc
+        .filter((_apc, index) => index % 3 === 0 || index === nominalApc.length - 1)
+        .map((apc, index) => ({
+          year: 0.25 * index,
+          apc,
+        }))
+      return statisticAnnualPercentageCompensations
+    }),
 
   fetchStatisticSecondaryIssuance: () =>
-    v1GetUnwrappedList<State.StatisticSecondaryIssuance>(
+    v1GetUnwrappedList<ChartItem.SecondaryIssuance>(
       `/daily_statistics/treasury_amount-mining_reward-deposit_compensation`,
     ).then(items => {
       return items.map(item => {
@@ -380,21 +491,34 @@ export const apiFetcher = {
     }),
 
   fetchStatisticInflationRate: () =>
-    v1GetUnwrapped<State.StatisticInflationRates>(
+    v1GetUnwrapped<{ nominalApc: string[]; nominalInflationRate: string[]; realInflationRate: string[] }>(
       `/monetary_data/nominal_apc50-nominal_inflation_rate-real_inflation_rate`,
-    ),
+    ).then(({ nominalApc, nominalInflationRate, realInflationRate }) => {
+      const statisticInflationRates = []
+      for (let i = 0; i < nominalApc.length; i++) {
+        if (i % 6 === 0 || i === nominalApc.length - 1) {
+          statisticInflationRates.push({
+            year: i % 6 === 0 ? Math.floor(i / 6) * 0.5 : 50,
+            nominalApc: nominalApc[i],
+            nominalInflationRate: nominalInflationRate[i],
+            realInflationRate: realInflationRate[i],
+          })
+        }
+      }
+      return statisticInflationRates
+    }),
 
   fetchStatisticLiquidity: () =>
-    v1GetUnwrappedList<State.StatisticLiquidity>(`/daily_statistics/circulating_supply-liquidity`).then(items => {
+    v1GetUnwrappedList<ChartItem.Liquidity>(`/daily_statistics/circulating_supply-liquidity`).then(items => {
       return items.map(item => ({
         ...item,
         daoDeposit: new BigNumber(item.circulatingSupply).minus(new BigNumber(item.liquidity)).toFixed(2),
       }))
     }),
 
-  fetchFlushChartCache: () => v1GetUnwrapped<State.StatisticCacheInfo>(`statistics/flush_cache_info`),
+  fetchFlushChartCache: () => v1GetUnwrapped<{ flushCacheInfo: string[] }>(`statistics/flush_cache_info`),
 
-  fetchSimpleUDT: (typeHash: string) => v1GetUnwrapped<State.UDT>(`/udts/${typeHash}`),
+  fetchSimpleUDT: (typeHash: string) => v1GetUnwrapped<UDT>(`/udts/${typeHash}`),
 
   fetchSimpleUDTTransactions: ({
     typeHash,
@@ -409,7 +533,7 @@ export const apiFetcher = {
     filter?: string | null
     type?: string | null
   }) =>
-    v1GetUnwrappedPagedList<State.Transaction>(`/udt_transactions/${typeHash}`, {
+    v1GetUnwrappedPagedList<Transaction>(`/udt_transactions/${typeHash}`, {
       params: {
         page,
         page_size: size,
@@ -420,7 +544,7 @@ export const apiFetcher = {
     }),
 
   fetchTokens: (page: number, size: number, sort?: string) =>
-    v1GetUnwrappedPagedList<State.UDT>(`/udts`, {
+    v1GetUnwrappedPagedList<UDT>(`/udts`, {
       params: {
         page,
         page_size: size,
@@ -434,7 +558,7 @@ export const apiFetcher = {
     date,
     block,
   }: {
-    type: State.TransactionCsvExportType
+    type: SupportedExportTransactionType
     id?: string
     date?: Record<'start' | 'end', Dayjs | undefined>
     block?: Record<'from' | 'to', number>
@@ -458,7 +582,7 @@ export const apiFetcher = {
   fetchNFTCollections: (page: string, sort: string, type?: string) =>
     requesterV2
       .get<{
-        data: Array<NFTCollection>
+        data: NFTCollection[]
         pagination: {
           count: number
           page: number
@@ -494,7 +618,7 @@ export const apiFetcher = {
   fetchNFTCollectionItems: (id: string, page: string) =>
     requesterV2
       .get<{
-        data: Array<NFTItem>
+        data: NFTItem[]
         pagination: {
           count: number
           page: number
@@ -515,9 +639,9 @@ export const apiFetcher = {
   fetchNFTItemByOwner: (owner: string, standard: string, page?: string) =>
     requesterV2
       .get<{
-        data: Array<NFTItem>
+        data: NFTItem[]
         pagination: {
-          series: Array<string>
+          series: string[]
         }
       }>('nft/items', {
         params: {
@@ -632,6 +756,10 @@ export const apiFetcher = {
 // Types
 // ====================
 
+export type APIFetcher = typeof apiFetcher
+
+export type APIReturn<T extends keyof APIFetcher> = Awaited<ReturnType<APIFetcher[T]>>
+
 export namespace FeeRateTracker {
   export interface TransactionFeeRate {
     id: number
@@ -717,8 +845,8 @@ export interface CKBTransactionInScript {
   transactionFee: number
   isCellbase: boolean
   txStatus: string
-  displayInputs: State.Cell[]
-  displayOutputs: State.Cell[]
+  displayInputs: Cell[]
+  displayOutputs: Cell[]
 }
 
 export interface CellInScript {
@@ -761,7 +889,7 @@ export interface TransferRes {
 }
 
 export interface TransferListRes {
-  data: Array<TransferRes>
+  data: TransferRes[]
   pagination: {
     count: number
     page: number
diff --git a/src/services/ExplorerService/index.ts b/src/services/ExplorerService/index.ts
index f30ef6837..f7dc39c8f 100644
--- a/src/services/ExplorerService/index.ts
+++ b/src/services/ExplorerService/index.ts
@@ -1,8 +1,8 @@
 import { BehaviorSubject, Subscription, map, switchMap, timer } from 'rxjs'
 import { BLOCK_POLLING_TIME } from '../../constants/common'
-import { apiFetcher } from './fetcher'
+import { APIReturn, apiFetcher } from './fetcher'
 
-const initStatistics: State.Statistics = {
+const initStatistics: APIReturn<'fetchStatistics'> = {
   tipBlockNumber: '0',
   averageBlockTime: '0',
   currentEpochDifficulty: '0',
@@ -26,7 +26,7 @@ class ExplorerService {
   // 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)
+  latestStatistics$ = new BehaviorSubject<APIReturn<'fetchStatistics'>>(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.
@@ -63,3 +63,4 @@ export const explorerService = new ExplorerService()
 
 export * from './hooks'
 export * from './types'
+export type { APIFetcher, APIReturn } from './fetcher'
diff --git a/src/services/ExplorerService/types.ts b/src/services/ExplorerService/types.ts
index 53bafacb1..e2b520fea 100644
--- a/src/services/ExplorerService/types.ts
+++ b/src/services/ExplorerService/types.ts
@@ -1,3 +1,5 @@
+import { Cell } from '../../models/Cell'
+
 export namespace Response {
   export interface Response<T> {
     data: T
@@ -25,3 +27,185 @@ export namespace Response {
     attributes: A
   }
 }
+
+// This is more suitable as a type at the model abstraction level,
+// but considering that this type will only be used by a single ChartComp and fetcher, in order not to add too much
+// complexity, it is directly treated as a type with strong server-side properties and placed here.
+export namespace ChartItem {
+  export interface TransactionCount {
+    transactionsCount: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface AddressCount {
+    addressesCount: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface TotalDaoDeposit {
+    totalDaoDeposit: string
+    totalDepositorsCount: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface NewDaoDeposit {
+    dailyDaoDeposit: string
+    dailyDaoDepositorsCount: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface CirculationRatio {
+    circulationRatio: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface DifficultyHashRate {
+    difficulty: string
+    uncleRate: string
+    hashRate: string
+    epochNumber: string
+  }
+
+  export interface Difficulty {
+    avgDifficulty: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface HashRate {
+    avgHashRate: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface UncleRate {
+    uncleRate: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface CellCount {
+    liveCellsCount: string
+    deadCellsCount: string
+    allCellsCount: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface DifficultyUncleRateEpoch {
+    epochNumber: string
+    epochTime: string
+    epochLength: string
+  }
+
+  export interface AddressBalanceRank {
+    ranking: string
+    address: string
+    balance: string
+  }
+
+  export interface BalanceDistribution {
+    balance: string
+    addresses: string
+    sumAddresses: string
+  }
+
+  export interface TransactionFee {
+    totalTxFee: string
+    createdAtUnixtimestamp: string
+  }
+
+  export interface BlockTimeDistribution {
+    time: string
+    ratio: string
+  }
+
+  export interface AverageBlockTime {
+    timestamp: number
+    avgBlockTimeDaily: string
+    avgBlockTimeWeekly: string
+  }
+
+  export interface EpochTimeDistribution {
+    time: string
+    epoch: string
+  }
+
+  export interface TotalSupply {
+    createdAtUnixtimestamp: string
+    circulatingSupply: string
+    burnt: string
+    lockedCapacity: string
+  }
+
+  export interface AnnualPercentageCompensation {
+    year: number
+    apc: string
+  }
+
+  export interface SecondaryIssuance {
+    createdAtUnixtimestamp: string
+    treasuryAmount: string
+    miningReward: string
+    depositCompensation: string
+  }
+
+  export interface InflationRate {
+    year: number
+    nominalApc: string
+    nominalInflationRate: string
+    realInflationRate: string
+  }
+
+  export interface Liquidity {
+    createdAtUnixtimestamp: string
+    circulatingSupply: string
+    liquidity: string
+    daoDeposit: string
+  }
+
+  export interface MinerAddress {
+    address: string
+    radio: string
+  }
+}
+
+export interface NervosDaoDepositor {
+  addressHash: string
+  daoDeposit: number
+  averageDepositTime: string
+}
+
+export interface TransactionRecord {
+  address: string
+  transfers: TransactionRecordTransfer[]
+}
+
+export interface TransactionRecordTransfer {
+  capacity: string
+  cellType: Cell['cellType']
+
+  udtInfo?: {
+    symbol: string
+    amount: string
+    decimal: string
+    typeHash: string
+    published: boolean
+    displayName: string
+    uan: string
+  }
+
+  mNftInfo?: {
+    className: string
+    tokenId: string // none 0x prefix hex number
+    total: string // decimal string
+  }
+}
+
+interface FetchStatusValue {
+  OK: string
+  Error: string
+  InProgress: string
+  None: string
+}
+
+// Unused currently
+export type FetchStatus = keyof FetchStatusValue
+
+export type SupportedExportTransactionType = 'address_transactions' | 'blocks' | 'udts' | 'nft'
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
deleted file mode 100644
index 637421049..000000000
--- a/src/types/index.d.ts
+++ /dev/null
@@ -1,601 +0,0 @@
-declare namespace State {
-  export interface Script {
-    codeHash: string
-    args: string
-    hashType: string
-  }
-
-  interface UDTInfo {
-    symbol: string
-    amount: string
-    decimal: string
-    typeHash: string
-    published: boolean
-    uan?: string
-  }
-
-  interface Nrc721TokenInfo {
-    amount: string
-    symbol: string
-  }
-
-  interface NftIssuer {
-    issuerName: string
-  }
-
-  interface NftClass {
-    className: string
-    total: string
-  }
-
-  interface NftToken {
-    className: string
-    tokenId: string
-    total: string
-  }
-
-  interface CellInfo {
-    lock: Script
-    type: Script
-    data: string
-  }
-
-  interface Cell$Base {
-    id: number
-    addressHash: string
-    capacity: string
-    occupiedCapacity: string
-    fromCellbase: boolean
-    generatedTxHash: string
-    targetBlockNumber: number
-    baseReward: string
-    secondaryReward: string
-    commitReward: string
-    proposalReward: string
-    consumedTxHash: string
-    status: 'live' | 'dead'
-    isGenesisOutput: boolean
-    cellIndex: string
-    compensationStartedBlockNumber: number
-    compensationEndedBlockNumber: number
-    compensationStartedTimestamp: number
-    compensationEndedTimestamp: number
-    lockedUntilBlockNumber: number
-    lockedUntilBlockTimestamp: number
-    interest: string
-    daoTypeHash: string
-    cellInfo: CellInfo
-    since?: {
-      raw: string
-      median_timestamp?: string
-    }
-  }
-
-  interface Cell$NoExtra extends Cell$Base {
-    cellType:
-      | 'normal'
-      | 'nervos_dao_deposit'
-      | 'nervos_dao_withdrawing'
-      | 'cota_registry'
-      | 'cota_regular'
-      | 'nft_transfer'
-      | 'simple_transfer'
-      | 'nft_mint'
-      | 'spore_cluster'
-      | 'spore_cell'
-    extraInfo?: never
-  }
-
-  interface Cell$UDT extends Cell$Base {
-    cellType: 'udt'
-    extraInfo: UDTInfo
-  }
-
-  interface Cell$NftIssuer extends Cell$Base {
-    cellType: 'm_nft_issuer'
-    extraInfo: NftIssuer
-  }
-
-  interface Cell$NftClass extends Cell$Base {
-    cellType: 'm_nft_class'
-    extraInfo: NftClass
-  }
-
-  interface Cell$NftToken extends Cell$Base {
-    cellType: 'm_nft_token'
-    extraInfo: NftToken
-  }
-
-  interface Cell$Nrc721Token extends Cell$Base {
-    cellType: 'nrc_721_token'
-    extraInfo: Nrc721TokenInfo
-  }
-
-  type Cell = Cell$NoExtra | Cell$UDT | Cell$NftIssuer | Cell$NftClass | Cell$NftToken | Cell$Nrc721Token
-
-  export interface TransactionLiteDetails {
-    address: string
-    transfers: LiteTransfer[]
-  }
-
-  // cell_type comes from: https://github.com/nervosnetwork/ckb-explorer/blob/develop/app/utils/ckb_utils.rb#L380
-  type CellType =
-    | 'normal'
-    | 'udt'
-    | 'nervos_dao_deposit'
-    | 'nervos_dao_withdrawing'
-    | 'spore_cell'
-    | 'spore_cluster'
-    | 'cota_regular'
-    | 'cota_registry'
-    | 'm_nft_issuer'
-    | 'm_nft_class'
-    | 'm_nft_token'
-    | 'nrc_721_token'
-    | 'nrc_721_factory'
-  interface LiteTransfer {
-    capacity: string
-    cellType: CellType
-
-    udtInfo?: {
-      symbol: string
-      amount: string
-      decimal: string
-      typeHash: string
-      published: boolean
-      displayName: string
-      uan: string
-    }
-
-    mNftInfo?: {
-      className: string
-      tokenId: string // none 0x prefix hex number
-      total: string // decimal string
-    }
-  }
-
-  export interface LockInfo {
-    status: 'locked' | 'unlocked'
-    epochNumber: string
-    epochIndex: string
-    estimatedUnlockTime: string
-  }
-
-  export interface SUDT {
-    symbol: string
-    decimal: string
-    amount: string
-    typeHash: string
-    udtIconFile: string
-    uan?: string
-    udtType: 'sudt'
-    collection: undefined
-    cota: undefined
-  }
-
-  interface MNFT {
-    symbol: string
-    decimal: string
-    amount: string
-    typeHash: string
-    udtIconFile: string
-    udtType: 'm_nft_token'
-    uan: undefined
-    collection: {
-      typeHash: string
-    }
-    cota: undefined
-  }
-
-  interface NRC721 {
-    symbol: string
-    amount: string // token id in fact
-    typeHash: string
-    udtIconFile: string // base uri with token id in fact
-    udtType: 'nrc_721_token'
-    uan: undefined
-    collection: {
-      typeHash: string
-    }
-    cota: undefined
-  }
-
-  interface CoTA {
-    symbol: string
-    amount: string
-    typeHash: string
-    udtIconFile: string // base uri with token id in fact
-    udtType: 'cota'
-    uan: undefined
-    collection: undefined
-    cota: {
-      cotaId: number
-      tokenId: number
-    }
-  }
-
-  interface Spore {
-    symbol?: string
-    amount: string
-    typeHash: string
-    udtIconFile: string
-    udtType: 'spore_cell'
-    collection: {
-      typeHash: string | null
-    }
-    uan: undefined
-    cota: undefined
-  }
-
-  export type UDTAccount = SUDT | MNFT | NRC721 | CoTA | Spore
-
-  export interface Address {
-    addressHash: string
-    lockHash: string
-    balance: string
-    balanceOccupied: string
-    transactionsCount: number
-    lockScript: Script
-    pendingRewardBlocksCount: number
-    type: 'Address' | 'LockHash' | ''
-    daoDeposit: number
-    interest: number
-    daoCompensation: number
-    lockInfo: LockInfo
-    liveCellsCount: string
-    minedBlocksCount: string
-    isSpecial: boolean
-    specialAddress: string
-    udtAccounts?: Array<UDTAccount>
-  }
-
-  export interface Block {
-    blockHash: string
-    number: number
-    transactionsCount: number
-    proposalsCount: number
-    unclesCount: number
-    uncleBlockHashes: string[]
-    reward: string
-    rewardStatus: 'pending' | 'issued'
-    totalTransactionFee: string
-    receivedTxFee: string
-    receivedTxFeeStatus: 'pending' | 'calculated'
-    totalCellCapacity: string
-    minerHash: string
-    minerMessage: string
-    timestamp: number
-    difficulty: string
-    epoch: number
-    length: string
-    startNumber: number
-    version: number
-    nonce: string
-    transactionsRoot: string
-    blockIndexInEpoch: string
-    minerReward: string
-    liveCellChanges: string
-    size: number
-    largestBlockInEpoch: number
-    largestBlock: number
-    cycles: number | null
-    maxCyclesInEpoch: number | null
-    maxCycles: number | null
-  }
-
-  export interface CellDep {
-    depType: string
-    outPoint: {
-      index: string
-      txHash: string
-    }
-  }
-
-  export interface Transaction {
-    transactionHash: string
-    blockNumber: number
-    blockTimestamp: number
-    transactionFee: string
-    income: string
-    isCellbase: boolean
-    targetBlockNumber: number
-    version: number
-    displayInputs: Cell[]
-    displayOutputs: Cell[]
-    cellDeps: CellDep[]
-    headerDeps: string[]
-    witnesses: string[]
-    liveCellChanges: string
-    capacityInvolved: string
-    txStatus: string
-    detailedMessage: string
-    bytes: number
-    largestTxInEpoch: number
-    largestTx: number
-    cycles: number | null
-    maxCyclesInEpoch: number | null
-    maxCycles: number | null
-    createTimestamp?: number
-  }
-
-  export interface NervosDao {
-    totalDeposit: string
-    depositorsCount: string
-    depositChanges: string
-    unclaimedCompensationChanges: string
-    claimedCompensationChanges: string
-    depositorChanges: string
-    unclaimedCompensation: string
-    claimedCompensation: string
-    averageDepositTime: string
-    miningReward: string
-    depositCompensation: string
-    treasuryAmount: string
-    estimatedApc: string
-  }
-
-  export interface NervosDaoDepositor {
-    addressHash: string
-    daoDeposit: number
-    averageDepositTime: string
-  }
-
-  export interface Statistics {
-    tipBlockNumber: string
-    averageBlockTime: string
-    currentEpochDifficulty: string
-    hashRate: string
-    epochInfo: {
-      epochNumber: string
-      epochLength: string
-      index: string
-    }
-    estimatedEpochTime: string
-    transactionsLast24Hrs: string
-    transactionsCountPerMinute: string
-    reorgStartedAt: string | null
-  }
-
-  export interface StatisticTransactionCount {
-    transactionsCount: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticAddressCount {
-    addressesCount: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticTotalDaoDeposit {
-    totalDaoDeposit: string
-    totalDepositorsCount: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticNewDaoDeposit {
-    dailyDaoDeposit: string
-    dailyDaoDepositorsCount: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticNewDaoWithdraw {
-    dailyDaoWithdraw: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticCirculationRatio {
-    circulationRatio: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticDifficultyHashRate {
-    difficulty: string
-    uncleRate: string
-    hashRate: string
-    epochNumber: string
-  }
-
-  export interface StatisticDifficulty {
-    avgDifficulty: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticHashRate {
-    avgHashRate: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticUncleRate {
-    uncleRate: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticCellCount {
-    liveCellsCount: string
-    deadCellsCount: string
-    allCellsCount: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticDifficultyUncleRateEpoch {
-    epochNumber: string
-    epochTime: string
-    epochLength: string
-  }
-
-  export interface StatisticAddressBalanceRank {
-    ranking: string
-    address: string
-    balance: string
-  }
-
-  export interface StatisticAddressBalanceRanking {
-    addressBalanceRanking: StatisticAddressBalanceRank[]
-  }
-
-  export interface StatisticAddressBalanceDistribution {
-    addressBalanceDistribution: string[][]
-  }
-
-  export interface StatisticBalanceDistribution {
-    balance: string
-    addresses: string
-    sumAddresses: string
-  }
-
-  export interface StatisticTransactionFee {
-    totalTxFee: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticBlockTimeDistributions {
-    blockTimeDistribution: string[][]
-  }
-
-  export interface StatisticBlockTimeDistribution {
-    time: string
-    ratio: string
-  }
-
-  export interface StatisticAverageBlockTime {
-    timestamp: number
-    avgBlockTimeDaily: string
-    avgBlockTimeWeekly: string
-  }
-
-  export interface StatisticAverageBlockTimes {
-    averageBlockTime: StatisticAverageBlockTime[]
-  }
-
-  export interface StatisticOccupiedCapacity {
-    occupiedCapacity: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticEpochTimeDistributions {
-    epochTimeDistribution: string[][]
-  }
-
-  export interface StatisticEpochTimeDistribution {
-    time: string
-    epoch: string
-  }
-
-  export interface StatisticNewNodeCount {
-    nodesCount: string
-    createdAtUnixtimestamp: string
-  }
-
-  export interface StatisticNodeDistribution {
-    name: string
-    value: number[]
-  }
-
-  export interface StatisticNodeDistributions {
-    nodesDistribution: {
-      city: string
-      count: number
-      postal: string
-      country: string
-      latitude: string
-      longitude: string
-    }[]
-  }
-
-  export interface StatisticTotalSupply {
-    createdAtUnixtimestamp: string
-    circulatingSupply: string
-    burnt: string
-    lockedCapacity: string
-  }
-
-  export interface StatisticAnnualPercentageCompensation {
-    year: number
-    apc: string
-  }
-
-  export interface StatisticAnnualPercentageCompensations {
-    nominalApc: string[]
-  }
-
-  export interface StatisticSecondaryIssuance {
-    createdAtUnixtimestamp: string
-    treasuryAmount: string
-    miningReward: string
-    depositCompensation: string
-  }
-
-  export interface StatisticInflationRates {
-    nominalApc: string[]
-    nominalInflationRate: string[]
-    realInflationRate: string[]
-  }
-
-  export interface StatisticInflationRate {
-    year: number
-    nominalApc: string
-    nominalInflationRate: string
-    realInflationRate: string
-  }
-
-  export interface StatisticLiquidity {
-    createdAtUnixtimestamp: string
-    circulatingSupply: string
-    liquidity: string
-    daoDeposit: string
-  }
-
-  export interface StatisticMinerAddressDistribution {
-    minerAddressDistribution: Record<string, string>
-  }
-
-  export interface StatisticMinerAddress {
-    address: string
-    radio: string
-  }
-
-  export interface StatisticCacheInfo {
-    flushCacheInfo: string[]
-  }
-
-  interface FetchStatusValue {
-    OK: string
-    Error: string
-    InProgress: string
-    None: string
-  }
-
-  export type FetchStatus = keyof FetchStatusValue
-
-  export interface UDT {
-    symbol: string
-    fullName: string
-    iconFile: string
-    published: boolean
-    description: string
-    totalAmount: string
-    addressesCount: string
-    decimal: string
-    h24CkbTransactionsCount: string
-    createdAt: string
-    typeHash: string
-    issuerAddress: string
-    typeScript: Script
-    displayName?: string
-    uan?: string
-  }
-
-  export type TransactionCsvExportType = 'address_transactions' | 'blocks' | 'udts' | 'nft'
-
-  export interface ChartColor {
-    areaColor: string
-    colors: string[]
-    moreColors: string[]
-    totalSupplyColors: string[]
-    daoColors: string[]
-    secondaryIssuanceColors: string[]
-    liquidityColors: string[]
-  }
-
-  type Theme = { primary: string }
-}
diff --git a/src/types/styled.d.ts b/src/types/styled.d.ts
new file mode 100644
index 000000000..d0362097f
--- /dev/null
+++ b/src/types/styled.d.ts
@@ -0,0 +1,8 @@
+import 'styled-components'
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    primary: string
+    secondary: string
+  }
+}
diff --git a/src/utils/chart.ts b/src/utils/chart.ts
index 908911aa8..200f3ec4f 100644
--- a/src/utils/chart.ts
+++ b/src/utils/chart.ts
@@ -106,7 +106,7 @@ export const parseInterval = (max: number, min: number) => {
 // This is a hotfix to avoid outliers in production environment, final algorithm will be decided later at
 // https://github.com/Magickbase/ckb-explorer-public-issues/issues/394
 // TODO: add tests for the sample function
-export const getFeeRateSamples = (feeRates: Array<FeeRateTracker.TransactionFeeRate>, TPM: number) => {
+export const getFeeRateSamples = (feeRates: FeeRateTracker.TransactionFeeRate[], TPM: number) => {
   if (feeRates.length === 0) return feeRates
 
   const SAMPLES_MIN_COUNT = 100
@@ -116,7 +116,7 @@ export const getFeeRateSamples = (feeRates: Array<FeeRateTracker.TransactionFeeR
   const samples = feeRates
     .filter(i => i.confirmationTime)
     .sort((a, b) => a.confirmationTime - b.confirmationTime)
-    .reduce<Array<FeeRateTracker.TransactionFeeRate>>((acc, cur) => {
+    .reduce<FeeRateTracker.TransactionFeeRate[]>((acc, cur) => {
       const last = acc[acc.length - 1]
       if (!last || last.feeRate >= cur.feeRate) {
         return [...acc, cur]
diff --git a/src/utils/transformer.ts b/src/utils/transformer.ts
index a9305b2f4..4031b97aa 100644
--- a/src/utils/transformer.ts
+++ b/src/utils/transformer.ts
@@ -1,6 +1,9 @@
+import { Cell } from '../models/Cell'
+import { Transaction } from '../models/Transaction'
 import type { CellInScript, CKBTransactionInScript } from '../services/ExplorerService/fetcher'
 
-export const transformToTransaction = (tx: CKBTransactionInScript): State.Transaction => {
+// TODO: move to models
+export const transformToTransaction = (tx: CKBTransactionInScript): Transaction => {
   return {
     transactionHash: tx.txHash,
     blockNumber: tx.blockNumber,
@@ -30,7 +33,8 @@ export const transformToTransaction = (tx: CKBTransactionInScript): State.Transa
   }
 }
 
-export type CellBasicInfo = Pick<State.Cell, 'id' | 'isGenesisOutput' | 'capacity' | 'occupiedCapacity'>
+// TODO: move to models
+export type CellBasicInfo = Pick<Cell, 'id' | 'isGenesisOutput' | 'capacity' | 'occupiedCapacity'>
 export const transformToCellBasicInfo = (cell: CellInScript): CellBasicInfo => {
   return {
     id: cell.id,
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 03ac917ee..9646abc12 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -12,6 +12,8 @@ import {
   TestnetContractHashTags,
 } from '../constants/scripts'
 import { isMainnet } from './chain'
+import { Script } from '../models/Script'
+import { Cell } from '../models/Cell'
 
 export const copyElementValue = (component: any) => {
   if (!component) return
@@ -94,13 +96,13 @@ export const isValidReactNode = (node: ReactNode) => {
   return !!node
 }
 
-export const getContractHashTag = (script: State.Script): ContractHashTag | undefined => {
+export const getContractHashTag = (script: Script): ContractHashTag | undefined => {
   if (!script.codeHash || !script.hashType) return undefined
   const contractHashTag = matchScript(script.codeHash, script.hashType)
   if (!!contractHashTag && ScriptTagExtraRules.has(contractHashTag.tag)) {
     return {
       ...contractHashTag,
-      tag: ScriptTagExtraRules.get(contractHashTag.tag)?.(script as State.Script) || contractHashTag.tag,
+      tag: ScriptTagExtraRules.get(contractHashTag.tag)?.(script as Script) || contractHashTag.tag,
     }
   }
   return contractHashTag
@@ -332,11 +334,11 @@ export function randomInt(min: number, max: number) {
   return min + Math.floor(Math.random() * (max - min + 1))
 }
 
-export const isDaoDepositCell = (cellType: State.Cell['cellType']) => cellType === 'nervos_dao_deposit'
+export const isDaoDepositCell = (cellType: Cell['cellType']) => cellType === 'nervos_dao_deposit'
 
-export const isDaoWithdrawCell = (cellType: State.Cell['cellType']) => cellType === 'nervos_dao_withdrawing'
+export const isDaoWithdrawCell = (cellType: Cell['cellType']) => cellType === 'nervos_dao_withdrawing'
 
-export const isDaoCell = (cellType: State.Cell['cellType']) => isDaoDepositCell(cellType) || isDaoWithdrawCell(cellType)
+export const isDaoCell = (cellType: Cell['cellType']) => isDaoDepositCell(cellType) || isDaoWithdrawCell(cellType)
 
 export default {
   copyElementValue,