feat(gnoweb): display network info (#3679)

This PR introduces a Network Info section in the gnoweb interface, displaying details such as `RPC` and `ChainID`. - It adds a new icon in the search bar, which triggers a modal (purely CSS-based, no JavaScript) to display these network details. - The modal is fully interactive, allowing users to close it by clicking either on the close button or anywhere outside the modal. This enhancement improves visibility and accessibility of network info from gnoweb without relying on JavaScript. <img width="762" alt="Capture d’écran 2025-02-05 à 18 32 41" src="https://github.com/user-attachments/assets/af848c58-a519-40a5-bf5b-3bca826b89b2" /> <img width="780" alt="Capture d’écran 2025-02-05 à 18 32 50" src="https://github.com/user-attachments/assets/167f9f24-10c0-4fea-aa27-d0dfe7dd01df" /> --------- Co-authored-by: Morgan <[email protected]>
gnolang · Feb 6, 2025 · 08d29a5 · 08d29a5
1 parent a01a030
commit 08d29a5
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 10 deletions.
diff --git a/gno.land/pkg/gnoweb/components/layout_header.go b/gno.land/pkg/gnoweb/components/layout_header.go
@@ -16,6 +16,8 @@ type HeaderData struct {
 	Breadcrumb BreadcrumbData
 	WebQuery   url.Values
 	Links      []HeaderLink
+	ChainId    string
+	Remote     string
 }
 
 func StaticHeaderLinks(realmPath string, webQuery url.Values) []HeaderLink {

diff --git a/gno.land/pkg/gnoweb/components/layouts/header.html b/gno.land/pkg/gnoweb/components/layouts/header.html
@@ -6,16 +6,67 @@
         <img src="/public/imgs/gnoland.svg" alt="Gno username profile pic" width="40px" height="40px" />
       </a>
 
-      <form class="js-header-searchbar relative overflow-scroll no-scrollbar flex items-center bg-gray-100 has-[:focus-within]:border-gray-300 border h-full border-gray-100 p-1.5 rounded w-full">
-        <input
-          data-role="header-input-search"
-          type="text"
-          value="{{ .RealmPath }}"
-          class="peer absolute w-full top-0 left-0 h-full bg-transparent p-1.5 text-200 outline-none text-gray-600 font-medium"
-        />
+      <div class="relative w-full h-full overflow-scroll no-scrollbar">
+        <form class="js-header-searchbar relative overflow-scroll no-scrollbar md:pr-8 flex items-center bg-gray-100 has-[:focus-within]:border-gray-300 border h-full border-gray-100 p-1.5 rounded">
+          <input
+            data-role="header-input-search"
+            type="text"
+            value="{{ .RealmPath }}"
+            class="peer absolute w-full top-0 left-0 h-full bg-transparent p-1.5 md:pr-8 text-200 outline-none text-gray-600 font-medium"
+          />
 
-        {{ template "ui/breadcrumb" .Breadcrumb }}
-      </form>
+          {{ template "ui/breadcrumb" .Breadcrumb }}
+        </form>
+
+        <!-- Network Info Popup -->
+        <label
+          for="searchbar-server-popup-toggle"
+          class="absolute hidden md:flex justify-center rounded-r items-center p-1.5 h-[calc(100%-2px)] bg-gray-100 z-max right-px top-px text-gray-400 hover:text-gray-600 cursor-pointer"
+          tabindex="0"
+          role="button"
+          aria-controls="network-info-popup"
+        >
+          <svg class="w-5 h-5">
+            <title>Network Info</title>
+            <use href="#ico-earth"></use>
+          </svg>
+        </label>
+
+        <input type="checkbox" id="searchbar-server-popup-toggle" class="hidden peer" aria-expanded="false" />
+        <label for="searchbar-server-popup-toggle" class="fixed z-max inset-0 flex items-center justify-center opacity-0 invisible peer-checked:opacity-100 peer-checked:visible"></label>
+
+        <div class="z-max absolute top-0 right-0 opacity-0 invisible 0 peer-checked:opacity-100 peer-checked:visible" role="dialog" aria-labelledby="network-info-title" aria-modal="true">
+          <div class="px-4 py-2 w-72 fixed -translate-x-full rounded bg-light border border-gray-100">
+            <div class="w-full flex justify-between items-center pb-3">
+              <span id="network-info-title" class="text-gray-600 text-100 font-semibold">Network Info</span>
+              <label for="searchbar-server-popup-toggle" class="absolute right-3 text-gray-400 hover:text-gray-900 cursor-pointer" tabindex="0" role="button" aria-label="Close popup">
+                <svg class="w-3 h-3">
+                  <title>Close Network Info</title>
+                  <use href="#ico-cross"></use>
+                </svg>
+              </label>
+            </div>
+            <div class="flex gap-1 items-start w-full py-2 text-gray-400">
+              <svg class="w-4 h-4" aria-hidden="true">
+                <use href="#ico-chain"></use>
+              </svg>
+              <div class="flex flex-col justify-start items-start">
+                <span class="text-50">Chain ID</span>
+                <span class="text-gray-600 font-semibold leading-tigh">{{ .ChainId }}</span>
+              </div>
+            </div>
+            <div class="flex gap-1 items-start w-full py-2 text-gray-400">
+              <svg class="w-4 h-4" aria-hidden="true">
+                <use href="#ico-rpc"></use>
+              </svg>
+              <div class="flex flex-col justify-start items-start">
+                <span class="text-50">RPC Address</span>
+                <span class="text-gray-600 font-semibold leading-tight">{{ .Remote }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <form class="sidemenu col-span-3 flex justify-end lg:justify-start gap-3 sm:gap-6 h-full text-100 text-gray-400">{{ range .Links }} {{ template "ui/header_link" . }} {{ end }}</form>

diff --git a/gno.land/pkg/gnoweb/components/ui/icons.html b/gno.land/pkg/gnoweb/components/ui/icons.html
@@ -120,5 +120,50 @@
       fill="transparent"
     />
   </symbol>
+  <symbol id="ico-rpc" viewBox="0 0 24 24" fill="none">
+    <path d="M17.15 13.8201L14.11 16.86" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M6.84998 13.8201H17.15" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M6.84998 10.18L9.88998 7.14001" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M17.15 10.1799H6.84998" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="ico-chain" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M7.93997 14.51C7.31997 14.28 6.76997 13.83 6.41997 13.19C5.61997 11.73 6.10997 9.83001 7.52997 8.95001L9.86996 7.5C11.28 6.62 13.1 7.09999 13.9 8.54999C14.7 10.01 14.21 11.91 12.79 12.79L12.48 13.01"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M16.11 9.44995C16.73 9.67995 17.28 10.1299 17.63 10.7699C18.43 12.2299 17.94 14.1299 16.52 15.0099L14.1799 16.4599C12.7699 17.3399 10.9499 16.8599 10.1499 15.4099C9.34995 13.9499 9.83995 12.05 11.2599 11.17L11.57 10.95"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
+  <symbol id="ico-earth" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M12 21.0046C16.1926 21.0046 19.7156 18.1379 20.7157 14.2576M12 21.0046C7.80742 21.0046 4.28442 18.1379 3.2843 14.2576M12 21.0046C14.4853 21.0046 16.5 16.9752 16.5 12.0046C16.5 7.03408 14.4853 3.00464 12 3.00464M12 21.0046C9.51472 21.0046 7.5 16.9752 7.5 12.0046C7.5 7.03408 9.51472 3.00464 12 3.00464M12 3.00464C15.3652 3.00464 18.299 4.85158 19.8431 7.58709M12 3.00464C8.63481 3.00464 5.70099 4.85158 4.15692 7.58709M19.8431 7.58709C17.7397 9.40503 14.9983 10.5046 12 10.5046C9.00172 10.5046 6.26027 9.40503 4.15692 7.58709M19.8431 7.58709C20.5797 8.89207 21 10.3993 21 12.0046C21 12.7826 20.9013 13.5376 20.7157 14.2576M20.7157 14.2576C18.1334 15.6894 15.1619 16.5046 12 16.5046C8.8381 16.5046 5.86662 15.6894 3.2843 14.2576M3.2843 14.2576C3.09871 13.5376 3 12.7826 3 12.0046C3 10.3993 3.42032 8.89207 4.15692 7.58709"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </symbol>
 </svg>
 {{ end }}
diff --git a/gno.land/pkg/gnoweb/frontend/css/tx.config.js b/gno.land/pkg/gnoweb/frontend/css/tx.config.js
@@ -26,6 +26,7 @@ export default {
     borderRadius: {
       sm: `${pxToRem(4)}rem`,
       DEFAULT: `${pxToRem(6)}rem`,
+      full: "9999px",
     },
     colors: {
       light: "#FFFFFF",

diff --git a/gno.land/pkg/gnoweb/handler.go b/gno.land/pkg/gnoweb/handler.go
@@ -123,6 +123,8 @@ func (h *WebHandler) prepareIndexBodyView(r *http.Request, indexData *components
 		RealmPath:  gnourl.Encode(EncodePath | EncodeArgs | EncodeQuery | EncodeNoEscape),
 		Breadcrumb: breadcrumb,
 		WebQuery:   gnourl.WebQuery,
+		ChainId:    h.Static.ChainId,
+		Remote:     h.Static.RemoteHelp,
 	}
 
 	switch {

diff --git a/gno.land/pkg/gnoweb/public/styles.css b/gno.land/pkg/gnoweb/public/styles.css