@thenamespace/ens-components 0.13.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,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
   ] });
 }