Merge pull request #12 from hypercerts-org/feature/board-designs

feat/ownership-table

components/admin/hyperboards-admin.tsx

@@ -19,9 +19,9 @@ import { CreateHyperboardModal } from "@/components/admin/create-hyperboard-moda
 import { useMyHyperboards } from "@/hooks/useMyHyperboards";
 import { DeleteHyperboardButton } from "@/components/admin/delete-hyperboard-button";
 import { RemoveRegistryFromHyperboardButton } from "@/components/admin/remove-registry-from-hyperboard-button";
-import { headerHeight } from "@/components/Layout";
 import { EditHyperboardRegistryButton } from "@/components/admin/edit-hyperboard-registry-button";
 import { AddHyperboardRegistryButton } from "@/components/admin/add-hyperboard-registry-button";
+import { headerHeight } from "@/components/layout/header";
 
 export const HyperboardsAdmin = () => {
   const {
@@ -59,7 +59,7 @@ export const HyperboardsAdmin = () => {
                   <Thead>
                     <Tr>
                       <Th>Name</Th>
-                      <Td>Label</Td>
+                      <Th>Label</Th>
                       <Th>Chain ID</Th>
                     </Tr>
                   </Thead>

components/admin/registry-selector.tsx

@@ -32,15 +32,19 @@ const getMyRegistryOptions = async (address: string, name: string) => {
 
 export const SingleRegistrySelector = forwardRef(
   function SingleRegistrySelectorRef(
-    props: Omit<Props, "ref">,
+    props: Omit<Props, "ref"> & { onlyMyRegistries?: boolean },
     ref: React.Ref<any>,
   ) {
     const address = useAddress();
     return (
       <AsyncSelect
         {...props}
         ref={ref}
-        loadOptions={(name) => getMyRegistryOptions(address || "", name)}
+        loadOptions={(name) =>
+          props.onlyMyRegistries
+            ? getMyRegistryOptions(address || "", name)
+            : getRegistryOptions(name)
+        }
         defaultOptions
       />
     );

components/breadcrumbs.tsx

@@ -0,0 +1,27 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-ui/react";
+import { BiChevronRight } from "react-icons/bi";
+
+export interface BreadcrumbEntry {
+  name: string;
+  onClick: () => void;
+  isActive?: boolean;
+}
+
+export interface BreadcrumbsProps {
+  crumbs: BreadcrumbEntry[];
+}
+export const Breadcrumbs = ({ crumbs }: BreadcrumbsProps) => {
+  return (
+    <Breadcrumb separator={<BiChevronRight color="gray.500" />}>
+      {crumbs.map((crumb) => (
+        <BreadcrumbItem
+          isCurrentPage={crumb.isActive}
+          key={crumb.name}
+          onClick={crumb.onClick}
+        >
+          <BreadcrumbLink>{crumb.name}</BreadcrumbLink>
+        </BreadcrumbItem>
+      ))}
+    </Breadcrumb>
+  );
+};

components/forms/create-or-update-hyperboard-form.tsx

@@ -31,7 +31,7 @@ export const CreateOrUpdateHyperboardForm = ({
     defaultValues: initialValues,
   });
   return (
-    <form onSubmit={handleSubmit(onSubmitted)}>
+    <form onSubmit={handleSubmit(onSubmitted)} style={{ width: "100%" }}>
       <FormControl isInvalid={!!errors.name}>
         <FormLabel htmlFor="name">Name</FormLabel>
         <Input

components/forms/create-or-update-hyperboard-registry-form.tsx

@@ -128,7 +128,7 @@ export const CreateOrUpdateHyperboardRegistryForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form style={{ width: "100%" }} onSubmit={handleSubmit(onSubmit)}>
       <VStack>
         <FormControl isInvalid={!!errors.registry}>
           <FormLabel>Registry ID</FormLabel>

components/forms/create-or-update-registry-form.tsx

@@ -41,8 +41,9 @@ export const CreateOrUpdateRegistryForm = ({
     defaultValues: { claims: [], ...initialValues },
   });
 
+  // TODO: Add validation whether claim is on correct chain etc
   return (
-    <form onSubmit={handleSubmit(onSubmitted)}>
+    <form onSubmit={handleSubmit(onSubmitted)} style={{ width: "100%" }}>
       <VStack>
         <FormControl isInvalid={!!errors.name}>
           <FormLabel htmlFor="name">Name</FormLabel>

components/ftc-board.tsx

@@ -4,10 +4,12 @@ import {
   registryContentItemToHyperboardEntry,
   useHyperboardContents,
 } from "@/hooks/registry";
-import { Center, Flex, Spinner } from "@chakra-ui/react";
+import { Center, Flex, Spinner, VStack } from "@chakra-ui/react";
 import { Hyperboard } from "@/components/hyperboard";
 import * as React from "react";
 import Head from "next/head";
+import { BreadcrumbEntry, Breadcrumbs } from "@/components/breadcrumbs";
+import { OwnershipTable } from "@/components/hyperboard/ownership-table";
 
 export const FtcBoard = ({ hyperboardId }: { hyperboardId: string }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -33,53 +35,99 @@ export const FtcBoard = ({ hyperboardId }: { hyperboardId: string }) => {
     return widthPerBoard;
   };
 
+  const crumbs: BreadcrumbEntry[] = [];
+
+  if (hyperboard) {
+    crumbs.push({
+      name: hyperboard.name,
+      onClick: () => setSelectedRegistry(undefined),
+    });
+  }
+
+  if (selectedRegistry) {
+    const registry = hyperboard?.hyperboard_registries.find(
+      (x) => x.registries?.id === selectedRegistry,
+    );
+    if (registry?.registries) {
+      crumbs.push({
+        name: registry.registries?.name,
+        onClick: () => {},
+        isActive: true,
+      });
+    }
+  }
+
+  // TODO: Add start breadcrumb with company icon
+  // TODO: Add second breadcrumb with company name
+
   return (
     <>
       <Head>
-        <title>Hyperboards - {hyperboard?.name || "Loading"}</title>
+        {hyperboard?.name ? (
+          <title>Hyperboards - {hyperboard.name}</title>
+        ) : (
+          <title>Hyperboards - Loading</title>
+        )}
       </Head>
-      <Center width={"100%"} paddingX={"80px"}>
-        <Flex
-          width={"100%"}
-          ref={containerRef}
-          overflow={"hidden"}
-          backgroundColor={"black"}
-          aspectRatio={"16 / 9"}
-        >
-          {isLoading ? (
-            <Center paddingY={"80px"} width={"100%"}>
-              <Spinner />
-            </Center>
-          ) : (
-            <>
-              {results?.map((x) => (
-                <Flex
-                  key={x.registry.id}
-                  width={getWidth(x.registry.id)}
-                  minWidth={getWidth(x.registry.id)}
-                  transition={"all 0.5s ease-out"}
-                  overflow={"hidden"}
-                >
-                  <Hyperboard
-                    onClickLabel={() =>
-                      setSelectedRegistry((currentId) =>
-                        currentId === x.registry.id ? undefined : x.registry.id,
-                      )
-                    }
-                    label={x.label || "Unlabelled"}
-                    height={height}
-                    data={
-                      (Object.values(x.content) || {})
-                        .filter((x) => x.displayData)
-                        .map((x) => registryContentItemToHyperboardEntry(x)) ||
-                      []
-                    }
-                  />
-                </Flex>
-              ))}
-            </>
-          )}
-        </Flex>
+
+      <Center flexDirection={"column"} width={"100%"} paddingX={[0, 0, "80px"]}>
+        <VStack width={"100%"}>
+          <Flex justifyContent={"flex-start"} width={"100%"}>
+            <Breadcrumbs crumbs={crumbs} />
+          </Flex>
+          <Flex
+            width={"100%"}
+            ref={containerRef}
+            overflow={"hidden"}
+            backgroundColor={"black"}
+            aspectRatio={"16 / 9"}
+          >
+            {isLoading ? (
+              <Center paddingY={"80px"} width={"100%"}>
+                <Spinner />
+              </Center>
+            ) : (
+              <>
+                {results?.map((x) => (
+                  <Flex
+                    key={x.registry.id}
+                    width={getWidth(x.registry.id)}
+                    minWidth={getWidth(x.registry.id)}
+                    transition={"all 0.5s ease-out"}
+                    overflow={"hidden"}
+                  >
+                    <Hyperboard
+                      onClickLabel={() =>
+                        setSelectedRegistry((currentId) =>
+                          currentId === x.registry.id
+                            ? undefined
+                            : x.registry.id,
+                        )
+                      }
+                      label={x.label || "Unlabelled"}
+                      height={height}
+                      data={
+                        (Object.values(x.content) || {})
+                          .filter((x) => x.displayData)
+                          .map((x) =>
+                            registryContentItemToHyperboardEntry(x),
+                          ) || []
+                      }
+                    />
+                  </Flex>
+                ))}
+              </>
+            )}
+          </Flex>
+        </VStack>
+        {hyperboard && (
+          <OwnershipTable
+            hyperboardId={hyperboard.id}
+            showHeader
+            selectedRegistry={selectedRegistry}
+            onSelectRegistry={setSelectedRegistry}
+          />
+        )}
       </Center>
     </>
   );

components/hyperboard/index.tsx

@@ -44,7 +44,7 @@ export const Hyperboard = (props: HyperboardProps) => {
     if (!dimensions) {
       return;
     }
-    console.log("drawing", containerRef.current, dimensions);
+    // console.log("drawing", containerRef.current, dimensions);
     d3.select(ref.current)
       .attr("width", props.height)
       .attr("height", props.height)
@@ -83,7 +83,7 @@ export const Hyperboard = (props: HyperboardProps) => {
   };
 
   const ratio = dimensions ? dimensions.width / dimensions.height : 1;
-  console.log("dimensions", dimensions, ratio);
+  // console.log("dimensions", dimensions, ratio);
 
   return (
     <Flex