Overhaul of Addresses page and implementation of a conversion tool. (#39)

Author: thomivy

README.md

@@ -74,7 +74,7 @@ navigation.
 
 4.  **Open the code and start customizing!**
 
-    Your site is now running at `http://localhost:3000/docs`.
+    Your site is now running at `http://localhost:3000/`.
 
     Edit to see your site update in real-time on save.
 

components.json

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

components/EvmToSubstrateConverter.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import {
+  blake2AsU8a,
+  encodeAddress,
+  decodeAddress,
+} from "@polkadot/util-crypto";
+import { hexToU8a, stringToU8a, u8aConcat, u8aToHex } from "@polkadot/util";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { Button } from "./ui/button";
+import { BlockCopyButton } from "./ui/block-copy-button";
+import Link from "next/link";
+
+const AddressConverter = () => {
+  const [evmAddress, setEvmAddress] = useState("");
+  const [substrateAddress, setSubstrateAddress] = useState("");
+  const [substrateAddressToConvert, setSubstrateAddressToConvert] =
+    useState("");
+  const [evmAddressResult, setEvmAddressResult] = useState("");
+
+  const convertEvmToSubstrate = () => {
+    if (!evmAddress) {
+      setSubstrateAddress("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);
+  };
+
+  return (
+    <div className="mt-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>EVM-to-Substrate 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{" "}
+            <Link
+              className="underline font-semibold text-linkBlue"
+              href="https://ss58.org/"
+            >
+              SS58.org
+            </Link>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center space-x-4">
+            <div className="flex-1">
+              <label
+                htmlFor="evmAddress"
+                className="block mb-1 text-gray-800 font-semibold"
+              >
+                EVM Address:
+              </label>
+              <input
+                type="text"
+                id="evmAddress"
+                className="bg-gray-200 text-gray-800 font-mono px-4 py-2 rounded w-full"
+                value={evmAddress}
+                onChange={(e) => setEvmAddress(e.target.value)}
+                placeholder="Enter EVM address"
+              />
+            </div>
+            <div className="flex-1">
+              <label
+                htmlFor="substrateAddress"
+                className="block mb-1 font-semibold"
+              >
+                Substrate Address:
+              </label>
+              <div
+                id="substrateAddress"
+                className="bg-gray-200 px-4 py-2 font-mono rounded w-full text-gray-800"
+              >
+                {substrateAddress || "Waiting..."}
+              </div>
+            </div>
+            <div className="ml-0 self-end flex">
+              <BlockCopyButton
+                name="Substrate Address"
+                code={substrateAddress}
+                className="h-10 w-10 rounded [&_svg]:size-4"
+              />
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full" onClick={convertEvmToSubstrate}>
+            Convert
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default AddressConverter;

components/ui/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "docs",
-  "version": "1.0.0",
+  "name": "tangle-docs",
+  "version": "2.0.0",
   "private": true,
-  "description": "Webb docs",
+  "description": "Tangle Network Documentation",
   "scripts": {
     "dev": "next",
     "start": "next start",
@@ -14,13 +14,15 @@
     "format": "prettier --write \"{components,pages}/**/*.{mdx,ts,js,jsx,tsx,json}\" ",
     "format:check": "prettier --check \"{components,pages}/**/*.{mdx,ts,js,jsx,tsx,json}\" "
   },
-  "author": "Webb Team",
+  "author": "Tangle Foundation",
   "license": "MPL-2.0",
   "dependencies": {
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "1.0.6",
     "@mdx-js/react": "^2.2.1",
     "@next/third-parties": "^14.2.3",
+    "@polkadot/util": "^12.6.2",
+    "@polkadot/util-crypto": "^12.6.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-aria/ssr": "3.4.0",

pages/developers/_meta.json

@@ -19,7 +19,7 @@
   "integrate": "Endpoints and Other Resources",
   "deploy-using-hardhat": "Deploy on Tangle with Hardhat",
   "json-rpc-endpoints": "RPC Methods",
-  "addresses": "EVM and Address Conversion",
+  "addresses": "Account Addresses",
   "transaction-fees": "Calculating Transaction Fees",
   "-- contribute": {
     "type": "separator",