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
-