Merge pull request #398 from hypercerts-org/feat/feature_flags

Introduce feature flags on view page

Author: bitbeckers

.github/workflows/discord-bug-report.yml

@@ -0,0 +1,19 @@
+name: Notify Discord on Bug Label
+
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  notify_bug:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send Bug Notification to Discord
+        if: github.event.label.name == 'bug'
+        run: |
+          curl -H "Content-Type: application/json" \
+            -X POST \
+            -d "{
+              \"content\": \"🐞 **Bug Report Created!**\n**Title:** ${{ github.event.issue.title }}\n**Link:** ${{ github.event.issue.html_url }}\"
+            }" \
+            ${{ secrets.DISCORD_WEBHOOK_URL }}

app/hypercerts/[hypercertId]/page.tsx

@@ -2,21 +2,26 @@ import { Metadata, ResolvingMetadata } from "next";
 
 import { getHypercert } from "@/hypercerts/getHypercert";
 
-import HypercertDetails from "@/components/hypercert/hypercert-details";
-import EvaluateButton from "@/components/hypercert/evaluate-button";
+import CreatorFeedButton from "@/components/creator-feed/creator-feed-button";
+import CreatorFeeds from "@/components/creator-feed/creator-feeds";
 import { CurrencyButtons } from "@/components/currency-buttons";
-import { ListForSaleButton } from "@/components/marketplace/list-for-sale-button";
+import HypercertEvaluations from "@/components/evaluations/hypercert-evaluations";
 import ErrorState from "@/components/global/error-state";
+import EvaluateButton from "@/components/hypercert/evaluate-button";
+import HypercertDetails from "@/components/hypercert/hypercert-details";
 import HypercertListings from "@/components/marketplace/hypercert-listings";
-import HypercertEvaluations from "@/components/evaluations/hypercert-evaluations";
-import CreatorFeedButton from "@/components/creator-feed/creator-feed-button";
-import CreatorFeeds from "@/components/creator-feed/creator-feeds";
+import { ListForSaleButton } from "@/components/marketplace/list-for-sale-button";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import {
+  creatorFeedFlag,
+  evaluationsFlag,
+  marketplaceListingsFlag,
+} from "@/flags/chain-actions-flag";
 
 type Props = {
   params: { hypercertId: string };
@@ -46,19 +51,35 @@ export async function generateMetadata(
 export default async function HypercertPage({ params, searchParams }: Props) {
   const { hypercertId } = params;
 
-  const [hypercert] = await Promise.all([getHypercert(hypercertId)]);
+  const hypercert = await 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 getDefaultAccordionItems = () => {
+    if (isMarketplaceListingsEnabledOnChain) return ["marketplace-listings"];
+    if (isEvaluationsEnabledOnChain) return ["evaluations"];
+    if (isCreatorFeedEnabledOnChain) return ["creator-feed"];
+    return [];
+  };
+
+  const defaultAccordionItems = getDefaultAccordionItems();
+
   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">
-        <AccordionItem value="item-1">
+      <Accordion
+        type="multiple"
+        defaultValue={defaultAccordionItems}
+        className="w-full"
+      >
+        <AccordionItem value="creator-feed">
           {/* creator feed */}
           <AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
             CREATOR&apos;S FEED
@@ -68,14 +89,15 @@ export default async function HypercertPage({ params, searchParams }: Props) {
               <CreatorFeedButton
                 hypercertId={hypercertId}
                 creatorAddress={hypercert.creator_address!}
+                disabledForChain={!isCreatorFeedEnabledOnChain}
               />
             </div>
             <CreatorFeeds hypercertId={hypercertId} />
           </AccordionContent>
         </AccordionItem>
 
         {/* evaluations */}
-        <AccordionItem value="item-2">
+        <AccordionItem value="evaluations">
           <AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
             Evaluations
           </AccordionTrigger>
@@ -86,20 +108,24 @@ export default async function HypercertPage({ params, searchParams }: Props) {
             <HypercertEvaluations
               hypercertId={hypercertId}
               searchParams={searchParams}
+              disabledForChain={!isEvaluationsEnabledOnChain}
             />
           </AccordionContent>
         </AccordionItem>
 
         {/* marketplace */}
-        <AccordionItem value="item-3">
+        <AccordionItem value="marketplace-listings">
           <AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
             Marketplace
           </AccordionTrigger>
           <AccordionContent>
             <div className="flex justify-end mb-4">
               <div className="flex gap-2">
                 <CurrencyButtons />
-                <ListForSaleButton hypercert={hypercert} />
+                <ListForSaleButton
+                  hypercert={hypercert}
+                  disabledForChain={!isMarketplaceListingsEnabledOnChain}
+                />
               </div>
             </div>
             <HypercertListings

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.";

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));

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.";

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,

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);
+  },
+});

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",