Add a tutorial for smart contract basic interaction #6089
Conversation
Muhammad-Altabba
requested review from
jdevcs,
luu-alex,
nikoulai and
spacesailor24
as code owners
Bundle StatsHey there, this message comes from a github action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
Deploying with
|
| Latest commit: |
25ebc9d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a377327c.web3-js-docs.pages.dev |
| Branch Preview URL: | https://6078-contracts-tutorial.web3-js-docs.pages.dev |
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## 4.x #6089 +/- ##
=======================================
Coverage 87.41% 87.41%
=======================================
Files 199 199
Lines 7612 7612
Branches 2063 2063
=======================================
Hits 6654 6654
Misses 958 958
Flags with carried forward coverage won't be shown. Click here to find out more.
|
|
I feel like it would make a lot more sense, to write tutorial using typescript^^ |
| Next, create a new file called `index.js` in your project directory and add the following code to it: | ||
|
|
||
| ```javascript | ||
| const { Web3 } = require('web3'); |
There was a problem hiding this comment.
I think also mention in desc that we also support ESM imports as we have native ESM builds.
There was a problem hiding this comment.
Seems a good idea. I will add a hint for this.
| Create a file named `deploy.js` and fill it with the following code: | ||
|
|
||
| ```javascript | ||
| const { Web3 } = require('web3'); |
There was a problem hiding this comment.
wt do you think about encouraging users to use individual packages instead of importing main web3, as it brings many not-required packages as well , if some one is not doing optimizations for that non-required pkgs.
There was a problem hiding this comment.
My 2c: tutorias are meant for people first time interacting with web3.js. Goal is to make it as simple as possible. Using individual packages would make sense in some "Advanced tutorials"
There was a problem hiding this comment.
We need to keep in mind that auto-signing requests with the local wallet are not working when you use individual packages
There was a problem hiding this comment.
@jdevcs @mpetrunic
Thanks, and yes, I kept it using one package for simplicity. But I should add a hint regarding this.
@avkos
Thanks for sharing this interesting information. Do we have it mentioned somewhere? If not, I think we should highlight this in multiple places.
There was a problem hiding this comment.
@avkos auto signing works if there is wallet in context.
for example one of working snippit:
const {Wallet, privateKeyToAccount} = require('web3-eth-accounts');
const {Contract} = require('web3-eth-contract');
const {Web3Context} = require('web3-core');
const con_json = require('contract.json');
async function test() {
//create a context with wallet and provider
const account = privateKeyToAccount("PRIVATE KEY");
const context = new Web3Context(
{
provider: 'http://127.0.0.1:7545',
wallet: new Wallet(account)
});
//pass that context to other packages instead of only provider
const contract = new Contract(con_json.abi, context);
const contractInstance = await contract.deploy(
{
data: con_json.bytecode
}).send({
gas: 10000,
from: account.address });
console.log(contractInstance.options.address);
const receipt = await contractInstance.methods.store(12).send(
{
from: account.address,
gas: 10000
});
console.log(receipt);
//.....
}
However as @mpetrunic said , it should not be added in current tutorial , so we will not do it.
There was a problem hiding this comment.
Thanks for example @jdevcs , It will be great to have this example somewhere in tutorials
it will be great to have tutorials in TS and JS. so people who use JS or TS can just copy/paste the code and it should works. But I think it is another task. Because we need to change all our tutorials |
docs/docs/tutorials/deploying_and_interacting_with_smart_contracts.md
Outdated
Show resolved
Hide resolved
Yes, I thought about using TS but this would add more steps to configure the samples for using TypeScript. So, I thought about keeping it simple as the tutorials are for absolute beginners. And for this, we may do something like a bit more advanced tutorial for TypeSecript users that would contain more bit advanced usage. |
The thing is, that configuration and types is the main issue for the majority users. Js users can just cp typescript code and remove types so you kill 2 birds with one stone. |
docs/docs/tutorials/deploying_and_interacting_with_smart_contracts.md
Outdated
Show resolved
Hide resolved
I agree. However, I hope to give a smooth experience with a strait forward copy/past then it works. But using TypeScript in the samples would also involve adding additional small steps for installing and compiling the code before running. So, I thought about having 2 tabs. One for JavaScript and the other for TypeScript. And I needed to update docusaurus to enable taps as they are available in new version. But the taps have issues with code blocks if they are placed inside. So, I am thinking about keeping the javascript here similar to other tutorials. And create an issue to investigate how to put code snippets inside taps with docusaurus and update all the tutorials thereafter. |
Or ts-node :)
Two tabs is also fine^^ |
Description
Closes #6078
Type of change
Checklist:
npm run lintwith success and extended the tests and types if necessary.npm run test:unitwith success.npm run test:coverageand my test cases cover all the lines and branches of the added code.npm run buildand testeddist/web3.min.jsin a browser.CHANGELOG.mdfile in the root folder.