feat(explorer-selector): add Near Rocks explorer (#1366)

- Add Near Rocks as a new explorer option in the NEAR Explorer Selector (first position)
- Support both mainnet (https://near.rocks) and testnet (https://testnet.near.rocks)
- URL path mappings: /account/:id, /tx/:id, /block/:id
- Update grid layout from 3 to 4 columns when Pikespeak is available

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: zavodil

apps/explorer-selector/public/images/nearrocks.svg

@@ -23,6 +23,10 @@ export default function ExplorerSelector() {
   const network = getNetworkId();
 
   const config = {
+    nearrocks:
+      network === 'testnet'
+        ? 'https://testnet.near.rocks'
+        : 'https://near.rocks',
     nearblocks:
       network === 'testnet'
         ? 'https://testnet.nearblocks.io'
@@ -82,6 +86,27 @@ export default function ExplorerSelector() {
     }
   }
 
+  function getNearRocksHref(link: string) {
+    if (link)
+      switch (path) {
+        case 'accounts':
+          return config.nearrocks + '/account/' + value;
+        case 'transactions':
+          return config.nearrocks + '/tx/' + value;
+        case 'blocks':
+          return config.nearrocks + '/block/' + value;
+        // WIP: receipts and stats are not yet available on Near Rocks
+        case 'receipts':
+        case 'stats':
+          return null;
+        default:
+          return config.nearrocks;
+      }
+    else {
+      return config.nearrocks;
+    }
+  }
+
   function getNearblocksLiteHref(link: string) {
     if (link)
       switch (path) {
@@ -151,6 +176,27 @@ export default function ExplorerSelector() {
     return false;
   }
 
+  function linkNearRocks(link: string) {
+    if (link)
+      switch (path) {
+        case '':
+          return true;
+        case 'accounts':
+          return true;
+        case 'transactions':
+          return true;
+        case 'blocks':
+          return true;
+        // WIP: receipts and stats are not yet available on Near Rocks
+        case 'receipts':
+        case 'stats':
+          return false;
+        default:
+          return false;
+      }
+    return false;
+  }
+
   function linkNearblocksLite(link: string) {
     if (link)
       switch (path) {
@@ -185,14 +231,23 @@ export default function ExplorerSelector() {
   }
 
   const hasValidLink =
-    linkNearblocks(path) || linkNearblocksLite(path) || linkPikespeakai(path);
+    linkNearRocks(path) ||
+    linkNearblocks(path) ||
+    linkNearblocksLite(path) ||
+    linkPikespeakai(path);
 
   const isInvalidReceiptsPath = path === 'receipts' && isNumericId(value);
 
+  const nearRocksHref = getNearRocksHref(path);
   const href = getHref(path);
   const pikespeakHref = getPikespeakHref(path);
   const nearblocksLiteHref = getNearblocksLiteHref(path);
 
+  const isNearRocksInactive =
+    (path && !linkNearRocks(path)) ||
+    isInvalidReceiptsPath ||
+    (path && value === '');
+
   const isNearblocksInactive =
     (path && !linkNearblocks(path)) ||
     isInvalidReceiptsPath ||
@@ -250,10 +305,30 @@ export default function ExplorerSelector() {
               <div
                 className={`${styles.linkContainer} ${
                   config.pikespeakai !== null
-                    ? styles.threeColumns
-                    : styles.twoColumns
+                    ? styles.fourColumns
+                    : styles.threeColumns
                 }`}
               >
+                <a
+                  href={
+                    !isNearRocksInactive
+                      ? nearRocksHref || config.nearrocks
+                      : config.nearrocks
+                  }
+                  className={`${styles.nearExplorerButton} ${
+                    isNearRocksInactive ? styles.inactive : ''
+                  }`}
+                >
+                  <Image
+                    src="/images/nearrocks.svg"
+                    style={imageStyle}
+                    width={45}
+                    height={45}
+                    alt="Near Rocks"
+                  />
+                  <h3 className={styles.explorerHead}>Near Rocks</h3>
+                </a>
+
                 <a
                   href={
                     !isNearblocksLiteInactive

apps/explorer-selector/src/components/ExplorerSelector.tsx

@@ -47,6 +47,10 @@
   grid-template-columns: repeat(3, 1fr);
 }
 
+.fourColumns {
+  grid-template-columns: repeat(4, 1fr);
+}
+
 @media (max-width: 768px) {
   .linkContainer {
     grid-template-columns: 1fr !important;