Bump the npm_and_yarn group across 1 directory with 3 updates

.husky/pre-commit

@@ -1 +1,8 @@
-npx pretty-quick --staged
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# Compatability with nvm
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+    "*": "prettier --write"
+}

.vscode/snippets.code-snippets

@@ -15,14 +15,5 @@
   // 	],
   // 	"description": "Log output to console"
   // }
-  "Polkadot braces": {
-    "prefix": "pol",
-    "body": ["{{ polkadot: :polkadot }}"],
-    "description": "Polkadot wiki conditional rendering for Polkadot strings"
-  },
-  "Kusama braces": {
-    "prefix": "pol",
-    "body": ["{{ kusama: :kusama }}"],
-    "description": "Polkadot wiki conditional rendering for Kusama strings"
-  }
+
 }

README.md

@@ -45,11 +45,12 @@
 
 ## Contributing to Documentation
 
-The Technical Education team at Web3 Foundation are the primary maintainers of the Wiki and will
-review all issues and pull requests created in this repository. If you notice typos or grammatical
-errors, please feel free to create pull requests with these corrections directly. Larger
-contributions may start as issues to test the waters on the subject with the maintainers. It is
-generally preferable to create a pull request over an issue to propose a change to the Wiki content.
+[The Technical Education team](https://wiki.polkadot.network/docs/contributors) at Web3 Foundation
+are the primary maintainers of the Wiki and will review all issues and pull requests created on this
+repository. If you notice typos or grammatical errors, please feel free to create pull requests with
+these corrections directly. Larger contributions may start as issues to test the waters on the
+subject with the maintainers. It is generally preferable to create a pull request over an issue to
+propose a change to the Wiki content.
 
 :sparkles: **_The Wiki belongs to the community, help generate its identity._** :sparkles:
 
@@ -202,37 +203,8 @@ command. After these jobs are completed, the CICD production workflow will autom
 
 ### Conditional Rendering
 
-The two Wikis support conditional rendering depending on which Wiki is being deployed. This is
-useful for mirrored pages with most content in common but have minor differences. To use this
-functionality, surround Kusama specific content with
-`{{ kusama: KUSAMA_SPECIFIC_CONTENT :kusama }}`, and polkadot specific content with
-`{{ polkadot: POLKADOT_SPECIFIC_CONTENT :polkadot }}`.
-
-For example the syntax:
-
-```markdown
-The {{ polkadot: Polkdadot Wiki :polkadot }} {{ kusama: Kusama Guide :kusama }} is a great resource!
-```
-
-Will render:
-
-```
-The Polkdadot Wiki is a great resource!
-```
-
-or
-
-```
-The Kusama Guide is a great resource!
-```
-
-depending on which project is currently loaded.
-
-To verify the appropriate values have been substituted in each scenario, run `polkadot:start` and
-`kusama:start` in separate terminals. If prompted with
-`[WARNING] Something is already running on port 3000. Would you like to run the app on another port instead?`,
-proceed with `yes`. This will likely launch one project on port 3000 and the other on 3001, allowing
-you to compare the rendered outputs for both projects locally and simultaneously.
+The Polkadot Wiki does not support conditional rendering. If needed, use `Tabs` and `TabItem` to
+display values for Polkadot and Kusama.
 
 ### Inline React Components
 
@@ -250,30 +222,7 @@ A full list of sample components can be found
 
 Try and reuse existing components as much as possible instead of creating new ones to keep the code
 lean and comprehensive. It is also important to verify prettier has not modified the formatting of
-your component after making a commit. Below are some best practices for achieving common formatting
-that will not be modified by the prettier command:
-
-Always wrap RPC components in conditional rendering & keep them on new lines:
-
-```
-{{ polkadot: <RPC network="polkadot" path="query.staking.validatorCount" defaultValue={297}/> :polkadot }}
-{{ kusama: <RPC network="kusama" path="query.staking.validatorCount" defaultValue={297}/> :kusama }}
-```
-
-To add grammar without added spacing, place the grammar inside the conditional brackets:
-
-```
-The validator count followed by a period is
-{{ polkadot: <RPC network="polkadot" path="query.staking.validatorCount" defaultValue={297}/>. :polkadot }}
-{{ kusama: <RPC network="kusama" path="query.staking.validatorCount" defaultValue={297}/>. :kusama }}
-
-The validator count in parentheses is
-{{ polkadot: (<RPC network="polkadot" path="query.staking.validatorCount" defaultValue={297}/>) :polkadot }}
-{{ kusama: (<RPC network="kusama" path="query.staking.validatorCount" defaultValue={297}/>) :kusama }}
-```
-
-Failing to follow this schema can results in unexpected formatting, such as added line-breaks or
-spacing, especially after running prettier.
+your component after making a commit.
 
 ## Internationalization
 

components/Auction-Schedule.jsx

@@ -138,14 +138,14 @@ function Render(explorerUrl, auctions, setAuctions, index) {
 			Block #{auctions[index].startBlock.height}
 		</a>
 		<hr />
-		<b>Bidding Starts:</b>
+		<b>Ending Period Starts:</b>
 		<br />
 		{`${biddingStartsDate} - `}
 		<a href={`${explorerUrl}${auctions[index].biddingStartBlock.height}`}>
 			Block #{auctions[index].biddingStartBlock.height}
 		</a>
 		<hr />
-		<b>Bidding Ends:</b>
+		<b>Auction Ends:</b>
 		<br />
 		{`${biddingEndsDate} - `}
 		<a href={`${explorerUrl}${auctions[index].biddingEndsBlock.height}`}>

components/MessageBox.css

@@ -0,0 +1,27 @@
+/* src/css/messageBox.css */
+
+.message-box {
+    position: fixed;
+    bottom: 20px;
+    right: 10px;
+    background-color: hwb(0 80% 2%);
+    z-index: 1000; /* Set a high z-index value */
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 1);
+    max-width: 270px; /* Adjust width as needed */
+  }
+
+  .close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+  } 
+
+  .messageContent {
+    margin-top: 10px;
+  }

