feat: UI indexed nfa view

ui/graphql/queries.graphql

@@ -41,7 +41,15 @@ query getLatestNFAs {
 query getNFA($id: ID!) {
   token(id: $id) {
     tokenId
+    owner {
+      id
+    }
     name
+    description
+    ENS
+    externalURL
+    logo
+    color
   }
 }
 

ui/src/app.tsx

@@ -3,7 +3,13 @@ import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { themeGlobals } from '@/theme/globals';
 
 import { AppPage, ToastProvider } from './components';
-import { ComponentsTest, CreateAP, Explore, Home, Mint } from './views';
+import {
+  ComponentsTest,
+  CreateAP,
+  Explore,
+  IndexedNFAView,
+  Mint,
+} from './views';
 
 export const App: React.FC = () => {
   themeGlobals();
@@ -17,6 +23,7 @@ export const App: React.FC = () => {
             <Route path="/mint" element={<Mint />} />
             <Route path="/create-ap" element={<CreateAP />} />
             <Route path="/create-ap/:id" element={<CreateAP />} />
+            <Route path="/nfa/:id" element={<IndexedNFAView />} />
             {/** TODO remove for release */}
             <Route path="/components-test" element={<ComponentsTest />} />
             <Route path="*" element={<Navigate to="/" />} />

ui/src/components/core/icon/icon-library.tsx

@@ -4,12 +4,15 @@ import { AiOutlineTwitter } from '@react-icons/all-files/ai/AiOutlineTwitter';
 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';
+import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight';
+import { FaExternalLinkAlt } from '@react-icons/all-files/fa/FaExternalLinkAlt';
 import { IoArrowBackCircleSharp } from '@react-icons/all-files/io5/IoArrowBackCircleSharp';
 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 { 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';
 
 import {
   BetaTag,
@@ -28,19 +31,22 @@ export const IconLibrary = Object.freeze({
   check: AiOutlineCheck,
   'check-circle': IoCheckmarkCircleSharp,
   'chevron-down': ChevronDownIcon,
+  'chevron-right': FaChevronRight,
   close: IoClose,
   error: ErrorIcon,
   ethereum: EthereumIcon,
+  'external-link': FaExternalLinkAlt,
   fleekLogo: FleekLogo,
   fleekName: FleekName,
   github: IoLogoGithub,
   info: IoInformationCircleSharp,
-  upload: IoCloudUploadSharp,
   metamask: MetamaskIcon, //remove if not used
   search: BiSearch,
   square: BsFillSquareFill,
   success: AiFillCheckCircle,
   twitter: AiOutlineTwitter,
+  upload: IoCloudUploadSharp,
+  verified: MdVerifiedUser,
 });
 
 export type IconName = keyof typeof IconLibrary;

ui/src/components/nfa-card/nfa-card.tsx

@@ -33,7 +33,7 @@ export const NFACard: React.FC<NFACardProps> = forwardStyledRef<
   HTMLAnchorElement,
   NFACardProps
   // TODO: Set default path to NFA page
->(({ data, to = `/create-ap/${data.tokenId}`, ...props }, ref) => {
+>(({ data, to = `/nfa/${data.tokenId}`, ...props }, ref) => {
   const { name, color, ENS, logo, accessPoints } = data;
 
   const apCounter = useMemo(() => accessPoints?.length ?? 0, [accessPoints]);

ui/src/mocks/index.ts

@@ -1,3 +1,4 @@
 export * from './mint-site';
 export * from './detail';
 export * from './list';
+export * from './nfa';

ui/src/mocks/nfa.ts

@@ -0,0 +1,26 @@
+export const NFAMock = {
+  id: '6',
+  tokenId: '6',
+  name: 'Polygon',
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet velit dolor. Praesent dapibus euismod molestie. Duis maximus porttitor odio. Duis quis lorem id lacus cursus commodo vel vehicula mauris.',
+  externalURL: 'https://polygon.com',
+  ENS: 'polygon.eth',
+  logo: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzOC40IDMzLjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM4LjQgMzMuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM4MjQ3RTU7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yOSwxMC4yYy0wLjctMC40LTEuNi0wLjQtMi40LDBMMjEsMTMuNWwtMy44LDIuMWwtNS41LDMuM2MtMC43LDAuNC0xLjYsMC40LTIuNCwwTDUsMTYuMwoJCWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTVjMC0wLjgsMC40LTEuNiwxLjItMi4xbDQuMy0yLjVjMC43LTAuNCwxLjYtMC40LDIuNCwwTDE2LDcuMmMwLjcsMC40LDEuMiwxLjIsMS4yLDIuMXYzLjNsMy44LTIuMlY3CgkJYzAtMC44LTAuNC0xLjYtMS4yLTIuMWwtOC00LjdjLTAuNy0wLjQtMS42LTAuNC0yLjQsMEwxLjIsNUMwLjQsNS40LDAsNi4yLDAsN3Y5LjRjMCwwLjgsMC40LDEuNiwxLjIsMi4xbDguMSw0LjcKCQljMC43LDAuNCwxLjYsMC40LDIuNCwwbDUuNS0zLjJsMy44LTIuMmw1LjUtMy4yYzAuNy0wLjQsMS42LTAuNCwyLjQsMGw0LjMsMi41YzAuNywwLjQsMS4yLDEuMiwxLjIsMi4xdjVjMCwwLjgtMC40LDEuNi0xLjIsMi4xCgkJTDI5LDI4LjhjLTAuNywwLjQtMS42LDAuNC0yLjQsMGwtNC4zLTIuNWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjFWMjFsLTMuOCwyLjJ2My4zYzAsMC44LDAuNCwxLjYsMS4yLDIuMWw4LjEsNC43CgkJYzAuNywwLjQsMS42LDAuNCwyLjQsMGw4LjEtNC43YzAuNy0wLjQsMS4yLTEuMiwxLjItMi4xVjE3YzAtMC44LTAuNC0xLjYtMS4yLTIuMUwyOSwxMC4yeiIvPgo8L2c+Cjwvc3ZnPgo=',
+  color: 8668388,
+  accessPointAutoApproval: true,
+  owner: {
+    id: '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
+    collection: true,
+  },
+  mintedBy: '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
+  controllers: [],
+  gitRepository: {
+    id: '',
+  },
+  commitHash: '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
+  accessPoints: [],
+  verifier: {
+    id: '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
+  },
+};

ui/src/views/index.ts

@@ -3,3 +3,4 @@ export * from './mint';
 export * from './components-test';
 export * from './explore';
 export * from './access-point';
+export * from './indexed-nfa';

ui/src/views/indexed-nfa/fragments/aside.fragment.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { Button, Flex, Icon, NFAPreview } from '@/components';
+
+import { IndexedNFA } from '../indexed-nfa.context';
+import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
+
+const Preview: React.FC = () => {
+  const { nfa } = IndexedNFA.useContext();
+
+  const color = useMemo(
+    // TODO: replace with util function
+    () => `#${`000000${nfa.color.toString(16)}`.slice(-6)}`,
+    [nfa]
+  );
+
+  return (
+    <NFAPreview
+      color={color}
+      logo={nfa.logo}
+      ens={nfa.ENS}
+      name={nfa.name}
+      size="100%"
+      css={{
+        borderRadius: '$lg',
+        border: '1px solid $slate6',
+      }}
+    />
+  );
+};
+
+const CreateAccessPoint: React.FC = () => {
+  const { nfa } = IndexedNFA.useContext();
+  return (
+    <S.Aside.CreateAccessPoint.Container>
+      <S.Aside.CreateAccessPoint.Heading>
+        Host NFA Frontend
+      </S.Aside.CreateAccessPoint.Heading>
+      {/* TODO: replace with correct text */}
+
+      <S.Aside.CreateAccessPoint.Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae
+        ante erat. Sed quis finibus diam.
+      </S.Aside.CreateAccessPoint.Text>
+
+      <Flex css={{ gap: '$3' }}>
+        <Button as={Link} to={`/create-ap/${nfa.tokenId}`} colorScheme="blue">
+          Host NFA Frontend
+        </Button>
+        <S.Aside.CreateAccessPoint.Extra href="">
+          {/* TODO: place correct href */}
+          Learn more
+          <Icon name="chevron-right" />
+        </S.Aside.CreateAccessPoint.Extra>
+      </Flex>
+    </S.Aside.CreateAccessPoint.Container>
+  );
+};
+
+export const IndexedNFAAsideFragment: React.FC = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [top, setTop] = useState<number>();
+
+  useEffect(() => {
+    setTop(ref.current?.getBoundingClientRect().top);
+  }, [ref]);
+
+  return (
+    <S.Aside.Container ref={ref} css={{ top }}>
+      <Preview />
+      <CreateAccessPoint />
+    </S.Aside.Container>
+  );
+};

ui/src/views/indexed-nfa/fragments/index.ts

@@ -0,0 +1,3 @@
+export * from './aside.fragment';
+export * from './main.fragment';
+export * from './skeleton.fragment';