Merge branch 'nervosnetwork:develop' into develop

src/pages/FeeRateTracker/FeeRateTrackerComp.tsx

@@ -41,8 +41,7 @@ const calcFeeRate = (tfrs: FeeRateTracker.TransactionFeeRate[]): string =>
 const colors = ChartColor.moreColors
 
 export const FeeRateCards = ({ transactionFeeRates }: { transactionFeeRates: FeeRateTracker.TransactionFeeRate[] }) => {
-  const validFeeRateList = transactionFeeRates.filter(feeRate => feeRate.confirmationTime)
-  const allFrs = validFeeRateList.sort((a, b) => a.confirmationTime - b.confirmationTime)
+  const allFrs = transactionFeeRates.sort((a, b) => a.confirmationTime - b.confirmationTime)
   const avgConfirmationTime = getWeightedMedian(allFrs)
 
   const lowFrs = allFrs.filter(r => r.confirmationTime >= avgConfirmationTime)

src/pages/FeeRateTracker/index.tsx

@@ -12,15 +12,19 @@ import {
   LastNDaysTransactionFeeRateChart,
 } from './FeeRateTrackerComp'
 import Loading from '../../components/Loading'
+import { useAppState } from '../../contexts/providers'
 import i18n from '../../utils/i18n'
 import { localeNumberString } from '../../utils/number'
+import { getFeeRateSamples } from '../../utils/chart'
 
 const FeeRateTracker = () => {
   const lastFetchedTime = useRef(Number.MAX_SAFE_INTEGER)
   const deltaSecond = useRef(0)
   const [secondAfterUpdate, setSecondAfterUpdate] = useState<number>(0)
   const isMobile = useIsMobile()
 
+  const { statistics } = useAppState()
+
   const { data: transactionFeesStatistic } = useQuery<FeeRateTracker.TransactionFeesStatistic>(
     ['statistics-transaction_fees'],
     () =>
@@ -62,7 +66,12 @@ const FeeRateTracker = () => {
             </div>
             <div className={styles.cards}>
               {transactionFeesStatistic ? (
-                <FeeRateCards transactionFeeRates={transactionFeesStatistic.transactionFeeRates} />
+                <FeeRateCards
+                  transactionFeeRates={getFeeRateSamples(
+                    transactionFeesStatistic.transactionFeeRates,
+                    Number(statistics.transactionsCountPerMinute),
+                  )}
+                />
               ) : (
                 <Loading show />
               )}

src/utils/chart.ts

@@ -99,3 +99,29 @@ export const parseInterval = (max: number, min: number) => {
   const factor = 10 ** (length > 2 ? length - 2 : 0)
   return (Math.ceil(interval / factor) + 1) * factor
 }
+
+// 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) => {
+  if (feeRates.length === 0) return feeRates
+
+  const SAMPLES_MIN_COUNT = 100
+
+  const sampleCount = Math.max(SAMPLES_MIN_COUNT, Number.isNaN(TPM) ? 0 : Math.floor(TPM) * 10)
+
+  const samples = feeRates
+    .filter(i => i.confirmationTime)
+    .sort((a, b) => a.confirmationTime - b.confirmationTime)
+    .reduce<Array<FeeRateTracker.TransactionFeeRate>>((acc, cur) => {
+      const last = acc[acc.length - 1]
+      if (!last || last.feeRate >= cur.feeRate) {
+        return [...acc, cur]
+      }
+      return acc
+    }, [])
+    .sort((a, b) => b.timestamp - a.timestamp)
+    .slice(0, sampleCount)
+
+  return samples
+}