@thenamespace/ens-components 0.12.0 → 0.14.0

package/dist/index.js

@@ -13335,6 +13335,7 @@ function RegistrationStep({
   onDurationChange,
   onUseAsPrimaryChange,
   onCompleteProfile,
+  onRecordsChange,
   mintPrice = 0,
   isFetchingPrice = false,
   expiryYears = 1,
@@ -13346,10 +13347,58 @@ function RegistrationStep({
   const [ownerAddress, setOwnerAddress] = useState(owner);
   const [isOwnerExpanded, setIsOwnerExpanded] = useState(true);
   const [isDurationExpanded, setIsDurationExpanded] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [records, setRecords] = useState({
+    addresses: [],
+    texts: []
+  });
+  const [initialRecords, setInitialRecords] = useState({
+    addresses: [],
+    texts: []
+  });
   const costBreakdownRef = useRef(null);
+  const eth_address = getSupportedAddressByName("eth");
+  const celo_address = getSupportedAddressByName("celo");
   useEffect(() => {
     setOwnerAddress(owner);
   }, [owner]);
+  useEffect(() => {
+    if (ownerAddress && ownerAddress.length > 0 && records.addresses.length === 0) {
+      const newAddresses = [];
+      if (eth_address) {
+        newAddresses.push({ coinType: eth_address.coinType, value: ownerAddress });
+      }
+      if (celo_address) {
+        newAddresses.push({ coinType: celo_address.coinType, value: ownerAddress });
+      }
+      if (newAddresses.length > 0) {
+        setRecords((prevRecords) => ({
+          ...prevRecords,
+          addresses: newAddresses
+        }));
+      }
+    }
+  }, [ownerAddress]);
+  const recordsToAdd = useMemo(() => {
+    let count = 0;
+    records.texts.forEach((text) => {
+      if (text.value.length > 0) {
+        count++;
+      }
+    });
+    records.addresses.forEach((addr) => {
+      const supportedAddr = getSupportedAddressByCoin(addr.coinType);
+      if (supportedAddr) {
+        if (addr.value.length > 0 && supportedAddr.validateFunc?.(addr.value)) {
+          count++;
+        }
+      }
+    });
+    if (records.contenthash && records.contenthash.value.length > 0) {
+      count++;
+    }
+    return count;
+  }, [records]);
   useEffect(() => {
     if (isDurationExpanded && costBreakdownRef.current) {
       setTimeout(() => {
@@ -13381,6 +13430,20 @@ function RegistrationStep({
     setOwnerAddress(value);
     onOwnerChange?.(value);
   };
+  const handleAddProfile = () => {
+    setIsModalOpen(true);
+  };
+  const handleRecordsAdded = () => {
+    const _initialRecords = deepCopy$2(records);
+    setInitialRecords(_initialRecords);
+    onRecordsChange?.(records);
+    setIsModalOpen(false);
+    onCompleteProfile?.();
+  };
+  const handleRecordsCancel = () => {
+    setRecords(deepCopy$2(initialRecords));
+    setIsModalOpen(false);
+  };
   const fullName = name.includes(".") ? name : `${name}.${domainSuffix}`;
   return /* @__PURE__ */ jsxs("div", { className: "ns-onchain-register-card", children: [
     onClose && /* @__PURE__ */ jsx("button", { className: "ns-onchain-register-close-btn", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 20 }) }),
@@ -13492,7 +13555,7 @@ function RegistrationStep({
       "div",
       {
         className: "ns-onchain-register-profile-card",
-        onClick: onCompleteProfile,
+        onClick: handleAddProfile,
         children: [
           /* @__PURE__ */ jsx("div", { className: "ns-onchain-register-profile-icon", children: /* @__PURE__ */ jsx("img", { src: img$2, alt: "Profile Icon" }) }),
           /* @__PURE__ */ jsxs("div", { className: "ns-onchain-register-profile-text", children: [
@@ -13539,7 +13602,65 @@ function RegistrationStep({
           children: "Register"
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        size: "md",
+        footer: null,
+        isDismissDisabled: true,
+        style: { maxWidth: "500px" },
+        children: /* @__PURE__ */ jsxs("div", { style: { margin: "-20px", padding: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            SelectRecordsForm,
+            {
+              records,
+              onRecordsUpdated: (updatedRecords) => {
+                setRecords(updatedRecords);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: "#f4f4f4",
+                gap: "7px",
+                display: "flex",
+                padding: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleRecordsCancel,
+                    variant: "outline",
+                    style: { width: "50%" },
+                    size: "lg",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    onClick: handleRecordsAdded,
+                    size: "lg",
+                    style: { width: "50%" },
+                    children: [
+                      "Add (",
+                      recordsToAdd,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
   ] });
 }
 
@@ -126619,93 +126740,218 @@ function RegistrationForm({
   onClose,
   onNext,
   onCompleteProfile,
+  onRecordsChange,
   isLoadingPrice = false,
   priceError = null,
   nameAvailability = { isAvailable: false, isChecking: false },
   canProceed = false
 }) {
   const [isDurationExpanded, setIsDurationExpanded] = useState(false);
-  return /* @__PURE__ */ jsx("div", { className: "ens-names-register-container", children: /* @__PURE__ */ jsxs("div", { className: "ens-names-register-card", children: [
-    /* @__PURE__ */ jsx(Header, { showBack: true, onBack, onClose }),
-    /* @__PURE__ */ jsxs("div", { className: "ens-names-register-title-section", children: [
-      /* @__PURE__ */ jsx(Text$1, { size: "xl", weight: "light", className: "ens-names-register-title", children: "ENS Registration" }),
-      /* @__PURE__ */ jsx(Text$1, { size: "md", color: "grey", className: "ens-names-register-subtitle", children: "Your about to mint this ENS name" })
-    ] }),
-    ensName && /* @__PURE__ */ jsx("div", { className: "ens-names-register-name-display", children: /* @__PURE__ */ jsxs(Text$1, { size: "xl", weight: "bold", children: [
-      ensName,
-      ".eth"
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "ens-names-register-duration-section", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ens-names-register-duration-controls", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "ens-names-register-duration-btn",
-            onClick: () => onDurationChange(-1),
-            disabled: duration <= 1,
-            children: /* @__PURE__ */ jsx("span", { style: { fontSize: "20px", lineHeight: "1" }, children: "\u2212" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ens-names-register-duration-text",
-            onClick: () => setIsDurationExpanded(!isDurationExpanded),
-            children: /* @__PURE__ */ jsxs(Text$1, { size: "md", weight: "medium", children: [
-              duration,
-              " year",
-              duration !== 1 ? "s" : ""
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [records, setRecords] = useState({
+    addresses: [],
+    texts: []
+  });
+  const [initialRecords, setInitialRecords] = useState({
+    addresses: [],
+    texts: []
+  });
+  const { connectedAddress } = useConnectedPrincipal();
+  const eth_address = getSupportedAddressByName("eth");
+  const celo_address = getSupportedAddressByName("celo");
+  useEffect(() => {
+    if (connectedAddress && records.addresses.length === 0) {
+      const newAddresses = [];
+      if (eth_address) {
+        newAddresses.push({ coinType: eth_address.coinType, value: connectedAddress });
+      }
+      if (celo_address) {
+        newAddresses.push({ coinType: celo_address.coinType, value: connectedAddress });
+      }
+      if (newAddresses.length > 0) {
+        setRecords((prevRecords) => ({
+          ...prevRecords,
+          addresses: newAddresses
+        }));
+      }
+    }
+  }, [connectedAddress]);
+  const recordsToAdd = useMemo(() => {
+    let count = 0;
+    records.texts.forEach((text) => {
+      if (text.value.length > 0) {
+        count++;
+      }
+    });
+    records.addresses.forEach((addr) => {
+      const supportedAddr = getSupportedAddressByCoin(addr.coinType);
+      if (supportedAddr) {
+        if (addr.value.length > 0 && supportedAddr.validateFunc?.(addr.value)) {
+          count++;
+        }
+      }
+    });
+    if (records.contenthash && records.contenthash.value.length > 0) {
+      count++;
+    }
+    return count;
+  }, [records]);
+  const handleAddProfile = () => {
+    setIsModalOpen(true);
+  };
+  const handleRecordsAdded = () => {
+    const _initialRecords = deepCopy$2(records);
+    setInitialRecords(_initialRecords);
+    onRecordsChange?.(records);
+    setIsModalOpen(false);
+    onCompleteProfile?.();
+  };
+  const handleRecordsCancel = () => {
+    setRecords(deepCopy$2(initialRecords));
+    setIsModalOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ens-names-register-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ens-names-register-card", children: [
+      /* @__PURE__ */ jsx(Header, { showBack: true, onBack, onClose }),
+      /* @__PURE__ */ jsxs("div", { className: "ens-names-register-title-section", children: [
+        /* @__PURE__ */ jsx(Text$1, { size: "xl", weight: "light", className: "ens-names-register-title", children: "ENS Registration" }),
+        /* @__PURE__ */ jsx(Text$1, { size: "md", color: "grey", className: "ens-names-register-subtitle", children: "Your about to mint this ENS name" })
+      ] }),
+      ensName && /* @__PURE__ */ jsx("div", { className: "ens-names-register-name-display", children: /* @__PURE__ */ jsxs(Text$1, { size: "xl", weight: "bold", children: [
+        ensName,
+        ".eth"
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ens-names-register-duration-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ens-names-register-duration-controls", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "ens-names-register-duration-btn",
+              onClick: () => onDurationChange(-1),
+              disabled: duration <= 1,
+              children: /* @__PURE__ */ jsx("span", { style: { fontSize: "20px", lineHeight: "1" }, children: "\u2212" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ens-names-register-duration-text",
+              onClick: () => setIsDurationExpanded(!isDurationExpanded),
+              children: /* @__PURE__ */ jsxs(Text$1, { size: "md", weight: "medium", children: [
+                duration,
+                " year",
+                duration !== 1 ? "s" : ""
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "ens-names-register-duration-btn",
+              onClick: () => onDurationChange(1),
+              children: /* @__PURE__ */ jsx("span", { style: { fontSize: "20px", lineHeight: "1" }, children: "+" })
+            }
+          )
+        ] }),
+        isDurationExpanded && /* @__PURE__ */ jsx("div", { className: "ens-names-register-cost-breakdown", children: /* @__PURE__ */ jsx(
+          CostSummary,
           {
-            className: "ens-names-register-duration-btn",
-            onClick: () => onDurationChange(1),
-            children: /* @__PURE__ */ jsx("span", { style: { fontSize: "20px", lineHeight: "1" }, children: "+" })
+            duration,
+            registrationCost,
+            networkFee,
+            total,
+            isLoading: isLoadingPrice,
+            priceError
           }
-        )
+        ) })
       ] }),
-      isDurationExpanded && /* @__PURE__ */ jsx("div", { className: "ens-names-register-cost-breakdown", children: /* @__PURE__ */ jsx(
-        CostSummary,
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          duration,
-          registrationCost,
-          networkFee,
-          total,
-          isLoading: isLoadingPrice,
-          priceError
+          className: "ens-names-register-profile-card",
+          onClick: handleAddProfile,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "ens-names-register-profile-icon", children: /* @__PURE__ */ jsx("img", { src: img$2, alt: "Profile Icon" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "ens-names-register-profile-text", children: [
+              /* @__PURE__ */ jsx(Text$1, { size: "md", weight: "bold", children: "Complete your profile" }),
+              /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", children: "Make your ENS more discoverable" })
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "ens-names-register-profile-arrow", children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 }) })
+          ]
         }
-      ) })
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "ens-names-register-next-btn",
+          variant: "solid",
+          size: "lg",
+          onClick: onNext,
+          disabled: !canProceed,
+          children: "Next"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "ens-names-register-profile-card",
-        onClick: onCompleteProfile,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "ens-names-register-profile-icon", children: /* @__PURE__ */ jsx("img", { src: img$2, alt: "Profile Icon" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ens-names-register-profile-text", children: [
-            /* @__PURE__ */ jsx(Text$1, { size: "md", weight: "bold", children: "Complete your profile" }),
-            /* @__PURE__ */ jsx(Text$1, { size: "sm", color: "grey", children: "Make your ENS more discoverable" })
-          ] }),
-          /* @__PURE__ */ jsx("button", { className: "ens-names-register-profile-arrow", children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 }) })
-        ]
-      }
-    ),
     /* @__PURE__ */ jsx(
-      Button,
+      Modal,
       {
-        className: "ens-names-register-next-btn",
-        variant: "solid",
-        size: "lg",
-        onClick: onNext,
-        disabled: !canProceed,
-        children: "Next"
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        size: "md",
+        footer: null,
+        isDismissDisabled: true,
+        style: { maxWidth: "500px" },
+        children: /* @__PURE__ */ jsxs("div", { style: { margin: "-20px" }, children: [
+          /* @__PURE__ */ jsx(
+            SelectRecordsForm,
+            {
+              records,
+              onRecordsUpdated: (updatedRecords) => {
+                setRecords(updatedRecords);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: "#f4f4f4",
+                gap: "7px",
+                display: "flex",
+                padding: "8px",
+                paddingTop: "0"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleRecordsCancel,
+                    variant: "outline",
+                    style: { width: "50%" },
+                    size: "lg",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    onClick: handleRecordsAdded,
+                    size: "lg",
+                    style: { width: "50%" },
+                    children: [
+                      "Add (",
+                      recordsToAdd,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     )
-  ] }) });
+  ] });
 }
 
 function StepItem({
@@ -127566,7 +127812,6 @@ function ENSNamesRegistrarComponent({
     }
   }, []);
   const handleNameSearchNext = () => {
-    console.log("[ENS Registration] handleNameSearchNext called - Moving to RegistrationBegin");
     if (ensName && ensName.length >= 3 && duration > 0) {
       const normalizedName = normalise(ensName.trim());
       if (normalizedName !== lastFetchedName || duration !== lastFetchedDuration) {
@@ -127644,6 +127889,13 @@ function ENSNamesRegistrarComponent({
   }
   if (currentStep === EnsRegistrationSteps.RegistrationBegin) {
     const canProceed = nameAvailability.isAvailable && !nameAvailability.isChecking && ensName.length >= 3;
+    const normalizedName = normalise(ensName.trim());
+    const handleRecordsChange = (records) => {
+      setRecordsPerName({
+        ...recordsPerName,
+        [normalizedName]: records
+      });
+    };
     return /* @__PURE__ */ jsx(
       RegistrationForm,
       {
@@ -127658,6 +127910,7 @@ function ENSNamesRegistrarComponent({
         onClose,
         onNext: handleNext,
         onCompleteProfile,
+        onRecordsChange: handleRecordsChange,
         isLoadingPrice,
         priceError,
         nameAvailability,