@thenamespace/ens-components 0.0.5-alpha → 0.0.7-alpha

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-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 } from 'viem/chains';
-import { usePublicClient, useWalletClient } from 'wagmi';
+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 { mainnet, base as base$1, arbitrum, polygon, optimism, zora, celo } from 'viem/chains';
+import { usePublicClient, useWalletClient, useAccount, useSwitchChain } from 'wagmi';
 
 const sizeToClass = {
   sm: "ns-btn--sm",
@@ -671,16 +671,27 @@ const Icon = ({
   );
 };
 
-const ChainIcon = ({
-  chain,
-  size = 20,
-  className,
-  ...props
-}) => {
-  const renderIcon = () => {
-    switch (chain) {
-      case "eth":
-        return /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_597_2890)", children: [
+const EthSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_597_2890", children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "19",
+            height: "19",
+            fill: "white",
+            transform: "translate(0.255859 0.5)"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_597_2890)", children: [
           /* @__PURE__ */ jsx(
             "path",
             {
@@ -734,228 +745,347 @@ const ChainIcon = ({
               fillOpacity: "0.602"
             }
           )
-        ] });
-      case "arb":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#2d374b",
-              d: "m24.554 20.16 3.23-5.482 8.71 13.565.005 2.604-.029-17.915a1.35 1.35 0 0 0-.624-1.075l-15.68-9.02a1.38 1.38 0 0 0-1.339.087l-.055.034-15.22 8.82-.06.028a1.34 1.34 0 0 0-.787 1.146L2.73 27.55l8.113-12.574c1.02-1.667 3.246-2.205 5.313-2.175l2.424.064-14.286 22.91 1.684.97 14.457-23.857 6.39-.023-14.42 24.459 6.01 3.457.718.412c.303.124.661.13.968.02L36 31.996l-3.04 1.762zm1.232 17.757-6.069-9.526 3.705-6.287 7.971 12.564-5.607 3.25Z"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#28a0f0",
-              d: "m19.715 28.392 6.07 9.525 5.606-3.249-7.97-12.564zm16.783 2.455-.004-2.604-8.71-13.565-3.231 5.483 8.408 13.598L36 31.997c.298-.242.479-.597.498-.98z"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#fff",
-              d: "m0 33.302 4.293 2.474L18.58 12.865l-2.424-.064c-2.066-.03-4.291.508-5.313 2.175L2.73 27.55 0 31.743zm26.825-20.437-6.39.023L5.976 36.745l5.053 2.91 1.375-2.331 14.42-24.46Z"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#96bedc",
-              d: "M39.191 12.832a4.07 4.07 0 0 0-1.91-3.272L21.394.424a4.13 4.13 0 0 0-3.645 0C17.617.49 2.3 9.373 2.3 9.373a4.04 4.04 0 0 0-2.3 3.45v18.92l2.73-4.194-.024-14.599a1.35 1.35 0 0 1 .562-1.015c.071-.05 15.649-9.068 15.699-9.093a1.38 1.38 0 0 1 1.198-.006l15.68 9.02c.371.236.604.637.624 1.075v18.084c-.018.383-.17.739-.468.98l-3.04 1.763-1.569.909-5.607 3.249-5.685 3.295a1.38 1.38 0 0 1-.968-.02l-6.727-3.868-1.375 2.33 6.046 3.481.524.297c.226.127.38.211.435.238.43.209 1.048.33 1.605.33.51 0 1.009-.094 1.48-.278l16.515-9.564a4.04 4.04 0 0 0 1.556-3.042z"
-            }
-          )
-        ] });
-      case "base":
-        return /* @__PURE__ */ jsx(
+        ] })
+      ]
+    }
+  );
+};
+
+const ArbSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 40 44",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
           "path",
           {
-            fill: "#0052ff",
-            d: "M54.921 110.034c30.438 0 55.113-24.632 55.113-55.017S85.359 0 54.921 0C26.043 0 2.353 22.171 0 50.392h72.847v9.25H0c2.353 28.22 26.043 50.392 54.921 50.392"
+            fill: "#2d374b",
+            d: "m24.554 20.16 3.23-5.482 8.71 13.565.005 2.604-.029-17.915a1.35 1.35 0 0 0-.624-1.075l-15.68-9.02a1.38 1.38 0 0 0-1.339.087l-.055.034-15.22 8.82-.06.028a1.34 1.34 0 0 0-.787 1.146L2.73 27.55l8.113-12.574c1.02-1.667 3.246-2.205 5.313-2.175l2.424.064-14.286 22.91 1.684.97 14.457-23.857 6.39-.023-14.42 24.459 6.01 3.457.718.412c.303.124.661.13.968.02L36 31.996l-3.04 1.762zm1.232 17.757-6.069-9.526 3.705-6.287 7.971 12.564-5.607 3.25Z"
           }
