(feat): update hyperboard widget to optionally display ownership-tabl…

…e.tsx
hypercerts-org · Jun 17, 2024 · ad3494a · ad3494a
1 parent 77546fc
commit ad3494a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/components/hyperboard-renderer.tsx b/components/hyperboard-renderer.tsx
@@ -7,19 +7,22 @@ import {
 import { Center, Flex, Spinner } from "@chakra-ui/react";
 import { Hyperboard } from "@/components/hyperboard";
 import * as React from "react";
+import { OwnershipTable } from "@/components/hyperboard/ownership-table";
 
 export const HyperboardRenderer = ({
   hyperboardId,
   fullScreen,
   disableToast = false,
   selectedRegistryParent,
   onSelectedRegistryChange,
+  showTable = false,
 }: {
   hyperboardId: string;
   fullScreen?: boolean;
   disableToast?: boolean;
   selectedRegistryParent?: string;
   onSelectedRegistryChange?: (registryId?: string) => void;
+  showTable?: boolean;
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const dimensions = useSize(containerRef);
@@ -141,6 +144,13 @@ export const HyperboardRenderer = ({
           </>
         )}
       </Flex>
+      {showTable && (
+        <OwnershipTable
+          hyperboardId={hyperboardId}
+          selectedRegistry={selectedRegistry}
+          onSelectRegistry={setSelectedRegistry}
+        />
+      )}
     </>
   );
 };
diff --git a/components/hyperboard/ownership-table.tsx b/components/hyperboard/ownership-table.tsx
@@ -158,7 +158,7 @@ export const OwnershipTable = ({
                     icon={
                       <Image
                         alt={"Board icon"}
-                        src={"/icons/board.svg"}
+                        src={"https://staging.hyperboards.org/icons/board.svg"}
                         width={"24px"}
                       />
                     }
@@ -187,7 +187,9 @@ export const OwnershipTable = ({
                             icon={
                               <Image
                                 alt={"Claim icon"}
-                                src={"/icons/claim.svg"}
+                                src={
+                                  "https://staging.hyperboards.org/icons/board.svg"
+                                }
                                 width={"12px"}
                               />
                             }
@@ -316,7 +318,11 @@ const HypercertClaimRow = ({
       {...props}
       text={claim.metadata.name || "No name"}
       icon={
-        <Image alt={"Claim icon"} src={"/icons/claim.svg"} width={"12px"} />
+        <Image
+          alt={"Claim icon"}
+          src={"https://staging.hyperboards.org/icons/claim.svg"}
+          width={"12px"}
+        />
       }
     />
   );

diff --git a/widget/hyperboard-widget.tsx b/widget/hyperboard-widget.tsx
@@ -9,6 +9,8 @@ const widgetDivs = document.querySelectorAll(".hyperboard-widget");
 // Inject our React App into each class
 widgetDivs.forEach((container) => {
   const hyperboardId = container.getAttribute("data-hyperboard-id");
+  const showTable =
+    container.getAttribute("data-hyperboard-show-table") === "true";
 
   if (!hyperboardId) {
     console.error("No hyperboard id found");
@@ -21,7 +23,11 @@ widgetDivs.forEach((container) => {
     // TODO: Fix this typing error
     //@ts-ignore
     <Providers showReactQueryDevtools={false} resetCSS={false}>
-      <HyperboardRenderer hyperboardId={hyperboardId} disableToast />
+      <HyperboardRenderer
+        hyperboardId={hyperboardId}
+        showTable={showTable}
+        disableToast
+      />
     </Providers>,
   );
 });
diff --git a/widget/index.html b/widget/index.html
@@ -6,7 +6,8 @@
 </head>
 
 <body>
-  <div class="hyperboard-widget" data-hyperboard-id="de2abc85-9ad1-424b-b512-5bf804e63159"></div>
+  <div class="hyperboard-widget" data-hyperboard-id="db87d547-67e3-4f8a-b326-bce197f775c5"></div>
+  <div class="hyperboard-widget" data-hyperboard-id="db87d547-67e3-4f8a-b326-bce197f775c5" data-hyperboard-show-table="true"></div>
   <script src="hyperboard-widget.tsx" type="module"></script>
 </body>
 </html>