rpc table with copyable urls

docs/developers/babylon_genesis_chain/node_information.mdx

@@ -4,89 +4,55 @@ sidebar_class_name: node_information_sidebar
 sidebar_position: 1
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-## Nodes and Endpoints Information for Babylon Genesis Chain
-
-### Babylon Genesis Mainnet
-
-Endpoints for Phase 2 Babylon Genesis Mainnet (`bbn-1`).
-
-**Nodes Guru**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC (Pruned) | `https://babylon.nodes.guru/rpc` |
-| RPC (Archive) | `https://babylon-archive.nodes.guru/rpc` |
-| LCD (Pruned) | `https://babylon.nodes.guru/api` |
-| LCD (Archive) | `https://babylon-archive.nodes.guru/api` |
-| gRPC (Pruned) | `babylon.nodes.guru:443` |
-
-**Polkachu**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC (Pruned) | `https://babylon-rpc.polkachu.com` |
-| RPC (Archive) | `https://babylon-archive-rpc.polkachu.com` |
-| LCD (Pruned) | `https://babylon-api.polkachu.com` |
-| LCD (Archive) | `https://babylon-archive-api.polkachu.com` |
-| gRPC (Pruned) | `babylon-grpc.polkachu.com:20690` |
-| gRPC (Archive) | `babylon-archive-grpc.polkachu.com:20690` |
-
-**NodeStake**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC | `https://rpc.babylon.nodestake.org` |
-| LCD | `https://api.babylon.nodestake.org` |
-| gRPC | `https://grpc.babylon.nodestake.org:443` |
-
-### Babylon Genesis Testnet
-
-Endpoints for Phase 2 Babylon Genesis Testnet (`bbn-test-5`).
-
-
-**Nodes Guru**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC | `https://babylon-testnet-rpc.nodes.guru` |
-| RPC Archive | `https://babylon-testnet-rpc-archive-1.nodes.guru` |
-| LCD | `https://babylon-testnet-api.nodes.guru` |
-| LCD Archive | `https://babylon-testnet-api-archive-1.nodes.guru` |
-| gRPC | `https://babylon-testnet-grpc.nodes.guru` |
-
-**Polkachu**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC | `https://babylon-testnet-rpc.polkachu.com` |
-| LCD | `https://babylon-testnet-api.polkachu.com` |
-| gRPC | `http://babylon-testnet-grpc.polkachu.com:20690` |
-
-**Imperator**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC | `https://rpc-babylon-testnet.imperator.co` |
-| LCD | `https://lcd-babylon-testnet.imperator.co` |
-| gRPC | `grpc-babylon-testnet.imperator.co:443` |
-
-**ContributionDAO**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC | `https://babylon-testnet-rpc.contributiondao.com` |
-| LCD | `https://babylon-testnet-api.contributiondao.com` |
-
-**NodeStake**
-| Endpoint Type | URL |
-|-------------|----------|
-| RPC | `https://rpc-t.babylon.nodestake.org` |
-| LCD | `https://api-t.babylon.nodestake.org` |
-| gRPC | `https://grpc-t.babylon.nodestake.org:443` |
-
-### Babylon Genesis Devnet
-
-Endpoints for Phase 3 Babylon Genesis Devnet (`euphrates-0.6.0`).
-
-**Babylon Labs**
-| Endpoint Type | URL |
-|--------------|-----|
-| RPC Endpoint | `https://rpc.devnet.babylonlabs.io` |
-| LCD Nodes Endpoint | `https://lcd.devnet.babylonlabs.io` |
-| gRPC Endpoint | `https://grpc.devnet.babylonlabs.io` |
+import CopyableUrl from '@site/src/components/CopyableUrl';
+
+<TabItem value="mainnet" label="Mainnet">
+
+### Babylon Genesis Mainnet (`bbn-1`)
+
+
+<div className="small-table">
+
+| Endpoint Type | Nodes Guru | Polkachu | NodeStake |
+|---------------|------------|----------|-----------|
+| **RPC**       | Pruned: <CopyableUrl url="https://babylon.nodes.guru/rpc" /><br/>Archive: <CopyableUrl url="https://babylon-archive.nodes.guru/rpc" /> | Pruned: <CopyableUrl url="https://babylon-rpc.polkachu.com" /><br/>Archive: <CopyableUrl url="https://babylon-archive-rpc.polkachu.com" /> | <CopyableUrl url="https://rpc.babylon.nodestake.org" /> |
+| **LCD**       | Pruned: <CopyableUrl url="https://babylon.nodes.guru/api" /><br/>Archive: <CopyableUrl url="https://babylon-archive.nodes.guru/api" /> | Pruned: <CopyableUrl url="https://babylon-api.polkachu.com" /><br/>Archive: <CopyableUrl url="https://babylon-archive-api.polkachu.com" /> | <CopyableUrl url="https://api.babylon.nodestake.org" /> |
+| **gRPC**      | <CopyableUrl url="babylon.nodes.guru:443" /> | Pruned: <CopyableUrl url="babylon-grpc.polkachu.com:20690" /><br/>Archive: <CopyableUrl url="babylon-archive-grpc.polkachu.com:20690" /> | <CopyableUrl url="https://grpc.babylon.nodestake.org:443" /> |
+
+</div>
+
+
+</TabItem>
+
+<TabItem value="testnet" label="Testnet">
+
+### Babylon Genesis Testnet (`bbn-test-5`)
+
+<div className="small-table">
+
+| Endpoint Type | Nodes Guru | Polkachu | Imperator | ContributionDAO | NodeStake |
+|---------------|------------|----------|-----------|------------------|-----------|
+| **RPC**       | Pruned: <CopyableUrl url="https://babylon-testnet-rpc.nodes.guru" /><br/>Archive: <CopyableUrl url="https://babylon-testnet-rpc-archive-1.nodes.guru" /> | <CopyableUrl url="https://babylon-testnet-rpc.polkachu.com" /> | <CopyableUrl url="https://rpc-babylon-testnet.imperator.co" /> | <CopyableUrl url="https://babylon-testnet-rpc.contributiondao.com" /> | <CopyableUrl url="https://rpc-t.babylon.nodestake.org" /> |
+| **LCD**       | Pruned: <CopyableUrl url="https://babylon-testnet-api.nodes.guru" /><br/>Archive: <CopyableUrl url="https://babylon-testnet-api-archive-1.nodes.guru" /> | <CopyableUrl url="https://babylon-testnet-api.polkachu.com" /> | <CopyableUrl url="https://lcd-babylon-testnet.imperator.co" /> | <CopyableUrl url="https://babylon-testnet-api.contributiondao.com" /> | <CopyableUrl url="https://api-t.babylon.nodestake.org" /> |
+| **gRPC**      | <CopyableUrl url="https://babylon-testnet-grpc.nodes.guru" /> | <CopyableUrl url="http://babylon-testnet-grpc.polkachu.com:20690" /> | <CopyableUrl url="grpc-babylon-testnet.imperator.co:443" /> | – | <CopyableUrl url="https://grpc-t.babylon.nodestake.org:443" /> |
+
+</div>
+
+
+</TabItem>
+
+<TabItem value="devnet" label="Devnet">
+
+### Babylon Genesis Devnet (`euphrates-0.6.0`)
+
+<div className="small-table">
+
+| Endpoint Type | Babylon Labs |
+|---------------|--------------|
+| **RPC**       | <CopyableUrl url="https://rpc.devnet.babylonlabs.io" /> |
+| **LCD**       | <CopyableUrl url="https://lcd.devnet.babylonlabs.io" /> |
+| **gRPC**      | <CopyableUrl url="https://grpc.devnet.babylonlabs.io" /> |
+
+</div>
+
+</TabItem>