-        );
-      case "bitcoin":
-        return /* @__PURE__ */ jsx(
+        ),
+        /* @__PURE__ */ jsx(
           "path",
           {
-            fill: "#f39321",
-            d: "M43.43 125.143c7.71-10.766 14.875-21.901 23.562-31.986 15.8-18.343 33.692-34.063 54.18-47.075 18.379-11.672 37.761-20.872 58.501-27.305 32.294-10.018 65.26-12.997 98.838-9.165 24.544 2.801 48.191 9.067 70.713 19.215 13.633 6.142 26.456 13.731 39.025 21.927 25.328 16.515 45.618 38.014 62.58 62.577 18.116 26.236 29.889 55.421 36.346 86.725 4.535 21.983 6.449 44.171 4.503 66.504-2.399 27.536-8.514 54.086-19.938 79.604-9.662 21.583-21.589 41.401-36.861 59.301-14.94 17.511-31.788 32.831-51.149 45.461-13.184 8.6-26.926 16.276-41.434 21.975-24.274 9.537-49.447 15.986-75.787 17.115-18.545.795-36.985.483-55.279-2.763-15.713-2.788-31.049-6.858-46.063-12.496-14.566-5.47-28.693-11.95-41.709-20.143-18.766-11.812-35.683-26.147-50.737-42.663-16.773-18.403-30.373-38.808-40.779-61.344-14.7-31.835-21.929-65.401-22.359-100.425-.162-13.173 1.349-26.244 3.105-39.283.126-.933-.002-1.899-.012-2.851 1.536-.952 1.4-2.618 1.677-4.071 3.906-20.483 10.494-40.059 19.418-58.906 3.162-6.674 7.525-12.764 9.659-19.928m281.727 129.37c6.537-3.474 12.749-5.465 17.658-9.85 18.918-16.899 23.96-56.673-6.747-75.833-9.566-5.969-19.77-10.393-30.77-14.907 1.819-14.731 7.709-28.516 9.622-43.603-9.076-2.249-17.578-5.234-26.425-6.193l-10.674 41.837c-6.78-2.076-13.761-1.879-20.142-5.473 2.302-14.39 7.773-27.872 9.268-42.314-9.322-1.464-17.216-5.094-26.265-5.485l-10.586 42.215c-17.944-2.75-34.419-8.921-52.52-12.239-3.977 8.91-5.738 18.311-7.334 28.313 5.896 1.392 11.022 2.623 16.158 3.811 12.965 2.998 16.517 10.086 13.439 21.424-2.19 8.065-4.166 16.189-6.182 24.301-7.245 29.16-14.432 58.333-21.72 87.482-1.642 6.567-5.734 8.706-12.398 7.731-6.563-.96-12.757-3.907-19.99-3.693-3.136 10.032-9.378 18.871-11.588 29.946l51.344 13.08c-1.312 15.208-7.614 29.125-9.476 44.441l25.544 6.123c5.653-14.044 6.957-28.803 12.226-43.33 6.351 3.265 13.397 2.317 19.612 6.427l-10.178 42.077c8.986 3.216 17.753 4.528 26.758 6.77l10.578-42.386c2.123-1.091 3.676-.888 5.143-.574a132.9 132.9 0 0 0 42.676 2.14c12.368-1.373 23.343-6.088 32.148-15.372 9.791-10.323 14.71-22.952 17.078-36.535 1.93-11.065 1.436-22.277-5.06-32.071-5.091-7.674-12.084-13.53-21.197-18.26M223.128 312.17c17.411 4.325 34.803 8.95 53.02 5.624 9.715-1.774 17.037-6.73 19.985-16.503 2.78-9.218 1.164-17.593-5.673-24.879-7.11-7.576-16.254-11.514-25.682-14.807-11.264-3.934-22.683-7.508-34.99-8.48l-13.972 56.788c2.981.929 5.117 1.712 7.312 2.257m61.5-80.324c9.628-1.368 17.612-7.738 19.958-16.393 2.869-10.583-.337-19.865-8.902-26.178-9.718-7.163-20.908-10.807-32.47-13.337-4.307-.943-8.544-3.454-13.756-1.759l-12.599 51.209c16.457 4.155 31.611 8.753 47.769 6.458"
+            fill: "#28a0f0",
+            d: "m19.715 28.392 6.07 9.525 5.606-3.249-7.97-12.564zm16.783 2.455-.004-2.604-8.71-13.565-3.231 5.483 8.408 13.598L36 31.997c.298-.242.479-.597.498-.98z"
           }
-        );
-      case "matic":
-        return /* @__PURE__ */ jsx("path", { d: "M377.3 163.9c-9.2-5.4-21.2-5.4-31.4 0l-72 41.7-48.9 27.2-72 41.7c-9.2 5.4-21.2 5.4-31.4 0l-57.2-32.6c-9.2-5.4-15.7-15.4-15.7-26.3v-64.3c0-10.9 5.5-20.8 15.7-26.3l56.3-31.7c9.2-5.4 21.2-5.4 31.4 0l56.3 31.7c9.2 5.4 15.7 15.4 15.7 26.3V193l48.9-28.1v-41.7c0-10.9-5.5-20.8-15.7-26.3L153.1 37.1c-9.2-5.4-21.2-5.4-31.4 0l-106 59.8C5.5 102.3 0 112.3 0 123.2v120.5c0 10.9 5.5 20.8 15.7 26.3l106.1 59.8c9.2 5.4 21.2 5.4 31.4 0l72-40.8 48.9-28.1 72-40.8c9.2-5.4 21.2-5.4 31.4 0l56.3 31.7c9.2 5.4 15.7 15.4 15.7 26.3v64.3c0 10.9-5.5 20.8-15.7 26.3l-56.3 32.6c-9.2 5.4-21.2 5.4-31.4 0l-56.3-31.7c-9.2-5.4-15.7-15.4-15.7-26.3v-41.7l-48.9 28.1v41.7c0 10.9 5.5 20.8 15.7 26.3L347 457.5c9.2 5.4 21.2 5.4 31.4 0l106.1-59.8c9.2-5.4 15.7-15.4 15.7-26.3V250.9c0-10.9-5.5-20.8-15.7-26.3z" });
-      case "op":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#ff0420",
-              d: "M42 84c23.196 0 42-18.804 42-42S65.196 0 42 0 0 18.804 0 42s18.804 42 42 42"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "#fff",
-              d: "M30.461 53.76q-3.8 0-6.226-1.83-2.395-1.861-2.395-5.291 0-.72.16-1.764.414-2.352 1.181-5.651 2.171-8.984 11.208-8.984 2.46 0 4.407.85 1.947.817 3.065 2.482 1.118 1.635 1.118 3.92 0 .687-.16 1.732a76 76 0 0 1-1.15 5.65q-1.116 4.476-3.863 6.697-2.747 2.19-7.345 2.19Zm.448-4.704q1.788 0 3.033-1.078 1.277-1.077 1.82-3.3.735-3.07 1.118-5.356.127-.687.127-1.405 0-2.973-3.033-2.973-1.788 0-3.065 1.078-1.245 1.078-1.789 3.3-.574 2.188-1.15 5.357a7 7 0 0 0-.127 1.372q0 3.005 3.066 3.005m13.536 4.377q-.351 0-.543-.229a.8.8 0 0 1-.096-.588l4.407-21.233a.94.94 0 0 1 .351-.588.96.96 0 0 1 .607-.229h8.494q3.544 0 5.684 1.503 2.17 1.503 2.171 4.345a8 8 0 0 1-.192 1.698q-.798 3.757-3.225 5.554-2.395 1.797-6.578 1.797h-4.31l-1.47 7.153a.94.94 0 0 1-.35.588.96.96 0 0 1-.607.23zm11.304-12.478q1.34 0 2.33-.752 1.023-.751 1.342-2.156.096-.555.096-.98 0-.947-.543-1.437-.544-.523-1.852-.523H53.29l-1.213 5.848z"
-            }
-          )
-        ] });
-      case "sol":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("path", { d: "M250 0c138 0 250 111.9 250 250S388 500 250 500 0 388 0 250 111.9 0 250 0" }),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: "SolIcon_svg__a",
-              x1: "242.52",
-              x2: "755.68",
-              y1: "267.33",
-              y2: "-245.83",
-              gradientTransform: "matrix(.5 0 0 .5 0 250)",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0", style: { stopColor: "rgb(203, 78, 232)" } }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", style: { stopColor: "rgb(16, 244, 177)" } })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M115.6 226.1H347c2.9 0 5.6 1.1 7.6 3.2l36.6 36.8c6.8 6.8 2 18.4-7.6 18.4H152.2c-2.9 0-5.6-1.1-7.6-3.2L108 244.5c-6.8-6.7-2-18.4 7.6-18.4m-7.7-48.8 36.6-36.8c2.1-2.1 4.8-3.2 7.6-3.2h231.3c9.6 0 14.5 11.6 7.6 18.4l-36.5 36.8c-2 2.1-4.8 3.2-7.6 3.2H115.6c-9.6 0-14.4-11.6-7.7-18.4m283.2 156.2-36.6 36.9c-2 2-4.8 3.2-7.6 3.2H115.6c-9.6 0-14.4-11.6-7.7-18.4l36.6-36.9c2.1-2 4.8-3.2 7.6-3.2h231.3c9.7-.1 14.6 11.5 7.7 18.4",
-              style: {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                fill: "url(#SolIcon_svg__a)"
-              }
-            }
-          )
-        ] });
-      case "zora":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "url(#ZoraIcon_svg__a)",
-              d: "M70.615 141.23C31.615 141.23 0 109.615 0 70.615S31.616 0 70.615 0c39 0 70.615 31.615 70.615 70.615s-31.615 70.615-70.614 70.615Z"
-            }
-          ),
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-            "radialGradient",
-            {
-              id: "ZoraIcon_svg__a",
-              cx: "0",
-              cy: "0",
-              r: "1",
-              gradientTransform: "translate(102.676 37.972)scale(-119.284)",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0.007", stopColor: "#f2cefe" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.191", stopColor: "#afbaf1" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.498", stopColor: "#4281d3" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.667", stopColor: "#2e427d" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.823", stopColor: "#230101" }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#8f6b40" })
-              ]
-            }
-          ) })
-        ] });
-      default:
-        return null;
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#fff",
+            d: "m0 33.302 4.293 2.474L18.58 12.865l-2.424-.064c-2.066-.03-4.291.508-5.313 2.175L2.73 27.55 0 31.743zm26.825-20.437-6.39.023L5.976 36.745l5.053 2.91 1.375-2.331 14.42-24.46Z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#96bedc",
+            d: "M39.191 12.832a4.07 4.07 0 0 0-1.91-3.272L21.394.424a4.13 4.13 0 0 0-3.645 0C17.617.49 2.3 9.373 2.3 9.373a4.04 4.04 0 0 0-2.3 3.45v18.92l2.73-4.194-.024-14.599a1.35 1.35 0 0 1 .562-1.015c.071-.05 15.649-9.068 15.699-9.093a1.38 1.38 0 0 1 1.198-.006l15.68 9.02c.371.236.604.637.624 1.075v18.084c-.018.383-.17.739-.468.98l-3.04 1.763-1.569.909-5.607 3.249-5.685 3.295a1.38 1.38 0 0 1-.968-.02l-6.727-3.868-1.375 2.33 6.046 3.481.524.297c.226.127.38.211.435.238.43.209 1.048.33 1.605.33.51 0 1.009-.094 1.48-.278l16.515-9.564a4.04 4.04 0 0 0 1.556-3.042z"
+          }
+        )
+      ]
     }
