Skip to main content
This guide will walk you through the process of writing a simple Anchor program that increments a counter. You’ll learn how to deploy this program on Solana and interact with it using a React client.

Software Packages

This program is developed and tested with the following software packages. Other versions may also be compatible.

Quick Access to Source Code

If you prefer to dive straight into the code:

Source Code: Anchor Counter Program

Live Example App

Writing the Anchor Program

Let’s break down the key components of our counter program:

Core Functionality

The program implements two main instructions:
  1. initialize: Sets the counter to 0
  2. increment: Increments the counter by 1
Here’s the core structure of our program:
Nothing special here, just a simple Anchor program that increments a counter. The only difference is that we’re adding the delegate macro to inject some useful logic to interact with the delegation program.

Delegating the Counter PDA

In order to delegate the counter PDA, and make it writable in an Ephemeral Rollup session, we need to add an instruction which internally calls the delegate_account function. delegate_account will CPI to the delegation program, which upon validation will gain ownership of the account. After this step, an ephemeral validator can start processing transactions on the counter PDA and propose state diff trough the delegation program.

Transaction (Base Layer): Delegate

Inspect transactions details on Solana Explorer

Committing while the PDA is delegated

The ephemeral runtime allows committing the state of the PDA while it is delegated. This is done by building a MagicIntentBundleBuilder with the commit intent and invoking it.

Transaction (ER): Commit

Inspect transaction details on Solana Explorer

Transaction (Base layer): Commit

Inspect transaction details on Solana Explorer

Undelegating the PDA

Undelegating the PDA is done by building a MagicIntentBundleBuilder with the commit_and_undelegate intent. This commits the latest state and returns ownership of the PDA to the owner program.

Transaction (ER): Undelegate

Inspect transaction details on Solana Explorer

Transaction (Base layer): Undelegate

Inspect transaction details on Solana Explorer

Connecting the React Client

The React client is a simple interface that allows you to interact with the Anchor program. It uses the Anchor bindings to interact with the program and the MagicBlock SDK to interact with the Ephemeral Rollup session. Source lives alongside the program at anchor-counter/app.

Live Example App

Iframes only work with some wallets (e.g. Backpack). Alternatively, try the deployed demo here: https://counter-example.magicblock.app/

Ephemeral Endpoint Configuration

To interact with the Ephemeral Rollup session, you need to configure the appropriate endpoint:
  • For devnet, use the following ephemeral endpoint: https://devnet.magicblock.app
  • For mainnet, please reach out to the MagicBlock team to receive the appropriate endpoint.
  • For localhost, download, install, and run the ephemeral validator locally with the appropriate environment variables.
Make sure to update your client configuration to use the correct endpoint based on your development or production environment.
These public RPC endpoints are currently free and supported for development:
Magic Router Devnet: https://devnet-router.magicblock.app
Solana Devnet: https://api.devnet.solana.com
ER Devnet (Asia): https://devnet-as.magicblock.app
ER Devnet (EU): https://devnet-eu.magicblock.app
ER Devnet (US): https://devnet-us.magicblock.app
TEE Devnet: https://devnet-tee.magicblock.app/
Find out more details here .

Source Code: Anchor Counter Program

Live Example App