package.json

@@ -41,6 +41,7 @@
     "docusaurus-theme-openapi-docs": "^4.3.1",
     "dotenv": "^16.4.7",
     "framer-motion": "^12.4.1",
+    "lucide-react": "^0.511.0",
     "prism-react-renderer": "^2.3.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",

src/components/CopyableUrl.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+export default function CopyableUrl({ url }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.3rem' }}>
+      <code>{url}</code>
+      <button
+        onClick={handleCopy}
+        title="Copy to clipboard"
+        style={{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: 0,
+          margin: 0,
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        {copied ? (
+          <Check size={14} strokeWidth={2} color="green" />
+        ) : (
+          <Copy size={14} strokeWidth={2} color="#888" />
+        )}
+      </button>
+    </span>
+  );
+}

src/css/custom.css

@@ -1616,6 +1616,16 @@ h3.anchor > code {
     background-color: var(--ifm-navbar-link-hover-color);
 }
 
+.small-table table {
+  font-size: 0.8rem;
+  word-break: break-word;
+}
+
+.small-table td, .small-table th {
+  padding: 0.3rem 0.4rem;
+}
+
+
 /*FOR MOBILE SCREEN SIZE*/
 @media screen and (max-width: 767px) {
   .hello_bar_contents.u-hflex-center-center.u-gap-10 {