-  };
-  const getViewBox = () => {
-    switch (chain) {
-      case "eth":
-        return "0 0 20 20";
-      case "arb":
-        return "0 0 40 44";
-      case "base":
-        return "0 0 111 111";
-      case "bitcoin":
-        return "0 0 500 500";
-      case "op":
-        return "0 0 84 84";
-      case "sol":
-        return "0 0 500 500";
-      case "zora":
-        return "0 0 142 142";
-      default:
-        return "0 0 24 24";
+  );
+};
+
+const BaseSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 111 111",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#0052ff",
+          d: "M54.921 110.034c30.438 0 55.113-24.632 55.113-55.017S85.359 0 54.921 0C26.043 0 2.353 22.171 0 50.392h72.847v9.25H0c2.353 28.22 26.043 50.392 54.921 50.392"
+        }
+      )
     }
-  };
-  return /* @__PURE__ */ jsx("div", { className: `ns-chain-icon ${className || ""}`, children: /* @__PURE__ */ jsxs(
+  );
+};
+
+const BitcoinSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 500 500",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#f39321",
+          d: "M43.43 125.143c7.71-10.766 14.875-21.901 23.562-31.986 15.8-18.343 33.692-34.063 54.18-47.075 18.379-11.672 37.761-20.872 58.501-27.305 32.294-10.018 65.26-12.997 98.838-9.165 24.544 2.801 48.191 9.067 70.713 19.215 13.633 6.142 26.456 13.731 39.025 21.927 25.328 16.515 45.618 38.014 62.58 62.577 18.116 26.236 29.889 55.421 36.346 86.725 4.535 21.983 6.449 44.171 4.503 66.504-2.399 27.536-8.514 54.086-19.938 79.604-9.662 21.583-21.589 41.401-36.861 59.301-14.94 17.511-31.788 32.831-51.149 45.461-13.184 8.6-26.926 16.276-41.434 21.975-24.274 9.537-49.447 15.986-75.787 17.115-18.545.795-36.985.483-55.279-2.763-15.713-2.788-31.049-6.858-46.063-12.496-14.566-5.47-28.693-11.95-41.709-20.143-18.766-11.812-35.683-26.147-50.737-42.663-16.773-18.403-30.373-38.808-40.779-61.344-14.7-31.835-21.929-65.401-22.359-100.425-.162-13.173 1.349-26.244 3.105-39.283.126-.933-.002-1.899-.012-2.851 1.536-.952 1.4-2.618 1.677-4.071 3.906-20.483 10.494-40.059 19.418-58.906 3.162-6.674 7.525-12.764 9.659-19.928m281.727 129.37c6.537-3.474 12.749-5.465 17.658-9.85 18.918-16.899 23.96-56.673-6.747-75.833-9.566-5.969-19.77-10.393-30.77-14.907 1.819-14.731 7.709-28.516 9.622-43.603-9.076-2.249-17.578-5.234-26.425-6.193l-10.674 41.837c-6.78-2.076-13.761-1.879-20.142-5.473 2.302-14.39 7.773-27.872 9.268-42.314-9.322-1.464-17.216-5.094-26.265-5.485l-10.586 42.215c-17.944-2.75-34.419-8.921-52.52-12.239-3.977 8.91-5.738 18.311-7.334 28.313 5.896 1.392 11.022 2.623 16.158 3.811 12.965 2.998 16.517 10.086 13.439 21.424-2.19 8.065-4.166 16.189-6.182 24.301-7.245 29.16-14.432 58.333-21.72 87.482-1.642 6.567-5.734 8.706-12.398 7.731-6.563-.96-12.757-3.907-19.99-3.693-3.136 10.032-9.378 18.871-11.588 29.946l51.344 13.08c-1.312 15.208-7.614 29.125-9.476 44.441l25.544 6.123c5.653-14.044 6.957-28.803 12.226-43.33 6.351 3.265 13.397 2.317 19.612 6.427l-10.178 42.077c8.986 3.216 17.753 4.528 26.758 6.77l10.578-42.386c2.123-1.091 3.676-.888 5.143-.574a132.9 132.9 0 0 0 42.676 2.14c12.368-1.373 23.343-6.088 32.148-15.372 9.791-10.323 14.71-22.952 17.078-36.535 1.93-11.065 1.436-22.277-5.06-32.071-5.091-7.674-12.084-13.53-21.197-18.26M223.128 312.17c17.411 4.325 34.803 8.95 53.02 5.624 9.715-1.774 17.037-6.73 19.985-16.503 2.78-9.218 1.164-17.593-5.673-24.879-7.11-7.576-16.254-11.514-25.682-14.807-11.264-3.934-22.683-7.508-34.99-8.48l-13.972 56.788c2.981.929 5.117 1.712 7.312 2.257m61.5-80.324c9.628-1.368 17.612-7.738 19.958-16.393 2.869-10.583-.337-19.865-8.902-26.178-9.718-7.163-20.908-10.807-32.47-13.337-4.307-.943-8.544-3.454-13.756-1.759l-12.599 51.209c16.457 4.155 31.611 8.753 47.769 6.458"
+        }
+      )
+    }
+  );
+};
+
+const MaticSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...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" })
+      ] })
+    }
+  );
+};
+
+const OpSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
       height: size,
