feat(creator): add transfer restrictions label to hypercert component

- Introduced TransferRestrictionsLabel component to display transfer
restrictions for hypercerts.
- Updated Creator component to include the new label, enhancing the
information presented to users.

Author: Jipperism

components/hypercert/creator.tsx

@@ -3,11 +3,12 @@ import { Cuboid } from "lucide-react";
 import { SUPPORTED_CHAINS, SupportedChainIdType } from "@/configs/constants";
 import CopyableHypercertId from "@/components/copyable-hypercert-id";
 import { HypercertState } from "@/hypercerts/fragments/hypercert-state.fragment";
+import TransferRestrictionsLabel from "./transfer-restrictions-label";
 
 export default function Creator({ hypercert }: { hypercert: HypercertState }) {
   if (!hypercert) return null;
   return (
-    <div className="flex flex-wrap items-center space-x-1 text-sm text-slate-600 font-medium">
+    <div className="flex flex-wrap items-center space-x-1 text-sm text-slate-600 font-medium space-y-1">
       {hypercert.hypercert_id && (
         <CopyableHypercertId id={hypercert.hypercert_id} />
       )}
@@ -17,6 +18,12 @@ export default function Creator({ hypercert }: { hypercert: HypercertState }) {
           <EthAddress address={hypercert.creator_address} showEnsName />
         </div>
       )}
+      <div className="flex space-x-1 items-center">
+        <TransferRestrictionsLabel
+          hypercertId={hypercert.hypercert_id || ""}
+          showSeparator
+        />
+      </div>
       {hypercert.contract?.chain_id && (
         <div className="flex space-x-2 items-center">
           <span className="text-slate-400">•</span>

components/hypercert/transfer-restrictions-label.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  parseClaimOrFractionId,
+  TransferRestrictions,
+} from "@hypercerts-org/sdk";
+import { getAddress } from "viem";
+import { useReadContract } from "wagmi";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useState } from "react";
+
+export default function TransferRestrictionsLabel({
+  hypercertId,
+  showSeparator = false,
+}: {
+  hypercertId: string;
+  showSeparator?: boolean;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { contractAddress, id } = parseClaimOrFractionId(hypercertId);
+  const { data: transferRestrictions } = useReadContract({
+    abi: [
+      {
+        inputs: [{ internalType: "uint256", name: "tokenID", type: "uint256" }],
+        name: "readTransferRestriction",
+        outputs: [
+          {
+            internalType: "string",
+            name: "",
+            type: "string",
+          },
+        ],
+        stateMutability: "view",
+        type: "function",
+      },
+    ],
+    address: getAddress(contractAddress || ""),
+    functionName: "readTransferRestriction",
+    args: [id],
+    query: {
+      enabled: !!contractAddress && !!id,
+      select: (data) => {
+        if (data === "AllowAll") {
+          return TransferRestrictions.AllowAll;
+        } else if (data === "DisallowAll") {
+          return TransferRestrictions.DisallowAll;
+        } else if (data === "FromCreatorOnly") {
+          return TransferRestrictions.FromCreatorOnly;
+        }
+      },
+    },
+  });
+  if (transferRestrictions === undefined) return null;
+  return (
+    <>
+      {showSeparator && <span className="text-slate-400">•</span>}
+      <div className="flex items-center gap-2 content-center px-1 py-0.5 bg-slate-100 rounded-md w-max text-sm">
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
+          <PopoverTrigger asChild>
+            <span
+              className="cursor-help"
+              onMouseEnter={() => setIsOpen(true)}
+              onMouseLeave={() => setIsOpen(false)}
+            >
+              {getTransferRestrictionsText(transferRestrictions)}
+            </span>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 p-3" side="top">
+            <p className="text-sm text-slate-700">
+              {getTransferRestrictionsLabel(transferRestrictions)}
+            </p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  );
+}
+
+export const getTransferRestrictionsText = (
+  transferRestrictions: TransferRestrictions,
+) => {
+  switch (transferRestrictions) {
+    case TransferRestrictions.AllowAll:
+      return "Transferable";
+    case TransferRestrictions.DisallowAll:
+      return "Not transferable";
+    case TransferRestrictions.FromCreatorOnly:
+      return "Transferable-once";
+  }
+};
+
+export const getTransferRestrictionsLabel = (
+  transferRestrictions: TransferRestrictions,
+) => {
+  switch (transferRestrictions) {
+    case TransferRestrictions.AllowAll:
+      return "Fractions can be transferred without limitations.";
+    case TransferRestrictions.DisallowAll:
+      return "Fractions can not be transferred";
+    case TransferRestrictions.FromCreatorOnly:
+      return "Fractions can be transferred once from the creator to another user.";
+  }
+};