Skip to content

Commit

Permalink
feat: token and token detail
Browse files Browse the repository at this point in the history
  • Loading branch information
Peterbjx committed Apr 27, 2024
1 parent de6fc09 commit 99195dc
Show file tree
Hide file tree
Showing 20 changed files with 163 additions and 119 deletions.
23 changes: 13 additions & 10 deletions src/_api/fetchTokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,43 @@ import {
TTokenListRequestParams,
} from './type';
import { IHolderTableData, ITokenDetail, ITokenList, ITransferTableData } from '@app/[chain]/token/[tokenSymbol]/type';

const defaultTokenListData: ITokenList = {
total: 0,
list: [],
};
export async function fetchTokenList(params: TTokenListRequestParams): Promise<ITokenList> {
const result = await request.tx.getTransactionDetail({
const result = await request.token.getTokenList({
params: params,
});
const data = result?.data;
const data = result?.data || defaultTokenListData;
return data;
}
export async function fetchServerTokenList(params: TTokenListRequestParams): Promise<ITokenList> {
const result = await request.tx.getTransactionDetail({
const result = await request.token.getServerTokenList({
params: params,
});
const data = result?.data;
const data = result?.data || defaultTokenListData;
return data;
}
export async function fetchTokenDetail(params: ITokenDetailRequestParams): Promise<ITokenDetail> {
const result = await request.tx.getTransactionDetail({
const result = await request.token.getTokenDetail({
params: params,
});
const data = result?.data;
return data;
}
export async function fetchTokenDetailTransfers(params: ITokenTransfersRequestParams): Promise<ITransferTableData> {
const result = await request.tx.getTransactionDetail({
const result = await request.token.getTokenDetailTransfers({
params: params,
});
const data = result?.data;
const data = result?.data || defaultTokenListData;
return data;
}

export async function fetchTokenDetailHolders(params: ITokenHoldersRequestParams): Promise<IHolderTableData> {
const result = await request.tx.getTransactionDetail({
const result = await request.token.getTokenDetailHolders({
params: params,
});
const data = result?.data;
const data = result?.data || defaultTokenListData;
return data;
}
9 changes: 5 additions & 4 deletions src/_api/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ const Transaction_API_List = {
};

const Token_API_List = {
getTokenList: `api/app/token/list`,
getServerTokenList: `api/app/token/list`,
getTokenList: `${BASE_API}/app/token/list`,
getServerTokenList: `${SERVER_BASE_API}/app/token/list`,
getTokenDetail: `${SERVER_BASE_API}/app/token/detail`,
getTokenDetailTransfers: `api/app/token/transfers`,
getTokenDetailHolders: `api/app/token/holders`,
getTokenDetailTransfers: `${BASE_API}/app/token/transfers`,
getTokenDetailHolders: `${BASE_API}/app/token/holders`,
};

const Common_API_List = {
Expand All @@ -48,6 +48,7 @@ export const API_List = {
tx: Transaction_API_List,
common: Common_API_List,
cms: CMS_API_List,
token: Token_API_List,
};

type REQUEST_FUNCTION = (opt?: RequestWithParams) => Promise<any>;
Expand Down
2 changes: 1 addition & 1 deletion src/_api/server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ async function service(url: string, options: RequestWithParams) {
const paramsArr: Array<any> = [];
if (Object.keys(params).length > 0) {
for (const item in params) {
if (params[item] !== undefined) {
if ((params[item] !== undefined && params[item]) || params[item] === 0) {
paramsArr.push(item + '=' + params[item]);
}
}
Expand Down
4 changes: 3 additions & 1 deletion src/_api/type.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ILogsProps } from '@_components/LogsContainer/type';
import { SortEnum } from '@_types/common';

export type TChainID = 'AELF' | 'tDVV' | 'tDVW';

Expand Down Expand Up @@ -194,6 +195,7 @@ export interface ITokenHoldersRequestParams {
symbol: string;
skipCount: number;
maxResultCount: number;
// search: string;
}

export interface ITokenTransfersRequestParams {
Expand All @@ -213,6 +215,6 @@ export interface TTokenListRequestParams {
chainId: TChainID;
skipCount: number;
maxResultCount: number;
sort: number;
sort: SortEnum;
sortBy: number;
}
5 changes: 5 additions & 0 deletions src/_types/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,8 @@ export enum AddressType {
address,
Contract,
}

export enum SortEnum {
asc,
desc,
}
16 changes: 3 additions & 13 deletions src/app/[chain]/block/[hash]/_components/detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
'use client';
import clsx from 'clsx';
import HeadTitle from '@_components/HeaderTitle';
import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
import { useMemo, useState, useCallback } from 'react';
import './detail.css';
import BaseInfo from './baseinfo';
import ExtensionInfo from './ExtensionInfo';
Expand All @@ -21,7 +21,6 @@ import EPTabs from '@_components/EPTabs';
import { useMobileAll } from '@_hooks/useResponsive';
import { IBlocksDetailData, ITransactionsResponseItem } from '@_api/type';
import { pageSizeOption } from '@_utils/contant';
import { useAppSelector } from '@_store';
import { useParams } from 'next/navigation';

export default function Detail({ SSRData }) {
Expand Down Expand Up @@ -52,20 +51,11 @@ export default function Detail({ SSRData }) {
setCurrentPage(page);
};

const pageSizeChange = (size) => {
const pageSizeChange = (page, size) => {
setCurrentPage(page);
setPageSize(size);
};

const mountedRef = useRef<boolean>(true);
const { defaultChain } = useAppSelector((state) => state.getChainId);
useEffect(() => {
if (mountedRef.current) {
mountedRef.current = false;
return;
}
setPageSize(25);
setCurrentPage(1);
}, [defaultChain]);
const tableData = useMemo(() => {
const transactions = detailData.transactions || [];
return transactions.slice((currentPage - 1) * pageSize, currentPage * pageSize);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
const res = await fetchTokenDetailHolders(params);
setData(res.list);
setTotal(res.total);
setLoading(false);
} catch (error) {
setLoading(false);
}
Expand All @@ -43,9 +44,9 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
setCurrentPage(page);
};

const pageSizeChange = async (size) => {
const pageSizeChange = async (page, size) => {
setPageSize(size);
setCurrentPage(1);
setCurrentPage(page);
};

useEffect(() => {
Expand All @@ -70,7 +71,7 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
},
onSearchChange,
}}
showTopSearch
// showTopSearch
loading={loading}
dataSource={data}
columns={columns}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const TokenDetailItems: IOverviewItem[] = [
{
key: 'holders',
label: 'HOLDERS',
render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24h']} />,
render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24H']} />,
},
{
key: 'totalTransfers',
Expand All @@ -33,20 +33,24 @@ const TokenDetailItems: IOverviewItem[] = [
{
key: 'priceInUsd',
label: 'PRICE',
render: (text, record) => (
<NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
),
render: (text, record) =>
record['pricePercentChange24h'] && record['pricePercentChange24h'] !== 0 ? (
<NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
) : (
'--'
),
},
{
key: 'contractAddress',
label: 'CONTRACT',
tooltip:
'This is the MultiToken contract that defines a common implementation for fungible and non-fungible tokens.',
render: (text) => <ContractToken address={text} type={AddressType.address} chainId="AELf" />,
render: (text) => (text ? <ContractToken address={text} type={AddressType.address} chainId="AELf" /> : '--'),
},
{
key: 'decimals',
label: 'DECIMAL',
render: (text) => (text && text !== 0 ? text : '--'),
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chain }): Col
width: 180,
render: (data) => {
const { address, addressType } = data;
return <ContractToken address={address} type={addressType} chainId={chain} />;
return <ContractToken address={address || ''} type={addressType} chainId={chain} />;
},
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface ITransfersRef {
setSearchStr: (val: string) => void;
}

const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }: ITransfersProps, ref) => {
const Transfers = ({ search, searchText, searchType, onSearchChange, onSearchInputChange }: ITransfersProps, ref) => {
const { isMobile } = useMobileAll();
const [currentPage, setCurrentPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(50);
Expand All @@ -54,17 +54,18 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
symbol: tokenSymbol as string,
skipCount: getPageNumber(currentPage, pageSize),
maxResultCount: pageSize,
search: search || '',
search: searchText || '',
};
const res = await fetchTokenDetailTransfers(params);
const { balance, value, list, total } = res;
setData(list);
setSearchData({ balance, value });
setTotal(total);
setLoading(false);
} catch (error) {
setLoading(false);
}
}, [chain, tokenSymbol, currentPage, pageSize, search]);
}, [chain, tokenSymbol, currentPage, pageSize, searchText]);

useImperativeHandle(
ref,
Expand All @@ -80,9 +81,9 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
const pageChange = async (page: number) => {
setCurrentPage(page);
};
const pageSizeChange = async (size) => {
const pageSizeChange = async (page, size) => {
setPageSize(size);
setCurrentPage(1);
setCurrentPage(page);
};

useEffect(() => {
Expand All @@ -96,7 +97,7 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
handleTimeChange: () => setTimeFormat(timeFormat === 'Age' ? 'Date Time (UTC)' : 'Age'),
chain,
}),
[timeFormat],
[chain, timeFormat],
);
const title = useMemo(() => `A total of ${total} ${total <= 1 ? 'token' : 'tokens'} found`, [total]);

Expand All @@ -105,10 +106,10 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
[address, isMobile, searchData],
);
const searchByHash: DescriptionsProps['items'] = useMemo(
() => getSearchByHashItems(address, isMobile),
[address, isMobile],
() => getSearchByHashItems(address, isMobile, chain, data[0]?.blockHeight),
[address, chain, data, isMobile],
);

console.log(searchType, 'searchType');
return (
<div>
{searchType !== SearchType.other && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,12 @@ export function getSearchByHolderItems(
];
}

export function getSearchByHashItems(address: string, isMobile: boolean): DescriptionsProps['items'] {
export function getSearchByHashItems(
address: string,
isMobile: boolean,
chain,
blockHeight,
): DescriptionsProps['items'] {
const spanWith2col = isMobile ? 4 : 2;
return [
{
Expand All @@ -55,7 +60,10 @@ export function getSearchByHashItems(address: string, isMobile: boolean): Descri
fontWeight: 500,
},
children: (
<Link className="block w-[120px] truncate text-xs leading-5 text-link" href={`tx/${address}`}>
<Link
className="block w-[400px] truncate text-xs leading-5 text-link"
// href={`/${chain}/tx/${address}?blockHeight=${blockHeight}`}>
href="">
{address}
</Link>
),
Expand Down
Loading

0 comments on commit 99195dc

Please sign in to comment.