-      viewBox: getViewBox(),
+      viewBox: "0 0 84 84",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        renderIcon(),
-        chain === "eth" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_597_2890", children: /* @__PURE__ */ jsx(
-          "rect",
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            width: "19",
-            height: "19",
-            fill: "white",
-            transform: "translate(0.255859 0.5)"
+            fill: "#ff0420",
+            d: "M42 84c23.196 0 42-18.804 42-42S65.196 0 42 0 0 18.804 0 42s18.804 42 42 42"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#fff",
+            d: "M30.461 53.76q-3.8 0-6.226-1.83-2.395-1.861-2.395-5.291 0-.72.16-1.764.414-2.352 1.181-5.651 2.171-8.984 11.208-8.984 2.46 0 4.407.85 1.947.817 3.065 2.482 1.118 1.635 1.118 3.92 0 .687-.16 1.732a76 76 0 0 1-1.15 5.65q-1.116 4.476-3.863 6.697-2.747 2.19-7.345 2.19Zm.448-4.704q1.788 0 3.033-1.078 1.277-1.077 1.82-3.3.735-3.07 1.118-5.356.127-.687.127-1.405 0-2.973-3.033-2.973-1.788 0-3.065 1.078-1.245 1.078-1.789 3.3-.574 2.188-1.15 5.357a7 7 0 0 0-.127 1.372q0 3.005 3.066 3.005m13.536 4.377q-.351 0-.543-.229a.8.8 0 0 1-.096-.588l4.407-21.233a.94.94 0 0 1 .351-.588.96.96 0 0 1 .607-.229h8.494q3.544 0 5.684 1.503 2.17 1.503 2.171 4.345a8 8 0 0 1-.192 1.698q-.798 3.757-3.225 5.554-2.395 1.797-6.578 1.797h-4.31l-1.47 7.153a.94.94 0 0 1-.35.588.96.96 0 0 1-.607.23zm11.304-12.478q1.34 0 2.33-.752 1.023-.751 1.342-2.156.096-.555.096-.98 0-.947-.543-1.437-.544-.523-1.852-.523H53.29l-1.213 5.848z"
           }
