Feature/claim display size (#17)

* add support for claim display size in hyperboard rendering

* add ui support and rls for updating display size

components/admin/create-registry-modal.tsx

@@ -100,20 +100,27 @@ export const CreateRegistryModal = ({
 
     try {
       const claimInserts: ClaimInsert[] = await Promise.all(
-        claims.map(async ({ hypercert_id, claim_id = crypto.randomUUID() }) => {
-          const claim = await client.indexer.claimById(hypercert_id);
-          if (!claim.claim) {
-            throw new Error("Claim not found");
-          }
-          return {
-            id: claim_id,
-            registry_id: insertedRegistry.id,
+        claims.map(
+          async ({
             hypercert_id,
-            chain_id: chainId,
-            admin_id: address,
-            owner_id: claim.claim.owner,
-          };
-        }),
+            claim_id = crypto.randomUUID(),
+            display_size,
+          }) => {
+            const claim = await client.indexer.claimById(hypercert_id);
+            if (!claim.claim) {
+              throw new Error("Claim not found");
+            }
+            return {
+              id: claim_id,
+              registry_id: insertedRegistry.id,
+              display_size: Number(display_size.toString()),
+              hypercert_id,
+              chain_id: chainId,
+              admin_id: address,
+              owner_id: claim.claim.owner,
+            };
+          },
+        ),
       );
       await createClaims({
         claims: claimInserts,

components/admin/registries-admin.tsx

@@ -55,8 +55,6 @@ export const RegistriesAdmin = () => {
     setSelectedRegistry(undefined);
   };
 
-  // TODO: A number should be able to be set for each claim <> registry relation, to see how much of the total space of the registry it takes up
-  // TODO: This space is then divided using the units, and how much everybody owns of the total number of units for a claim.
   return (
     <Flex direction={"column"} width={"100%"}>
       <VStack minHeight={"100%"} spacing={4} alignItems={"flex-start"}>
@@ -81,6 +79,7 @@ export const RegistriesAdmin = () => {
                         claims: registry.claims.map((claim) => ({
                           claim_id: claim.id,
                           hypercert_id: claim.hypercert_id,
+                          display_size: claim.display_size,
                         })),
                       });
                       createOnOpen();
@@ -101,6 +100,7 @@ export const RegistriesAdmin = () => {
                       <Th>Owner</Th>
                       <Th>External url</Th>
                       <Th>Description</Th>
+                      <Th>Display size</Th>
                     </Tr>
                   </Thead>
                   <Tbody>
@@ -174,7 +174,12 @@ export const RegistriesAdmin = () => {
   );
 };
 
-export const ClaimRow = ({ hypercert_id, chain_id, id }: {} & ClaimEntity) => {
+export const ClaimRow = ({
+  hypercert_id,
+  chain_id,
+  id,
+  display_size,
+}: {} & ClaimEntity) => {
   const { data, isLoading } = useFetchHypercertById(hypercert_id);
 
   if (isLoading) {
@@ -220,6 +225,7 @@ export const ClaimRow = ({ hypercert_id, chain_id, id }: {} & ClaimEntity) => {
       <Td maxW={"300px"} isTruncated>
         {data.metadata.description}
       </Td>
+      <Td>{display_size}</Td>
       <Td textAlign={"end"}>
         <DeleteClaimButton size="xs" claimId={id} />
       </Td>

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

@@ -25,7 +25,12 @@ export interface CreateOrUpdateHyperboardFormProps {
 const minimumCharacters = 40;
 
 export type CreateUpdateRegistryFormValues = RegistryInsert & {
-  claims: { claim_id?: string; hypercert_id: string; id?: string }[];
+  claims: {
+    claim_id?: string;
+    hypercert_id: string;
+    id?: string;
+    display_size: number;
+  }[];
 };
 
 export const CreateOrUpdateRegistryForm = ({
@@ -113,6 +118,7 @@ const ClaimsField = ({
       {fields.map((item, index) => (
         <HStack key={item.id}>
           <Input {...register(`claims.${index}.hypercert_id`)} />
+          <Input {...register(`claims.${index}.display_size`)} />
           {item.claim_id ? (
             <DeleteClaimButton claimId={item.claim_id} />
           ) : (
@@ -126,7 +132,10 @@ const ClaimsField = ({
           )}
         </HStack>
       ))}
-      <Button type="button" onClick={() => append({ hypercert_id: "" })}>
+      <Button
+        type="button"
+        onClick={() => append({ hypercert_id: "", display_size: 1 })}
+      >
         + add another claim
       </Button>
     </VStack>

hooks/useFetchHyperboardContents.ts

@@ -11,6 +11,7 @@ import {
   DefaultSponsorMetadataEntity,
   RegistryEntity,
 } from "@/types/database-entities";
+import { sift } from "@/utils/sift";
 
 // interface EntryDisplayData {
 //   image: string;
@@ -40,16 +41,26 @@ export const useListRegistries = () => {
 const processRegistryForDisplay = async (
   registry: RegistryEntity & { claims: ClaimEntity[] },
   label: string | null,
+  totalOfAllDisplaySizes: number,
   client: HypercertClient,
 ) => {
   const claims = registry.claims;
   const fractionsResults = await Promise.all(
-    claims.map((claim) => {
-      return client.indexer.fractionsByClaim(claim.hypercert_id);
+    claims.map(async (claim) => {
+      const fractions = await client.indexer.fractionsByClaim(
+        claim.hypercert_id,
+      );
+      const displaySizeCoefficient =
+        claim.display_size / totalOfAllDisplaySizes;
+      return fractions.claimTokens.map((fraction) => ({
+        ...fraction,
+        unitsAdjustedForDisplaySize:
+          parseInt(fraction.units, 10) * displaySizeCoefficient,
+      }));
     }),
   );
 
-  const fractions = _.flatMap(fractionsResults, (x) => x.claimTokens);
+  const fractions = _.flatMap(fractionsResults, (x) => x);
   const ownerAddresses = _.uniq(fractions.map((x) => x.owner)) as string[];
 
   const claimDisplayDataResponse = await getEntriesDisplayData(ownerAddresses);
@@ -64,7 +75,10 @@ const processRegistryForDisplay = async (
       return {
         fractions: fractionsPerOwner,
         displayData: claimDisplayData[owner],
-        totalValue: _.sum(fractionsPerOwner.map((x) => parseInt(x.units, 10))),
+        totalValue: _.sumBy(
+          fractionsPerOwner,
+          (x) => x.unitsAdjustedForDisplaySize,
+        ),
       };
     })
     .value();
@@ -117,11 +131,21 @@ export const useFetchHyperboardContents = (hyperboardId: string) => {
         return null;
       }
 
+      const totalOfAllDisplaySizes = _.sumBy(
+        sift(
+          hyperboardData.hyperboard_registries
+            .map((registry) => registry.registries?.claims)
+            .flat(),
+        ),
+        (x) => x.display_size,
+      );
+
       const results = await Promise.all(
         hyperboardData.hyperboard_registries.map(async (registry) => {
           return await processRegistryForDisplay(
             registry.registries!,
             registry.label,
+            totalOfAllDisplaySizes,
             client,
           );
         }),

hooks/useFetchMyHyperboards.ts

@@ -13,7 +13,7 @@ export const useFetchMyHyperboards = () => {
       }
       return supabase
         .from("hyperboards")
-        .select("*, hyperboard_registries (*, registries (*))")
+        .select("*, hyperboard_registries!hyperboard_id (*, registries (*))")
         .eq("admin_id", address);
     },
     {

package.json

@@ -73,6 +73,6 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "prettier": "^3.0.3",
-    "snaplet": "^0.72.2"
+    "snaplet": "0.71"
   }
 }

supabase/migrations/20231122134241_remove_duplicate_foreign_key_constraints_hyperboard_registries.sql

@@ -0,0 +1,3 @@
+alter table hyperboard_registries
+    rename constraint hyperboard_registries_registry_id_fkey to hyperboard_registries_registries_id_fk;
+

supabase/migrations/20231122144855_add_rls_policy_for_updating_claim_display_size.sql

@@ -0,0 +1,12 @@
+create policy "Only allow for owner of registry"
+    on "public"."claims"
+    as permissive
+    for update
+    to public
+    using (((auth.jwt() ->> 'address'::text) IN (SELECT hyperboards.admin_id
+                                                 FROM hyperboards
+                                                          JOIN public.hyperboard_registries hr on hyperboards.id = hr.hyperboard_id
+                                                          JOIN public.claims c on hr.registry_id = c.registry_id
+                                                 WHERE (hr.registry_id = c.registry_id))));
+
+alter table "public"."claims" add column "display_size" bigint not null default '1'::bigint;

types/database.ts

@@ -79,6 +79,7 @@ export interface Database {
           admin_id: string
           chain_id: number
           created_at: string
+          display_size: number
           hypercert_id: string
           id: string
           owner_id: string
@@ -88,6 +89,7 @@ export interface Database {
           admin_id: string
           chain_id: number
           created_at?: string
+          display_size?: number
           hypercert_id: string
           id?: string
           owner_id: string
@@ -97,6 +99,7 @@ export interface Database {
           admin_id?: string
           chain_id?: number
           created_at?: string
+          display_size?: number
           hypercert_id?: string
           id?: string
           owner_id?: string