Merge pull request #270 from fleekxyz/release/release-v0.0.9

Release v0.0.9 to main

ui/graphql/queries.graphql

@@ -22,6 +22,10 @@ query lastNFAsPaginated(
     accessPoints {
       id
     }
+    owner {
+      id
+    }
+    verified
   }
 }
 
@@ -31,41 +35,52 @@ query totalTokens($contractId: ID!) {
   }
 }
 
-query getLatestNFAs {
-  tokens {
-    id
-    name
-  }
-}
-
 query getNFADetail($id: ID!) {
   token(id: $id) {
-    tokenId
-    owner {
+    accessPoints {
       id
     }
-    name
     description
+    color
+    createdAt
     ENS
     externalURL
+    gitRepository {
+      id
+    }
     logo
-    color
-    createdAt
-    accessPoints {
-      createdAt
-      contentVerified
-      owner {
-        id
-      }
+    name
+    owner {
       id
     }
     verified
     verifier {
       id
     }
-    gitRepository {
+    tokenId
+  }
+}
+
+query getAccessPointsNFA(
+  $tokenId: String!
+  $orderBy: AccessPoint_orderBy
+  $orderDirection: OrderDirection
+  $pageSize: Int
+  $skip: Int
+) {
+  accessPoints(
+    where: { token: $tokenId }
+    orderDirection: $orderDirection
+    orderBy: $orderBy
+    first: $pageSize
+    skip: $skip
+  ) {
+    contentVerified
+    createdAt
+    owner {
       id
     }
+    id
   }
 }
 

ui/package.json

@@ -49,7 +49,6 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "2.2.0",
-    "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "buffer": "^6.0.3",
     "eslint": "^8.28.0",
@@ -59,11 +58,9 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "ethers": "^5.7.2",
-    "postcss": "^8.4.21",
     "prettier": "^2.8.0",
     "process": "^0.11.10",
     "react-query": "^3.39.2",
-    "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.1",
     "typescript": "^4.9.3",
     "vite": "^3.2.4",

ui/src/app.context.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { createContext } from './utils';
+
+export type AppContext = {
+  backgroundColor: string;
+  setBackgroundColor: (color: string) => void;
+};
+
+const [AppProvider, useContext] = createContext<AppContext>({
+  name: 'App.Context',
+  hookName: 'App.useContext',
+  providerName: 'App.Provider',
+});
+
+export abstract class App {
+  static readonly useContext = useContext;
+  static readonly Provider: React.FC<App.AppProps> = ({ children }) => {
+    const [backgroundColor, setBackgroundColor] = useState('');
+
+    return (
+      <AppProvider value={{ backgroundColor, setBackgroundColor }}>
+        {children}
+      </AppProvider>
+    );
+  };
+}
+
+export namespace App {
+  export type AppProps = {
+    children: React.ReactNode;
+  };
+}

ui/src/app.tsx

@@ -2,6 +2,7 @@ import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import { themeGlobals } from '@/theme/globals';
 
+import { App as AppContext } from './app.context';
 import { AppPage, ToastProvider } from './components';
 import {
   ComponentsTest,
@@ -17,17 +18,19 @@ export const App: React.FC = () => {
     <>
       <HashRouter>
         <ToastProvider />
-        <AppPage>
-          <Routes>
-            <Route path="/" element={<ExploreView />} />
-            <Route path="/mint" element={<Mint />} />
-            <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="/" />} />
-          </Routes>
-        </AppPage>
+        <AppContext.Provider>
+          <AppPage>
+            <Routes>
+              <Route path="/" element={<ExploreView />} />
+              <Route path="/mint" element={<Mint />} />
+              <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="/" />} />
+            </Routes>
+          </AppPage>
+        </AppContext.Provider>
       </HashRouter>
     </>
   );

ui/src/components/card/card.styles.ts

@@ -3,6 +3,7 @@ import { styled } from '@/theme';
 export abstract class CardStyles {
   static readonly Container = styled('div', {
     width: '$full',
+    height: 'fit-content',
     backgroundColor: '$slate2',
     borderRadius: '$xlh',
     padding: '$7',

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

@@ -65,18 +65,17 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
       return props[size as 'sm' | 'md' | 'lg'];
     }, [size]);
-
     return (
       <Button
         ref={ref}
         aria-label={ariaLabel}
         size={size}
         {...rest}
         css={{
-          padding: 0,
           minWidth,
           fontSize,
           borderRadius: isRound ? '$full' : undefined,
+          padding: 0,
           ...(rest.css ?? {}),
         }}
       >

ui/src/components/core/color-picker/color-picker.styles.ts

@@ -0,0 +1,21 @@
+import { Flex } from '@/components';
+import { styled } from '@/theme';
+
+export const ColorPickerStyles = {
+  Container: styled('div', {
+    position: 'relative',
+
+    [`${Flex}`]: {
+      gap: '$3h',
+      alignItems: 'center',
+    },
+  }),
+  Input: styled('input', {
+    position: 'absolute',
+    right: '4rem',
+    height: '1.25rem',
+  }),
+  Image: styled('img', {
+    display: 'none',
+  }),
+};

ui/src/components/core/color-picker/color-picker.tsx

@@ -3,7 +3,9 @@
 import ColorThief from 'colorthief';
 import { useRef } from 'react';
 
-import { Button, Card, Flex, Icon } from '@/components';
+import { Button, Card, Flex, Icon, Text } from '@/components';
+
+import { ColorPickerStyles as CS } from './color-picker.styles';
 
 export type ColorPickerProps = {
   logoColor: string;
@@ -38,9 +40,9 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
 
   return (
     <Card.Text css={{ height: '$22', mt: '$6' }}>
-      <div className="relative">
-        <Flex css={{ gap: '$3h', alignItems: 'center' }}>
-          <span>Primary Color</span>
+      <CS.Container>
+        <Flex css={{ gap: '0.0625rem' }}>
+          <Text>Primary Color</Text>
           <Button
             leftIcon={
               <Icon name="square" css={{ color: `${logoColor || '$black'}` }} />
@@ -55,23 +57,22 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
               color: '$slate12',
               zIndex: '$docked',
               minWidth: '$28',
+              gap: '0.125rem',
             }}
             onClick={handleColorPickerClick}
           >
             {logoColor.toUpperCase() || '#000000'}
           </Button>
-          <input
+          <CS.Input
             ref={inputColorRef}
-            className="absolute right-16 h-5"
             type="color"
             value={logoColor}
             onChange={handleColorChange}
           />
         </Flex>
-      </div>
+      </CS.Container>
 
-      <img
-        className="hidden"
+      <CS.Image
         src={logo}
         ref={imageRef}
         onLoad={handleLogoLoad}

ui/src/components/core/icon/custom/index.ts

@@ -5,3 +5,4 @@ export * from './fleek-name-icon';
 export * from './beta-tag-icon';
 export * from './error-icon';
 export * from './fleek-logo-icon';
+export * from './opensea-icon';

ui/src/components/core/icon/custom/opensea-icon.tsx

@@ -0,0 +1,15 @@
+import { IconStyles as IS } from '../icon.styles';
+
+export const OpenseaIcon: React.FC<IS.CustomProps> = (props) => (
+  <IS.Custom
+    {...props}
+    viewBox="0 0 90 90"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M45 0C20.151 0 0 20.151 0 45C0 69.849 20.151 90 45 90C69.849 90 90 69.849 90 45C90 20.151 69.858 0 45 0ZM22.203 46.512L22.392 46.206L34.101 27.891C34.272 27.63 34.677 27.657 34.803 27.945C36.756 32.328 38.448 37.782 37.656 41.175C37.323 42.57 36.396 44.46 35.352 46.206C35.217 46.458 35.073 46.71 34.911 46.953C34.839 47.061 34.713 47.124 34.578 47.124H22.545C22.221 47.124 22.032 46.773 22.203 46.512ZM74.376 52.812C74.376 52.983 74.277 53.127 74.133 53.19C73.224 53.577 70.119 55.008 68.832 56.799C65.538 61.38 63.027 67.932 57.402 67.932H33.948C25.632 67.932 18.9 61.173 18.9 52.83V52.56C18.9 52.344 19.08 52.164 19.305 52.164H32.373C32.634 52.164 32.823 52.398 32.805 52.659C32.706 53.505 32.868 54.378 33.273 55.17C34.047 56.745 35.658 57.726 37.395 57.726H43.866V52.677H37.467C37.143 52.677 36.945 52.299 37.134 52.029C37.206 51.921 37.278 51.813 37.368 51.687C37.971 50.823 38.835 49.491 39.699 47.97C40.284 46.944 40.851 45.846 41.31 44.748C41.4 44.55 41.472 44.343 41.553 44.145C41.679 43.794 41.805 43.461 41.895 43.137C41.985 42.858 42.066 42.57 42.138 42.3C42.354 41.364 42.444 40.374 42.444 39.348C42.444 38.943 42.426 38.52 42.39 38.124C42.372 37.683 42.318 37.242 42.264 36.801C42.228 36.414 42.156 36.027 42.084 35.631C41.985 35.046 41.859 34.461 41.715 33.876L41.661 33.651C41.553 33.246 41.454 32.868 41.328 32.463C40.959 31.203 40.545 29.97 40.095 28.818C39.933 28.359 39.753 27.918 39.564 27.486C39.294 26.82 39.015 26.217 38.763 25.65C38.628 25.389 38.52 25.155 38.412 24.912C38.286 24.642 38.16 24.372 38.025 24.111C37.935 23.913 37.827 23.724 37.755 23.544L36.963 22.086C36.855 21.888 37.035 21.645 37.251 21.708L42.201 23.049H42.219C42.228 23.049 42.228 23.049 42.237 23.049L42.885 23.238L43.605 23.436L43.866 23.508V20.574C43.866 19.152 45 18 46.413 18C47.115 18 47.754 18.288 48.204 18.756C48.663 19.224 48.951 19.863 48.951 20.574V24.939L49.482 25.083C49.518 25.101 49.563 25.119 49.599 25.146C49.725 25.236 49.914 25.38 50.148 25.56C50.337 25.704 50.535 25.884 50.769 26.073C51.246 26.46 51.822 26.955 52.443 27.522C52.605 27.666 52.767 27.81 52.92 27.963C53.721 28.71 54.621 29.583 55.485 30.555C55.728 30.834 55.962 31.104 56.205 31.401C56.439 31.698 56.7 31.986 56.916 32.274C57.213 32.661 57.519 33.066 57.798 33.489C57.924 33.687 58.077 33.894 58.194 34.092C58.554 34.623 58.86 35.172 59.157 35.721C59.283 35.973 59.409 36.252 59.517 36.522C59.85 37.26 60.111 38.007 60.273 38.763C60.327 38.925 60.363 39.096 60.381 39.258V39.294C60.435 39.51 60.453 39.744 60.471 39.987C60.543 40.752 60.507 41.526 60.345 42.3C60.273 42.624 60.183 42.93 60.075 43.263C59.958 43.578 59.85 43.902 59.706 44.217C59.427 44.856 59.103 45.504 58.716 46.098C58.59 46.323 58.437 46.557 58.293 46.782C58.131 47.016 57.96 47.241 57.816 47.457C57.609 47.736 57.393 48.024 57.168 48.285C56.97 48.555 56.772 48.825 56.547 49.068C56.241 49.437 55.944 49.779 55.629 50.112C55.449 50.328 55.251 50.553 55.044 50.751C54.846 50.976 54.639 51.174 54.459 51.354C54.144 51.669 53.892 51.903 53.676 52.11L53.163 52.569C53.091 52.641 52.992 52.677 52.893 52.677H48.951V57.726H53.91C55.017 57.726 56.07 57.339 56.925 56.61C57.213 56.358 58.482 55.26 59.985 53.604C60.039 53.541 60.102 53.505 60.174 53.487L73.863 49.527C74.124 49.455 74.376 49.644 74.376 49.914V52.812V52.812Z"
+      fill="currentColor"
+    />
+  </IS.Custom>
+);

ui/src/components/core/icon/custom/share-icon.tsx

@@ -0,0 +1,18 @@
+import { IconStyles as IS } from '../icon.styles';
+
+export const Share: React.FC<IS.CustomProps> = (props) => (
+  <IS.Custom
+    {...props}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.91684 1.66675V5.33341C3.88976 6.27575 1.64851 11.5557 0.750173 16.3334C0.716256 16.5222 5.68551 10.8682 9.91684 10.8334V14.5001L17.2502 8.08341L9.91684 1.66675Z"
+      stroke="white"
+      strokeWidth="1.41667"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </IS.Custom>
+);

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

@@ -1,16 +1,19 @@
 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';
 import { FaBars } from '@react-icons/all-files/fa/FaBars';
 import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight';
 import { FaExternalLinkAlt } from '@react-icons/all-files/fa/FaExternalLinkAlt';
+import { HiOutlineDotsHorizontal } from '@react-icons/all-files/hi/HiOutlineDotsHorizontal';
 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 { 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';
@@ -23,7 +26,9 @@ import {
   FleekLogo,
   FleekName,
   MetamaskIcon,
+  OpenseaIcon,
 } from './custom';
+import { Share } from './custom/share-icon';
 
 export const IconLibrary = Object.freeze({
   back: IoArrowBackCircleSharp,
@@ -40,13 +45,18 @@ 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,
   search: BiSearch,
   square: BsFillSquareFill,
+  share: Share,
   success: AiFillCheckCircle,
   twitter: AiOutlineTwitter,
+  'three-dots': HiOutlineDotsHorizontal,
   upload: IoCloudUploadSharp,
   verified: MdVerifiedUser,
 });

ui/src/components/core/index.ts

@@ -7,3 +7,4 @@ export * from './separator.styles';
 export * from './text';
 export * from './switch';
 export * from './color-picker';
+export * from './menu';