From 6cf32bedb97beb6d393b811107dfd6de444356a6 Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Wed, 17 May 2023 16:10:37 -0300
Subject: [PATCH] feat: UI switch grid list on nfa listing (#261)

* feat: display nfas grid or list

* feat: add list view

* chore: rename component

* style: add margin

* chore: add skeleton for nfa list

* chore: add TODO comment

* Update ui/src/views/explore/explore-list/nfa-list/nfa-list.styles.ts

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

* Update ui/src/views/explore/explore-list/nfa-list/nfa-list.styles.ts

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

* merge develop

* style: responsiveness for explore view

* chore: remove old file

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>
---
 ui/graphql/queries.graphql                    |  3 +
 ui/src/components/core/button/icon-button.tsx |  2 -
 ui/src/components/core/icon/icon-library.tsx  |  4 +
 .../explore-list/explore-list.fragment.tsx    |  4 +-
 .../explore/explore-list/nfa-list.styles.ts   | 24 -----
 .../explore/explore-list/nfa-list/index.ts    |  1 +
 .../nfa-list/nfa-grid.fragment.tsx            | 37 +++++++
 .../nfa-list/nfa-list.fragment.tsx            | 53 ++++++++++
 .../explore-list/nfa-list/nfa-list.styles.ts  | 71 ++++++++++++++
 .../nfa-list/nfa-row.fragment.tsx             | 54 +++++++++++
 .../nfa-list/nfa-row.skeleton.tsx             | 26 +++++
 .../nfas-container.fragment.tsx}              | 38 ++------
 .../explore-list/nfa-search.fragment.tsx      | 97 ++++++++++++-------
 .../explore/explore-list/nfa-search.styles.ts | 37 +++++++
 ui/src/views/explore/explore.context.tsx      |  7 ++
 15 files changed, 368 insertions(+), 90 deletions(-)
 delete mode 100644 ui/src/views/explore/explore-list/nfa-list.styles.ts
 create mode 100644 ui/src/views/explore/explore-list/nfa-list/index.ts
 create mode 100644 ui/src/views/explore/explore-list/nfa-list/nfa-grid.fragment.tsx
 create mode 100644 ui/src/views/explore/explore-list/nfa-list/nfa-list.fragment.tsx
 create mode 100644 ui/src/views/explore/explore-list/nfa-list/nfa-list.styles.ts
 create mode 100644 ui/src/views/explore/explore-list/nfa-list/nfa-row.fragment.tsx
 create mode 100644 ui/src/views/explore/explore-list/nfa-list/nfa-row.skeleton.tsx
 rename ui/src/views/explore/explore-list/{nfa-list.fragment.tsx => nfa-list/nfas-container.fragment.tsx} (61%)

diff --git a/ui/graphql/queries.graphql b/ui/graphql/queries.graphql
index 6bcec26..06644e4 100644
--- a/ui/graphql/queries.graphql
+++ b/ui/graphql/queries.graphql
@@ -22,6 +22,9 @@ query lastNFAsPaginated(
     accessPoints {
       id
     }
+    owner {
+      id
+    }
     verified
   }
 }
diff --git a/ui/src/components/core/button/icon-button.tsx b/ui/src/components/core/button/icon-button.tsx
index 32ec420..5eda990 100644
--- a/ui/src/components/core/button/icon-button.tsx
+++ b/ui/src/components/core/button/icon-button.tsx
@@ -65,7 +65,6 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
       return props[size as 'sm' | 'md' | 'lg'];
     }, [size]);
