@thenamespace/ens-components 1.1.2 → 1.1.3

package/dist/index.d.ts

@@ -194,13 +194,15 @@ interface SubnameMintFormProps {
     label?: string;
     isTestnet?: boolean;
     avatarUploadDomain?: string;
+    title?: string;
+    subtitle?: string;
     onCancel?: () => void;
     onSuccess?: (data: MintSuccessData) => void;
     onSubnameMinted?: (data: SubnameMintedData) => void;
     txConfirmations?: number;
     onConnectWallet?: () => void;
 }
-declare const SubnameMintForm: ({ parentName, label, isTestnet, avatarUploadDomain, onCancel, onSuccess, onSubnameMinted, txConfirmations, onConnectWallet, }: SubnameMintFormProps) => react_jsx_runtime.JSX.Element;
+declare const SubnameMintForm: ({ parentName, label, isTestnet, avatarUploadDomain, title, subtitle, onCancel, onSuccess, onSubnameMinted, txConfirmations, onConnectWallet, }: SubnameMintFormProps) => react_jsx_runtime.JSX.Element;
 
 interface OffchainSubnameCreatedData {
     label: string;
@@ -280,7 +282,7 @@ interface TextProps extends React__default.HTMLAttributes<HTMLSpanElement> {
 }
 declare const Text: React__default.FC<TextProps>;
 
-type IconName = "person" | "x" | "search" | "square-user" | "globe" | "pin" | "box" | "book" | "map-pin" | "mail" | "discord" | "github" | "telegram" | "youtube" | "image" | "circle-person" | "twitter" | "circle-alert" | "check-circle" | "check" | "alert-triangle" | "info" | "x-circle" | "rotate-circle" | "logout" | "edit" | "copy" | "clock" | "plus" | "image" | "xSocial" | "chevron-up" | "chevron-down" | "chevron-left";
+type IconName = "person" | "x" | "search" | "square-user" | "globe" | "pin" | "box" | "book" | "map-pin" | "mail" | "discord" | "github" | "telegram" | "youtube" | "image" | "circle-person" | "twitter" | "circle-alert" | "check-circle" | "check" | "alert-triangle" | "info" | "x-circle" | "rotate-circle" | "logout" | "edit" | "copy" | "clock" | "plus" | "image" | "xSocial" | "chevron-up" | "chevron-down" | "chevron-left" | "circle-help";
 interface IconProps {
     name: IconName;
     color?: string;

package/dist/index.js

@@ -309,7 +309,7 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$q = [
+const __iconNode$r = [
   [
     "path",
     {
@@ -318,7 +318,7 @@ const __iconNode$q = [
     }
   ]
 ];
-const Book = createLucideIcon("book", __iconNode$q);
+const Book = createLucideIcon("book", __iconNode$r);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -328,7 +328,7 @@ const Book = createLucideIcon("book", __iconNode$q);
  */
 
 
-const __iconNode$p = [
+const __iconNode$q = [
   [
     "path",
     {
@@ -339,7 +339,7 @@ const __iconNode$p = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box = createLucideIcon("box", __iconNode$p);
+const Box = createLucideIcon("box", __iconNode$q);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -349,8 +349,8 @@ const Box = createLucideIcon("box", __iconNode$p);
  */
 
 
-const __iconNode$o = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$o);
+const __iconNode$p = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$p);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -360,8 +360,8 @@ const Check = createLucideIcon("check", __iconNode$o);
  */
 
 
-const __iconNode$n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$n);
+const __iconNode$o = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$o);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -371,8 +371,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$n);
  */
 
 
-const __iconNode$m = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$m);
+const __iconNode$n = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$n);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -382,8 +382,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$m);
  */
 
 
-const __iconNode$l = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$l);
+const __iconNode$m = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$m);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -393,12 +393,12 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$l = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$k);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$l);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -408,11 +408,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$k = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$j);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$k);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -422,7 +422,7 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$j);
  */
 
 
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M12 2a10 10 0 0 1 7.38 16.75", key: "175t95" }],
   ["path", { d: "M12 8v8", key: "napkw2" }],
   ["path", { d: "M16 12H8", key: "1fr5h0" }],
@@ -431,7 +431,22 @@ const __iconNode$i = [
   ["path", { d: "M4.636 5.235a10 10 0 0 1 .891-.857", key: "1szpfk" }],
   ["path", { d: "M8.644 21.42a10 10 0 0 0 7.631-.38", key: "9yhvd4" }]
 ];
