@thenamespace/ens-components 0.38.0-alpha → 1.1.0

package/dist/index.d.ts

@@ -88,6 +88,7 @@ interface EnsNameRegistrationFormProps {
     onRegistrationSuccess?: (result: RegistrationSuccessData) => void;
     onClose?: (isSuccess: boolean) => void;
     onRegistrationStart?: (name: string) => void;
+    onConnectWallet?: () => void;
 }
 interface RegistrationSuccessData {
     expiryInYears: number;
@@ -193,8 +194,9 @@ interface SubnameMintFormProps {
     onSuccess?: (data: MintSuccessData) => void;
     onSubnameMinted?: (data: SubnameMintedData) => void;
     txConfirmations?: number;
+    onConnectWallet?: () => void;
 }
-declare const SubnameMintForm: ({ parentName, label, isTestnet, onCancel, onSuccess, onSubnameMinted, txConfirmations }: SubnameMintFormProps) => react_jsx_runtime.JSX.Element;
+declare const SubnameMintForm: ({ parentName, label, isTestnet, onCancel, onSuccess, onSubnameMinted, txConfirmations, onConnectWallet, }: SubnameMintFormProps) => react_jsx_runtime.JSX.Element;
 
 interface OffchainSubnameCreatedData {
     label: string;

package/dist/index.js

@@ -12304,9 +12304,6 @@ const commonBgStyles = {
   backgroundRepeat: "no-repeat",
   backgroundPosition: "center"
 };
-const getManualActionLabel = (isSet) => {
-  return isSet ? "Edit URL" : "Enter URL";
-};
 const ImageRecords = ({
   avatar,
   header,
@@ -12317,14 +12314,8 @@ const ImageRecords = ({
   onHeaderUploadRequested,
   onHeaderManualUrlRequested
 }) => {
-  const avatarStyles = avatar ? {
-    backgroundImage: `url(${avatar})`,
-    ...commonBgStyles
-  } : {};
-  const headerStyles = header ? {
-    backgroundImage: `url(${header})`,
-    ...commonBgStyles
-  } : {};
+  const avatarStyles = avatar ? { backgroundImage: `url(${avatar})`, ...commonBgStyles } : {};
+  const headerStyles = header ? { backgroundImage: `url(${header})`, ...commonBgStyles } : {};
   const headerRecordSet = header !== void 0;
   const avatarRecordSet = avatar !== void 0;
   const requestAvatarManualUrl = () => {
@@ -12352,16 +12343,11 @@ const ImageRecords = ({
     }
     actions.push({
       id: "manual-url",
-      label: getManualActionLabel(avatarRecordSet),
+      label: "Enter URL",
       onSelect: requestAvatarManualUrl
     });
     return actions;
-  }, [
-    onAvatarUploadRequested,
-    onAvatarManualUrlRequested,
-    onAvatarAdded,
-    avatarRecordSet
-  ]);
+  }, [onAvatarUploadRequested, onAvatarManualUrlRequested, onAvatarAdded]);
   const headerActions = useMemo(() => {
     const actions = [];
     if (onHeaderUploadRequested) {
@@ -12373,36 +12359,22 @@ const ImageRecords = ({
     }
     actions.push({
       id: "manual-url",
-      label: getManualActionLabel(headerRecordSet),
+      label: "Enter URL",
       onSelect: requestHeaderManualUrl
     });
     return actions;
-  }, [
-    onHeaderUploadRequested,
-    onHeaderManualUrlRequested,
-    onHeaderAdded,
-    headerRecordSet
-  ]);
-  const renderActionTrigger = (record, recordSet, actions) => {
-    const title = recordSet ? `Change ${record}` : `Add ${record}`;
-    const hasActions = actions.length > 0;
-    return /* @__PURE__ */ jsx(
+  }, [onHeaderUploadRequested, onHeaderManualUrlRequested, onHeaderAdded]);
+  return /* @__PURE__ */ jsx("div", { className: "ns-image-records", children: /* @__PURE__ */ jsxs("div", { style: headerStyles, className: "ns-cover-record-cont", children: [
+    /* @__PURE__ */ jsx("div", { className: "ns-top-grad" }),
+    /* @__PURE__ */ jsx("div", { className: "ns-bot-grad" }),
+    !headerRecordSet && /* @__PURE__ */ jsx("div", { className: "ns-header-record-placeholder", children: /* @__PURE__ */ jsx(
       Dropdown,
       {
         placement: "bottom",
         align: "end",
-        disabled: !hasActions,
-        trigger: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `ns-image-action-plus ${recordSet ? "ns-image-action-plus--set" : ""} ${!hasActions ? "ns-image-action-plus--disabled" : ""}`,
-            title,
-            "aria-label": title,
-            "aria-disabled": !hasActions,
-            children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 })
-          }
-        ),
-        children: /* @__PURE__ */ jsx("div", { className: "ns-image-actions-menu", children: actions.map((action) => /* @__PURE__ */ jsx(
+        disabled: headerActions.length === 0,
+        trigger: /* @__PURE__ */ jsx("div", { title: "Add header", "aria-label": "Add header", children: /* @__PURE__ */ jsx(Icon, { color: "white", name: "plus", size: 22 }) }),
+        children: /* @__PURE__ */ jsx("div", { className: "ns-image-actions-menu", children: headerActions.map((action) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -12410,25 +12382,34 @@ const ImageRecords = ({
             onClick: () => action.onSelect(),
             children: action.label
           },
-          `${record}-${action.id}`
+          `header-${action.id}`
         )) })
       }
-    );
-  };
-  return /* @__PURE__ */ jsx("div", { className: "ns-image-records", children: /* @__PURE__ */ jsxs("div", { style: headerStyles, className: "ns-cover-record-cont", children: [
-    /* @__PURE__ */ jsx("div", { className: "ns-top-grad" }),
-    /* @__PURE__ */ jsx("div", { className: "ns-bot-grad" }),
-    !headerRecordSet && /* @__PURE__ */ jsx("div", { className: "ns-header-record-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { color: "white", name: "image", size: 22 }) }),
-    /* @__PURE__ */ jsx("div", { className: "ns-header-action-anchor", children: renderActionTrigger("header", headerRecordSet, headerActions) }),
-    /* @__PURE__ */ jsxs(
+    ) }),
+    /* @__PURE__ */ jsx(
       "div",
       {
         style: avatarStyles,
         className: `ns-avatar-record-cont ${avatarRecordSet ? "ns-avatar-record-cont--set" : ""}`,
-        children: [
-          !avatarRecordSet && /* @__PURE__ */ jsx("div", { className: "ns-avatar-record-placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { color: "grey", name: "image", size: 28 }) }),
-          /* @__PURE__ */ jsx("div", { className: "ns-avatar-action-anchor", children: renderActionTrigger("avatar", avatarRecordSet, avatarActions) })
-        ]
+        children: !avatarRecordSet && /* @__PURE__ */ jsx("div", { className: "ns-avatar-record-placeholder", children: /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            placement: "bottom",
+            align: "end",
+            disabled: avatarActions.length === 0,
+            trigger: /* @__PURE__ */ jsx("div", { title: "Add avatar", "aria-label": "Add avatar", children: /* @__PURE__ */ jsx(Icon, { color: "grey", name: "plus", size: 28 }) }),
+            children: /* @__PURE__ */ jsx("div", { className: "ns-image-actions-menu", children: avatarActions.map((action) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ns-image-actions-menu-item",
+                onClick: () => action.onSelect(),
+                children: action.label
+              },
+              `avatar-${action.id}`
+            )) })
+          }
+        ) })
       }
     )
   ] }) });
@@ -90359,8 +90340,10 @@ const RegistrationSummary = ({
   onPriceChange,
   onNameValidationChange,
   onSetProfile,
-  onStart
+  onStart,
+  onConnectWallet
 }) => {
+  const { isConnected } = useAccount();
   const { isEnsAvailable, getRegistrationPrice } = useRegisterENS({
     isTestnet
   });
@@ -90547,7 +90530,16 @@ const RegistrationSummary = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    !isConnected && onConnectWallet ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        style: { width: "100%" },
+        size: "lg",
+        className: "mt-2",
+        onClick: onConnectWallet,
+        children: "Connect Wallet"
+      }
+    ) : /* @__PURE__ */ jsx(
       Button,
       {
         style: { width: "100%" },
@@ -92099,7 +92091,8 @@ const EnsNameRegistrationForm = (props) => {
               onPriceChange: setPrice,
               onNameValidationChange: setNameValidation,
               onSetProfile: () => setShowProfile(true),
-              onStart: () => setStep(1 /* Progress */)
+              onStart: () => setStep(1 /* Progress */),
+              onConnectWallet: props.onConnectWallet
             }
           )
         ] }),
@@ -93228,9 +93221,15 @@ const MintFormActions = ({
   needsChainSwitch = false,
   chainName = "",
   onSwitchChain,
-  isSwitchingChain = false
+  isSwitchingChain = false,
+  isConnected = true,
+  onConnectWallet
 }) => {
   const handlePrimaryClick = () => {
+    if (!isConnected) {
+      onConnectWallet?.();
+      return;
+    }
     if (needsChainSwitch && onSwitchChain) {
       onSwitchChain();
     } else {
@@ -93238,11 +93237,13 @@ const MintFormActions = ({
     }
   };
   const getButtonLabel = () => {
+    if (!isConnected) return "Connect Wallet";
     if (isWaitingWallet) return "Waiting for wallet...";
     if (needsChainSwitch) return `Switch to ${chainName}`;
     return "Mint";
   };
   const isDisabled = () => {
+    if (!isConnected) return false;
     if (isWaitingWallet) return true;
     if (needsChainSwitch) return isSwitchingChain;
     return isMintDisabled;
@@ -93444,7 +93445,8 @@ const SubnameMintForm = ({
   onCancel,
   onSuccess,
   onSubnameMinted,
-  txConfirmations
+  txConfirmations,
+  onConnectWallet
 }) => {
   const { getListingDetails } = useMintManager({ isTestnet });
   const [initState, setInitState] = useState({
@@ -93512,7 +93514,8 @@ const SubnameMintForm = ({
       onCancel,
       onSuccess,
       onSubnameMinted,
-      txConfirmations
+      txConfirmations,
+      onConnectWallet
     }
   ) });
 };
@@ -93533,7 +93536,8 @@ const SubnameMintFormContent = ({
   onCancel,
   onSuccess,
   onSubnameMinted,
-  txConfirmations
+  txConfirmations,
+  onConnectWallet
 }) => {
   const { address: connectedAddress, chain: currentChain } = useAccount();
   const { switchChain, isPending: isSwitchingChain } = useSwitchChain();
@@ -94010,7 +94014,9 @@ const SubnameMintFormContent = ({
         needsChainSwitch,
         chainName: requiredChainName,
         onSwitchChain: handleSwitchChain,
-        isSwitchingChain
+        isSwitchingChain,
+        isConnected: !!connectedAddress,
+        onConnectWallet
       }
     )
   ] });