diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index b8a8fc1f7..14a12ae6b 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -29,6 +29,7 @@ interface Variables { limit: number holder_count_sort: string name_sort: string + minted_count_sort: string } interface NftCollectionListProps { erc721_udts: { @@ -39,6 +40,7 @@ interface NftCollectionListProps { enum SortTypesEnum { holder_count_sort = 'holder_count_sort', name_sort = 'name_sort', + minted_count_sort = 'minted_count_sort', } const erc721ListQuery = gql` @@ -49,6 +51,7 @@ const erc721ListQuery = gql` $after: String $holder_count_sort: SortType $name_sort: SortType + $minted_count_sort: SortType ) { erc721_udts( input: { @@ -59,6 +62,7 @@ const erc721ListQuery = gql` sorter: [ { sort_type: $holder_count_sort, sort_value: EX_HOLDERS_COUNT } { sort_type: $name_sort, sort_value: NAME } + { sort_type: $minted_count_sort, sort_value: MINTED_COUNT } ] } ) { @@ -99,6 +103,11 @@ const fetchErc721List = (variables: Variables): Promise { const { @@ -111,6 +120,7 @@ const NftCollectionList = () => { page_size = SIZES[1], holder_count_sort = 'DESC', name_sort = 'DESC', + minted_count_sort = 'DESC', ...restQuery }, } = useRouter() @@ -127,6 +137,7 @@ const NftCollectionList = () => { limit: Number.isNaN(!page_size) ? +SIZES[1] : +page_size, holder_count_sort: holder_count_sort as string, name_sort: name_sort as string, + minted_count_sort: minted_count_sort as string, }), { refetchInterval: 10000 }, ) @@ -138,10 +149,9 @@ const NftCollectionList = () => { push( `${asPath.split('?')[0] ?? ''}?${new URLSearchParams({ ...restQuery, + ...defaultSortValues, name: name ? (name as string) : '', page_size: page_size as string, - holder_count_sort: holder_count_sort as string, - name_sort: name_sort as string, [type]: order === 'ASC' ? 'DESC' : 'ASC', })}`, ) @@ -168,11 +178,11 @@ const NftCollectionList = () => { {headers.map(item => ( - - {t(item)} + + {t(item)} {item === 'token' ? ( <> - + handleSorterClick(e, SortTypesEnum.name_sort)} data-order={name_sort} @@ -189,6 +199,13 @@ const NftCollectionList = () => { className={styles.sorter} /> ) : null} + {item === 'minted_count' ? ( + handleSorterClick(e, SortTypesEnum.minted_count_sort)} + data-order={minted_count_sort} + className={styles.sorter} + /> + ) : null} ))} diff --git a/pages/nft-collections/styles.module.scss b/pages/nft-collections/styles.module.scss index 28848a471..6483d1334 100644 --- a/pages/nft-collections/styles.module.scss +++ b/pages/nft-collections/styles.module.scss @@ -96,10 +96,10 @@ @include empty-list; } -.pr-4 { +.header-name { padding-right: 4px; } -.pr-8 { +.token-sorter { padding-right: 8px; }