@thenamespace/ens-components 0.0.8-alpha → 0.1.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, createElement, useState, useRef, useEffect, useCallback, useMemo, createContext, useContext } from 'react';
-import { isAddress as isAddress$1, parseAbi, namehash, encodeFunctionData, toHex, ContractFunctionExecutionError } from 'viem';
+import { forwardRef, createElement, useState, useRef, useEffect, useMemo, useCallback, createContext, useContext } from 'react';
+import { isAddress as isAddress$1, parseAbi } from 'viem';
 import { mainnet, base as base$1, arbitrum, polygon, optimism, zora, celo } from 'viem/chains';
-import { usePublicClient, useWalletClient, useAccount, useSwitchChain } from 'wagmi';
+import { usePublicClient, useWalletClient } from 'wagmi';
 
 const sizeToClass = {
   sm: "ns-btn--sm",
@@ -222,7 +222,7 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$h = [
+const __iconNode$l = [
   [
     "path",
     {
@@ -231,7 +231,7 @@ const __iconNode$h = [
     }
   ]
 ];
-const Book = createLucideIcon("book", __iconNode$h);
+const Book = createLucideIcon("book", __iconNode$l);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -241,7 +241,7 @@ const Book = createLucideIcon("book", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$k = [
   [
     "path",
     {
@@ -252,7 +252,7 @@ const __iconNode$g = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box = createLucideIcon("box", __iconNode$g);
+const Box = createLucideIcon("box", __iconNode$k);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -262,12 +262,12 @@ const Box = createLucideIcon("box", __iconNode$g);
  */
 
 
-const __iconNode$f = [
+const __iconNode$j = [
   ["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$f);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$j);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -277,11 +277,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$i = [
   ["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$e);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$i);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -291,7 +291,7 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$h = [
   ["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" }],
@@ -300,7 +300,7 @@ const __iconNode$d = [
   ["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$d);
+const CircleFadingPlus = createLucideIcon("circle-fading-plus", __iconNode$h);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -310,12 +310,12 @@ const CircleFadingPlus = createLucideIcon("circle-fading-plus", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$g = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["circle", { cx: "12", cy: "10", r: "3", key: "ilqhr7" }],
   ["path", { d: "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662", key: "154egf" }]
 ];
-const CircleUser = createLucideIcon("circle-user", __iconNode$c);
+const CircleUser = createLucideIcon("circle-user", __iconNode$g);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -325,12 +325,12 @@ const CircleUser = createLucideIcon("circle-user", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$f = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-const CircleX = createLucideIcon("circle-x", __iconNode$b);
+const CircleX = createLucideIcon("circle-x", __iconNode$f);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -340,12 +340,40 @@ const CircleX = createLucideIcon("circle-x", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$e = [
+  ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
+];
+const Clock = createLucideIcon("clock", __iconNode$e);
+
+/**
+ * @license lucide-react v0.542.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$d = [
+  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
+  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
+];
+const Copy = createLucideIcon("copy", __iconNode$d);
+
+/**
+ * @license lucide-react v0.542.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$c = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
   ["path", { d: "M2 12h20", key: "9i4pu4" }]
 ];
-const Globe = createLucideIcon("globe", __iconNode$a);
+const Globe = createLucideIcon("globe", __iconNode$c);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -355,12 +383,12 @@ const Globe = createLucideIcon("globe", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$b = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image = createLucideIcon("image", __iconNode$9);
+const Image = createLucideIcon("image", __iconNode$b);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -370,12 +398,12 @@ const Image = createLucideIcon("image", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$8);
+const Info = createLucideIcon("info", __iconNode$a);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -385,11 +413,26 @@ const Info = createLucideIcon("info", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$9 = [
+  ["path", { d: "m16 17 5-5-5-5", key: "1bji2h" }],
+  ["path", { d: "M21 12H9", key: "dn1m92" }],
+  ["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", key: "1uf3rs" }]
+];
+const LogOut = createLucideIcon("log-out", __iconNode$9);
+
+/**
+ * @license lucide-react v0.542.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$8 = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ];
-const Mail = createLucideIcon("mail", __iconNode$7);
+const Mail = createLucideIcon("mail", __iconNode$8);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -399,7 +442,7 @@ const Mail = createLucideIcon("mail", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   [
     "path",
     {
@@ -409,7 +452,7 @@ const __iconNode$6 = [
   ],
   ["circle", { cx: "12", cy: "10", r: "3", key: "ilqhr7" }]
 ];
-const MapPin = createLucideIcon("map-pin", __iconNode$6);
+const MapPin = createLucideIcon("map-pin", __iconNode$7);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -419,7 +462,7 @@ const MapPin = createLucideIcon("map-pin", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$6 = [
   ["path", { d: "M12 17v5", key: "bb1du9" }],
   [
     "path",
@@ -429,7 +472,7 @@ const __iconNode$5 = [
     }
   ]
 ];
-const Pin = createLucideIcon("pin", __iconNode$5);
+const Pin = createLucideIcon("pin", __iconNode$6);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -439,11 +482,31 @@ const Pin = createLucideIcon("pin", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$5 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$5);
+
+/**
+ * @license lucide-react v0.542.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$4 = [
+  ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
+  [
+    "path",
+    {
+      d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z",
+      key: "ohrbg2"
+    }
+  ]
+];
+const SquarePen = createLucideIcon("square-pen", __iconNode$4);
 
 /**
  * @license lucide-react v0.542.0 - ISC
@@ -646,7 +709,11 @@ const icons$1 = {
   "alert-triangle": TriangleAlert,
   info: Info,
   "x-circle": CircleX,
-  "rotate-circle": CircleFadingPlus
+  "rotate-circle": CircleFadingPlus,
+  logout: LogOut,
+  edit: SquarePen,
+  copy: Copy,
+  clock: Clock
 };
 const Icon = ({
   name,
@@ -816,7 +883,10 @@ const BaseSvg = ({ size = 20, ...props }) => {
   );
 };
 
-const BitcoinSvg = ({ size = 20, ...props }) => {
+const BitcoinSvg = ({
+  size = 20,
+  ...props
+}) => {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -849,7 +919,13 @@ const MaticSvg = ({ size = 20, ...props }) => {
       ...props,
       children: /* @__PURE__ */ jsxs("g", { fill: "none", children: [
         /* @__PURE__ */ jsx("circle", { fill: "#6F41D8", cx: "16", cy: "16", r: "16" }),
-        /* @__PURE__ */ jsx("path", { d: "M21.092 12.693c-.369-.215-.848-.215-1.254 0l-2.879 1.654-1.955 1.078-2.879 1.653c-.369.216-.848.216-1.254 0l-2.288-1.294c-.369-.215-.627-.61-.627-1.042V12.19c0-.431.221-.826.627-1.042l2.25-1.258c.37-.216.85-.216 1.256 0l2.25 1.258c.37.216.628.611.628 1.042v1.654l1.955-1.115v-1.653a1.16 1.16 0 00-.627-1.042l-4.17-2.372c-.369-.216-.848-.216-1.254 0l-4.244 2.372A1.16 1.16 0 006 11.076v4.78c0 .432.221.827.627 1.043l4.244 2.372c.369.215.849.215 1.254 0l2.879-1.618 1.955-1.114 2.879-1.617c.369-.216.848-.216 1.254 0l2.251 1.258c.37.215.627.61.627 1.042v2.552c0 .431-.22.826-.627 1.042l-2.25 1.294c-.37.216-.85.216-1.255 0l-2.251-1.258c-.37-.216-.628-.611-.628-1.042v-1.654l-1.955 1.115v1.653c0 .431.221.827.627 1.042l4.244 2.372c.369.216.848.216 1.254 0l4.244-2.372c.369-.215.627-.61.627-1.042v-4.78a1.16 1.16 0 00-.627-1.042l-4.28-2.409z", fill: "#FFF" })
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M21.092 12.693c-.369-.215-.848-.215-1.254 0l-2.879 1.654-1.955 1.078-2.879 1.653c-.369.216-.848.216-1.254 0l-2.288-1.294c-.369-.215-.627-.61-.627-1.042V12.19c0-.431.221-.826.627-1.042l2.25-1.258c.37-.216.85-.216 1.256 0l2.25 1.258c.37.216.628.611.628 1.042v1.654l1.955-1.115v-1.653a1.16 1.16 0 00-.627-1.042l-4.17-2.372c-.369-.216-.848-.216-1.254 0l-4.244 2.372A1.16 1.16 0 006 11.076v4.78c0 .432.221.827.627 1.043l4.244 2.372c.369.215.849.215 1.254 0l2.879-1.618 1.955-1.114 2.879-1.617c.369-.216.848-.216 1.254 0l2.251 1.258c.37.215.627.61.627 1.042v2.552c0 .431-.22.826-.627 1.042l-2.25 1.294c-.37.216-.85.216-1.255 0l-2.251-1.258c-.37-.216-.628-.611-.628-1.042v-1.654l-1.955 1.115v1.653c0 .431.221.827.627 1.042l4.244 2.372c.369.216.848.216 1.254 0l4.244-2.372c.369-.215.627-.61.627-1.042v-4.78a1.16 1.16 0 00-.627-1.042l-4.28-2.409z",
+            fill: "#FFF"
+          }
+        )
       ] })
     }
   );
@@ -1246,530 +1322,109 @@ const Tooltip = ({
   );
 };
 
-var TransactionState = /* @__PURE__ */ ((TransactionState2) => {
-  TransactionState2["InProgress"] = "In Progress";
-  TransactionState2["Completed"] = "Completed";
-  TransactionState2["Failed"] = "Failed";
-  return TransactionState2;
-})(TransactionState || {});
-const PendingTransaction = ({
-  state,
-  blockExplorerUrl,
-  transactionHash,
-  className = ""
-}) => {
-  const getStatusIcon = () => {
-    switch (state) {
-      case "In Progress" /* InProgress */:
-        return /* @__PURE__ */ jsx("div", { className: "ns-pending-tx__spinner" });
-      case "Completed" /* Completed */:
-        return /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: 24 });
-      case "Failed" /* Failed */:
-        return /* @__PURE__ */ jsx(Icon, { name: "x-circle", size: 24 });
-      default:
-        return null;
-    }
+const Card = ({ children, className = "", ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: `ns-card ${className}`, ...props, children });
+};
+
+const capitalize = (value) => {
+  return value.charAt(0).toLocaleUpperCase() + value.substring(1);
+};
+const equalsIgnoreCase = (a, b) => {
+  return a.toLocaleLowerCase() === b.toLocaleLowerCase();
+};
+const deepCopy = (a) => {
+  return JSON.parse(JSON.stringify(a));
+};
+
+function convertEVMChainIdToCoinType(chainId) {
+  return (2147483648 | chainId) >>> 0;
+}
+
+const getEnsRecordsDiff = (oldRecords, newRecords) => {
+  const { textsAdded, textsModified, textsRemoved } = getEnsTextDiff(
+    oldRecords.texts,
+    newRecords.texts
+  );
+  const { addressesAdded, addressesModified, addressesRemoved } = getEnsAddressDiff(oldRecords.addresses, newRecords.addresses);
+  const { contenthashAdded, contenthashModified, contenthashRemoved } = getEnsContenthashDiff(oldRecords.contenthash, newRecords.contenthash);
+  return {
+    addressesAdded,
+    addressesModified,
+    addressesRemoved,
+    textsAdded,
+    textsModified,
+    textsRemoved,
+    contenthashAdded,
+    contenthashModified,
+    contenthashRemoved
   };
-  const getStatusMessage = () => {
-    switch (state) {
-      case "In Progress" /* InProgress */:
-        return "Transaction is being executed...";
-      case "Completed" /* Completed */:
-        return "Transaction completed successfully!";
-      case "Failed" /* Failed */:
-        return "Transaction failed!";
-      default:
-        return "";
+};
+const getEnsTextDiff = (oldTexts, newTexts) => {
+  if (oldTexts.length === 0) {
+    return {
+      textsAdded: newTexts,
+      textsModified: [],
+      textsRemoved: []
+    };
+  }
+  const oldTextMap = {};
+  const textsRemoved = [];
+  oldTexts.forEach((text) => {
+    oldTextMap[text.key] = text;
+    const existsInNew = newTexts.find((newText) => newText.key === text.key);
+    if (!existsInNew) {
+      textsRemoved.push(text);
     }
-  };
-  const getStatusClass = () => {
-    switch (state) {
-      case "In Progress" /* InProgress */:
-        return "ns-pending-tx--in-progress";
-      case "Completed" /* Completed */:
-        return "ns-pending-tx--completed";
-      case "Failed" /* Failed */:
-        return "ns-pending-tx--failed";
-      default:
-        return "";
+  });
+  const textsAdded = [];
+  const textsModified = [];
+  newTexts.forEach((newText) => {
+    const matchingOldText = oldTextMap[newText.key];
+    if (!matchingOldText) {
+      textsAdded.push(newText);
+    } else if (matchingOldText.value !== newText.value) {
+      textsModified.push(newText);
     }
+  });
+  return {
+    textsAdded,
+    textsModified,
+    textsRemoved
   };
-  const getIconClass = () => {
-    switch (state) {
-      case "In Progress" /* InProgress */:
-        return "ns-pending-tx__icon--in-progress";
-      case "Completed" /* Completed */:
-        return "ns-pending-tx__icon--completed";
-      case "Failed" /* Failed */:
-        return "ns-pending-tx__icon--failed";
-      default:
-        return "";
+};
+const getEnsAddressDiff = (oldAddresses, newAddresses) => {
+  if (oldAddresses.length === 0) {
+    return {
+      addressesAdded: newAddresses,
+      addressesModified: [],
+      addressesRemoved: []
+    };
+  }
+  const oldAddressMap = {};
+  const addressesRemoved = [];
+  oldAddresses.forEach((address) => {
+    oldAddressMap[address.coinType] = address;
+    const existsInNew = newAddresses.find(
+      (newAddress) => newAddress.coinType === address.coinType
+    );
+    if (!existsInNew) {
+      addressesRemoved.push(address);
+    }
+  });
+  const addressesAdded = [];
+  const addressesModified = [];
+  newAddresses.forEach((newAddress) => {
+    const matchinOldAddress = oldAddressMap[newAddress.coinType];
+    if (!matchinOldAddress) {
+      addressesAdded.push(newAddress);
+    } else if (matchinOldAddress.value !== newAddress.value) {
+      addressesModified.push(newAddress);
     }
-  };
-  return /* @__PURE__ */ jsx("div", { className: `ns-pending-tx ${getStatusClass()} ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "ns-pending-tx__content", children: [
-    /* @__PURE__ */ jsx("div", { className: `ns-pending-tx__icon ${getIconClass()}`, children: getStatusIcon() }),
-    /* @__PURE__ */ jsx("div", { className: "ns-pending-tx__status", children: /* @__PURE__ */ jsx(Text, { children: getStatusMessage() }) }),
-    transactionHash && /* @__PURE__ */ jsxs("p", { className: "ns-pending-tx__message", children: [
-      "Hash: ",
-      transactionHash.slice(0, 10),
-      "...",
-      transactionHash.slice(-8)
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: blockExplorerUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "ns-pending-tx__link",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "globe", size: 16, className: "ns-pending-tx__link-icon" }),
-          "View on Block Explorer"
-        ]
-      }
-    )
-  ] }) });
-};
-
-const Dropdown = ({
-  trigger,
-  children,
-  placement = "bottom",
-  align = "start",
-  disabled = false,
-  dataTestId
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const handleToggle = useCallback(() => {
-    if (!disabled) {
-      setIsOpen((prev) => !prev);
-    }
-  }, [disabled]);
-  const handleClickOutside = useCallback((event) => {
-    if (triggerRef.current && !triggerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  }, []);
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") setIsOpen(false);
-      });
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen, handleClickOutside]);
-  const getPlacementClasses = () => {
-    const placementClass = `ns-dropdown--${placement}`;
-    const alignClass = `ns-dropdown--align-${align}`;
-    return `${placementClass} ${alignClass}`;
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "ns-dropdown", "data-test-id": dataTestId, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: triggerRef,
-        className: "ns-dropdown__trigger",
-        onClick: handleToggle,
-        role: "button",
-        tabIndex: disabled ? -1 : 0,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "true",
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleToggle();
-          }
-        },
-        children: trigger
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: dropdownRef,
-        className: `ns-dropdown__menu ${getPlacementClasses()}`,
-        role: "menu",
-        "aria-orientation": "vertical",
-        children
-      }
-    )
-  ] });
-};
-
-var ContenthashProtocol = /* @__PURE__ */ ((ContenthashProtocol2) => {
-  ContenthashProtocol2["Ipfs"] = "ipfs";
-  ContenthashProtocol2["Onion"] = "onion3";
-  ContenthashProtocol2["Arweave"] = "arweave";
-  ContenthashProtocol2["Skynet"] = "skynet";
-  ContenthashProtocol2["Swarm"] = "swarm";
-  return ContenthashProtocol2;
-})(ContenthashProtocol || {});
-
-const IpfsIcon = ({ size = 20 }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 20 22",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#469EA2",
-            d: "m0 16.44 9.56 5.48 9.559-5.48V5.48L9.559 0 0 5.48z"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#6ACAD1",
-            d: "M8.58 1.31 1.64 5.289a2 2 0 0 1 0 .373l6.93 3.977a1.66 1.66 0 0 1 1.97 0l6.93-3.977a2 2 0 0 1 0-.373l-6.92-3.977a1.66 1.66 0 0 1-1.968 0m9.56 5.447-6.942 4.023c.038.348-.036.7-.212 1.005a1.67 1.67 0 0 1-.766.69l.011 7.91q.17.073.319.18l6.93-3.978c-.037-.348.037-.7.213-1.005s.444-.545.766-.69V6.939a2.3 2.3 0 0 1-.319-.181M.98 6.802q-.15.107-.319.181v7.955c.326.139.598.38.775.685.176.306.248.66.204 1.01l6.93 3.977q.15-.107.32-.18v-7.955a1.63 1.63 0 0 1-.775-.686 1.6 1.6 0 0 1-.205-1.01z"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#469EA2",
-            d: "m9.56 1.186 8.546 4.904v9.797L9.56 20.791l-8.547-4.904V6.079zm0-1.163L0 5.503v10.96l9.56 5.48 9.559-5.48V5.503z"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#469EA2",
-            d: "M9.628 12.825H9.49a1.8 1.8 0 0 1-1.264-.518 1.77 1.77 0 0 1-.522-1.256v-.136a1.76 1.76 0 0 1 .521-1.255 1.78 1.78 0 0 1 1.265-.519h.137a1.8 1.8 0 0 1 1.265.519 1.77 1.77 0 0 1 .521 1.255v.136a1.76 1.76 0 0 1-.521 1.256 1.78 1.78 0 0 1-1.265.518m0 7.288H9.49a1.79 1.79 0 0 0-1.559.904l1.628.927 1.627-.927a1.79 1.79 0 0 0-1.56-.904m9.502-5.48h-.068a1.8 1.8 0 0 0-1.265.518 1.77 1.77 0 0 0-.522 1.256v.135a1.7 1.7 0 0 0 .228.86l1.627-.939zM17.503 4.576a1.73 1.73 0 0 0-.228.859v.136a1.76 1.76 0 0 0 .522 1.255 1.78 1.78 0 0 0 1.265.519h.068V5.503zM9.56.023 7.932.949a1.78 1.78 0 0 0 1.56.915h.136A1.79 1.79 0 0 0 11.187.96zM1.627 4.565 0 5.503v1.842h.068a1.8 1.8 0 0 0 1.265-.519 1.77 1.77 0 0 0 .522-1.255v-.136a1.9 1.9 0 0 0-.228-.87M.068 14.633H0v1.83l1.627.938a1.73 1.73 0 0 0 .228-.859v-.135a1.76 1.76 0 0 0-.522-1.256 1.78 1.78 0 0 0-1.265-.518"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#083B54",
-            fillOpacity: "0.15",
-            d: "M9.56 22V11.028L0 5.548V16.52z"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "#083B54",
-            fillOpacity: "0.05",
-            d: "M19.13 16.418V5.458l-9.56 5.48V21.91z"
-          }
-        )
-      ]
-    }
-  );
-};
-
-const OnionIcon = ({ size = 20 }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size * 1.18,
-      "data-name": "Layer 1",
-      viewBox: "0 0 161 190",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "#7D50CF",
-          d: "M141.67 74.68c-16.3-17.8-41.29-40.85-44-52.41S102.17 0 102.17 0C90.76-.21 84.29 5.54 80.56 12.07 76.9 5.54 70.36-.21 59 0c0 0 7.25 10.62 4.52 22.26s-27.77 34.62-44 52.43c-45.45 49.76-6 115.82 61 115.82s106.53-66.06 61.15-115.83M80.56 175.29c-27 0-57.73-14.51-64.55-43.81-7.76-34.25 25.77-55.29 45.59-75.9l3.23 3.24c1.73 1.65 3.45 3.37 5.25 5-1.44 1.44-2.88 2.8-4.17 4.09C49.47 84 21 102.33 27.21 128.68c5.53 23.63 31.81 34.69 53.35 34.69s47.82-11.06 53.35-34.69c6.18-26.35-22.26-44.73-38.7-60.75C87.45 60.32 79.7 52.57 72 44.81a95 95 0 0 0 8.41-10.05l.14-.14.14.14c20.76 30.09 74.25 54.57 64.49 96.72-6.89 29.3-37.55 43.81-64.62 43.81m20.54-66.14a48 48 0 0 0-4.46-4.67l8.36-8.76c12.07 12.35 23.56 27.79 5.82 42.87-7.68 6.54-19.24 9.48-30.37 9.48s-22.62-2.94-30.31-9.48c-17.8-15.15-6.1-30.66 6-43.08l8.33 8.83a37.3 37.3 0 0 0-4.67 4.81c-13.14 16.3 6.1 26.43 20.61 26.43s33.83-10.13 20.69-26.43m-10.7 10.63a19.71 19.71 0 0 1-19.61-.07l4.1-23.41a11.62 11.62 0 1 1 17.3-10.13 11.44 11.44 0 0 1-6 10.13z"
-        }
-      )
-    }
-  );
-};
-
-const ArweaveIcon = ({ size = 20 }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      xmlSpace: "preserve",
-      width: size,
-      height: size,
-      viewBox: "0 0 31.8 31.8",
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "15.9",
-            cy: "15.9",
-            r: "14.7",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            className: "arweave_svg__st0"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M18.7 21.2c-.1-.1-.1-.3-.2-.5 0-.2-.1-.4-.1-.6-.2.2-.4.3-.6.5s-.5.3-.7.4c-.3.1-.5.2-.9.3-.3.1-.7.1-1 .1-.6 0-1.1-.1-1.6-.3s-.9-.4-1.3-.7-.6-.7-.8-1.1-.3-.9-.3-1.4c0-1.2.5-2.2 1.4-2.8.9-.7 2.3-1 4.1-1h1.7v-.7c0-.6-.2-1-.5-1.3-.4-.3-.9-.5-1.6-.5-.6 0-1 .1-1.3.4s-.4.6-.4 1h-3c0-.5.1-1 .3-1.4s.5-.8 1-1.2c.4-.3.9-.6 1.5-.8q.9-.3 2.1-.3c.7 0 1.3.1 1.9.3s1.1.4 1.6.8c.4.3.8.8 1 1.3s.4 1.1.4 1.8v5c0 .6 0 1.1.1 1.5s.2.8.3 1v.2zm-2.9-2.1c.3 0 .6 0 .8-.1.3-.1.5-.2.7-.3s.4-.2.5-.4l.4-.4v-2h-1.5c-.5 0-.9 0-1.2.1s-.6.2-.8.4-.4.3-.5.6c-.1.2-.1.5-.1.7 0 .4.1.7.4 1s.8.4 1.3.4",
-            className: "arweave_svg__st1"
-          }
-        )
-      ]
-    }
-  );
-};
-
-const SkynetIcon = ({ size = 20 }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      style: { color: "rgb(0, 198, 94)" },
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "#00c65e",
-          d: "m0 6.46 21.389 11.297a.917.917 0 0 1 .2 1.485h-.011a10 10 0 0 1-2.234 1.53c-6.912 3.474-14.991-1.837-14.543-9.56l2.86 1.975c.856 4.508 5.618 7.11 9.874 5.393zm8.647 3.151 14.366 5.679a.87.87 0 0 1 .52 1.046v.018a.872.872 0 0 1-1.257.526zm5.29-7.437c2.71-.233 6.095.787 8.111 3.387 1.7 2.195 2.05 4.877 1.93 7.646V13.2a.878.878 0 0 1-1.197.745l-9.765-3.86 9.065 2.432a7.3 7.3 0 0 0-1.068-4.563c-2.968-4.768-9.984-4.535-12.63.42a8 8 0 0 0-.397.883L5.555 7.961q.104-.15.214-.296c.116-.241.242-.487.38-.727 1.612-2.79 4.31-4.433 7.156-4.697.21-.018.421-.049.632-.067z"
-        }
-      )
-    }
-  );
-};
-
-const SwarmIcon = ({ size = 20 }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size * 1.03,
-      fill: "none",
-      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" })
-      ] })
-    }
-  );
-};
-
-const icons = {
-  [ContenthashProtocol.Ipfs]: IpfsIcon,
-  [ContenthashProtocol.Onion]: OnionIcon,
-  [ContenthashProtocol.Arweave]: ArweaveIcon,
-  [ContenthashProtocol.Skynet]: SkynetIcon,
-  [ContenthashProtocol.Swarm]: SwarmIcon
-};
-const ContenthashIcon = (props) => {
-  const { className, size, protocol, ...restProps } = props;
-  const _size = size || 20;
-  const IconComponent = icons[protocol];
-  if (!IconComponent) {
-    console.warn(`No icon found for protocol: ${protocol}`);
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: `ns-chain-icon ${className || ""}`, children: /* @__PURE__ */ jsx(IconComponent, { size: _size }) });
-};
-
-const variantConfig = {
-  error: { icon: "x-circle", colorClass: "ns-alert-error" },
-  warning: { icon: "alert-triangle", colorClass: "ns-alert-warning" },
-  info: { icon: "info", colorClass: "ns-alert-info" },
-  success: { icon: "check-circle", colorClass: "ns-alert-success" }
-};
-const Alert = ({
-  variant = "info",
-  children,
-  className = "",
-  onClose,
-  dismissible = false,
-  title
-}) => {
-  const config = variantConfig[variant];
-  return /* @__PURE__ */ jsx("div", { className: `ns-alert ${config.colorClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "ns-alert-content", children: [
-    /* @__PURE__ */ jsx("div", { className: "ns-alert-icon", children: /* @__PURE__ */ jsx(Icon, { name: config.icon, size: 20 }) }),
-    /* @__PURE__ */ jsxs("div", { className: "ns-alert-message", children: [
-      title && /* @__PURE__ */ jsx("div", { className: "ns-alert-title", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "ns-alert-description", children })
-    ] }),
-    dismissible && onClose && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "ns-alert-close",
-        onClick: onClose,
-        "aria-label": "Close alert",
-        type: "button",
-        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 })
-      }
-    )
-  ] }) });
-};
-
-const Modal = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  footer,
-  size = "md",
-  isDismissDisabled,
-  titleId,
-  className = "",
-  style
-}) => {
-  const overlayRef = useRef(null);
-  const dialogRef = useRef(null);
-  useEffect(() => {
-    if (!isOpen || isDismissDisabled) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, isDismissDisabled, onClose]);
-  const handleOverlayClick = (e) => {
-    if (isDismissDisabled) return;
-    if (e.target === overlayRef.current) onClose();
-  };
-  if (!isOpen) return null;
-  const sizeClass = `ns-modal--${size}`;
-  const classes = ["ns-modal", className, sizeClass].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: overlayRef,
-      className: "ns-modal-overlay",
-      onMouseDown: handleOverlayClick,
-      "aria-hidden": !isOpen,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: dialogRef,
-          className: classes,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": title ? titleId || "ns-modal-title" : void 0,
-          style,
-          children: [
-            (title || !isDismissDisabled) && /* @__PURE__ */ jsxs("div", { className: "ns-modal__header", children: [
-              title && /* @__PURE__ */ jsx("div", { className: "ns-modal__title", id: titleId || "ns-modal-title", children: typeof title === "string" ? /* @__PURE__ */ jsx(Text, { size: "lg", weight: "medium", children: title }) : title }),
-              !isDismissDisabled && /* @__PURE__ */ jsx("button", { className: "ns-modal__close", "aria-label": "Close", onClick: onClose, children: "\xD7" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "ns-modal__body", children }),
-            /* @__PURE__ */ jsx("div", { className: "ns-modal__footer", children: footer !== void 0 ? footer : /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Close" }) })
-          ]
-        }
-      )
-    }
-  );
-};
-
-const capitalize = (value) => {
-  return value.charAt(0).toLocaleUpperCase() + value.substring(1);
-};
-const equalsIgnoreCase = (a, b) => {
-  return a.toLocaleLowerCase() === b.toLocaleLowerCase();
-};
-const deepCopy = (a) => {
-  return JSON.parse(JSON.stringify(a));
-};
-
-function convertEVMChainIdToCoinType(chainId) {
-  return (2147483648 | chainId) >>> 0;
-}
-
-const getEnsRecordsDiff = (oldRecords, newRecords) => {
-  const { textsAdded, textsModified, textsRemoved } = getEnsTextDiff(
-    oldRecords.texts,
-    newRecords.texts
-  );
-  const { addressesAdded, addressesModified, addressesRemoved } = getEnsAddressDiff(oldRecords.addresses, newRecords.addresses);
-  const { contenthashAdded, contenthashModified, contenthashRemoved } = getEnsContenthashDiff(oldRecords.contenthash, newRecords.contenthash);
-  return {
-    addressesAdded,
-    addressesModified,
-    addressesRemoved,
-    textsAdded,
-    textsModified,
-    textsRemoved,
-    contenthashAdded,
-    contenthashModified,
-    contenthashRemoved
-  };
-};
-const getEnsTextDiff = (oldTexts, newTexts) => {
-  if (oldTexts.length === 0) {
-    return {
-      textsAdded: newTexts,
-      textsModified: [],
-      textsRemoved: []
-    };
-  }
-  const oldTextMap = {};
-  const textsRemoved = [];
-  oldTexts.forEach((text) => {
-    oldTextMap[text.key] = text;
-    const existsInNew = newTexts.find((newText) => newText.key === text.key);
-    if (!existsInNew) {
-      textsRemoved.push(text);
-    }
-  });
-  const textsAdded = [];
-  const textsModified = [];
-  newTexts.forEach((newText) => {
-    const matchingOldText = oldTextMap[newText.key];
-    if (!matchingOldText) {
-      textsAdded.push(newText);
-    } else if (matchingOldText.value !== newText.value) {
-      textsModified.push(newText);
-    }
-  });
-  return {
-    textsAdded,
-    textsModified,
-    textsRemoved
-  };
-};
-const getEnsAddressDiff = (oldAddresses, newAddresses) => {
-  if (oldAddresses.length === 0) {
-    return {
-      addressesAdded: newAddresses,
-      addressesModified: [],
-      addressesRemoved: []
-    };
-  }
-  const oldAddressMap = {};
-  const addressesRemoved = [];
-  oldAddresses.forEach((address) => {
-    oldAddressMap[address.coinType] = address;
-    const existsInNew = newAddresses.find(
-      (newAddress) => newAddress.coinType === address.coinType
-    );
-    if (!existsInNew) {
-      addressesRemoved.push(address);
-    }
-  });
-  const addressesAdded = [];
-  const addressesModified = [];
-  newAddresses.forEach((newAddress) => {
-    const matchinOldAddress = oldAddressMap[newAddress.coinType];
-    if (!matchinOldAddress) {
-      addressesAdded.push(newAddress);
-    } else if (matchinOldAddress.value !== newAddress.value) {
-      addressesModified.push(newAddress);
-    }
-  });
-  return {
-    addressesAdded,
-    addressesModified,
-    addressesRemoved
+  });
+  return {
+    addressesAdded,
+    addressesModified,
+    addressesRemoved
   };
 };
 const getEnsContenthashDiff = (oldRecord, newRecord) => {
@@ -9857,7 +9512,7 @@ const nonEvmCoinTypeToNameMap = Object.freeze({
     "5718350": ["wan", "Wanchain"],
     "5741564": ["waves", "Waves"],
 });
-const coinTypeToNameMap = Object.freeze({
+Object.freeze({
     ...nonEvmCoinTypeToNameMap,
     ...evmCoinTypeToNameMap,
 });
@@ -9896,31 +9551,6 @@ const getCoderByCoinName = (name) => {
     }
     return format;
 };
-const getCoderByCoinType = (coinType) => {
-    const names = coinTypeToNameMap[String(coinType)];
-    // https://docs.ens.domains/ens-improvement-proposals/ensip-11-evmchain-address-resolution
-    if (coinType >= SLIP44_MSB) {
-        // EVM coin
-        const evmChainId = coinTypeToEvmChainId(coinType);
-        const isUnknownChain = !names;
-        const name = isUnknownChain ? `Unknown Chain (${evmChainId})` : names[0]; // name is derivable
-        const ethFormat = eth;
-        return {
-            name,
-            coinType: coinType,
-            evmChainId,
-            isUnknownChain,
-            encode: ethFormat.encode,
-            decode: ethFormat.decode,
-        };
-    }
-    if (!names) {
-        throw new Error(`Unsupported coin type: ${coinType}`);
-    }
-    const [name] = names;
-    const format = formats[name];
-    return format;
-};
 
 const isValidEmvAddress = (value) => {
   return isAddress$1(value);
@@ -10038,6 +9668,15 @@ const getSupportedAddressByName = (name) => {
   return supportedAddresses.find((addr) => addr.chainName === name);
 };
 
+var ContenthashProtocol = /* @__PURE__ */ ((ContenthashProtocol2) => {
+  ContenthashProtocol2["Ipfs"] = "ipfs";
+  ContenthashProtocol2["Onion"] = "onion3";
+  ContenthashProtocol2["Arweave"] = "arweave";
+  ContenthashProtocol2["Skynet"] = "skynet";
+  ContenthashProtocol2["Swarm"] = "swarm";
+  return ContenthashProtocol2;
+})(ContenthashProtocol || {});
+
 /**
  * @param {Uint8Array} aa
  * @param {Uint8Array} bb
@@ -11791,31 +11430,155 @@ const TextRecords = ({
     onTextsChanged([...texts, { key, value: initialText?.value || "" }]);
     setLastAddedKey(key);
   };
-  const handleRemoveText = (key) => {
-    onTextsChanged(texts.filter((text) => text.key !== key));
+  const handleRemoveText = (key) => {
+    onTextsChanged(texts.filter((text) => text.key !== key));
+  };
+  const filterSuggestions = (record) => {
+    if (searchFilter && searchFilter.length > 0) {
+      const lowercase = searchFilter.toLocaleLowerCase();
+      const label = record.label || "";
+      return record.key.toLocaleLowerCase().includes(lowercase) || label.toLocaleLowerCase().includes(lowercase);
+    }
+    return true;
+  };
+  const filteredItems = useMemo(() => {
+    const shownTextCategory = [category];
+    if (category === TextRecordCategory.General) {
+      shownTextCategory.push(TextRecordCategory.Image);
+    }
+    return supportedTexts.filter(
+      (record) => filterSuggestions(record) && shownTextCategory.includes(record.category)
+    );
+  }, [searchFilter]);
+  if (filteredItems.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
+    /* @__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];
+      return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: { marginBottom: "4px" },
+            color: "grey",
+            size: "xs",
+            weight: "medium",
+            children: record.label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { width: "100%" },
+            className: "d-flex align-items-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: (el) => {
+                    inputRefs.current[record.key] = el;
+                  },
+                  style: { width: "100%" },
+                  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
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: () => handleRemoveText(record.key),
+                  className: "ns-close-icon ns-ms-1",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
+                }
+              )
+            ]
+          }
+        )
+      ] }, 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", 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)) })
+  ] });
+};
+
+const AddressRecords = ({
+  addresses,
+  onAddressesChanged,
+  initialAddresses,
+  searchFilter
+}) => {
+  const existingAddressMap = useMemo(() => {
+    const map = {};
+    addresses.forEach((addr) => {
+      map[addr.coinType] = addr;
+    });
+    return map;
+  }, [addresses]);
+  const [lastAddedKey, setLastAddedKey] = useState(null);
+  const inputRefs = useRef({});
+  useEffect(() => {
+    if (lastAddedKey && inputRefs.current[lastAddedKey]) {
+      inputRefs.current[lastAddedKey]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+      inputRefs.current[lastAddedKey]?.focus();
+      setLastAddedKey(null);
+    }
+  }, [addresses, lastAddedKey]);
+  const handleAddressChanged = (coin, value) => {
+    const _addresses = [...addresses];
+    for (const addr of _addresses) {
+      if (addr.coinType === coin) {
+        addr.value = value;
+      }
+    }
+    onAddressesChanged(_addresses);
+  };
+  const handleAddressAdded = (coin) => {
+    const initialAddress = initialAddresses.find((i) => i.coinType === coin);
+    onAddressesChanged([
+      ...addresses,
+      { coinType: coin, value: initialAddress?.value || "" }
+    ]);
+    setLastAddedKey(`${coin}`);
   };
-  const filterSuggestions = (record) => {
+  const handleRemoveAddress = (coin) => {
+    onAddressesChanged(addresses.filter((addr) => addr.coinType !== coin));
+  };
+  const filterAddress = (address) => {
     if (searchFilter && searchFilter.length > 0) {
       const lowercase = searchFilter.toLocaleLowerCase();
-      const label = record.label || "";
-      return record.key.toLocaleLowerCase().includes(lowercase) || label.toLocaleLowerCase().includes(lowercase);
+      return address.chainName.includes(lowercase) || address.label.toLocaleLowerCase().includes(lowercase);
     }
     return true;
   };
-  const filteredItems = useMemo(() => {
-    const shownTextCategory = [category];
-    if (category === TextRecordCategory.General) {
-      shownTextCategory.push(TextRecordCategory.Image);
-    }
-    return supportedTexts.filter((record) => filterSuggestions(record) && shownTextCategory.includes(record.category));
+  const filteredAddresses = useMemo(() => {
+    return supportedAddresses.filter((record) => filterAddress(record));
   }, [searchFilter]);
-  if (filteredItems.length === 0) {
+  if (filteredAddresses.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
-    /* @__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];
+    /* @__PURE__ */ jsx(Text, { className: "ns-mb-2", weight: "bold", children: "Addresses" }),
+    filteredAddresses.filter((record) => existingAddressMap[record.coinType] !== void 0).map((record) => {
+      const current = existingAddressMap[record.coinType];
+      const isInvalidAddress = current.value.length > 0 && !record.validateFunc?.(current.value);
       return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
         /* @__PURE__ */ jsx(
           Text,
@@ -11827,181 +11590,438 @@ const TextRecords = ({
             children: record.label
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { width: "100%" },
+            className: "d-flex align-items-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: (el) => {
+                    inputRefs.current[record.coinType] = el;
+                  },
+                  error: isInvalidAddress,
+                  style: { width: "100%" },
+                  onChange: (e) => handleAddressChanged(record.coinType, e.target.value),
+                  prefix: /* @__PURE__ */ jsx(ChainIcon, { chain: record.chainName, size: 18 }),
+                  value: current.value,
+                  placeholder: record.placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: () => handleRemoveAddress(record.coinType),
+                  className: "ns-close-icon ns-ms-1",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
+                }
+              )
+            ]
+          }
+        ),
+        isInvalidAddress && /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            color: "danger",
+            className: "ns-mt-1",
+            children: `${record.label} address is not valid`
+          }
+        )
+      ] }, 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(
+      "div",
+      {
+        className: "ns-text-suggestion",
+        onClick: () => handleAddressAdded(record.coinType),
+        children: [
+          /* @__PURE__ */ jsx(ChainIcon, { size: 20, chain: record.chainName }),
+          /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
+        ]
+      }
+    ) }, record.coinType)) })
+  ] });
+};
+
+const Dropdown = ({
+  trigger,
+  children,
+  placement = "bottom",
+  align = "start",
+  disabled = false,
+  dataTestId
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const handleToggle = useCallback(() => {
+    if (!disabled) {
+      setIsOpen((prev) => !prev);
+    }
+  }, [disabled]);
+  const handleClickOutside = useCallback((event) => {
+    if (triggerRef.current && !triggerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") setIsOpen(false);
+      });
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, handleClickOutside]);
+  const getPlacementClasses = () => {
+    const placementClass = `ns-dropdown--${placement}`;
+    const alignClass = `ns-dropdown--align-${align}`;
+    return `${placementClass} ${alignClass}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ns-dropdown", "data-test-id": dataTestId, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "ns-dropdown__trigger",
+        onClick: handleToggle,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleToggle();
+          }
+        },
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dropdownRef,
+        className: `ns-dropdown__menu ${getPlacementClasses()}`,
+        role: "menu",
+        "aria-orientation": "vertical",
+        children
+      }
+    )
+  ] });
+};
+
+const IpfsIcon = ({ size = 20 }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 20 22",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#469EA2",
+            d: "m0 16.44 9.56 5.48 9.559-5.48V5.48L9.559 0 0 5.48z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#6ACAD1",
+            d: "M8.58 1.31 1.64 5.289a2 2 0 0 1 0 .373l6.93 3.977a1.66 1.66 0 0 1 1.97 0l6.93-3.977a2 2 0 0 1 0-.373l-6.92-3.977a1.66 1.66 0 0 1-1.968 0m9.56 5.447-6.942 4.023c.038.348-.036.7-.212 1.005a1.67 1.67 0 0 1-.766.69l.011 7.91q.17.073.319.18l6.93-3.978c-.037-.348.037-.7.213-1.005s.444-.545.766-.69V6.939a2.3 2.3 0 0 1-.319-.181M.98 6.802q-.15.107-.319.181v7.955c.326.139.598.38.775.685.176.306.248.66.204 1.01l6.93 3.977q.15-.107.32-.18v-7.955a1.63 1.63 0 0 1-.775-.686 1.6 1.6 0 0 1-.205-1.01z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#469EA2",
+            d: "m9.56 1.186 8.546 4.904v9.797L9.56 20.791l-8.547-4.904V6.079zm0-1.163L0 5.503v10.96l9.56 5.48 9.559-5.48V5.503z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#469EA2",
+            d: "M9.628 12.825H9.49a1.8 1.8 0 0 1-1.264-.518 1.77 1.77 0 0 1-.522-1.256v-.136a1.76 1.76 0 0 1 .521-1.255 1.78 1.78 0 0 1 1.265-.519h.137a1.8 1.8 0 0 1 1.265.519 1.77 1.77 0 0 1 .521 1.255v.136a1.76 1.76 0 0 1-.521 1.256 1.78 1.78 0 0 1-1.265.518m0 7.288H9.49a1.79 1.79 0 0 0-1.559.904l1.628.927 1.627-.927a1.79 1.79 0 0 0-1.56-.904m9.502-5.48h-.068a1.8 1.8 0 0 0-1.265.518 1.77 1.77 0 0 0-.522 1.256v.135a1.7 1.7 0 0 0 .228.86l1.627-.939zM17.503 4.576a1.73 1.73 0 0 0-.228.859v.136a1.76 1.76 0 0 0 .522 1.255 1.78 1.78 0 0 0 1.265.519h.068V5.503zM9.56.023 7.932.949a1.78 1.78 0 0 0 1.56.915h.136A1.79 1.79 0 0 0 11.187.96zM1.627 4.565 0 5.503v1.842h.068a1.8 1.8 0 0 0 1.265-.519 1.77 1.77 0 0 0 .522-1.255v-.136a1.9 1.9 0 0 0-.228-.87M.068 14.633H0v1.83l1.627.938a1.73 1.73 0 0 0 .228-.859v-.135a1.76 1.76 0 0 0-.522-1.256 1.78 1.78 0 0 0-1.265-.518"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#083B54",
+            fillOpacity: "0.15",
+            d: "M9.56 22V11.028L0 5.548V16.52z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#083B54",
+            fillOpacity: "0.05",
+            d: "M19.13 16.418V5.458l-9.56 5.48V21.91z"
+          }
+        )
+      ]
+    }
+  );
+};
+
+const OnionIcon = ({ size = 20 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size * 1.18,
+      "data-name": "Layer 1",
+      viewBox: "0 0 161 190",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#7D50CF",
+          d: "M141.67 74.68c-16.3-17.8-41.29-40.85-44-52.41S102.17 0 102.17 0C90.76-.21 84.29 5.54 80.56 12.07 76.9 5.54 70.36-.21 59 0c0 0 7.25 10.62 4.52 22.26s-27.77 34.62-44 52.43c-45.45 49.76-6 115.82 61 115.82s106.53-66.06 61.15-115.83M80.56 175.29c-27 0-57.73-14.51-64.55-43.81-7.76-34.25 25.77-55.29 45.59-75.9l3.23 3.24c1.73 1.65 3.45 3.37 5.25 5-1.44 1.44-2.88 2.8-4.17 4.09C49.47 84 21 102.33 27.21 128.68c5.53 23.63 31.81 34.69 53.35 34.69s47.82-11.06 53.35-34.69c6.18-26.35-22.26-44.73-38.7-60.75C87.45 60.32 79.7 52.57 72 44.81a95 95 0 0 0 8.41-10.05l.14-.14.14.14c20.76 30.09 74.25 54.57 64.49 96.72-6.89 29.3-37.55 43.81-64.62 43.81m20.54-66.14a48 48 0 0 0-4.46-4.67l8.36-8.76c12.07 12.35 23.56 27.79 5.82 42.87-7.68 6.54-19.24 9.48-30.37 9.48s-22.62-2.94-30.31-9.48c-17.8-15.15-6.1-30.66 6-43.08l8.33 8.83a37.3 37.3 0 0 0-4.67 4.81c-13.14 16.3 6.1 26.43 20.61 26.43s33.83-10.13 20.69-26.43m-10.7 10.63a19.71 19.71 0 0 1-19.61-.07l4.1-23.41a11.62 11.62 0 1 1 17.3-10.13 11.44 11.44 0 0 1-6 10.13z"
+        }
+      )
+    }
+  );
+};
+
+const ArweaveIcon = ({ size = 20 }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlSpace: "preserve",
+      width: size,
+      height: size,
+      viewBox: "0 0 31.8 31.8",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "15.9",
+            cy: "15.9",
+            r: "14.7",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            className: "arweave_svg__st0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            style: { width: "100%" },
-            className: "d-flex align-items-center",
-            children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  ref: (el) => {
-                    inputRefs.current[record.key] = el;
-                  },
-                  style: { width: "100%" },
-                  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
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  onClick: () => handleRemoveText(record.key),
-                  className: "ns-close-icon ns-ms-1",
-                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
-                }
-              )
-            ]
+            fill: "currentColor",
+            d: "M18.7 21.2c-.1-.1-.1-.3-.2-.5 0-.2-.1-.4-.1-.6-.2.2-.4.3-.6.5s-.5.3-.7.4c-.3.1-.5.2-.9.3-.3.1-.7.1-1 .1-.6 0-1.1-.1-1.6-.3s-.9-.4-1.3-.7-.6-.7-.8-1.1-.3-.9-.3-1.4c0-1.2.5-2.2 1.4-2.8.9-.7 2.3-1 4.1-1h1.7v-.7c0-.6-.2-1-.5-1.3-.4-.3-.9-.5-1.6-.5-.6 0-1 .1-1.3.4s-.4.6-.4 1h-3c0-.5.1-1 .3-1.4s.5-.8 1-1.2c.4-.3.9-.6 1.5-.8q.9-.3 2.1-.3c.7 0 1.3.1 1.9.3s1.1.4 1.6.8c.4.3.8.8 1 1.3s.4 1.1.4 1.8v5c0 .6 0 1.1.1 1.5s.2.8.3 1v.2zm-2.9-2.1c.3 0 .6 0 .8-.1.3-.1.5-.2.7-.3s.4-.2.5-.4l.4-.4v-2h-1.5c-.5 0-.9 0-1.2.1s-.6.2-.8.4-.4.3-.5.6c-.1.2-.1.5-.1.7 0 .4.1.7.4 1s.8.4 1.3.4",
+            className: "arweave_svg__st1"
           }
         )
-      ] }, 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", children: /* @__PURE__ */ jsxs(
-      "div",
+      ]
+    }
+  );
+};
+
+const SkynetIcon = ({ size = 20 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      style: { color: "rgb(0, 198, 94)" },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#00c65e",
+          d: "m0 6.46 21.389 11.297a.917.917 0 0 1 .2 1.485h-.011a10 10 0 0 1-2.234 1.53c-6.912 3.474-14.991-1.837-14.543-9.56l2.86 1.975c.856 4.508 5.618 7.11 9.874 5.393zm8.647 3.151 14.366 5.679a.87.87 0 0 1 .52 1.046v.018a.872.872 0 0 1-1.257.526zm5.29-7.437c2.71-.233 6.095.787 8.111 3.387 1.7 2.195 2.05 4.877 1.93 7.646V13.2a.878.878 0 0 1-1.197.745l-9.765-3.86 9.065 2.432a7.3 7.3 0 0 0-1.068-4.563c-2.968-4.768-9.984-4.535-12.63.42a8 8 0 0 0-.397.883L5.555 7.961q.104-.15.214-.296c.116-.241.242-.487.38-.727 1.612-2.79 4.31-4.433 7.156-4.697.21-.018.421-.049.632-.067z"
+        }
+      )
+    }
+  );
+};
+
+const SwarmIcon = ({ size = 20 }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size * 1.03,
+      fill: "none",
+      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" })
+      ] })
+    }
+  );
+};
+
+const icons = {
+  [ContenthashProtocol.Ipfs]: IpfsIcon,
+  [ContenthashProtocol.Onion]: OnionIcon,
+  [ContenthashProtocol.Arweave]: ArweaveIcon,
+  [ContenthashProtocol.Skynet]: SkynetIcon,
+  [ContenthashProtocol.Swarm]: SwarmIcon
+};
+const ContenthashIcon = (props) => {
+  const { className, size, protocol, ...restProps } = props;
+  const _size = size || 20;
+  const IconComponent = icons[protocol];
+  if (!IconComponent) {
+    console.warn(`No icon found for protocol: ${protocol}`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: `ns-chain-icon ${className || ""}`, children: /* @__PURE__ */ jsx(IconComponent, { size: _size }) });
+};
+
+const variantConfig = {
+  error: { icon: "x-circle", colorClass: "ns-alert-error" },
+  warning: { icon: "alert-triangle", colorClass: "ns-alert-warning" },
+  info: { icon: "info", colorClass: "ns-alert-info" },
+  success: { icon: "check-circle", colorClass: "ns-alert-success" }
+};
+const Alert = ({
+  variant = "info",
+  children,
+  className = "",
+  onClose,
+  dismissible = false,
+  title
+}) => {
+  const config = variantConfig[variant];
+  return /* @__PURE__ */ jsx("div", { className: `ns-alert ${config.colorClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "ns-alert-content", children: [
+    /* @__PURE__ */ jsx("div", { className: "ns-alert-icon", children: /* @__PURE__ */ jsx(Icon, { name: config.icon, size: 20 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ns-alert-message", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "ns-alert-title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "ns-alert-description", children })
+    ] }),
+    dismissible && onClose && /* @__PURE__ */ jsx(
+      "button",
       {
-        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 })
-        ]
+        className: "ns-alert-close",
+        onClick: onClose,
+        "aria-label": "Close alert",
+        type: "button",
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 })
       }
