@thenamespace/ens-components 0.2.0 → 0.4.0

package/dist/index.js

@@ -88,6 +88,48 @@ const Input = forwardRef(
 );
 Input.displayName = "Input";
 
+const Textarea = forwardRef(
+  ({
+    size = "md",
+    prefix,
+    suffix,
+    disabled = false,
+    error = false,
+    className = "",
+    dataTestId,
+    rows = 4,
+    ...rest
+  }, ref) => {
+    const sizeClass = `ns-textarea--${size}`;
+    const errorClass = error ? "ns-textarea--error" : "";
+    const disabledClass = disabled ? "ns-textarea--disabled" : "";
+    const classes = [
+      "ns-textarea",
+      sizeClass,
+      errorClass,
+      disabledClass,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { className: `ns-textarea__wrapper ${sizeClass}`, children: [
+      prefix && /* @__PURE__ */ jsx("div", { className: "ns-textarea__prefix", children: prefix }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          className: classes,
+          disabled,
+          "aria-invalid": error || void 0,
+          "data-test-id": dataTestId,
+          rows,
+          ...rest
+        }
+      ),
+      suffix && /* @__PURE__ */ jsx("div", { className: "ns-textarea__suffix", children: suffix })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
 const Text = ({
   children,
   size = "md",
@@ -713,7 +755,8 @@ const icons$1 = {
   logout: LogOut,
   edit: SquarePen,
   copy: Copy,
-  clock: Clock
+  clock: Clock,
+  xSocial: XIcon
 };
 const Icon = ({
   name,
@@ -11275,23 +11318,28 @@ const encode = (name, value) => {
 const supportedContenthashRecords = [
   {
     protocol: ContenthashProtocol.Ipfs,
-    label: "Ipfs"
+    label: "IPFS",
+    protocolPrefix: "ipfs://"
   },
   {
     protocol: ContenthashProtocol.Onion,
-    label: "Onion3"
+    label: "ONION",
+    protocolPrefix: "onion3://"
   },
   {
     protocol: ContenthashProtocol.Arweave,
-    label: "Arweave"
+    label: "ARWEAVE",
+    protocolPrefix: "ar://"
   },
   {
     protocol: ContenthashProtocol.Skynet,
-    label: "Skynet"
+    label: "SKYNET",
+    protocolPrefix: "sia://"
   },
   {
     protocol: ContenthashProtocol.Swarm,
-    label: "Swarm"
+    label: "SWARM",
+    protocolPrefix: "bzz://"
   }
 ];
 const getSupportedChashByProtocol = (protocol) => {
@@ -11302,6 +11350,7 @@ const isContenthashValid = (protocol, value) => {
     encode(protocol, value);
     return true;
   } catch (err) {
+    console.log(err, "ERR HERE");
     return false;
   }
 };
@@ -11314,76 +11363,88 @@ var TextRecordCategory = /* @__PURE__ */ ((TextRecordCategory2) => {
 })(TextRecordCategory || {});
 const supportedTexts = [
   {
-    icon: "person",
+    icon: "image",
     key: "avatar",
     category: "image" /* Image */,
-    label: "Avatar"
+    label: "Avatar",
+    placeholder: "Your avatar image url..."
   },
   {
-    icon: "person",
+    icon: "image",
     key: "header",
     category: "image" /* Image */,
-    label: "Header"
+    label: "Header",
+    placeholder: "Your header image url..."
   },
   {
     icon: "person",
     key: "name",
     category: "general" /* General */,
-    label: "Nickname"
+    label: "Nickname",
+    placeholder: "e.g. John"
   },
   {
     icon: "book",
     key: "description",
     category: "general" /* General */,
-    label: "Short bio"
+    label: "Short bio",
+    placeholder: "I am an alien from outer space"
   },
   {
     icon: "globe",
     key: "url",
     category: "general" /* General */,
-    label: "Website"
+    label: "Website",
+    placeholder: "e.g. https://celo.org"
   },
   {
     icon: "map-pin",
     key: "location",
     category: "general" /* General */,
-    label: "Location"
+    label: "Location",
+    placeholder: "e.g. Jupiter"
   },
   {
     icon: "mail",
     key: "mail",
     category: "general" /* General */,
-    label: "E-Mail"
+    label: "E-Mail",
+    placeholder: "e.g. example@email.com"
   },
   {
-    icon: "person",
+    icon: "xSocial",
     key: "com.twitter",
     category: "social" /* Social */,
-    label: "Twitter"
+    label: "Twitter",
+    placeholder: "e.g. celonames"
   },
   {
     icon: "discord",
     key: "com.discord",
     category: "social" /* Social */,
-    label: "Discord"
+    label: "Discord",
+    placeholder: "e.g. celonames"
   },
   {
     icon: "github",
     key: "com.github",
     category: "social" /* Social */,
-    label: "Github"
+    label: "Github",
+    placeholder: "e.g. celonames"
   },
   {
     icon: "telegram",
     key: "org.telegram",
     category: "social" /* Social */,
-    label: "Telegram"
+    label: "Telegram",
+    placeholder: "e.g. celonames"
   },
   {
     icon: "youtube",
     key: "com.youtube",
     category: "social" /* Social */,
-    label: "Youtube"
+    label: "Youtube",
+    placeholder: "e.g. celonames"
   }
 ];
 const getSupportedText = (key) => {
@@ -11457,6 +11518,7 @@ const TextRecords = ({
     /* @__PURE__ */ jsx(Text, { className: "ns-mb-2", weight: "bold", children: capitalize(category) }),
     filteredItems.filter((record) => existingTextsMap[record.key] !== void 0).map((record) => {
       const current = existingTextsMap[record.key];
+      const isDescription = record.key === "description";
       return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
         /* @__PURE__ */ jsx(
           Text,
@@ -11474,7 +11536,21 @@ const TextRecords = ({
             style: { width: "100%" },
             className: "d-flex align-items-center",
             children: [
-              /* @__PURE__ */ jsx(
+              isDescription ? /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  size: "sm",
+                  ref: (el) => {
+                    inputRefs.current[record.key] = el;
+                  },
+                  style: { width: "100%", flex: 1, height: 70 },
+                  onChange: (e) => handleTextChanged(record.key, e.target.value),
+                  prefix: /* @__PURE__ */ jsx(Icon, { name: record.icon, size: 18, color: "grey" }),
+                  value: current.value,
+                  placeholder: record.placeholder,
+                  rows: 4
+                }
+              ) : /* @__PURE__ */ jsx(
                 Input,
                 {
                   ref: (el) => {
@@ -11492,6 +11568,7 @@ const TextRecords = ({
                 {
                   onClick: () => handleRemoveText(record.key),
                   className: "ns-close-icon ns-ms-1",
+                  style: { marginTop: isDescription ? "8px" : "0" },
                   children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
                 }
               )
@@ -11502,7 +11579,7 @@ const TextRecords = ({
     }),
     /* @__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", children: /* @__PURE__ */ jsxs(
+    ).map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: "ns-text-suggestion",
@@ -11632,7 +11709,7 @@ const AddressRecords = ({
         )
       ] }, record.chainName);
     }),
-    /* @__PURE__ */ jsx("div", { className: "row g-2", children: filteredAddresses.filter((record) => existingAddressMap[record.coinType] === void 0).map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "row g-2", children: filteredAddresses.filter((record) => existingAddressMap[record.coinType] === void 0).map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: "ns-text-suggestion",
@@ -11856,8 +11933,10 @@ const SwarmIcon = ({ size = 20 }) => {
     {
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
-      height: size * 1.03,
+      height: size,
+      viewBox: "0 0 34.4 35",
       fill: "none",
+      preserveAspectRatio: "xMidYMid meet",
       children: /* @__PURE__ */ jsxs("g", { fill: "#FF8A00", children: [
         /* @__PURE__ */ jsx("path", { d: "m0 30.47 8.02 4.502 8.022-4.502v-8.986L8.02 16.977 0 21.484zM26.516.03l-4.24 2.381-.006.036v4.758l4.246 2.382.036.017 4.24-2.376V2.43zM34.4 21.484l-8.02-4.507-8.022 4.507v8.986l8.021 4.502L34.4 30.47z" }),
         /* @__PURE__ */ jsx("path", { d: "m17.137 1.285-8.01 4.502v8.986l8.022 4.501 8.02-4.501v-3.58l-3.905-2.19-1.054-.59V3.119z" })
@@ -12032,13 +12111,26 @@ const ContenthashRecord = ({
   onContenthashAdded,
   searchFilter
 }) => {
+  const inputRef = useRef(null);
   const metadata = useMemo(() => {
     if (contenthash?.protocol) {
       return getSupportedChashByProtocol(contenthash?.protocol);
     }
   }, [contenthash]);
-  const handleContenthashChanged = (protocol, value) => {
-    onContenthashChanged({ protocol, value });
+  const handleContenthashChanged = (protocol, inputValue) => {
+    const protocolPrefix = metadata.protocolPrefix;
+    if (inputValue.length <= protocolPrefix.length) {
+      onContenthashChanged({ protocol, value: "" });
+      return;
+    }
+    let cleanValue = inputValue;
+    if (cleanValue.startsWith(protocolPrefix)) {
+      cleanValue = cleanValue.substring(protocolPrefix.length);
+    } else {
+      onContenthashChanged({ protocol, value: "" });
+      return;
+    }
+    onContenthashChanged({ protocol, value: cleanValue });
   };
   const filterChash = (record) => {
     if (searchFilter && searchFilter.length > 0) {
@@ -12047,6 +12139,16 @@ const ContenthashRecord = ({
     }
     return true;
   };
+  const prefixWithProtocol = (value, protocol) => {
+    const protocolPrefix = metadata.protocolPrefix;
+    if (value.length === 0) {
+      return protocolPrefix;
+    }
+    if (value.startsWith(protocolPrefix)) {
+      return value;
+    }
+    return `${protocolPrefix}${value}`;
+  };
   const filteredSuggestions = useMemo(() => {
     return supportedContenthashRecords.filter((record) => filterChash(record));
   }, [searchFilter]);
@@ -12055,7 +12157,7 @@ const ContenthashRecord = ({
   }
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
     /* @__PURE__ */ jsx(Text, { className: "ns-mb-2", weight: "bold", children: "Website" }),
-    !contenthash && /* @__PURE__ */ jsx("div", { className: "row g-2", children: filteredSuggestions.map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6", children: /* @__PURE__ */ jsxs(
+    !contenthash && /* @__PURE__ */ jsx("div", { className: "row g-2", children: filteredSuggestions.map((record) => /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: "ns-text-suggestion",
@@ -12081,11 +12183,27 @@ const ContenthashRecord = ({
         /* @__PURE__ */ jsx(
           Input,
           {
+            ref: inputRef,
             style: { width: "100%" },
             onChange: (e) => handleContenthashChanged(contenthash.protocol, e.target.value),
+            onKeyDown: (e) => {
+              const protocolPrefix = `${contenthash.protocol}://`;
+              const input = e.currentTarget;
+              const cursorPosition = input.selectionStart || 0;
+              if (cursorPosition <= protocolPrefix.length) {
+                if (e.key === "Backspace" && cursorPosition > 0) {
+                  e.preventDefault();
+                  setTimeout(() => {
+                    input.setSelectionRange(protocolPrefix.length, protocolPrefix.length);
+                  }, 0);
+                } else if (e.key === "Delete" && cursorPosition < protocolPrefix.length) {
+                  e.preventDefault();
+                }
+              }
+            },
             error: contenthash.value.length > 0 && !isContenthashValid(contenthash.protocol, contenthash.value),
             prefix: /* @__PURE__ */ jsx(ContenthashIcon, { protocol: contenthash.protocol, size: 18 }),
-            value: contenthash.value,
+            value: prefixWithProtocol(contenthash.value, contenthash.protocol),
             placeholder: `${contenthash.protocol}://`
           }
         ),
@@ -12133,56 +12251,18 @@ const ImageRecords = ({
   return /* @__PURE__ */ jsx("div", { className: "ns-image-records", children: /* @__PURE__ */ jsxs("div", { style: headerStyles, className: "ns-cover-record-cont", children: [
     /* @__PURE__ */ jsx("div", { className: "ns-top-grad" }),
     /* @__PURE__ */ jsx("div", { className: "ns-bot-grad" }),
-    !headerRecordSet && /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        trigger: /* @__PURE__ */ jsx("div", { className: "ns-header-handle", children: /* @__PURE__ */ jsx(Icon, { color: "white", name: "rotate-circle" }) }),
-        children: /* @__PURE__ */ jsxs("div", { className: "ns-upload-options", children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                if (!headerRecordSet) {
-                  onHeaderAdded("");
-                }
-              },
-              weight: "medium",
-              className: "option",
-              size: "sm",
-              children: "Add Header Record"
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { weight: "medium", className: "option disabled", size: "sm", children: "Upload image" }),
-          /* @__PURE__ */ jsx(Text, { weight: "medium", className: "option disabled", size: "sm", children: "Select NFT" })
-        ] })
+    !headerRecordSet && /* @__PURE__ */ jsx("div", { style: { zIndex: 10 }, onClick: (e) => {
+      e.stopPropagation();
+      if (!headerRecordSet) {
+        onHeaderAdded("");
       }
-    ),
-    /* @__PURE__ */ jsx("div", { style: avatarStyles, className: "ns-avatar-record-cont", children: !avatarRecordSet && /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        trigger: /* @__PURE__ */ jsx("div", { className: "ns-image-handle", children: /* @__PURE__ */ jsx(Icon, { color: "grey", name: "rotate-circle" }) }),
-        children: /* @__PURE__ */ jsxs("div", { className: "ns-upload-options", children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                if (!avatarRecordSet) {
-                  onAvatarAdded("");
-                }
-              },
-              weight: "medium",
-              className: "option",
-              size: "sm",
-              children: "Add Avatar Record"
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { weight: "medium", className: "option disabled", size: "sm", children: "Upload image" }),
-          /* @__PURE__ */ jsx(Text, { weight: "medium", className: "option disabled", size: "sm", children: "Select NFT" })
-        ] })
+    }, className: "ns-header-handle", children: /* @__PURE__ */ jsx(Icon, { color: "white", name: "rotate-circle" }) }),
+    /* @__PURE__ */ jsx("div", { style: avatarStyles, className: "ns-avatar-record-cont", children: !avatarRecordSet && /* @__PURE__ */ jsx("div", { style: { zIndex: 10 }, onClick: (e) => {
+      e.stopPropagation();
+      if (!headerRecordSet) {
+        onAvatarAdded("");
       }
-    ) })
+    }, className: "ns-image-handle", children: /* @__PURE__ */ jsx(Icon, { color: "grey", name: "rotate-circle" }) }) })
   ] }) });
 };
 
@@ -12206,6 +12286,46 @@ const SelectRecordsForm = ({
   const [currentNav, setCurrentNav] = useState(
     "General" /* General */
   );
+  const recordsInnerRef = useRef(null);
+  const isScrollingProgrammatically = useRef(false);
+  useEffect(() => {
+    const scrollContainer = recordsInnerRef.current;
+    if (!scrollContainer) return;
+    const refs = [
+      { ref: generalCategoryRef, nav: "General" /* General */ },
+      { ref: socialCategoryRef, nav: "Social" /* Social */ },
+      { ref: addressesCategoryRef, nav: "Addresses" /* Addresses */ },
+      { ref: websiteCategoryRef, nav: "Website" /* Website */ }
+    ];
+    const updateActiveNav = () => {
+      if (isScrollingProgrammatically.current) return;
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const containerTop = containerRect.top;
+      let closestSection = null;
+      let closestDistance = Infinity;
+      refs.forEach(({ ref, nav }) => {
+        if (ref.current) {
+          const sectionRect = ref.current.getBoundingClientRect();
+          const sectionTop = sectionRect.top - containerTop;
+          if (sectionTop <= 100 && sectionTop > -100) {
+            const distance = Math.abs(sectionTop);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestSection = nav;
+            }
+          }
+        }
+      });
+      if (closestSection) {
+        setCurrentNav(closestSection);
+      }
+    };
+    updateActiveNav();
+    scrollContainer.addEventListener("scroll", updateActiveNav);
+    return () => {
+      scrollContainer.removeEventListener("scroll", updateActiveNav);
+    };
+  }, []);
   const handleTextsUpdated = (texts) => {
     onRecordsUpdated({ ...records, texts });
   };
@@ -12221,10 +12341,14 @@ const SelectRecordsForm = ({
     };
     const currentRef = references[category];
     if (currentRef && currentRef.current) {
+      isScrollingProgrammatically.current = true;
       currentRef.current.scrollIntoView({
         behavior: "smooth",
         block: "start"
       });
+      setTimeout(() => {
+        isScrollingProgrammatically.current = false;
+      }, 1e3);
     }
   };
   const handleSidebarChange = (nav, scroll = true) => {
@@ -12299,47 +12423,54 @@ const SelectRecordsForm = ({
           item
         );
       }) }),
-      /* @__PURE__ */ jsxs("div", { className: "col col-sm-9 col-12 ns-records-inner ns-styled-scrollbar", children: [
-        /* @__PURE__ */ jsx("div", { ref: generalCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
-          TextRecords,
-          {
-            initialTexts: initialRecords.texts,
-            texts: records.texts,
-            onTextsChanged: handleTextsUpdated,
-            category: TextRecordCategory.General,
-            searchFilter
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { ref: socialCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
-          TextRecords,
-          {
-            initialTexts: initialRecords.texts,
-            texts: records.texts,
-            onTextsChanged: handleTextsUpdated,
-            category: TextRecordCategory.Social,
-            searchFilter
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { ref: addressesCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
-          AddressRecords,
-          {
-            initialAddresses: initialRecords.addresses,
-            addresses: records.addresses,
-            onAddressesChanged: (e) => handleAddressesUpdated(e),
-            searchFilter
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { ref: websiteCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
-          ContenthashRecord,
-          {
-            contenthash: records.contenthash,
-            onContenthashChanged: (e) => handleContenthashUpdated(e),
-            onContenthashRemoved: () => handleContenthashRemoved(),
-            onContenthashAdded: (e) => handleContenthashAdded(e),
-            searchFilter
-          }
-        ) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: recordsInnerRef,
+          className: "col col-sm-9 col-12 ns-records-inner ns-styled-scrollbar",
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: generalCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
+              TextRecords,
+              {
+                initialTexts: initialRecords.texts,
+                texts: records.texts,
+                onTextsChanged: handleTextsUpdated,
+                category: TextRecordCategory.General,
+                searchFilter
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { ref: socialCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
+              TextRecords,
+              {
+                initialTexts: initialRecords.texts,
+                texts: records.texts,
+                onTextsChanged: handleTextsUpdated,
+                category: TextRecordCategory.Social,
+                searchFilter
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { ref: addressesCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
+              AddressRecords,
+              {
+                initialAddresses: initialRecords.addresses,
+                addresses: records.addresses,
+                onAddressesChanged: (e) => handleAddressesUpdated(e),
+                searchFilter
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { ref: websiteCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
+              ContenthashRecord,
+              {
+                contenthash: records.contenthash,
+                onContenthashChanged: (e) => handleContenthashUpdated(e),
+                onContenthashRemoved: () => handleContenthashRemoved(),
+                onContenthashAdded: (e) => handleContenthashAdded(e),
+                searchFilter
+              }
+            ) })
+          ]
+        }
+      )
     ] }) })
   ] });
 };
@@ -12652,5 +12783,5 @@ const useTheme = () => {
   return ctx;
 };
 
-export { Alert, Button, Card, ChainIcon, ContenthashIcon, ContenthashProtocol, Dropdown, ENSNameCard, ENS_RESOLVER_ABI, Icon, Input, MULTICALL, Modal, NavbarProfileCard, PendingTransaction, ProfileCard, ProfileHeader, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, Text, TextRecordCategory, ThemeProvider, Tooltip, TransactionState, capitalize, convertEVMChainIdToCoinType, deepCopy, equalsIgnoreCase, getEnsRecordsDiff, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isContenthashValid, supportedAddresses, supportedContenthashRecords, supportedTexts, useTheme, useWaitForTransaction, useWeb3Client };
+export { Alert, Button, Card, ChainIcon, ContenthashIcon, ContenthashProtocol, Dropdown, ENSNameCard, ENS_RESOLVER_ABI, Icon, Input, MULTICALL, Modal, NavbarProfileCard, PendingTransaction, ProfileCard, ProfileHeader, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionState, capitalize, convertEVMChainIdToCoinType, deepCopy, equalsIgnoreCase, getEnsRecordsDiff, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isContenthashValid, supportedAddresses, supportedContenthashRecords, supportedTexts, useTheme, useWaitForTransaction, useWeb3Client };
 //# sourceMappingURL=index.js.map