@calimero-network/mero-react 4.3.0 → 4.3.1

package/README.md

@@ -292,7 +292,7 @@ Helpers: `defaultMeroTheme` (the full default palette), `resolveMeroTheme(partia
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `connectionType` | `ConnectionType \| CustomConnectionConfig` | `RemoteAndLocal` | Which options the embedded LoginModal shows. `Custom` skips the modal. |
+| `connectionType` | `ConnectionType \| CustomConnectionConfig` | `Remote` | `Custom` connects straight to the given URL, skipping the modal. Every other value opens the LoginModal (node discovery + manual URL entry). |
 | `theme` | `MeroTheme` | — | Partial token override. |
 | `logoOnly` | `boolean` | `false` | Render only the Calimero logo (square button). The label is still announced via `aria-label`. |
 | `label` | `string \| { connect?, connected?, reconnecting? }` | — | Override default labels. Bare string targets the disconnected state. |
@@ -305,10 +305,10 @@ AppMode.SingleContext   // 'single-context'
 AppMode.MultiContext    // 'multi-context'
 AppMode.Admin           // 'admin'
 
-ConnectionType.RemoteAndLocal  // 'remote-and-local'
-ConnectionType.Remote          // 'remote'
-ConnectionType.Local           // 'local'
-ConnectionType.Custom          // 'custom'
+ConnectionType.Remote          // 'remote' — opens the LoginModal (discovery + manual URL)
+ConnectionType.Custom          // 'custom' — skip the modal, connect to a fixed URL
+ConnectionType.RemoteAndLocal  // deprecated, same as Remote
+ConnectionType.Local           // deprecated, same as Remote
 ```
 
 ## Types

package/dist/index.cjs