-
     return (
       <Button
         ref={ref}
@@ -73,7 +72,6 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         size={size}
         {...rest}
         css={{
-          padding: 0,
           minWidth,
           fontSize,
           borderRadius: isRound ? '$full' : undefined,
diff --git a/ui/src/components/core/icon/icon-library.tsx b/ui/src/components/core/icon/icon-library.tsx
index 22de597..8d95e46 100644
--- a/ui/src/components/core/icon/icon-library.tsx
+++ b/ui/src/components/core/icon/icon-library.tsx
@@ -1,6 +1,7 @@
 import { AiFillCheckCircle } from '@react-icons/all-files/ai/AiFillCheckCircle';
 import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
 import { AiOutlineTwitter } from '@react-icons/all-files/ai/AiOutlineTwitter';
+import { AiOutlineUnorderedList } from '@react-icons/all-files/ai/AiOutlineUnorderedList';
 import { BiGitBranch } from '@react-icons/all-files/bi/BiGitBranch';
 import { BiSearch } from '@react-icons/all-files/bi/BiSearch';
 import { BsFillSquareFill } from '@react-icons/all-files/bs/BsFillSquareFill';
@@ -12,6 +13,7 @@ import { IoArrowBackCircleSharp } from '@react-icons/all-files/io5/IoArrowBackCi
 import { IoCheckmarkCircleSharp } from '@react-icons/all-files/io5/IoCheckmarkCircleSharp';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoCloudUploadSharp } from '@react-icons/all-files/io5/IoCloudUploadSharp';
+import { IoGridOutline } from '@react-icons/all-files/io5/IoGridOutline';
 import { IoInformationCircleSharp } from '@react-icons/all-files/io5/IoInformationCircleSharp';
 import { IoLogoGithub } from '@react-icons/all-files/io5/IoLogoGithub';
 import { MdVerifiedUser } from '@react-icons/all-files/md/MdVerifiedUser';
@@ -43,7 +45,9 @@ export const IconLibrary = Object.freeze({
   'fleek-logo': FleekLogo,
   'fleek-name': FleekName,
   github: IoLogoGithub,
+  grid: IoGridOutline,
   info: IoInformationCircleSharp,
+  list: AiOutlineUnorderedList,
   menu: FaBars,
   metamask: MetamaskIcon, //remove if not used
   opensea: OpenseaIcon,
diff --git a/ui/src/views/explore/explore-list/explore-list.fragment.tsx b/ui/src/views/explore/explore-list/explore-list.fragment.tsx
index a76b0c2..7aa7775 100644
--- a/ui/src/views/explore/explore-list/explore-list.fragment.tsx
+++ b/ui/src/views/explore/explore-list/explore-list.fragment.tsx
@@ -1,12 +1,12 @@
 import { Explore } from '../explore.context';
-import { NFAListFragment } from './nfa-list.fragment';
+import { NFAsContainerFragment } from './nfa-list';
 import { NFASearchFragment } from './nfa-search.fragment';
 
 export const ExploreListFragment: React.FC = () => {
   return (
     <Explore.Provider>
       <NFASearchFragment />
-      <NFAListFragment />
+      <NFAsContainerFragment />
     </Explore.Provider>
   );
 };
diff --git a/ui/src/views/explore/explore-list/nfa-list.styles.ts b/ui/src/views/explore/explore-list/nfa-list.styles.ts
deleted file mode 100644
index 192ebdf..0000000
--- a/ui/src/views/explore/explore-list/nfa-list.styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { styled } from '@/theme';
-
-export const NFAListFragmentStyles = {
-  Container: styled('div', {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(12.5rem, 1fr))',
-    alignItems: 'flex-start',
-    flexWrap: 'wrap',
-    gap: '$6',
-    my: '$6',
-    minHeight: '50vh',
-    marginBottom: '30vh', // TODO: remove this if we add page footer
-
-    '@media (min-width: 1080px)': {
-      gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
-    },
-  }),
-  EmptyMessage: styled('span', {
-    padding: '$2 $3 $4 $3',
-    textAlign: 'center',
-    color: '$slate11',
-    width: '100%',
-  }),
-};
diff --git a/ui/src/views/explore/explore-list/nfa-list/index.ts b/ui/src/views/explore/explore-list/nfa-list/index.ts
new file mode 100644
index 0000000..d6d2962
--- /dev/null
+++ b/ui/src/views/explore/explore-list/nfa-list/index.ts
@@ -0,0 +1 @@
+export * from './nfas-container.fragment';
diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-grid.fragment.tsx b/ui/src/views/explore/explore-list/nfa-list/nfa-grid.fragment.tsx
new file mode 100644
index 0000000..2765cb6
--- /dev/null
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-grid.fragment.tsx
@@ -0,0 +1,37 @@
+import { NFACard, NFACardSkeleton } from '@/components';
+import { lastNFAsPaginatedQuery } from '@/graphclient';
+
+import { NFAListFragmentStyles as S } from './nfa-list.styles';
+
+const LoadingSkeletons: React.FC = () => (
+  <>
+    <NFACardSkeleton />
+    <NFACardSkeleton />
+    <NFACardSkeleton />
+    <NFACardSkeleton />
+    <NFACardSkeleton />
+    <NFACardSkeleton />
+  </>
+);
+
+type NFAGridFragmentProps = {
+  tokens: Array<lastNFAsPaginatedQuery['tokens'][0]>;
+  isLoading: boolean;
+};
+
+export const NFAGridFragment: React.FC<NFAGridFragmentProps> = ({
+  tokens,
+  isLoading,
+}: NFAGridFragmentProps) => (
+  <S.Container>
+    {tokens.map((token) => (
+      <NFACard data={token} key={token.id} />
+    ))}
+
+    {isLoading && <LoadingSkeletons />}
+
+    {!isLoading && tokens.length === 0 && (
+      <S.EmptyMessage>Nothing found.</S.EmptyMessage>
+    )}
+  </S.Container>
+);
diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-list.fragment.tsx b/ui/src/views/explore/explore-list/nfa-list/nfa-list.fragment.tsx
new file mode 100644
index 0000000..6adc22e
--- /dev/null
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-list.fragment.tsx
@@ -0,0 +1,53 @@
+import { Text } from '@/components';
+import { lastNFAsPaginatedQuery } from '@/graphclient';
+
+import { NFAListFragmentStyles as S } from './nfa-list.styles';
+import { NFARow } from './nfa-row.fragment';
+import { NFARowSkeletonFragment } from './nfa-row.skeleton';
+
+const LoadingListSkeleton: React.FC = () => (
+  <>
+    <NFARowSkeletonFragment />
+    <NFARowSkeletonFragment />
+    <NFARowSkeletonFragment />
+  </>
+);
+
+type NFAListFragmentProps = {
+  tokens: Array<lastNFAsPaginatedQuery['tokens'][0]>;
+  isLoading: boolean;
+};
+
+export const NFAListFragment: React.FC<NFAListFragmentProps> = ({
+  tokens,
+  isLoading,
+}: NFAListFragmentProps) => {
+  return (
+    <S.Table.Container>
+      <S.Table.Root>
+        <S.Table.Head>
+          <S.Table.Row>
+            <S.Table.Data>NAME</S.Table.Data>
+            <S.Table.Data># HOSTED</S.Table.Data>
+            <S.Table.Data>Owner</S.Table.Data>
+          </S.Table.Row>
+        </S.Table.Head>
+        <S.Table.Body>
+          {tokens.map((token) => (
+            <NFARow token={token} key={token.id} />
+          ))}
+
+          {isLoading && <LoadingListSkeleton />}
+
+          {!isLoading && tokens.length === 0 && (
+            <S.Table.Row>
+              <S.Table.Data align="center" colSpan={5}>
+                <Text>No results</Text>
+              </S.Table.Data>
+            </S.Table.Row>
+          )}
+        </S.Table.Body>
+      </S.Table.Root>
+    </S.Table.Container>
+  );
+};
diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-list.styles.ts b/ui/src/views/explore/explore-list/nfa-list/nfa-list.styles.ts
new file mode 100644
index 0000000..4955c71
--- /dev/null
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-list.styles.ts
@@ -0,0 +1,71 @@
+import { Skeleton } from '@/components';
+import { styled } from '@/theme';
+
+export const NFAListFragmentStyles = {
+  Container: styled('div', {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(12.5rem, 1fr))',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    gap: '$6',
+    my: '$6',
+    minHeight: '50vh',
+    marginBottom: '30vh', // TODO: remove this if we add page footer
+
+    '@media (min-width: 1080px)': {
+      gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
+    },
+  }),
+  EmptyMessage: styled('span', {
+    padding: '$2 $3 $4 $3',
+    textAlign: 'center',
+    color: '$slate11',
+    width: '100%',
+  }),
+  Table: {
+    Container: styled('div', {
+      marginTop: '$6',
+      padding: '0 $5',
+
+      // maxHeight: '15.125rem',
+      overflow: 'auto',
+    }),
+    Root: styled('table', {
+      width: 'calc(100% + 2 * $space$5)',
+      margin: '0 -$5',
+    }),
+    Head: styled('thead', {
+      position: 'sticky',
+      top: 0,
+      backgroundColor: '$black',
+
+      '&:after': {
+        position: 'absolute',
+        content: '""',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderBottom: '1px solid $slate6',
+      },
+    }),
+    Row: styled('tr'),
+    Data: styled('td', {
+      padding: '$3',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    }),
+    Body: styled('tbody', {
+      tr: {
+        height: '3rem',
+        '&:hover': {
+          cursor: 'pointer',
+        },
+      },
+    }),
+  },
+
+  Skeleton: styled(Skeleton, {
+    borderRadius: '$lg',
+  }),
+};
diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-row.fragment.tsx b/ui/src/views/explore/explore-list/nfa-list/nfa-row.fragment.tsx
new file mode 100644
index 0000000..5465b54
--- /dev/null
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-row.fragment.tsx
@@ -0,0 +1,54 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Flex, NFAPreview, ResolvedAddress } from '@/components';
+import { lastNFAsPaginatedQuery } from '@/graphclient';
+import { parseNumberToHexColor } from '@/utils/color';
+
+import { NFAListFragmentStyles as S } from './nfa-list.styles';
+
+type NFARowProps = {
+  token: lastNFAsPaginatedQuery['tokens'][0];
+};
+
+export const NFARow: React.FC<NFARowProps> = ({ token }: NFARowProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = (): void => {
+    navigate(`/nfa/${token.tokenId}`);
+  };
+
+  return (
+    <S.Table.Row onClick={handleClick}>
+      <S.Table.Data>
+        <Flex
+          css={{
+            flexDirection: 'row',
+            gap: '$2',
+            alignItems: 'center',
+          }}
+        >
+          <NFAPreview
+            css={{
+              borderRadius: '$lg',
+              borderWidth: '1px',
+              borderColor: `#${parseNumberToHexColor(token.color)}`,
+            }}
+            size="4rem"
+            name={token.name}
+            color={`#${parseNumberToHexColor(token.color)}`}
+            logo={token.logo}
+            ens={token.ENS}
+          />
+          {token.name}
+        </Flex>
+      </S.Table.Data>
+      <S.Table.Data css={{ textAlign: 'center' }}>
+        {token.accessPoints?.length ?? 0}
+      </S.Table.Data>
+      <S.Table.Data>
+        {/* TODO add menu button once the component it's added */}
+        <ResolvedAddress>{token.owner.id}</ResolvedAddress>
+      </S.Table.Data>
+    </S.Table.Row>
+  );
+};
diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-row.skeleton.tsx b/ui/src/views/explore/explore-list/nfa-list/nfa-row.skeleton.tsx
new file mode 100644
index 0000000..45bfc56
--- /dev/null
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-row.skeleton.tsx
@@ -0,0 +1,26 @@
+import { Flex } from '@/components';
+
+import { NFAListFragmentStyles as S } from './nfa-list.styles';
+
+export const NFARowSkeletonFragment: React.FC = () => (
+  <S.Table.Row>
+    <S.Table.Data>
+      <Flex
+        css={{
+          flexDirection: 'row',
+          gap: '$3',
+          alignItems: 'center',
+        }}
+      >
+        <S.Skeleton css={{ aspectRatio: 1, width: '5rem' }} />
+        <S.Skeleton css={{ height: '2rem', width: '100%' }} />
+      </Flex>
+    </S.Table.Data>
+    <S.Table.Data>
+      <S.Skeleton css={{ height: '2rem' }} />
+    </S.Table.Data>
+    <S.Table.Data>
+      <S.Skeleton css={{ height: '2rem' }} />
+    </S.Table.Data>
+  </S.Table.Row>
+);
diff --git a/ui/src/views/explore/explore-list/nfa-list.fragment.tsx b/ui/src/views/explore/explore-list/nfa-list/nfas-container.fragment.tsx
similarity index 61%
rename from ui/src/views/explore/explore-list/nfa-list.fragment.tsx
rename to ui/src/views/explore/explore-list/nfa-list/nfas-container.fragment.tsx
index bfe5df1..7969672 100644
--- a/ui/src/views/explore/explore-list/nfa-list.fragment.tsx
+++ b/ui/src/views/explore/explore-list/nfa-list/nfas-container.fragment.tsx
@@ -1,33 +1,23 @@
 import { useQuery } from '@apollo/client';
 import { useEffect } from 'react';
 
-import { NFACard, NFACardSkeleton } from '@/components';
 import { lastNFAsPaginatedDocument } from '@/graphclient';
 import { useWindowScrollEnd } from '@/hooks';
 
-import { Explore } from '../explore.context';
-import { NFAListFragmentStyles as S } from './nfa-list.styles';
+import { Explore } from '../../explore.context';
+import { NFAGridFragment } from './nfa-grid.fragment';
+import { NFAListFragment } from './nfa-list.fragment';
 
 const pageSize = 10; //Set this size to test pagination
 
-const LoadingSkeletons: React.FC = () => (
-  <>
-    <NFACardSkeleton />
-    <NFACardSkeleton />
-    <NFACardSkeleton />
-    <NFACardSkeleton />
-    <NFACardSkeleton />
-    <NFACardSkeleton />
-  </>
-);
-
-export const NFAListFragment: React.FC = () => {
+export const NFAsContainerFragment: React.FC = () => {
   const {
     endReached,
     orderBy,
     orderDirection,
     pageNumber,
     search,
+    nfaView,
     setEndReached,
     setPageNumber,
   } = Explore.useContext();
@@ -65,17 +55,9 @@ export const NFAListFragment: React.FC = () => {
 
   if (queryError) return <div>Error</div>; //TODO handle error
 
-  return (
-    <S.Container>
-      {tokens.map((token) => (
-        <NFACard data={token} key={token.id} />
-      ))}
-
-      {isLoading && <LoadingSkeletons />}
-
-      {!isLoading && tokens.length === 0 && (
-        <S.EmptyMessage>Nothing found.</S.EmptyMessage>
-      )}
-    </S.Container>
-  );
+  if (nfaView === 'grid')
+    return <NFAGridFragment tokens={tokens} isLoading={isLoading} />;
+  else {
+    return <NFAListFragment tokens={tokens} isLoading={isLoading} />;
+  }
 };
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 04a3e07..2f1f5a7 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,7 @@
 import { useQuery } from '@apollo/client';
 import { useState } from 'react';
 
-import { Combobox, InputGroup, InputGroupText } from '@/components';
+import { Combobox, Flex, Icon, InputGroup, InputGroupText } from '@/components';
 import { totalTokensDocument } from '@/graphclient';
 import { useDebounce } from '@/hooks';
 import { FleekERC721 } from '@/integrations/ethereum/contracts';
@@ -25,11 +25,13 @@ const orderResults: SortItem[] = [
 export const NFASearchFragment: React.FC = () => {
   const {
     search,
+    nfaView,
     setEndReached,
     setOrderBy,
     setOrderDirection,
     setSearch,
     setPageNumber,
+    setNFAView,
   } = Explore.useContext();
   const [selectedValue, setSelectedValue] = useState<SortItem>(orderResults[0]);
 
@@ -40,6 +42,10 @@ export const NFASearchFragment: React.FC = () => {
     skip: Boolean(search),
   });
 
+  const handleViewChange = (view: View): void => {
+    setNFAView(view);
+  };
+
   const handleSortChange = (item: SortItem | undefined): void => {
     if (item) {
       setSelectedValue(item);
@@ -83,41 +89,64 @@ export const NFASearchFragment: React.FC = () => {
   return (
     <S.Container>
       <S.Data.Wrapper>
-       {totalTokens?.collection && (<>
-          <S.Data.Text>All NFAs&nbsp;</S.Data.Text> 
-          <S.Data.Number>({totalTokens.collection.totalTokens})</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>
-        <InputGroup css={{ flex: 1 }}>
-          <S.Input.Icon name="search" />
-          <InputGroupText placeholder="Search" onChange={handleSearchChange} />
-        </InputGroup>
-        <Combobox
-          items={orderResults}
-          selected={[selectedValue, handleSortChange]}
-          css={{ minWidth: '$28' }}
-          queryKey="label"
-        >
-          {({ Field, Options }) => (
-            <>
-              <Field
-                css={{
-                  backgroundColor: '$slate4',
-                  borderColor: '$slate4',
-                  color: '$slate11',
-                }}
-              >
-                {(selected) => selected?.label || 'Select'}
-              </Field>
-              <Options disableSearch css={{ minWidth: '$44', left: 'unset' }}>
-                {(item) => item.label}
-              </Options>
-            </>
-          )}
-        </Combobox>
-      </S.Input.Wrapper>
+      <S.Flex>
+        <S.Input.Wrapper>
+          <InputGroup css={{ flex: 1 }}>
+            <S.Input.Icon name="search" />
+            <InputGroupText
+              placeholder="Search"
+              onChange={handleSearchChange}
+            />
+          </InputGroup>
+          <Combobox
+            items={orderResults}
+            selected={[selectedValue, handleSortChange]}
+            css={{ minWidth: '$28' }}
+            queryKey="label"
+          >
+            {({ Field, Options }) => (
+              <>
+                <Field
+                  css={{
+                    color: '$slate11',
+                  }}
+                >
+                  {(selected) => selected?.label || 'Select'}
+                </Field>
+                <Options disableSearch css={{ minWidth: '$44', left: 'unset' }}>
+                  {(item) => item.label}
+                </Options>
+              </>
+            )}
+          </Combobox>
+        </S.Input.Wrapper>
+
+        {/* TODO move this to the app context */}
+        <S.GridList.Wrapper>
+          <S.GridList.Icon
+            name="grid"
+            selected={nfaView === 'grid'}
+            css={{ btrr: '0', bbrr: '0' }}
+            onClick={() => handleViewChange('grid')}
+          />
+          <S.GridList.Icon
+            name="list"
+            css={{ btlr: '0', bblr: '0' }}
+            selected={nfaView === 'list'}
+            onClick={() => handleViewChange('list')}
+          />
+        </S.GridList.Wrapper>
+      </S.Flex>
     </S.Container>
   );
 };
diff --git a/ui/src/views/explore/explore-list/nfa-search.styles.ts b/ui/src/views/explore/explore-list/nfa-search.styles.ts
index 95c9b2b..849f003 100644
--- a/ui/src/views/explore/explore-list/nfa-search.styles.ts
+++ b/ui/src/views/explore/explore-list/nfa-search.styles.ts
@@ -25,6 +25,16 @@ export const NFASearchFragmentStyles = {
     }),
   },
 
+  Flex: styled(Flex, {
+    flex: 1,
+    justifyContent: 'flex-end',
+    gap: '$3h',
+
+    '@media (max-width: 374px)': {
+      flexWrap: 'wrap',
+    },
+  }),
+
   Input: {
     Wrapper: styled(Flex, {
       gap: '$3',
@@ -36,4 +46,31 @@ export const NFASearchFragmentStyles = {
       fontSize: '$lg',
     }),
   },
+
+  GridList: {
+    Wrapper: styled(Flex, {
+      border: '1px solid $slate7',
+      borderRadius: '$lg',
+      backgroundColor: '$slate7',
+    }),
+    Icon: styled(Icon, {
+      p: '$2 $3',
+      border: 'none',
+      borderRadius: '$lg',
+      cursor: 'pointer',
+
+      variants: {
+        selected: {
+          true: {
+            color: 'white',
+            backgroundColor: 'transparent',
+          },
+          false: {
+            color: '$slate7 ',
+            backgroundColor: 'black',
+          },
+        },
+      },
+    }),
+  },
 };
diff --git a/ui/src/views/explore/explore.context.tsx b/ui/src/views/explore/explore.context.tsx
index ea04e78..a4fe0ba 100644
--- a/ui/src/views/explore/explore.context.tsx
+++ b/ui/src/views/explore/explore.context.tsx
@@ -3,17 +3,21 @@ import { useState } from 'react';
 import { OrderDirection, Token_orderBy } from '@/graphclient';
 import { createContext } from '@/utils';
 
+type View = 'grid' | 'list';
+
 export type ExploreContext = {
   search: string;
   orderBy: Token_orderBy;
   orderDirection: OrderDirection;
   pageNumber: number;
   endReached: boolean;
+  nfaView: View;
   setSearch: (search: string) => void;
   setOrderBy: (orderBy: Token_orderBy) => void;
   setOrderDirection: (orderDirection: OrderDirection) => void;
   setPageNumber: (pageNumber: number) => void;
   setEndReached: (isEndReaced: boolean) => void;
+  setNFAView: (view: View) => void;
 };
 
 const [ExploreProvider, useContext] = createContext<ExploreContext>({
@@ -34,6 +38,7 @@ export abstract class Explore {
       useState<OrderDirection>('desc');
     const [pageNumber, setPageNumber] = useState(0);
     const [endReached, setEndReached] = useState(false);
+    const [nfaView, setNFAView] = useState<View>('grid');
 
     const context = {
       search,
@@ -41,11 +46,13 @@ export abstract class Explore {
       orderDirection,
       pageNumber,
       endReached,
+      nfaView,
       setSearch,
       setOrderBy,
       setOrderDirection,
       setPageNumber,
       setEndReached,
+      setNFAView,
     };
 
     return <ExploreProvider value={context}>{children}</ExploreProvider>;