fix(frontend): fix some api issues

utxostack · Aug 2, 2024 · 262d191 · 262d191
1 parent d0165a8
commit 262d191
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 22 deletions.
diff --git a/frontend/src/apis/explorer-graphql.ts b/frontend/src/apis/explorer-graphql.ts
@@ -59,6 +59,7 @@ class ExplorerGraphql {
                     hashType
                     args
                   }
+                  cellType
                   xudtInfo {
                     symbol
                     amount
@@ -190,6 +191,7 @@ class ExplorerGraphql {
     return request<{
       rgbppCoin: {
         transactions: RGBppTransaction[]
+        transactionsCount: number
       }
     }>(
       this.serverURL,
@@ -198,6 +200,7 @@ class ExplorerGraphql {
           rgbppCoin(
             typeHash: "${typeHash}"
           ) {
+            transactionsCount
             transactions(page: ${page}, pageSize: ${pageSize}) {
               ckbTxHash
               btcTxid
@@ -729,6 +732,8 @@ class ExplorerGraphql {
               transactionsCount
             }
             reward
+            size
+            confirmations
           }
         }
       `,

diff --git a/frontend/src/apis/types/explorer-graphql.ts b/frontend/src/apis/types/explorer-graphql.ts
@@ -59,6 +59,14 @@ export interface RGBppCoin {
   issuer: string
   deployedAt: string | number | null
   typeScript: TypeScript
+  transactionsCount: number
+}
+
+export enum CellType {
+  XUDT = 'XUDT',
+  SUDT = 'SUDT',
+  DOB = 'DOB',
+  MNFT = 'mNFT',
 }
 
 export interface RGBppTransaction {
@@ -82,6 +90,7 @@ export interface CkbCell {
     txHash: string
     index: number
   }
+  cellType: CellType
 }
 
 export interface BtcTransaction {
@@ -189,6 +198,8 @@ export interface CkbBlock {
   totalFee: number
   miner: CkbAddress
   reward: number
+  size: number
+  confirmations: number
 }
 
 export interface BtcBlock {

diff --git a/frontend/src/app/[lang]/assets/coins/[typeHash]/transactions/page.tsx b/frontend/src/app/[lang]/assets/coins/[typeHash]/transactions/page.tsx
@@ -4,12 +4,12 @@ import { HStack, VStack } from 'styled-system/jsx'
 import { explorerGraphql } from '@/apis/explorer-graphql'
 import LinkOutlineIcon from '@/assets/link-outline.svg'
 import { AgoTimeFormatter } from '@/components/ago-time-formatter'
+import { Amount } from '@/components/last-rgbpp-txns-table/amount'
 import { LayerType } from '@/components/layer-type'
 import { PaginationSearchParams } from '@/components/pagination-searchparams'
 import { Table, Text } from '@/components/ui'
 import Link from '@/components/ui/link'
 import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers'
-import { resolveCellDiff } from '@/lib/resolve-cell-diff'
 import { resolveLayerTypeFromRGBppTransaction } from '@/lib/resolve-layer-type-from-rgbpp-transaction'
 import { resolveRGBppTxHash } from '@/lib/resolve-rgbpp-tx-hash'
 import { resolveSearchParamsPage } from '@/lib/resolve-searchparams-page'
@@ -36,7 +36,6 @@ export default async function Page({ params: { typeHash } }: { params: { typeHas
         <Table.Body>
           {response.rgbppCoin.transactions.map((tx) => {
             const txHash = resolveRGBppTxHash(tx)
-            const cellDiff = resolveCellDiff(tx.ckbTransaction)
             return (
               <Table.Row key={tx.ckbTxHash}>
                 <Table.Cell>
@@ -49,7 +48,7 @@ export default async function Page({ params: { typeHash } }: { params: { typeHas
                   <LayerType type={resolveLayerTypeFromRGBppTransaction(tx)} />
                 </Table.Cell>
                 <Table.Cell>
-                  <b>{formatNumber(cellDiff.value)}</b> {cellDiff.symbol}
+                  <Amount ckbTransaction={tx.ckbTransaction} />
                 </Table.Cell>
                 <Table.Cell w="165px">
                   <AgoTimeFormatter time={tx.timestamp} tooltip />
@@ -61,8 +60,8 @@ export default async function Page({ params: { typeHash } }: { params: { typeHas
       </Table.Root>
 
       <HStack ml="auto" gap="16px" mt="auto" p="30px">
-        <Text fontSize="14px">{t(i18n)`Total ${100} Items`}</Text>
-        <PaginationSearchParams count={100} pageSize={pageSize} />
+        <Text fontSize="14px">{t(i18n)`Total ${formatNumber(response.rgbppCoin.transactionsCount)} Items`}</Text>
+        <PaginationSearchParams count={response.rgbppCoin.transactionsCount} pageSize={pageSize} />
       </HStack>
     </VStack>
   )

diff --git a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx
@@ -10,6 +10,7 @@ import { Copier } from '@/components/copier'
 import { LinkTabs } from '@/components/link-tabs'
 import { Heading, Text } from '@/components/ui'
 import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers'
+import { formatNumber } from '@/lib/string/format-number'
 
 export default async function Layout({
   params: { hashOrHeight },
@@ -47,8 +48,8 @@ export default async function Layout({
           border="1px solid currentColor"
           ml="auto"
         >
-          {'- '}
-          <Text as="span" fontSize="14px" fontWeight="medium">
+          {formatNumber(data.ckbBlock.confirmations)}
+          <Text as="span" fontSize="14px" fontWeight="medium" ml="4px">
             {t(i18n)`Confirmations`}
           </Text>
         </Box>

diff --git a/frontend/src/app/[lang]/explorer/btc/page.tsx b/frontend/src/app/[lang]/explorer/btc/page.tsx
@@ -5,11 +5,10 @@ import { explorerGraphql } from '@/apis/explorer-graphql'
 import { Info } from '@/app/[lang]/explorer/btc/info'
 import BtcIcon from '@/assets/chains/btc.svg'
 import { AgoTimeFormatter } from '@/components/ago-time-formatter'
+import { Amount } from '@/components/last-rgbpp-txns-table/amount'
 import { Heading, Table, Text } from '@/components/ui'
 import Link from '@/components/ui/link'
 import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers'
-import { resolveCellDiff } from '@/lib/resolve-cell-diff'
-import { formatNumber } from '@/lib/string/format-number'
 import { truncateMiddle } from '@/lib/string/truncate-middle'
 
 export default async function Page() {
@@ -25,7 +24,6 @@ export default async function Page() {
         <Table.Root>
           <Table.Body>
             {rgbppLatestTransactions.txs.map((tx) => {
-              const cellDiff = resolveCellDiff(tx.ckbTransaction)
               return (
                 <Table.Row key={tx.btcTxid} lineHeight="36px">
                   <Table.Cell>
@@ -43,7 +41,7 @@ export default async function Page() {
                     <AgoTimeFormatter time={tx.timestamp} tooltip />
                   </Table.Cell>
                   <Table.Cell>
-                    <b>{formatNumber(cellDiff.value)}</b> {cellDiff.symbol}
+                    <Amount ckbTransaction={tx.ckbTransaction} />
                   </Table.Cell>
                 </Table.Row>
               )

diff --git a/frontend/src/app/[lang]/explorer/ckb/page.tsx b/frontend/src/app/[lang]/explorer/ckb/page.tsx
@@ -5,11 +5,10 @@ import { explorerGraphql } from '@/apis/explorer-graphql'
 import { Info } from '@/app/[lang]/explorer/ckb/info'
 import BtcIcon from '@/assets/chains/btc.svg'
 import { AgoTimeFormatter } from '@/components/ago-time-formatter'
+import { Amount } from '@/components/last-rgbpp-txns-table/amount'
 import { Heading, Table, Text } from '@/components/ui'
 import Link from '@/components/ui/link'
 import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers'
-import { resolveCellDiff } from '@/lib/resolve-cell-diff'
-import { formatNumber } from '@/lib/string/format-number'
 import { truncateMiddle } from '@/lib/string/truncate-middle'
 
 export default async function Page() {
@@ -25,7 +24,6 @@ export default async function Page() {
         <Table.Root>
           <Table.Body>
             {rgbppLatestTransactions.txs.map((tx) => {
-              const cellDiff = resolveCellDiff(tx.ckbTransaction)
               return (
                 <Table.Row key={tx.btcTxid} lineHeight="36px">
                   <Table.Cell>
@@ -43,7 +41,7 @@ export default async function Page() {
                     <AgoTimeFormatter time={tx.timestamp} tooltip />
                   </Table.Cell>
                   <Table.Cell>
-                    <b>{formatNumber(cellDiff.value)}</b> {cellDiff.symbol}
+                    <Amount ckbTransaction={tx.ckbTransaction} />
                   </Table.Cell>
                 </Table.Row>
               )

diff --git a/frontend/src/components/ckb/ckb-block-overflow.tsx b/frontend/src/components/ckb/ckb-block-overflow.tsx
@@ -13,7 +13,7 @@ import { formatNumber } from '@/lib/string/format-number'
 export function CkbBlockOverflow({
   block,
 }: {
-  block: Pick<CkbBlock, 'timestamp' | 'transactionsCount' | 'miner' | 'reward'>
+  block: Pick<CkbBlock, 'timestamp' | 'transactionsCount' | 'miner' | 'reward' | 'size' | 'confirmations'>
 }) {
   const i18n = getI18nFromHeaders()
   return (
@@ -36,8 +36,8 @@ export function CkbBlockOverflow({
           <VStack borderRight="1px solid" borderRightColor="border.primary" gap="15px">
             <Text color="text.third" fontSize="14px">{t(i18n)`Block size`}</Text>
             <Text color="brand">
-              {'- '}
-              <Text as="span" color="12px">
+              {formatNumber(block.size)}
+              <Text as="span" color="12px" ml="4px">
                 {t(i18n)`bytes`}
               </Text>
             </Text>

diff --git a/frontend/src/components/last-rgbpp-txns-table/amount.tsx b/frontend/src/components/last-rgbpp-txns-table/amount.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { Trans } from '@lingui/macro'
+
+import { CellType, CkbTransaction } from '@/apis/types/explorer-graphql'
+import { resolveCellDiff } from '@/lib/resolve-cell-diff'
+import { formatNumber } from '@/lib/string/format-number'
+
+export function Amount({ ckbTransaction }: { ckbTransaction?: CkbTransaction }) {
+  const cellDiff = resolveCellDiff(ckbTransaction)
+
+  if (!ckbTransaction) return <Trans>-</Trans>
+
+  const dobInput =
+    ckbTransaction?.inputs.find((input) => input.cellType === CellType.DOB || input.cellType === CellType.MNFT) ||
+    ckbTransaction?.outputs.find((input) => input.cellType === CellType.DOB || input.cellType === CellType.MNFT)
+
+  if (dobInput) {
+    return (
+      <Trans>
+        <b>1</b> DOB
+      </Trans>
+    )
+  }
+
+  return (
+    <>
+      <b>{formatNumber(cellDiff.value)}</b> {cellDiff.symbol}
+    </>
+  )
+}
diff --git a/frontend/src/components/last-rgbpp-txns-table/index.tsx b/frontend/src/components/last-rgbpp-txns-table/index.tsx
@@ -8,15 +8,14 @@ import { explorerGraphql } from '@/apis/explorer-graphql'
 import LinkOutlineIcon from '@/assets/link-outline.svg'
 import { AgoTimeFormatter } from '@/components/ago-time-formatter'
 import { FailedFallback } from '@/components/failed-fallback'
+import { Amount } from '@/components/last-rgbpp-txns-table/amount'
 import { LayerType } from '@/components/layer-type'
 import { Loading } from '@/components/loading'
 import Link from '@/components/ui/link'
 import { Table } from '@/components/ui/primitives'
 import { QueryKey } from '@/constants/query-key'
-import { resolveCellDiff } from '@/lib/resolve-cell-diff'
 import { resolveLayerTypeFromRGBppTransaction } from '@/lib/resolve-layer-type-from-rgbpp-transaction'
 import { resolveRGBppTxHash } from '@/lib/resolve-rgbpp-tx-hash'
-import { formatNumber } from '@/lib/string/format-number'
 import { truncateMiddle } from '@/lib/string/truncate-middle'
 
 export function LastRgbppTxnsTable() {
@@ -65,7 +64,6 @@ export function LastRgbppTxnsTable() {
       <Table.Body>
         {data?.rgbppLatestTransactions.txs.map((tx) => {
           const txHash = resolveRGBppTxHash(tx)
-          const cellDiff = resolveCellDiff(tx.ckbTransaction)
           return (
             <Table.Row key={tx.ckbTxHash}>
               <Table.Cell>
@@ -78,7 +76,7 @@ export function LastRgbppTxnsTable() {
                 <LayerType type={resolveLayerTypeFromRGBppTransaction(tx)} />
               </Table.Cell>
               <Table.Cell>
-                <b>{formatNumber(cellDiff.value)}</b> {cellDiff.symbol}
+                <Amount ckbTransaction={tx.ckbTransaction} />
               </Table.Cell>
               <Table.Cell w="165px">
                 <AgoTimeFormatter time={tx.timestamp} tooltip />