Skip to content

Commit 4fc2b56

Browse files
isstuevisstuev
committed
filters to test
1 parent 4752387 commit 4fc2b56

16 files changed

+1058
-21
lines changed

‎lib/api/services/zetaChain.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
11
import type { ApiResource } from '../types';
2-
import type { ZetaChainCCTXListResponse, ZetaChainCCTXResponse } from 'types/api/zetaChain';
2+
import type { ZetaChainCCTXListResponse, ZetaChainCCTXResponse, ZetaChainTokensResponse } from 'types/api/zetaChain';
33

44
export const ZETA_CHAIN_API_RESOURCES = {
55
transactions: {
66
path: '/api/v1/CctxInfo\\:list',
7-
filterFields: [ 'limit' as const, 'offset' as const, 'status' as const ],
7+
filterFields: [
8+
'limit' as const,
9+
'offset' as const,
10+
'status_reduced' as const,
11+
'start_timestamp' as const,
12+
'end_timestamp' as const,
13+
'sender_address' as const,
14+
'receiver_address' as const,
15+
'token_symbol' as const,
16+
],
817
paginated: true,
918
},
1019
transaction: {
1120
path: '/api/v1/CctxInfo\\:get',
1221
filterFields: [ 'cctx_id' as const ],
1322
},
23+
tokens: {
24+
path: '/api/v1/TokenInfo\\:list',
25+
filterFields: [ 'q' as const, 'limit' as const ],
26+
paginated: true,
27+
},
1428
} satisfies Record<string, ApiResource>;
1529