-        ) }) })
+        )
       ]
     }
-  ) });
+  );
 };
 
-const Tooltip = ({
-  children,
-  content,
-  position = "top",
-  delay = 200,
-  disabled = false,
-  className = "",
-  contentClassName = "",
-  trigger = "hover",
-  maxWidth = 200,
-  offset = 8
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-  const triggerRef = useRef(null);
-  const tooltipRef = useRef(null);
-  const timeoutRef = useRef(void 0);
-  const showTooltip = () => {
-    if (disabled) return;
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      setIsVisible(true);
-    }, delay);
-  };
-  const hideTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
+const SolSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 500 500",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M250 0c138 0 250 111.9 250 250S388 500 250 500 0 388 0 250 111.9 0 250 0" }),
+        /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "SolIcon_svg__a",
+            x1: "242.52",
+            x2: "755.68",
+            y1: "267.33",
+            y2: "-245.83",
+            gradientTransform: "matrix(.5 0 0 .5 0 250)",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0", style: { stopColor: "rgb(203, 78, 232)" } }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", style: { stopColor: "rgb(16, 244, 177)" } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M115.6 226.1H347c2.9 0 5.6 1.1 7.6 3.2l36.6 36.8c6.8 6.8 2 18.4-7.6 18.4H152.2c-2.9 0-5.6-1.1-7.6-3.2L108 244.5c-6.8-6.7-2-18.4 7.6-18.4m-7.7-48.8 36.6-36.8c2.1-2.1 4.8-3.2 7.6-3.2h231.3c9.6 0 14.5 11.6 7.6 18.4l-36.5 36.8c-2 2.1-4.8 3.2-7.6 3.2H115.6c-9.6 0-14.4-11.6-7.7-18.4m283.2 156.2-36.6 36.9c-2 2-4.8 3.2-7.6 3.2H115.6c-9.6 0-14.4-11.6-7.7-18.4l36.6-36.9c2.1-2 4.8-3.2 7.6-3.2h231.3c9.7-.1 14.6 11.5 7.7 18.4",
+            style: {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              fill: "url(#SolIcon_svg__a)"
+            }
+          }
+        )
+      ]
     }
