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>

ui/graphql/queries.graphql

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

ui/package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "vite",
     "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",
     "preview": "vite preview",
     "prod": "yarn build && npx serve dist -s"

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

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