-    ) }, record.key)) })
-  ] });
+    )
+  ] }) });
 };
 
-const AddressRecords = ({
-  addresses,
-  onAddressesChanged,
-  initialAddresses,
-  searchFilter
+const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = "md",
+  isDismissDisabled,
+  titleId,
+  className = "",
+  style
 }) => {
-  const existingAddressMap = useMemo(() => {
-    const map = {};
-    addresses.forEach((addr) => {
-      map[addr.coinType] = addr;
-    });
-    return map;
-  }, [addresses]);
-  const [lastAddedKey, setLastAddedKey] = useState(null);
-  const inputRefs = useRef({});
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
   useEffect(() => {
-    if (lastAddedKey && inputRefs.current[lastAddedKey]) {
-      inputRefs.current[lastAddedKey]?.scrollIntoView({
-        behavior: "smooth",
-        block: "center"
-      });
-      inputRefs.current[lastAddedKey]?.focus();
-      setLastAddedKey(null);
-    }
-  }, [addresses, lastAddedKey]);
-  const handleAddressChanged = (coin, value) => {
-    const _addresses = [...addresses];
-    for (const addr of _addresses) {
-      if (addr.coinType === coin) {
-        addr.value = value;
-      }
-    }
-    onAddressesChanged(_addresses);
-  };
-  const handleAddressAdded = (coin) => {
-    const initialAddress = initialAddresses.find((i) => i.coinType === coin);
-    onAddressesChanged([
-      ...addresses,
-      { coinType: coin, value: initialAddress?.value || "" }
-    ]);
-    setLastAddedKey(`${coin}`);
-  };
-  const handleRemoveAddress = (coin) => {
-    onAddressesChanged(addresses.filter((addr) => addr.coinType !== coin));
-  };
-  const filterAddress = (address) => {
-    if (searchFilter && searchFilter.length > 0) {
-      const lowercase = searchFilter.toLocaleLowerCase();
-      return address.chainName.includes(lowercase) || address.label.toLocaleLowerCase().includes(lowercase);
-    }
-    return true;
+    if (!isOpen || isDismissDisabled) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, isDismissDisabled, onClose]);
+  const handleOverlayClick = (e) => {
+    if (isDismissDisabled) return;
+    if (e.target === overlayRef.current) onClose();
   };