-    setIsVisible(false);
-  };
-  const calculatePosition = () => {
-    if (!triggerRef.current || !tooltipRef.current) return;
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    const viewport = {
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-    let top = 0;
-    let left = 0;
-    const baseOffset = offset;
-    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-    switch (position) {
+  );
+};
+
+const ZoraSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 142 142",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "radialGradient",
+          {
+            id: "ZoraIcon_svg__a",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientTransform: "translate(102.676 37.972)scale(-119.284)",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0.007", stopColor: "#f2cefe" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.191", stopColor: "#afbaf1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.498", stopColor: "#4281d3" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.667", stopColor: "#2e427d" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.823", stopColor: "#230101" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#8f6b40" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "url(#ZoraIcon_svg__a)",
+            d: "M70.615 141.23C31.615 141.23 0 109.615 0 70.615S31.616 0 70.615 0c39 0 70.615 31.615 70.615 70.615s-31.615 70.615-70.614 70.615Z"
+          }
+        )
+      ]
+    }
+  );
+};
+
+const CeloSvg = ({ size = 20, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 2500 2500",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "1250",
+            cy: "1250",
+            r: "1250",
+            fill: "#FCFF52",
+            fillRule: "evenodd",
+            clipRule: "evenodd"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M1949.3,546.2H550.7v1407.7h1398.7v-491.4h-232.1c-80,179.3-260.1,304.1-466.2,304.1    c-284.1,0-514.2-233.6-514.2-517.5c0-284,230.1-515.6,514.2-515.6c210.1,0,390.2,128.9,470.2,312.1h228.1V546.2z",
+            fill: "currentColor",
+            fillRule: "evenodd",
+            clipRule: "evenodd"
+          }
+        )
+      ]
+    }
+  );
+};
+
+const ChainIcon = ({
+  chain,
+  size = 20,
+  className,
+  ...props
+}) => {
+  const renderIcon = () => {
+    switch (chain) {
+      case "eth":
+        return /* @__PURE__ */ jsx(EthSvg, { size, ...props });
+      case "arb":
+        return /* @__PURE__ */ jsx(ArbSvg, { size, ...props });
+      case "base":
+        return /* @__PURE__ */ jsx(BaseSvg, { size, ...props });
+      case "bitcoin":
+        return /* @__PURE__ */ jsx(BitcoinSvg, { size, ...props });
+      case "matic":
+        return /* @__PURE__ */ jsx(MaticSvg, { size, ...props });
+      case "op":
+        return /* @__PURE__ */ jsx(OpSvg, { size, ...props });
+      case "sol":
+        return /* @__PURE__ */ jsx(SolSvg, { size, ...props });
+      case "zora":
+        return /* @__PURE__ */ jsx(ZoraSvg, { size, ...props });
+      case "celo":
+        return /* @__PURE__ */ jsx(CeloSvg, { size, ...props });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: `ns-chain-icon ${className || ""}`, children: renderIcon() });
+};
+
+const Tooltip = ({
+  children,
+  content,
+  position = "top",
+  delay = 200,
+  disabled = false,
+  className = "",
+  contentClassName = "",
+  trigger = "hover",
+  maxWidth = 200,
+  offset = 8
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(void 0);
+  const showTooltip = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const calculatePosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    let top = 0;
+    let left = 0;
+    const baseOffset = offset;
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+    switch (position) {
       case "top":
         top = triggerRect.top - tooltipRect.height - baseOffset;
         left = triggerCenterX - tooltipRect.width / 2;
@@ -1116,93 +1246,518 @@ const Tooltip = ({
   );
 };
 
-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
+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 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 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 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);
+  };
+  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 "";
     }
