style: radial gradient background

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

@@ -16,7 +16,7 @@ import {
 import { env } from '@/constants';
 import { FleekERC721 } from '@/integrations/ethereum/contracts';
 import { forwardStyledRef } from '@/theme';
-import { AppLog } from '@/utils';
+import { AppLog, getDate, getRepositoryFromURL } from '@/utils';
 import { parseNumberToHexColor } from '@/utils/color';
 
 import { IndexedNFA } from '../indexed-nfa.context';
@@ -73,8 +73,7 @@ const Header: React.FC = () => {
     <S.Aside.Header.Wrapper>
       <S.Aside.Header.Container>
         <S.Aside.Header.Header>{nfa.name}</S.Aside.Header.Header>
-        {/* TODO remove once subrgraph integration is merged */}
-        <Badge verified={Math.random() > 0.5} />
+        <Badge verified={nfa.verified} />
       </S.Aside.Header.Container>
 
       <Flex css={{ gap: '$1h' }}>
@@ -110,10 +109,7 @@ const NFAInfo: React.FC = () => {
 
       <S.Aside.Divider.Elipse />
 
-      <HeaderData label="Created">
-        {/* TODO: place correct data */}
-        12/12/22
-      </HeaderData>
+      <HeaderData label="Created">{getDate(nfa.createdAt)}</HeaderData>
     </Flex>
   );
 };
@@ -208,18 +204,17 @@ const ButtonsFragment: React.FC = () => {
 const PropertiesFragment: React.FC = () => {
   const { nfa } = IndexedNFA.useContext();
 
-  //TODO replace with real data
   const traitsToShow = useMemo(() => {
     return [
       [nfa.ENS, 'ENS'],
-      [nfa.gitRepository.id, 'Repository'],
+      [getRepositoryFromURL(nfa.gitRepository.id), 'Repository'],
       [10, 'Version'],
       [nfa.externalURL, 'Domain'],
     ];
   }, [nfa]);
 
   return (
-    <Flex css={{ flexDirection: 'column', gap: '$3' }}>
+    <Flex css={{ flexDirection: 'column', gap: '$3', height: '336px' }}>
       {traitsToShow.map(([value, label], index) => (
         <S.Aside.Overview.Container
           css={{ gap: '$1', p: '$2h $4' }}
@@ -239,7 +234,9 @@ const OverviewFragment: React.FC = () => {
   const { nfa } = IndexedNFA.useContext();
 
   return (
-    <S.Aside.Overview.Container css={{ gap: '$4h', p: '$6' }}>
+    <S.Aside.Overview.Container
+      css={{ gap: '$4h', p: '$5 $6', height: '336px' }}
+    >
       <S.Aside.Overview.Row.Container>
         <S.Aside.Overview.Row.Label>Token ID</S.Aside.Overview.Row.Label>
         <S.Aside.Overview.Row.Value>{nfa.tokenId}</S.Aside.Overview.Row.Value>
@@ -258,7 +255,7 @@ const OverviewFragment: React.FC = () => {
       <S.Aside.Overview.Row.Container>
         <S.Aside.Overview.Row.Label>Description</S.Aside.Overview.Row.Label>
       </S.Aside.Overview.Row.Container>
-      <S.Aside.Overview.Description>
+      <S.Aside.Overview.Description css={{ overflowY: 'scroll' }}>
         {nfa.description}
       </S.Aside.Overview.Description>
     </S.Aside.Overview.Container>
@@ -294,7 +291,7 @@ export const IndexedNFAAsideFragment: React.FC = () => {
   const { nfa } = IndexedNFA.useContext();
 
   const { backgroundColor } = App.useContext();
-  const background = `linear-gradient(230deg, #${backgroundColor} 0%, #181818 80%)`;
+  const background = `radial-gradient(closest-corner circle at 90% 45%, #${backgroundColor}8c 1% ,#${backgroundColor}57 20%, transparent 40%), radial-gradient(closest-corner circle at 60% 25%, #${backgroundColor} 3%, #${backgroundColor}73 30%, #181818 70%)`;
 
   useEffect(() => {
     setTop(ref.current?.getBoundingClientRect().top);
@@ -303,7 +300,7 @@ export const IndexedNFAAsideFragment: React.FC = () => {
   return (
     <S.Aside.Container
       ref={ref}
-      css={{ top, background: background, backdropFilter: 'blur(10px)' }}
+      css={{ top, background, backdropFilter: 'blur(10px)' }}
     >
       <Preview />
       <Header />

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

@@ -14,6 +14,7 @@ import {
 import { getDate, getRepositoryFromURL, getTimeSince } from '@/utils';
 
 import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
+import { IndexedNFA } from '../indexed-nfa.context';
 
 type SortItem = {
   value: string;
@@ -205,27 +206,31 @@ const apMocks = new Array(20).fill(0).map((_, index) => ({
 }));
 
 const AccessPointsListFragment: React.FC = () => {
-  //TODO add infinite scroll
+  const {
+    nfa: { accessPoints },
+  } = IndexedNFA.useContext();
 
   return (
     <S.Main.AccessPoint.List>
-      {apMocks.map((item, index) => (
+      {accessPoints.map((item, index) => (
         <S.Main.AccessPoint.Grid key={index}>
           <S.Main.AccessPoint.Thumbnail>
-            <img src={item.thumbnail} />
+            <img src={Rectangle1} />
           </S.Main.AccessPoint.Thumbnail>
           <S.Main.AccessPoint.Data.Container>
-            <S.Main.AccessPoint.Title>{item.domain}</S.Main.AccessPoint.Title>
+            <S.Main.AccessPoint.Title>{item.id}</S.Main.AccessPoint.Title>
             <Flex
               css={{ gap: '$2h', alignItems: 'center', textAlign: 'center' }}
             >
               <Text css={{ color: '$slate11' }}>
-                <ResolvedAddress>{item.owner}</ResolvedAddress>
+                <ResolvedAddress>{item.owner.id}</ResolvedAddress>
               </Text>
               <S.Main.Divider.Elipse />
               <Text css={{ color: '$slate11' }}>220 views</Text>
               <S.Main.Divider.Elipse />
-              <Text css={{ color: '$slate11' }}>2 months ago</Text>
+              <Text css={{ color: '$slate11' }}>
+                {getTimeSince(item.createdAt)}
+              </Text>
             </Flex>
           </S.Main.AccessPoint.Data.Container>
         </S.Main.AccessPoint.Grid>

ui/src/views/indexed-nfa/indexed-nfa.styles.ts

@@ -35,6 +35,7 @@ export const IndexedNFAStyles = {
       borderRadius: '$lg',
       padding: Spacing,
       maxWidth: '24rem',
+      mixBlendMode: 'screen',
 
       '@media (max-width: 580px)': {
         position: 'static',
@@ -109,7 +110,7 @@ export const IndexedNFAStyles = {
       Container: styled('div', {
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: '$slate4',
+        backgroundColor: 'rgba(255, 255, 255, 0.06)',
         borderRadius: '$lg',
         fontSize: '14px',
       }),