feat(neuron-ui): add difficulty formatter

packages/neuron-ui/src/components/Overview/index.tsx

@@ -7,7 +7,7 @@ import PropertyList, { Property } from 'widgets/PropertyList'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { updateTransactionList } from 'states/stateProvider/actionCreators'
 
-import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
+import { localNumberFormatter, shannonToCKBFormatter, difficultyFormatter } from 'utils/formatters'
 import { epochParser } from 'utils/parsers'
 import { PAGE_SIZE, Routes, CONFIRMATION_THRESHOLD } from 'utils/const'
 import { backToTop } from 'utils/animations'
@@ -104,7 +104,7 @@ const Overview = ({
       },
       {
         label: t('overview.difficulty'),
-        value: localNumberFormatter(+difficulty),
+        value: difficultyFormatter(difficulty),
       },
     ],
     [t, chain, epoch, difficulty, tipBlockNumber]

packages/neuron-ui/src/containers/Main/hooks.ts

@@ -42,7 +42,7 @@ export const useSyncChainData = ({ chainURL, dispatch }: { chainURL: string; dis
               tipBlockHash: header.hash,
               tipBlockTimestamp: +header.timestamp,
               chain: chainInfo.chain,
-              difficulty: `${BigInt(chainInfo.difficulty)}`,
+              difficulty: BigInt(chainInfo.difficulty),
               epoch: chainInfo.epoch,
             },
           })

packages/neuron-ui/src/states/initStates/app.ts

@@ -5,7 +5,7 @@ const appState: State.App = {
   tipBlockHash: '',
   tipBlockTimestamp: 0,
   chain: '',
-  difficulty: '',
+  difficulty: BigInt(0),
   epoch: '',
   send: {
     txID: '',

packages/neuron-ui/src/states/stateProvider/reducer.ts

@@ -197,7 +197,7 @@ export const reducer = (
           ...app,
           tipBlockNumber: '0',
           chain: '',
-          difficulty: '',
+          difficulty: BigInt(0),
           epoch: '',
         },
         chain: {

packages/neuron-ui/src/stories/Overview.stories.tsx

@@ -16,7 +16,7 @@ const stateTemplate = {
   app: {
     ...initStates.app,
     epoch: '1',
-    difficulty: '0x111111',
+    difficulty: BigInt('0x111111'),
     chain: 'chain_dev',
   },
   wallet: {
@@ -77,7 +77,7 @@ stories.addDecorator(withKnobs).add('With knobs', () => {
     app: {
       ...initStates.app,
       epoch: text('Epoch', '1'),
-      difficulty: text('Difficulty', '0x111'),
+      difficulty: BigInt(100000),
       chain: text('Chain', 'chain_dev'),
     },
     wallet: {

packages/neuron-ui/src/tests/formatters/difficultyFormatter/fixtures.json

@@ -0,0 +1,8 @@
+[
+  { "difficulty": 0, "expected": "0 H/s" },
+  { "difficulty": 123, "expected": "123 H/s" },
+  { "difficulty": 12345, "expected": "12,345 H/s" },
+  { "difficulty": 123454669, "expected": "123,454.67 KH/s" },
+  { "difficulty": 1234546698945, "expected": "1,234.55 GH/s" },
+  { "difficulty": 100003439, "expected": "100,003.44 KH/s" }
+]

packages/neuron-ui/src/tests/formatters/difficultyFormatter/index.test.ts

@@ -0,0 +1,9 @@
+import { difficultyFormatter } from 'utils/formatters'
+import fixtures from './fixtures.json'
+
+describe('test difficulty formatter', () => {
+  test.each(fixtures)(`%s => %s`, ({ difficulty, expected }) => {
+    const str = difficultyFormatter(BigInt(difficulty))
+    expect(str).toBe(expected)
+  })
+})

packages/neuron-ui/src/types/App/index.d.ts

@@ -77,7 +77,7 @@ declare namespace State {
     tipBlockHash: string
     tipBlockTimestamp: number
     chain: string
-    difficulty: string
+    difficulty: bigint
     epoch: string
     send: Send
     passwordRequest: {

packages/neuron-ui/src/utils/formatters.ts

@@ -177,13 +177,39 @@ export const failureResToNotification = (res: any): State.Message => {
   }
 }
 
+export const difficultyFormatter = (value: bigint) => {
+  const units = new Map([
+    ['YH/s', 1e24],
+    ['ZH/s', 1e21],
+    ['EH/s', 1e18],
+    ['PH/s', 1e15],
+    ['TH/s', 1e12],
+    ['GH/s', 1e9],
+    ['MH/s', 1e6],
+    ['KH/s', 1e3],
+  ])
+
+  /* eslint-disable no-restricted-syntax */
+  for (const [unit, range] of units) {
+    if (value >= range * 1e3) {
+      const integer = value / BigInt(range)
+      const decimal = (Number(value) / range).toFixed(2).split('.')[1]
+      return `${localNumberFormatter(integer)}.${decimal} ${unit}`
+    }
+  }
+  /* eslint-enable no-restricted-syntax */
+
+  return `${localNumberFormatter(value)} H/s`
+}
+
 export default {
   queryFormatter,
   currencyFormatter,
   CKBToShannonFormatter,
   shannonToCKBFormatter,
   localNumberFormatter,
   uniformTimeFormatter,
+  difficultyFormatter,
   addressesToBalance,
   outputsToTotalAmount,
   failureResToNotification,