Skip to content

Commit 34eaf7c

Browse files
thomivythomivy
authored
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 (#40)
* added youtube render lib and gadget tutorial page * fixed trailing slash issue on URLs for SEO * split addresses into tutorial content and general page, reorged developer sidebar * rename networkconfig to networkresources * rename * rename * moved callout into converter component * fixed aliases and added a toggle component * updated evm to substrate converter to use tangle prefix so tgXXX * moved darkmode button to header from footer, tweaked styling * prettier * gremlin char * path fix * build errors * path fix * attempts to fix build error * path fixes, prettier, added github repo link to gadget page. * import fix * import fix * import fix
1 parent edb12b9 commit 34eaf7c

19 files changed

+337
-180
lines changed

‎components.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"prefix": ""
1212
},
1313
"aliases": {
14-
"components": "./components",
15-
"utils": "./lib/utils"
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/app/components/ui"
1617
}
1718
}

‎components/EvmToSubstrateConverter.tsx

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React, { useState } from "react";
2-
import {
3-
blake2AsU8a,
4-
encodeAddress,
5-
decodeAddress,
6-
} from "@polkadot/util-crypto";
7-
import { hexToU8a, stringToU8a, u8aConcat, u8aToHex } from "@polkadot/util";
2+
import { blake2AsU8a, encodeAddress } from "@polkadot/util-crypto";
3+
import { hexToU8a, stringToU8a, u8aConcat } from "@polkadot/util";
84
import {
95
Card,
106
CardContent,
@@ -16,34 +12,45 @@ import {
1612
import { Button } from "./ui/button";
1713
import { BlockCopyButton } from "./ui/block-copy-button";
1814
import Link from "next/link";
15+
import { Callout } from "nextra/components";
16+
17+
const TANGLE_PREFIX = 5845;
18+
19+
const evmToTangle = (evmAddress) => {
20+
const addr = hexToU8a(evmAddress);
21+
const data = stringToU8a("evm:");
22+
const res = blake2AsU8a(u8aConcat(data, addr));
23+
const tangleAddress = encodeAddress(res, TANGLE_PREFIX);
24+
return tangleAddress;
25+
};
1926

2027
const AddressConverter = () => {
2128
const [evmAddress, setEvmAddress] = useState("");
22-
const [substrateAddress, setSubstrateAddress] = useState("");
23-
const [substrateAddressToConvert, setSubstrateAddressToConvert] =
24-
useState("");
25-
const [evmAddressResult, setEvmAddressResult] = useState("");
29+
const [tangleAddress, setTangleAddress] = useState("");
2630

27-
const convertEvmToSubstrate = () => {
31+
const convertAddress = () => {
2832
if (!evmAddress) {
29-
setSubstrateAddress("Please enter an EVM address.");
33+
setTangleAddress("Please enter an EVM address.");
3034
return;
3135
}
32-
const addr = hexToU8a(evmAddress);
33-
const data = stringToU8a("evm:");
34-
const res = blake2AsU8a(u8aConcat(data, addr));
35-
const output = encodeAddress(res, 42);
36-
setSubstrateAddress(output);
36+
37+
try {
38+
const convertedAddress = evmToTangle(evmAddress);
39+
setTangleAddress(convertedAddress);
40+
} catch (error) {
41+
setTangleAddress("Invalid EVM address.");
42+
}
3743
};
3844

3945
return (
4046
<div className="mt-8">
4147
<Card>
4248
<CardHeader>
43-
<CardTitle>EVM-to-Substrate Address Converter</CardTitle>
49+
<CardTitle>EVM to Tangle Address Converter</CardTitle>
4450
<CardDescription>
45-
Enter an EVM Address to convert to the SS58 Substrate format. To
46-
convert an SS58 address to a public key, you can use{" "}
51+
Enter an EVM address to convert it to the prefixed form unique to
52+
Tangle Network. To convert an SS58 address to a public key or other
53+
networks, you can use{" "}
4754
<Link
4855
className="underline font-semibold text-linkBlue"
4956
href="https://ss58.org/"
@@ -72,32 +79,44 @@ const AddressConverter = () => {
7279
</div>
7380
<div className="flex-1">
7481
<label
75-
htmlFor="substrateAddress"
82+
htmlFor="tangleAddress"
7683
className="block mb-1 font-semibold"
7784
>
78-
Substrate Address:
85+
Tangle Address:
7986
</label>
8087
<div
81-
id="substrateAddress"
88+
id="tangleAddress"
8289
className="bg-gray-200 px-4 py-2 font-mono rounded w-full text-gray-800"
8390
>
84-
{substrateAddress || "Waiting..."}
91+
{tangleAddress || "Waiting..."}
8592
</div>
8693
</div>
8794
<div className="ml-0 self-end flex">
8895
<BlockCopyButton
89-
name="Substrate Address"
90-
code={substrateAddress}
96+
name="Tangle Address"
97+
code={tangleAddress}
9198
className="h-10 w-10 rounded [&_svg]:size-4"
9299
/>
93100
</div>
94101
</div>
95102
</CardContent>
96103
<CardFooter>
97-
<Button className="w-full" onClick={convertEvmToSubstrate}>
104+
<Button className="w-full" onClick={convertAddress}>
98105
Convert
99106
</Button>
100107
</CardFooter>
108+
<Callout type="warning" emoji="⚠️">
109+
Please note that the conversion from an EVM address to a Tangle
110+
address using the provided tool is a one-way operation, and you cannot
111+
derive the original EVM address from a Tangle address.
112+
<br />
113+
<Link
114+
className="underline text-linkBlue"
115+
href="/developers/addresses"
116+
>
117+
Learn more about Addresses on Tangle.
118+
</Link>
119+
</Callout>
101120
</Card>
102121
</div>
103122
);

‎components/Footer.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import DiscordBanner from "./DiscordBanner";
3-
import { ThemeSwitch } from "nextra-theme-docs";
43

54
const Footer = () => {
65
return (
@@ -20,9 +19,6 @@ const Footer = () => {
2019
Contact
2120
</a>
2221
</li>
23-
<li>
24-
<ThemeSwitch className="border-gray-700 border mix-blend-plus-lighter" />
25-
</li>
2622
</ul>
2723
</div>
2824
</footer>

‎components/HeaderLogo.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ function HeaderLogo() {
66
target="_blank"
77
rel="noreferrer"
88
title="Tangle Homepage"
9-
className="mr-2" // Add some right margin to create spacing
9+
className="" // Add some right margin to create spacing
1010
>
1111
<svg
1212
width="130"
13-
height="60"
13+
height="55"
1414
viewBox="0 0 453 200"
1515
fill="none"
1616
xmlns="http://www.w3.org/2000/svg"
@@ -66,7 +66,7 @@ function HeaderLogo() {
6666
</svg>
6767
</a>
6868

69-
<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">
69+
<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">
7070
DOCS
7171
</span>
7272
</div>

‎components/HelpDiscordBtn.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import React from "react";
33
const HelpDiscordBtn: React.FC = () => {
44
return (
55
<a href="https://discord.com/invite/cv8EfJu3Tn">
6-
<div className="flex items-center justify-center pl-3 max-h-2">
7-
<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">
6+
<div className="flex items-center justify-center pl-1">
7+
<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">
88
<svg
9-
className="h-6 w-6 mr-0 md:mr-2"
9+
className="h-5 w-6 mr-0 md:mr-2"
1010
xmlns="http://www.w3.org/2000/svg"
11-
width="500px"
12-
height="500px"
11+
width="400px"
12+
height="400px"
1313
viewBox="0 -28.5 256 256"
1414
version="1.1"
1515
preserveAspectRatio="xMidYMid"
@@ -22,7 +22,7 @@ const HelpDiscordBtn: React.FC = () => {
2222
/>
2323
</g>
2424
</svg>
25-
<span className="hidden lg:inline text-xs lg:text-sm">Connect</span>
25+
<span className="hidden lg:inline text-xs lg:text-sm">Join</span>
2626
</button>
2727
</div>
2828
</a>

‎components/NetworkConfig.tsx renamed to ‎components/NetworkResources.tsx

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import React, { useState } from "react";
22
import Link from "next/link";
33
import { BlockCopyButton } from "./ui/block-copy-button";
4-
import { FlaskConical, WalletMinimal, Waypoints } from "lucide-react";
4+
import {
5+
FlaskConical,
6+
WalletMinimal,
7+
Waypoints,
8+
SendToBack,
9+
} from "lucide-react";
510
import WalletTable from "./WalletTable";
11+
import EvmToSubstrateConverter from "./EvmToSubstrateConverter";
612

713
const NETWORK_DATA = {
814
mainnet: [
@@ -72,7 +78,7 @@ const NETWORK_DATA = {
7278
property: "Telemetry",
7379
value: {
7480
type: "link",
75-
url: "https://telemetry.polkadot.io/#list/0x3d22af97d919611e03bbcbda96f65988758865423e89b2d99547a6bb61452db3",
81+
url: "https://telemetry.polkadot.io/#list/0x44f68476df71ebf765b630bf08dc1e0fedb2bf614a1aa0563b3f74f20e47b3e0",
7682
text: "Telemetry",
7783
},
7884
},
@@ -277,11 +283,28 @@ const NetworkTabs = () => {
277283
Wallets
278284
</a>
279285
</li>
286+
<li className="inline-flex text-xl items-center justify-center pt-8 px-4 border-b-2 border-transparent rounded-t-lg group">
287+
{" "}
288+
<a
289+
href="#"
290+
onClick={() => handleTabClick("evmToSubstrate")}
291+
className={`inline-block p-4 rounded-t-lg ${
292+
activeTab === "evmToSubstrate"
293+
? "text-blue-600 bg-gray-100 active dark:bg-gray-800 dark:text-blue-500"
294+
: "hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300"
295+
}`}
296+
>
297+
<SendToBack className="w-4 inline h-4 me-2 text-blue-600 dark:text-blue-500" />
298+
EVM-Substrate Transfers
299+
</a>
300+
</li>
280301
</ul>
281302

282303
<div className="table-auto w-full">
283304
{activeTab === "wallets" ? (
284305
<WalletTable />
306+
) : activeTab === "evmToSubstrate" ? (
307+
<EvmToSubstrateConverter />
285308
) : (
286309
renderTable(NETWORK_DATA[activeTab])
287310
)}
@@ -291,3 +314,5 @@ const NetworkTabs = () => {
291314
};
292315

293316
export default NetworkTabs;
317+
318+
<EvmToSubstrateConverter />;

‎components/YoutubeVideo.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
import LiteYouTubeEmbed from "react-lite-youtube-embed";
3+
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
4+
5+
const YoutubeVideo = ({ id, title }) => {
6+
return <LiteYouTubeEmbed id={id} title={title} poster="maxresdefault" webp />;
7+
};
8+
9+
export default YoutubeVideo;

‎components/ui/switch.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from "react";
2+
import * as SwitchPrimitives from "@radix-ui/react-switch";
3+
4+
import { cn } from "../../lib/utils";
5+
6+
const Switch = React.forwardRef<
7+
React.ElementRef<typeof SwitchPrimitives.Root>,
8+
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
9+
>(({ className, ...props }, ref) => (
10+
<SwitchPrimitives.Root
11+
className={cn(
12+
"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",
13+
className,
14+
)}
15+
{...props}
16+
ref={ref}
17+
>
18+
<SwitchPrimitives.Thumb
19+
className={cn(
20+
"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",
21+
)}
22+
/>
23+
</SwitchPrimitives.Root>
24+
));
25+
Switch.displayName = SwitchPrimitives.Root.displayName;
26+
27+
export { Switch };

‎next.config.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const nextConfig = {
99
experimental: {
1010
legacyBrowsers: false,
1111
},
12-
trailingSlash: true,
12+
trailingSlash: false,
1313
async redirects() {
1414
return [
1515
{

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@polkadot/util": "^12.6.2",
2525
"@polkadot/util-crypto": "^12.6.2",
2626
"@radix-ui/react-slot": "^1.0.2",
27+
"@radix-ui/react-switch": "^1.0.3",
2728
"@radix-ui/react-tooltip": "^1.0.7",
2829
"@react-aria/ssr": "3.4.0",
2930
"@sentry/nextjs": "^7.27.0",
@@ -52,6 +53,7 @@
5253
"react-hook-form": "^7.51.1",
5354
"react-hot-toast": "2.4.0",
5455
"react-icons": "^4.12.0",
56+
"react-lite-youtube-embed": "^2.4.0",
5557
"react-use": "^17.4.0",
5658
"react-use-measure": "^2.1.1",
5759
"rehype-katex": "5.0.0",

‎pages/developers/_meta.json

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,27 @@
66
"blueprints": "Blueprints",
77
"services": "Actively Validated Services (AVS)",
88
"usecases": "Use Cases",
9+
"-- specification-developers": {
10+
"type": "separator",
11+
"title": "Specification Developers"
12+
},
13+
"gadget-tutorial": "Create a Gadget",
14+
"-- solution-developers": {
15+
"type": "separator",
16+
"title": "Solution Developers"
17+
},
18+
"integrate": "Endpoints and Integration",
19+
"deploy-using-hardhat": "Deploy Contracts with Hardhat",
20+
"transaction-fees": "Calculating Transaction Fees",
21+
"evm-substrate-transfers": "EVM-Substrate Transfers",
922
"-- technicals": {
1023
"type": "separator",
1124
"title": "Technicals"
1225
},
26+
"addresses": "Account Addresses",
1327
"pallets": "Pallets",
1428
"precompiles": "Precompiles",
15-
"-- guides": {
16-
"type": "separator",
17-
"title": "Resources & Guides"
18-
},
19-
"integrate": "Endpoints and Other Resources",
20-
"deploy-using-hardhat": "Deploy on Tangle with Hardhat",
2129
"json-rpc-endpoints": "RPC Methods",
22-
"addresses": "Account Addresses",
23-
"transaction-fees": "Calculating Transaction Fees",
2430
"-- contribute": {
2531
"type": "separator",
2632
"title": "Contribute"

0 commit comments

Comments
 (0)