-const CircleFadingPlus = createLucideIcon("circle-fading-plus", __iconNode$i);
+const CircleFadingPlus = createLucideIcon("circle-fading-plus", __iconNode$j);
+
+/**
+ * @license lucide-react v0.563.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$i = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$i);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -864,7 +879,8 @@ const icons$1 = {
   xSocial: XIcon,
   "chevron-up": ChevronUp,
   "chevron-down": ChevronDown,
-  "chevron-left": ChevronLeft
+  "chevron-left": ChevronLeft,
+  "circle-help": CircleQuestionMark
 };
 const Icon = ({
   name,
@@ -11882,6 +11898,8 @@ const PricingDisplay = ({
   ] });
 };
 
+const SUPPORTED_KEY_SET = new Set(supportedTexts.map((t) => t.key));
+const genDraftId = () => `${Date.now()}-${Math.random()}`;
 const TextRecords = ({
   texts,
   onTextsChanged,
@@ -11899,7 +11917,64 @@ const TextRecords = ({
     return map;
   }, [texts]);
   const [lastAddedKey, setLastAddedKey] = useState(null);
+  const [customDrafts, setCustomDrafts] = useState([]);
   const inputRefs = useRef({});
+  const draftKeys = useMemo(
+    () => new Set(customDrafts.map((d) => d.key).filter(Boolean)),
+    [customDrafts]
+  );
+  const committedCustomTexts = useMemo(
+    () => texts.filter((t) => !SUPPORTED_KEY_SET.has(t.key) && !draftKeys.has(t.key)),
+    [texts, draftKeys]
+  );
+  const isValidDraftKey = (key, draftId) => {
+    if (!key.trim()) return false;
+    if (SUPPORTED_KEY_SET.has(key)) return false;
+    if (committedCustomTexts.some((t) => t.key === key)) return false;
+    if (customDrafts.some((d) => d.id !== draftId && d.key === key)) return false;
+    return true;
+  };
+  const handleAddCustomDraft = () => {
+    setCustomDrafts((prev) => [...prev, { id: genDraftId(), key: "", value: "" }]);
+  };
+  const handleCustomDraftKeyChange = (draftId, newKey) => {
+    const draft = customDrafts.find((d) => d.id === draftId);
+    const oldKey = draft.key;
+    const updatedDrafts = customDrafts.map(
+      (d) => d.id === draftId ? { ...d, key: newKey } : d
+    );
+    setCustomDrafts(updatedDrafts);
+    let newTexts = oldKey ? texts.filter((t) => t.key !== oldKey) : [...texts];
+    const isValid = newKey.trim() && !SUPPORTED_KEY_SET.has(newKey) && !newTexts.filter((t) => !SUPPORTED_KEY_SET.has(t.key)).some((t) => t.key === newKey) && updatedDrafts.filter((d) => d.id !== draftId).every((d) => d.key !== newKey);
+    if (isValid) {
+      newTexts = [...newTexts, { key: newKey, value: draft.value }];
+    }
+    onTextsChanged(newTexts);
+  };
+  const handleCustomDraftValueChange = (draftId, newValue) => {
+    const draft = customDrafts.find((d) => d.id === draftId);
+    setCustomDrafts(
+      (prev) => prev.map((d) => d.id === draftId ? { ...d, value: newValue } : d)
+    );
+    if (draft.key && texts.some((t) => t.key === draft.key)) {
+      onTextsChanged(
+        texts.map((t) => t.key === draft.key ? { ...t, value: newValue } : t)
+      );
+    }
+  };
+  const handleRemoveCustomDraft = (draftId) => {
+    const draft = customDrafts.find((d) => d.id === draftId);
+    setCustomDrafts((prev) => prev.filter((d) => d.id !== draftId));
+    if (draft.key && texts.some((t) => t.key === draft.key)) {
+      onTextsChanged(texts.filter((t) => t.key !== draft.key));
+    }
+  };
+  const handleCommittedCustomValueChange = (key, value) => {
+    onTextsChanged(texts.map((t) => t.key === key ? { ...t, value } : t));
+  };
+  const handleRemoveCommittedCustom = (key) => {
+    onTextsChanged(texts.filter((t) => t.key !== key));
+  };
   useEffect(() => {
     if (lastAddedKey && inputRefs.current[lastAddedKey]) {
       inputRefs.current[lastAddedKey]?.scrollIntoView({
@@ -11966,7 +12041,9 @@ const TextRecords = ({
       (record) => filterSuggestions(record) && shownTextCategory.includes(record.category)
     );
   }, [searchFilter]);
-  if (filteredItems.length === 0) {
+  const isGeneralCategory = category === TextRecordCategory.General;
+  const hasCustomContent = isGeneralCategory && (committedCustomTexts.length > 0 || customDrafts.length > 0);
+  if (filteredItems.length === 0 && !hasCustomContent) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
@@ -12032,19 +12109,92 @@ const TextRecords = ({
         )
       ] }, record.key);
     }),
-    /* @__PURE__ */ jsx("div", { className: "row g-2", children: filteredItems.filter(
-      (record) => existingTextsMap[record.key] === void 0 && record.category !== TextRecordCategory.Image && filterSuggestions(record)
-    ).map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "ns-text-suggestion",
-        onClick: () => handleTextAdded(record.key),
-        children: [
-          /* @__PURE__ */ jsx(Icon, { size: 18, color: "grey", name: record.icon }),
-          /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
-        ]
-      }
-    ) }, record.key)) })
+    isGeneralCategory && committedCustomTexts.map((custom) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: { marginBottom: "4px" },
+          color: "grey",
+          size: "xs",
+          weight: "medium",
+          children: custom.key
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, className: "d-flex align-items-center", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            style: { width: "100%" },
+            onChange: (e) => handleCommittedCustomValueChange(custom.key, e.target.value),
+            prefix: /* @__PURE__ */ jsx(Icon, { name: "edit", size: 18, color: "grey" }),
+            value: custom.value,
+            placeholder: "Value"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => handleRemoveCommittedCustom(custom.key),
+            className: "ns-close-icon ns-ms-1",
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
+          }
+        )
+      ] })
+    ] }, custom.key)),
+    isGeneralCategory && customDrafts.map((draft) => {
+      const keyIsInvalid = draft.key.trim().length > 0 && !isValidDraftKey(draft.key, draft.id);
+      return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", style: { gap: 6 }, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              style: { flex: 1 },
+              value: draft.key,
+              onChange: (e) => handleCustomDraftKeyChange(draft.id, e.target.value),
+              placeholder: "Key (e.g. custom.record)",
+              error: keyIsInvalid
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              style: { flex: 1 },
+              value: draft.value,
+              onChange: (e) => handleCustomDraftValueChange(draft.id, e.target.value),
+              placeholder: "Value"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => handleRemoveCustomDraft(draft.id),
+              className: "ns-close-icon",
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
+            }
+          )
+        ] }),
+        keyIsInvalid && /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", style: { marginTop: 4 }, children: "Key is reserved or already in use" })
+      ] }, draft.id);
+    }),
+    /* @__PURE__ */ jsxs("div", { className: "row g-2", children: [
+      filteredItems.filter(
+        (record) => existingTextsMap[record.key] === void 0 && record.category !== TextRecordCategory.Image && filterSuggestions(record)
+      ).map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "ns-text-suggestion",
+          onClick: () => handleTextAdded(record.key),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { size: 18, color: "grey", name: record.icon }),
+            /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
+          ]
+        }
+      ) }, record.key)),
+      isGeneralCategory && /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs("div", { className: "ns-text-suggestion", onClick: handleAddCustomDraft, children: [
+        /* @__PURE__ */ jsx(Icon, { size: 18, color: "grey", name: "circle-help" }),
+        /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: "Custom" })
+      ] }) })
+    ] })
   ] });
 };
 