-  });
-  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 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 addressesAdded = [];
-  const addressesModified = [];
+  };
+  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) {
@@ -9302,7 +9857,7 @@ const nonEvmCoinTypeToNameMap = Object.freeze({
     "5718350": ["wan", "Wanchain"],
     "5741564": ["waves", "Waves"],
 });
-Object.freeze({
+const coinTypeToNameMap = Object.freeze({
     ...nonEvmCoinTypeToNameMap,
     ...evmCoinTypeToNameMap,
 });
@@ -9341,6 +9896,31 @@ 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);
@@ -9407,6 +9987,15 @@ const supportedAddresses = [
     validateFunc: isValidEmvAddress,
     placeholder: "0x1D8...c19f8"
   },
+  {
+    isEMV: true,
+    label: "Celo",
+    coinType: convertEVMChainIdToCoinType(celo.id),
+    chainId: arbitrum.id,
+    chainName: "celo",
+    validateFunc: isValidEmvAddress,
+    placeholder: "0x1D8...c19f8"
+  },
   {
     isEMV: true,
     label: "Polygon",
@@ -9449,15 +10038,6 @@ 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
@@ -11095,97 +11675,78 @@ var TextRecordCategory = /* @__PURE__ */ ((TextRecordCategory2) => {
 })(TextRecordCategory || {});
 const supportedTexts = [
   {
-    icon: "circle-person",
+    icon: "person",
     key: "avatar",
     category: "image" /* Image */,
-    label: "Avatar",
-    placeholder: "https://"
+    label: "Avatar"
   },
   {
-    icon: "image",
+    icon: "person",
     key: "header",
     category: "image" /* Image */,
-    label: "Header",
-    placeholder: "https://"
+    label: "Header"
   },
   {
     icon: "person",
     key: "name",
     category: "general" /* General */,
-    label: "Nickname",
-    placeholder: "John Smith"
+    label: "Nickname"
   },
   {
     icon: "book",
     key: "description",
     category: "general" /* General */,
-    label: "Short bio",
-    placeholder: "I am a ninja from far away land"
+    label: "Short bio"
   },
   {
     icon: "globe",
     key: "url",
     category: "general" /* General */,
-    label: "Website",
-    placeholder: "https://namespace.ninja"
+    label: "Website"
   },
   {
     icon: "map-pin",
     key: "location",
     category: "general" /* General */,
-    label: "Location",
-    placeholder: "Metaverse"
+    label: "Location"
   },
   {
     icon: "mail",
     key: "mail",
     category: "general" /* General */,
-    label: "E-Mail",
-    placeholder: "name@example.com"
+    label: "E-Mail"
   },
   {
-    icon: "twitter",
+    icon: "person",
     key: "com.twitter",
     category: "social" /* Social */,
-    label: "Twitter",
-    placeholder: "eg. namespace"
+    label: "Twitter"
   },
   {
     icon: "discord",
     key: "com.discord",
     category: "social" /* Social */,
-    label: "Discord",
-    placeholder: "eg. namespace"
+    label: "Discord"
   },
   {
     icon: "github",
     key: "com.github",
     category: "social" /* Social */,
-    label: "Github",
-    placeholder: "eg. namespace"
+    label: "Github"
   },
   {
     icon: "telegram",
     key: "org.telegram",
     category: "social" /* Social */,
-    label: "Telegram",
-    placeholder: "eg. namespace"
+    label: "Telegram"
   },
   {
     icon: "youtube",
     key: "com.youtube",
     category: "social" /* Social */,
-    label: "Youtube",
-    placeholder: "eg. namespace"
+    label: "Youtube"
   }
 ];
-const getSupportedTextMap = () => {
-  const map = {};
-  supportedTexts.forEach((txt) => {
-    map[txt.key] = txt;
-  });
-  return map;
-};
 const getSupportedText = (key) => {
   return supportedTexts.find((txt) => txt.key === key);
 };
@@ -11212,567 +11773,236 @@ const TextRecords = ({
         behavior: "smooth",
         block: "center"
       });
-      inputRefs.current[lastAddedKey]?.focus();
-      setLastAddedKey(null);
-    }
-  }, [texts, lastAddedKey]);
-  const handleTextChanged = (key, value) => {
-    const _texts = [...texts];
-    for (const text of _texts) {
-      if (text.key === key) {
-        text.value = value;
-      }
-    }
-    onTextsChanged(_texts);
-  };
-  const handleTextAdded = (key) => {
-    const initialText = initialTexts.find((txt) => txt.key === key);
-    onTextsChanged([...texts, { key, value: initialText?.value || "" }]);
-    setLastAddedKey(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;
+      inputRefs.current[lastAddedKey]?.focus();
+      setLastAddedKey(null);
+    }
+  }, [texts, lastAddedKey]);
+  const handleTextChanged = (key, value) => {
+    const _texts = [...texts];
+    for (const text of _texts) {
+      if (text.key === key) {
+        text.value = value;
       }
     }
-    onAddressesChanged(_addresses);
+    onTextsChanged(_texts);
   };
