From 9c28e01bfeff470844bf44977b34f9499b36f51b Mon Sep 17 00:00:00 2001 From: INS Date: Thu, 1 Aug 2024 12:16:17 +0800 Subject: [PATCH 1/8] fix(frontend): fix issues --- frontend/src/apis/types/explorer-graphql.ts | 18 ++-- .../src/app/[lang]/transaction/[tx]/btc.tsx | 3 +- .../src/app/[lang]/transaction/[tx]/ckb.tsx | 3 +- frontend/src/assets/social-medias/github.svg | 3 + .../social-medias/{m.svg => medium.svg} | 0 frontend/src/components/btc/btc-utxos.tsx | 3 +- .../src/components/ckb/ckb-cell-tables.tsx | 10 +- frontend/src/components/footer.tsx | 14 +-- frontend/src/components/search-bar.tsx | 15 +-- frontend/src/constants/env.ts | 3 + frontend/src/lib/resolve-cell-diff.ts | 2 +- frontend/src/lib/string/format-number.ts | 6 +- frontend/src/locales/en/messages.po | 100 ++++++++++++------ 13 files changed, 119 insertions(+), 61 deletions(-) create mode 100644 frontend/src/assets/social-medias/github.svg rename frontend/src/assets/social-medias/{m.svg => medium.svg} (100%) diff --git a/frontend/src/apis/types/explorer-graphql.ts b/frontend/src/apis/types/explorer-graphql.ts index e3f42705..be211eb8 100644 --- a/frontend/src/apis/types/explorer-graphql.ts +++ b/frontend/src/apis/types/explorer-graphql.ts @@ -222,12 +222,14 @@ export interface RgbppStatistic { } export interface SearchResult { - query: string - btcBlock: string - btcTransaction: string - btcAddress: string - ckbBlock: string - ckbTransaction: string - ckbAddress: string - rgbppCoin: string + search: { + query: string + btcBlock: string + btcTransaction: string + btcAddress: string + ckbBlock: string + ckbTransaction: string + ckbAddress: string + rgbppCoin: string + } } diff --git a/frontend/src/app/[lang]/transaction/[tx]/btc.tsx b/frontend/src/app/[lang]/transaction/[tx]/btc.tsx index 69822c97..a8382b14 100644 --- a/frontend/src/app/[lang]/transaction/[tx]/btc.tsx +++ b/frontend/src/app/[lang]/transaction/[tx]/btc.tsx @@ -1,4 +1,3 @@ -import { i18n } from '@lingui/core' import { t } from '@lingui/macro' import { Box, HStack, VStack } from 'styled-system/jsx' @@ -9,6 +8,7 @@ import { CkbCells } from '@/components/ckb/ckb-cells' import { Copier } from '@/components/copier' import { LayerType } from '@/components/layer-type' import { Heading, Text } from '@/components/ui' +import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { resolveLayerTypeFromRGBppTransaction } from '@/lib/resolve-layer-type-from-rgbpp-transaction' export function BTCTransactionPage({ @@ -20,6 +20,7 @@ export function BTCTransactionPage({ ckbTransaction?: CkbTransaction leapDirection?: LeapDirection | null }) { + const i18n = getI18nFromHeaders() return ( diff --git a/frontend/src/app/[lang]/transaction/[tx]/ckb.tsx b/frontend/src/app/[lang]/transaction/[tx]/ckb.tsx index 1c657cc7..672850b0 100644 --- a/frontend/src/app/[lang]/transaction/[tx]/ckb.tsx +++ b/frontend/src/app/[lang]/transaction/[tx]/ckb.tsx @@ -1,4 +1,3 @@ -import { i18n } from '@lingui/core' import { t } from '@lingui/macro' import { Box, HStack, VStack } from 'styled-system/jsx' @@ -9,6 +8,7 @@ import { CkbTransactionOverflow } from '@/components/ckb/ckb-transaction-overflo import { Copier } from '@/components/copier' import { LayerType } from '@/components/layer-type' import { Heading, Text } from '@/components/ui' +import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { resolveLayerTypeFromRGBppTransaction } from '@/lib/resolve-layer-type-from-rgbpp-transaction' import { formatNumber } from '@/lib/string/format-number' @@ -21,6 +21,7 @@ export function CKBTransactionPage({ btcTransaction?: BtcTransaction leapDirection?: LeapDirection | null }) { + const i18n = getI18nFromHeaders() return ( diff --git a/frontend/src/assets/social-medias/github.svg b/frontend/src/assets/social-medias/github.svg new file mode 100644 index 00000000..d82abb19 --- /dev/null +++ b/frontend/src/assets/social-medias/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/social-medias/m.svg b/frontend/src/assets/social-medias/medium.svg similarity index 100% rename from frontend/src/assets/social-medias/m.svg rename to frontend/src/assets/social-medias/medium.svg diff --git a/frontend/src/components/btc/btc-utxos.tsx b/frontend/src/components/btc/btc-utxos.tsx index 6a25816d..a0db545f 100644 --- a/frontend/src/components/btc/btc-utxos.tsx +++ b/frontend/src/components/btc/btc-utxos.tsx @@ -1,4 +1,3 @@ -import { i18n } from '@lingui/core' import { t } from '@lingui/macro' import { Flex, HStack, VStack } from 'styled-system/jsx' @@ -7,8 +6,10 @@ import BtcIcon from '@/assets/chains/btc.svg' import { BtcUtxoTables } from '@/components/btc/btc-utxo-tables' import { Text } from '@/components/ui' import { ViewMemPool } from '@/components/view-mempool' +import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' export function BtcUtxos({ txid, vin, vout }: Pick) { + const i18n = getI18nFromHeaders() return ( diff --git a/frontend/src/components/ckb/ckb-cell-tables.tsx b/frontend/src/components/ckb/ckb-cell-tables.tsx index 1f69cab3..89b17924 100644 --- a/frontend/src/components/ckb/ckb-cell-tables.tsx +++ b/frontend/src/components/ckb/ckb-cell-tables.tsx @@ -76,13 +76,21 @@ function Cell({ cell }: { cell: CkbCell }) { - + {formatNumber(shannonToCKB(cell.capacity))}{' '} CKB + {cell.xudtInfo ? ( + + {formatNumber(cell.xudtInfo.amount, cell.xudtInfo.decimal)}{' '} + + {cell.xudtInfo.symbol} + + + ) : null} ) diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx index 83e3769e..945b8467 100644 --- a/frontend/src/components/footer.tsx +++ b/frontend/src/components/footer.tsx @@ -2,8 +2,8 @@ import { t } from '@lingui/macro' import { Center, Flex, Grid, HStack, VStack } from 'styled-system/jsx' import LogoSVG from '@/assets/logo.svg' -import DiscordSVG from '@/assets/social-medias/discord.svg' -import MIcon from '@/assets/social-medias/m.svg' +import GithubSVG from '@/assets/social-medias/github.svg' +import MediumIcon from '@/assets/social-medias/medium.svg' import TwitterSVG from '@/assets/social-medias/x.svg' import { Heading, Text } from '@/components/ui' import Link from '@/components/ui/link' @@ -30,7 +30,7 @@ export function Footer() { display="flex" justifyContent="center" alignItems="center" - href="/" + href={env.public.UTXO_STACK_TWITTER_URL} target="_blank" transition="200ms" _hover={{ @@ -49,7 +49,7 @@ export function Footer() { display="flex" justifyContent="center" alignItems="center" - href="/" + href={env.public.CKB_CELL_GITHUB_URL} target="_blank" transition="200ms" _hover={{ @@ -57,7 +57,7 @@ export function Footer() { borderColor: 'brand', }} > - + - + diff --git a/frontend/src/components/search-bar.tsx b/frontend/src/components/search-bar.tsx index 89662398..7d4e07c9 100644 --- a/frontend/src/components/search-bar.tsx +++ b/frontend/src/components/search-bar.tsx @@ -3,7 +3,7 @@ import { t, Trans } from '@lingui/macro' import { useLingui } from '@lingui/react' import { useMutation } from '@tanstack/react-query' -import { redirect } from 'next/navigation' +import { useRouter } from 'next/navigation' import { ReactNode, useState } from 'react' import { Center, Flex, type FlexProps, styled, VStack } from 'styled-system/jsx' import { useDebounceCallback } from 'usehooks-ts' @@ -54,23 +54,24 @@ function SearchResult({ } function useSearch() { + const router = useRouter() return useMutation({ async mutationFn(keyword: string) { - const search = await explorerGraphql.search(keyword) + const { search } = await explorerGraphql.search(keyword) if (search.rgbppCoin) { - return redirect(`/assets/coins/${search.rgbppCoin}`) + return router.push(`/assets/coins/${search.rgbppCoin}`) } if (search.ckbTransaction) { - return redirect(`/transaction/${search.ckbTransaction}`) + return router.push(`/transaction/${search.ckbTransaction}`) } if (search.btcTransaction) { - return redirect(`/transaction/${search.btcTransaction}`) + return router.push(`/transaction/${search.btcTransaction}`) } if (search.btcAddress) { - return redirect(`/address/${search.btcAddress}`) + return router.push(`/address/${search.btcAddress}`) } if (search.ckbAddress) { - return redirect(`/address/${search.ckbAddress}`) + return router.push(`/address/${search.ckbAddress}`) } throw new Error('Not found') }, diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts index efd9ba7a..909db091 100644 --- a/frontend/src/constants/env.ts +++ b/frontend/src/constants/env.ts @@ -19,6 +19,9 @@ const publicEnvSchema = z.object({ .string() .default('https://github.com/ckb-cell/RGBPlusPlus-design/blob/main/docs/lockscript-design-prd-en.md'), RGBPP_SDK_URL: z.string().default('https://github.com/ckb-cell/rgbpp-sdk'), + UTXO_STACK_TWITTER_URL: z.string().default('https://x.com/utxostack'), + CKB_CELL_GITHUB_URL: z.string().default('https://github.com/ckb-cell'), + UTXO_STACK_MEDIUM_URL: z.string().default('https://medium.com/@utxostack'), }) const sharedEnvSchema = z.object({ diff --git a/frontend/src/lib/resolve-cell-diff.ts b/frontend/src/lib/resolve-cell-diff.ts index a352de16..021ce0a6 100644 --- a/frontend/src/lib/resolve-cell-diff.ts +++ b/frontend/src/lib/resolve-cell-diff.ts @@ -19,7 +19,7 @@ export function resolveCellDiff(tx?: CkbTransaction) { .reduce((acc, input) => acc.plus(input.xudtInfo.amount), BigNumber(0)) const outputValue = tx?.outputs .filter( - (output) => output.xudtInfo && output.xudtInfo.symbol === symbol && scriptToAddress(output.lock) !== lockScript, + (output) => output.xudtInfo && output.xudtInfo.symbol === symbol && scriptToAddress(output.lock) === lockScript, ) .reduce((acc, output) => acc.plus(output.xudtInfo.amount), BigNumber(0)) return { diff --git a/frontend/src/lib/string/format-number.ts b/frontend/src/lib/string/format-number.ts index 1453d9ab..6d29cf78 100644 --- a/frontend/src/lib/string/format-number.ts +++ b/frontend/src/lib/string/format-number.ts @@ -1,9 +1,9 @@ import BigNumber from 'bignumber.js' -import { isNumber } from 'lodash-es' export function formatNumber(value?: BigNumber.Value, decimal?: number) { - const val = isNumber(value) || BigNumber.isBigNumber(value) ? BigNumber(value) : undefined - if (decimal && val) { + if (!value) return '-' + const val = BigNumber(value) + if (decimal) { return val.div(BigNumber(10).pow(decimal)).toFormat() } return val?.toFormat() ?? '-' diff --git a/frontend/src/locales/en/messages.po b/frontend/src/locales/en/messages.po index babc3cdf..44a5b992 100644 --- a/frontend/src/locales/en/messages.po +++ b/frontend/src/locales/en/messages.po @@ -54,7 +54,7 @@ msgstr "{secondsDiff}s ago" msgid "🔥 Popular RGB++ Assets" msgstr "🔥 Popular RGB++ Assets" -#: src/app/[lang]/address/[address]/layout.tsx:45 +#: src/app/[lang]/address/[address]/layout.tsx:44 msgid "Address" msgstr "Address" @@ -63,15 +63,19 @@ msgstr "Address" msgid "Amount" msgstr "Amount" +#: src/app/not-found.tsx:19 +msgid "Back to Home" +msgstr "Back to Home" + #: src/app/[lang]/explorer/btc/info.tsx:21 -#: src/components/footer.tsx:87 +#: src/components/footer.tsx:88 #: src/components/navbar.tsx:43 #: src/components/network-cards.tsx:60 msgid "Bitcoin" msgstr "Bitcoin" -#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:35 -#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:35 +#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:34 +#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:34 msgid "Block {0}" msgstr "Block {0}" @@ -100,7 +104,7 @@ msgstr "BTC" msgid "BTC Balance" msgstr "BTC Balance" -#: src/components/btc/btc-utxos.tsx:17 +#: src/components/btc/btc-utxos.tsx:18 msgid "BTC Txn" msgstr "BTC Txn" @@ -115,7 +119,7 @@ msgstr "bytes" #: src/components/ckb/ckb-block-overflow.tsx:64 #: src/components/ckb/ckb-cell-tables.tsx:83 #: src/components/ckb/ckb-transaction-overflow.tsx:59 -#: src/components/footer.tsx:90 +#: src/components/footer.tsx:91 #: src/components/navbar.tsx:48 #: src/components/network-cards.tsx:93 msgid "CKB" @@ -154,10 +158,10 @@ msgstr "Coming Soon" msgid "Coming soon, please stay tuned" msgstr "Coming soon, please stay tuned" -#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:54 -#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:54 -#: src/app/[lang]/transaction/[tx]/btc.tsx:40 -#: src/app/[lang]/transaction/[tx]/ckb.tsx:41 +#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:53 +#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:53 +#: src/app/[lang]/transaction/[tx]/btc.tsx:48 +#: src/app/[lang]/transaction/[tx]/ckb.tsx:49 msgid "confirmations" msgstr "confirmations" @@ -189,10 +193,14 @@ msgid "Drop" msgstr "Drop" #: src/app/[lang]/page.tsx:21 -msgid "Explore the BTC Ecosystem" -msgstr "Explore the BTC Ecosystem" +#~ msgid "Explore the BTC Ecosystem" +#~ msgstr "Explore the BTC Ecosystem" + +#: src/components/home-title.tsx:10 +msgid "Explore the<0>BTCEcosystem" +msgstr "Explore the<0>BTCEcosystem" -#: src/components/footer.tsx:84 +#: src/components/footer.tsx:85 #: src/components/navbar.tsx:30 msgid "Explorer" msgstr "Explorer" @@ -234,6 +242,10 @@ msgstr "Holders" msgid "Inputs ({0})" msgstr "Inputs ({0})" +#: src/app/[lang]/address/[address]/layout.tsx:23 +msgid "Invalid address \"{address}\"" +msgstr "Invalid address \"{address}\"" + #: src/components/layer-type.tsx:26 #: src/components/layer-type.tsx:44 #: src/components/layer-type.tsx:63 @@ -275,7 +287,7 @@ msgstr "Latest L1 RGB++ transaction" #~ msgid "Latest L2 RGB++ transaction" #~ msgstr "Latest L2 RGB++ transaction" -#: src/app/[lang]/page.tsx:32 +#: src/app/[lang]/page.tsx:31 msgid "Latest RGB++ Txns" msgstr "Latest RGB++ Txns" @@ -313,11 +325,11 @@ msgstr "Minter" msgid "Minter Reward" msgstr "Minter Reward" -#: src/components/footer.tsx:109 +#: src/components/footer.tsx:110 msgid "More Info" msgstr "More Info" -#: src/components/footer.tsx:112 +#: src/components/footer.tsx:113 msgid "Nervos CKB" msgstr "Nervos CKB" @@ -343,11 +355,11 @@ msgstr "Outputs ({0})" msgid "Overflow" msgstr "Overflow" -#: src/components/footer.tsx:95 +#: src/components/footer.tsx:96 msgid "RGB++" msgstr "RGB++" -#: src/app/[lang]/address/[address]/layout.tsx:59 +#: src/app/[lang]/address/[address]/layout.tsx:58 #: src/components/navbar.tsx:96 msgid "RGB++ Assets" msgstr "RGB++ Assets" @@ -358,12 +370,12 @@ msgstr "RGB++ Assets" msgid "RGB++ Assets Holders" msgstr "RGB++ Assets Holders" -#: src/components/footer.tsx:21 +#: src/components/footer.tsx:22 #: src/components/navbar.tsx:23 msgid "RGB++ Explorer" msgstr "RGB++ Explorer" -#: src/app/[lang]/page.tsx:30 +#: src/app/[lang]/page.tsx:29 msgid "RGB++ Networks" msgstr "RGB++ Networks" @@ -392,16 +404,16 @@ msgstr "sats/kB" msgid "sats/VB" msgstr "sats/VB" -#: src/components/footer.tsx:101 +#: src/components/footer.tsx:102 msgid "Script" msgstr "Script" -#: src/components/footer.tsx:104 +#: src/components/footer.tsx:105 msgid "SDK" msgstr "SDK" -#: src/components/search-bar.tsx:101 -#: src/components/search-bar.tsx:137 +#: src/components/search-bar.tsx:93 +#: src/components/search-bar.tsx:129 msgid "Search by Address/Tx Hash/Block Hash" msgstr "Search by Address/Tx Hash/Block Hash" @@ -418,6 +430,14 @@ msgstr "shannons/kB" msgid "Size" msgstr "Size" +#: src/app/error.tsx:30 +msgid "Something wrong，Please reload" +msgstr "Something wrong，Please reload" + +#: src/app/not-found.tsx:15 +msgid "Sorry, the page you visited does not exist" +msgstr "Sorry, the page you visited does not exist" + #: src/app/[lang]/assets/coins/page.tsx:30 msgid "Supply" msgstr "Supply" @@ -426,6 +446,20 @@ msgstr "Supply" #~ msgid "Test" #~ msgstr "Test" +#: src/app/[lang]/address/[address]/layout.tsx:38 +msgid "The address \"{address}\" not found" +msgstr "The address \"{address}\" not found" + +#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:24 +#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:24 +msgid "The block {hashOrHeight} not found" +msgstr "The block {hashOrHeight} not found" + +#: src/app/[lang]/transaction/[tx]/page.tsx:13 +#: src/app/[lang]/transaction/[tx]/page.tsx:32 +msgid "The transaction \"{tx}\" not found" +msgstr "The transaction \"{tx}\" not found" + #: src/app/[lang]/assets/coins/[typeHash]/transactions/page.tsx:33 #: src/components/last-rgbpp-txns-table/index.tsx:61 msgid "Time" @@ -441,15 +475,19 @@ msgstr "Total {0} Items" msgid "Transaction" msgstr "Transaction" -#: src/app/[lang]/address/[address]/layout.tsx:55 +#: src/app/[lang]/address/[address]/layout.tsx:54 #: src/app/[lang]/assets/coins/[typeHash]/layout.tsx:41 -#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:64 -#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:64 -#: src/app/[lang]/transaction/[tx]/btc.tsx:23 -#: src/app/[lang]/transaction/[tx]/ckb.tsx:24 +#: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:63 +#: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:63 +#: src/app/[lang]/transaction/[tx]/btc.tsx:28 +#: src/app/[lang]/transaction/[tx]/ckb.tsx:29 msgid "Transactions" msgstr "Transactions" +#: src/app/error.tsx:33 +msgid "Try again" +msgstr "Try again" + #: src/app/[lang]/assets/coins/[typeHash]/transactions/page.tsx:30 #: src/components/last-rgbpp-txns-table/index.tsx:52 msgid "Tx hash" @@ -487,7 +525,7 @@ msgstr "Type" msgid "Unconfirmed" msgstr "Unconfirmed" -#: src/components/footer.tsx:115 +#: src/components/footer.tsx:116 msgid "UTXO Stack" msgstr "UTXO Stack" @@ -499,6 +537,6 @@ msgstr "View Details in CKB" msgid "View Details in Mempool" msgstr "View Details in Mempool" -#: src/components/footer.tsx:98 +#: src/components/footer.tsx:99 msgid "Whitepaper" msgstr "Whitepaper" From 5d15a3d90a053a91ad4e557bf6886e7bd81a15b6 Mon Sep 17 00:00:00 2001 From: INS Date: Thu, 1 Aug 2024 14:33:22 +0800 Subject: [PATCH 2/8] feat(frontend): navbar active color --- frontend/src/components/navbar.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx index b064b4cc..baf3a450 100644 --- a/frontend/src/components/navbar.tsx +++ b/frontend/src/components/navbar.tsx @@ -1,6 +1,8 @@ 'use client' import { Trans } from '@lingui/macro' +import { useLingui } from '@lingui/react' +import { usePathname } from 'next/navigation' import { Center, Flex, HStack, VStack } from 'styled-system/jsx' import ArrowIcon from '@/assets/arrow.svg' @@ -14,6 +16,10 @@ import { HoverCard, Text } from '@/components/ui' import { Link } from '@/components/ui/link' export function Navbar() { + const pathname = usePathname() + const { + i18n: { locale }, + } = useLingui() return (
@@ -26,7 +32,12 @@ export function Navbar() { - + Explorer @@ -92,7 +103,11 @@ export function Navbar() { - + RGB++ Assets From df09b60f195d7b5267c364579d56d55cfb80f5b4 Mon Sep 17 00:00:00 2001 From: INS Date: Thu, 1 Aug 2024 19:39:09 +0800 Subject: [PATCH 3/8] feat(frontend): search --- .../app/[lang]/address/[address]/layout.tsx | 3 ++- frontend/src/app/[lang]/explorer/ckb/info.tsx | 6 ++--- frontend/src/app/[lang]/explorer/ckb/page.tsx | 2 +- frontend/src/components/search-bar.tsx | 6 +++++ frontend/src/lib/string/format-number.ts | 3 ++- frontend/src/locales/en/messages.po | 24 +++++++++---------- 6 files changed, 26 insertions(+), 18 deletions(-) diff --git a/frontend/src/app/[lang]/address/[address]/layout.tsx b/frontend/src/app/[lang]/address/[address]/layout.tsx index 99f9a27a..df4a8e21 100644 --- a/frontend/src/app/[lang]/address/[address]/layout.tsx +++ b/frontend/src/app/[lang]/address/[address]/layout.tsx @@ -1,4 +1,5 @@ import { t } from '@lingui/macro' +import { notFound } from 'next/navigation' import type { PropsWithChildren, ReactNode } from 'react' import { HStack, VStack } from 'styled-system/jsx' @@ -20,7 +21,7 @@ export default async function Layout({ const isBtcAddress = isValidBTCAddress(address) const isCkbAddress = isValidCkbAddress(address) - if (!isBtcAddress && !isCkbAddress) throw new Error(t(i18n)`Invalid address "${address}"`) + if (!isBtcAddress && !isCkbAddress) notFound() let overflow: ReactNode = null if (isBtcAddress) { diff --git a/frontend/src/app/[lang]/explorer/ckb/info.tsx b/frontend/src/app/[lang]/explorer/ckb/info.tsx index 62e1e070..44c34a2f 100644 --- a/frontend/src/app/[lang]/explorer/ckb/info.tsx +++ b/frontend/src/app/[lang]/explorer/ckb/info.tsx @@ -51,7 +51,7 @@ export async function Info() { {formatNumber(ckbChainInfo.fees.fast)} - + {t(i18n)`shannons/kB`} @@ -63,7 +63,7 @@ export async function Info() { {formatNumber(ckbChainInfo.fees.average)} - + {t(i18n)`shannons/kB`} @@ -75,7 +75,7 @@ export async function Info() { {formatNumber(ckbChainInfo.fees.slow)} - + {t(i18n)`shannons/kB`} diff --git a/frontend/src/app/[lang]/explorer/ckb/page.tsx b/frontend/src/app/[lang]/explorer/ckb/page.tsx index b0b759d7..271314a0 100644 --- a/frontend/src/app/[lang]/explorer/ckb/page.tsx +++ b/frontend/src/app/[lang]/explorer/ckb/page.tsx @@ -2,7 +2,7 @@ import { t } from '@lingui/macro' import { Box, Grid, styled } from 'styled-system/jsx' import { explorerGraphql } from '@/apis/explorer-graphql' -import { Info } from '@/app/[lang]/explorer/btc/info' +import { Info } from '@/app/[lang]/explorer/ckb/info' import BtcIcon from '@/assets/chains/btc.svg' import { AgoTimeFormatter } from '@/components/ago-time-formatter' import { Heading, Table, Text } from '@/components/ui' diff --git a/frontend/src/components/search-bar.tsx b/frontend/src/components/search-bar.tsx index 7d4e07c9..8afff887 100644 --- a/frontend/src/components/search-bar.tsx +++ b/frontend/src/components/search-bar.tsx @@ -73,6 +73,12 @@ function useSearch() { if (search.ckbAddress) { return router.push(`/address/${search.ckbAddress}`) } + if (search.ckbBlock) { + return router.push(`/block/btc/${search.ckbBlock}`) + } + if (search.btcBlock) { + return router.push(`/block/btc/${search.btcBlock}`) + } throw new Error('Not found') }, }) diff --git a/frontend/src/lib/string/format-number.ts b/frontend/src/lib/string/format-number.ts index 6d29cf78..5d3eac47 100644 --- a/frontend/src/lib/string/format-number.ts +++ b/frontend/src/lib/string/format-number.ts @@ -1,7 +1,8 @@ import BigNumber from 'bignumber.js' +import { isNaN, isNull, isUndefined } from 'lodash-es' export function formatNumber(value?: BigNumber.Value, decimal?: number) { - if (!value) return '-' + if (isUndefined(value) || isNull(value) || isNaN(value)) return '-' const val = BigNumber(value) if (decimal) { return val.div(BigNumber(10).pow(decimal)).toFormat() diff --git a/frontend/src/locales/en/messages.po b/frontend/src/locales/en/messages.po index 44a5b992..59e6034e 100644 --- a/frontend/src/locales/en/messages.po +++ b/frontend/src/locales/en/messages.po @@ -54,7 +54,7 @@ msgstr "{secondsDiff}s ago" msgid "🔥 Popular RGB++ Assets" msgstr "🔥 Popular RGB++ Assets" -#: src/app/[lang]/address/[address]/layout.tsx:44 +#: src/app/[lang]/address/[address]/layout.tsx:45 msgid "Address" msgstr "Address" @@ -69,7 +69,7 @@ msgstr "Back to Home" #: src/app/[lang]/explorer/btc/info.tsx:21 #: src/components/footer.tsx:88 -#: src/components/navbar.tsx:43 +#: src/components/navbar.tsx:54 #: src/components/network-cards.tsx:60 msgid "Bitcoin" msgstr "Bitcoin" @@ -120,7 +120,7 @@ msgstr "bytes" #: src/components/ckb/ckb-cell-tables.tsx:83 #: src/components/ckb/ckb-transaction-overflow.tsx:59 #: src/components/footer.tsx:91 -#: src/components/navbar.tsx:48 +#: src/components/navbar.tsx:59 #: src/components/network-cards.tsx:93 msgid "CKB" msgstr "CKB" @@ -201,7 +201,7 @@ msgid "Explore the<0>BTCEcosystem" msgstr "Explore the<0>BTCEcosystem" #: src/components/footer.tsx:85 -#: src/components/navbar.tsx:30 +#: src/components/navbar.tsx:41 msgid "Explorer" msgstr "Explorer" @@ -242,7 +242,7 @@ msgstr "Holders" msgid "Inputs ({0})" msgstr "Inputs ({0})" -#: src/app/[lang]/address/[address]/layout.tsx:23 +#: src/app/[lang]/address/[address]/layout.tsx:24 msgid "Invalid address \"{address}\"" msgstr "Invalid address \"{address}\"" @@ -359,8 +359,8 @@ msgstr "Overflow" msgid "RGB++" msgstr "RGB++" -#: src/app/[lang]/address/[address]/layout.tsx:58 -#: src/components/navbar.tsx:96 +#: src/app/[lang]/address/[address]/layout.tsx:59 +#: src/components/navbar.tsx:111 msgid "RGB++ Assets" msgstr "RGB++ Assets" @@ -371,7 +371,7 @@ msgid "RGB++ Assets Holders" msgstr "RGB++ Assets Holders" #: src/components/footer.tsx:22 -#: src/components/navbar.tsx:23 +#: src/components/navbar.tsx:29 msgid "RGB++ Explorer" msgstr "RGB++ Explorer" @@ -430,7 +430,7 @@ msgstr "shannons/kB" msgid "Size" msgstr "Size" -#: src/app/error.tsx:30 +#: src/app/error.tsx:31 msgid "Something wrong，Please reload" msgstr "Something wrong，Please reload" @@ -446,7 +446,7 @@ msgstr "Supply" #~ msgid "Test" #~ msgstr "Test" -#: src/app/[lang]/address/[address]/layout.tsx:38 +#: src/app/[lang]/address/[address]/layout.tsx:39 msgid "The address \"{address}\" not found" msgstr "The address \"{address}\" not found" @@ -475,7 +475,7 @@ msgstr "Total {0} Items" msgid "Transaction" msgstr "Transaction" -#: src/app/[lang]/address/[address]/layout.tsx:54 +#: src/app/[lang]/address/[address]/layout.tsx:55 #: src/app/[lang]/assets/coins/[typeHash]/layout.tsx:41 #: src/app/[lang]/block/btc/[hashOrHeight]/layout.tsx:63 #: src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx:63 @@ -484,7 +484,7 @@ msgstr "Transaction" msgid "Transactions" msgstr "Transactions" -#: src/app/error.tsx:33 +#: src/app/error.tsx:34 msgid "Try again" msgstr "Try again" From c7bfb7b1ceeef9291262d6b739fa51e28ee7e52a Mon Sep 17 00:00:00 2001 From: INS Date: Thu, 1 Aug 2024 20:00:16 +0800 Subject: [PATCH 4/8] feat(frontend): transaction page and block page --- frontend/src/apis/explorer-graphql.ts | 7 +++++ frontend/src/apis/types/explorer-graphql.ts | 2 ++ .../block/ckb/[hashOrHeight]/layout.tsx | 4 +-- .../src/app/[lang]/transaction/[tx]/page.tsx | 27 +++++++++++++++++-- .../btc/btc-transaction-overflow.tsx | 9 ++++++- .../src/components/btc/btc-utxo-tables.tsx | 12 ++++----- .../src/components/ckb/ckb-block-overflow.tsx | 14 +++++++--- .../ckb/ckb-transaction-overflow.tsx | 9 ++++++- 8 files changed, 68 insertions(+), 16 deletions(-) diff --git a/frontend/src/apis/explorer-graphql.ts b/frontend/src/apis/explorer-graphql.ts index b337e225..9cd78a1d 100644 --- a/frontend/src/apis/explorer-graphql.ts +++ b/frontend/src/apis/explorer-graphql.ts @@ -465,6 +465,7 @@ class ExplorerGraphql { } block { timestamp + hash } } } @@ -721,6 +722,12 @@ class ExplorerGraphql { timestamp transactionsCount totalFee + miner { + address + shannon + transactionsCount + } + reward } } `, diff --git a/frontend/src/apis/types/explorer-graphql.ts b/frontend/src/apis/types/explorer-graphql.ts index be211eb8..122e202d 100644 --- a/frontend/src/apis/types/explorer-graphql.ts +++ b/frontend/src/apis/types/explorer-graphql.ts @@ -187,6 +187,8 @@ export interface CkbBlock { timestamp: number transactionsCount: number totalFee: number + miner: CkbAddress + reward: number } export interface BtcBlock { diff --git a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx index 874d7611..952ac0e3 100644 --- a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx +++ b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx @@ -48,9 +48,9 @@ export default async function Layout({ border="1px solid currentColor" ml="auto" > - 6930{' '} + {'- '} - {t(i18n)`confirmations`} + {t(i18n)`Confirmations`} diff --git a/frontend/src/app/[lang]/transaction/[tx]/page.tsx b/frontend/src/app/[lang]/transaction/[tx]/page.tsx index 83fb6fbb..c8b85f81 100644 --- a/frontend/src/app/[lang]/transaction/[tx]/page.tsx +++ b/frontend/src/app/[lang]/transaction/[tx]/page.tsx @@ -1,4 +1,5 @@ import { t } from '@lingui/macro' +import { notFound } from 'next/navigation' import { explorerGraphql } from '@/apis/explorer-graphql' import { BTCTransactionPage } from '@/app/[lang]/transaction/[tx]/btc' @@ -10,8 +11,19 @@ export const revalidate = 60 export default async function Page({ params: { tx } }: { params: { tx: string } }) { const i18n = getI18nFromHeaders() const res = await explorerGraphql.getTransaction(tx) - if (!res?.rgbppTransaction) throw new Error(t(i18n)`The transaction "${tx}" not found`) - if (res.rgbppTransaction.ckbTransaction) { + if (!res?.rgbppTransaction) notFound() + + if (res.rgbppTransaction.btcTransaction && !tx.startsWith('0x')) { + return ( + + ) + } + + if (res.rgbppTransaction.ckbTransaction && tx.startsWith('0x')) { return ( ) } + if (res.rgbppTransaction.btcTransaction) { return ( ) } + + if (res.rgbppTransaction.ckbTransaction) { + return ( + + ) + } throw new Error(t(i18n)`The transaction "${tx}" not found`) } diff --git a/frontend/src/components/btc/btc-transaction-overflow.tsx b/frontend/src/components/btc/btc-transaction-overflow.tsx index 9b649d82..20fff7ca 100644 --- a/frontend/src/components/btc/btc-transaction-overflow.tsx +++ b/frontend/src/components/btc/btc-transaction-overflow.tsx @@ -4,6 +4,7 @@ import { BtcTransaction } from '@/apis/types/explorer-graphql' import OverflowSVG from '@/assets/overview.svg' import { TimeFormatter } from '@/components/time-formatter' import { Heading, Text } from '@/components/ui' +import Link from '@/components/ui/link' import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { formatNumber } from '@/lib/string/format-number' @@ -30,7 +31,13 @@ export function BtcTransactionOverflow({ btcTransaction }: { btcTransaction: Btc > {t(i18n)`Block Height`} - {formatNumber(btcTransaction.blockHeight)} + + {formatNumber(btcTransaction.blockHeight)} + {t(i18n)`Size`} diff --git a/frontend/src/components/btc/btc-utxo-tables.tsx b/frontend/src/components/btc/btc-utxo-tables.tsx index 4b7f2de7..6bd98a27 100644 --- a/frontend/src/components/btc/btc-utxo-tables.tsx +++ b/frontend/src/components/btc/btc-utxo-tables.tsx @@ -70,9 +70,9 @@ function UtxoInput({ vin }: { vin: Vin }) { {vin.prevout ? ( - - - {truncateMiddle(vin.prevout.address.address, 10, 10)} + + + {truncateMiddle(vin.prevout.address?.address, 10, 10)} ) : null} @@ -104,9 +104,9 @@ function UtxoOutput({ vout }: { vout: Vout }) { {vout.scriptpubkeyType === ScriptpubkeyType.OpReturn ? ( OP_RETURN ) : ( - - - {truncateMiddle(vout.address.address, 10, 10)} + + + {truncateMiddle(vout.address?.address, 10, 10)} )} diff --git a/frontend/src/components/ckb/ckb-block-overflow.tsx b/frontend/src/components/ckb/ckb-block-overflow.tsx index b41f535d..57642261 100644 --- a/frontend/src/components/ckb/ckb-block-overflow.tsx +++ b/frontend/src/components/ckb/ckb-block-overflow.tsx @@ -5,10 +5,16 @@ import { CkbBlock } from '@/apis/types/explorer-graphql' import OverflowSVG from '@/assets/overview.svg' import { TimeFormatter } from '@/components/time-formatter' import { Heading, Text } from '@/components/ui' +import { formatCkbAddress } from '@/lib/address/format-ckb-address' +import { shannonToCKB } from '@/lib/ckb/shannon-to-ckb' import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { formatNumber } from '@/lib/string/format-number' -export function CkbBlockOverflow({ block }: { block: Pick }) { +export function CkbBlockOverflow({ + block, +}: { + block: Pick +}) { const i18n = getI18nFromHeaders() return ( @@ -53,14 +59,14 @@ export function CkbBlockOverflow({ block }: { block: Pick {t(i18n)`Miner`} - - + {formatCkbAddress(block.miner.address)} {t(i18n)`Minter Reward`} - -{' '} - + {formatNumber(shannonToCKB(block.reward))} + CKB diff --git a/frontend/src/components/ckb/ckb-transaction-overflow.tsx b/frontend/src/components/ckb/ckb-transaction-overflow.tsx index 1e2860e3..2ae54a0c 100644 --- a/frontend/src/components/ckb/ckb-transaction-overflow.tsx +++ b/frontend/src/components/ckb/ckb-transaction-overflow.tsx @@ -4,6 +4,7 @@ import { CkbTransaction } from '@/apis/types/explorer-graphql' import OverflowSVG from '@/assets/overview.svg' import { TimeFormatter } from '@/components/time-formatter' import { Heading, Text } from '@/components/ui' +import Link from '@/components/ui/link' import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { formatNumber } from '@/lib/string/format-number' @@ -30,7 +31,13 @@ export function CkbTransactionOverflow({ ckbTransaction }: { ckbTransaction: Ckb > {t(i18n)`Block Height`} - {formatNumber(ckbTransaction.blockNumber)} + + {formatNumber(ckbTransaction.blockNumber)} + {t(i18n)`Size`} From e946837d8586f641752916c76c761a5c2f671e10 Mon Sep 17 00:00:00 2001 From: INS Date: Fri, 2 Aug 2024 10:15:52 +0800 Subject: [PATCH 5/8] fix(frontend): fix block page --- .../app/[lang]/block/btc/[hashOrHeight]/transactions/page.tsx | 3 ++- .../app/[lang]/block/ckb/[hashOrHeight]/transactions/page.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/[lang]/block/btc/[hashOrHeight]/transactions/page.tsx b/frontend/src/app/[lang]/block/btc/[hashOrHeight]/transactions/page.tsx index 2304d785..3e0f484a 100644 --- a/frontend/src/app/[lang]/block/btc/[hashOrHeight]/transactions/page.tsx +++ b/frontend/src/app/[lang]/block/btc/[hashOrHeight]/transactions/page.tsx @@ -1,4 +1,3 @@ -import { i18n } from '@lingui/core' import { t } from '@lingui/macro' import { Flex, VStack } from 'styled-system/jsx' @@ -7,9 +6,11 @@ import { BtcUtxoTables } from '@/components/btc/btc-utxo-tables' import { TimeFormatter } from '@/components/time-formatter' import { Text } from '@/components/ui' import Link from '@/components/ui/link' +import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { formatNumber } from '@/lib/string/format-number' export default async function Page({ params: { hashOrHeight } }: { params: { hashOrHeight: string } }) { + const i18n = getI18nFromHeaders() const data = await explorerGraphql.getBtcBlockTransaction(hashOrHeight) return ( diff --git a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/transactions/page.tsx b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/transactions/page.tsx index 67d2126e..f1e9e73a 100644 --- a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/transactions/page.tsx +++ b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/transactions/page.tsx @@ -1,4 +1,3 @@ -import { i18n } from '@lingui/core' import { t } from '@lingui/macro' import { Flex, VStack } from 'styled-system/jsx' @@ -6,9 +5,11 @@ import { explorerGraphql } from '@/apis/explorer-graphql' import { CkbCellTables } from '@/components/ckb/ckb-cell-tables' import { Text } from '@/components/ui' import Link from '@/components/ui/link' +import { getI18nFromHeaders } from '@/lib/get-i18n-from-headers' import { formatNumber } from '@/lib/string/format-number' export default async function Page({ params: { hashOrHeight } }: { params: { hashOrHeight: string } }) { + const i18n = getI18nFromHeaders() const data = await explorerGraphql.getCkbBlockTransaction(hashOrHeight) return ( From 2a27c24f16374a62ba15906f488a65f380d75b28 Mon Sep 17 00:00:00 2001 From: INS Date: Fri, 2 Aug 2024 11:19:31 +0800 Subject: [PATCH 6/8] fix(frontend): typo l1 -> l2 --- frontend/src/app/[lang]/explorer/ckb/page.tsx | 2 +- frontend/src/app/error.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/[lang]/explorer/ckb/page.tsx b/frontend/src/app/[lang]/explorer/ckb/page.tsx index 271314a0..3d396717 100644 --- a/frontend/src/app/[lang]/explorer/ckb/page.tsx +++ b/frontend/src/app/[lang]/explorer/ckb/page.tsx @@ -21,7 +21,7 @@ export default async function Page() { - {t(i18n)`Latest L1 RGB++ transaction`} + {t(i18n)`Latest L2 RGB++ transaction`} {rgbppLatestTransactions.txs.map((tx) => { diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx index e6423e18..4af8ac2a 100644 --- a/frontend/src/app/error.tsx +++ b/frontend/src/app/error.tsx @@ -1,4 +1,4 @@ -'use client' // Error components must be Client Components +'use client' import { Trans } from '@lingui/macro' import { useEffect } from 'react' @@ -9,7 +9,6 @@ import { Button, Text } from '@/components/ui' export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) { useEffect(() => { - // Log the error to an error reporting service console.error(error) }, [error]) From e6ffe221ad02520696a6ead7d430fc6a1ac6260b Mon Sep 17 00:00:00 2001 From: INS Date: Fri, 2 Aug 2024 14:43:36 +0800 Subject: [PATCH 7/8] fix(frontend): block page error --- frontend/src/apis/explorer-graphql.ts | 3 ++- frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx | 5 ++--- frontend/src/components/ckb/ckb-block-overflow.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/apis/explorer-graphql.ts b/frontend/src/apis/explorer-graphql.ts index 9cd78a1d..9035d44f 100644 --- a/frontend/src/apis/explorer-graphql.ts +++ b/frontend/src/apis/explorer-graphql.ts @@ -325,7 +325,6 @@ class ExplorerGraphql { } } } - `, ) } @@ -415,6 +414,7 @@ class ExplorerGraphql { txHash index capacity + cellType type { codeHash hashType @@ -441,6 +441,7 @@ class ExplorerGraphql { txHash index capacity + cellType type { codeHash hashType diff --git a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx index 952ac0e3..1d43df73 100644 --- a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx +++ b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx @@ -1,4 +1,5 @@ import { t } from '@lingui/macro' +import { notFound } from 'next/navigation' import { ReactNode } from 'react' import { Box, HStack, VStack } from 'styled-system/jsx' @@ -20,9 +21,7 @@ export default async function Layout({ const i18n = getI18nFromHeaders() const data = await explorerGraphql.getCkbBlock(hashOrHeight) - if (!data?.ckbBlock) { - throw new Error(t(i18n)`The block ${hashOrHeight} not found`) - } + if (!data?.ckbBlock) notFound() return ( diff --git a/frontend/src/components/ckb/ckb-block-overflow.tsx b/frontend/src/components/ckb/ckb-block-overflow.tsx index 57642261..f6bc945a 100644 --- a/frontend/src/components/ckb/ckb-block-overflow.tsx +++ b/frontend/src/components/ckb/ckb-block-overflow.tsx @@ -1,4 +1,4 @@ -import { t, Trans } from '@lingui/macro' +import { t } from '@lingui/macro' import { Grid, HStack, VStack } from 'styled-system/jsx' import { CkbBlock } from '@/apis/types/explorer-graphql' @@ -67,7 +67,7 @@ export function CkbBlockOverflow({ {formatNumber(shannonToCKB(block.reward))} - CKB + {t(i18n)`CKB`} From 262d191b51cc807125f837d4b3e1a757b0209238 Mon Sep 17 00:00:00 2001 From: INS Date: Fri, 2 Aug 2024 17:45:49 +0800 Subject: [PATCH 8/8] fix(frontend): fix some api issues --- frontend/src/apis/explorer-graphql.ts | 5 +++ frontend/src/apis/types/explorer-graphql.ts | 11 +++++++ .../coins/[typeHash]/transactions/page.tsx | 9 +++--- .../block/ckb/[hashOrHeight]/layout.tsx | 5 +-- frontend/src/app/[lang]/explorer/btc/page.tsx | 6 ++-- frontend/src/app/[lang]/explorer/ckb/page.tsx | 6 ++-- .../src/components/ckb/ckb-block-overflow.tsx | 6 ++-- .../last-rgbpp-txns-table/amount.tsx | 31 +++++++++++++++++++ .../last-rgbpp-txns-table/index.tsx | 6 ++-- 9 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 frontend/src/components/last-rgbpp-txns-table/amount.tsx diff --git a/frontend/src/apis/explorer-graphql.ts b/frontend/src/apis/explorer-graphql.ts index 9035d44f..76fb21d4 100644 --- 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 index 122e202d..e13a8528 100644 --- 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 index 732dee7e..cda67bd2 100644 --- 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 {response.rgbppCoin.transactions.map((tx) => { const txHash = resolveRGBppTxHash(tx) - const cellDiff = resolveCellDiff(tx.ckbTransaction) return ( @@ -49,7 +48,7 @@ export default async function Page({ params: { typeHash } }: { params: { typeHas - {formatNumber(cellDiff.value)} {cellDiff.symbol} + @@ -61,8 +60,8 @@ export default async function Page({ params: { typeHash } }: { params: { typeHas - {t(i18n)`Total ${100} Items`} - + {t(i18n)`Total ${formatNumber(response.rgbppCoin.transactionsCount)} Items`} + ) diff --git a/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx b/frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx index 1d43df73..6ffbb98e 100644 --- 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" > - {'- '} - + {formatNumber(data.ckbBlock.confirmations)} + {t(i18n)`Confirmations`} diff --git a/frontend/src/app/[lang]/explorer/btc/page.tsx b/frontend/src/app/[lang]/explorer/btc/page.tsx index b0b759d7..d4953799 100644 --- 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() { {rgbppLatestTransactions.txs.map((tx) => { - const cellDiff = resolveCellDiff(tx.ckbTransaction) return ( @@ -43,7 +41,7 @@ export default async function Page() { - {formatNumber(cellDiff.value)} {cellDiff.symbol} + ) diff --git a/frontend/src/app/[lang]/explorer/ckb/page.tsx b/frontend/src/app/[lang]/explorer/ckb/page.tsx index 3d396717..07056cf4 100644 --- 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() { {rgbppLatestTransactions.txs.map((tx) => { - const cellDiff = resolveCellDiff(tx.ckbTransaction) return ( @@ -43,7 +41,7 @@ export default async function Page() { - {formatNumber(cellDiff.value)} {cellDiff.symbol} + ) diff --git a/frontend/src/components/ckb/ckb-block-overflow.tsx b/frontend/src/components/ckb/ckb-block-overflow.tsx index f6bc945a..29d09607 100644 --- 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 + block: Pick }) { const i18n = getI18nFromHeaders() return ( @@ -36,8 +36,8 @@ export function CkbBlockOverflow({ {t(i18n)`Block size`} - {'- '} - + {formatNumber(block.size)} + {t(i18n)`bytes`} diff --git a/frontend/src/components/last-rgbpp-txns-table/amount.tsx b/frontend/src/components/last-rgbpp-txns-table/amount.tsx new file mode 100644 index 00000000..bdf14dfa --- /dev/null +++ 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 - + + 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 ( + + 1 DOB + + ) + } + + return ( + <> + {formatNumber(cellDiff.value)} {cellDiff.symbol} + + ) +} diff --git a/frontend/src/components/last-rgbpp-txns-table/index.tsx b/frontend/src/components/last-rgbpp-txns-table/index.tsx index 8f46ffc7..ba3c6684 100644 --- 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() { {data?.rgbppLatestTransactions.txs.map((tx) => { const txHash = resolveRGBppTxHash(tx) - const cellDiff = resolveCellDiff(tx.ckbTransaction) return ( @@ -78,7 +76,7 @@ export function LastRgbppTxnsTable() { - {formatNumber(cellDiff.value)} {cellDiff.symbol} +