components/MessageBox.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+const MessageBox = ({ message }) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  // Function to convert markdown links to HTML links
+  const renderMarkdownLinks = (text) => {
+    return text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div className="message-box">
+          <button className="close-button" onClick={handleClose}>
+            &#10006; {/* Unicode character for "x" */}
+          </button>
+          <div
+            className="message-content"
+            dangerouslySetInnerHTML={{ __html: renderMarkdownLinks(message) }} // Render HTML content
+          ></div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MessageBox;

components/Metadata.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useState, useEffect } from "react";
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import Packages from "./../package.json";
@@ -8,15 +7,41 @@ const PolkadotJSVersion = Packages.devDependencies["@polkadot/api"].substring(1)
 
 // Chains that will appear in the dropdown selection menu (add new parachains here)
 const Networks = [
-  { name: "Polkadot", rpc: "wss://rpc.polkadot.io" },
-  { name: "Kusama", rpc: "wss://kusama-rpc.polkadot.io" },
+  { name: "Polkadot", rpc: "wss://rpc.ibp.network/polkadot" },
+  { name: "Polkadot Asset Hub", rpc: "wss://polkadot-asset-hub-rpc.polkadot.io" },
+  { name: "Polkadot People", rpc: "wss://polkadot-people-rpc.polkadot.io"},
+  { name: "Polkadot Bridge Hub", rpc: "wss://polkadot-bridge-hub-rpc.polkadot.io"},
+  { name: "Polkadot Collectives", rpc: "wss://polkadot-collectives-rpc.polkadot.io"},
+  { name: "Kusama", rpc: "wss://rpc.ibp.network/kusama" },
+  { name: "Kusama Asset Hub", rpc: "wss://kusama-asset-hub-rpc.polkadot.io" },
+  { name: "Kusama People", rpc: "wss://kusama-people-rpc.polkadot.io"},
+  { name: "Kusama Bridge Hub", rpc: "wss://kusama-bridge-hub-rpc.polkadot.io"},
+  { name: "Kusama Coretime", rpc: "wss://kusama-coretime-rpc.polkadot.io"},
   { name: "Westend", rpc: "wss://westend-rpc.polkadot.io" },
-  { name: "Statemint", rpc: "wss://statemint-rpc.polkadot.io" },
-  { name: "Statemine", rpc: "wss://statemine-rpc.polkadot.io" },
-  { name: "Westmint", rpc: "wss://westmint-rpc.polkadot.io" },
   { name: "Rococo", rpc: "wss://rococo-rpc.polkadot.io" },
 ];
 