-  const filteredAddresses = useMemo(() => {
-    return supportedAddresses.filter((record) => filterAddress(record));
-  }, [searchFilter]);
-  if (filteredAddresses.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
-    /* @__PURE__ */ jsx(Text, { className: "ns-mb-2", weight: "bold", children: "Addresses" }),
-    filteredAddresses.filter((record) => existingAddressMap[record.coinType] !== void 0).map((record) => {
-      const current = existingAddressMap[record.coinType];
-      const isInvalidAddress = current.value.length > 0 && !record.validateFunc?.(current.value);
-      return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: { marginBottom: "4px" },
-            color: "grey",
-            size: "xs",
-            weight: "medium",
-            children: record.label
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: { width: "100%" },
-            className: "d-flex align-items-center",
-            children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  ref: (el) => {
-                    inputRefs.current[record.coinType] = el;
-                  },
-                  error: isInvalidAddress,
-                  style: { width: "100%" },
-                  onChange: (e) => handleAddressChanged(record.coinType, e.target.value),
-                  prefix: /* @__PURE__ */ jsx(ChainIcon, { chain: record.chainName, size: 18 }),
-                  value: current.value,
-                  placeholder: record.placeholder
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
+  if (!isOpen) return null;
+  const sizeClass = `ns-modal--${size}`;
+  const classes = ["ns-modal", className, sizeClass].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: "ns-modal-overlay",
+      onMouseDown: handleOverlayClick,
+      "aria-hidden": !isOpen,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          className: classes,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId || "ns-modal-title" : void 0,
+          style,
+          children: [
+            (title || !isDismissDisabled) && /* @__PURE__ */ jsxs("div", { className: "ns-modal__header", children: [
+              title && /* @__PURE__ */ jsx("div", { className: "ns-modal__title", id: titleId || "ns-modal-title", children: typeof title === "string" ? /* @__PURE__ */ jsx(Text, { size: "lg", weight: "medium", children: title }) : title }),
+              !isDismissDisabled && /* @__PURE__ */ jsx(
+                "button",
                 {
-                  onClick: () => handleRemoveAddress(record.coinType),
-                  className: "ns-close-icon ns-ms-1",
-                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18 })
+                  className: "ns-modal__close",
+                  "aria-label": "Close",
+                  onClick: onClose,
+                  children: "\xD7"
                 }
               )
-            ]
-          }
-        ),
-        isInvalidAddress && /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "xs",
-            color: "danger",
-            className: "ns-mt-1",
-            children: `${record.label} address is not valid`
-          }
-        )
-      ] }, 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(
-      "div",
-      {
-        className: "ns-text-suggestion",
-        onClick: () => handleAddressAdded(record.coinType),
-        children: [
-          /* @__PURE__ */ jsx(ChainIcon, { size: 20, chain: record.chainName }),
-          /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
-        ]
-      }
-    ) }, record.coinType)) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ns-modal__body", children }),
+            /* @__PURE__ */ jsx("div", { className: "ns-modal__footer", children: footer !== void 0 ? footer : /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Close" }) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+const ProfileHeader = ({
+  bannerUrl,
+  avatarUrl,
+  chainIcon = "/icons/eth.svg",
+  name,
+  username,
+  bio,
+  followers = 0,
+  following = 0,
+  primary = false,
+  onFollowClick,
+  dataTestId
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "ns-profile-header", "data-test-id": dataTestId, children: [
+    /* @__PURE__ */ jsx("div", { className: "ns-profile-header__banner", children: /* @__PURE__ */ jsx("img", { src: bannerUrl, alt: "profile banner" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ns-profile-header__avatar", children: [
+      /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: name, className: "ns-avatar-img" }),
+      chainIcon && /* @__PURE__ */ jsx("span", { className: "ns-profile-header__chain", children: /* @__PURE__ */ jsx("img", { src: chainIcon, alt: "chain icon" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ns-profile-header__info", children: [
+      username && /* @__PURE__ */ jsx("div", { className: "ns-profile-header__username", children: username }),
+      /* @__PURE__ */ jsx("h2", { className: "ns-profile-header__name", children: name }),
+      primary && /* @__PURE__ */ jsx("span", { className: "ns-profile-header__primary", children: "Your primary name" }),
+      bio && /* @__PURE__ */ jsx("p", { className: "ns-profile-header__bio", children: bio }),
+      /* @__PURE__ */ jsxs("div", { className: "ns-profile-header__stats", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          followers,
+          " Followers"
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          following,
+          " Following"
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "ns-profile-header__follow", onClick: onFollowClick, children: "Follow" })
+      ] })
+    ] })
   ] });
 };
 
