Skip to content

Commit 0ae8595

Browse files
nhussein11nhussein11
committed
fix: papi tutorial wip
1 parent ff01ef2 commit 0ae8595

File tree

8 files changed

+202
-81
lines changed

8 files changed

+202
-81
lines changed

‎.snippets/code/tutorials/dapps/papi/remark-tutorial/initialization.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div id="termynal" data-termynal>
2+
<span data-ty>$ npm start -- --account 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY</span>
3+
<span data-ty> __ __ _ _____ __ __ _ _ __ __ _ _</span>
4+
<span data-ty> \ \ / /__| |__|___ / | \/ | __ _(_) | \ \ / /_ _| |_ ___| |__ ___ _ __</span>
5+
<span data-ty> \ \ /\ / / _ \ '_ \ |_ \ | |\/| |/ _` | | | \ \ /\ / / _` | __/ __| '_ \ / _ \ '__|</span>
6+
<span data-ty> \ V V / __/ |_) |__) | | | | | (_| | | | \ V V / (_| | || (__| | | | __/ |</span>
7+
<span data-ty> \_/\_/ \___|_.__/____/ |_| |_|\__,_|_|_| \_/\_/ \__,_|\__\___|_| |_|\___|_|</span>
8+
<span data-ty> </span>
9+
<span data-ty>📬 Watching account: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY</span>
10+
<span data-ty>⚙️ [smoldot] Smoldot v2.0.34</span>
11+
<span data-ty>✅ [smoldot] Chain initialization complete for westend2.</span>
12+
<span data-ty>🔗 Name: "Westend"</span>
13+
<span data-ty>🧬 Genesis hash: 0xe143…423e</span>
14+
<span data-ty>⛓️ Chain specification starting at: 0x10cf…b908 (#23920337)</span>
15+
</div>

‎.snippets/code/tutorials/dapps/papi/remark-tutorial/output.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div id="termynal" data-termynal>
2+
<span data-ty>$ npm start -- --account 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY</span>
3+
<span data-ty> __ __ _ _____ __ __ _ _ __ __ _ _</span>
4+
<span data-ty> \ \ / /__| |__|___ / | \/ | __ _(_) | \ \ / /_ _| |_ ___| |__ ___ _ __</span>
5+
<span data-ty> \ \ /\ / / _ \ '_ \ |_ \ | |\/| |/ _` | | | \ \ /\ / / _` | __/ __| '_ \ / _ \ '__|</span>
6+
<span data-ty> \ V V / __/ |_) |__) | | | | | (_| | | | \ V V / (_| | || (__| | | | __/ |</span>
7+
<span data-ty> \_/\_/ \___|_.__/____/ |_| |_|\__,_|_|_| \_/\_/ \__,_|\__\___|_| |_|\___|_|</span>
8+
<span data-ty> </span>
9+
<span data-ty>📬 Watching account: 5Cm8yiG45rqrpyV2zPLrbtr8efksrRuCXcqcB4xj8AejfcTB</span>
10+
<span data-ty>📥 You've got mail!</span>
11+
<span data-ty>👤 From: 5Cm8yiG45rqrpyV2zPLrbtr8efksrRuCXcqcB4xj8AejfcTB</span>
12+
<span data-ty>🔖 Hash: 0xb6999c9082f5b1dede08b387404c9eb4eb2deee4781415dfa7edf08b87472050</span>
13+
</div>

images/develop/dapps/papi/papi-console.webp renamed to images/tutorials/dapps/papi/papi-console.webp

File renamed without changes.

‎llms.txt‎

Lines changed: 110 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19650,31 +19650,76 @@ See [Cancelling, Killing, and Blacklisting](https://wiki.polkadot.network/docs/l
1965019650
Doc-Content: https://docs.polkadot.com/tutorials/dapps/
1965119651
--- BEGIN CONTENT ---
1965219652
---
19653-
title: Decentralized Application Tutorials
19654-
description: Explore step-by-step tutorials for exploring the world of building decentralized applications using the toolkits that Polkadot provides.
19655-
template: index-page.html
19653+
title: Decentralized Application Tutorials
19654+
description: Explore step-by-step tutorials for exploring the world of building decentralized applications using the toolkits that Polkadot provides.
19655+
template: index-page.html
1965619656
---
19657+
19658+
# Build Decentralized Applications on Polkadot
19659+
19660+
This section provides hands-on tutorials for building decentralized applications (dApps) using the Polkadot SDK and its developer toolkits. These guides help you leverage Polkadot's infrastructure to build scalable, secure, and interoperable dApps without relying solely on smart contracts.
19661+
19662+
You'll explore a range of topics—from client-side apps and CLI tools to on-chain interaction patterns—all backed by lightweight or full-node tooling.
19663+
19664+
## Featured Tutorials
19665+
19666+
Learn how to integrate Polkadot APIs, use local or light clients, and interact with on-chain logic:
19667+
19668+
- **[Polkadot API Account Watcher](/tutorials/dapps/papi-account-watcher/){target=\_blank}** – build a CLI that listens for on-chain `remarkWithEvent` extrinsics using the Polkadot API and light clients
19669+
19670+
## In This Section
19671+
19672+
:::INSERT_IN_THIS_SECTION:::
19673+
19674+
## Additional Resources
19675+
19676+
<div class="subsection-wrapper">
19677+
<div class="card">
19678+
<a href="/develop/toolkit/api-libraries/papi/">
19679+
<h2 class="title">Polkadot API (PAPI)</h2>
19680+
<hr>
19681+
<p class="description">Learn how to use the Polkadot API to build dApps that interact with Substrate-based chains directly via RPC or light clients.</p>
19682+
</a>
19683+
</div>
19684+
<div class="card">
19685+
<a href="/develop/">
19686+
<h2 class="title">Start Building on Polkadot</h2>
19687+
<hr>
19688+
<p class="description">Get an overview of the tools, SDKs, and templates available for building with Polkadot—from runtime development to frontend integration.</p>
19689+
</a>
19690+
</div>
19691+
</div>
1965719692
--- END CONTENT ---
1965819693

1965919694
Doc-Content: https://docs.polkadot.com/tutorials/dapps/papi/
1966019695
--- BEGIN CONTENT ---
1966119696
---
19662-
title: Polkadot API (PAPI) Tutorials
19663-
description: Explore step-by-step tutorials for building applications using the Polkadot API.
19664-
template: index-page.html
19697+
title: Polkadot API (PAPI) Tutorials
19698+
description: Follow hands-on tutorials to build decentralized apps using the Polkadot API, including light clients, event listeners, and extrinsics.
19699+
template: index-page.html
1966519700
---
19701+
19702+
# Build with the Polkadot API (PAPI)
19703+
19704+
This section features practical tutorials for building applications using the [Polkadot API](/develop/toolkit/api-libraries/papi){target=\_blank}. Learn how to connect to Polkadot SDK-based chains, listen to on-chain events, submit extrinsics, and build apps powered by light or full clients.
19705+
19706+
## In This Section
19707+
19708+
:::INSERT_IN_THIS_SECTION:::
1966619709
--- END CONTENT ---
1966719710

1966819711
Doc-Content: https://docs.polkadot.com/tutorials/dapps/papi/remark-tutorial/
1966919712
--- BEGIN CONTENT ---
1967019713
---
19671-
title: Polkadot API Account Watcher Tutorial
19672-
description: Learn how to build a decentralized command-line application using the Polkadot API.
19714+
title: Account Watcher
19715+
description: Build a CLI app that monitors on-chain events using the Polkadot API and reacts to custom system.remarkWithEvent messages.
1967319716
---
1967419717

19718+
# PAPI Account Watcher
19719+
1967519720
## Introduction
1967619721

19677-
This tutorial demonstrates how to build a simple command-line interface (CLI) application that monitors a user's account on the relay chain for the [`system.remarkWithEvent`](https://paritytech.github.io/polkadot-sdk/master/frame_system/pallet/struct.Pallet.html#method.remark_with_event){target=\_blank} extrinsic.
19722+
This tutorial demonstrates how to build a simple command-line interface (CLI) application that monitors a user's account on the relay chain for the [`system.remarkWithEvent`](https://paritytech.github.io/polkadot-sdk/master/frame_system/pallet/struct.Pallet.html#method.remark_with_event){target=\_blank} extrinsic, using the [Polkadot API](/develop/toolkit/api-libraries/papi){target=\_blank}.
1967819723

1967919724
The `system.remarkWithEvent` extrinsic enables the submission of arbitrary data on-chain. In this tutorial, the data consists of a hash derived from the combination of an account address and the word "email" (`address+email`). This hash is monitored on-chain, and the application listens for remarks addressed to the specified account. The `system.remarkWithEvent` extrinsic emits an event that can be observed using the Polkadot API (PAPI).
1968019725

@@ -19694,7 +19739,7 @@ Additionally, you need an account with Westend tokens. Refer to the following re
1969419739

1969519740
## Clone the Repository
1969619741

19697-
To follow this tutorial, you can either run the example directly or use a boilerplate/template. This tutorial uses a template that includes all necessary dependencies for working with the Polkadot API and TypeScript. Clone the appropriate branch (`empty-cli`) of the repository as follows:
19742+
To follow this tutorial, you can either run the example directly or use a boilerplate/template. This tutorial uses a template that includes all necessary dependencies for working with the Polkadot API and TypeScript. Clone the appropriate branch ([`empty-cli`](https://github.com/CrackTheCode016/polkadot-api-example-cli/tree/empty-cli){target=\_blank}) of the repository as follows:
1969819743

1969919744
```bash
1970019745
git clone https://github.com/CrackTheCode016/polkadot-api-example-cli --branch empty-cli
@@ -19712,7 +19757,21 @@ npm install
1971219757
After opening the repository, you will find the following code (excluding imports):
1971319758

1971419759
```typescript title="index.ts"
19715-
code/develop/dapps/papi/remark-tutorial/index.ts
19760+
async function withLightClient(): Promise<PolkadotClient> {
19761+
// Start the light client
19762+
const smoldot = start();
19763+
// The Westend Relay Chain
19764+
const relayChain = await smoldot.addChain({ chainSpec: westEndChainSpec });
19765+
return createClient(
19766+
getSmProvider(relayChain)
19767+
);
19768+
}
19769+
19770+
async function main() {
19771+
// CLI code goes here...
19772+
}
19773+
19774+
main();
1971619775
```
1971719776

1971819777
The `withLightClient` function is particularly important. It uses the built-in light client functionality, powered by [`smoldot`](https://github.com/smol-dot/smoldot){target=\_blank}, to create a light client that synchronizes and interacts with Polkadot directly within the application.
@@ -19722,7 +19781,16 @@ The `withLightClient` function is particularly important. It uses the built-in l
1972219781
The CLI functionality is implemented within the `main` function. The CLI includes an option (`-a` / `--account`) to specify the account to monitor for remarks:
1972319782

1972419783
```typescript title="index.ts"
19725-
code/develop/dapps/papi/remark-tutorial/cli.ts
19784+
const program = new Command();
19785+
console.log(chalk.white.dim(figlet.textSync("Web3 Mail Watcher")));
19786+
program
19787+
.version('0.0.1')
19788+
.description('Web3 Mail Watcher - A simple CLI tool to watch for remarks on the Polkadot network')
19789+
.option('-a, --account <account>', 'Account to watch')
19790+
.parse(process.argv);
19791+
19792+
// CLI arguments from commander
19793+
const options = program.opts();
1972619794
```
1972719795

1972819796
## Watch for Remarks
@@ -19769,40 +19837,43 @@ npm start -- --account 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY
1976919837

1977019838
The output should look like this:
1977119839

19772-
```
19773-
__ __ _ _____ __ __ _ _ __ __ _ _
19774-
\ \ / /__| |__|___ / | \/ | __ _(_) | \ \ / /_ _| |_ ___| |__ ___ _ __
19775-
\ \ /\ / / _ \ '_ \ |_ \ | |\/| |/ _` | | | \ \ /\ / / _` | __/ __| '_ \ / _ \ '__|
19776-
\ V V / __/ |_) |__) | | | | | (_| | | | \ V V / (_| | || (__| | | | __/ |
19777-
\_/\_/ \___|_.__/____/ |_| |_|\__,_|_|_| \_/\_/ \__,_|\__\___|_| |_|\___|_|
19778-
19779-
Watching account: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY
19780-
[smoldot] Smoldot v2.0.34
19781-
[smoldot] Chain initialization complete for westend2. Name: "Westend". Genesis hash: 0xe143…423e. Chain specification starting at: 0x10cf…b908 (#23920337)
19782-
```
19840+
<div id="termynal" data-termynal>
19841+
<span data-ty>$ npm start -- --account 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY</span>
19842+
<span data-ty> __ __ _ _____ __ __ _ _ __ __ _ _</span>
19843+
<span data-ty> \ \ / /__| |__|___ / | \/ | __ _(_) | \ \ / /_ _| |_ ___| |__ ___ _ __</span>
19844+
<span data-ty> \ \ /\ / / _ \ '_ \ |_ \ | |\/| |/ _` | | | \ \ /\ / / _` | __/ __| '_ \ / _ \ '__|</span>
19845+
<span data-ty> \ V V / __/ |_) |__) | | | | | (_| | | | \ V V / (_| | || (__| | | | __/ |</span>
19846+
<span data-ty> \_/\_/ \___|_.__/____/ |_| |_|\__,_|_|_| \_/\_/ \__,_|\__\___|_| |_|\___|_|</span>
19847+
<span data-ty> </span>
19848+
<span data-ty>📬 Watching account: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY</span>
19849+
<span data-ty>⚙️ [smoldot] Smoldot v2.0.34</span>
19850+
<span data-ty>✅ [smoldot] Chain initialization complete for westend2.</span>
19851+
<span data-ty>🔗 Name: "Westend"</span>
19852+
<span data-ty>🧬 Genesis hash: 0xe143…423e</span>
19853+
<span data-ty>⛓️ Chain specification starting at: 0x10cf…b908 (#23920337)</span>
19854+
</div>
1978319855

1978419856
## Test the CLI
1978519857

19786-
To test the application, navigate to the [PAPI Dev Console > Extrinsics](https://dev.papi.how/extrinsics#networkId=westend&endpoint=light-client){target=\_blank}. Select the `System` pallet and the `remark_with_event` call.
19858+
To test the application, navigate to the [PAPI Dev Console > Extrinsics](https://dev.papi.how/extrinsics#networkId=westend&endpoint=light-client){target=\_blank}. Select the `System` pallet and the `remark_with_event` call. Ensure the input field follows the convention `address+email`. For example, if monitoring `5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY`, the input should be:
1978719859

19788-
Ensure the input field follows the convention `address+email`. For example, if monitoring `5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY`, the input should be:
19789-
19790-
![](images/develop/dapps/papi/papi-console.webp)
19860+
![](/images/tutorials/dapps/papi/papi-console.webp)
1979119861

1979219862
Submit the extrinsic and sign it using the Polkadot.js browser wallet. The CLI will display the following output and play the "You've Got Mail!" sound:
1979319863

19794-
```
19795-
__ __ _ _____ __ __ _ _ __ __ _ _
19796-
\ \ / /__| |__|___ / | \/ | __ _(_) | \ \ / /_ _| |_ ___| |__ ___ _ __
19797-
\ \ /\ / / _ \ '_ \ |_ \ | |\/| |/ _` | | | \ \ /\ / / _` | __/ __| '_ \ / _ \ '__|
19798-
\ V V / __/ |_) |__) | | | | | (_| | | | \ V V / (_| | || (__| | | | __/ |
19799-
\_/\_/ \___|_.__/____/ |_| |_|\__,_|_|_| \_/\_/ \__,_|\__\___|_| |_|\___|_|
19800-
19801-
Watching account: 5Cm8yiG45rqrpyV2zPLrbtr8efksrRuCXcqcB4xj8AejfcTB
19802-
You've got mail!
19803-
From: 5Cm8yiG45rqrpyV2zPLrbtr8efksrRuCXcqcB4xj8AejfcTB
19804-
Hash: 0xb6999c9082f5b1dede08b387404c9eb4eb2deee4781415dfa7edf08b87472050
19805-
```
19864+
<div id="termynal" data-termynal>
19865+
<span data-ty>$ npm start -- --account 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY</span>
19866+
<span data-ty> __ __ _ _____ __ __ _ _ __ __ _ _</span>
19867+
<span data-ty> \ \ / /__| |__|___ / | \/ | __ _(_) | \ \ / /_ _| |_ ___| |__ ___ _ __</span>
19868+
<span data-ty> \ \ /\ / / _ \ '_ \ |_ \ | |\/| |/ _` | | | \ \ /\ / / _` | __/ __| '_ \ / _ \ '__|</span>
19869+
<span data-ty> \ V V / __/ |_) |__) | | | | | (_| | | | \ V V / (_| | || (__| | | | __/ |</span>
19870+
<span data-ty> \_/\_/ \___|_.__/____/ |_| |_|\__,_|_|_| \_/\_/ \__,_|\__\___|_| |_|\___|_|</span>
19871+
<span data-ty> </span>
19872+
<span data-ty>📬 Watching account: 5Cm8yiG45rqrpyV2zPLrbtr8efksrRuCXcqcB4xj8AejfcTB</span>
19873+
<span data-ty>📥 You've got mail!</span>
19874+
<span data-ty>👤 From: 5Cm8yiG45rqrpyV2zPLrbtr8efksrRuCXcqcB4xj8AejfcTB</span>
19875+
<span data-ty>🔖 Hash: 0xb6999c9082f5b1dede08b387404c9eb4eb2deee4781415dfa7edf08b87472050</span>
19876+
</div>
1980619877

1980719878
## Next Steps
1980819879

‎tutorials/dapps/index.md‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,40 @@
11
---
2-
title: Decentralized Application Tutorials
3-
description: Explore step-by-step tutorials for exploring the world of building decentralized applications using the toolkits that Polkadot provides.
4-
template: index-page.html
5-
---
2+
title: Decentralized Application Tutorials
3+
description: Explore step-by-step tutorials for exploring the world of building decentralized applications using the toolkits that Polkadot provides.
4+
template: index-page.html
5+
---
6+
7+
# Build Decentralized Applications on Polkadot
8+
9+
This section provides hands-on tutorials for building decentralized applications (dApps) using the Polkadot SDK and its developer toolkits. These guides help you leverage Polkadot's infrastructure to build scalable, secure, and interoperable dApps without relying solely on smart contracts.
10+
11+
You'll explore a range of topics—from client-side apps and CLI tools to on-chain interaction patterns—all backed by lightweight or full-node tooling.
12+
13+
## Featured Tutorials
14+
15+
Learn how to integrate Polkadot APIs, use local or light clients, and interact with on-chain logic:
16+
17+
- **[Polkadot API Account Watcher](/tutorials/dapps/papi-account-watcher/){target=\_blank}** – build a CLI that listens for on-chain `remarkWithEvent` extrinsics using the Polkadot API and light clients
18+
19+
## In This Section
20+
21+
:::INSERT_IN_THIS_SECTION:::
22+
23+
## Additional Resources
24+
25+
<div class="subsection-wrapper">
26+
<div class="card">
27+
<a href="/develop/toolkit/api-libraries/papi/">
28+
<h2 class="title">Polkadot API (PAPI)</h2>
29+
<hr>
30+
<p class="description">Learn how to use the Polkadot API to build dApps that interact with Substrate-based chains directly via RPC or light clients.</p>
31+
</a>
32+
</div>
33+
<div class="card">
34+
<a href="/develop/">
35+
<h2 class="title">Start Building on Polkadot</h2>
36+
<hr>
37+
<p class="description">Get an overview of the tools, SDKs, and templates available for building with Polkadot—from runtime development to frontend integration.</p>
38+
</a>
39+
</div>
40+
</div>

‎tutorials/dapps/papi/.pages‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
title: Polkadot API (PAPI)
22
nav:
33
- index.md
4-
- remark-tutorial.md
4+
- 'Account Watcher': remark-tutorial.md

‎tutorials/dapps/papi/index.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
---
2-
title: Polkadot API (PAPI) Tutorials
3-
description: Explore step-by-step tutorials for building applications using the Polkadot API.
4-
template: index-page.html
5-
---
2+
title: Polkadot API (PAPI) Tutorials
3+
description: Follow hands-on tutorials to build decentralized apps using the Polkadot API, including light clients, event listeners, and extrinsics.
4+
template: index-page.html
5+
---
6+
7+
# Build with the Polkadot API (PAPI)
8+
9+
This section features practical tutorials for building applications using the [Polkadot API](/develop/toolkit/api-libraries/papi){target=\_blank}. Learn how to connect to Polkadot SDK-based chains, listen to on-chain events, submit extrinsics, and build apps powered by light or full clients.
10+
11+
## In This Section
12+
13+
:::INSERT_IN_THIS_SECTION:::

0 commit comments

Comments
 (0)