Skip to content

Commit a8423cc

Browse files
carlhongcarlhong
committed
chore: update mobile style
1 parent fcaa599 commit a8423cc

File tree

13 files changed

+633
-522
lines changed

13 files changed

+633
-522
lines changed

‎src/components/loading/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as LoadingSpinner } from './loadingSpinner'
2+
export { default as LoadingText } from './loadingText'

‎src/components/loading/loadingSpinner.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { BareProps } from '@/types/page'
3+
import { Spinner } from '@heroui/react'
4+
5+
interface Props extends BareProps {
6+
}
7+
8+
const Component: React.FC<Props> = ({ className }) => {
9+
return (
10+
<div className="flex justify-center items-center h-64">
11+
<Spinner size="lg" color="danger" />
12+
</div>
13+
)
14+
}
15+
16+
export default Component

‎src/components/loading/loadingText.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import { BareProps } from '@/types/page'
3+
4+
interface Props extends BareProps {
5+
}
6+
7+
const Component: React.FC<Props> = ({ className }) => {
8+
return (
9+
<div className="text-center py-10">
10+
<div className="text-xl font-medium">We didn’t find any results. Try refining your search.</div>
11+
</div>
12+
)
13+
}
14+
15+
export default Component

‎src/components/navbar/navbar.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
Image,
1818
Select,
1919
SelectItem,
20+
Divider,
2021
} from '@heroui/react'
2122
import { useData } from '@/context'
2223
import _ from 'lodash'
@@ -374,21 +375,31 @@ const Component: React.FC<Props> = ({ children, className }) => {
374375
placeholder="Search"
375376
size="md"
376377
startContent={
377-
<Select
378-
className="lg:max-w-44"
379-
label=""
380-
selectedKeys={type}
381-
onSelectionChange={(key) => {
382-
if (key.currentKey) {
383-
setType([key.currentKey])
384-
}
385-
}}>
386-
{typeOptions.map((item) => (
387-
<SelectItem key={item.value}>{item.name}</SelectItem>
388-
))}
389-
</Select>
378+
<div className='flex h-5 items-center'>
379+
<Select
380+
className=""
381+
classNames={{
382+
base: 'w-auto',
383+
trigger: '!bg-transparent shadow-none !w-auto px-5',
384+
innerWrapper: '!w-auto',
385+
popoverContent: 'w-[190px]',
386+
selectorIcon: 'right-[0px]',
387+
}}
388+
label=""
389+
selectedKeys={type}
390+
onSelectionChange={(key) => {
391+
if (key.currentKey) {
392+
setType([key.currentKey])
393+
}
394+
}}>
395+
{typeOptions.map((item) => (
396+
<SelectItem key={item.value}>{item.name}</SelectItem>
397+
))}
398+
</Select>
399+
<Divider orientation="vertical" className='mx-4'/>
400+
</div>
390401
}
391-
// type="text"
402+
endContent={<SearchIcon fill="none" size={24} className="mr-3"/>}
392403
/>
393404
</div>
394405
</div>

‎src/pages/address/[id].tsx‎

Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ import { Container, PageContent } from '@/ui'
1010
import TokenTransferTable from '@/components/erc20Token/tokenTransferTable'
1111
import TokenTable from '@/components/pvmAccount/tokenTable'
1212
import { env } from 'next-runtime-env'
13+
import { LoadingSpinner, LoadingText } from '@/components/loading'
1314

1415
export default function Page() {
1516
const router = useRouter()
16-
const { metadata, token, isLoading } = useData()
17+
const { metadata, token } = useData()
1718
const id = router.query.id as string
1819
const NEXT_PUBLIC_API_HOST = env('NEXT_PUBLIC_API_HOST') || ''
19-
const { data } = usePVMAccounts(NEXT_PUBLIC_API_HOST, {
20+
const { data, isLoading } = usePVMAccounts(NEXT_PUBLIC_API_HOST, {
2021
address: id,
2122
row: 10,
2223
page: 0,
@@ -29,53 +30,61 @@ export default function Page() {
2930
<PageContent>
3031
<Container>
3132
<div className="flex flex-col gap-4">
32-
{accountData && (
33-
<>
34-
<div className="">Account #{accountData.evm_account}</div>
35-
<Card>
36-
<CardBody>
37-
<div className="flex items-center">
38-
<div className="w-48">Balance</div>
39-
<div>
40-
{getBalanceAmount(new BigNumber(accountData.balance), token?.decimals).toFormat()} {token?.symbol}
33+
{isLoading ? (
34+
<LoadingSpinner />
35+
) : (
36+
accountData && (
37+
<>
38+
<div className="flex flex-col lg:flex-row gap-1">
39+
<div className="text-base">Account</div>
40+
<div className="text-sm break-all sm:text-base">#{accountData.evm_account}</div>
41+
</div>
42+
<Card>
43+
<CardBody>
44+
<div className="flex items-center">
45+
<div className="w-48">Balance</div>
46+
<div>
47+
{getBalanceAmount(new BigNumber(accountData.balance), token?.decimals).toFormat()} {token?.symbol}
48+
</div>
4149
</div>
42-
</div>
43-
</CardBody>
44-
</Card>
45-
<Card>
46-
<CardBody>
47-
<Tabs aria-label="tabs" variant="underlined" color={getThemeColor()}>
48-
<Tab key="erc20" title="ERC-20 Tokens">
49-
<TokenTable
50-
args={{
51-
address: id,
52-
category: 'erc20',
53-
}}></TokenTable>
54-
</Tab>
55-
<Tab key="erc721" title="ERC-721 Tokens">
56-
<TokenTable
57-
args={{
58-
address: id,
59-
category: 'erc721',
60-
}}></TokenTable>
61-
</Tab>
62-
<Tab key="transactions" title="Transactions">
63-
<TxTable
64-
args={{
65-
address: id,
66-
}}></TxTable>
67-
</Tab>
68-
<Tab key="transfers" title="Transfers">
69-
<TokenTransferTable
70-
args={{
71-
address: id,
72-
}}></TokenTransferTable>
73-
</Tab>
74-
</Tabs>
75-
</CardBody>
76-
</Card>
77-
</>
50+
</CardBody>
51+
</Card>
52+
<Card>
53+
<CardBody>
54+
<Tabs aria-label="tabs" variant="underlined" color={getThemeColor()}>
55+
<Tab key="erc20" title="ERC-20 Tokens">
56+
<TokenTable
57+
args={{
58+
address: id,
59+
category: 'erc20',
60+
}}></TokenTable>
61+
</Tab>
62+
<Tab key="erc721" title="ERC-721 Tokens">
63+
<TokenTable
64+
args={{
65+
address: id,
66+
category: 'erc721',
67+
}}></TokenTable>
68+
</Tab>
69+
<Tab key="transactions" title="Transactions">
70+
<TxTable
71+
args={{
72+
address: id,
73+
}}></TxTable>
74+
</Tab>
75+
<Tab key="transfers" title="Transfers">
76+
<TokenTransferTable
77+
args={{
78+
address: id,
79+
}}></TokenTransferTable>
80+
</Tab>
81+
</Tabs>
82+
</CardBody>
83+
</Card>
84+
</>
85+
)
7886
)}
87+
{!isLoading && !accountData && <LoadingText />}
7988
</div>
8089
</Container>
8190
</PageContent>

‎src/pages/block/[id].tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ import { Container, PageContent } from '@/ui'
77
import { TxTable } from '@/components/tx'
88
import { Link } from '@/components/link'
99
import { env } from 'next-runtime-env'
10+
import { LoadingSpinner, LoadingText } from '@/components/loading'
1011

1112
export default function Page() {
1213
const router = useRouter()
1314
const id = router.query.id
1415
const NEXT_PUBLIC_API_HOST = env('NEXT_PUBLIC_API_HOST') || ''
15-
const { data } = usePVMBlock(NEXT_PUBLIC_API_HOST, {
16+
const { data, isLoading } = usePVMBlock(NEXT_PUBLIC_API_HOST, {
1617
block_num: Number(id),
1718
})
1819

@@ -22,9 +23,14 @@ export default function Page() {
2223
<PageContent>
2324
<Container>
2425
<div className="flex flex-col gap-4">
25-
<div className="">PVM Block #{id}</div>
26-
{blockData && (
26+
{isLoading ? (
27+
<LoadingSpinner />
28+
) : (blockData && (
2729
<>
30+
<div className="flex flex-col lg:flex-row gap-1">
31+
<div className="text-base">PVM Block</div>
32+
<div className="text-sm break-all sm:text-base">#{id}</div>
33+
</div>
2834
<Card>
2935
<CardBody>
3036
<div className="flex items-center">
@@ -82,7 +88,8 @@ export default function Page() {
8288
</CardBody>
8389
</Card>
8490
</>
85-
)}
91+
))}
92+
{!isLoading && !blockData && <LoadingText />}
8693
</div>
8794
</Container>
8895
</PageContent>

0 commit comments

Comments
 (0)