+// Common pallets specific to Polkadot/Kusama.
+const CommonRuntimeModules = ["auctions", "claims", "crowdloan", "registrar", "slots"];
+const CommonParachainRuntimeModules = ["configuration", "hrmp", "initializer", "paras_inherent", "paras", "disputes", "disputes/slashing"];
+// Mappings from metadata to names compatible with searching in Rust docs
+const PalletNameMappings = {
+  "registrar": "paras_registrar",
+  "xcmpallet": "xcm",
+  "voterlist": "bags_list",
+  "fastunstake": "fast_unstake",
+  "childbounties": "child_bounties",
+  "nominationpools": "nomination_pools",
+  "convictionvoting": "conviction_voting",
+  "imonline": "im_online",
+  "parasdisputes": "disputes",
+  "parasslashing": "disputes/slashing",
+  "parainherent": "paras_inherent",
+  "messagequeue": "message_queue",
+  "electionprovidermultiphase": "election_provider_multi_phase",
+  "system": "frame_system",
+};
+
 // Track all top-level containers for expand/collapse all functionality
 let Expandable = [];
 
@@ -27,33 +52,57 @@ let SearchThrottle;
 export default function Metadata({ version }) {
   const [returnValue, setReturnValue] = useState("");
 
-  useEffect(async () => {
-    // Load default network
-    let defaultNetwork = "Polkadot";
-    if (document.title === "Metadata Explorer · Guide") { defaultNetwork = "Kusama"; }
-    const network = Networks.find(network => { return network.name === defaultNetwork });
-    const wsUrl = network.rpc;
-
-    // Build selection dropdown
-    let options = [];
-    Networks.forEach(chain => {
-      const option = <option value={chain.rpc} key={chain.name}>{`${chain.name.charAt(0).toUpperCase() + chain.name.slice(1)}`}</option>
-      options.push(option);
-    });
-    const dropdown = (
-      <select defaultValue={network.rpc} style={DropDownStyle} onChange={(e) => GetMetadata(version, e.target.value, dropdown, setReturnValue)}>
-        {options.map((option) => (option))}
-      </select>
-    )
+  useEffect(() => {
+    // Define async function inside useEffect
+    const fetchMetadata = async () => {
+      // Load default network
+      let defaultNetwork = "Polkadot";
+      if (document.title === "Metadata Explorer · Guide") {
+        defaultNetwork = "Kusama";
+      }
 
-    // Set loading status
-    setReturnValue(<div style={PinkText}><b>Loading Metadata Explorer...</b></div>);
+      const network = Networks.find((network) => network.name === defaultNetwork);
+      const wsUrl = network.rpc;
+
+      // Build selection dropdown
+      let options = [];
+      Networks.forEach((chain) => {
+        const option = (
+          <option value={chain.rpc} key={chain.name}>
+            {`${chain.name.charAt(0).toUpperCase() + chain.name.slice(1)}`}
+          </option>
+        );
+        options.push(option);
+      });
+
+      const dropdown = (
+        <select
+          defaultValue={network.rpc}
+          style={DropDownStyle}
+          onChange={(e) =>
+            GetMetadata(version, e.target.value, dropdown, setReturnValue)
+          }
+        >
+          {options}
+        </select>
+      );
+
+      // Set loading status
+      setReturnValue(
+        <div style={PinkText}>
+          <b>Loading Metadata Explorer...</b>
+        </div>
+      );
 
-    // Fetch metadata from the chain
-    await GetMetadata(version, wsUrl, dropdown, setReturnValue);
-  }, []);
+      // Fetch metadata from the chain
+      await GetMetadata(version, wsUrl, dropdown, setReturnValue);
+    };
 
-  return (returnValue);
+    // Call async function
+    fetchMetadata();
+  }, [version]); // Add dependencies if necessary
+
+  return returnValue;
 }
 
 // Retrieve metadata from selected chain and render results
