feat: add thirdweb tutorials #4

avneesh0612 · 2023-07-24T15:26:49Z

Tutorial submission

Title of the tutorial

Build a smart contract using thirdweb
Build a dapp using thirdweb

Brief tutorial description

The first guide includes creating and deploying a smart contract on zkSync and the second one includes creating and deploying a dapp.

Checklist

I confirm that this tutorial is an original work and hasn't been published elsewhere.
I confirm that I am the rightful intellectual property owner (author) of this submission.
The tutorial includes referenced and relevant external sources (if applicable).
The tutorial includes working code snippets to illustrate concepts.
I have adhered to the tutorial guidelines provided in the repository.

uF4No · 2023-07-25T12:10:44Z

hi @avneesh0612 thanks for the PR!
I just noticed that you created addition tutorials.json files in each folder. The idea is to add all the tutorials in the tutorials.json file in the root of the project so we can list them in our docs from a single file. Can you update this?

idea404

This PR needs a rewrite to be merged.

The smart contract tutorial is closer to a tutorial than the dapp tutorial. However, it does not follow through like a single storyline which I would vow for considering there could be new developers following this. Moreover, the deployment failed for me with an error message which I hope is an anomaly as it could also throw other readers off.

The dApp tutorial is far from a tutorial at the moment, it mentions several functionalities without linking them together in a development flow which is more akin to a ref doc than a tutorial. I strongly suggest changing this to a story format such that readers may follow along to experience the tooling.

idea404 · 2023-07-25T15:22:38Z

tutorials/build-dapp-thirdweb/TUTORIAL.md

+To create a new application pre-configured with thirdweb’s SDKs run and choose your preferred configurations:
+
+```jsx
+npx thirdweb create app --evm


I find this a little confusing. Is the reader supposed to follow the steps outlined above after running npx thirdweb create --app or these right here?

idea404 · 2023-07-25T15:32:37Z

tutorials/build-dapp-thirdweb/TUTORIAL.md

+
+thirdweb provides several SDKs to allow you to interact with your contract including: [React](https://portal.thirdweb.com/react?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [React Native](https://portal.thirdweb.com/react-native?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [TypeScript](https://portal.thirdweb.com/typescript?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [Python](https://portal.thirdweb.com/python?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [Go](https://portal.thirdweb.com/go?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), and [Unity](https://portal.thirdweb.com/unity?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs).
+
+This document will show you how to interact with your contract deployed to zkSync Era using React


In my view, if the text assumes the reader has a contract ready and deployed it becomes less of a tutorial and more of a ref doc. I'd suggest including an address here of a deployed contract and elaborate on its methods/logic.

idea404 · 2023-07-25T15:52:48Z

tutorials/build-dapp-thirdweb/TUTORIAL.md

+
+#### Initialize SDK On zkSync Era
+
+Wrap your application in the `ThirdwebProvider` component and change the `activeChain` to zkSync Era


I find this again confusing. I was under the impression this would walk the reader through creating an application or teaching the reader how the code of an application interacts with a contract. I appreciate the syntax is uncomplicated and important to highlight, but without the educational portion I'd argue this does not belong in a tutorial section.

idea404 · 2023-07-25T16:08:34Z

tutorials/build-dapp-thirdweb/TUTORIAL.md

+To connect to your contract, use the SDK’s [`getContract`](https://portal.thirdweb.com/typescript/sdk.thirdwebsdk.getcontract?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) method.
+
+```jsx
+import { useContract } from "@thirdweb-dev/react";


The text above mentions getContract but this code showcases useContract, would be more clear if the two were to align, or if some explanation would be given for the difference

idea404 · 2023-07-25T16:20:12Z

tutorials/build-dapp-thirdweb/tutorials.json

@@ -0,0 +1,10 @@
+[


The idea is to hold an overview of the tutorials in one JSON file in the root dir of the repo, please add this there

idea404 · 2023-07-25T16:30:14Z

tutorials/build-smart-contract-thirdweb/TUTORIAL.md

+1. In your CLI run the following command:
+
+   ```
+   npx thirdweb create contract


The tutorial should either mention thirdweb should be installed globally on the system or change this command to something along the lines of: npx @thirdweb/cli create contract

idea404 · 2023-07-25T16:43:58Z

tutorials/build-smart-contract-thirdweb/TUTORIAL.md

+   - Inheriting the contract by declaring that our contract is an ERC721Base contract
+   - Implementing any required methods, such as the constructor.
+
+5. After modifying your contract with your desired custom logic, you may deploy it to zkSync Era using [Deploy](https://portal.thirdweb.com/deploy?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs).


This requires an API key, I'd prefer for this text to have a warning here before redirecting to the site

idea404 · 2023-07-25T16:50:51Z

tutorials/build-smart-contract-thirdweb/TUTORIAL.md

+
+---
+
+Alternatively, you can deploy a prebuilt contract for NFTs, tokens, or marketplace directly from the thirdweb Explore page:


This would be more helpful in another tutorial or in any case this is information that deserves to be on its own. As a follower of the tutorial, adding options on things to do is confusing when I am just becoming acquainted with a new tool

idea404 · 2023-07-25T17:07:02Z

tutorials/build-smart-contract-thirdweb/TUTORIAL.md

+   - `_royaltyRecipient`: wallet address to receive royalties from secondary sales
+   - `_royaltyBps`: basis points (bps) that will be given to the royalty recipient for each secondary sale, e.g. 500 = 5%
+3. Select `ZksyncEra` as the network
+4. Manage additional settings on your contract’s dashboard as needed such as uploading NFTs, configuring permissions, and more.


To me, after (creating an API key on the webUI and) running npx thirdweb deploy and filling the fields returned an error:

Failed to deploy contract Contract bytecode is invalid. 0x{"error":"Not Found"} If you believe this is incorrect or the error persists, please reach out in [discord](https://discord.gg/thirdweb).

@avneesh0612 can you confirm if npx thidweb deploy uses the zksolc compiler behind the scenes? All contracts deployed on zkSync Era must be compiled with our compilers

idea404 · 2023-07-25T17:39:55Z

tutorials/build-smart-contract-thirdweb/tutorials.json

@@ -0,0 +1,10 @@
+[


same as with other JSON file

idea404 · 2023-09-21T09:43:11Z

Closes #11

feat: add thirdweb tutorials

c51963b

avneesh0612 requested review from uF4No, bxpana and dutterbutter as code owners July 24, 2023 15:26

fix: add conclusion

8f90d34

idea404 suggested changes Jul 25, 2023

View reviewed changes

idea404 linked an issue Sep 21, 2023 that may be closed by this pull request

Add Thirdweb Tutorials #11

Open

avneesh0612 closed this by deleting the head repository Feb 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add thirdweb tutorials #4

feat: add thirdweb tutorials #4

avneesh0612 commented Jul 24, 2023 •

edited

Loading

uF4No commented Jul 25, 2023

idea404 left a comment

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

idea404 Jul 25, 2023

uF4No Jul 26, 2023

idea404 Jul 25, 2023

idea404 commented Sep 21, 2023


		thirdweb provides several SDKs to allow you to interact with your contract including: [React](https://portal.thirdweb.com/react?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [React Native](https://portal.thirdweb.com/react-native?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [TypeScript](https://portal.thirdweb.com/typescript?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [Python](https://portal.thirdweb.com/python?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [Go](https://portal.thirdweb.com/go?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), and [Unity](https://portal.thirdweb.com/unity?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs).

		This document will show you how to interact with your contract deployed to zkSync Era using React


		#### Initialize SDK On zkSync Era

		Wrap your application in the `ThirdwebProvider` component and change the `activeChain` to zkSync Era


		---

		Alternatively, you can deploy a prebuilt contract for NFTs, tokens, or marketplace directly from the thirdweb Explore page:

feat: add thirdweb tutorials #4

feat: add thirdweb tutorials #4

Conversation

avneesh0612 commented Jul 24, 2023 • edited Loading

Tutorial submission

Title of the tutorial

Brief tutorial description

Checklist

uF4No commented Jul 25, 2023

idea404 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

idea404 commented Sep 21, 2023

avneesh0612 commented Jul 24, 2023 •

edited

Loading