feat: introduce price service

src/components/GraphChannelList/index.tsx

@@ -5,6 +5,7 @@ import type { FC } from 'react'
 import { Link } from 'react-router-dom'
 import { TIME_TEMPLATE } from '../../constants/common'
 import type { Fiber } from '../../services/ExplorerService/fetcher'
+import { parseNumericAbbr } from '../../utils/chart'
 import { formalizeChannelAsset } from '../../utils/fiber'
 import { localeNumberString } from '../../utils/number'
 import styles from './index.module.scss'
@@ -48,15 +49,15 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({
               <dl className={styles.amount}>
                 <dt>Liquidity</dt>
                 <dd>
-                  <span>{totalLiquidity}</span>
+                  <span>{`${parseNumericAbbr(totalLiquidity)} ${funding.symbol}`}</span>
                 </dd>
               </dl>
 
               <dl className={styles.funding}>
                 <dt>Source</dt>
                 <dd>
                   <Tooltip title={`${localeNumberString(funding.value)} ${funding.symbol}`}>
-                    <span>{`${funding.amount} ${funding.symbol}`}</span>
+                    <span>{`${parseNumericAbbr(funding.amount)} ${funding.symbol}`}</span>
                   </Tooltip>
                   from
                   <Tooltip title={ch.openTransactionInfo.address}>

src/pages/Fiber/GraphNode/index.tsx

@@ -21,6 +21,7 @@ import { Fiber } from '../../../services/ExplorerService/fetcher'
 import { useSearchParams } from '../../../hooks'
 import { TIME_TEMPLATE } from '../../../constants/common'
 import { formalizeChannelAsset } from '../../../utils/fiber'
+import { fetchPrices } from '../../../services/UtilityService'
 
 const GraphNode = () => {
   const [t] = useTranslation()
@@ -39,6 +40,12 @@ const GraphNode = () => {
     enabled: !!id,
   })
 
+  const { data: prices } = useQuery({
+    queryKey: ['utility', 'prices'],
+    queryFn: fetchPrices,
+    refetchInterval: 30000,
+  })
+
   const node = data?.data
 
   const connectId = addr
@@ -108,7 +115,7 @@ const GraphNode = () => {
         accounts: [
           {
             address: c.openTransactionInfo.address,
-            amount: `${assets.funding.amount} ${assets.funding.symbol}`,
+            amount: `${parseNumericAbbr(assets.funding.amount)} ${assets.funding.symbol}`,
           },
         ],
       }
@@ -127,7 +134,7 @@ const GraphNode = () => {
             accounts:
               assets.close?.map(a => ({
                 address: a.addr,
-                amount: `${a.amount} ${a.symbol}`,
+                amount: `${parseNumericAbbr(a.amount)} ${a.symbol}`,
               })) ?? [],
           }
         : null
@@ -160,30 +167,41 @@ const GraphNode = () => {
         amount: BigNumber
         symbol: string
         iconFile?: string
+        usd?: BigNumber
       }
     >()
     openChannels.forEach(ch => {
+      const CKB_PRICE_ID = '0x0000000000000000000000000000000000000000000000000000000000000000'
       if (!ch.openTransactionInfo.udtInfo) {
         // ckb liquidity
         const total = list.get('ckb')?.amount ?? BigNumber(0)
+        const ckbPrice = prices?.price?.[CKB_PRICE_ID]?.price
+        const ckbAmount = total.plus(BigNumber(shannonToCkb(ch.capacity)))
+        const usd = ckbPrice ? ckbAmount.times(+ckbPrice) : undefined
         list.set('ckb', {
-          amount: total.plus(BigNumber(shannonToCkb(ch.capacity))),
+          amount: ckbAmount,
           symbol: 'CKB',
+          usd,
         })
       } else {
         // is udt
         const a = formalizeChannelAsset(ch)
         const key = ch.openTransactionInfo.udtInfo.typeHash
         const total = list.get(key)?.amount ?? BigNumber(0)
+        const amount = total.plus(BigNumber(a.funding.amount ?? 0))
+        const price = prices?.price?.[key]?.price
+        const usd = price ? amount.times(price) : undefined
+
         list.set(key, {
-          amount: total.plus(BigNumber(a.funding.amount)),
+          amount,
           symbol: a.funding.symbol ?? '',
           iconFile: ch.openTransactionInfo.udtInfo.iconFile,
+          usd,
         })
       }
     })
     return list
-  }, [openChannels])
+  }, [openChannels, prices])
 
   if (isLoading) {
     return <Loading show />
@@ -195,7 +213,7 @@ const GraphNode = () => {
 
   const thresholds = getFundingThreshold(node)
 
-  const totalCkb = parseNumericAbbr(shannonToCkb(node.totalCapacity))
+  const totalCkb = parseNumericAbbr(shannonToCkb(node.totalCapacity), 2)
 
   const handleCopy = (e: React.SyntheticEvent) => {
     const elm = e.target
@@ -291,8 +309,9 @@ const GraphNode = () => {
                       <div key={key} className={styles.liquidity}>
                         {/* TODO: need support from the backend */}
                         {/* <img src={liquidity.iconFile} alt="icon" width="12" height="12" loading="lazy" /> */}
-                        <span>{parseNumericAbbr(liquidity.amount)}</span>
+                        <span>{parseNumericAbbr(liquidity.amount, 2)}</span>
                         <span>{liquidity.symbol}</span>
+                        {liquidity.usd ? <span>{`(${parseNumericAbbr(liquidity.usd, 2)} USD)`}</span> : null}
                       </div>
                     )
                   })}

