Feature/marketplace qa (#19)

* make colors in minting variable * use ethers v6 adapter for wagmi * add support for blueprints in ownership table * remove logs * admin ui polish * update marketplace sdk
hypercerts-org · Nov 30, 2023 · 98bfdcc · 98bfdcc
1 parent 3d19446
commit 98bfdcc
Show file tree

Hide file tree

Showing 25 changed files with 663 additions and 1,305 deletions.
diff --git a/components/admin/my-blueprints-admin.tsx b/components/admin/my-blueprints-admin.tsx
@@ -1,12 +1,14 @@
 import {
   Badge,
   Card,
+  Center,
   Flex,
   Spinner,
   Table,
   TableContainer,
   Tbody,
   Td,
+  Text,
   Th,
   Thead,
   Tr,
@@ -44,6 +46,10 @@ export const MyBlueprintsAdmin = () => {
               blueprintId={parsedBluePrintId}
               onComplete={() => push("/admin/my-claims/")}
             />
+          ) : data.data?.length === 0 ? (
+            <Center>
+              <Text>You don{"'"}t have any blueprints yet</Text>
+            </Center>
           ) : (
             <TableContainer width={"100%"} height={"100%"}>
               <Table variant={"striped"} colorScheme="blue" size={"sm"}>

diff --git a/components/admin/my-claims-admin.tsx b/components/admin/my-claims-admin.tsx
@@ -38,6 +38,7 @@ export const MyClaimsAdmin = () => {
                     <Th>Admin</Th>
                     <Th>External url</Th>
                     <Th>Description</Th>
+                    <Th>Display size</Th>
                   </Tr>
                 </Thead>
                 <Tbody>

diff --git a/components/admin/registries-admin.tsx b/components/admin/registries-admin.tsx
@@ -198,6 +198,14 @@ export const ClaimRow = ({
     return (
       <Tr>
         <Td>Hypercert not found</Td>
+        <Td>N/A</Td>
+        <Td>N/A</Td>
+        <Td>N/A</Td>
+        <Td>N/A</Td>
+        <Td>N/A</Td>
+        <Td textAlign={"end"}>
+          <DeleteClaimButton size="xs" claimId={id} />
+        </Td>
       </Tr>
     );
   }

diff --git a/components/blueprint-tooltip.tsx b/components/blueprint-tooltip.tsx
@@ -0,0 +1,19 @@
+import { Flex, FlexProps, Tooltip } from "@chakra-ui/react";
+import { InfoCircleFilled } from "@ant-design/icons";
+
+const defaultText =
+  "This is a blueprint, which means the owner has not claimed their hypercert yet";
+const defaultColor = "gray.600";
+
+export const BlueprintTooltip = ({
+  text = defaultText,
+  ...flexProps
+}: { text?: string } & FlexProps) => {
+  return (
+    <Flex color={defaultColor} {...flexProps}>
+      <Tooltip label={text} aria-label={text}>
+        <InfoCircleFilled />
+      </Tooltip>
+    </Flex>
+  );
+};
diff --git a/components/forms/create-or-update-default-sponsor-metadata-form.tsx b/components/forms/create-or-update-default-sponsor-metadata-form.tsx
@@ -36,6 +36,7 @@ const defaultPreviewValues: HyperboardEntry = {
   type: "Test",
   firstName: "First",
   lastName: "Last",
+  isBlueprint: true,
 };
 
 const previewSize = 120;

diff --git a/components/hyperboard-renderer.tsx b/components/hyperboard-renderer.tsx
@@ -113,9 +113,7 @@ export const HyperboardRenderer = ({
                       data={
                         (Object.values(x.content) || {})
                           .filter((x) => x.displayData)
-                          .map((x) =>
-                            registryContentItemToHyperboardEntry(x),
-                          ) || []
+                          .map(registryContentItemToHyperboardEntry) || []
                       }
                     />
                   </Flex>

diff --git a/components/hyperboard/Tile.tsx b/components/hyperboard/Tile.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { HyperboardEntry } from "@/types/Hyperboard";
 import { Flex, Image, Text } from "@chakra-ui/react";
+import { BlueprintTooltip } from "@/components/blueprint-tooltip";
 
 const borderRadius = "8px";
 const logosAndText = "black";
@@ -18,6 +19,7 @@ export const Tile = ({
   left: number;
   padding: number;
 }) => {
+  const opacity = entry.isBlueprint ? 0.5 : 1;
   if (entry.type === "company") {
     return (
       <Wrapper {...wrapperProps}>
@@ -36,6 +38,7 @@ export const Tile = ({
             filter={
               "invert(0%) sepia(0%) saturate(1081%) hue-rotate(270deg) brightness(101%) contrast(106%) !important"
             }
+            opacity={opacity}
             className={"company-logo"}
             maxWidth={"60%"}
             maxHeight={"80%"}
@@ -56,20 +59,27 @@ export const Tile = ({
           position={"relative"}
           height={"100%"}
           justifyContent={"space-between"}
+          backgroundColor={entry.isBlueprint ? "gray.100" : undefined}
         >
           <Flex flexDirection={"column"} marginTop={"auto"} padding={padding}>
             <Text
               fontSize={`${layout.font}px`}
               color={logosAndText}
               fontFamily={"Switzer"}
+              opacity={opacity}
             >
               {entry.firstName}
             </Text>
-            <Text fontSize={`${layout.font}px`} color={logosAndText}>
+            <Text
+              opacity={opacity}
+              fontSize={`${layout.font}px`}
+              color={logosAndText}
+            >
               {entry.lastName}
             </Text>
           </Flex>
           <Image
+            opacity={opacity}
             borderTopRightRadius={borderRadius}
             borderBottomLeftRadius={borderRadius}
             marginBottom={"auto"}
@@ -79,8 +89,16 @@ export const Tile = ({
             width={`${layout.image}px`}
             maxWidth={`${layout.image}px`}
             maxHeight={`${layout.image}px`}
+            objectFit={"cover"}
           />
         </Flex>
+        {entry.isBlueprint && (
+          <BlueprintTooltip
+            position={"absolute"}
+            top={padding}
+            left={padding}
+          />
+        )}
       </Wrapper>
     );
   }
@@ -94,6 +112,7 @@ export const Tile = ({
           position={"relative"}
           height={"100%"}
           justifyContent={"space-between"}
+          backgroundColor={entry.isBlueprint ? "gray.100" : undefined}
         >
           <Flex flexDirection={"column"} marginTop={"auto"} padding={padding}>
             <Text