From 349cf57976c58be69cf178e14103309b8fefece2 Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Wed, 10 May 2023 11:44:51 -0300
Subject: [PATCH] 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                      |  6 +++---
 ui/package.json                                 |  3 ++-
 .../explore-list/nfa-search.fragment.tsx        | 17 +++++++++++++++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ui/graphql/queries.graphql b/ui/graphql/queries.graphql
index e68bcd3..ff09712 100644
--- a/ui/graphql/queries.graphql
+++ b/ui/graphql/queries.graphql
@@ -25,9 +25,9 @@ query lastNFAsPaginated(
   }
 }
 
-query totalTokens {
-  tokens {
-    id
+query totalTokens($contractId: ID!) {
+  collection(id: $contractId) {
+    totalTokens
   }
 }
 
diff --git a/ui/package.json b/ui/package.json
index 6fdca4e..df56d51 100644
--- a/ui/package.json
+++ b/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"
diff --git a/ui/src/views/explore/explore-list/nfa-search.fragment.tsx b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
index ce697bd..04a3e07 100644
--- a/ui/src/views/explore/explore-list/nfa-search.fragment.tsx
+++ b/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>