Feature: ENFT Improvements (#206)

* added existentialNFT property into json config

* build enft with config

* depoy fn dependencies

* builder widgetPreview default value for existentialNFT

* existentialNFT is optional

* remove console.log

* todo for watchAsset

* input instead of infer

* disable paymentoptions changes if enft is deployed

* change warning text

* better warnings

* fix types

* fix WidgetPreview type

* existentialNFT optional

* recaptcha onExpired

* Fix up tests

* update changeset

---------

Co-authored-by: elvijsTDL <[email protected]>
Co-authored-by: Kaspar Kallas <[email protected]>

apps/widget-builder/src/components/config-editor/ConfigEditor.tsx

@@ -14,6 +14,7 @@ import {
   Typography,
 } from "@mui/material";
 import {
+  existentialNFTSchema,
   paymentDetailsSchema,
   personalDataSchema,
   productDetailsSchema,
@@ -36,6 +37,7 @@ const schema = z.object({
   productDetails: productDetailsSchema,
   paymentDetails: paymentDetailsSchema,
   personalData: personalDataSchema,
+  existentialNFT: existentialNFTSchema,
   type: z.enum(["dialog", "drawer", "full-screen", "page"]),
 });
 
@@ -106,6 +108,7 @@ const ConfigEditor: FC<ConfigEditorProps> = ({ value, setValue }) => {
             setValue("type", parseResult.data.type);
             setValue("paymentDetails", parseResult.data.paymentDetails);
             setValue("personalData", parseResult.data.personalData);
+            setValue("existentialNFT", parseResult.data.existentialNFT);
             setSaved(true);
             setTimeout(() => {
               setSaved(false);

apps/widget-builder/src/components/nft-deployment-modal/NFTDeploymentDialog.tsx

@@ -7,32 +7,29 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import { ChainId } from "@superfluid-finance/widget";
+import { ExistentialNFT } from "@superfluid-finance/widget";
 import Image from "next/image";
 import { FC, useCallback, useMemo } from "react";
-import { Address } from "viem";
 
 import Link from "../../Link";
 
 type NFTDeploymentDialogProps = {
-  cloneAddresses: Record<ChainId, Address | null>[];
+  cloneAddresses?: ExistentialNFT["deployments"];
   open: boolean;
-  onClose: () => void;
+  onClose?: () => void;
 };
 
 const NFTDeploymentDialog: FC<NFTDeploymentDialogProps> = ({
-  cloneAddresses,
+  cloneAddresses = {},
   open,
   onClose,
 }) => {
   const exportAddresses = useCallback(() => {
     const csv = "data:text/csv;charset=utf-8,";
     const headers = "chainId,address\n";
-    const rows = cloneAddresses
+    const rows = Object.entries(cloneAddresses)
       .map((row) => {
-        const result = Object.entries(row);
-
-        return result.join(",");
+        return row.join(",");
       })
       .join("\n");
 
@@ -50,7 +47,8 @@ const NFTDeploymentDialog: FC<NFTDeploymentDialogProps> = ({
   const [successfulDeployments, failedDeployments] = useMemo(() => {
     const succesfulDeployments =
       Object.values(cloneAddresses).filter(Boolean).length;
-    const failedDeployments = cloneAddresses.length - succesfulDeployments;
+    const failedDeployments =
+      Object.values(cloneAddresses).length - succesfulDeployments;
 
     return [succesfulDeployments, failedDeployments];
   }, [cloneAddresses]);

apps/widget-builder/src/components/payment-editor/PaymentEditor.tsx

@@ -2,6 +2,8 @@ import AddIcon from "@mui/icons-material/Add";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import CloseIcon from "@mui/icons-material/Close";
 import {
+  Alert,
+  AlertTitle,
   AppBar,
   Box,
   Button,
@@ -19,7 +21,8 @@ import {
   Zoom,
 } from "@mui/material";
 import { PaymentOption } from "@superfluid-finance/widget";
-import { FC, useCallback, useEffect, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 
 import useDemoMode from "../../hooks/useDemoMode";
@@ -36,7 +39,10 @@ const ProductEditor: FC = () => {
     name: "paymentDetails.paymentOptions", // unique name for your Field Array
   });
 
-  const [paymentOptions] = watch(["paymentDetails.paymentOptions"]);
+  const [paymentOptions, existentialNFT] = watch([
+    "paymentDetails.paymentOptions",
+    "existentialNFT",
+  ]);
 
   const [dialogMode, setDialogMode] = useState<"add" | "clone" | "edit">();
   const [targetedPaymentOption, setTargetedPaymentOption] = useState<{
@@ -60,6 +66,11 @@ const ProductEditor: FC = () => {
     setDemoPaymentDetails();
   }, []);
 
+  const isENFTDeployed = useMemo(
+    () => !isEmpty(existentialNFT?.deployments),
+    [existentialNFT],
+  );
+
   return (
     <>
       <Stack direction="column" gap={2}>
@@ -71,6 +82,17 @@ const ProductEditor: FC = () => {
             Enter your preferred payment options to start receiving ongoing
             real-time payments powered by the Superfluid Protocol.
           </Typography>
+
+          {isENFTDeployed && (
+            <Alert
+              severity="warning"
+              sx={{ backgroundColor: "warning.light", mt: 2 }}
+            >
+              <AlertTitle>Warning</AlertTitle>
+              You deployed a Gating NFT contract so you can no longer add new
+              networks in the payment options
+            </Alert>
+          )}
         </Box>
         <Stack direction="column">
           <Stack
@@ -99,6 +121,7 @@ const ProductEditor: FC = () => {
                 variant="contained"
                 size="medium"
                 color="primary"
+                disabled={isENFTDeployed}
                 onClick={() => {
                   setDialogMode("add");
                 }}
@@ -135,6 +158,7 @@ const ProductEditor: FC = () => {
                           receiverAddress={receiverAddress}
                           superToken={superToken}
                           chainId={chainId}
+                          actionsDisabled={isENFTDeployed}
                           index={i}
                           clone={(index) => {
                             setTargetedPaymentOption({

apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx

@@ -62,6 +62,7 @@ type PaymentOptionViewProps = {
   flowRate: FlowRate | undefined;
   receiverAddress: `0x${string}`;
   chainId: ChainId;
+  actionsDisabled?: boolean;
   index: number;
   clone: (index: number) => void;
   edit: (index: number) => void;
@@ -74,6 +75,7 @@ const PaymentOptionView: FC<PaymentOptionViewProps> = ({
   flowRate,
   receiverAddress: receiverAddress_,
   chainId,
+  actionsDisabled,
   index,
   clone,
   edit,
@@ -191,6 +193,7 @@ const PaymentOptionView: FC<PaymentOptionViewProps> = ({
       >
         <Tooltip title="Edit payment option" arrow>
           <IconButton
+            disabled={actionsDisabled}
             data-testid="edit-payment-option-button"
             onClick={() => edit(index)}
             sx={{
@@ -205,6 +208,7 @@ const PaymentOptionView: FC<PaymentOptionViewProps> = ({
 
         <Tooltip title="Copy payment option" arrow>
           <IconButton
+            disabled={actionsDisabled}
             data-testid="clone-payment-option-button"
             onClick={() => clone(index)}
             sx={{
@@ -219,6 +223,7 @@ const PaymentOptionView: FC<PaymentOptionViewProps> = ({
 
         <Tooltip title="Delete payment option" arrow>
           <IconButton
+            disabled={actionsDisabled}
             data-testid="delete-payment-option-button"
             onClick={() => remove(index)}
             sx={{

apps/widget-builder/src/components/product-editor/ProductEditor.tsx

@@ -1,12 +1,5 @@
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import {
-  Box,
-  Fab,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@mui/material";
+import { Box, Fab, Stack, TextField, Tooltip, Typography } from "@mui/material";
 import {
   PersonalDataField,
   PersonalDataFieldType,