@@ -147,12 +196,13 @@ async function GetMetadata(version, wsUrl, dropdown, setReturnValue) {
 
 // Format lists for a given pallet invocation
 function BuildPalletItems(pallet, call, type, types) {
+  // BuildPalletItems(pallet, api.tx[`${Camel(pallet.name)}`], "extrinsics", types);
   let output = [];
   if (call !== undefined && call !== null) {
     const keys = Object.keys(call).sort((a, b) => a.localeCompare(b));
     keys.forEach(key => {
       const meta = call[key].meta.toHuman();
-      const description = FormatDescription(meta.docs.join(" "));
+      const description = FormatDescription(pallet.name.toLowerCase(), meta.docs.join(" "));
       const keyUpper = key.charAt(0).toUpperCase() + key.slice(1);
       let list;
       switch (type) {
@@ -231,7 +281,7 @@ function BuildRPCOrRuntime(call, type) {
     methodKeys.sort((a, b) => a.localeCompare(b));
     methodKeys.forEach(methodKey => {
       const childCall = methods[methodKey].meta;
-      const callDescription = FormatDescription(childCall.description);
+      const callDescription = FormatDescription('', childCall.description);
       let listItems;
       switch (type) {
         case "rpc":
@@ -308,13 +358,35 @@ function CompilePalletSection(palletName, category, items) {
   )
 }
 
+function BuildDocLink(pallet, method) {
+  let mapped = PalletNameMappings[pallet] != undefined ? PalletNameMappings[pallet] : pallet;
+  if (CommonRuntimeModules.includes(pallet)) {
+    return `https://paritytech.github.io/polkadot-sdk/master/polkadot_runtime_common/${mapped}/pallet/struct.Pallet.html#method.${method}`;
+  } else if (CommonParachainRuntimeModules.includes(mapped)) {
+    return `https://paritytech.github.io/polkadot-sdk/master/polkadot_runtime_parachains/${mapped}/pallet/struct.Pallet.html#method.${method}`;
+  } else if (pallet == "staking") {
+    // not sure why this needs a special link, but oh well
+    return `https://paritytech.github.io/polkadot-sdk/master/pallet_${mapped}/struct.Pallet.html#method.${method}`;
+  }
+  else if (mapped.startsWith("frame_")) {
+    return `https://paritytech.github.io/polkadot-sdk/master/${mapped}/pallet/struct.Pallet.html#method.${method}`;
+
+  } else {
+    return `https://paritytech.github.io/polkadot-sdk/master/pallet_${mapped}/pallet/struct.Pallet.html#method.${method}`;
+  }
+}
+
 // Format a description string
-function FormatDescription(description) {
+function FormatDescription(pallet, description) {
   let descriptionItems = description.split("`");
   let output = [];
   for (let i = 0; i < descriptionItems.length; i++) {
     if (i % 2 === 0) {
       output.push(<p key={i} style={DescriptionRegular}>{descriptionItems[i]}</p>)
+    } else if (descriptionItems[i].startsWith("Pallet::")) {
+      let method = descriptionItems[i].split("Pallet::")[1];
+      let link = BuildDocLink(pallet, method);
+      output.push(<a key={i} target="_blank" href={link} style={DescriptionHighlighting}>{descriptionItems[i]}</a>)
     } else {
       output.push(<p key={i} style={DescriptionHighlighting}>{descriptionItems[i]}</p>)
     }