Updates

components/GithubFileReaderDisplay.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from "next-themes";
 import React, { useEffect, useState } from "react";
 import { FaGithub, FaLink, FaSpinner } from "react-icons/fa";
 
@@ -17,6 +18,7 @@ const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
   const [content, setContent] = useState<string>("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const { theme } = useTheme();
 
   const getLanguage = (url: string) => {
     const extension = url.split(".").pop()?.toLowerCase();
@@ -29,53 +31,6 @@ const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
       case "js":
       case "jsx":
         return "javascript";
-      case "sol":
-        return "solidity";
-      case "md":
-      case "mdx":
-        return "markdown";
-      case "toml":
-        return "toml";
-      case "yaml":
-      case "yml":
-        return "yaml";
-      case "json":
-        return "json";
-      case "sh":
-        return "bash";
-      case "py":
-        return "python";
-      case "go":
-        return "go";
-      case "cpp":
-      case "c++":
-      case "cc":
-        return "cpp";
-      case "c":
-        return "c";
-      case "java":
-        return "java";
-      case "php":
-        return "php";
-      case "rb":
-        return "ruby";
-      case "swift":
-        return "swift";
-      case "kt":
-        return "kotlin";
-      case "cs":
-        return "csharp";
-      case "html":
-        return "html";
-      case "css":
-        return "css";
-      case "scss":
-        return "scss";
-      case "sql":
-        return "sql";
-      case "graphql":
-      case "gql":
-        return "graphql";
       default:
         return "text";
     }
@@ -96,7 +51,8 @@ const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
         const text = await response.text();
         const lines = text.split("\n");
         const selectedLines = lines.slice(fromLine - 1, toLine || lines.length);
-        setContent(selectedLines.join("\n"));
+        const codeContent = selectedLines.join("\n");
+        setContent(codeContent);
         setLoading(false);
       } catch (err) {
         setError(err instanceof Error ? err.message : "An error occurred");
@@ -123,6 +79,8 @@ const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
     );
   }
 
+  const language = getLanguage(url);
+
   return (
     <div className="my-6 overflow-hidden border border-gray-200 dark:border-gray-800 rounded-lg">
       <div className="flex justify-between items-center px-4 py-2 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-800">
@@ -148,13 +106,19 @@ const GithubFileReaderDisplay: React.FC<GithubFileReaderDisplayProps> = ({
         </div>
       </div>
 
-      <div className="p-4">
-        <pre><code className={`language-${getLanguage(url)}`}>
-{content}
-        </code></pre>
+      <div className="nextra-code-block nx-relative">
+        <pre className="nx-bg-primary-700/5 nx-overflow-x-auto nx-font-medium nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em]">
+          <code 
+            className={`language-${getLanguage(url)} nx-cdx`}
+            data-language={getLanguage(url)}
+            data-theme={theme}
+          >
+            {content}
+          </code>
+        </pre>
       </div>
     </div>
   );
 };
 
-export default GithubFileReaderDisplay;
+export default GithubFileReaderDisplay;

pages/restake/_meta.json

@@ -11,12 +11,10 @@
     "type": "separator",
     "title": "Restaking"
   },
-  "restake-introduction": "Introduction to Restaking",
+  "restake-introduction": "Tangle Restaking",
   "incentives": "Incentives",
-  "assets": "Supported Assets",
   "join_operator": "Operator Docs",
-  "how_to_restake_tangle": "How to Restake: Tangle DApp",
-  "how_to_restake_polkadotjs": "How to Restake: PolkadotJS",
+  "how_to_restake": "How to Restake on Tangle",
   "restake_developers": "Developer Docs",
   "-- liquid staking": {
     "type": "separator",

pages/restake/how_to_restake/_meta.json

@@ -0,0 +1,4 @@
+{
+    "how_to_restake_tangle": "How to Restake: Tangle DApp",
+    "how_to_restake_polkadotjs": "How to Restake: PolkadotJS"
+}

pages/restake/restake-introduction.mdx

@@ -8,8 +8,10 @@ Tangle provides permissionless asset restaking to developers and customers build
 
 The restaking infrastructure divides assets into pools, which can be created to represent a single asset or a basket of similarly valued assets. Pools of assets are used to secure Tangle Blueprint service instances and are rewarded collectively as pools. This is beneficial when integrating many liquid staked tokens of a single protocol, such as validator-specific liquid staking protocols, or when bundling lots of different LSTs of a single ecosystem such as a basket of ETH LSTs.
 
-## Benefits of restaking include:
+## Benefits of Tangle Restaking include:
 
+- Restaking any asset
+- On-demand service instances
 - Increased efficiency of staked capital by sharing it across instances
 - Additional revenue streams for stakers and operators
 - Boosted security for protocols leveraging new assets as security capital
@@ -23,14 +25,13 @@ Tangle Network has implemented a unique restaking system to allow its validator
 
 Tangle noderunners can opt-in to restake a portion of their staked TNT tokens to provide AVS instances such as oracles, privacy-preserving computation, and more. In return, they earn service fees and additional inflation rewards on top of their base validation rewards.
 
-### Here's how it works:
+### Lifecycle of an AVS Instance
 
 1. Developers create blueprints that define the specifications and requirements for AVS instances.
-2. Operators create a restaking profile by allocating their restaked TNT to specific blueprints they want to support.
-3. Users can request AVS instances from Tangle's restaked Operators for a fee. Requested instances are assigned to restaked operators based on the blueprint's criteria.
-4. Operators must execute the AVS instances they are assigned. Failure to do so may result in penalties or reduced rewards.
-5. Participating operators earn the service fees and proportional inflation rewards based on their restaked amounts and instances executed.
+2. Operators create a restaking profile and register to blueprints they want to operate.
+3. Users instance Tangle Blueprints and select from the set of registered operators and restaked assets.
+4. Operators then execute the AVS instances they approve and earn rewards. Failure to do so may result in penalties or reduced rewards.
 
-This restaking model allows Tangle to offer unique AVS instances powered by its decentralized validator set. Developers can leverage these services to easily deploy advanced decentralized applications like trustless cross-chain bridges, privacy solutions, identity systems, and more.
+This restaking model allows Tangle to offer unique AVS instances powered by its decentralized validator and operator set. Developers can leverage these services to easily deploy advanced decentralized applications like trustless cross-chain bridges, privacy solutions, identity systems, and more.
 
-By restaking, Tangle noderunners gain additional revenue, the network gains efficiency from its staked supply, and the ecosystem gains access to powerful new primitives to fuel innovation. Restaking helps align incentives and harness the security of the underlying proof-of-stake blockchain for exciting new use cases.
+By restaking, Tangle operators gain additional revenue, the network gains efficiency from its staked supply, and the ecosystem gains access to powerful new primitives to fuel innovation. Restaking helps align incentives and harness the security of the underlying proof-of-stake blockchain for exciting new use cases.

pages/restake/restake_developers/_meta.json

@@ -1,4 +1,5 @@
 {
-  "intro": "Introduction",
-  "restake_precompile": "Restake Precompile"
+  "integration": "Integration",
+  "restake_precompile": "Restake Precompile",
+  "services_precompile": "Services Precompile"
 }

pages/restake/restake_developers/intro.mdx → pages/restake/restake_developers/integration.mdx

@@ -1,4 +1,6 @@
-# Using Tangle Restake in your project
+# Integrating with Tangle Restaking
+
+To integrate with Tangle Restaking for the purposes of building a DApp or interacting with the restake functionality, you can use the Tangle MultiAssetDelegation and Services precompiles. These contracts provide logic to build new liquid restaking token pools and UIs over Tangle Restaking.
 
 Tangle MultiAssetDelegation data provides information about the current state of the Tangle network restake functionality.
 If you are looking to use this restake data in your project or build your DAPP, you can use the tangle-restake-precompile library to interact with the restake functionality.
@@ -8,7 +10,7 @@ The precompiles allow you to call the Substrate runtime directly which is not no
 
 ### How to use the precompile
 
-Precompile can be used like any other Solidity interface.
+The precompile can be used like any other Solidity interface.
 
 You can import the precompile in your Solidity project like this:
 

pages/restake/restake_developers/services_precompile.mdx

@@ -0,0 +1 @@
+https://github.com/tangle-network/tangle/blob/main/precompiles/services/Services.sol