Skip to content

Commit

Permalink
fix: handle 404 component + querystring tx
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiendn
tiendn committed Nov 3, 2022
1 parent 2d0d71a commit 1c06654
Show file tree
Hide file tree
Showing 13 changed files with 205 additions and 121 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"next": "12.3.1",
"next-intl": "^2.7.5",
"numeral": "^2.0.6",
"query-string": "^7.1.1",
"react": "18.2.0",
"react-chartjs-2": "^4.3.1",
"react-code-blocks": "^0.0.9-0",
Expand Down
47 changes: 36 additions & 11 deletions pages/address/[address].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Breadcumbs, useMobileLayout } from '@astraprotocol/astra-ui'
import { evmApi } from 'api'
import API_LIST from 'api/api_list'
import { AxiosError } from 'axios'
import Container from 'components/Container'
import Head from 'next/head'
import React from 'react'
Expand All @@ -11,15 +12,16 @@ import web3 from 'web3'
import Layout from '../../components/Layout'

type Props = {
errorMessage?: string
address: string
addressData: Address
}

const AddressDetailPage: React.FC<Props> = props => {
const { isMobile } = useMobileLayout()
const { address, addressData } = props
const { address, addressData, errorMessage } = props

const isContract = addressData.type === 'contractaddress'
const isContract = addressData?.type === 'contractaddress'
const title = isContract
? `Contract ${address} | ${process.env.NEXT_PUBLIC_TITLE}`
: `Address ${address} | ${process.env.NEXT_PUBLIC_TITLE}`
Expand All @@ -36,19 +38,35 @@ const AddressDetailPage: React.FC<Props> = props => {
{ label: isMobile ? ellipseBetweenText(address) : address }
]}
/>
<AddressOverview address={address} addressData={addressData} />
<AddressDetailTabs address={address} addressData={addressData} />
{addressData ? (
<>
<AddressOverview address={address} addressData={addressData} />
<AddressDetailTabs address={address} addressData={addressData} />
</>
) : (
<h1 className="text contrast-color-70 margin-top-sm">{errorMessage || 'Address Not Found'}</h1>
)}
</Container>
</Layout>
)
}

