Getting Started with the Scroll SDK

4 min readNov 20, 2024

Introduction

The Scroll SDK is an essential toolkit for developers working on the Scroll blockchain, a zk-rollup Layer 2 solution designed to enhance Ethereum’s scalability and usability. By offering lower transaction costs, zkEVM compatibility, and seamless integration with Ethereum tools, Scroll empowers developers to create scalable dApps with ease.

This article provides a hands-on guide to setting up the Scroll SDK, creating basic blockchain interactions, and a unique example of visualizing blockchain data using a real-time balance chart — an application not covered in the official documentation.

GitHub Repository: Scroll SDK GitHub

Setting Up the Development Environment

Before diving into development, ensure you have the required setup:

1. Install Node.js
Download and install Node.js LTS. Check the installation:

node -v
npm -v

2. Install Scroll SDK
Add the Scroll SDK to your project using npm or yarn:

npm install @scroll/sdk

3. Set Up a Test Wallet
— Use MetaMask and configure it for the Scroll Alpha Testnet.
— Obtain test ETH from the Scroll Faucet

4. Clone a Starter Project
Use a Scroll SDK boilerplate for quicker onboarding:

git clone https://github.com/scroll-tech/scroll-sdk-starter  
cd scroll-sdk-starter  
npm install

Step-by-Step Development Guide

1. Connecting to the Scroll Network

Use the SDK to connect to the Scroll network:

const { ScrollProvider } = require("@scroll/sdk");

const provider = new ScrollProvider({
  network: "alpha", // Specify Scroll Alpha Testnet
});

console.log("Connected to Scroll Network");

2. Fetching Account Balances

Retrieve the balance of an account:

async function getBalance(address) {
  const balance = await provider.getBalance(address);
  console.log(`Balance of ${address}:`, balance.toString());
}

getBalance("0xYourWalletAddress");

3. Sending Transactions

Send ETH to a recipient:

 
async function sendTransaction() {
  const signer = provider.getSigner();
  const tx = await signer.sendTransaction({
    to: "0xRecipientAddress",
    value: provider.utils.parseEther("0.01"),
  });
  console.log("Transaction Hash:", tx.hash);
  await tx.wait();
  console.log("Transaction Confirmed!");
}

sendTransaction();

Creating a Scroll SDK Balance Chart

This section demonstrates how to use the Scroll SDK to fetch balances of multiple accounts and display them on a real-time bar chart using Chart.js.

Setting Up the Chart

1. Install Chart.js:

npm install chart.js

2. Prepare an HTML file for the chart:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Balance Chart</title>
</head>
<body>
    <canvas id="balanceChart" width="400" height="200"></canvas>
    <script src="chart.js"></script>
    <script src="app.js"></script>
</body>
</html>

3. Add a JavaScript file app.js to render the chart:

const { ScrollProvider } = require("@scroll/sdk");

const provider = new ScrollProvider({ network: "alpha" });
const addresses = ["0xAddress1", "0xAddress2", "0xAddress3"];

async function fetchBalances() {
    const balances = [];
    for (let address of addresses) {
        const balance = await provider.getBalance(address);
        balances.push(Number(provider.utils.formatEther(balance)));
    }
    return balances;
}

async function renderChart() {
    const balances = await fetchBalances();
    const ctx = document.getElementById("balanceChart").getContext("2d");

    new Chart(ctx, {
        type: "bar",
        data: {
            labels: addresses,
            datasets: [{
                label: "Account Balances (ETH)",
                data: balances,
                backgroundColor: "rgba(75, 192, 192, 0.2)",
                borderColor: "rgba(75, 192, 192, 1)",
                borderWidth: 1,
            }],
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        },
    });
}

renderChart();

Why This is Useful

The real-time chart serves as a creative demonstration of Scroll SDK’s capabilities:

- Visualization: Track account balances dynamically for testing purposes.
- Customizable: Extend this idea to visualize gas fees, transaction counts, or historical data.
- Filling the Gap: This use case isn’t covered in the official documentation, making it a unique learning opportunity.

Conclusion: What’s Next?

The Scroll SDK is a robust tool for creating scalable and efficient dApps on Ethereum Layer 2. This article covered the basics of interacting with the Scroll blockchain and showcased a unique application for real-time data visualization.

Further Exploration
- Explore the official Scroll documentation
- Experiment with bridging assets between L1 and L2 or advanced zk-rollup features.
- Build a production-ready dApp using Scroll SDK.

Take your Scroll development journey to the next level — what will you build next?

Join the Level Up Program!
Want to showcase your skills and learn more? Join the Level Up Program today: https://www.levelup.xyz

Thank you for reading! ✨📜
My X: https://x.com/ZaksansPG
My TG:https://t.me/Zaksans