jeffemmett
/
non-fungible-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: UI show the total nfas (#252) 

* feat: show total tokens

* Update ui/src/views/explore/explore-list/nfa-search.fragment.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* Update ui/src/views/explore/explore-list/nfa-search.fragment.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>
This commit is contained in:
Camila Sosa Morales 2023-05-10 11:44:51 -03:00 committed by GitHub
parent cda25b9a3b
commit 349cf57976
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/graphql/queries.graphql
View File

@ -25,9 +25,9 @@ query lastNFAsPaginated(
} }
} }
query totalTokens { query totalTokens($contractId: ID!) {
tokens { collection(id: $contractId) {
id totalTokens
} }
} }

3
ui/package.json
View File

@ -7,7 +7,8 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"dev:css": "tailwindcss -o ./tailwind.css --watch && yarn dev", "dev:css": "tailwindcss -o ./tailwind.css --watch && yarn dev",
"build": "yarn graphclient build && vite build", "build:graph": "yarn graphclient build",
"build": "yarn build:graph && vite build",
"postinstall": "graphclient build", "postinstall": "graphclient build",
"preview": "vite preview", "preview": "vite preview",
"prod": "yarn build && npx serve dist -s" "prod": "yarn build && npx serve dist -s"

17
ui/src/views/explore/explore-list/nfa-search.fragment.tsx
View File

@ -1,7 +1,10 @@
import { useQuery } from '@apollo/client';
import { useState } from 'react'; import { useState } from 'react';
import { Combobox, InputGroup, InputGroupText } from '@/components'; import { Combobox, InputGroup, InputGroupText } from '@/components';
import { totalTokensDocument } from '@/graphclient';
import { useDebounce } from '@/hooks'; import { useDebounce } from '@/hooks';
import { FleekERC721 } from '@/integrations/ethereum/contracts';
import { AppLog } from '@/utils'; import { AppLog } from '@/utils';
import { Explore } from '../explore.context'; import { Explore } from '../explore.context';
@ -21,6 +24,7 @@ const orderResults: SortItem[] = [
export const NFASearchFragment: React.FC = () => { export const NFASearchFragment: React.FC = () => {
const { const {
search,
setEndReached, setEndReached,
setOrderBy, setOrderBy,
setOrderDirection, setOrderDirection,
@ -29,6 +33,13 @@ export const NFASearchFragment: React.FC = () => {
} = Explore.useContext(); } = Explore.useContext();
const [selectedValue, setSelectedValue] = useState<SortItem>(orderResults[0]); const [selectedValue, setSelectedValue] = useState<SortItem>(orderResults[0]);
const { data: totalTokens } = useQuery(totalTokensDocument, {
variables: {
contractId: FleekERC721.address,
},
skip: Boolean(search),
});
const handleSortChange = (item: SortItem | undefined): void => { const handleSortChange = (item: SortItem | undefined): void => {
if (item) { if (item) {
setSelectedValue(item); setSelectedValue(item);
@ -72,8 +83,10 @@ export const NFASearchFragment: React.FC = () => {
return ( return (
<S.Container> <S.Container>
<S.Data.Wrapper> <S.Data.Wrapper>
<S.Data.Text>All NFAs&nbsp;</S.Data.Text> {totalTokens?.collection && (<>
<S.Data.Number>(3,271)</S.Data.Number> <S.Data.Text>All NFAs&nbsp;</S.Data.Text>
<S.Data.Number>({totalTokens.collection.totalTokens})</S.Data.Number>
</>)}
</S.Data.Wrapper> </S.Data.Wrapper>
<S.Input.Wrapper> <S.Input.Wrapper>