From f41991d61b045dda5fe45bce894ac168515f1e3c Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:13:37 -0500 Subject: [PATCH 01/20] added youtube render lib and gadget tutorial page --- components/YoutubeVideo.tsx | 17 ++++++++++++++++ package.json | 1 + pages/developers/gadget-tutorial.mdx | 29 ++++++++++++++++++++++++++++ yarn.lock | 5 +++++ 4 files changed, 52 insertions(+) create mode 100644 components/YoutubeVideo.tsx create mode 100644 pages/developers/gadget-tutorial.mdx diff --git a/components/YoutubeVideo.tsx b/components/YoutubeVideo.tsx new file mode 100644 index 00000000..98376fb1 --- /dev/null +++ b/components/YoutubeVideo.tsx @@ -0,0 +1,17 @@ +// YouTubeVideo.js +import React from 'react'; +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; +import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'; + +const YouTubeVideo = ({ id, title }) => { + return ( + + ); +}; + +export default YouTubeVideo; \ No newline at end of file diff --git a/package.json b/package.json index 32db5061..0114f37e 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,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", diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx new file mode 100644 index 00000000..145fdc0b --- /dev/null +++ b/pages/developers/gadget-tutorial.mdx @@ -0,0 +1,29 @@ +import React from 'react'; +import { render } from 'react-dom'; +import YouTubeVideo from '../../components/YouTubeVideo'; + + +# Gadget Tutorial Series + +## Introduction to Gadgets + +In this introductory tutorial, we will dive into the concept of gadgets and protocols, guiding you through the process of building a sample or demo protocol. Gadgets are software components that interact with a blockchain to perform specific jobs, each corresponding to a protocol. We will explore how these protocols are executed based on the roles subscribed by the gadgets, cover the structure of protocols, and provide examples from our repository. + +## Asynchronous Protocol Structure + +This video explores the implementation details of protocol configuration and the functions required for the internal network. We discuss protocol-specific functions related to metadata, such as protocol name, role filter, and phase filter. Through a convenient macro, we demonstrate how to execute the protocol and recommend approaches for adding tests. We also delve into key generation and signing implementation, including additional parameters, the create next job function, and the protocol packet. + +## Keygen + +We explain the concept of protocol multiplexing and its implementation. Understanding how to differentiate messages between concurrent protocols is crucial, and we show how to efficiently multiplex using a function. The importance of the networking section in the config is highlighted, along with a crucial tip for obtaining the network. + + +We discuss the asynchronous protocol's post-hook section, executed only if the preceding protocol is successful. We detail how to retrieve the result and save it in the local key store, generate a unique key using the SHA-256 function, set the key value, build a result for the blockchain, and submit the job result. + +## Signing + +We explore the generate protocol from function for signing, covering the boilerplate, signing protocol, and steps involved in signing a message. The process of signing a message using XOR sign and collecting signatures is demonstrated, providing practical insights into the signing process. + +## Distributed Key Generation + +We will dive into the intricacies of implementing Distributed Key Generation (DKG) signature verification within the Tangle Network, focusing on the pallet portion of a stub protocol. By the end of this video, you will be equipped with the knowing how to add your protocol to the Tangle Network and the gadget protocol. \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2126a115..653f36a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7824,6 +7824,11 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-lite-youtube-embed@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2" + integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ== + react-universal-interface@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" From 47c0154ff0e82a87c6adc681736873379e05a7c6 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:13:48 -0500 Subject: [PATCH 02/20] fixed trailing slash issue on URLs for SEO --- next.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next.config.mjs b/next.config.mjs index 99752417..6d044490 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -9,7 +9,7 @@ const nextConfig = { experimental: { legacyBrowsers: false, }, - trailingSlash: true, + trailingSlash: false, async redirects() { return [ { From d8691608bfaadc83bd2b777c7fc34fa60c055b5d Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:14:19 -0500 Subject: [PATCH 03/20] split addresses into tutorial content and general page, reorged developer sidebar --- pages/developers/_meta.json | 24 ++-- pages/developers/addresses.mdx | 124 +----------------- pages/developers/evm-substrate-transfers.mdx | 128 +++++++++++++++++++ 3 files changed, 144 insertions(+), 132 deletions(-) create mode 100644 pages/developers/evm-substrate-transfers.mdx diff --git a/pages/developers/_meta.json b/pages/developers/_meta.json index dfe4f6a2..08df6c92 100644 --- a/pages/developers/_meta.json +++ b/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" @@ -32,4 +38,4 @@ "href": "https://github.com/webb-tools/tangle", "newWindow": true } -} +} \ No newline at end of file diff --git a/pages/developers/addresses.mdx b/pages/developers/addresses.mdx index 4a545e1b..0a7630b5 100644 --- a/pages/developers/addresses.mdx +++ b/pages/developers/addresses.mdx @@ -1,5 +1,6 @@ import EvmToSubstrateConverter from '../../components/EvmToSubstrateConverter' import { Callout } from 'nextra/components' +import Link from 'next/link' # Account Addresses on Tangle @@ -8,7 +9,6 @@ If you're interacting with a Frontier-enabled Substrate chain like Tangle Networ To help you navigate between these formats, we've provided a handy conversion tool below. Simply enter your Ethereum address (H160), and the tool will generate the corresponding Substrate address (SS58) used on the Tangle Network chain. - Please note that the conversion from an EVM address to a Substrate address using the provided tool is a one-way operation, and you cannot derive the original EVM address from a Substrate address. ## Address Formats in Frontier-enabled Substrate Chains @@ -33,125 +33,3 @@ As a user, it's essential to understand the different address formats and their For developers building on a Frontier-enabled Substrate chain, it's crucial to be aware of these address formats and their relationships. You may need to provide clear instructions and tools to help users manage their addresses, perform cross-address transfers, and interact with both the EVM and Substrate components seamlessly. While the dual-address system may introduce some complexities, it also opens up a world of possibilities for interoperability and leveraging the strengths of both Ethereum and Substrate ecosystems. - -## Developer Resource - -### Cross-EVM/Substrate Token Transfers - -Handling cross-system token transfers between Substrate and EVM can be complex. Address mappings play a crucial role in facilitating these transfers. - -#### Scenarios - -1. **Alice** only has an account on Tangle EVM using the Metamask wallet. -2. **Bob** has an account on Tangle using the Polkadot.js wallet, and another account on Tangle EVM using the Metamask wallet. -3. **Charlie** only has an account on Tangle using the Polkadot.js wallet. - -Assigned values: - -- **Alice's account:** `0xa5fAA47a324754354CB0A305941C8cCc6b5de296` -- **Bob's accounts:** `5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty` and `0x690B9A9E9aa1C9dB991C7721a92d351Db4FaC990` -- **Charlie's account:** `5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y` - -### Address Mapping Explanation - -Address mappings between Substrate and EVM are one-way transformations that facilitate token transfers between the two systems. - -- **Substrate to EVM:** When a Substrate address is converted to an EVM address, the resulting EVM address can be used to receive tokens on the EVM side. The conversion involves extracting and hashing a part of the Substrate address, providing a unique EVM address corresponding to the original Substrate address. -- **EVM to Substrate:** Once tokens are sent to the EVM address, the recipient can interact with the Substrate network by calling the `evm.withdraw` function. This allows the recipient to withdraw tokens from the EVM environment back to the Substrate environment. - -Key Points: - -- The conversion is a one-way mapping from Substrate to EVM. -- The resulting EVM address is a hash of part of the Substrate address. -- Tokens can be received on the EVM side using the EVM address. -- The `evm.withdraw` function facilitates the transfer of tokens back to the Substrate side. - -### Convert Substrate Address to EVM - -To convert a Substrate address to an EVM address, the following script can be used: - -```typescript -import { decodeAddress } from "https://esm.sh/@polkadot/util-crypto"; -import { u8aToHex } from "https://esm.sh/@polkadot/util"; - -const input = Deno.args[0]; -if (!input) { - console.error("usage: deno run substrateToEvm.ts "); - Deno.exit(1); -} -const accountId = decodeAddress(input); -const res = accountId.subarray(0, 20); -const output = u8aToHex(res); -console.log({ input, output }); -// run using: -// $ deno run substrateToEvm.ts -``` - -The script takes a Substrate address as input, decodes it, and then extracts the first 20 bytes of the account ID. These 20 bytes are then converted into a hexadecimal string, resulting in an EVM-compatible address. - -#### Convert EVM Address to Substrate - -Here is an example using the Deno Runtime and @polkadot/util to convert an address from EVM to Substrate: - -```tsx -import { - blake2AsU8a, - encodeAddress, -} from "https://esm.sh/@polkadot/util-crypto"; -import { - hexToU8a, - stringToU8a, - u8aConcat, -} from "https://esm.sh/@polkadot/util"; - -const input = Deno.args[0]; -if (!input) { - console.error("usage: deno run evmToSubstrate.ts "); - Deno.exit(1); -} -const addr = hexToU8a(input); -const data = stringToU8a("evm:"); -const res = blake2AsU8a(u8aConcat(data, addr)); -const output = encodeAddress(res, 42); -console.log({ input, output }); -// run using: -// $ deno run evmToSubstrate.ts -``` - -**Note** -The conversion from an EVM address to a Substrate address is a one-way operation. Due to the hashing process, it is not possible to reverse the process and obtain the original EVM address from the resulting Substrate address. - -#### Case 1: Sending from Substrate to EVM - -Bob wants to send 100 TNT to Alice, but he does not have the 100 TNT on his EVM account in Metamask. Therefore, he uses his Tangle account in the Polkadot.js wallet. - -1. Alice's address is `0xa5fAA47a324754354CB0A305941C8cCc6b5de296`. -2. Bob converts Alice's address to a substrate address using the `evmToSubstrate` function: - -```tsx -evmToSubstrate("0xa5fAA47a324754354CB0A305941C8cCc6b5de296"); -// => 5C9ysBsWKpw3D8MFaEauFgdtMPqboS64YNYHyu1rCynLyKMZ -``` - -3. Bob sends the 100 TNT to `5C9ysBsWKpw3D8MFaEauFgdtMPqboS64YNYHyu1rCynLyKMZ`. -4. Alice receives the 100 TNT in her Metamask wallet. - -#### Case 2: Sending from EVM to Substrate - -Alice wants to send 50 TNT to Charlie. However, Charlie only has a Substrate account that he controls in his Polkadot.js wallet. - -1. Charlie's address is `5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y`. -2. Alice converts Charlie's address to an EVM address using the `substrateToEvm` function. - -```tsx -substrateToEvm("5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y"); -// => 0x90b5ab205c6974c9ea841be688864633dc9ca8a3 -``` - -3. Alice uses her Metamask and sends 50 TNT to - `0x90b5ab205c6974c9ea841be688864633dc9ca8a3`. -4. Charlie's balance on Substrate remains the same! - > Because: Charlie needs to withdraw the balance from his EVM account. -5. Charlie goes to Polkadot.js and calls: - `evm.withdraw("0x90b5ab205c6974c9ea841be688864633dc9ca8a3", 50 TNT)`. -6. Charlie sees that he has now received 50 TNT in his account. diff --git a/pages/developers/evm-substrate-transfers.mdx b/pages/developers/evm-substrate-transfers.mdx new file mode 100644 index 00000000..feb72976 --- /dev/null +++ b/pages/developers/evm-substrate-transfers.mdx @@ -0,0 +1,128 @@ +import EvmToSubstrateConverter from "../../components/EvmToSubstrateConverter" + +## Developer Resource + +### Cross-EVM/Substrate Token Transfers + +Handling cross-system token transfers between Substrate and EVM can be complex. Address mappings play a crucial role in facilitating these transfers. +While we provide + +#### Scenarios + +1. **Alice** only has an account on Tangle EVM using the Metamask wallet. +2. **Bob** has an account on Tangle using the Polkadot.js wallet, and another account on Tangle EVM using the Metamask wallet. +3. **Charlie** only has an account on Tangle using the Polkadot.js wallet. + +Assigned values: + +- **Alice's account:** `0xa5fAA47a324754354CB0A305941C8cCc6b5de296` +- **Bob's accounts:** `5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty` and `0x690B9A9E9aa1C9dB991C7721a92d351Db4FaC990` +- **Charlie's account:** `5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y` + +### Address Mapping Explanation + +Address mappings between Substrate and EVM are one-way transformations that facilitate token transfers between the two systems. + +- **Substrate to EVM:** When a Substrate address is converted to an EVM address, the resulting EVM address can be used to receive tokens on the EVM side. The conversion involves extracting and hashing a part of the Substrate address, providing a unique EVM address corresponding to the original Substrate address. +- **EVM to Substrate:** Once tokens are sent to the EVM address, the recipient can interact with the Substrate network by calling the `evm.withdraw` function. This allows the recipient to withdraw tokens from the EVM environment back to the Substrate environment. + +Key Points: + +- The conversion is a one-way mapping from Substrate to EVM. +- The resulting EVM address is a hash of part of the Substrate address. +- Tokens can be received on the EVM side using the EVM address. +- The `evm.withdraw` function facilitates the transfer of tokens back to the Substrate side. + +### Convert Substrate Address to EVM + +To convert a Substrate address to an EVM address, the following script can be used: + +```typescript +import { decodeAddress } from "https://esm.sh/@polkadot/util-crypto"; +import { u8aToHex } from "https://esm.sh/@polkadot/util"; + +const input = Deno.args[0]; +if (!input) { + console.error("usage: deno run substrateToEvm.ts "); + Deno.exit(1); +} +const accountId = decodeAddress(input); +const res = accountId.subarray(0, 20); +const output = u8aToHex(res); +console.log({ input, output }); +// run using: +// $ deno run substrateToEvm.ts +``` + +The script takes a Substrate address as input, decodes it, and then extracts the first 20 bytes of the account ID. These 20 bytes are then converted into a hexadecimal string, resulting in an EVM-compatible address. + +#### Convert EVM Address to Substrate + +Here is an example using the Deno Runtime and @polkadot/util to convert an address from EVM to Substrate: + +You can also use this convenient tool: + + + +```tsx +import { + blake2AsU8a, + encodeAddress, +} from "https://esm.sh/@polkadot/util-crypto"; +import { + hexToU8a, + stringToU8a, + u8aConcat, +} from "https://esm.sh/@polkadot/util"; + +const input = Deno.args[0]; +if (!input) { + console.error("usage: deno run evmToSubstrate.ts "); + Deno.exit(1); +} +const addr = hexToU8a(input); +const data = stringToU8a("evm:"); +const res = blake2AsU8a(u8aConcat(data, addr)); +const output = encodeAddress(res, 42); +console.log({ input, output }); +// run using: +// $ deno run evmToSubstrate.ts +``` + +**Note** +The conversion from an EVM address to a Substrate address is a one-way operation. Due to the hashing process, it is not possible to reverse the process and obtain the original EVM address from the resulting Substrate address. + +#### Case 1: Sending from Substrate to EVM + +Bob wants to send 100 TNT to Alice, but he does not have the 100 TNT on his EVM account in Metamask. Therefore, he uses his Tangle account in the Polkadot.js wallet. + +1. Alice's address is `0xa5fAA47a324754354CB0A305941C8cCc6b5de296`. +2. Bob converts Alice's address to a substrate address using the `evmToSubstrate` function: + +```tsx +evmToSubstrate("0xa5fAA47a324754354CB0A305941C8cCc6b5de296"); +// => 5C9ysBsWKpw3D8MFaEauFgdtMPqboS64YNYHyu1rCynLyKMZ +``` + +3. Bob sends the 100 TNT to `5C9ysBsWKpw3D8MFaEauFgdtMPqboS64YNYHyu1rCynLyKMZ`. +4. Alice receives the 100 TNT in her Metamask wallet. + +#### Case 2: Sending from EVM to Substrate + +Alice wants to send 50 TNT to Charlie. However, Charlie only has a Substrate account that he controls in his Polkadot.js wallet. + +1. Charlie's address is `5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y`. +2. Alice converts Charlie's address to an EVM address using the `substrateToEvm` function. + +```tsx +substrateToEvm("5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y"); +// => 0x90b5ab205c6974c9ea841be688864633dc9ca8a3 +``` + +3. Alice uses her Metamask and sends 50 TNT to + `0x90b5ab205c6974c9ea841be688864633dc9ca8a3`. +4. Charlie's balance on Substrate remains the same! + > Because: Charlie needs to withdraw the balance from his EVM account. +5. Charlie goes to Polkadot.js and calls: + `evm.withdraw("0x90b5ab205c6974c9ea841be688864633dc9ca8a3", 50 TNT)`. +6. Charlie sees that he has now received 50 TNT in his account. From 67fadb76454fa12ef9ab2de019bd0e5446b4e78b Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:14:41 -0500 Subject: [PATCH 04/20] rename networkconfig to networkresources --- ...NetworkConfig.tsx => NetworkResources.tsx} | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) rename components/{NetworkConfig.tsx => NetworkResources.tsx} (89%) diff --git a/components/NetworkConfig.tsx b/components/NetworkResources.tsx similarity index 89% rename from components/NetworkConfig.tsx rename to components/NetworkResources.tsx index d3653499..b15c9c9a 100644 --- a/components/NetworkConfig.tsx +++ b/components/NetworkResources.tsx @@ -1,8 +1,10 @@ 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: [ @@ -277,17 +279,37 @@ const NetworkTabs = () => { Wallets +
  • + {" "} + 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" + }`} + > + + EVM-Substrate Transfers + +
    • - {activeTab === "wallets" ? ( - - ) : ( - renderTable(NETWORK_DATA[activeTab]) - )} -
    + {activeTab === "wallets" ? ( + + ) : activeTab === "evmToSubstrate" ? ( + + ) : ( + renderTable(NETWORK_DATA[activeTab]) + )} + ); }; export default NetworkTabs; + + + \ No newline at end of file From 5065e4e5f0f7e4b412913be75e8aa2b3c8552616 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:14:52 -0500 Subject: [PATCH 05/20] rename --- pages/resources.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/resources.mdx b/pages/resources.mdx index 71da08fe..aba3f245 100644 --- a/pages/resources.mdx +++ b/pages/resources.mdx @@ -1,4 +1,4 @@ -import NetworkInfo from "../components/NetworkConfig" +import NetworkInfo from "../components/NetworkResources" import WalletTable from "../components/WalletTable" # Resources and Tools From 960af4f97b69aff3f0fbc09eca1fc2433947653e Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:15:02 -0500 Subject: [PATCH 06/20] rename --- pages/developers/integrate.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/developers/integrate.mdx b/pages/developers/integrate.mdx index e6000639..ad163556 100644 --- a/pages/developers/integrate.mdx +++ b/pages/developers/integrate.mdx @@ -1,4 +1,4 @@ -import NetworkTabs from '../../components/NetworkConfig.tsx' +import NetworkTabs from '../../components/NetworkResources.tsx' # Resources From 46984d013ae2ece8f840c7763049559de6ef7967 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 14:15:13 -0500 Subject: [PATCH 07/20] moved callout into converter component --- components/EvmToSubstrateConverter.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/EvmToSubstrateConverter.tsx b/components/EvmToSubstrateConverter.tsx index e47a14a8..c56502d3 100644 --- a/components/EvmToSubstrateConverter.tsx +++ b/components/EvmToSubstrateConverter.tsx @@ -16,6 +16,7 @@ import { import { Button } from "./ui/button"; import { BlockCopyButton } from "./ui/block-copy-button"; import Link from "next/link"; +import { Callout } from 'nextra/components' const AddressConverter = () => { const [evmAddress, setEvmAddress] = useState(""); @@ -98,7 +99,8 @@ const AddressConverter = () => { Convert - + Please note that the conversion from an EVM address to a Substrate address using the provided tool is a one-way operation, and you cannot derive the original EVM address from a Substrate address.
    Learn more about Addresses on Tangle.     + ); }; From 8b97f016d84f95494ed2950d8d045c94f2cea53f Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 15:53:31 -0500 Subject: [PATCH 08/20] fixed aliases and added a toggle component --- components.json | 5 +++-- package.json | 1 + tsconfig.json | 3 ++- yarn.lock | 21 +++++++++++++++++++++ 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/components.json b/components.json index 97e004f4..0de2798e 100644 --- a/components.json +++ b/components.json @@ -11,7 +11,8 @@ "prefix": "" }, "aliases": { - "components": "./components", - "utils": "./lib/utils" + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/app/components/ui" } } diff --git a/package.json b/package.json index 0114f37e..4699f9e2 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.json b/tsconfig.json index 2e015231..2cd7dc7b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "incremental": true, "allowJs": false, "paths": { - "@/*": ["./src/*"] + "@/components/*": ["./components/*"], + "@/lib/utils/*": ["./lib/utils/*"] }, "types": ["next"] }, diff --git a/yarn.lock b/yarn.lock index 653f36a1..fe9b6268 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1839,6 +1839,20 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.1" +"@radix-ui/react-switch@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e" + integrity sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-use-previous" "1.0.1" + "@radix-ui/react-use-size" "1.0.1" + "@radix-ui/react-tooltip@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e" @@ -1888,6 +1902,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-previous@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66" + integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-rect@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2" From c6b99afbf651fd2f480f0216e7a083695155a4a4 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 15:53:55 -0500 Subject: [PATCH 09/20] updated evm to substrate converter to use tangle prefix so tgXXX --- components/EvmToSubstrateConverter.tsx | 77 ++++++++++++++++---------- components/ui/switch.tsx | 27 +++++++++ 2 files changed, 74 insertions(+), 30 deletions(-) create mode 100644 components/ui/switch.tsx diff --git a/components/EvmToSubstrateConverter.tsx b/components/EvmToSubstrateConverter.tsx index c56502d3..eb2fab26 100644 --- a/components/EvmToSubstrateConverter.tsx +++ b/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,35 +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' +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 (
    - EVM-to-Substrate Address Converter + EVM to Tangle Address Converter - 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 Tangle Network's prefixed + form. To convert an SS58 address to a public key or other networks, + you can use{" "} {
    - {substrateAddress || "Waiting..."} + {tangleAddress || "Waiting..."}
    - - Please note that the conversion from an EVM address to a Substrate address using the provided tool is a one-way operation, and you cannot derive the original EVM address from a Substrate address.
    Learn more about Addresses on Tangle.     - + + 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. +
    + + Learn more about Addresses on Tangle. + +     + ); }; diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx new file mode 100644 index 00000000..aa58baa2 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +Switch.displayName = SwitchPrimitives.Root.displayName + +export { Switch } From 4761ae703a46b771e34636e00b5c7ec8d36853c9 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 16:21:14 -0500 Subject: [PATCH 10/20] moved darkmode button to header from footer, tweaked styling --- components/Footer.tsx | 4 ---- components/HeaderLogo.tsx | 6 +++--- components/HelpDiscordBtn.tsx | 12 ++++++------ pages/developers/evm-substrate-transfers.mdx | 2 +- theme.config.tsx | 3 ++- 5 files changed, 12 insertions(+), 15 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 57528e3b..dd7be916 100644 --- a/components/Footer.tsx +++ b/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 -
  • - -
    • diff --git a/components/HeaderLogo.tsx b/components/HeaderLogo.tsx index 0fa47c8b..4864ca25 100644 --- a/components/HeaderLogo.tsx +++ b/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 > - + DOCS diff --git a/components/HelpDiscordBtn.tsx b/components/HelpDiscordBtn.tsx index b408e46e..0af614c9 100644 --- a/components/HelpDiscordBtn.tsx +++ b/components/HelpDiscordBtn.tsx @@ -3,13 +3,13 @@ import React from "react"; const HelpDiscordBtn: React.FC = () => { return ( -
    -
    diff --git a/pages/developers/evm-substrate-transfers.mdx b/pages/developers/evm-substrate-transfers.mdx index feb72976..a8bfeb9a 100644 --- a/pages/developers/evm-substrate-transfers.mdx +++ b/pages/developers/evm-substrate-transfers.mdx @@ -5,7 +5,7 @@ import EvmToSubstrateConverter from "../../components/EvmToSubstrateConverter" ### Cross-EVM/Substrate Token Transfers Handling cross-system token transfers between Substrate and EVM can be complex. Address mappings play a crucial role in facilitating these transfers. -While we provide +While we provide #### Scenarios diff --git a/theme.config.tsx b/theme.config.tsx index a3637c21..db7ac4b6 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -4,8 +4,8 @@ import { DocsThemeConfig, useConfig, useTheme } from "nextra-theme-docs"; import Footer from "./components/Footer"; import Navigation from "./components/Navigation"; import HeaderLogo from "./components/HeaderLogo"; -import { Discord, Github, Twitter } from "./components/Social"; import HelpDiscordBtn from "./components/HelpDiscordBtn"; +import { ThemeSwitch } from "nextra-theme-docs"; const SITE_ROOT = "https://docs.tangle.tools"; @@ -123,6 +123,7 @@ const theme: DocsThemeConfig = { extraContent: ( <> + ), }, From f2caffa68caa49a3d223460ce326f84c17aaf9d4 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 16:21:29 -0500 Subject: [PATCH 11/20] prettier --- components/NetworkResources.tsx | 31 +++++++++++++++------------- components/YoutubeVideo.tsx | 17 +++++---------- components/ui/switch.tsx | 16 +++++++------- pages/developers/_meta.json | 2 +- pages/developers/gadget-tutorial.mdx | 10 ++++++--- 5 files changed, 38 insertions(+), 38 deletions(-) diff --git a/components/NetworkResources.tsx b/components/NetworkResources.tsx index b15c9c9a..73190496 100644 --- a/components/NetworkResources.tsx +++ b/components/NetworkResources.tsx @@ -1,10 +1,14 @@ import React, { useState } from "react"; import Link from "next/link"; import { BlockCopyButton } from "./ui/block-copy-button"; -import { FlaskConical, WalletMinimal, Waypoints, SendToBack } from "lucide-react"; +import { + FlaskConical, + WalletMinimal, + Waypoints, + SendToBack, +} from "lucide-react"; import WalletTable from "./WalletTable"; -import EvmToSubstrateConverter from './EvmToSubstrateConverter' - +import EvmToSubstrateConverter from "./EvmToSubstrateConverter"; const NETWORK_DATA = { mainnet: [ @@ -74,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", }, }, @@ -297,19 +301,18 @@ const NetworkTabs = () => {
    - {activeTab === "wallets" ? ( - - ) : activeTab === "evmToSubstrate" ? ( - - ) : ( - renderTable(NETWORK_DATA[activeTab]) - )} -
    + {activeTab === "wallets" ? ( + + ) : activeTab === "evmToSubstrate" ? ( + + ) : ( + renderTable(NETWORK_DATA[activeTab]) + )} + ); }; export default NetworkTabs; - - \ No newline at end of file +; diff --git a/components/YoutubeVideo.tsx b/components/YoutubeVideo.tsx index 98376fb1..473f63f3 100644 --- a/components/YoutubeVideo.tsx +++ b/components/YoutubeVideo.tsx @@ -1,17 +1,10 @@ // YouTubeVideo.js -import React from 'react'; -import LiteYouTubeEmbed from 'react-lite-youtube-embed'; -import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'; +import React from "react"; +import LiteYouTubeEmbed from "react-lite-youtube-embed"; +import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"; const YouTubeVideo = ({ id, title }) => { - return ( - - ); + return ; }; -export default YouTubeVideo; \ No newline at end of file +export default YouTubeVideo; diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx index aa58baa2..6be019d8 100644 --- a/components/ui/switch.tsx +++ b/components/ui/switch.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import * as SwitchPrimitives from "@radix-ui/react-switch" +import * as React from "react"; +import * as SwitchPrimitives from "@radix-ui/react-switch"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const Switch = React.forwardRef< React.ElementRef, @@ -10,18 +10,18 @@ const Switch = React.forwardRef< -)) -Switch.displayName = SwitchPrimitives.Root.displayName +)); +Switch.displayName = SwitchPrimitives.Root.displayName; -export { Switch } +export { Switch }; diff --git a/pages/developers/_meta.json b/pages/developers/_meta.json index 08df6c92..7a8ca2ca 100644 --- a/pages/developers/_meta.json +++ b/pages/developers/_meta.json @@ -38,4 +38,4 @@ "href": "https://github.com/webb-tools/tangle", "newWindow": true } -} \ No newline at end of file +} diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx index 145fdc0b..9061c0c5 100644 --- a/pages/developers/gadget-tutorial.mdx +++ b/pages/developers/gadget-tutorial.mdx @@ -2,18 +2,20 @@ import React from 'react'; import { render } from 'react-dom'; import YouTubeVideo from '../../components/YouTubeVideo'; - # Gadget Tutorial Series ## Introduction to Gadgets + In this introductory tutorial, we will dive into the concept of gadgets and protocols, guiding you through the process of building a sample or demo protocol. Gadgets are software components that interact with a blockchain to perform specific jobs, each corresponding to a protocol. We will explore how these protocols are executed based on the roles subscribed by the gadgets, cover the structure of protocols, and provide examples from our repository. ## Asynchronous Protocol Structure + This video explores the implementation details of protocol configuration and the functions required for the internal network. We discuss protocol-specific functions related to metadata, such as protocol name, role filter, and phase filter. Through a convenient macro, we demonstrate how to execute the protocol and recommend approaches for adding tests. We also delve into key generation and signing implementation, including additional parameters, the create next job function, and the protocol packet. ## Keygen + We explain the concept of protocol multiplexing and its implementation. Understanding how to differentiate messages between concurrent protocols is crucial, and we show how to efficiently multiplex using a function. The importance of the networking section in the config is highlighted, along with a crucial tip for obtaining the network. @@ -21,9 +23,11 @@ We explain the concept of protocol multiplexing and its implementation. Understa We discuss the asynchronous protocol's post-hook section, executed only if the preceding protocol is successful. We detail how to retrieve the result and save it in the local key store, generate a unique key using the SHA-256 function, set the key value, build a result for the blockchain, and submit the job result. ## Signing + We explore the generate protocol from function for signing, covering the boilerplate, signing protocol, and steps involved in signing a message. The process of signing a message using XOR sign and collecting signatures is demonstrated, providing practical insights into the signing process. -## Distributed Key Generation +## Distributed Key Generation + -We will dive into the intricacies of implementing Distributed Key Generation (DKG) signature verification within the Tangle Network, focusing on the pallet portion of a stub protocol. By the end of this video, you will be equipped with the knowing how to add your protocol to the Tangle Network and the gadget protocol. \ No newline at end of file +We will dive into the intricacies of implementing Distributed Key Generation (DKG) signature verification within the Tangle Network, focusing on the pallet portion of a stub protocol. By the end of this video, you will be equipped with the knowing how to add your protocol to the Tangle Network and the gadget protocol. From 3954645f560464ad8b1f971edb3eacc9b05b1541 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 16:30:41 -0500 Subject: [PATCH 12/20] gremlin char --- components/EvmToSubstrateConverter.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/EvmToSubstrateConverter.tsx b/components/EvmToSubstrateConverter.tsx index eb2fab26..05e23fa7 100644 --- a/components/EvmToSubstrateConverter.tsx +++ b/components/EvmToSubstrateConverter.tsx @@ -48,8 +48,7 @@ const AddressConverter = () => { EVM to Tangle Address Converter - Enter an EVM address to convert it to the Tangle Network's prefixed - form. To convert an SS58 address to a public key or other networks, + 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{" "} Date: Fri, 17 May 2024 16:43:27 -0500 Subject: [PATCH 13/20] path fix --- components/ui/switch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx index 6be019d8..8230bc90 100644 --- a/components/ui/switch.tsx +++ b/components/ui/switch.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import * as SwitchPrimitives from "@radix-ui/react-switch"; -import { cn } from "@/lib/utils"; +import { cn } from "../../lib/utils"; const Switch = React.forwardRef< React.ElementRef, From ec71eabfdfe064bdda2774d5ebcf8ed0868ac79b Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 16:51:21 -0500 Subject: [PATCH 14/20] build errors --- components/YoutubeVideo.tsx | 1 - tsconfig.json | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/components/YoutubeVideo.tsx b/components/YoutubeVideo.tsx index 473f63f3..29d2b77e 100644 --- a/components/YoutubeVideo.tsx +++ b/components/YoutubeVideo.tsx @@ -1,4 +1,3 @@ -// YouTubeVideo.js import React from "react"; import LiteYouTubeEmbed from "react-lite-youtube-embed"; import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"; diff --git a/tsconfig.json b/tsconfig.json index 2cd7dc7b..1ceabdc5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,8 +15,7 @@ "incremental": true, "allowJs": false, "paths": { - "@/components/*": ["./components/*"], - "@/lib/utils/*": ["./lib/utils/*"] + "@/*": ["./src/*"], }, "types": ["next"] }, From 67db8df63fb664079a5388cd8b21c73ae28a1462 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 16:53:48 -0500 Subject: [PATCH 15/20] path fix --- pages/developers/gadget-tutorial.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx index 9061c0c5..76c0aa00 100644 --- a/pages/developers/gadget-tutorial.mdx +++ b/pages/developers/gadget-tutorial.mdx @@ -1,6 +1,6 @@ import React from 'react'; import { render } from 'react-dom'; -import YouTubeVideo from '../../components/YouTubeVideo'; +import YouTubeVideo from '../components/YouTubeVideo'; # Gadget Tutorial Series From 85ef87d04e9e0499a3c9657e1f8123abdd81ea90 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 17:22:09 -0500 Subject: [PATCH 16/20] attempts to fix build error --- components/YoutubeVideo.tsx | 4 ++-- pages/developers/gadget-tutorial.mdx | 2 +- tsconfig.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/YoutubeVideo.tsx b/components/YoutubeVideo.tsx index 29d2b77e..c2c14b7f 100644 --- a/components/YoutubeVideo.tsx +++ b/components/YoutubeVideo.tsx @@ -2,8 +2,8 @@ import React from "react"; import LiteYouTubeEmbed from "react-lite-youtube-embed"; import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"; -const YouTubeVideo = ({ id, title }) => { +const YoutubeVideo = ({ id, title }) => { return ; }; -export default YouTubeVideo; +export default YoutubeVideo; diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx index 76c0aa00..517253c4 100644 --- a/pages/developers/gadget-tutorial.mdx +++ b/pages/developers/gadget-tutorial.mdx @@ -1,6 +1,6 @@ import React from 'react'; import { render } from 'react-dom'; -import YouTubeVideo from '../components/YouTubeVideo'; +import YoutubeVideo from '../../components/YoutubeVideo.tsx'; # Gadget Tutorial Series diff --git a/tsconfig.json b/tsconfig.json index 1ceabdc5..179ca2b9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,7 @@ "incremental": true, "allowJs": false, "paths": { - "@/*": ["./src/*"], + "@/*": ["./*"], }, "types": ["next"] }, From 015db1347f80939c85c1d21db5955cc99b260a0b Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 17:32:08 -0500 Subject: [PATCH 17/20] path fixes, prettier, added github repo link to gadget page. --- components/EvmToSubstrateConverter.tsx | 5 +++-- pages/developers/gadget-tutorial.mdx | 18 +++++++++++------- tsconfig.json | 2 +- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/components/EvmToSubstrateConverter.tsx b/components/EvmToSubstrateConverter.tsx index 05e23fa7..608bd1e6 100644 --- a/components/EvmToSubstrateConverter.tsx +++ b/components/EvmToSubstrateConverter.tsx @@ -48,8 +48,9 @@ const AddressConverter = () => { EVM to Tangle Address Converter - 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{" "} + 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{" "} see the Github repo. + ## Introduction to Gadgets - + In this introductory tutorial, we will dive into the concept of gadgets and protocols, guiding you through the process of building a sample or demo protocol. Gadgets are software components that interact with a blockchain to perform specific jobs, each corresponding to a protocol. We will explore how these protocols are executed based on the roles subscribed by the gadgets, cover the structure of protocols, and provide examples from our repository. ## Asynchronous Protocol Structure - + This video explores the implementation details of protocol configuration and the functions required for the internal network. We discuss protocol-specific functions related to metadata, such as protocol name, role filter, and phase filter. Through a convenient macro, we demonstrate how to execute the protocol and recommend approaches for adding tests. We also delve into key generation and signing implementation, including additional parameters, the create next job function, and the protocol packet. ## Keygen - + We explain the concept of protocol multiplexing and its implementation. Understanding how to differentiate messages between concurrent protocols is crucial, and we show how to efficiently multiplex using a function. The importance of the networking section in the config is highlighted, along with a crucial tip for obtaining the network. - + We discuss the asynchronous protocol's post-hook section, executed only if the preceding protocol is successful. We detail how to retrieve the result and save it in the local key store, generate a unique key using the SHA-256 function, set the key value, build a result for the blockchain, and submit the job result. ## Signing - + We explore the generate protocol from function for signing, covering the boilerplate, signing protocol, and steps involved in signing a message. The process of signing a message using XOR sign and collecting signatures is demonstrated, providing practical insights into the signing process. ## Distributed Key Generation - + We will dive into the intricacies of implementing Distributed Key Generation (DKG) signature verification within the Tangle Network, focusing on the pallet portion of a stub protocol. By the end of this video, you will be equipped with the knowing how to add your protocol to the Tangle Network and the gadget protocol. diff --git a/tsconfig.json b/tsconfig.json index 179ca2b9..fdae51b8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,7 @@ "incremental": true, "allowJs": false, "paths": { - "@/*": ["./*"], + "@/*": ["./*"] }, "types": ["next"] }, From 2b6ecd45637b1b5fb099b88da841fccd32ff0aa1 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 17:41:28 -0500 Subject: [PATCH 18/20] import fix --- pages/developers/evm-substrate-transfers.mdx | 1 + pages/developers/gadget-tutorial.mdx | 1 + 2 files changed, 2 insertions(+) diff --git a/pages/developers/evm-substrate-transfers.mdx b/pages/developers/evm-substrate-transfers.mdx index a8bfeb9a..867f183b 100644 --- a/pages/developers/evm-substrate-transfers.mdx +++ b/pages/developers/evm-substrate-transfers.mdx @@ -1,4 +1,5 @@ import EvmToSubstrateConverter from "../../components/EvmToSubstrateConverter" +import { Callout } from "nextra/components" ## Developer Resource diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx index 6e31acf2..618dcb88 100644 --- a/pages/developers/gadget-tutorial.mdx +++ b/pages/developers/gadget-tutorial.mdx @@ -2,6 +2,7 @@ import React from 'react'; import { render } from 'react-dom'; import YoutubeVideo from '../../components/YoutubeVideo'; import { Link } from "next/link"; +import { Callout } from "nextra/components" # Gadget Tutorial Series From 54448ba6543e7e252e34afa38e0e0a2c23a4fe98 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 17:46:16 -0500 Subject: [PATCH 19/20] import fix --- pages/developers/gadget-tutorial.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx index 618dcb88..91af5202 100644 --- a/pages/developers/gadget-tutorial.mdx +++ b/pages/developers/gadget-tutorial.mdx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'react-dom'; import YoutubeVideo from '../../components/YoutubeVideo'; import { Link } from "next/link"; -import { Callout } from "nextra/components" +import { Callout } from "nextra/components"; # Gadget Tutorial Series From 82674782a3bdff63d28d879105fceef9b95113d4 Mon Sep 17 00:00:00 2001 From: Thom Ivy Date: Fri, 17 May 2024 17:49:54 -0500 Subject: [PATCH 20/20] import fix --- pages/developers/gadget-tutorial.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/developers/gadget-tutorial.mdx b/pages/developers/gadget-tutorial.mdx index 91af5202..c98df39f 100644 --- a/pages/developers/gadget-tutorial.mdx +++ b/pages/developers/gadget-tutorial.mdx @@ -1,7 +1,7 @@ import React from 'react'; import { render } from 'react-dom'; import YoutubeVideo from '../../components/YoutubeVideo'; -import { Link } from "next/link"; +import Link from "next/link"; import { Callout } from "nextra/components"; # Gadget Tutorial Series