1630
export type ZetaChainApiResourceName = `zetachain:${ keyof typeof ZETA_CHAIN_API_RESOURCES }`;
@@ -19,5 +33,6 @@ export type ZetaChainApiResourceName = `zetachain:${ keyof typeof ZETA_CHAIN_API
1933
export type ZetaChainApiResourcePayload<R extends ZetaChainApiResourceName> =
2034
R extends 'zetachain:transactions' ? ZetaChainCCTXListResponse :
2135
R extends 'zetachain:transaction' ? ZetaChainCCTXResponse :
36+
R extends 'zetachain:tokens' ? ZetaChainTokensResponse :
2237
never;
2338
/* eslint-enable @stylistic/indent */

‎types/api/zetaChain.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@ export type ZetaChainCCTXStatus = 'PENDING_OUTBOUND' | 'PENDING_INBOUND' | 'OUTB
9898

9999
export type ZetaChainCCTXStatusReduced = 'SUCCESS' | 'PENDING' | 'FAILED';
100100

101+
// API filter values (capitalized for API endpoint)
102+
export type ZetaChainCCTXStatusReducedFilter = 'Success' | 'Pending' | 'Failed';
103+
101104
export type ZetaChainCCTXCoinType = 'ZETA' | 'GAS' | 'ERC20' | 'CMD' | 'NO_ASSET_CALL';
102105

103106
export type ZetaChainCCTXFinalizationStatus = 'FINALIZED' | 'NOT_FINALIZED';
@@ -129,3 +132,31 @@ export type ZetaChainCCTXOutboundParams = {
129132
};
130133
confirmation_mode: ZetaChainCCTXConfirmationMode;
131134
};
135+
136+
// Filter types for ZetaChain CCTX
137+
export type ZetaChainCCTXFilterParams = {
138+
start_timestamp?: string;
139+
end_timestamp?: string;
140+
status_reduced?: Array<ZetaChainCCTXStatusReducedFilter>;
141+
sender_address?: Array<string>;
142+
receiver_address?: Array<string>;
143+
token_symbol?: Array<string>;
144+
};
145+
146+
export const ZETA_CHAIN_CCTX_FILTER_AGES = [ '1h', '24h', '7d', '1m', '3m', '6m' ] as const;
147+
export type ZetaChainCCTXFilterAge = typeof ZETA_CHAIN_CCTX_FILTER_AGES[number];
148+
149+
// Token types for ZetaChain
150+
export type ZetaChainTokensResponse = {
151+
tokens: Array<ZetaChainTokenInfo>;
152+
};
153+
154+
export type ZetaChainTokenInfo = {
155+
foreign_chain_id: number;
156+
decimals: number;
157+
name: string;
158+
symbol: string;
159+
zrc20_contract_address: string;
160+
icon_url: string | null;
161+
coin_type: string;
162+
};

‎ui/advancedFilter/filters/AgeFilter.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,11 @@ type Props = {
3232
const DateInput = ({ value, onChange, placeholder, max }: { value: string; onChange: (value: string) => void; placeholder: string; max: string }) => {
3333
const [ tempValue, setTempValue ] = React.useState(value ? dayjs(value).format('YYYY-MM-DD') : '');
3434

35+
// reset
3536
React.useEffect(() => {
36-
setTempValue(value ? dayjs(value).format('YYYY-MM-DD') : '');
37+
if (!value) {
38+
setTempValue('');
39+
}
3740
}, [ value ]);
3841

3942
const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {

‎ui/shared/zetaChain/ZetaChainCCTXValue.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,24 @@ type Props = {
1414
decimals?: string | null;
1515
isLoading?: boolean;
1616
className?: string;
17+
accuracy?: number;
1718
};
1819

19-
const ZetaChainCCTXValue = ({ coinType, tokenSymbol, amount, decimals, isLoading, className }: Props) => {
20+
const ZetaChainCCTXValue = ({ coinType, tokenSymbol, amount, decimals, isLoading, className, accuracy = 8 }: Props) => {
2021
let unit: string;
2122
let value: string | undefined;
2223
switch (coinType) {
2324
case 'ERC20':
2425
unit = tokenSymbol || 'Unnamed token';
25-
value = getCurrencyValue({ value: amount, decimals: decimals || '18' }).valueStr;
26+
value = getCurrencyValue({ value: amount, decimals: decimals || '18', accuracy }).valueStr;
2627
break;
2728
case 'ZETA':
2829
unit = config.chain.currency.symbol || config.chain.currency.name || '';
29-
value = getCurrencyValue({ value: amount, decimals: config.chain.currency.decimals.toString() || '18' }).valueStr;
30+
value = getCurrencyValue({ value: amount, decimals: config.chain.currency.decimals.toString() || '18', accuracy }).valueStr;
3031
break;
3132
case 'GAS':
3233
unit = tokenSymbol || 'Unnamed token';
33-
value = getCurrencyValue({ value: amount, decimals: decimals || '18' }).valueStr;
34+
value = getCurrencyValue({ value: amount, decimals: decimals || '18', accuracy }).valueStr;
3435
break;
3536
default:
3637
unit = '-';

‎ui/txs/zetaChain/ZetaChainCCTXsTab.tsx‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
33
import React from 'react';
44

55
import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
6+
import type { ZetaChainCCTXFilterParams } from 'types/api/zetaChain';
67

78
import useIsMobile from 'lib/hooks/useIsMobile';
89
import getNetworkValidationActionText from 'lib/networks/getNetworkValidationActionText';
@@ -12,6 +13,7 @@ import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
1213
import Pagination from 'ui/shared/pagination/Pagination';
1314
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
1415

16+
import ZetaChainFilterTags from './filters/ZetaChainFilterTags';
1517
import ZetaChainCCTxs from './ZetaChainCCTxs';
1618

1719
const TAB_LIST_PROPS = {
@@ -27,17 +29,40 @@ const ZetaChainEvmTransactions = () => {
2729
const tab = getQueryParamString(router.query.tab);
2830
const isMobile = useIsMobile();
2931

32+
const [ filters, setFilters ] = React.useState<ZetaChainCCTXFilterParams>({});
33+
34+
const handleFilterChange = React.useCallback(<T extends keyof ZetaChainCCTXFilterParams>(field: T, val: ZetaChainCCTXFilterParams[T]) => {
35+
setFilters(prevState => {
36+
const newState = { ...prevState };
37+
newState[field] = val;
38+
return newState;
39+
});
40+
}, []);
41+
42+
const onClearFilter = React.useCallback((key: keyof ZetaChainCCTXFilterParams) => () => {
43+
setFilters(prevState => {
44+
const newState = { ...prevState };
45+
delete newState[key];
46+
return newState;
47+
});
48+
}, []);
49+
50+
const clearAllFilters = React.useCallback(() => {
51+
setFilters({});
52+
}, []);
53+
3054
const cctxsValidatedQuery = useQueryWithPages({
3155
resourceName: 'zetachain:transactions',
3256
queryParams: {
3357
limit: 50,
3458
offset: 0,
3559
status_reduced: [ 'Success', 'Failed' ],
3660
direction: 'DESC',
61+
...filters,
3762
},
3863
options: {
3964
placeholderData: { items: Array(50).fill(zetaChainCCTXItem), next_page_params: { page_index: 0, offset: 0, direction: 'DESC' } },
40-
enabled: !tab || tab === 'cross_chain' || tab === 'cctx_mined',
65+
enabled: !tab || tab === 'cctx' || tab === 'cctx_mined',
4166
},
4267
});
4368

@@ -48,6 +73,7 @@ const ZetaChainEvmTransactions = () => {
4873
offset: 0,
4974
status_reduced: 'Pending',
5075
direction: 'DESC',
76+
...filters,
5177
},
5278
options: {
5379
placeholderData: { items: Array(50).fill(zetaChainCCTXItem), next_page_params: { page_index: 0, offset: 0, direction: 'DESC' } },
@@ -68,17 +94,23 @@ const ZetaChainEvmTransactions = () => {
6894
isPlaceholderData={ cctxsValidatedQuery.isPlaceholderData }
6995
isError={ cctxsValidatedQuery.isError }
7096
top={ cctxsValidatedQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
97+
filters={ filters }
98+
onFilterChange={ handleFilterChange }
99+
showStatusFilter={ true }
71100
/> },
72101
{
73102
id: 'cctx_pending',
74103
title: 'Pending',
75104
component: (
76105
<ZetaChainCCTxs
77-
pagination={ cctxsValidatedQuery.pagination }
106+
pagination={ cctxsPendingQuery.pagination }
78107
items={ cctxsPendingQuery.data?.items }
79108
isPlaceholderData={ cctxsPendingQuery.isPlaceholderData }
80109
isError={ cctxsPendingQuery.isError }
81110
top={ cctxsPendingQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
111+
filters={ filters }
112+
onFilterChange={ handleFilterChange }
113+
showStatusFilter={ false }
82114
/>
83115
),
84116
},
@@ -94,6 +126,11 @@ const ZetaChainEvmTransactions = () => {
94126
return (
95127
<>
96128
{ /* <TxsStats/> */ }
129+
<ZetaChainFilterTags
130+
filters={ filters }
131+
onClearFilter={ onClearFilter }
132+
onClearAll={ clearAllFilters }
133+
/>
97134
<RoutedTabs
98135
tabs={ tabs }
99136
variant="secondary"

‎ui/txs/zetaChain/ZetaChainCCTxs.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box } from '@chakra-ui/react';
22
import React from 'react';
33

4-
import type { ZetaChainCCTX } from 'types/api/zetaChain';
4+
import type { ZetaChainCCTX, ZetaChainCCTXFilterParams } from 'types/api/zetaChain';
55
import type { PaginationParams } from 'ui/shared/pagination/types';
66

77
import useIsMobile from 'lib/hooks/useIsMobile';
@@ -13,12 +13,14 @@ import ZetaChainCCTxsListItem from './ZetaChainCCTXListItem';
1313
import ZetaChainCCTxsTable from './ZetaChainCCTxsTable';
1414

1515
type Props = {
16-
1716
pagination: PaginationParams;
1817
top?: number;
1918
items?: Array<ZetaChainCCTX>;
2019
isPlaceholderData: boolean;
2120
isError: boolean;
21+
filters?: ZetaChainCCTXFilterParams;
22+
onFilterChange: <T extends keyof ZetaChainCCTXFilterParams>(field: T, val: ZetaChainCCTXFilterParams[T]) => void;
23+
showStatusFilter?: boolean;
2224
};
2325

2426
const ZetaChainCCTxs = ({
@@ -27,6 +29,9 @@ const ZetaChainCCTxs = ({
2729
items,
2830
isPlaceholderData,
2931
isError,
32+
filters = {},
33+
onFilterChange,
34+
showStatusFilter = true,
3035
}: Props) => {
3136
const isMobile = useIsMobile();
3237

@@ -46,6 +51,10 @@ const ZetaChainCCTxs = ({
4651
txs={ items ?? [] }
4752
top={ top || 0 }
4853
isLoading={ isPlaceholderData }
54+
filters={ filters }
55+
onFilterChange={ onFilterChange }
56+
isPlaceholderData={ isPlaceholderData }
57+
showStatusFilter={ showStatusFilter }
4958
/>
5059
</Box>
5160
</>

‎ui/txs/zetaChain/ZetaChainCCTxsTable.tsx‎

Lines changed: 74 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,37 @@
1+
import { Flex, chakra } from '@chakra-ui/react';
12
import React from 'react';
23

3-
import type { ZetaChainCCTX } from 'types/api/zetaChain';
4+
import type { ZetaChainCCTX, ZetaChainCCTXFilterParams } from 'types/api/zetaChain';
45

56
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
67
import useInitialList from 'lib/hooks/useInitialList';
78
import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
89
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
910
import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
1011

12+
import ZetaChainFilterByColumn from './filters/ZetaChainFilterByColumn';
1113
import ZetaChainCCTxsTableItem from './ZetaChainCCTxsTableItem';
1214

1315
type Props = {
1416
txs: Array<ZetaChainCCTX>;
1517
top: number;
1618
enableTimeIncrement?: boolean;
1719
isLoading?: boolean;
20+
filters?: ZetaChainCCTXFilterParams;
21+
onFilterChange: <T extends keyof ZetaChainCCTXFilterParams>(field: T, val: ZetaChainCCTXFilterParams[T]) => void;
22+
isPlaceholderData?: boolean;
23+
showStatusFilter?: boolean;
1824
};
1925

20-
const TxsTable = ({
26+
const ZetaChainCCTxsTable = ({
2127
txs,
2228
top,
2329
enableTimeIncrement,
2430
isLoading,
31+
filters = {},
32+
onFilterChange,
33+
isPlaceholderData,
34+
showStatusFilter = true,
2535
}: Props) => {
2636
const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
2737
const initialList = useInitialList({
@@ -36,15 +46,70 @@ const TxsTable = ({
3646
<TableHeaderSticky top={ top }>
3747
<TableRow>
3848
<TableColumnHeader width="300px">
39-
CCTx hash
40-
<TimeFormatToggle/>
49+
<Flex alignItems="center">
50+
<chakra.span lineHeight="24px" verticalAlign="middle">
51+
CCTx hash
52+
</chakra.span>
53+
<TimeFormatToggle mr={ 2 }/>
54+
<ZetaChainFilterByColumn
55+
column="age"
56+
columnName="Age"
57+
filters={ filters }
58+
handleFilterChange={ onFilterChange }
59+
isLoading={ isPlaceholderData }
60+
/>
61+
</Flex>
4162
</TableColumnHeader>
4263
<TableColumnHeader width="105px">
43-
Status
64+
<chakra.span mr={ 2 } lineHeight="24px" verticalAlign="middle">
65+
Status
66+
</chakra.span>
67+
{ showStatusFilter && (
68+
<ZetaChainFilterByColumn
69+
column="status"
70+
columnName="Status"
71+
filters={ filters }
72+
handleFilterChange={ onFilterChange }
73+
isLoading={ isPlaceholderData }
74+
/>
75+
) }
76+
</TableColumnHeader>
77+
<TableColumnHeader width="200px">
78+
<chakra.span mr={ 2 } lineHeight="24px" verticalAlign="middle">
79+
Sender
80+
</chakra.span>
81+
<ZetaChainFilterByColumn
82+
column="sender"
83+
columnName="Sender"
84+
filters={ filters }
85+
handleFilterChange={ onFilterChange }
86+
isLoading={ isPlaceholderData }
87+
/>
88+
</TableColumnHeader>
89+
<TableColumnHeader width="165px">
90+
<chakra.span mr={ 2 } lineHeight="24px" verticalAlign="middle">
91+
Receiver
92+
</chakra.span>
93+
<ZetaChainFilterByColumn
94+
column="receiver"
95+
columnName="Receiver"
96+
filters={ filters }
97+
handleFilterChange={ onFilterChange }
98+
isLoading={ isPlaceholderData }
99+
/>
100+
</TableColumnHeader>
101+
<TableColumnHeader width="100%" isNumeric>
102+
<chakra.span mr={ 2 } lineHeight="24px" verticalAlign="middle">
103+
Value
104+
</chakra.span>
105+
<ZetaChainFilterByColumn
106+
column="asset"
107+
columnName="Asset"
108+
filters={ filters }
109+
handleFilterChange={ onFilterChange }
110+
isLoading={ isPlaceholderData }
111+
/>
44112
</TableColumnHeader>
45-
<TableColumnHeader width="200px">Sender</TableColumnHeader>
46-
<TableColumnHeader width="165px">Receiver</TableColumnHeader>
47-
<TableColumnHeader width="100%" isNumeric>Value</TableColumnHeader>
48113
</TableRow>
49114
</TableHeaderSticky>
50115
<TableBody>
@@ -64,4 +129,4 @@ const TxsTable = ({
64129
);
65130
};
66131

67-
export default React.memo(TxsTable);
132+
export default React.memo(ZetaChainCCTxsTable);

0 commit comments

Comments
 (0)