-  const handleAddressAdded = (coin) => {
-    const initialAddress = initialAddresses.find((i) => i.coinType === coin);
-    onAddressesChanged([
-      ...addresses,
-      { coinType: coin, value: initialAddress?.value || "" }
-    ]);
-    setLastAddedKey(`${coin}`);
+  const handleTextAdded = (key) => {
+    const initialText = initialTexts.find((txt) => txt.key === key);
+    onTextsChanged([...texts, { key, value: initialText?.value || "" }]);
+    setLastAddedKey(key);
   };
-  const handleRemoveAddress = (coin) => {
-    onAddressesChanged(addresses.filter((addr) => addr.coinType !== coin));
+  const handleRemoveText = (key) => {
+    onTextsChanged(texts.filter((text) => text.key !== key));
   };
-  const filterAddress = (address) => {
+  const filterSuggestions = (record) => {
     if (searchFilter && searchFilter.length > 0) {
       const lowercase = searchFilter.toLocaleLowerCase();
-      return address.chainName.includes(lowercase) || address.label.toLocaleLowerCase().includes(lowercase);
+      const label = record.label || "";
+      return record.key.toLocaleLowerCase().includes(lowercase) || label.toLocaleLowerCase().includes(lowercase);
     }
     return true;
   };
-  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",
-                {
-                  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 filteredItems = useMemo(() => {
+    const shownTextCategory = [category];
+    if (category === TextRecordCategory.General) {
+      shownTextCategory.push(TextRecordCategory.Image);
     }
-  );
-};
-
-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: [
+    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(
-          "circle",
+          Text,
           {
-            cx: "15.9",
-            cy: "15.9",
-            r: "14.7",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            className: "arweave_svg__st0"
+            style: { marginBottom: "4px" },
+            color: "grey",
+            size: "xs",
+            weight: "medium",
+            children: record.label
           }
         ),
-        /* @__PURE__ */ jsx(
-          "path",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            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"
+            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 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 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);
     }
-  );
-};
-
-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" })
-      ] })
+  }, [addresses, lastAddedKey]);
+  const handleAddressChanged = (coin, value) => {
+    const _addresses = [...addresses];
+    for (const addr of _addresses) {
+      if (addr.coinType === coin) {
+        addr.value = value;
+      }
     }
-  );
-};
-
-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;
+    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;
+  };
+  const filteredAddresses = useMemo(() => {
+    return supportedAddresses.filter((record) => filterAddress(record));
+  }, [searchFilter]);
+  if (filteredAddresses.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
   }
-  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",
+  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",
+                {
+                  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-alert-close",
-        onClick: onClose,
-        "aria-label": "Close alert",
-        type: "button",
-        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 })
+        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 })
+        ]
       }
-    )
-  ] }) });
-};
-
-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" }) })
-          ]
-        }
-      )
-    }
-  );
+    ) }, record.coinType)) })
+  ] });
 };
 
 const ContenthashRecord = ({
@@ -12094,89 +12324,284 @@ const SelectRecordsForm = ({
   ] });
 };
 
-var TransactionState = /* @__PURE__ */ ((TransactionState2) => {
-  TransactionState2["InProgress"] = "In Progress";
-  TransactionState2["Completed"] = "Completed";
-  TransactionState2["Failed"] = "Failed";
-  return TransactionState2;
-})(TransactionState || {});
-const PendingTransaction = ({
-  state,
-  blockExplorerUrl,
-  transactionHash,
-  className = ""
+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
 }) => {
-  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 [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;
+      }
     }
-  };
-  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 true;
+  }, [records.addresses]);
+  const areValidTexts = useMemo(() => {
+    for (const text of records.texts) {
+      if (text.value.length === 0) {
+        return false;
+      }
+    }
+    return true;
+  }, [records.texts]);
+  useMemo(() => {
+    if (!records.contenthash) {
+      return true;
     }
+    return isContenthashValid(
+      records.contenthash.protocol,
+      records.contenthash.value
+    );
+  }, [records.contenthash]);
+  const getInitalRecords = () => {
+    return initialRecords ? initialRecords : { texts: [], addresses: [] };
   };
-  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 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 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 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"
+        }
+      );
     }
   };
-  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",
+  return /* @__PURE__ */ jsxs("div", { className: "ns-edit-records-form", children: [
+    /* @__PURE__ */ jsx(
+      SelectRecordsForm,
       {
-        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"
-        ]
+        records,
+        onRecordsUpdated: (records2) => setRecords(records2)
       }
-    )
-  ] }) });
+    ),
+    /* @__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()
+    ] }) })
+  ] });
 };
 
 const useWaitForTransaction = ({ chainId: number }) => {
@@ -12191,17 +12616,6 @@ 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",
@@ -12237,5 +12651,5 @@ const useTheme = () => {
   return ctx;
 };
 
-export { Alert, Button, ChainIcon, ContenthashIcon, ContenthashProtocol, Dropdown, ENS_RESOLVER_ABI, 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, getSupportedTextMap, isContenthashValid, supportedAddresses, supportedContenthashRecords, supportedTexts, useTheme, useWaitForTransaction, useWeb3Client };
+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 };
 //# sourceMappingURL=index.js.map