Getting Started: Build and Deploy a dApp using Starknet-Scaffold

Blockchain, Education & resources, Starknet, Starknet-Scaffold

Getting Started: Build and Deploy a dApp using Starknet-Scaffold

August 28, 2024

Part 1: Write an ERC20 Smart Contract in Cairo

Building dApps on Starknet can quickly become a hassle when confronted with a lot of tools with no idea of which to pick for accelerated developmen‍t.

Building and bootstrapping smart contracts and dApps on Starknet has been made easy by Starknet-Scaffold, an open-source toolkit designed to develop decentralized applications (dApps) on Starknet. This toolkit includes the most popular and functional tools, ensuring an up-to-date development environment.

Objective

In this two-part series, our goal is to create, and deploy an ERC20 Token Smart Contract on Starknet. We’ll also be building a user interface (UI) that allows us to interact with the contract. To make the process clear, we’ll break it down into two parts:

Part 1: Build the token smart contract.
Part 2: Develop a user interface that interacts with the smart contract.

Beyond building the dApp, we’ll explore the amazing features of Starknet-Scaffold and also provide practical demonstrations to guide you through using the:

Deployer: A tool for deploying smart contracts on testnet and mainnet.
Faucet: Claim your Sepolia testnet tokens.
Burner: For creating temporary wallets for testing during development.
Scaffold Wikipedia: A collection of Starknet/Cairo learning resources.
Stark Converter: A collection of utility functions for Starknet-related conversions.
Address Book: A collection of all relevant contract addresses on Starknet.

By the end of this series, you’ll have a fully functional token smart contract, a user-friendly interface to interact with it, and a solid grasp of Starknet-Scaffold — a tool that significantly accelerates your Starknet development journey.

Let’s get started

Before we begin, ensure you have installed the following:

To get started, there are two installation methods:

Using the create-starknet-app(recommended).
Cloning the repository from GitHub.

Method One: Using create-starknet-app (recommended)

The recommended way to get started with Starknet-Scaffold is by using create-starknet-app. This allows you to choose between different boilerplate types based on what you need for your project.

Open your terminal and run the following command:

npx create-starknet-app

You’ll be prompted for a project name, and a package type, enter both to proceed.

Available package types include:

contract-only: For a project that requires just contract-related tools (no frontend).
fullstack: For full stack projects. Provides customizable out-of-the-box UI components.
dojo: For gaming projects which need access to the dojo stack.
debugger: For projects with need to utilize the full debugging suite.

Follow the prompts:

Enter your package name: e.g., my-project
Select the package type:

1 for contract_only
2 for fullstack
3 for dojo
4 for debugger

Once the setup is complete, navigate to the project directory

cd my-project

Method Two: Clone repository

To get started with Starknet-Scaffold via GitHub, follow these steps:

Clone the repository:

Clone the Starknet-Scaffold repository from GitHub to your local machine. Open your terminal or command prompt and run the following command:

git clone git@github.com:argentlabs/Starknet-Scaffold.git

2. Navigate to the Project Directory

After cloning, navigate into the project directory by running:

cd Starknet-Scaffold

Write ERC20 smart contract

If you haven’t already scaffolded your project, run the create-starknet-app command, and when prompted, select the contract_only option. This setup is specifically tailored for writing and deploying smart contracts without additional front-end components.

After running the command, you’ll see a folder structure similar to the one below, which will be generated for you:

Copy the smart contract below and paste it intolib.cairo

mod ScaffoldToken {
    use openzeppelin::token::erc20::ERC20Component;
    use openzeppelin::token::erc20::ERC20HooksEmptyImpl;
    use starknet::ContractAddress;

    component!(path: ERC20Component, storage: erc20, event: ERC20Event);

    #[abi(embed_v0)]
    impl ERC20MixinImpl = ERC20Component::ERC20MixinImpl<ContractState>;

    impl ERC20InternalImpl = ERC20Component::InternalImpl<ContractState>;

    #[storage]
    struct Storage {
        #[substorage(v0)]
        erc20: ERC20Component::Storage,
    }

    #[event]
    #[derive(Drop, starknet::Event)]
    enum Event {
        #[flat]
        ERC20Event: ERC20Component::Event,
    }

    #[constructor]
    fn constructor(ref self: ContractState, recipient: ContractAddress) {
        self.erc20.initializer("ScaffoldToken", "SSTK");

        self.erc20.mint(recipient, 100000000000000000000);
    }
}

The code above, creates an ERC20 token using Openzeppelin’s library.

Wallet Setup

To deploy and interact with a Cairo smart contract, you need to have the Bravoos or Argent wallet.

To download:

