Skip to content

Commit

Permalink
Merge pull request #40 from ckb-cell/fix/issues
Browse files Browse the repository at this point in the history
fix(frontend): fix issues
  • Loading branch information
Flouse authored Aug 2, 2024
2 parents d68854b + 262d191 commit c47c387
Show file tree
Hide file tree
Showing 31 changed files with 292 additions and 117 deletions.
15 changes: 14 additions & 1 deletion frontend/src/apis/explorer-graphql.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ class ExplorerGraphql {
hashType
args
}
cellType
xudtInfo {
symbol
amount
Expand Down Expand Up @@ -190,6 +191,7 @@ class ExplorerGraphql {
return request<{
rgbppCoin: {
transactions: RGBppTransaction[]
transactionsCount: number
}
}>(
this.serverURL,
Expand All @@ -198,6 +200,7 @@ class ExplorerGraphql {
rgbppCoin(
typeHash: "${typeHash}"
) {
transactionsCount
transactions(page: ${page}, pageSize: ${pageSize}) {
ckbTxHash
btcTxid
Expand Down Expand Up @@ -325,7 +328,6 @@ class ExplorerGraphql {
}
}
}
`,
)
}
Expand Down Expand Up @@ -415,6 +417,7 @@ class ExplorerGraphql {
txHash
index
capacity
cellType
type {
codeHash
hashType
Expand All @@ -441,6 +444,7 @@ class ExplorerGraphql {
txHash
index
capacity
cellType
type {
codeHash
hashType
Expand All @@ -465,6 +469,7 @@ class ExplorerGraphql {
}
block {
timestamp
hash
}
}
}
Expand Down Expand Up @@ -721,6 +726,14 @@ class ExplorerGraphql {
timestamp
transactionsCount
totalFee
miner {
address
shannon
transactionsCount
}
reward
size
confirmations
}
}
`,
Expand Down
31 changes: 23 additions & 8 deletions frontend/src/apis/types/explorer-graphql.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -82,6 +90,7 @@ export interface CkbCell {
txHash: string
index: number
}
cellType: CellType
}

export interface BtcTransaction {
Expand Down Expand Up @@ -187,6 +196,10 @@ export interface CkbBlock {
timestamp: number
transactionsCount: number
totalFee: number
miner: CkbAddress
reward: number
size: number
confirmations: number
}

export interface BtcBlock {
Expand Down Expand Up @@ -222,12 +235,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
}
}
3 changes: 2 additions & 1 deletion frontend/src/app/[lang]/address/[address]/layout.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>
Expand All @@ -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 />
Expand All @@ -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>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { i18n } from '@lingui/core'
import { t } from '@lingui/macro'
import { Flex, VStack } from 'styled-system/jsx'

Expand All @@ -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 (
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/app/[lang]/block/ckb/[hashOrHeight]/layout.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -9,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 },
Expand All @@ -20,9 +22,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 (
<VStack w="100%" maxW="content" p="30px" gap="30px">
Expand All @@ -48,9 +48,9 @@ export default async function Layout({
border="1px solid currentColor"
ml="auto"
>
6930{' '}
<Text as="span" fontSize="14px" fontWeight="medium">
{t(i18n)`confirmations`}
{formatNumber(data.ckbBlock.confirmations)}
<Text as="span" fontSize="14px" fontWeight="medium" ml="4px">
{t(i18n)`Confirmations`}
</Text>
</Box>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { i18n } from '@lingui/core'
import { t } from '@lingui/macro'
import { Flex, VStack } from 'styled-system/jsx'

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 (
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/app/[lang]/explorer/btc/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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>
Expand All @@ -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>
)
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/[lang]/explorer/ckb/info.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export async function Info() {
</HStack>
<Text>
{formatNumber(ckbChainInfo.fees.fast)}
<Text as="span" color="text.third" fontSize="12px">
<Text as="span" color="text.third" fontSize="12px" ml="4px">
{t(i18n)`shannons/kB`}
</Text>
</Text>
Expand All @@ -63,7 +63,7 @@ export async function Info() {
</HStack>
<Text>
{formatNumber(ckbChainInfo.fees.average)}
<Text as="span" color="text.third" fontSize="12px">
<Text as="span" color="text.third" fontSize="12px" ml="4px">
{t(i18n)`shannons/kB`}
</Text>
</Text>
Expand All @@ -75,7 +75,7 @@ export async function Info() {
</HStack>
<Text>
{formatNumber(ckbChainInfo.fees.slow)}
<Text as="span" color="text.third" fontSize="12px">
<Text as="span" color="text.third" fontSize="12px" ml="4px">
{t(i18n)`shannons/kB`}
</Text>
</Text>
Expand Down
10 changes: 4 additions & 6 deletions frontend/src/app/[lang]/explorer/ckb/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ 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 { 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() {
Expand All @@ -21,11 +20,10 @@ export default async function Page() {
<Grid gridTemplateColumns="repeat(2, 1fr)" w="100%" maxW="content" p="30px" gap="30px">
<Info />
<Box bg="bg.card" rounded="8px" whiteSpace="nowrap">
<Heading fontSize="20px" fontWeight="semibold" p="30px">{t(i18n)`Latest L1 RGB++ transaction`}</Heading>
<Heading fontSize="20px" fontWeight="semibold" p="30px">{t(i18n)`Latest L2 RGB++ transaction`}</Heading>
<Table.Root>
<Table.Body>
{rgbppLatestTransactions.txs.map((tx) => {
const cellDiff = resolveCellDiff(tx.ckbTransaction)
return (
<Table.Row key={tx.btcTxid} lineHeight="36px">
<Table.Cell>
Expand All @@ -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>
)
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/[lang]/transaction/[tx]/btc.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { i18n } from '@lingui/core'
import { t } from '@lingui/macro'
import { Box, HStack, VStack } from 'styled-system/jsx'

Expand All @@ -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({
Expand All @@ -20,6 +20,7 @@ export function BTCTransactionPage({
ckbTransaction?: CkbTransaction
leapDirection?: LeapDirection | null
}) {
const i18n = getI18nFromHeaders()
return (
<VStack w="100%" maxW="content" p="30px" gap="30px">
<HStack w="100%" gap="24px" p="30px" bg="bg.card" rounded="8px">
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/[lang]/transaction/[tx]/ckb.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { i18n } from '@lingui/core'
import { t } from '@lingui/macro'
import { Box, HStack, VStack } from 'styled-system/jsx'

Expand All @@ -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'

Expand All @@ -21,6 +21,7 @@ export function CKBTransactionPage({
btcTransaction?: BtcTransaction
leapDirection?: LeapDirection | null
}) {
const i18n = getI18nFromHeaders()
return (
<VStack w="100%" maxW="content" p="30px" gap="30px">
<HStack w="100%" gap="24px" p="30px" bg="bg.card" rounded="8px">
Expand Down
Loading

0 comments on commit c47c387

Please sign in to comment.