diff --git a/tutorials/build-dapp-thirdweb/TUTORIAL.md b/tutorials/build-dapp-thirdweb/TUTORIAL.md new file mode 100644 index 0000000..0cf4ba8 --- /dev/null +++ b/tutorials/build-dapp-thirdweb/TUTORIAL.md @@ -0,0 +1,209 @@ +# Build a dapp using thirdweb + +### Introduction + +This guide will walk you through the process of creating and deploying a dapp using thirdweb. We will be using the thirdweb CLI to create a dapp, connect it to our contract on zkSync Era, and deploy it to decentralized storage using thirdweb Deploy. + +## Build time! + +### Step 1 — Create Application + +Thirdweb offers SDKs for a range of programming languages, such as React, React Native, TypeScript, Python, Go, and Unity. + +1. In your CLI run the following command: + + ```bash + npx thirdweb create --app + ``` + +2. Input your preferences for the command line prompts: + 1. Give your project a name + 2. Choose your network: We will choose EVM for zkSync Era + 3. Choose your preferred framework: Next.js, CRA, Vite, React Native, Node.js, or Express + 4. Choose your preferred language: JavaScript or TypeScript +3. Use the React or TypeScript SDK to interact with your application’s functions. See section on “interact with your contract” + +### Step 2 — Interact With a Contract + +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 + +> View the [full React SDK reference](https://portal.thirdweb.com/react?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) in thirdweb’s documentation. + +To create a new application pre-configured with thirdweb’s SDKs run and choose your preferred configurations: + +```jsx +npx thirdweb create app --evm +``` + +or install it into your existing project by running: + +```jsx +npx thirdweb install +``` + +#### Initialize SDK On zkSync Era + +Wrap your application in the `ThirdwebProvider` component and change the `activeChain` to zkSync Era + +```jsx +import { ThirdwebProvider } from "@thirdweb-dev/react"; +import { ZksyncEra } from "@thirdweb-dev/chains"; + +const App = () => { + return ( + + + + ); +}; +``` + +#### Get Contract + +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"; + +function App() { + const { contract, isLoading, error } = useContract("{{contract_address}}"); +} +``` + +#### Calling Contract Functions + +- For extension based functions, use the built-in supported hooks. The following is an example using the NFTs extension to access a list of NFTs owned by an address- `useOwnedNFTs` + + ```jsx + import { useOwnedNFTs, useContract, useAddress } from "@thirdweb-dev/react"; + + // Your smart contract address + const contractAddress = "{{contract_address}}"; + + function App() { + const address = useAddress(); + const { contract } = useContract(contractAddress); + const { data, isLoading, error } = useOwnedNFTs(contract, address); + } + ``` + + Full reference: [https://portal.thirdweb.com/react/react.usenft](https://portal.thirdweb.com/react/react.usenft?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + +- Use the `useContractRead` hook to call any read functions on your contract by passing in the name of the function you want to use. + + ```jsx + import { useContractRead, useContract } from "@thirdweb-dev/react"; + + // Your smart contract address + const contractAddress = "{{contract_address}}"; + + function App() { + const { contract } = useContract(contractAddress); + const { data, isLoading, error } = useContractRead(contract, "getName"); + } + ``` + + Full reference: [https://portal.thirdweb.com/react/react.usecontractread](https://portal.thirdweb.com/react/react.usecontractread?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + +- Use the `useContractWrite` hook to call any write functions on your contract by passing in the name of the function you want to use. + + ```jsx + import { + useContractWrite, + useContract, + Web3Button, + } from "@thirdweb-dev/react"; + + // Your smart contract address + const contractAddress = "{{contract_address}}"; + + function App() { + const { contract } = useContract(contractAddress); + const { mutateAsync, isLoading, error } = useContractWrite( + contract, + "setName" + ); + + return ( + mutateAsync({ args: ["My Name"] })} + > + Send Transaction + + ); + } + ``` + + Full reference: [https://portal.thirdweb.com/react/react.usecontractwrite](https://portal.thirdweb.com/react/react.usecontractwrite?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + +#### Connect Wallet + +Create a custom connect wallet experience by declaring supported wallets passed to your provider. + +```jsx +import { + ThirdwebProvider, + metamaskWallet, + coinbaseWallet, + walletConnectV1, + walletConnect, + safeWallet, + paperWallet, +} from "@thirdweb-dev/react"; + +function MyApp() { + return ( + + + + ); +} +``` + +Add in a connect wallet button to prompt end-users to login with any of the above supported wallets. + +```jsx +import { ConnectWallet } from "@thirdweb-dev/react"; + +function App() { + return ; +} +``` + +Full reference: [https://portal.thirdweb.com/react/connecting-wallets](https://portal.thirdweb.com/react/connecting-wallets?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + +### Step 3 — Deploy Application + +To host your static web application on decentralized storage, run: + +```jsx +npx thirdweb deploy --app +``` + +By running this command, your application is built for production and stored using Storage. The built application is uploaded to IPFS, a decentralized storage network, and a unique URL is generated for your application. + +This URL serves as a permanent hosting location for your application on the web. + +If you have any further questions or encounter any issues during the process, please [reach out to thirdweb support.](https://support.thirdweb.com?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + +## Conclusion + +In this tutorial, you learned how to create and deploy a dapp using thirdweb. You can now create your own dapp using thirdweb’s SDKs and connect it to your smart contract on zkSync Era. diff --git a/tutorials/build-dapp-thirdweb/tutorials.json b/tutorials/build-dapp-thirdweb/tutorials.json new file mode 100644 index 0000000..773e49a --- /dev/null +++ b/tutorials/build-dapp-thirdweb/tutorials.json @@ -0,0 +1,10 @@ +[ + { + "title": "Build a dapp using thirdweb", + "description": "This guide will walk you through the process of creating and deploying a dapp using thirdweb. We will be using the thirdweb CLI to create a dapp, connect it to our contract on zkSync Era, and deploy it to decentralized storage using thirdweb Deploy.", + "tags": ["dapp", "devtools"], + "level": "beginner", + "author": "thirdweb", + "slug": "build-dapp-thirdweb" + } +] diff --git a/tutorials/build-smart-contract-thirdweb/TUTORIAL.md b/tutorials/build-smart-contract-thirdweb/TUTORIAL.md new file mode 100644 index 0000000..0a0c772 --- /dev/null +++ b/tutorials/build-smart-contract-thirdweb/TUTORIAL.md @@ -0,0 +1,97 @@ +# Build a smart contract using thirdweb + +### Introduction + +This guide will walk you through the process of creating and deploying a smart contract using thirdweb. We will be using the thirdweb CLI to create a smart contract, and then deploy it to zkSync Era using thirdweb Deploy and alternatively simply deploying a prebuilt contract from thirdweb Explore. + +## Build time! + +### Step 1 — Create Contract + +To create a new smart contract using thirdweb CLI, follow these steps: + +1. In your CLI run the following command: + + ``` + npx thirdweb create contract + ``` + +2. Input your preferences for the command line prompts: + 1. Give your project a name + 2. Choose your preferred framework: Hardhat or Foundry + 3. Name your smart contract + 4. Choose the type of base contract: Empty, [ERC20](https://portal.thirdweb.com/solidity/base-contracts/erc20base?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), [ERC721](https://portal.thirdweb.com/solidity/base-contracts/erc721base?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs), or [ERC1155](https://portal.thirdweb.com/solidity/base-contracts/erc1155base?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + 5. Add any desired [extensions](https://portal.thirdweb.com/solidity/extensions?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) +3. Once created, navigate to your project’s directory and open in your preferred code editor. +4. If you open the `contracts` folder, you will find your smart contract; this is your smart contract written in Solidity. + + The following is code for an ERC721Base contract without specified extensions. It implements all of the logic inside the [`ERC721Base.sol`](https://github.com/thirdweb-dev/contracts/blob/main/contracts/base/ERC721Base.sol) contract; which implements the [`ERC721A`](https://github.com/thirdweb-dev/contracts/blob/main/contracts/eip/ERC721A.sol) standard. + + ```bash + // SPDX-License-Identifier: MIT + pragma solidity ^0.8.0; + + import "@thirdweb-dev/contracts/base/ERC721Base.sol"; + + contract Contract is ERC721Base { + constructor( + string memory _name, + string memory _symbol, + address _royaltyRecipient, + uint128 _royaltyBps + ) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {} + } + ``` + + This contract inherits the functionality of ERC721Base through the following steps: + + - Importing the ERC721Base contract + - 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). + +--- + +Alternatively, you can deploy a prebuilt contract for NFTs, tokens, or marketplace directly from the thirdweb Explore page: + +1. Go to the thirdweb Explore page: [https://thirdweb.com/explore](https://thirdweb.com/explore?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + + ![thirdweb Explore](./images/thirdweb-explore.jpg) + +2. Choose the type of contract you want to deploy from the available options: NFTs, tokens, marketplace, and more. +3. Follow the on-screen prompts to configure and deploy your contract. + +> For more information on different contracts available on Explore, check out [thirdweb’s documentation.](https://portal.thirdweb.com/pre-built-contracts?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs) + +### Step 2 — Deploy Contract + +Deploy allows you to deploy a smart contract to any EVM compatible network without configuring RPC URLs, exposing your private keys, writing scripts, and other additional setup such as verifying your contract. + +1. To deploy your smart contract using deploy, navigate to the root directory of your project and execute the following command: + + ```bash + npx thirdweb deploy + ``` + + Executing this command will trigger the following actions: + + - Compiling all the contracts in the current directory. + - Providing the option to select which contract(s) you wish to deploy. + - Uploading your contract source code (ABI) to IPFS. + +2. When it is completed, it will open a dashboard interface to finish filling out the parameters. + - `_name`: contract name + - `_symbol`: symbol or "ticker" + - `_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. + +For additional information on Deploy, please reference [thirdweb’s documentation](https://portal.thirdweb.com/deploy?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs). + +If you have any further questions or encounter any issues during the process, please reach out to thirdweb support at [support.thirdweb.com](http://support.thirdweb.com/?utm_source=zksync&utm_medium=docs&utm_campaign=chain_docs). + +## Conclusion + +In this tutorial, you learned how to create and deploy a smart contract using thirdweb. You can now use thirdweb to create and deploy your own smart contracts to zkSync Era. diff --git a/tutorials/build-smart-contract-thirdweb/images/thirdweb-explore.jpg b/tutorials/build-smart-contract-thirdweb/images/thirdweb-explore.jpg new file mode 100644 index 0000000..9a2ace4 Binary files /dev/null and b/tutorials/build-smart-contract-thirdweb/images/thirdweb-explore.jpg differ diff --git a/tutorials/build-smart-contract-thirdweb/tutorials.json b/tutorials/build-smart-contract-thirdweb/tutorials.json new file mode 100644 index 0000000..5f9c5e7 --- /dev/null +++ b/tutorials/build-smart-contract-thirdweb/tutorials.json @@ -0,0 +1,10 @@ +[ + { + "title": "Build a smart contract using thirdweb", + "description": "This guide will walk you through the process of creating and deploying a smart contract using thirdweb. We will be using the thirdweb CLI to create a smart contract, and then deploy it to zkSync Era using thirdweb Deploy and alternatively simply deploying a prebuilt contract from thirdweb Explore.", + "tags": ["smart contract", "devtools"], + "level": "beginner", + "author": "thirdweb", + "slug": "build-smart-contract-thirdweb" + } +]