@@ -12324,287 +12344,257 @@ const SelectRecordsForm = ({
   ] });
 };
 
-const SET_TEXT_FUNC = "function setText(bytes32 node, string key, string value)";
-const SET_ADDRESS_FUNC = "function setAddr(bytes32 node, uint256 coin, bytes value)";
-const SET_CONTENTHASH_FUNC = "function setContenthash(bytes32 node, bytes value)";
-const MULTICALL = "function multicall(bytes[] data)";
-const ENS_RESOLVER_ABI = parseAbi([
-  SET_TEXT_FUNC,
-  SET_ADDRESS_FUNC,
-  SET_CONTENTHASH_FUNC,
-  MULTICALL
-]);
-
-const convertToMulticallResolverData = (name, recordsDiff) => {
-  const node = namehash(name);
-  const resolverMulticallData = [];
-  convertTextData(node, resolverMulticallData, recordsDiff);
-  convertAddressData(node, resolverMulticallData, recordsDiff);
-  convertContenthashData(node, resolverMulticallData, recordsDiff);
-  return resolverMulticallData;
-};
-const convertTextData = (node, resolverData, diff) => {
-  const modifiedTexts = [
-    ...diff.textsAdded,
-    ...diff.textsModified
-  ];
-  modifiedTexts.forEach((text) => {
-    const data = encodeFunctionData({
-      functionName: "setText",
-      abi: parseAbi([SET_TEXT_FUNC]),
-      args: [node, text.key, text.value]
-    });
-    resolverData.push(data);
-  });
-  diff.textsModified.forEach((text) => {
-    const data = encodeFunctionData({
-      functionName: "setText",
-      abi: parseAbi([SET_TEXT_FUNC]),
-      args: [node, text.key, ""]
-    });
-    resolverData.push(data);
-  });
-};
-const convertAddressData = (node, resolverData, diff) => {
-  const modifiedAddressMap = {};
-  diff.addressesAdded.forEach((addr) => {
-    modifiedAddressMap[addr.coinType] = addr;
-  });
-  diff.addressesModified.forEach((addr) => {
-    modifiedAddressMap[addr.coinType] = addr;
-  });
-  const modifiedAddresses = Object.values(modifiedAddressMap);
-  modifiedAddresses.forEach((addr) => {
-    const coinEncoder = getCoderByCoinType(addr.coinType);
-    if (!coinEncoder) {
-      throw Error(
-        `Coin type is not supported: ${addr.coinType}. Cannot get an encoder`
-      );
-    }
-    const decode = coinEncoder.decode(addr.value);
-    const hexValue = toHex(decode);
-    const data = encodeFunctionData({
-      functionName: "setAddr",
-      abi: parseAbi([SET_ADDRESS_FUNC]),
-      args: [node, BigInt(addr.coinType), hexValue]
-    });
-    resolverData.push(data);
-  });
-  diff.addressesRemoved.forEach((addr) => {
-    const data = encodeFunctionData({
-      functionName: "setAddr",
-      abi: parseAbi([SET_ADDRESS_FUNC]),
-      args: [node, BigInt(addr.coinType), "0x"]
-    });
-    resolverData.push(data);
-  });
-};
-const convertContenthashData = (node, resolverData, diff) => {
-  if (diff.contenthashRemoved) {
-    const data = encodeFunctionData({
-      functionName: "setContenthash",
-      abi: parseAbi([SET_CONTENTHASH_FUNC]),
-      args: [node, "0x"]
-    });
-    resolverData.push(data);
-    return;
-  }
-  let contenthash = void 0;
-  if (diff.contenthashModified !== void 0) {
-    contenthash = diff.contenthashModified;
-  } else if (diff.contenthashAdded !== void 0) {
-    contenthash = diff.contenthashAdded;
-  }
-  if (contenthash !== void 0) {
-    const { protocol, value } = contenthash;
-    const encodedValue = `0x${encode(protocol, value)}`;
-    const data = encodeFunctionData({
-      functionName: "setContenthash",
-      abi: parseAbi([SET_CONTENTHASH_FUNC]),
-      args: [node, encodedValue]
-    });
-    resolverData.push(data);
-  }
-};
-
-const addressMapByCoin = getSupportedAddressMap();
-const EnsRecordsForm = ({
-  name,
-  initialRecords,
-  chainId,
-  resolverAddress,
-  onCancel,
-  onSuccess
+var TransactionState = /* @__PURE__ */ ((TransactionState2) => {
+  TransactionState2["InProgress"] = "In Progress";
+  TransactionState2["Completed"] = "Completed";
+  TransactionState2["Failed"] = "Failed";
+  return TransactionState2;
+})(TransactionState || {});
+const PendingTransaction = ({
+  state,
+  blockExplorerUrl,
+  transactionHash,
+  className = ""
 }) => {
-  const [records, setRecords] = useState(
-    initialRecords ? deepCopy(initialRecords) : { texts: [], addresses: [] }
-  );
-  const currentChainId = chainId || mainnet.id;
-  const publicClient = usePublicClient({ chainId: currentChainId });
-  const { data: walletClient } = useWalletClient({ chainId: currentChainId });
-  const { address, chain, isConnected } = useAccount();
-  const { switchChain } = useSwitchChain();
-  const [contractError, setContractError] = useState(null);
-  const [generalError, setGeneralError] = useState(null);
-  const [txIndicator, setTxIndicator] = useState({
-    isWaitingForTx: false,
-    isWaitingForWallet: false
-  });
-  const shouldSwitchNetwork = chain && chain.id !== currentChainId;
-  useEffect(() => {
-    if (!address) {
-      setGeneralError({
-        title: "Not connected",
-        subtitle: "Connect wallet to continue"
-      });
-    } else {
-      setGeneralError(null);
-    }
-  }, [address, publicClient, walletClient]);
-  const areValidAddresses = useMemo(() => {
-    for (const addr of records.addresses) {
-      const validateFuc = addressMapByCoin[addr.coinType].validateFunc;
-      if (!validateFuc) {
-        throw Error("Validate function not present for coin:" + addr.coinType);
-      }
-      if (addr.value?.length === 0 || !validateFuc(addr.value)) {
-        return false;
-      }
-    }
-    return true;
-  }, [records.addresses]);
-  const areValidTexts = useMemo(() => {
-    for (const text of records.texts) {
-      if (text.value.length === 0) {
-        return false;
-      }
+  const getStatusIcon = () => {
+    switch (state) {
+      case "In Progress" /* InProgress */:
+        return /* @__PURE__ */ jsx("div", { className: "ns-pending-tx__spinner" });
+      case "Completed" /* Completed */:
+        return /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: 24 });
+      case "Failed" /* Failed */:
+        return /* @__PURE__ */ jsx(Icon, { name: "x-circle", size: 24 });
+      default:
+        return null;
     }
-    return true;
-  }, [records.texts]);
-  useMemo(() => {
-    if (!records.contenthash) {
-      return true;
+  };
+  const getStatusMessage = () => {
+    switch (state) {
+      case "In Progress" /* InProgress */:
+        return "Transaction is being executed...";
+      case "Completed" /* Completed */:
+        return "Transaction completed successfully!";
+      case "Failed" /* Failed */:
+        return "Transaction failed!";
+      default:
+        return "";
     }
-    return isContenthashValid(
-      records.contenthash.protocol,
-      records.contenthash.value
-    );
-  }, [records.contenthash]);
-  const getInitalRecords = () => {
-    return initialRecords ? initialRecords : { texts: [], addresses: [] };
   };
-  const isDiffPresent = useMemo(() => {
-    const diff = getEnsRecordsDiff(getInitalRecords(), records);
-    const {
-      addressesAdded,
-      addressesModified,
-      addressesRemoved,
-      textsAdded,
-      textsModified,
-      textsRemoved,
-      contenthashRemoved,
-      contenthashAdded,
-      contenthashModified
-    } = diff;
-    return addressesAdded.length > 0 || addressesModified.length > 0 || addressesRemoved.length || textsAdded.length > 0 || textsRemoved.length > 0 || textsModified.length > 0 || contenthashRemoved === true || contenthashModified !== void 0 || contenthashAdded !== void 0;
-  }, [records, initialRecords]);
-  const handleUpdateRecords = async () => {
-    try {
-      const old = initialRecords ? initialRecords : { texts: [], addresses: [] };
-      const diff = getEnsRecordsDiff(old, records);
-      const resolverData = convertToMulticallResolverData(name, diff);
-      setTxIndicator({ ...txIndicator, isWaitingForWallet: true });
-      const { request } = await publicClient.simulateContract({
-        abi: ENS_RESOLVER_ABI,
-        args: [resolverData],
-        functionName: "multicall",
-        address: resolverAddress,
-        account: address
-      });
-      const tx = await walletClient.writeContract(request);
-      setTxIndicator({ isWaitingForTx: true, isWaitingForWallet: false });
-      await publicClient.waitForTransactionReceipt({ hash: tx });
-      onSuccess?.(tx);
-    } catch (err) {
-      console.error(err);
-      if (err instanceof ContractFunctionExecutionError) {
-        const _err = err;
-        setContractError(_err.details);
-      } else {
-        setContractError("Transaction failed for unknown reason!");
-      }
-    } finally {
-      setTxIndicator({ isWaitingForTx: false, isWaitingForWallet: false });
+  const getStatusClass = () => {
+    switch (state) {
+      case "In Progress" /* InProgress */:
+        return "ns-pending-tx--in-progress";
+      case "Completed" /* Completed */:
+        return "ns-pending-tx--completed";
+      case "Failed" /* Failed */:
+        return "ns-pending-tx--failed";
+      default:
+        return "";
     }
   };
-  const getActionButton = () => {
-    const areInputsValue = areValidAddresses && areValidTexts && isContenthashValid;
-    const style = { width: "100%" };
-    if (!isConnected) {
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          style,
-          size: "lg",
-          disabled: true,
-          prefix: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle" }),
-          children: "Connect Wallet"
-        }
-      );
-    } else if (shouldSwitchNetwork) {
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          style,
-          size: "lg",
-          onClick: () => switchChain({ chainId: currentChainId }),
-          children: "Switch Network"
-        }
-      );
-    } else if (!areInputsValue) {
-      return /* @__PURE__ */ jsx(Tooltip, { content: "Invalid inputs", position: "top", children: /* @__PURE__ */ jsx(Button, { style, size: "lg", disabled: true, children: "Update" }) });
-    } else if (!isDiffPresent) {
-      return /* @__PURE__ */ jsx(Tooltip, { content: "No Records updated", position: "top", children: /* @__PURE__ */ jsx(Button, { style, size: "lg", disabled: true, children: "Update" }) });
-    } else {
-      const updateBtnLoading = txIndicator.isWaitingForTx || txIndicator.isWaitingForWallet;
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          style,
-          size: "lg",
-          disabled: updateBtnLoading,
-          loading: updateBtnLoading,
-          onClick: () => handleUpdateRecords(),
-          children: "Update"
-        }
-      );
+  const getIconClass = () => {
+    switch (state) {
+      case "In Progress" /* InProgress */:
+        return "ns-pending-tx__icon--in-progress";
+      case "Completed" /* Completed */:
+        return "ns-pending-tx__icon--completed";
+      case "Failed" /* Failed */:
+        return "ns-pending-tx__icon--failed";
+      default:
+        return "";
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "ns-edit-records-form", children: [
+  return /* @__PURE__ */ jsx("div", { className: `ns-pending-tx ${getStatusClass()} ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "ns-pending-tx__content", children: [
+    /* @__PURE__ */ jsx("div", { className: `ns-pending-tx__icon ${getIconClass()}`, children: getStatusIcon() }),
+    /* @__PURE__ */ jsx("div", { className: "ns-pending-tx__status", children: /* @__PURE__ */ jsx(Text, { children: getStatusMessage() }) }),
+    transactionHash && /* @__PURE__ */ jsxs("p", { className: "ns-pending-tx__message", children: [
+      "Hash: ",
+      transactionHash.slice(0, 10),
+      "...",
+      transactionHash.slice(-8)
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: blockExplorerUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "ns-pending-tx__link",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "globe", size: 16, className: "ns-pending-tx__link-icon" }),
+          "View on Block Explorer"
+        ]
+      }
+    )
+  ] }) });
+};
+
+const ENSNameCard = ({
+  name,
+  imageUrl,
+  expires,
+  chain = "eth",
+  className = ""
+}) => /* @__PURE__ */ jsxs(Card, { className: `ens-name-card ${className}`, children: [
+  /* @__PURE__ */ jsxs("div", { className: "ens-card-image-container", children: [
+    /* @__PURE__ */ jsx("img", { src: imageUrl, alt: `${name} avatar`, className: "ens-card-image" }),
+    /* @__PURE__ */ jsx("div", { className: "ens-card-badge", children: /* @__PURE__ */ jsx(ChainIcon, { chain, size: 25 }) })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "ens-card-body", children: [
+    /* @__PURE__ */ jsx(Text, { weight: "bold", children: name }),
+    /* @__PURE__ */ jsxs("div", { className: "ens-card-expiry", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "clock", size: 14 }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+        "Expires ",
+        expires
+      ] })
+    ] })
+  ] })
+] });
+
+const ProfileCard = ({
+  bannerUrl,
+  avatarUrl,
+  name,
+  username,
+  bio,
+  address,
+  followers = 0,
+  following = 0,
+  ownedBy,
+  expires,
+  records = [],
+  website,
+  subnames = 0,
+  profit = 0,
+  volume = 0,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs("section", { className: `ns-profile-card ${className}`, children: [
+    /* @__PURE__ */ jsxs("header", { className: "ns-profile-info", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ns-profile-banner", children: [
+        /* @__PURE__ */ jsx("img", { src: bannerUrl, alt: "Profile banner" }),
+        /* @__PURE__ */ jsxs("div", { className: "ns-profile-avatar", children: [
+          /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: name + " avatar" }),
+          /* @__PURE__ */ jsx("div", { className: "ns-avatar-badge", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: "https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png",
+              alt: "chain icon",
+              className: "ns-avatar-badge-icon"
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ns-profile-body", children: [
+        /* @__PURE__ */ jsx(Text, { color: "primary", weight: "bold", children: name }),
+        /* @__PURE__ */ jsxs("div", { className: "ns-username-container", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xl", weight: "bold", children: username }),
+          /* @__PURE__ */ jsx("span", { className: "ns-edit-btn", children: /* @__PURE__ */ jsx(Icon, { name: "edit", size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "md", className: "ns-profile-bio", children: bio }),
+        /* @__PURE__ */ jsxs("div", { className: "ns-profile-socials", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ns-address-box", children: [
+            /* @__PURE__ */ jsx(Text, { color: "grey", className: "ns-address-text", size: "sm", children: address }),
+            /* @__PURE__ */ jsx(Icon, { name: "copy", size: 16 })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Icon, { name: "twitter", color: "#000000", size: 16 }) }),
+          /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Icon, { name: "telegram", color: "#000000", size: 16 }) }),
+          /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Icon, { name: "globe", color: "#000000", size: 16 }) }),
+          /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Icon, { name: "github", color: "#000000", size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ns-profile-stats", children: /* @__PURE__ */ jsxs("div", { className: "ns-stats-row", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+            followers,
+            " Followers"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { children: "\u2022" }),
+          /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+            following,
+            " Following"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: "Follow" })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "ns-profile-section ns-profile-links", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ns-extra-item", children: [
+        /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+          "Owned by ",
+          ownedBy
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "ns-extra-btn", children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ns-extra-item", children: [
+        /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+          "Expires ",
+          expires
+        ] }),
+        /* @__PURE__ */ jsx(Icon, { name: "info", size: 16 })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ns-extra-item", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: address }),
+        /* @__PURE__ */ jsx(Icon, { name: "map-pin", size: 16 })
+      ] }),
+      website && /* @__PURE__ */ jsxs("div", { className: "ns-extra-item", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: website }),
+        /* @__PURE__ */ jsx("a", { href: website, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(Icon, { name: "globe", size: 16 }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("footer", { className: "ns-profile-footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ns-footer-item", children: [
+        /* @__PURE__ */ jsx(Text, { className: "ns-footer-label", children: subnames }),
+        /* @__PURE__ */ jsx(Text, { className: "ns-footer-text", children: "Subnames" })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { className: "ns-footer-dot", children: "\u2022" }),
+      /* @__PURE__ */ jsxs("div", { className: "ns-footer-item", children: [
+        /* @__PURE__ */ jsx(Text, { className: "ns-footer-label", children: profit }),
+        /* @__PURE__ */ jsx(Text, { className: "ns-footer-text", children: "Profit" })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { className: "ns-footer-dot", children: "\u2022" }),
+      /* @__PURE__ */ jsxs("div", { className: "ns-footer-item", children: [
+        /* @__PURE__ */ jsx(Text, { className: "ns-footer-label", children: volume }),
+        /* @__PURE__ */ jsx(Text, { className: "ns-footer-text", children: "Volume" })
+      ] })
+    ] })
+  ] });
+};
+
+const NavbarProfileCard = ({
+  imageUrl,
+  name,
+  address,
+  onLogout,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs("nav", { className: `ns-navbar-profile ${className}`, "aria-label": "Profile", children: [
     /* @__PURE__ */ jsx(
-      SelectRecordsForm,
+      "img",
       {
-        records,
-        onRecordsUpdated: (records2) => setRecords(records2)
+        src: imageUrl,
+        alt: name + " avatar",
+        className: "ns-navbar-profile-avatar"
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { padding: 15, paddingTop: 0 }, children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", style: { gap: "8px" }, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => onCancel?.(),
-          size: "lg",
-          style: { width: "100%" },
-          variant: "outline",
-          children: "Cancel"
-        }
-      ),
-      getActionButton()
-    ] }) })
+    /* @__PURE__ */ jsxs("div", { className: "ns-navbar-profile-info", children: [
+      /* @__PURE__ */ jsx(Text, { color: "primary", size: "md", children: name }),
+      /* @__PURE__ */ jsx(Text, { color: "grey", size: "sm", children: address })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "ns-navbar-profile-action",
+        onClick: onLogout,
+        "aria-label": "Logout",
+        children: /* @__PURE__ */ jsx(Icon, { name: "logout", size: 18 })
+      }
+    )
   ] });
 };
 
-const useWaitForTransaction = ({ chainId: number }) => {
+const useWaitForTransaction = ({
+  chainId: number
+}) => {
 };
 
 const useWeb3Client = ({ chainId }) => {
@@ -12616,6 +12606,17 @@ const useWeb3Client = ({ chainId }) => {
   };
 };
 
+const SET_TEXT_FUNC = "function setText(bytes32 node, string key, string value)";
+const SET_ADDRESS_FUNC = "function setAddr(bytes32 node, uint256 coin, bytes value)";
+const SET_CONTENTHASH_FUNC = "function setContenthash(bytes32 node, bytes value)";
+const MULTICALL = "function multicall(bytes[] data)";
+const ENS_RESOLVER_ABI = parseAbi([
+  SET_TEXT_FUNC,
+  SET_ADDRESS_FUNC,
+  SET_CONTENTHASH_FUNC,
+  MULTICALL
+]);
+
 const ThemeContext = createContext(void 0);
 const ThemeProvider = ({
   initialTheme = "light",
@@ -12651,5 +12652,5 @@ const useTheme = () => {
   return ctx;
 };
 
-export { Alert, Button, ChainIcon, ContenthashIcon, ContenthashProtocol, Dropdown, ENS_RESOLVER_ABI, EnsRecordsForm, Icon, Input, MULTICALL, Modal, PendingTransaction, 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, ThemeProvider, Tooltip, TransactionState, capitalize, convertEVMChainIdToCoinType, deepCopy, equalsIgnoreCase, getEnsRecordsDiff, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isContenthashValid, supportedAddresses, supportedContenthashRecords, supportedTexts, useTheme, useWaitForTransaction, useWeb3Client };
 //# sourceMappingURL=index.js.map