export async function getServerSideProps({ params }) {
const { address } = params
let addressData
if (web3.utils.isAddress(address))
try {
const addressRes = await evmApi.get<BlockDetailResponse>(`${API_LIST.ADDRESS_DETAIL}${address}`)
const addressData = addressRes.data.result
addressData = addressRes.data.result
if (!addressData) {
return {
props: {
errorMessage: '404 Not Found',
address,
addressData: null
}
}
}
return {
props: {
address,
Expand All @@ -57,18 +75,25 @@ export async function getServerSideProps({ params }) {
}
} catch (e) {
// console.log(e.message)
let errorMessage = e.message
if (e instanceof AxiosError) {
console.log('error api', e.message, e.code, e?.config?.baseURL, e?.config?.url)
if (e.code !== '200') errorMessage = '404 Not Found'
}
return {
redirect: {
destination: '/404',
permanent: false
props: {
errorMessage,
address,
addressData: null
}
}
}

return {
redirect: {
destination: '/404',
permanent: false
props: {
errorMessage: 'Address invalid',
address,
addressData: null
}
}
}
Expand Down
111 changes: 64 additions & 47 deletions pages/blocks/[block].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,13 @@ import { CardInfoLabels } from 'views/transactions/utils'
import Layout from '../../components/Layout'

type Props = {
errorMessage?: string
blockDetail: BlockItem
blockHeight: string
transactions: TransactionItem[]
}

const BlockDetailPage: React.FC<Props> = ({ blockDetail, blockHeight, transactions }: Props) => {
const BlockDetailPage: React.FC<Props> = ({ errorMessage, blockDetail, blockHeight, transactions }: Props) => {
const _convertRawDataToCardData = data => {
const keys = Object.keys(data)
let items: CardRowItem[] = []
Expand Down Expand Up @@ -100,7 +101,6 @@ const BlockDetailPage: React.FC<Props> = ({ blockDetail, blockHeight, transactio
])
}

const items = _convertRawDataToCardData(blockDetail)
return (
<Layout>
<Head>
Expand All @@ -110,46 +110,52 @@ const BlockDetailPage: React.FC<Props> = ({ blockDetail, blockHeight, transactio
</Head>
<Container>
<Breadcumbs items={[{ label: 'Blocks', link: LinkMaker.block() }, { label: '#' + blockHeight }]} />
<CardInfo items={items} classes={['margin-top-sm']} />
<BackgroundCard>
<Tabs
tabs={[{ title: 'Transactions', id: '1' }]}
contents={{
'1': (
<div>
{!transactions || transactions.length == 0 ? (
<Empty text="There are no transactions for this block." />
) : (
<>
{transactions?.map((item, index) => {
const fee = caculateCosmosAmount(item.fee)
return (
<TransactionRow
key={item.hash}
blockNumber={item.blockHeight}
updatedAt={item.blockTime}
fee={fee.amount}
status={item.success}
hash={item.hash}
from={''}
to={''}
value={undefined}
valueToken={
process.env.NEXT_PUBLIC_EVM_TOKEN as CryptoIconNames
}
type={getTransactionType(item?.messages[0]?.type)}
newBlock={item.newTransaction}
style="inject"
/>
)
})}
</>
)}
</div>
)
}}
></Tabs>
</BackgroundCard>
{blockDetail ? (
<>
<CardInfo items={_convertRawDataToCardData(blockDetail)} classes={['margin-top-sm']} />
<BackgroundCard>
<Tabs
tabs={[{ title: 'Transactions', id: '1' }]}
contents={{
'1': (
<div>
{!transactions || transactions.length == 0 ? (
<Empty text="There are no transactions for this block." />
) : (
<>
{transactions?.map((item, index) => {
const fee = caculateCosmosAmount(item.fee)
return (
<TransactionRow
key={item.hash}
blockNumber={item.blockHeight}
updatedAt={item.blockTime}
fee={fee.amount}
status={item.success}
hash={item.hash}
from={''}
to={''}
value={undefined}
valueToken={
process.env.NEXT_PUBLIC_EVM_TOKEN as CryptoIconNames
}
type={getTransactionType(item?.messages[0]?.type)}
newBlock={item.newTransaction}
style="inject"
/>
)
})}
</>
)}
</div>
)
}}
></Tabs>
</BackgroundCard>
</>
) : (
<h1 className="text contrast-color-70 margin-top-sm">{errorMessage || 'Block Not Found'}</h1>
)}
</Container>
</Layout>
)
Expand All @@ -164,19 +170,30 @@ export async function getServerSideProps({ params }) {
`${API_LIST.TRANSACTION_OF_BLOCK.replace(':id', blockHeight)}`
)
const transactions = transactionRes.data.result
if (blockRes.status === 200) {
if (blockRes?.data?.result) {
return { props: { blockDetail: blockRes.data.result, blockHeight, transactions } }
} else {
return { props: { data: {} } }
return {
props: {
errorMessage: '404 Not Found',
blockDetail: null,
blockHeight,
transactions: []
}
}
}
} catch (e) {
let errorMessage = e.message
if (e instanceof AxiosError) {
console.log('error api', e.message, e.code, e?.config?.baseURL, e?.config?.url)
if (e.code !== '200') errorMessage = '404 Not Found'
}
return {
redirect: {
destination: '/404',
permanent: false
props: {
errorMessage,
blockDetail: null,
blockHeight,
transactions: []
}
}
}
Expand Down
27 changes: 13 additions & 14 deletions pages/token/[token].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Breadcumbs, useMobileLayout } from '@astraprotocol/astra-ui'
import { evmApi } from 'api'
import API_LIST from 'api/api_list'
import { AxiosError } from 'axios'
import Container from 'components/Container'
import Head from 'next/head'
import React from 'react'
Expand All @@ -13,12 +14,12 @@ import Layout from '../../components/Layout'
type Props = {
token: string
tokenData: Token
message: string
errorMessage?: string
}

const TokenDetailPage: React.FC<Props> = props => {
const { isMobile } = useMobileLayout()
const { token, tokenData, message } = props
const { token, tokenData, errorMessage } = props

const title = tokenData ? `${tokenData.name} (${tokenData.symbol}) - ${process.env.NEXT_PUBLIC_TITLE}` : token
return (
Expand All @@ -40,7 +41,7 @@ const TokenDetailPage: React.FC<Props> = props => {
<TokenDetailTab token={token} tokenData={tokenData} />
</>
) : (
<h1 className="text contrast-color-70 margin-top-sm">{message || 'Token Not Found'}</h1>
<h1 className="text contrast-color-70 margin-top-sm">{errorMessage || 'Token Not Found'}</h1>
)}
</Container>
</Layout>
Expand All @@ -55,23 +56,28 @@ export async function getServerSideProps({ params }) {
if (tokenData.data.result) {
return {
props: {
message: null,
errorMessage: '404 Not Found',
token,
tokenData: tokenData.data.result
}
}
}
return {
props: {
message: tokenData.data.message,
errorMessage: tokenData.data.message,
token,
tokenData: null
}
}
} catch (err) {
let errorMessage = err.message
if (err instanceof AxiosError) {
console.log('error api', err.message, err.code, err?.config?.baseURL, err?.config?.url)
if (err.code !== '200') errorMessage = '404 Not Found'
}
return {
props: {
message: 'Fetch error!',
errorMessage: err.message,
token,
tokenData: null
}
Expand All @@ -80,18 +86,11 @@ export async function getServerSideProps({ params }) {
}
return {
props: {
message: null,
message: 'Token address invalid',
token,
tokenData: null
}
}

// return {
// redirect: {
// destination: '/404',
// permanent: false
// }
// }
}

export default TokenDetailPage
Loading

0 comments on commit 1c06654

Please sign in to comment.