Skip to content

Commit

Permalink
feat: init ticket
Browse files Browse the repository at this point in the history
  • Loading branch information
Tien Nam Dao committed Oct 6, 2022
1 parent 93f7c17 commit 998fd67
Show file tree
Hide file tree
Showing 13 changed files with 373 additions and 40 deletions.
3 changes: 3 additions & 0 deletions api/api_list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ const API_LIST = {
BLOCKS: '/blocks/',
TRANSACTION_OF_BLOCK: '/blocks/:id/transactions?pagination=offset&page=1&limit=20&order=height.desc',
LATEST_BLOCK: 'evm_/api/v1?module=block&action=eth_block_number',
ALL_TOKENS: 'evm_/api/v1?module=token&action=getListTokens', // &page=1&offset=20
ALL_HOLDERS:
'evm_/api/v1?module=token&action=getTokenHolders&contractaddress=0x60baCCdfdCa114f97F32121f6b2879fB555Df4d0&page=1&offset=20', // &page=1&offset=20

ALL_TRANSACTIONS: '/transactions',
TRANSACTIONS: '/transactions/',
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"license": "MIT",
"dependencies": {
"@astradefi/address-converter": "^0.4.1",
"@astraprotocol/astra-ui": "file:/Users/lap02631/astra/astra-ui",
"@astraprotocol/astra-ui": "file:../../Github/astra-ui",
"@cosmjs/crypto": "^0.29.0",
"@cosmjs/encoding": "^0.29.0",
"@reduxjs/toolkit": "^1.8.5",
Expand Down
51 changes: 31 additions & 20 deletions pages/accounts.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,46 @@
import Container from 'components/Container'
import { PageTitle } from 'components/Typography/PageTitle'
import RowTitle from 'components/Typography/RowTitle'
import { NextPage } from 'next'
// import {Pagination} from '@astraprotocol/astra-ui'
import Head from 'next/head'
import React from 'react'
import React, { useState } from 'react'
import Layout from '../components/Layout'

const AccountsPage: React.FC<NextPage> = _ => {
// // const t = useTranslations('Index')
const AstraHolderPage: React.FC<NextPage> = _ => {
const [currentPage, setPage] = useState(1)
// const { tokens } = useTokens(currentPage)
// console.log(tokens)

return (
<Layout>
<Head>
<title>Astra Explorer</title>
</Head>
<Container>Account</Container>

<Container>
<PageTitle>Astra Address</PageTitle>
<RowTitle
columns={[
{ title: '', col: 'gutter-right' },
{ title: 'Address', col: 'padding-left-lg gutter-left col-5' },
{ title: 'Balance', col: 'padding-left-sm col-4' },
{ title: 'Transaction Count', col: 'padding-left-lg ' }
]}
/>
{/* <Pagination></Pagination> */}
{/* {!tokens || tokens.length === 0 ? (
<RowLoader row={10} />
) : (
<div className="padding-bottom-sm">
{tokens?.map((item: Token, index: number) => {
return <TokenRow key={index} index={index} token={item} />
})}
</div>
)} */}
</Container>
</Layout>
)
}
// // type HomeExtendProps = typeof Home & { messages: string[] }
// // ;(Home as HomeExtendProps).messages = ['Index']

// // export async function getStaticProps({ locale }: GetStaticPropsContext) {
// // return {
// // props: {
// // messages: pick(
// // {
// // ...(await import(`../messages/share/${locale}.json`)).default,
// // ...(await import(`../messages/index/${locale}.json`)).default
// // },
// // (Home as HomeExtendProps).messages
// // )
// // }
// // }
// // }
export default AccountsPage
export default AstraHolderPage
Empty file added pages/token/[token].tsx
Empty file.
51 changes: 33 additions & 18 deletions pages/tokens.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,50 @@
import Container from 'components/Container'
import RowLoader from 'components/Loader/RowLoader'
import { PageTitle } from 'components/Typography/PageTitle'
import RowTitle from 'components/Typography/RowTitle'
import { NextPage } from 'next'
// import {Pagination} from '@astraprotocol/astra-ui'
import Head from 'next/head'
import React from 'react'
import React, { useState } from 'react'
import useTokens from 'views/tokens/hook/useTokens'
import TokenRow from 'views/tokens/TokenRow'
import Layout from '../components/Layout'

const AllTokensPage: React.FC<NextPage> = _ => {
// // const t = useTranslations('Index')
const [currentPage, setPage] = useState(1)
const { tokens } = useTokens(currentPage)
console.log(tokens)

return (
<Layout>
<Head>
<title>Astra Explorer</title>
</Head>
<Container>Token</Container>

<Container>
<PageTitle>Tokens</PageTitle>
<RowTitle
columns={[
{ title: '', col: 'gutter-right' },
{ title: 'Token', col: 'padding-left-lg col-2 gutter-right' },
{ title: 'Address', col: 'padding-left-lg gutter-left col-5' },
{ title: 'Total Supply', col: 'padding-left-sm col-4' },
{ title: 'Holders Count', col: 'padding-left-lg ' }
]}
/>
{/* <Pagination></Pagination> */}
{!tokens || tokens.length === 0 ? (
<RowLoader row={10} />
) : (
<div className="padding-bottom-sm">
{tokens?.map((item: Token, index: number) => {
return <TokenRow key={index} index={index} token={item} />
})}
</div>
)}
</Container>
</Layout>
)
}
// // type HomeExtendProps = typeof Home & { messages: string[] }
// // ;(Home as HomeExtendProps).messages = ['Index']

// // export async function getStaticProps({ locale }: GetStaticPropsContext) {
// // return {
// // props: {
// // messages: pick(
// // {
// // ...(await import(`../messages/share/${locale}.json`)).default,
// // ...(await import(`../messages/index/${locale}.json`)).default
// // },
// // (Home as HomeExtendProps).messages
// // )
// // }
// // }
// // }
export default AllTokensPage
18 changes: 18 additions & 0 deletions project.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -367,3 +367,21 @@ interface CosmosTransactionDetailResponse {
}
status: string
}

interface Token {
cataloged: boolean
contract_address_hash: string
decimals: string
holder_count: number
name: string
skip_metadata: any
symbol: string
total_supply: string
type: string
}

interface TokenResponse {
message: string
result: Token[]
status: string
}
12 changes: 11 additions & 1 deletion utils/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,23 @@ export class LinkMaker {

/**
*
* @param blockNumber empty -> block homepage
* @param hash
* @param query
* @returns
*/
static transaction(hash?: string, query: string = '') {
hash = hash ? `/${hash}${query}` : ''
return `/tx${hash}`
}

/**
*
* @param token
* @returns
*/
static token(token: string) {
return `/token/${token}`
}
}

/**
Expand Down
77 changes: 77 additions & 0 deletions views/accounts/TokenRow.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import clsx from 'clsx'
import Typography from 'components/Typography'
import { LinkMaker } from 'utils/helper'
import styles from './style.module.scss'

type Props = {
index: number
token: Token
// blockNumber: number
// size: number
// updatedAt: number | string
// transactions: number
// proposerAddress: string
// mine?: boolean
// value: number
// newBlock?: boolean
}

export default function TokenRow({
index,
token
}: // blockNumber,
// updatedAt,
// transactions,
// proposerAddress,
// mine,
// size,
// value,
// newBlock
Props) {
return (
<div
className={clsx(
styles.rowBrief,
styles.tokenRow,
'row padding-left-lg',
'padding-right-lg padding-top-sm padding-bottom-sm',
'radius-lg',
'margin-bottom-xs'
)}
>
<div className={clsx('text text-base contrast-color-70 text-center margin-right-sm')}>{index}</div>
<div className="col-2 block-ver-center">
<Typography.LinkText
href={LinkMaker.token(token.contract_address_hash)}
className={['text', 'text-base']}
>
{`${token.name} (${token.symbol})`}
</Typography.LinkText>
</div>

<div className={clsx('col-5 padding-left-lg', styles.borderLeft)}>
<div>
<Typography.LinkText
href={LinkMaker.address(token.contract_address_hash)}
className={['text', 'text-sm']}
>
{token.contract_address_hash}
</Typography.LinkText>
</div>
{/* <div className={clsx('block-ver-center', styles.info)}>
<span className={clsx('money money-sm money-bold')}>{10000}</span>
<span className={clsx(styles.currency, 'money money-sm money-bold')}>USDT</span>
</div> */}
</div>

<div className="col-4 block-ver-center">
<span className={clsx('money money-sm money-bold padding-right-xs')}>{token.total_supply}</span>
<span className={clsx(styles.currency, 'money money-sm money-bold')}>{token.symbol}</span>
</div>

<div className="padding-left-lg text-center money money-xs contrast-color-70 block-ver-center">
{token.holder_count}
</div>
</div>
)
}
27 changes: 27 additions & 0 deletions views/accounts/hook/useAccounts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import API_LIST from 'api/api_list'
import { useEffect, useState } from 'react'
import useSWR from 'swr'

export default function useAccounts(page: number) {
const [tokens, setState] = useState<Token[]>()

const _fetchCondition = () => {
return [
API_LIST.ALL_HOLDERS,
{
page,
offset: 20
}
]
}
const { data } = useSWR<TokenResponse>(_fetchCondition())

useEffect(() => {
if (data?.result) {
setState(data?.result)
}
}, [data])
return {
tokens
}
}
34 changes: 34 additions & 0 deletions views/accounts/style.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.rowBrief {
display: flex;
align-items: center;
.indexCenter {
display: flex;
align-items: center;
}
.content {
width: 100%;
.info {
display: flex;
justify-content: space-between;
}
}
}

.tokenRow {
background: rgba(var(--contrast-color-theme--raw), 0.05);
border: 1px solid rgba(var(--contrast-color-theme--raw), 0.05);
backdrop-filter: blur(42px);

.currency {
font-family: 'TitilliumWeb-SemiBold';
color: var(--contrast-color-theme-70);
}
}
.borderLeft {
border-left: 1px solid rgba(var(--contrast-color-theme--raw), 0.05);
}

.topRow {
display: flex;
justify-content: space-between;
}
Loading

0 comments on commit 998fd67

Please sign in to comment.