@@ -588,7 +588,6 @@ function themeToCssVars(theme) {
 function cssVar(theme, key) {
   return `var(${MERO_CSS_VARS[key]}, ${theme[key]})`;
 }
-var DEFAULT_LOCAL_NODE_URL = "http://node1.127.0.0.1.nip.io";
 var CUSTOM_SELECTION = "__custom__";
 function isValidUrl(urlString) {
   if (!urlString || urlString.trim() === "") {
@@ -706,29 +705,6 @@ function buildStyles(t) {
       fontSize: "0.875rem",
       textAlign: "center"
     },
-    radioGroup: {
-      display: "flex",
-      gap: "0.75rem",
-      marginBottom: "1rem",
-      justifyContent: "center"
-    },
-    radioLabel: {
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-      color: text,
-      cursor: "pointer",
-      padding: "0.5rem 1rem",
-      borderRadius: radius,
-      border: `1px solid ${border}`,
-      backgroundColor: bgSecondary,
-      transition: "all 0.15s ease"
-    },
-    radioLabelActive: {
-      border: `1px solid ${accent}`,
-      backgroundColor: accentGlow,
-      color: text
-    },
     radioList: {
       display: "flex",
       flexDirection: "column",
@@ -791,29 +767,6 @@ function buildStyles(t) {
       marginBottom: "1rem",
       boxSizing: "border-box"
     },
-    localInfo: {
-      color: textSecondary,
-      fontSize: "0.875rem",
-      textAlign: "center",
-      padding: "0.75rem",
-      backgroundColor: bgSecondary,
-      borderRadius: radius,
-      marginBottom: "1rem",
-      border: `1px solid ${border}`
-    },
-    localInfoCode: {
-      color: accent
-    },
-    noNodeInfo: {
-      color: textSecondary,
-      fontSize: "0.875rem",
-      textAlign: "center",
-      padding: "0.75rem",
-      backgroundColor: bgSecondary,
-      borderRadius: radius,
-      marginBottom: "1rem",
-      border: `1px solid ${border}`
-    },
     toolbar: {
       display: "flex",
       justifyContent: "center",
@@ -884,12 +837,10 @@ function buildStyles(t) {
 function LoginModal({
   onConnect,
   onClose,
-  connectionType,
   isOpen,
   theme,
   localNodePorts = DEFAULT_LOCAL_NODE_PORTS
 }) {
-  const [nodeType, setNodeType] = react.useState("local");
   const [selected, setSelected] = react.useState(CUSTOM_SELECTION);
   const [discovered, setDiscovered] = react.useState([]);
   const [discovering, setDiscovering] = react.useState(false);
@@ -902,27 +853,16 @@ function LoginModal({
     () => theme ? themeToCssVars(resolved) : void 0,
     [theme, resolved]
   );
-  const shouldShowLocal = connectionType === "remote-and-local" /* RemoteAndLocal */ || connectionType === "local" /* Local */;
-  const shouldShowRemote = connectionType === "remote-and-local" /* RemoteAndLocal */ || connectionType === "remote" /* Remote */;
-  const shouldShowRadioGroup = shouldShowLocal && shouldShowRemote;
   react.useEffect(() => {
     const savedUrl = localStorage.getItem("mero:node_url");
     if (savedUrl) {
       setCustomUrl(savedUrl);
     }
   }, []);
-  react.useEffect(() => {
-    if (connectionType === "local" /* Local */) {
-      setNodeType("local");
-    } else if (connectionType === "remote" /* Remote */) {
-      setNodeType("remote");
-    }
-  }, [connectionType]);
   const [scanNonce, setScanNonce] = react.useState(0);
   const portsKey = react.useMemo(() => localNodePorts.join(","), [localNodePorts]);
-  const remoteActive = isOpen && shouldShowRemote && nodeType === "remote";
   react.useEffect(() => {
-    if (!remoteActive) {
+    if (!isOpen) {
       return;
     }
     const controller = new AbortController();
@@ -943,16 +883,16 @@ function LoginModal({
       active = false;
       controller.abort();
     };
-  }, [remoteActive, portsKey, scanNonce]);
+  }, [isOpen, portsKey, scanNonce]);
   const isCustom = selected === CUSTOM_SELECTION;
   const hasDiscovered = discovered.length > 0;
-  const canConnect = !loading && (nodeType === "local" ? true : discovering ? false : isCustom ? isValidUrl(customUrl) : true);
+  const canConnect = !loading && !discovering && (isCustom ? isValidUrl(customUrl) : true);
   const canConnectRef = react.useRef(canConnect);
   canConnectRef.current = canConnect;
   const handleConnect = react.useCallback(async () => {
-    const targetUrl = nodeType === "local" ? DEFAULT_LOCAL_NODE_URL : selected === CUSTOM_SELECTION ? customUrl : selected;
-    const usingDiscovered = nodeType === "remote" && selected !== CUSTOM_SELECTION;
-    if (nodeType === "remote" && !usingDiscovered && !isValidUrl(targetUrl)) {
+    const usingDiscovered = selected !== CUSTOM_SELECTION;
+    const targetUrl = usingDiscovered ? selected : customUrl;
+    if (!usingDiscovered && !isValidUrl(targetUrl)) {
       return;
     }
     const normalizedUrl = targetUrl.replace(/\/+$/, "");
@@ -977,7 +917,7 @@ function LoginModal({
       setError("Failed to connect. Please check the URL and try again.");
       setLoading(false);
     }
-  }, [nodeType, selected, customUrl, onConnect]);
+  }, [selected, customUrl, onConnect]);
   if (!isOpen) {
     return null;
   }
@@ -1027,7 +967,7 @@ function LoginModal({
       )
     );
   };
-  const renderRemoteView = () => {
+  const renderNodeSection = () => {
     if (discovering) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.discovering, "data-testid": "node-discovering", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinnerSmall }),
@@ -1035,7 +975,7 @@ function LoginModal({
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.info, children: hasDiscovered ? "Select a discovered node, or enter a node URL manually." : "No local node found. Enter a node URL to continue." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.info, children: hasDiscovered ? "Select your Calimero node to continue." : "No local node found. Enter a node URL to continue." }),
       hasDiscovered && /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -1095,64 +1035,8 @@ function LoginModal({
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to node..." }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinner })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        shouldShowRadioGroup && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.info, children: "Select your Calimero node type to continue." }),
         error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.error, children: error }),
-        shouldShowRadioGroup && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.radioGroup, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
-            {
-              "data-testid": "node-type-local",
-              style: {
-                ...styles.radioLabel,
-                ...nodeType === "local" ? styles.radioLabelActive : {}
-              },
-              onClick: () => setNodeType("local"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    value: "local",
-                    checked: nodeType === "local",
-                    onChange: () => setNodeType("local"),
-                    style: { display: "none" }
-                  }
-                ),
-                "Local"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
-            {
-              "data-testid": "node-type-remote",
-              style: {
-                ...styles.radioLabel,
-                ...nodeType === "remote" ? styles.radioLabelActive : {}
-              },
-              onClick: () => setNodeType("remote"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    value: "remote",
-                    checked: nodeType === "remote",
-                    onChange: () => setNodeType("remote"),
-                    style: { display: "none" }
-                  }
-                ),
-                "Remote"
-              ]
-            }
-          )
-        ] }),
-        nodeType === "local" && shouldShowLocal && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles.localInfo, children: [
-          "Using default local node: ",
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntime.jsx("code", { style: styles.localInfoCode, children: DEFAULT_LOCAL_NODE_URL })
-        ] }),
-        nodeType === "remote" && shouldShowRemote && renderRemoteView(),
+        renderNodeSection(),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.buttonGroup, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -1172,7 +1056,7 @@ function LoginModal({
   return reactDom.createPortal(modalContent, document.body);
 }
 function ConnectButton({
-  connectionType = "remote-and-local" /* RemoteAndLocal */,
+  connectionType = "remote" /* Remote */,
   className,
   style,
   theme,
@@ -1323,7 +1207,6 @@ function ConnectButton({
             isOpen: isModalOpen,
             onConnect: handleModalConnect,
             onClose: () => setIsModalOpen(false),
-            connectionType: typeof connectionType === "object" ? "remote-and-local" /* RemoteAndLocal */ : connectionType,
             theme: resolvedTheme ?? theme
           }
         )