mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
ebbee2ba57
* Support redirect to a correct view from search * show domains on address page * migrate to new API version to display address domains * another api update * new design for chain widget on home page + tests * chain widget styles for mobile devices * ecosystems page * update types * add ecosystems to navigation * address portfolio: pt.1 * portfolio tokens list * filter portfolio by chain * skip redirect when navigating to search result by clicking on "show all results" link * net worth block design * add filter input to chain select and fix tokens table * calculate address portfolio * adjust card logic * support custom token types in multichain explorer * handle case when new worth is 0 * add text filter to tokens list * fixes * demo envs * portfolio tests * ecosystems test * change signature for getTokenTypes function * fix adding token to the wallet from the list * lazy load all address domains * show contract creator and implementations info * fix tests * add poor reputation tokens toggle * tweaks * dim celo native tokens * disable env validator * fix tests * remove tokens with 0 usd value from top tokens * fixes * preserve selected chain when switching tabs on address page * add hints to stats widgets on home page * update envs for demo * fix portfolio cards and home page * update styles for contract creator and implementations * fix select issues * add chains from cluster to network menu * hide csv export link on empty logs page * update screenshots * rollback select fix * update cut length calculation for portfolio cards * fix chain select * update screenshots * fix tests * more fixes * add sorting to ecosystems table * fix test * fixes * fix loading state in ecosystems page * review fixes * fix tests
80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import { useRouter } from 'next/router';
|
|
import React from 'react';
|
|
|
|
import type { NFTTokenType } from 'types/api/token';
|
|
|
|
import { useAppContext } from 'lib/contexts/app';
|
|
import * as cookies from 'lib/cookies';
|
|
import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
|
|
import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
|
|
import { ADDRESS_COLLECTION, ADDRESS_NFT_1155 } from 'stubs/address';
|
|
import { generateListStub } from 'stubs/utils';
|
|
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
|
|
|
|
const getTokenFilterValue: (type: string | Array<string> | undefined) => Array<NFTTokenType> | undefined =
|
|
(getFilterValuesFromQuery<NFTTokenType>).bind(null, NFT_TOKEN_TYPE_IDS);
|
|
|
|
export type TNftDisplayType = 'collection' | 'list';
|
|
|
|
interface Props {
|
|
scrollRef: React.RefObject<HTMLDivElement | null>;
|
|
enabled?: boolean;
|
|
addressHash: string;
|
|
isMultichain?: boolean;
|
|
chainIds?: Array<string>;
|
|
}
|
|
|
|
export default function useAddressNftQuery({ scrollRef, enabled = true, addressHash, isMultichain, chainIds }: Props) {
|
|
const router = useRouter();
|
|
|
|
const displayTypeCookie = cookies.get(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, useAppContext().cookies);
|
|
const [ displayType, setDisplayType ] = React.useState<TNftDisplayType>(displayTypeCookie === 'list' ? 'list' : 'collection');
|
|
const [ tokenTypes, setTokenTypes ] = React.useState<Array<NFTTokenType> | undefined>(getTokenFilterValue(router.query.type) || []);
|
|
|
|
const collectionsQuery = useQueryWithPages({
|
|
resourceName: 'general:address_collections',
|
|
pathParams: { hash: addressHash },
|
|
scrollRef,
|
|
options: {
|
|
enabled: enabled && displayType === 'collection',
|
|
placeholderData: generateListStub<'general:address_collections'>(ADDRESS_COLLECTION, 10, { next_page_params: null }),
|
|
},
|
|
filters: { type: tokenTypes },
|
|
isMultichain,
|
|
chainIds,
|
|
});
|
|
|
|
const nftsQuery = useQueryWithPages({
|
|
resourceName: 'general:address_nfts',
|
|
pathParams: { hash: addressHash },
|
|
scrollRef,
|
|
options: {
|
|
enabled: enabled && displayType === 'list',
|
|
placeholderData: generateListStub<'general:address_nfts'>(ADDRESS_NFT_1155, 10, { next_page_params: null }),
|
|
},
|
|
filters: { type: tokenTypes },
|
|
isMultichain,
|
|
chainIds,
|
|
});
|
|
|
|
const onDisplayTypeChange = React.useCallback((val: string) => {
|
|
cookies.set(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, val);
|
|
setDisplayType(val as TNftDisplayType);
|
|
}, []);
|
|
|
|
const onTokenTypesChange = React.useCallback((value: Array<NFTTokenType>) => {
|
|
nftsQuery.onFilterChange({ type: value });
|
|
collectionsQuery.onFilterChange({ type: value });
|
|
setTokenTypes(value);
|
|
}, [ nftsQuery, collectionsQuery ]);
|
|
|
|
return React.useMemo(() => ({
|
|
nftsQuery,
|
|
collectionsQuery,
|
|
displayType,
|
|
tokenTypes,
|
|
onDisplayTypeChange,
|
|
onTokenTypesChange,
|
|
}), [ nftsQuery, collectionsQuery, displayType, tokenTypes, onDisplayTypeChange, onTokenTypesChange ]);
|
|
}
|