diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 8fbda6450..0ccae3965 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -110,7 +110,8 @@ "scrollSepoliaBlockExplorer": "Scroll Sepolia Explorer", "sepoliaRollupExplorer": "Rollup Explorer", "sepoliaBlockExplorer": "Scrollscan Explorer", - "canvasBadge": "Canvas & Badge Integration" + "canvasBadge": "Canvas & Badge Integration", + "transactionJourney": "Checking Transaction Journey" }, "technology": { "introduction": "Introduction", diff --git a/src/assets/images/developers/getting-started/wagmi-demo.png b/src/assets/images/developers/getting-started/wagmi-demo.png new file mode 100644 index 000000000..49e97f216 Binary files /dev/null and b/src/assets/images/developers/getting-started/wagmi-demo.png differ diff --git a/src/config/sidebar.ts b/src/config/sidebar.ts index 3cc4d78f7..66bfb5b74 100644 --- a/src/config/sidebar.ts +++ b/src/config/sidebar.ts @@ -166,6 +166,10 @@ export const getSidebar = () => { title: t("sidebar.developers.canvasBadge"), url: formatUrl("developers/guides/canvas-badge-integration"), }, + { + title: t("sidebar.developers.transactionJourney"), + url: formatUrl("developers/guides/checking-transaction-journey"), + }, // { // title: t("sidebar.developers.bridgingERC721NftThroughCustomGateway"), // url: formatUrl("developers/guides/"), diff --git a/src/content/docs/en/developers/_images/txJourneyDiagram.png b/src/content/docs/en/developers/_images/txJourneyDiagram.png new file mode 100644 index 000000000..335a0957c Binary files /dev/null and b/src/content/docs/en/developers/_images/txJourneyDiagram.png differ diff --git a/src/content/docs/en/developers/developer-quickstart.mdx b/src/content/docs/en/developers/developer-quickstart.mdx index 465a3601c..d2d0f91b0 100644 --- a/src/content/docs/en/developers/developer-quickstart.mdx +++ b/src/content/docs/en/developers/developer-quickstart.mdx @@ -13,254 +13,287 @@ import ClickToZoom from "../../../../components/ClickToZoom.astro" import networkSelection from "./_images/mmNetworkSelection.png" import injectedProviderMM from "./_images/injectedProviderMM.png" import ToggleElement from "../../../../components/ToggleElement.astro" +import wagmiDemo from "../../../../assets/images/developers/getting-started/wagmi-demo.png" -With Scroll, your favorite tools for building and testing smart contracts just work. +Welcome to the Scroll Developer Quickstart. This guide walks you through building a minimal on-chain app, from installing tooling to deploying contracts on Scroll and connecting it to a React frontend. -Since Scroll is bytecode equivalent with the EVM, you’ll just need to point your favorite builder tools at a Scroll RPC Provider. -If you run into any issues, please reach out in [our Discord](https://discord.gg/scroll). - -## Acquiring Ether - -Scroll uses ETH as its native currency, which will be needed to pay transaction fees for deploying and interacting with the network. - -To start building on Scroll, we suggest you begin with using our Scroll Sepolia testnet. You'll first need to acquire some testnet ETH. See the [Faucet](/user-guide/faucet) page for tips on getting test tokens on Sepolia. After this, you can bridge your testnet ETH to the Scroll Sepolia Testnet (Layer 2) using our [Sepolia Bridge](https://sepolia.scroll.io/bridge), as described in the [Bridge article](/user-guide/bridge). - -For a walkthrough, start with the User Guide's [Setup](/user-guide/setup) page. - -Once you're ready to deploy on Scroll's mainnet, you can bridge over ETH using [our native bridge](https://scroll.io/bridge/) or one of the 3rd-party bridges. - -## Network Configuration +## What You'll Build -### Scroll Mainnet +By the time you're done, you'll have: +- Installed developer tooling. +- Deployed a Counter smart contract on Scroll by using Foundry. +- Created a React frontend (with wagmi and Viem) to read from and write to your contract. -Use the table below to configure your Ethereum tools to the Scroll mainnet. + +_What you'll build: a hello world dApp on Scroll connecting a React frontend to a contract you deployed._ -| Network Name | Scroll | Ethereum Mainnet | -| ------------------ | -------------------------------------------------- | ---------------------------------------------------- | -| RPC URL | [https://rpc.scroll.io/](https://rpc.scroll.io/) | [https://eth.llamarpc.com](https://eth.llamarpc.com) | -| Chain ID | 534352 | 1 | -| Currency Symbol | ETH | ETH | -| Block Explorer URL | [https://scrollscan.com/](https://scrollscan.com/) | [https://etherscan.io](https://etherscan.io) | +## Why Scroll? - -
Additional Scroll Mainnet RPCs and Infra
- - [Scroll Native Bridge](https://scroll.io/bridge) - - [Scroll RPC Providers on ChainList.org](https://chainlist.org/chain/534352) - - [Ethereum RPC Providers on ChainList.org](https://chainlist.org/chain/1) - {/* - Additional Block Explorers: - - [Dora](https://www.ondora.xyz/network/scroll/interactions) - - [L2Scan](https://scroll.l2scan.co/) */} +Scroll is a high performance, EVM equivalent zkEVM Layer 2 designed to help developers build secure, low-cost, and engaging applications. Because Scroll is fully bytecode compatible with the EVM, your existing development and testing tools work out of the box, just configure them to use a Scroll RPC provider. -
- -### Scroll Sepolia Testnet +If you run into any issues, please reach out in [our Discord](https://discord.gg/scroll). -Use the table below to configure your Ethereum tools to the Scroll Sepolia Testnet. +## Install and Configure Foundry -| Network Name | Scroll Sepolia | Ethereum Sepolia | -| ------------------ | ----------------------------------------------------------------- | ------------------------------------------------------------ | -| RPC URL | [https://sepolia-rpc.scroll.io/](https://sepolia-rpc.scroll.io/) | [https://rpc2.sepolia.org](https://rpc2.sepolia.org) | -| Chain ID | 534351 | 11155111 | -| Currency Symbol | ETH | ETH | -| Block Explorer URL | [https://sepolia.scrollscan.com](https://sepolia.scrollscan.com/) | [https://sepolia.etherscan.io](https://sepolia.etherscan.io) | +We'll use Foundry to compile and deploy our Counter contract. - -
Additional Scroll Sepolia RPCs and Infra
- - [Scroll Sepolia Native Bridge](https://sepolia.scroll.io/bridge) - - [Scroll Sepolia RPC Providers on ChainList.org](https://chainlist.org/chain/534351) - - [Ethereum Sepolia RPC Providers on ChainList.org](https://chainlist.org/chain/11155111) - - Additional Block Explorers: - - [Dora](https://www.ondora.xyz/network/scroll-sepolia/interactions) - - [L2Scan](https://scroll.l2scan.co/) +Create a folder for the contract: -
+```bash +# create a new contracts directory +mkdir contracts +cd contracts +# install and update foundry if you haven't +curl -L https://foundry.paradigm.xyz | bash +foundryup +# initialize a fresh Foundry project +forge init --no-git +``` -## Configure your tooling +## Configure Environment Variables - +To deploy your smart contracts on Scroll, you need two key components: +- An RPC node connection to interact with the Scroll network: https://sepolia-rpc.scroll.io/ +- A funded private key to deploy the contract -