src/services/UtilityService/index.ts

@@ -0,0 +1,9 @@
+const UTILITY_ENDPOINT = 'https://ckb-utilities.random-walk.co.jp'
+
+export const fetchPrices = async (): Promise<{
+  price: Record<string, Record<'pair' | 'price', string>>
+}> => {
+  const response = await fetch(`${UTILITY_ENDPOINT}/api/price`)
+  const data = await response.json()
+  return data
+}

src/utils/fiber.tsx

@@ -1,6 +1,5 @@
 import BigNumber from 'bignumber.js'
 import { Fiber } from '../services/ExplorerService/fetcher'
-import { parseNumericAbbr } from './chart'
 import { shannonToCkb } from './util'
 
 export const formalizeChannelAsset = (ch: Fiber.Graph.Channel) => {
@@ -16,17 +15,17 @@ export const formalizeChannelAsset = (ch: Fiber.Graph.Channel) => {
     const value = BigNumber(ch.openTransactionInfo.udtInfo.amount)
     fundingValue = value.toFormat({ groupSeparator: '' })
     const a = value.dividedBy(BigNumber(10).pow(ch.openTransactionInfo.udtInfo.decimal ?? 0))
-    fundingAmount = parseNumericAbbr(a.toFormat({ groupSeparator: '' }))
+    fundingAmount = a.toFormat({ groupSeparator: '' })
     if (ch.openTransactionInfo.udtInfo.symbol) {
       fundingSymbol = ch.openTransactionInfo.udtInfo.symbol
     }
-    totalLiquidity = `${fundingAmount} ${fundingSymbol}`
+    totalLiquidity = fundingAmount
   } else {
     // is ckb funding
     fundingValue = shannonToCkb(ch.openTransactionInfo.capacity)
-    fundingAmount = parseNumericAbbr(fundingValue)
+    fundingAmount = fundingValue
     fundingSymbol = 'CKB'
-    totalLiquidity = `${parseNumericAbbr(shannonToCkb(ch.capacity))} CKB`
+    totalLiquidity = shannonToCkb(ch.capacity)
   }
 
   const close: Record<'addr' | 'value' | 'amount' | 'symbol', string>[] = []
@@ -37,7 +36,7 @@ export const formalizeChannelAsset = (ch: Fiber.Graph.Channel) => {
         const value = BigNumber(a.udtInfo.amount)
         const v = value.toFormat({ groupSeparator: '' })
         const am = value.dividedBy(BigNumber(10).pow(a.udtInfo.decimal ?? 0))
-        const amount = parseNumericAbbr(am.toFormat({ groupSeparator: '' }))
+        const amount = am.toFormat({ groupSeparator: '' })
         let symbol = ''
         if (a.udtInfo.symbol) {
           symbol = a.udtInfo.symbol
@@ -50,7 +49,7 @@ export const formalizeChannelAsset = (ch: Fiber.Graph.Channel) => {
         })
       } else {
         const v = shannonToCkb(a.capacity)
-        const am = parseNumericAbbr(v)
+        const am = v
         close.push({
           addr: a.address,
           value: v,