feat(flags): disable attestation and marketplace buttons

As we don't support all features of the hypercerts protocol on all
chains, we're introducing feature flags to programmatically disable
features based on the chain the user is connected to.

Based on the connected chain, the button for the creator feed,
evaluations and creating marketplace listing is disabled.

The Vercel flags SDK supports feature flags based on server side
rendereing. We pass the outcome of the flag to the client-side
components i.e. buttons.

Author: bitbeckers

Diff for: app/hypercerts/[hypercertId]/page.tsx

@@ -17,6 +17,11 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import {
+  creatorFeedFlag,
+  evaluationsFlag,
+  marketplaceListingsFlag,
+} from "@/flags/chain-actions-flag";
 
 type Props = {
   params: { hypercertId: string };
@@ -47,17 +52,32 @@ export default async function HypercertPage({ params, searchParams }: Props) {
   const { hypercertId } = params;
 
   const [hypercert] = await Promise.all([getHypercert(hypercertId)]);
+  const isCreatorFeedEnabledOnChain = await creatorFeedFlag();
+  const isEvaluationsEnabledOnChain = await evaluationsFlag();
+  const isMarketplaceListingsEnabledOnChain = await marketplaceListingsFlag();
 
   if (!hypercert) {
     return (
       <ErrorState message="Hypercert not found" hypercertId={hypercertId} />
     );
   }
 
+  const defaultAccordionItems = isMarketplaceListingsEnabledOnChain
+    ? ["item-3"]
+    : isEvaluationsEnabledOnChain
+      ? ["item-2"]
+      : isCreatorFeedEnabledOnChain
+        ? ["item-1"]
+        : [];
+
   return (
     <main className="flex flex-col p-8 md:px-24 md:pt-14 pb-24 space-y-4 flex-1">
       <HypercertDetails hypercertId={hypercertId} />
-      <Accordion type="multiple" defaultValue={["item-3"]} className="w-full">
+      <Accordion
+        type="multiple"
+        defaultValue={defaultAccordionItems}
+        className="w-full"
+      >
         <AccordionItem value="item-1">
           {/* creator feed */}
           <AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
@@ -68,6 +88,7 @@ export default async function HypercertPage({ params, searchParams }: Props) {
               <CreatorFeedButton
                 hypercertId={hypercertId}
                 creatorAddress={hypercert.creator_address!}
+                disabledForChain={!isCreatorFeedEnabledOnChain}
               />
             </div>
             <CreatorFeeds hypercertId={hypercertId} />
@@ -86,6 +107,7 @@ export default async function HypercertPage({ params, searchParams }: Props) {
             <HypercertEvaluations
               hypercertId={hypercertId}
               searchParams={searchParams}
+              disabledForChain={!isEvaluationsEnabledOnChain}
             />
           </AccordionContent>
         </AccordionItem>
@@ -99,7 +121,10 @@ export default async function HypercertPage({ params, searchParams }: Props) {
             <div className="flex justify-end mb-4">
               <div className="flex gap-2">
                 <CurrencyButtons />
-                <ListForSaleButton hypercert={hypercert} />
+                <ListForSaleButton
+                  hypercert={hypercert}
+                  disabledForChain={!isMarketplaceListingsEnabledOnChain}
+                />
               </div>
             </div>
             <HypercertListings

Diff for: components/creator-feed/creator-feed-button.tsx

@@ -17,14 +17,33 @@ import { getAddress } from "viem";
 export default function CreatorFeedButton({
   hypercertId,
   creatorAddress,
+  disabledForChain = false,
 }: {
   hypercertId: string;
   creatorAddress: string;
+  disabledForChain?: boolean;
 }) {
   const { isConnected, address } = useAccount();
 
   const { chainId } = useAccount();
 
+  if (disabledForChain) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <Button disabled={true}>Submit Addtional Information</Button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            This feature is disabled on the connected chain.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
   const getTooltipMessage = () => {
     if (!isConnected) {
       return "Connect your wallet to access this feature.";

Diff for: components/evaluations/hypercert-evaluations.tsx

@@ -26,9 +26,11 @@ const getAttestationData = cache(async (params: GetAttestationsParams) => {
 export default async function HypercertEvaluations({
   hypercertId,
   searchParams,
+  disabledForChain = false,
 }: {
   hypercertId: string;
   searchParams: Record<string, string>;
+  disabledForChain?: boolean;
 }) {
   const currentPage = Number(searchParams?.evaluations) || 1;
   const offset = Math.max(0, LISTINGS_PER_PAGE * (currentPage - 1));

Diff for: components/hypercert/evaluate-button.tsx

@@ -17,8 +17,10 @@ import { useAccount } from "wagmi";
 
 export default function EvaluateButton({
   hypercertId,
+  disabledForChain = false,
 }: {
   hypercertId: string;
+  disabledForChain?: boolean;
 }) {
   const { isConnected, address } = useAccount();
   const [evaluator, setEvaluator] = useState<TrustedAttestor>();
@@ -38,6 +40,23 @@ export default function EvaluateButton({
     }
   }, [address]);
 
+  if (disabledForChain) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <Button disabled={true}>Evaluate</Button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            This feature is disabled on the connected chain.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
   const getTooltipMessage = () => {
     if (!isConnected) {
       return "Connect your wallet to access this feature.";

Diff for: components/marketplace/list-for-sale-button.tsx

@@ -19,7 +19,13 @@ import { getAddress } from "viem";
 
 import { isChainIdSupported } from "@/lib/isChainIdSupported";
 
-export function ListForSaleButton({ hypercert }: { hypercert: HypercertFull }) {
+export function ListForSaleButton({
+  hypercert,
+  disabledForChain = false,
+}: {
+  hypercert: HypercertFull;
+  disabledForChain?: boolean;
+}) {
   const { isConnected, address } = useAccount();
   const { client } = useHypercertClient();
 
@@ -54,6 +60,23 @@ export function ListForSaleButton({ hypercert }: { hypercert: HypercertFull }) {
 
   const [isOpen, setIsOpen] = useState(false);
 
+  if (disabledForChain) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <Button disabled>List for sale</Button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            This feature is disabled on the connected chain.
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
   const fractions = hypercert.fractions?.data || [];
   const fractionsOwnedByUser = fractions.filter(
     (fraction) => fraction.owner_address === address,

Diff for: flags/chain-actions-flag.ts

@@ -0,0 +1,71 @@
+import { flag, dedupe } from "@vercel/flags/next";
+import type { ReadonlyRequestCookies } from "@vercel/flags";
+
+interface Entities {
+  user?: { chainId: number | undefined };
+}
+
+const creatorFeedDisabledChains = [314, 314159];
+const evaluationsDisabledChains = [314, 314159];
+const marketplaceListingsDisabledChains = [314, 314159];
+
+const identify = dedupe(
+  ({ cookies }: { cookies: ReadonlyRequestCookies }): Entities => {
+    const wagmiStore = cookies.get("wagmi.store")?.value;
+
+    const chainId = getChainIdFromWagmiCookie(wagmiStore);
+
+    return { user: { chainId } };
+  },
+);
+
+const getChainIdFromWagmiCookie = (
+  cookieValue: string | undefined,
+): number | undefined => {
+  if (!cookieValue) {
+    console.debug("No wagmiStore cookie found");
+    return undefined;
+  }
+
+  try {
+    const parsedCookie = JSON.parse(cookieValue);
+    const chainId = parsedCookie?.state?.chainId;
+
+    if (typeof chainId !== "number") {
+      console.debug("Invalid chainId format in wagmiStore cookie");
+      return undefined;
+    }
+
+    return chainId;
+  } catch (error) {
+    console.error("Error parsing wagmiStore cookie:", error);
+    return undefined;
+  }
+};
+
+export const creatorFeedFlag = flag<boolean>({
+  key: "chain-actions-creator-feed",
+  identify,
+  defaultValue: true,
+  decide({ entities }) {
+    return !creatorFeedDisabledChains.includes(entities?.user?.chainId);
+  },
+});
+
+export const evaluationsFlag = flag<boolean>({
+  key: "chain-actions-evaluations",
+  identify,
+  defaultValue: true,
+  decide({ entities }) {
+    return !evaluationsDisabledChains.includes(entities?.user?.chainId);
+  },
+});
+
+export const marketplaceListingsFlag = flag<boolean>({
+  key: "chain-actions-marketplace-listings",
+  identify,
+  defaultValue: true,
+  decide({ entities }) {
+    return !marketplaceListingsDisabledChains.includes(entities?.user?.chainId);
+  },
+});

Diff for: package.json

@@ -47,8 +47,9 @@
     "@tanstack/react-table": "^8.17.3",
     "@types/lodash": "^4.17.5",
     "@types/validator": "^13.12.2",
-    "@wagmi/core": "^2.16.3",
     "@vercel/analytics": "^1.4.1",
+    "@vercel/flags": "^3.1.0",
+    "@wagmi/core": "^2.16.3",
     "@yaireo/tagify": "^4.21.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",