@@ -92207,6 +92357,8 @@ const SubnameMintForm = ({
   label,
   isTestnet,
   avatarUploadDomain,
+  title,
+  subtitle,
   onCancel,
   onSuccess,
   onSubnameMinted,
@@ -92277,6 +92429,8 @@ const SubnameMintForm = ({
       isL2: initState.isL2,
       isExpirable: initState.isExpirable || false,
       avatarUploadDomain,
+      title,
+      subtitle,
       onCancel,
       onSuccess,
       onSubnameMinted,
@@ -92300,6 +92454,8 @@ const SubnameMintFormContent = ({
   isL2,
   isExpirable = false,
   avatarUploadDomain,
+  title,
+  subtitle,
   onCancel,
   onSuccess,
   onSubnameMinted,
@@ -92733,7 +92889,10 @@ const SubnameMintFormContent = ({
     );
   }
   return /* @__PURE__ */ jsxs("div", { style: { padding: 15 }, children: [
-    /* @__PURE__ */ jsx(Text, { className: "ns-text-center", weight: "bold", children: "Get Your Web3 Username" }),
+    /* @__PURE__ */ jsxs("div", { className: "ns-text-center mb-3", children: [
+      /* @__PURE__ */ jsx(Text, { weight: "bold", size: "lg", children: title || "Get Your Web3 Username" }),
+      subtitle && /* @__PURE__ */ jsx(Text, { color: "grey", size: "sm", className: "mt-1", children: subtitle })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
       NameAvailabilityInput,
       {
@@ -92826,13 +92985,13 @@ const SuccessScreen = ({ fullSubname, isUpdateMode, onContinue }) => {
 const FormHeader = ({ isUpdateMode, label, parentName, showFullName, title, subtitle }) => {
   const defaultTitle = isUpdateMode ? "Update subname" : "Create subname";
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-center mb-3", children: [
-    /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "mb-1", children: title ?? defaultTitle }),
+    /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", className: "mb-1", children: title ?? defaultTitle }),
     showFullName && /* @__PURE__ */ jsxs(Text, { size: "lg", weight: "bold", children: [
       label,
       ".",
       parentName
     ] }),
-    subtitle && /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", className: "mt-1", children: subtitle })
+    subtitle && /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "mt-1", children: subtitle })
   ] });
 };