Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add interactive code editor for tutorials #7036

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/docs/guides/ens/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ title: Mastering the Web3 ENS package

# Using web3.js ENS Package

<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-qmk8vz?embed=1&file=main.ts&showSidebar=1"></iframe>

In this tutorial, we'll explore how to use the web3.js ENS (Ethereum Name Service) package. The Ethereum Name Service (ENS) is a decentralized domain system built on the Ethereum blockchain. It serves as a distributed, secure, and human-readable naming system designed to map Ethereum addresses, smart contracts, and various other services to easily understandable names.

## Installing web3.js
Expand Down Expand Up @@ -115,4 +117,4 @@ console.log(result);

## Conclusion

In this tutorial, we've covered how to use the web3.js ENS package to interact with Ethereum Name Service. You should now be able to perform various ENS-related operations using web3.js version 4. For more details visit web3.js ENS [documentation](/libdocs/ENS) section.
In this tutorial, we've covered how to use the web3.js ENS package to interact with Ethereum Name Service. You should now be able to perform various ENS-related operations using web3.js version 4. For more details visit web3.js ENS [documentation](/libdocs/ENS) section.
1 change: 1 addition & 0 deletions docs/docs/guides/events_subscriptions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ sidebar_label: 'Mastering Events Subcriptions'
---

# Events Subscription
<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-5cbd4m?embed=1&file=main.ts&showSidebar=1"></iframe>

## Subscribing to smart contracts events

Expand Down
5 changes: 4 additions & 1 deletion docs/docs/guides/getting_started/metamask.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ sidebar_label: Connecting to Metamask

# Connecting to Metamask


<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-wkhaza?embed=1&file=main.js&showSidebar=1"></iframe>

## React app

After creating your react app `npx create-react-app app-name`, and installing web3 `npm i web3` you can go to `src/app.js`, you can clean up the code and import `{Web3}`. It should look like this:
Expand Down Expand Up @@ -186,4 +189,4 @@ export default App;
</html>
```

<!-- take example from wallet/examples -->
<!-- take example from wallet/examples -->
2 changes: 2 additions & 0 deletions docs/docs/guides/web3_eth/eth.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import TabItem from '@theme/TabItem';

# Getting Started with `eth` Package

<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-w8v2kw?embed=1&file=main.ts&showSidebar=1"></iframe>

## Introduction

The `web3-eth` package provides a set of powerful functionalities to interact with the Ethereum blockchain and smart contracts. In this tutorial, we will guide you through the basics of using the `web3-eth` package of web3.js version 4. We will be using TypeScript throughout the examples.
Expand Down
22 changes: 12 additions & 10 deletions docs/docs/guides/web3_plugin_guide/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ sidebar_label: 'Getting started'

# Getting Started

Welcome to the Web3 Plugins🧩 Guide, a new feature introduced in web3.js v4. In addition to the core web3.js libraries, plugins bring specialized functionalities tailored for end-users (functionalities, that you, as a developer, can create). These enhancements may involve creating wrappers for specific contracts, adding extra features to RPC methods, adding any external libraries, logic, extending the capabilities of web3.js methods, etc...
<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-uxkc1b?embed=1&file=main.ts&showSidebar=1"></iframe>

In this guide, you will learn the basics to get started building web3 plugins, setting up providers, importing, and using different web3.js packages.
Welcome to the Web3 Plugins🧩 Guide, a new feature introduced in web3.js v4. In addition to the core web3.js libraries, plugins bring specialized functionalities tailored for end-users (functionalities, that you, as a developer, can create). These enhancements may involve creating wrappers for specific contracts, adding extra features to RPC methods, adding any external libraries, logic, extending the capabilities of web3.js methods, etc...

In this guide, you will learn the basics to get started building web3 plugins, setting up providers, importing, and using different web3.js packages.

- [Plugin Developer Guide (For Creators)](/guides/web3_plugin_guide/plugin_authors)
- [Plugin User Guide (Usage)](/guides/web3_plugin_guide/plugin_users)

- You can find all the web3 plugins🧩 [here](https://web3js.org/plugins)
- You can find all the web3 plugins🧩 [here](https://web3js.org/plugins)

- To list your web3 plugin🧩 into the web3js.org/plugins page, you can submit a PR [here](https://github.com/web3/web3js-landing/blob/main/src/pluginList.ts)

Expand All @@ -24,9 +26,9 @@ import { Web3PluginBase } from "web3";

//2. Create a Class extending the `Web3Pluginbase`
class MyPlugin extends Web3PluginBase {

//3. Add a name to the plugin
pluginNamespace = "pluginExample";
pluginNamespace = "pluginExample";

//4. Create any methods with your desired functionality
async doSomething(){
Expand Down Expand Up @@ -118,7 +120,7 @@ class MyPlugin extends Web3PluginBase {
async createAccount() {
const account = eth.accounts.create();
console.log("account:", account);
/*
/*
account: {
address: '0x59E797F2F66AffA9A419a6BC2ED4742b7cBc2570',
privateKey: '0x52a81fc3a7fd6ce9644147c9fb5bfbe1f708f37b4611b3c3310eb9a6dc85ccf4',
Expand Down Expand Up @@ -149,7 +151,7 @@ class MyPlugin extends Web3PluginBase {
const wallet = this.wallet.add(accounts);
//by creating the wallet, web3.js will use this account to sign TXs under the hood
console.log(wallet);
/*
/*
Wallet(1) [
{
address: '0x233725561B1430bE2C24Ce9EEabe63E4B46EC9E3',
Expand Down Expand Up @@ -186,10 +188,10 @@ class MyPlugin extends Web3PluginBase {
async interactWithContract() {
//1. Initialize contract
const myContract = new Contract(ABI, ADDRESS);

//2. Interact with reading functions
const response = myContract.methods.doSomething().call();

//3. Interact with writing functions
//You must initialize a wallet to be able to send the TX from wallet[0].address
const txReceipt = myContract.methods.doSomething().send({from: wallet[0].address})
Expand Down Expand Up @@ -279,7 +281,7 @@ All web3 config params [here](https://docs.web3js.org/guides/web3_config/)
:::


## Videos
## Videos

### Create your first plugin in 20 minutes!

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Mastering Utility Functions

## Introduction
<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-kbtbsv?embed=1&file=main.ts&showSidebar=1"></iframe>
In this guide, you'll learn about the different functions of the web3 utils package, it contains the methods to know how to generate random bytes in different formats, how to perform conversion between Hex values and numbers, hashing functions, addresses, packing padding and in the last part you will see how to compare block numbers.

## Installation
Expand Down
Loading