From 2680651bc73d29f9cccf04e8945f247cb334fc0f Mon Sep 17 00:00:00 2001 From: Keith Date: Sat, 7 Oct 2023 00:58:28 +0700 Subject: [PATCH 1/4] fix: filter latest data point from chart if it's exceptional --- src/service/http/fetcher.ts | 88 +++++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 32 deletions(-) diff --git a/src/service/http/fetcher.ts b/src/service/http/fetcher.ts index 0606c8d74..c4abf81b7 100644 --- a/src/service/http/fetcher.ts +++ b/src/service/http/fetcher.ts @@ -210,14 +210,24 @@ export const fetchNervosDaoDepositors = () => ) export const fetchStatisticTransactionCount = () => - axiosIns(`/daily_statistics/transactions_count`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), - ) + axiosIns(`/daily_statistics/transactions_count`).then((res: AxiosResponse) => { + const resp = toCamelcase[]>>(res.data) + return { + ...resp, + // filter latest exceptional data out + data: resp.data.filter((item, idx) => idx < resp.data.length - 2 || item.attributes.transactionsCount !== '0'), + } + }) export const fetchStatisticAddressCount = () => - axiosIns(`/daily_statistics/addresses_count`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), - ) + axiosIns(`/daily_statistics/addresses_count`).then((res: AxiosResponse) => { + const resp = toCamelcase[]>>(res.data) + return { + ...resp, + // filter latest exceptional data out + data: resp.data.filter((item, idx) => idx < resp.data.length - 2 || item.attributes.addressesCount !== '0'), + } + }) export const fetchStatisticTotalDaoDeposit = () => axiosIns(`/daily_statistics/total_depositors_count-total_dao_deposit`).then((res: AxiosResponse) => @@ -244,35 +254,46 @@ export const fetchStatisticDifficultyHashRate = () => const resp = toCamelcase[]>>(res.data) return { ...resp, - data: resp.data.map(wrapper => ({ - ...wrapper, - attributes: { - // Data may enter the cache, so it is purify to reduce volume. - ...pick(wrapper.attributes, ['difficulty', 'epochNumber']), - uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), - hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toString(), - }, - })), + data: resp.data + // filter latest exceptional data out + .filter((item, idx) => idx < resp.data.length - 2 || item.attributes.hashRate !== '0.0') + .map(wrapper => ({ + ...wrapper, + attributes: { + // Data may enter the cache, so it is purify to reduce volume. + ...pick(wrapper.attributes, ['difficulty', 'epochNumber']), + uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), + hashRate: new BigNumber(wrapper.attributes.hashRate).multipliedBy(1000).toString(), + }, + })), } }) export const fetchStatisticDifficulty = () => - axiosIns(`/daily_statistics/avg_difficulty`).then((res: AxiosResponse) => - toCamelcase[]>>(res.data), - ) + axiosIns(`/daily_statistics/avg_difficulty`).then((res: AxiosResponse) => { + const resp = toCamelcase[]>>(res.data) + return { + ...resp, + // filter latest exceptional data out + data: resp.data.filter((item, idx) => idx < resp.data.length - 2 || item.attributes.avgDifficulty !== '0.0'), + } + }) export const fetchStatisticHashRate = () => axiosIns(`/daily_statistics/avg_hash_rate`).then((res: AxiosResponse) => { const resp = toCamelcase[]>>(res.data) return { ...resp, - data: resp.data.map(wrapper => ({ - ...wrapper, - attributes: { - ...wrapper.attributes, - avgHashRate: new BigNumber(wrapper.attributes.avgHashRate).multipliedBy(1000).toString(), - }, - })), + data: resp.data + // filter latest exceptional data out + .filter((item, idx) => idx < resp.data.length - 2 || item.attributes.avgHashRate !== '0.0') + .map(wrapper => ({ + ...wrapper, + attributes: { + ...wrapper.attributes, + avgHashRate: new BigNumber(wrapper.attributes.avgHashRate).multipliedBy(1000).toString(), + }, + })), } }) @@ -281,13 +302,16 @@ export const fetchStatisticUncleRate = () => const resp = toCamelcase[]>>(res.data) return { ...resp, - data: resp.data.map(wrapper => ({ - ...wrapper, - attributes: { - ...wrapper.attributes, - uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), - }, - })), + data: resp.data + // filter latest exceptional data out + .filter((item, idx) => idx < resp.data.length - 2 || item.attributes.uncleRate !== '0') + .map(wrapper => ({ + ...wrapper, + attributes: { + ...wrapper.attributes, + uncleRate: new BigNumber(wrapper.attributes.uncleRate).toFixed(4), + }, + })), } }) From ea622beafcda42bc37e5b284abcd0c5d94964bcb Mon Sep 17 00:00:00 2001 From: WhiteMind Date: Mon, 9 Oct 2023 09:21:03 +0800 Subject: [PATCH 2/4] Refactor: Remove !important used in CSS (#106) * refactor: remove the use of !important in the NftList and optimize the style code * refactor: remove the use of !important in the AddressComp * refactor: remove the use of !important in the ExportTransactions page * refactor: remove the use of !important in the ScriptsComp * refactor: remove unnecessary !important * refactor: remove the use of !important in the NftCollections * refactor: remove the use of !important in the BlockDetail * refactor: remove the use of !important in the TransactionLiteItem * refactor: remove the use of !important in the Home * refactor: remove the use of !important in the Tokens --- src/App.tsx | 1 - src/components/Card/TitleCard/index.tsx | 5 +- .../NftCollectionTransfers/styles.module.scss | 2 +- .../NftHolderList/styles.module.scss | 2 +- src/components/Search/Filter/styled.tsx | 2 +- .../TransactionLiteItem/index.module.scss | 7 +- src/index.css | 2 +- src/index.tsx | 2 + src/pages/Address/styles.module.scss | 58 +++++++-------- src/pages/BlockDetail/BlockComp.tsx | 1 + src/pages/BlockDetail/styles.module.scss | 9 +-- src/pages/ExportTransactions/index.tsx | 2 + .../ExportTransactions/styles.module.scss | 71 +++++++++---------- .../Home/AverageBlockTimeChart/styled.tsx | 4 +- src/pages/Home/HashRateChart/styled.tsx | 4 +- src/pages/NftCollections/List.tsx | 2 +- src/pages/NftCollections/styles.module.scss | 24 +++---- src/pages/Script/ScriptsComp.tsx | 4 +- src/pages/Script/styles.module.scss | 54 ++++++++------ src/pages/Tokens/styled.tsx | 5 +- 20 files changed, 138 insertions(+), 123 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 98e98e535..aacfb16b7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ import { useMemo } from 'react' import { QueryClient, QueryClientProvider } from 'react-query' import { ThemeProvider } from 'styled-components' -import 'antd/dist/antd.css' import Routers from './routes' import Toast from './components/Toast' import useInitApp from './contexts/providers/hook' diff --git a/src/components/Card/TitleCard/index.tsx b/src/components/Card/TitleCard/index.tsx index c960e2919..fe4d9b1ff 100644 --- a/src/components/Card/TitleCard/index.tsx +++ b/src/components/Card/TitleCard/index.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames' import { TitleCardPanel } from './styled' export default ({ @@ -5,14 +6,16 @@ export default ({ isSingle, className, rear, + rearClassName, }: { title: React.ReactNode isSingle?: boolean className?: string rear?: React.ReactNode + rearClassName?: string }) => (
{title}
- {rear ?
{rear}
: null} + {rear ?
{rear}
: null} ) diff --git a/src/components/NftCollectionTransfers/styles.module.scss b/src/components/NftCollectionTransfers/styles.module.scss index 8f147cf2a..97673636f 100644 --- a/src/components/NftCollectionTransfers/styles.module.scss +++ b/src/components/NftCollectionTransfers/styles.module.scss @@ -71,7 +71,7 @@ } .noRecord { - text-align: center !important; + text-align: center; } ul { diff --git a/src/components/NftHolderList/styles.module.scss b/src/components/NftHolderList/styles.module.scss index 5a7641276..80b3f3e46 100644 --- a/src/components/NftHolderList/styles.module.scss +++ b/src/components/NftHolderList/styles.module.scss @@ -69,7 +69,7 @@ } .noRecord { - text-align: center !important; + text-align: center; } } diff --git a/src/components/Search/Filter/styled.tsx b/src/components/Search/Filter/styled.tsx index 3f991cab5..a66b67719 100644 --- a/src/components/Search/Filter/styled.tsx +++ b/src/components/Search/Filter/styled.tsx @@ -29,7 +29,7 @@ export const FilterImage = styled(SimpleButton)` z-index: 2; display: flex; justify-content: center; - cursor: ${(props: { isClear?: boolean }) => (props.isClear ? 'pointer' : 'default !important')}; + cursor: ${(props: { isClear?: boolean }) => (props.isClear ? 'pointer' : 'default')}; @media (max-width: 750px) { margin-left: ${(props: { isClear?: boolean }) => (props.isClear ? '-14%' : '0')}; diff --git a/src/components/TransactionItem/TransactionLiteItem/index.module.scss b/src/components/TransactionItem/TransactionLiteItem/index.module.scss index 9ba70ddd5..dd1a1051c 100644 --- a/src/components/TransactionItem/TransactionLiteItem/index.module.scss +++ b/src/components/TransactionItem/TransactionLiteItem/index.module.scss @@ -78,8 +78,11 @@ padding: 0; > div { - width: 100% !important; - padding: 16px 0 !important; + // This selector is just to increase the specificity. + &:nth-child(n) { + width: 100%; + padding: 16px 0; + } > div:first-child { color: #666; diff --git a/src/index.css b/src/index.css index ebdad4178..d7cc03268 100644 --- a/src/index.css +++ b/src/index.css @@ -77,7 +77,7 @@ a { @media (width <= 750px) { .ant-popover-inner-content { - padding: 5px !important; + padding: 5px; } } diff --git a/src/index.tsx b/src/index.tsx index 71b03c878..6c151f60f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,6 @@ import ReactDOM from 'react-dom' +import 'antd/dist/antd.css' +// This should be after all third-party library styles so that it can override them. import './index.css' import './utils/i18n' import App from './App' diff --git a/src/pages/Address/styles.module.scss b/src/pages/Address/styles.module.scss index 160edf44c..c91b47fae 100644 --- a/src/pages/Address/styles.module.scss +++ b/src/pages/Address/styles.module.scss @@ -73,40 +73,42 @@ } .layoutButtons { - > label { - height: 40px; - width: 120px; - text-align: center; - font-weight: 400; - font-size: 16px; - line-height: 38px; - color: #333; - border: 1px solid #e5e5e5; - box-shadow: none !important; - - &::before { - content: none !important; - } - - &:hover { + :global { + .ant-radio-button-wrapper { + height: 40px; + width: 120px; + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 38px; color: #333; - background: #fff; - } + border: 1px solid #e5e5e5; + box-shadow: none; - &:first-child { - border-radius: 4px 0 0 4px; - } + &::before { + content: none; + } - &:last-child { - border-radius: 0 4px 4px 0; - } + &:hover { + color: #333; + background: #fff; + } - &:global(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) { - background: #333; - border-color: #333 !important; + &:first-child { + border-radius: 4px 0 0 4px; + } - &:hover { + &:last-child { + border-radius: 0 4px 4px 0; + } + + &.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { background: #333; + border-color: #333; + + &:hover { + background: #333; + } } } } diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx index 5f15e2ae0..127b61187 100644 --- a/src/pages/BlockDetail/BlockComp.tsx +++ b/src/pages/BlockDetail/BlockComp.tsx @@ -336,6 +336,7 @@ export const BlockComp = ({ title={`${i18n.t('transaction.transactions')} (${localeNumberString(total)})`} className={styles.transactionTitleCard} isSingle + rearClassName={styles.rear} rear={ div) { - // hack default style of TitleCard - padding: 0 !important; - justify-content: space-between !important; + .rear { + > div:first-child { + padding: 0; + justify-content: space-between; + } } img { diff --git a/src/pages/ExportTransactions/index.tsx b/src/pages/ExportTransactions/index.tsx index 3ba27a7f5..ea6db962a 100644 --- a/src/pages/ExportTransactions/index.tsx +++ b/src/pages/ExportTransactions/index.tsx @@ -239,6 +239,7 @@ const ExportTransactions = () => { value={fromHeight} min={0} parser={heightParser} + controls={false} onChange={h => updateSearchParams( params => @@ -256,6 +257,7 @@ const ExportTransactions = () => { min={0} parser={heightParser} value={toHeight} + controls={false} onChange={h => updateSearchParams( params => (h ? { ...params, 'to-height': h.toString() } : omit(params, ['to-height'])), diff --git a/src/pages/ExportTransactions/styles.module.scss b/src/pages/ExportTransactions/styles.module.scss index e7372fa76..e9e1d9321 100644 --- a/src/pages/ExportTransactions/styles.module.scss +++ b/src/pages/ExportTransactions/styles.module.scss @@ -161,35 +161,36 @@ .heightInputPanel { margin-left: 24px; margin-right: 24px; - - @media screen and (width <= 750px) { - margin-left: 16px; - margin-right: 16px; - } - display: flex; flex-direction: column; width: 40%; max-width: 256px; - :global(.ant-picker:hover) { - border-radius: 4px; - - &:hover { - border-color: var(--primary-color) !important; - } + @media screen and (width <= 750px) { + margin-left: 16px; + margin-right: 16px; } - :global(.ant-input-number-affix-wrapper) { - &:hover { - border-color: var(--primary-color) !important; + :global { + .ant-picker { + border-radius: 4px; + box-shadow: none; + + &:hover, + &.ant-picker-focused { + border-color: var(--primary-color); + } } - border-radius: 4px; - } + .ant-input-number-affix-wrapper { + border-radius: 4px; + box-shadow: none; - :global(.ant-input-number-handler-wrap) { - display: none !important; + &:hover, + &.ant-input-number-affix-wrapper-focused { + border-color: var(--primary-color); + } + } } @media (width <= 750px) { @@ -331,29 +332,23 @@ } .calendar { - :global(.ant-picker-cell-selected .ant-picker-cell-inner) { - background-color: var(--primary-color) !important; - } - - :global(.ant-picker-cell-today .ant-picker-cell-inner) { - &::before { - border: 1px solid var(--primary-color); + :global { + .ant-picker-cell-selected .ant-picker-cell-inner { + background-color: var(--primary-color); } - } - :global(.ant-picker-today-btn) { - color: var(--primary-color); - - &:hover { - color: var(--primary-color); + .ant-picker-cell-today .ant-picker-cell-inner { + &::before { + border: 1px solid var(--primary-color); + } } - &:active { - color: var(--primary-color); + .ant-picker-today-btn { + &, + &:hover, + &:active { + color: var(--primary-color); + } } } } - -:global(.ant-picker-focused) { - border-color: var(--primary-color) !important; -} diff --git a/src/pages/Home/AverageBlockTimeChart/styled.tsx b/src/pages/Home/AverageBlockTimeChart/styled.tsx index 7047e7ee6..46a436996 100644 --- a/src/pages/Home/AverageBlockTimeChart/styled.tsx +++ b/src/pages/Home/AverageBlockTimeChart/styled.tsx @@ -2,8 +2,8 @@ import styled from 'styled-components' import { Link } from 'react-router-dom' export const HomeChartLink = styled(Link)` - div { - cursor: pointer !important; + canvas { + cursor: pointer; } ` diff --git a/src/pages/Home/HashRateChart/styled.tsx b/src/pages/Home/HashRateChart/styled.tsx index 7047e7ee6..46a436996 100644 --- a/src/pages/Home/HashRateChart/styled.tsx +++ b/src/pages/Home/HashRateChart/styled.tsx @@ -2,8 +2,8 @@ import styled from 'styled-components' import { Link } from 'react-router-dom' export const HomeChartLink = styled(Link)` - div { - cursor: pointer !important; + canvas { + cursor: pointer; } ` diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx index 111d1226d..ac63d6db3 100644 --- a/src/pages/NftCollections/List.tsx +++ b/src/pages/NftCollections/List.tsx @@ -323,7 +323,7 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: Array{`${item.creator.slice(0, 8)}...${item.creator.slice(-8)}`} diff --git a/src/pages/NftCollections/styles.module.scss b/src/pages/NftCollections/styles.module.scss index 18d0a5a24..4823b570d 100644 --- a/src/pages/NftCollections/styles.module.scss +++ b/src/pages/NftCollections/styles.module.scss @@ -154,10 +154,10 @@ a { display: flex; + align-items: center; justify-content: space-between; color: var(--primary-color); padding: 10px 0 10px 10px; - margin-right: 8px; border-radius: 8px; &:hover { @@ -166,6 +166,10 @@ cursor: pointer; } + &[data-is-active='true'] { + pointer-events: none; + } + &[data-is-active='false'] { color: #000; @@ -186,6 +190,10 @@ border-radius: 8px; box-shadow: 0 2px 10px 0 #eee; } + + .ant-popover-inner-content { + padding: 14px 24px 14px 16px; + } } } @@ -270,12 +278,6 @@ div[data-role='mobile-list'] { dt::after { content: ':'; } - - dd { - a { - font-weight: 500 !important; - } - } } .holderMinted { @@ -311,14 +313,6 @@ div[data-role='mobile-list'] { display: block; } } - - .antPopover { - :global { - .ant-popover-inner-content { - padding: 14px 15px 14px 12px !important; - } - } - } } @media screen and (width <= 350px) { diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx index b0a37c14c..ae383a85e 100644 --- a/src/pages/Script/ScriptsComp.tsx +++ b/src/pages/Script/ScriptsComp.tsx @@ -215,7 +215,9 @@ export const CodeHashMessage = ({ codeHash }: { codeHash: string }) => { const setToast = useSetToast() return (
- {codeHash} +
+ {codeHash} +
{ diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss index 13d04a455..db280e2be 100644 --- a/src/pages/Script/styles.module.scss +++ b/src/pages/Script/styles.module.scss @@ -24,27 +24,37 @@ background-color: #fff; border-radius: 6px 6px 0 0; - :global(.ant-tabs-nav::before) { - border-bottom-width: 4px; - } + :global { + .ant-tabs-nav { + &::before { + border-bottom-width: 4px; + } + } - :global(.ant-tabs-nav-list) { - margin-left: 40px; - } + .ant-tabs-nav-list { + margin-left: 40px; + } - :global(.ant-tabs-tab-btn) { - color: #333 !important; - font-weight: 400; - font-size: 20px; - line-height: 23px; - margin-bottom: 0; - } + .ant-tabs-tab-btn { + color: #333; + font-weight: 400; + font-size: 20px; + line-height: 23px; + margin-bottom: 0; + + &[aria-selected='true'] { + font-weight: 500; + } + } - :global(.ant-tabs-tab-btn[aria-selected='true']) { - font-weight: 500; + .ant-tabs-tab-active { + .ant-tabs-tab-btn { + color: #333; + } + } } - :global(.ant-tabs-ink-bar) { + & > :global(.ant-tabs-nav .ant-tabs-ink-bar) { background: linear-gradient( to right, transparent 30%, @@ -52,8 +62,8 @@ var(--primary-color) 70%, transparent 70% ); - height: 3px !important; - bottom: 3px !important; + height: 3px; + bottom: 3px; } } @@ -123,7 +133,7 @@ } :global(.transaction__cell__info__content) { - width: fit-content !important; + width: fit-content; padding: 0 20px; line-height: 0; } @@ -140,19 +150,19 @@ min-width: 0; .codeHash { - width: 350px !important; + width: 350px; margin-right: 16px; } @media screen and (width <= 1300px) { .codeHash { - width: 280px !important; + width: 280px; } } @media screen and (width <= 750px) { .codeHash { - width: 600px !important; + width: 600px; } } } diff --git a/src/pages/Tokens/styled.tsx b/src/pages/Tokens/styled.tsx index f551010c7..25fbf07dc 100644 --- a/src/pages/Tokens/styled.tsx +++ b/src/pages/Tokens/styled.tsx @@ -88,11 +88,12 @@ export const TokensTableTitle = styled.div` height: fit-content; padding: 5px 20px; - > span { + // This selector is just to increase the specificity. + > span:nth-child(n) { display: inline-block; white-space: nowrap; margin: 10px 0; - flex: 0 !important; + flex: 0; } } ` From bf2865fe824871e58ae149d53a72f6c0e5359eef Mon Sep 17 00:00:00 2001 From: WhiteMind Date: Mon, 9 Oct 2023 10:05:49 +0800 Subject: [PATCH 3/4] Refactor: optimize and simplify the routes code (#108) refactor: optimize and simplify the routes code --- src/routes/index.tsx | 255 ++++++++++++------------------------------- src/types/index.d.ts | 10 -- 2 files changed, 69 insertions(+), 196 deletions(-) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 1e08bbb1a..933f9f947 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,6 +1,5 @@ -import { useEffect, Suspense, lazy, Component } from 'react' -import { BrowserRouter as Router, Route, Redirect, Switch, useLocation } from 'react-router-dom' -import { createBrowserHistory } from 'history' +import { Suspense, lazy, Component } from 'react' +import { BrowserRouter as Router, Route, Redirect, Switch, RouteProps } from 'react-router-dom' import Page from '../components/Page' import Header from '../components/Header' import Footer from '../components/Footer' @@ -53,297 +52,191 @@ const ScriptList = lazy(() => import('../pages/ScriptList')) const FeeRateTracker = lazy(() => import('../pages/FeeRateTracker')) const ExportTransactions = lazy(() => import('../pages/ExportTransactions')) -const Containers: CustomRouter.Route[] = [ +const routes: RouteProps[] = [ { - name: 'Home', path: '/', - exact: true, - comp: Home, + component: Home, }, { - name: 'BlockList', path: '/block/list', - exact: true, - comp: BlockList, + component: BlockList, }, { - name: 'Address', path: '/address/:address', - exact: true, - comp: Address, + render: routeProps => { + const { pathname } = routeProps.location + if (isChainTypeError(pathname.substring(pathname.lastIndexOf('/') + 1))) { + return + } + return
+ }, }, { - name: 'Script', path: '/script/:codeHash/:hashType/:tab?', - exact: true, - comp: ScriptPage, + component: ScriptPage, }, { - name: 'Block', path: '/block/:param', - exact: true, - comp: Block, + component: Block, }, { - name: 'TransactionList', path: '/transaction/list', - exact: true, - comp: TransactionList, + component: TransactionList, }, { - name: 'Transaction', path: '/transaction/:hash', - exact: true, - comp: Transaction, + component: Transaction, }, { - name: 'SimpleUDT', path: '/sudt/:hash', - exact: true, - comp: SimpleUDT, + component: SimpleUDT, }, { - name: 'NftCollections', path: '/nft-collections', - exact: true, - comp: NftCollections, + component: NftCollections, }, { - name: 'NftCollectionInfo', path: '/nft-collections/:id', - exact: true, - comp: NftCollectionInfo, + component: NftCollectionInfo, }, { - name: 'NftInfo', path: '/nft-info/:collection/:id', - exact: true, - comp: NftInfo, + component: NftInfo, }, { - name: 'NervosDao', path: '/nervosdao', - exact: true, - comp: NervosDao, + component: NervosDao, }, { - name: 'Tokens', path: '/tokens', - exact: true, - comp: Tokens, + component: Tokens, }, { - name: 'Charts', path: '/charts', - exact: true, - comp: StatisticsChart, + component: StatisticsChart, }, { - name: 'DifficultyHashRateChart', path: '/charts/difficulty-hash-rate', - exact: true, - comp: DifficultyHashRateChart, + component: DifficultyHashRateChart, }, { - name: 'DifficultyUncleRateEpochChart', path: '/charts/epoch-time-length', - exact: true, - comp: DifficultyUncleRateEpochChart, + component: DifficultyUncleRateEpochChart, }, { - name: 'DifficultyChart', path: '/charts/difficulty', - exact: true, - comp: DifficultyChart, + component: DifficultyChart, }, { - name: 'HashRateChart', path: '/charts/hash-rate', - exact: true, - comp: HashRateChart, + component: HashRateChart, }, { - name: 'UncleRateChart', path: '/charts/uncle-rate', - exact: true, - comp: UncleRateChart, + component: UncleRateChart, }, { - name: 'MinerAddressDistributionChart', path: '/charts/miner-address-distribution', - exact: true, - comp: MinerAddressDistributionChart, + component: MinerAddressDistributionChart, }, { - name: 'MinerVersionDistributionChart', path: '/charts/miner-version-distribution', - exact: true, - comp: MinerVersionDistributionChart, + component: MinerVersionDistributionChart, }, { - name: 'TransactionCountChart', path: '/charts/transaction-count', - exact: true, - comp: TransactionCountChart, + component: TransactionCountChart, }, { - name: 'AddressCountChart', path: '/charts/address-count', - exact: true, - comp: AddressCountChart, + component: AddressCountChart, }, { - name: 'TotalDaoDepositChart', path: '/charts/total-dao-deposit', - exact: true, - comp: TotalDaoDepositChart, + component: TotalDaoDepositChart, }, { - name: 'NewDaoDepositChart', path: '/charts/new-dao-deposit', - exact: true, - comp: NewDaoDepositChart, + component: NewDaoDepositChart, }, { - name: 'CirculationRatioChart', path: '/charts/circulation-ratio', - exact: true, - comp: CirculationRatioChart, + component: CirculationRatioChart, }, { - name: 'CellCountChart', path: '/charts/cell-count', - exact: true, - comp: CellCountChart, + component: CellCountChart, }, { - name: 'AddressBalanceRankChart', path: '/charts/address-balance-rank', - exact: true, - comp: AddressBalanceRankChart, + component: AddressBalanceRankChart, }, { - name: 'BalanceDistributionChart', path: '/charts/balance-distribution', - exact: true, - comp: BalanceDistributionChart, + component: BalanceDistributionChart, }, { - name: 'TxFeeHistoryChart', path: '/charts/tx-fee-history', - exact: true, - comp: TxFeeHistoryChart, + component: TxFeeHistoryChart, }, { - name: 'BlockTimeDistributionChart', path: '/charts/block-time-distribution', - exact: true, - comp: BlockTimeDistributionChart, + component: BlockTimeDistributionChart, }, { - name: 'AverageBlockTimeChart', path: '/charts/average-block-time', - exact: true, - comp: AverageBlockTimeChart, + component: AverageBlockTimeChart, }, { - name: 'EpochTimeDistributionChart', path: '/charts/epoch-time-distribution', - exact: true, - comp: EpochTimeDistributionChart, + component: EpochTimeDistributionChart, }, { - name: 'TotalSupplyChart', path: '/charts/total-supply', - exact: true, - comp: TotalSupplyChart, + component: TotalSupplyChart, }, { - name: 'AnnualPercentageCompensationChart', path: '/charts/nominal-apc', - exact: true, - comp: AnnualPercentageCompensationChart, + component: AnnualPercentageCompensationChart, }, { - name: 'SecondaryIssuanceChart', path: '/charts/secondary-issuance', - exact: true, - comp: SecondaryIssuanceChart, + component: SecondaryIssuanceChart, }, { - name: 'InflationRateChart', path: '/charts/inflation-rate', - exact: true, - comp: InflationRateChart, + component: InflationRateChart, }, { - name: 'LiquidityChart', path: '/charts/liquidity', - exact: true, - comp: LiquidityChart, + component: LiquidityChart, }, { - name: 'SearchFail', path: '/search/fail', - exact: true, - comp: SearchFail, + component: SearchFail, }, { - name: 'ScriptList', path: '/scripts', - exact: true, - comp: ScriptList, + component: ScriptList, }, { - name: 'FeeRateTracker', path: '/fee-rate-tracker', - exact: true, - comp: FeeRateTracker, + component: FeeRateTracker, }, { - name: '404', path: '/404', - exact: true, - comp: NotFoundPage, + component: NotFoundPage, }, { - name: 'Error', path: '/error', - exact: true, - comp: ErrorPage, + component: ErrorPage, }, { - name: 'ExportTransactions', path: '/export-transactions', - exact: true, - comp: ExportTransactions, + component: ExportTransactions, }, ] -const useRouter = (callback: Function) => { - const history = createBrowserHistory() - useEffect(() => { - let currentUrl = `${history.location.pathname}${history.location.search}` - const listen = history.listen((location: any) => { - if (currentUrl !== `${location.pathname}${location.search}`) { - callback() - } - currentUrl = `${location.pathname}${location.search}` - }) - return () => { - listen() - } - }, [callback, history]) -} - -const RouterComp = ({ container, routeProps }: { container: CustomRouter.Route; routeProps: any }) => { - const { pathname = '' } = useLocation() - if (container.name === 'Address' && isChainTypeError(pathname.substring(pathname.lastIndexOf('/') + 1))) { - return - } - return -} - type PageErrorBoundaryState = { error?: Error | null info: { @@ -393,34 +286,24 @@ class PageErrorBoundary extends Component { - useRouter(() => { - window.scrollTo(0, 0) - }) - return ( - ( - -
- }> - - - {Containers.map(container => ( - } - /> - ))} - - - -