Fixed telemetry link, moved darkmode button, added Tangel specific address conversion (tg..) altered styling of nav, separated address page into generals and tutorials, fixed trailing slash issue for SEO, added new gadget page with youtube embeds

components.json

@@ -11,7 +11,8 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "./components",
-    "utils": "./lib/utils"
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/app/components/ui"
   }
 }

components/EvmToSubstrateConverter.tsx

@@ -1,10 +1,6 @@
 import React, { useState } from "react";
-import {
-  blake2AsU8a,
-  encodeAddress,
-  decodeAddress,
-} from "@polkadot/util-crypto";
-import { hexToU8a, stringToU8a, u8aConcat, u8aToHex } from "@polkadot/util";
+import { blake2AsU8a, encodeAddress } from "@polkadot/util-crypto";
+import { hexToU8a, stringToU8a, u8aConcat } from "@polkadot/util";
 import {
   Card,
   CardContent,
@@ -16,34 +12,45 @@ import {
 import { Button } from "./ui/button";
 import { BlockCopyButton } from "./ui/block-copy-button";
 import Link from "next/link";
+import { Callout } from "nextra/components";
+
+const TANGLE_PREFIX = 5845;
+
+const evmToTangle = (evmAddress) => {
+  const addr = hexToU8a(evmAddress);
+  const data = stringToU8a("evm:");
+  const res = blake2AsU8a(u8aConcat(data, addr));
+  const tangleAddress = encodeAddress(res, TANGLE_PREFIX);
+  return tangleAddress;
+};
 
 const AddressConverter = () => {
   const [evmAddress, setEvmAddress] = useState("");
-  const [substrateAddress, setSubstrateAddress] = useState("");
-  const [substrateAddressToConvert, setSubstrateAddressToConvert] =
-    useState("");
-  const [evmAddressResult, setEvmAddressResult] = useState("");
+  const [tangleAddress, setTangleAddress] = useState("");
 
-  const convertEvmToSubstrate = () => {
+  const convertAddress = () => {
     if (!evmAddress) {
-      setSubstrateAddress("Please enter an EVM address.");
+      setTangleAddress("Please enter an EVM address.");
       return;
     }
-    const addr = hexToU8a(evmAddress);
-    const data = stringToU8a("evm:");
-    const res = blake2AsU8a(u8aConcat(data, addr));
-    const output = encodeAddress(res, 42);
-    setSubstrateAddress(output);
+
+    try {
+      const convertedAddress = evmToTangle(evmAddress);
+      setTangleAddress(convertedAddress);
+    } catch (error) {
+      setTangleAddress("Invalid EVM address.");
+    }
   };
 
   return (
     <div className="mt-8">
       <Card>
         <CardHeader>
-          <CardTitle>EVM-to-Substrate Address Converter</CardTitle>
+          <CardTitle>EVM to Tangle Address Converter</CardTitle>
           <CardDescription>
-            Enter an EVM Address to convert to the SS58 Substrate format. To
-            convert an SS58 address to a public key, you can use{" "}
+            Enter an EVM address to convert it to the prefixed form unique to
+            Tangle Network. To convert an SS58 address to a public key or other
+            networks, you can use{" "}
             <Link
               className="underline font-semibold text-linkBlue"
               href="https://ss58.org/"
@@ -72,32 +79,44 @@ const AddressConverter = () => {
             </div>
             <div className="flex-1">
               <label
-                htmlFor="substrateAddress"
+                htmlFor="tangleAddress"
                 className="block mb-1 font-semibold"
               >
-                Substrate Address:
+                Tangle Address:
               </label>
               <div
-                id="substrateAddress"
+                id="tangleAddress"
                 className="bg-gray-200 px-4 py-2 font-mono rounded w-full text-gray-800"
               >
-                {substrateAddress || "Waiting..."}
+                {tangleAddress || "Waiting..."}
               </div>
             </div>
             <div className="ml-0 self-end flex">
               <BlockCopyButton
-                name="Substrate Address"
-                code={substrateAddress}
+                name="Tangle Address"
+                code={tangleAddress}
                 className="h-10 w-10 rounded [&_svg]:size-4"
               />
             </div>
           </div>
         </CardContent>
         <CardFooter>
-          <Button className="w-full" onClick={convertEvmToSubstrate}>
+          <Button className="w-full" onClick={convertAddress}>
             Convert
           </Button>
         </CardFooter>
+        <Callout type="warning" emoji="⚠️">
+          Please note that the conversion from an EVM address to a Tangle
+          address using the provided tool is a one-way operation, and you cannot
+          derive the original EVM address from a Tangle address.
+          <br />
+          <Link
+            className="underline text-linkBlue"
+            href="/developers/addresses"
+          >
+            Learn more about Addresses on Tangle.
+          </Link>
+        </Callout>
       </Card>
     </div>
   );

components/Footer.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import DiscordBanner from "./DiscordBanner";
-import { ThemeSwitch } from "nextra-theme-docs";
 
 const Footer = () => {
   return (
@@ -20,9 +19,6 @@ const Footer = () => {
               Contact
             </a>
           </li>
-          <li>
-            <ThemeSwitch className="border-gray-700 border mix-blend-plus-lighter" />
-          </li>
         </ul>
       </div>
     </footer>

components/HeaderLogo.tsx

@@ -6,11 +6,11 @@ function HeaderLogo() {
         target="_blank"
         rel="noreferrer"
         title="Tangle Homepage"
-        className="mr-2" // Add some right margin to create spacing
+        className="" // Add some right margin to create spacing
       >
         <svg
           width="130"
-          height="60"
+          height="55"
           viewBox="0 0 453 200"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -66,7 +66,7 @@ function HeaderLogo() {
         </svg>
       </a>
 
-      <span className="bg-blue-100 text-blue-800 text-lg font-semibold mt-1 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-2">
+      <span className="bg-blue-100 text-blue-800 text-md font-semibold  px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-2">
         DOCS
       </span>
     </div>

components/HelpDiscordBtn.tsx

@@ -3,13 +3,13 @@ import React from "react";
 const HelpDiscordBtn: React.FC = () => {
   return (
     <a href="https://discord.com/invite/cv8EfJu3Tn">
-      <div className="flex items-center justify-center pl-3 max-h-2">
-        <button className="flex items-center bg-white border border-gray-300 rounded-lg shadow-md px-3 py-1 text-sm font-medium text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+      <div className="flex items-center justify-center pl-1">
+        <button className="flex items-center h-7 bg-white border border-gray-300 rounded-md shadow-md px-3 py-1 text-sm font-medium text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
           <svg
-            className="h-6 w-6 mr-0 md:mr-2"
+            className="h-5 w-6 mr-0 md:mr-2"
             xmlns="http://www.w3.org/2000/svg"
-            width="500px"
-            height="500px"
+            width="400px"
+            height="400px"
             viewBox="0 -28.5 256 256"
             version="1.1"
             preserveAspectRatio="xMidYMid"
@@ -22,7 +22,7 @@ const HelpDiscordBtn: React.FC = () => {
               />
             </g>
           </svg>
-          <span className="hidden lg:inline text-xs lg:text-sm">Connect</span>
+          <span className="hidden lg:inline text-xs lg:text-sm">Join</span>
         </button>
       </div>
     </a>

components/NetworkConfig.tsx → components/NetworkResources.tsx

@@ -1,8 +1,14 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import { BlockCopyButton } from "./ui/block-copy-button";
-import { FlaskConical, WalletMinimal, Waypoints } from "lucide-react";
+import {
+  FlaskConical,
+  WalletMinimal,
+  Waypoints,
+  SendToBack,
+} from "lucide-react";
 import WalletTable from "./WalletTable";
+import EvmToSubstrateConverter from "./EvmToSubstrateConverter";
 
 const NETWORK_DATA = {
   mainnet: [
@@ -72,7 +78,7 @@ const NETWORK_DATA = {
       property: "Telemetry",
       value: {
         type: "link",
-        url: "https://telemetry.polkadot.io/#list/0x3d22af97d919611e03bbcbda96f65988758865423e89b2d99547a6bb61452db3",
+        url: "https://telemetry.polkadot.io/#list/0x44f68476df71ebf765b630bf08dc1e0fedb2bf614a1aa0563b3f74f20e47b3e0",
         text: "Telemetry",
       },
     },
@@ -277,11 +283,28 @@ const NetworkTabs = () => {
             Wallets
           </a>
         </li>
+        <li className="inline-flex text-xl items-center justify-center pt-8 px-4  border-b-2 border-transparent rounded-t-lg group">
+          {" "}
+          <a
+            href="#"
+            onClick={() => handleTabClick("evmToSubstrate")}
+            className={`inline-block p-4 rounded-t-lg ${
+              activeTab === "evmToSubstrate"
+                ? "text-blue-600 bg-gray-100 active dark:bg-gray-800 dark:text-blue-500"
+                : "hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+            }`}
+          >
+            <SendToBack className="w-4 inline h-4 me-2 text-blue-600 dark:text-blue-500" />
+            EVM-Substrate Transfers
+          </a>
+        </li>
       </ul>
 
       <div className="table-auto w-full">
         {activeTab === "wallets" ? (
           <WalletTable />
+        ) : activeTab === "evmToSubstrate" ? (
+          <EvmToSubstrateConverter />
         ) : (
           renderTable(NETWORK_DATA[activeTab])
         )}
@@ -291,3 +314,5 @@ const NetworkTabs = () => {
 };
 
 export default NetworkTabs;
+
+<EvmToSubstrateConverter />;

components/YoutubeVideo.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import LiteYouTubeEmbed from "react-lite-youtube-embed";
+import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
+
+const YoutubeVideo = ({ id, title }) => {
+  return <LiteYouTubeEmbed id={id} title={title} poster="maxresdefault" webp />;
+};
+
+export default YoutubeVideo;

components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "../../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

next.config.mjs

@@ -9,7 +9,7 @@ const nextConfig = {
   experimental: {
     legacyBrowsers: false,
   },
-  trailingSlash: true,
+  trailingSlash: false,
   async redirects() {
     return [
       {

package.json

@@ -24,6 +24,7 @@
     "@polkadot/util": "^12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-aria/ssr": "3.4.0",
     "@sentry/nextjs": "^7.27.0",
@@ -52,6 +53,7 @@
     "react-hook-form": "^7.51.1",
     "react-hot-toast": "2.4.0",
     "react-icons": "^4.12.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "react-use": "^17.4.0",
     "react-use-measure": "^2.1.1",
     "rehype-katex": "5.0.0",

pages/developers/_meta.json

@@ -6,21 +6,27 @@
   "blueprints": "Blueprints",
   "services": "Actively Validated Services (AVS)",
   "usecases": "Use Cases",
+  "-- specification-developers": {
+    "type": "separator",
+    "title": "Specification Developers"
+  },
+  "gadget-tutorial": "Create a Gadget",
+  "-- solution-developers": {
+    "type": "separator",
+    "title": "Solution Developers"
+  },
+  "integrate": "Endpoints and Integration",
+  "deploy-using-hardhat": "Deploy Contracts with Hardhat",
+  "transaction-fees": "Calculating Transaction Fees",
+  "evm-substrate-transfers": "EVM-Substrate Transfers",
   "-- technicals": {
     "type": "separator",
     "title": "Technicals"
   },
+  "addresses": "Account Addresses",
   "pallets": "Pallets",
   "precompiles": "Precompiles",
-  "-- guides": {
-    "type": "separator",
-    "title": "Resources & Guides"
-  },
-  "integrate": "Endpoints and Other Resources",
-  "deploy-using-hardhat": "Deploy on Tangle with Hardhat",
   "json-rpc-endpoints": "RPC Methods",
-  "addresses": "Account Addresses",
-  "transaction-fees": "Calculating Transaction Fees",
   "-- contribute": {
     "type": "separator",
     "title": "Contribute"