Merge pull request #464 from hypercerts-org/dev

Push to PRD

Author: bitbeckers

app/hypercerts/new-transferable/page.tsx

@@ -5,6 +5,7 @@ import {
 import { getBlueprintById } from "@/blueprints/getBlueprints";
 import { TransferRestrictions } from "@hypercerts-org/sdk";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { InfoSection } from "@/components/global/sections";
 
 export default async function NewHypercertPage({
   searchParams,
@@ -18,7 +19,13 @@ export default async function NewHypercertPage({
     const fetchedBlueprint = await getBlueprintById(parsedId);
 
     if (!fetchedBlueprint) {
-      return <div>Blueprint not found</div>;
+      return (
+        <main className="flex flex-col p-8 md:px-16 pt-8 pb-24 space-y-4 flex-1 container max-w-screen-lg">
+          <InfoSection>
+            The blueprint you are trying to use does not exist.
+          </InfoSection>
+        </main>
+      );
     }
 
     formValues = fetchedBlueprint.form_values as HypercertFormValues;

app/hypercerts/new/page.tsx

@@ -3,6 +3,7 @@ import {
   HypercertMintingForm,
 } from "@/components/hypercert/hypercert-minting-form";
 import { getBlueprintById } from "@/blueprints/getBlueprints";
+import { InfoSection } from "@/components/global/sections";
 
 export default async function NewHypercertPage({
   searchParams,
@@ -18,10 +19,28 @@ export default async function NewHypercertPage({
     const fetchedBlueprint = await getBlueprintById(parsedId);
 
     if (!fetchedBlueprint) {
-      return <div>Blueprint not found</div>;
+      return (
+        <main className="flex flex-col p-8 md:px-16 pt-8 pb-24 space-y-4 flex-1 container max-w-screen-lg">
+          <InfoSection>
+            The blueprint you are trying to use does not exist.
+          </InfoSection>
+        </main>
+      );
     }
 
-    formValues = fetchedBlueprint.form_values as HypercertFormValues;
+    formValues = {
+      ...fetchedBlueprint.form_values,
+      allowlistEntries: fetchedBlueprint.form_values.allowlistEntries?.map(
+        (entry) => ({
+          ...entry,
+          units: BigInt(entry.units),
+        }),
+      ),
+      projectDates: {
+        from: new Date(fetchedBlueprint.form_values.projectDates.from),
+        to: new Date(fetchedBlueprint.form_values.projectDates.to),
+      },
+    } as HypercertFormValues;
     blueprintChainId = fetchedBlueprint.admins[0].chain_id
       ? parseInt(fetchedBlueprint.admins[0].chain_id)
       : undefined;

components/hypercert/hypercert-minting-form/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import useIsWriteable from "@/hooks/useIsWriteable";
 import { useMintHypercert } from "@/hypercerts/hooks/useMintHypercert";
 import { useLocalStorage } from "react-use";
-import { type FieldErrors, useForm, useWatch } from "react-hook-form";
+import { type FieldErrors, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import {
@@ -178,17 +178,16 @@ export function HypercertMintingForm({
 }) {
   const [currentStep, setCurrentStep] = useState(1);
   const [language, setLanguage] = useState("en-US");
-  const {
-    writeable,
-    errors: writeableErrors,
-    resetErrors: resetWriteableErrors,
-  } = useIsWriteable();
+  const { errors: writeableErrors } = useIsWriteable();
 
   const { mutateAsync: mintHypercert } = useMintHypercert();
   const { mutateAsync: createBlueprint } = useCreateBlueprint();
-  const [value, setValue] = useLocalStorage<HypercertFormValues>(
-    "user-hypercert-create-form-data",
-    formDefaultValues,
+  const localStorageKey = blueprintId
+    ? `user-hypercert-blueprint-${blueprintId}-form-data`
+    : "user-hypercert-create-form-data";
+  const [values, setValues] = useLocalStorage<HypercertFormValues>(
+    localStorageKey,
+    presetValues || formDefaultValues,
     {
       raw: false,
       serializer: JSON.stringify,
@@ -202,37 +201,24 @@ export function HypercertMintingForm({
         blueprint_minter_address: true,
       });
 
-  const defaultValues = presetValues
-    ? {
-        ...presetValues,
-        allowlistEntries: presetValues.allowlistEntries?.map((entry) => ({
-          ...entry,
-          units: BigInt(entry.units),
-        })),
-        projectDates: {
-          to: new Date(presetValues.projectDates.to),
-          from: new Date(presetValues.projectDates.from),
-        },
-      }
-    : value;
-
   const form = useForm<HypercertFormValues>({
     resolver: zodResolver(formSchemaUsed),
-    defaultValues,
+    defaultValues: values,
     mode: "onBlur",
   });
 
-  const watchedValues = useWatch({
-    control: form.control,
-    name: ["title", "banner", "logo", "tags", "projectDates"],
-  });
+  const title = form.watch("title");
+  const banner = form.watch("banner");
+  const logo = form.watch("logo");
+  const tags = form.watch("tags");
+  const projectDates = form.watch("projectDates");
 
   const cardPreviewData = {
-    title: watchedValues[0] ?? formDefaultValues.title,
-    banner: watchedValues[1] ?? formDefaultValues.banner,
-    logo: watchedValues[2] ?? formDefaultValues.logo,
-    tags: watchedValues[3] ?? formDefaultValues.tags,
-    projectDates: watchedValues[4] ?? formDefaultValues.projectDates,
+    title: title ?? formDefaultValues.title,
+    banner: banner ?? formDefaultValues.banner,
+    logo: logo ?? formDefaultValues.logo,
+    tags: tags ?? formDefaultValues.tags,
+    projectDates: projectDates ?? formDefaultValues.projectDates,
   };
   const cardRef = useRef<HTMLDivElement>(null);
 
@@ -241,12 +227,11 @@ export function HypercertMintingForm({
   }, []);
 
   const onBlur = () => {
-    console.log("blur");
-    setValue(form.getValues());
+    setValues(form.getValues());
   };
 
   const onReset = () => {
-    setValue(formDefaultValues);
+    setValues(formDefaultValues);
     form.reset(formDefaultValues);
     setCurrentStep(1);
   };

components/hypercert/hypercert-window.tsx

@@ -3,6 +3,7 @@ import { SUPPORTED_CHAINS, SupportedChainIdType } from "@/configs/constants";
 import { HypercertListFragment } from "@/hypercerts/fragments/hypercert-list.fragment";
 import { getEvaluationStatus } from "@/hypercerts/getEvaluationStatus";
 import { calculateBigIntPercentage } from "@/lib/calculateBigIntPercentage";
+import { formatPercentageToFirstNonZeroDigit } from "@/lib/formatPercentage";
 import { getCurrencyByAddress } from "@/marketplace/utils";
 import Image from "next/image";
 import Link from "next/link";
@@ -95,7 +96,12 @@ const HypercertWindow = memo(
             <section className="flex text-xs justify-between">
               <section>
                 <h6 className="opacity-70">for sale</h6>
-                <p> {percentAvailable ? `${percentAvailable}%` : "--"}</p>
+                <p>
+                  {" "}
+                  {percentAvailable
+                    ? `${formatPercentageToFirstNonZeroDigit(percentAvailable)}%`
+                    : "--"}
+                </p>
               </section>
               <section>
                 <h6 className="text-end opacity-70">lowest per %</h6>

components/marketplace/list-dialog.tsx

@@ -265,10 +265,16 @@ function ListDialogInner({
         </DialogTitle>
       </DialogHeader>
 
-      <DialogDescription>
-        List your hypercert fraction for sale, allowing buyers to directly
-        purchase all or part of it. Adjust settings to retain portions for
-        yourself or set a minimum transaction amount as needed.
+      <DialogDescription className="flex flex-col gap-2">
+        <p>
+          List your hypercert fraction for sale, allowing buyers to directly
+          purchase all or part of it. Adjust settings to retain portions for
+          yourself or set a minimum transaction amount as needed.
+        </p>
+
+        <p className="text-sm text-slate-500">
+          Any sale will include a 1% protocol fee.
+        </p>
       </DialogDescription>
 
       {fractionsOwnedByUser.length > 1 && (

hooks/use-hypercert-client.ts

@@ -3,12 +3,17 @@ import { HypercertClient } from "@hypercerts-org/sdk";
 import { useEffect, useState } from "react";
 import { useAccount, useWalletClient } from "wagmi";
 import { ENVIRONMENT, SUPPORTED_CHAINS } from "@/configs/constants";
+import { EvmClientFactory } from "@/lib/evmClient";
 
 export const useHypercertClient = () => {
   const { data: walletClient } = useWalletClient();
   const { isConnected } = useAccount();
   const [client, setClient] = useState<HypercertClient>();
 
+  const publicClient = walletClient?.chain.id
+    ? EvmClientFactory.createClient(walletClient.chain.id)
+    : undefined;
+
   useEffect(() => {
     if (!walletClient || !isConnected) {
       return;
@@ -22,6 +27,8 @@ export const useHypercertClient = () => {
         environment: ENVIRONMENT,
         // @ts-ignore - wagmi and viem have different typing
         walletClient,
+        // @ts-ignore - wagmi and viem have different typing
+        publicClient,
       }),
     );
   }, [walletClient, isConnected]);

hypercerts/getAllHypercerts.ts

@@ -192,8 +192,8 @@ export async function getAllHypercerts({
     [],
   );
 
-  const difference = res.hypercerts?.count
-    ? res.hypercerts?.count - data.length
+  const difference = res.hypercerts?.data?.length
+    ? res.hypercerts?.data?.length - data.length
     : 0;
   const totalCount = res.hypercerts?.count
     ? res.hypercerts?.count - difference

lib/formatPercentage.ts

@@ -0,0 +1,46 @@
+export const formatPercentageToFirstNonZeroDigit = (
+  percentage: number,
+): string => {
+  if (percentage === 0) return "0";
+
+  if (percentage < 1) {
+    const NumberFormat = new Intl.NumberFormat("en-US", {
+      style: "decimal",
+      notation: "standard",
+      maximumSignificantDigits: 21,
+    });
+
+    const result = NumberFormat.format(percentage);
+
+    // Match the first 2 non-zero digits after the decimal point
+    const match = result.match(/\d*\.\d*?[1-9](?:\d*[1-9]|\d)?/);
+
+    // If no decimal or no non-zero digits after decimal, return rounded integer
+    if (!match) {
+      return Math.round(percentage).toString();
+    }
+
+    // Check if we found 1 or 2 non-zero digits after the decimal point
+    // Skip leading zeros after decimal points
+    const numbersAfterDecimal = match[0].split(".")[1];
+    const isSingleNonZeroDigit =
+      numbersAfterDecimal.replace(/^0+/, "").length === 1;
+
+    // If we have 1 significant digit, return the match
+    if (isSingleNonZeroDigit) {
+      return match[0];
+    }
+
+    // If we have 2 significant digits, get the number of digits after the decimal point
+    const fractionDigits = numbersAfterDecimal.length;
+    return new Intl.NumberFormat("en-US", {
+      style: "decimal",
+      notation: "standard",
+      // maximumSignificantDigits: decimalDigits - 1,
+      maximumFractionDigits: fractionDigits - 1,
+    }).format(percentage);
+  }
+
+  // Round to 1 digit, strip trailing zeros
+  return percentage.toFixed(1).replace(/\.?0+$/, "");
+};

test/lib/formatPercentage.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { formatPercentageToFirstNonZeroDigit } from "@/lib/formatPercentage";
+
+describe("formatPercentage", () => {
+  it("should return the original integer if its more than 1", () => {
+    expect(formatPercentageToFirstNonZeroDigit(97)).to.eq("97");
+  });
+
+  it("should round to 1 decimal place if the integer is more than 1", () => {
+    expect(formatPercentageToFirstNonZeroDigit(97.5)).to.eq("97.5");
+    expect(formatPercentageToFirstNonZeroDigit(97.001)).to.eq("97");
+    expect(formatPercentageToFirstNonZeroDigit(97.01)).to.eq("97");
+    expect(formatPercentageToFirstNonZeroDigit(1.008)).to.eq("1");
+    expect(formatPercentageToFirstNonZeroDigit(1.99)).to.eq("2");
+    expect(formatPercentageToFirstNonZeroDigit(97.0000000000081)).to.eq("97");
+    expect(formatPercentageToFirstNonZeroDigit(97.0000000000081)).to.eq("97");
+  });
+
+  it("should round to the first non-zero digit", () => {
+    expect(formatPercentageToFirstNonZeroDigit(0.008)).to.eq("0.008");
+    expect(formatPercentageToFirstNonZeroDigit(0.0081)).to.eq("0.008");
+    expect(formatPercentageToFirstNonZeroDigit(0.000000000008)).to.eq(
+      "0.000000000008",
+    );
+  });
+
+  it("should take the second non-zero digit to round the first non-zero digit", () => {
+    expect(formatPercentageToFirstNonZeroDigit(0.99)).to.eq("1");
+    expect(formatPercentageToFirstNonZeroDigit(0.109)).to.eq("0.11");
+    expect(formatPercentageToFirstNonZeroDigit(0.0000000000081)).to.eq(
+      "0.000000000008",
+    );
+    expect(formatPercentageToFirstNonZeroDigit(0.0000000000085)).to.eq(
+      "0.000000000009",
+    );
+  });
+});