Build Contract

Run the below command in your terminal to get it ready for deployment.

npm run build-contracts

You would get this in the terminal, which means the build was successful.

Deploying your contract

You can either choose to deploy locally using the available scripts or with the Scaffold Deployer tool. We’ll do both.

Deploy contract using Scaffold Scripts

To get started, we need to first create and deploy an account, then we can easily deploy contracts. Scripts have been provided to make the process a bit easier.

Prepare account

To prepare your account run:

npm run prepare-account --url=https://starknet-mainnet.public.blastapi.io/rpc/v0_7 --name=scaffold scaffold

Once completed, you should get an output like this:

Fund account

You should go ahead to fund the generated profile address with enough funds necessary to deploy it. Funds can be provided in either ETH or STRK.

Deploy account

To deploy your account run:

npm run deploy-account — profile=scaffold — name=scaffold — feetoken=eth — maxfee=25799552558

Once deployed you can now go ahead to declaring and deploying your smart contracts.

Declare smart contract

To declare your smart contract, simply run:

npm run declare-contract — profile=scaffold — contract=ScaffoldToken — feetoken=eth

Deploy smart contract

Finally, you can deploy your smart contract using the deploy-contract script:

npm run deploy-contract — profile=scaffold — feetoken=eth — class=0x3a0db5280a152eb200ba54c530c01907910098b739737b2ecad6e75a7676f86

Deploy contract using Scaffold Deployer

The scaffold deployer is a simple tool for seamlessly declaring and deploying smart contracts to Starknet testnet and mainnet.

This tools interface consists of two sections; the declare and deploy section.

Declare contract section:

Prepare Contract: Ensure you’ve ran npm run build-contracts to generate the necessary files for deployment.
Access Scaffold Deployer: Go to Scaffold Deployer.
Upload Contract Files: Upload the required files that were generated when we ran npm run build-contracts. You can find these files in target > dev

4. Initiate Deployment: Click the “Declare” button to start the deployment process, which would pop up the connected wallet to confirm the transaction.

Deploy contract section:

During deployment, our contract requires a specific piece of information: the recipient address for the initial token minting. This information is passed through the constructor, a special function that runs only once when the contract is created.

In our case, the constructor takes one argument: recipient. This address determines who will receive the initial supply of tokens (100000000000000000000, which is likely 1000 tokens with 18 decimals).

#[constructor]
    fn constructor(ref self: ContractState, recipient: ContractAddress) {
        self.erc20.initializer("ScaffoldToken", "SSTK");

        self.erc20.mint(recipient, 100000000000000000000);
    }

Since we are still in the testing phase, it’s common practice to set the recipient address to your own wallet address during deployment. This grants you control over the initial token distribution.

However, remember to switch to the Testnet network and make sure to use your testnet wallet address, not your mainnet address.

When you click on the deploy button, it would pop up your wallet with something like the below

Here’s the address to the deployed token contract — link.

You can also see here that the initial minted amount was sent to the address I passed as the recipient address during deployment.

Set up a burner wallet

To simplify our development, we’ll generate a burner wallet using Scaffold Burner. This wallet is temporary and is ideal for quick testing and development purposes.

NB: Burner wallets are only available on the testnet.

Generate the Wallet: Click the “Generate new wallet” button. This will prompt your wallet to pop up, where you’ll need to sign the transaction to complete the wallet creation.

Connect Wallet: Once the burner wallet is generated, click the “Connect” button, to activate the generated burner wallet.

Fund burner wallet with test tokens

Now that we have created our burner wallet, we’ll need to fund it with test tokens to cover gas fees. You can obtain these tokens via the Starknet Faucet.

Visit the Starknet Faucet: Head over to Starknet Faucet.
Enter your burner wallet address: Copy and paste your burner wallet address into the designated field.
Important: Before submitting, ensure you add an extra 0 after the 0x prefix in your burner wallet address. For example, if your address starts with 0x, change it to 0x0.
This adjustment is necessary because the faucet only accepts addresses starting with 0x0; otherwise, you’ll receive an “invalid address” error.
Claim Tokens: Follow the faucet’s instructions to claim your test tokens.

Once your burner wallet is funded, you’re all set. Now you can proceed to testing your smart contract!

Conclusion

We’ve successfully built and deployed an ERC20 token smart contract using Starknet-Scaffold. We walked through setting up your development environment, writing the contract in Cairo, and deploying it with the Scaffold Deployer. You’ve also learned how to create and fund a burner wallet for testing.

In the second part, we’ll focus on developing the user interface to interact with your deployed contract, making the dApp fully functional and user-friendly. Stay tuned!

Useful links: