If you used the Somnia Devnet you may get some issues adding the testnet to your wallet. You will first need to remove the Devnet.

To do this open the networks on metamask:

Then click the three dots next to the network and click delete:

This will remove the Devnet from you networks. You now should be able to add the Testnet!

You may find that metamask has defaulted to using an incorrect block explorer. You will notice this when you click on view on block explorer in metamask you get a page like this:

To fix this you need to update the block explorer in your metamask config for the Somnia devnet. First open metamask.

Now click on the network in the top right this will bring down the select network windoScroll to the Somnia Testnet and click the 3 dots to open the config.

Here click on the down arrow on the block explorer URL and click add block explorer URL

In the URL box type: https://shannon-explorer.somnia.network/

It will now default to using the somnia-devnet block explorer. You can check this by viewing a transaction on the block explorer

It should look like this:

Have fun exploring the Testnet!

Network Details

RPC Nodes: A Bridge to the Blockchain

What is an RPC Node?

An RPC (Remote Procedure Call) node is a gateway between decentralized applications (dApps) and blockchain networks. It acts as a bridge, enabling communication and data exchange between the two.

Key Functions of RPC Nodes:

• Information Retrieval: Users can query RPC nodes to fetch data from the blockchain, such as transaction history, block information, and smart contract data.

• Transaction Broadcasting: RPC nodes allow users to broadcast transactions to the network, which are then validated and added to the blockchain.

• Smart Contract Execution: RPC nodes can be used to execute smart contract functions, enabling complex interactions and automation.

Why are RPC Nodes Important?

RPC nodes play a crucial role in the functioning of decentralized applications and the overall blockchain ecosystem. By providing a reliable and efficient way to interact with the blockchain, RPC nodes empower developers to build innovative dApps and enable users to participate in decentralized finance and other blockchain-based activities.

Faucet

Community

IDE

Solidity Resources

Toolkit

1. First, Connect your Wallet. You may use any desired wallet or Metamask (preferred)

2. Just the last step is to approve the Somnia testnet network in Metamask.

Welcome to the Somnia Tutorials

The Tutorials section is designed to help developers quickly get started with building on Somnia. Whether deploying your first smart contract, exploring blockchain analytics, or using Ecosystem Partner resources, these hands-on guides will walk you through every step.

Each tutorial includes code samples, explanations, and troubleshooting tips to ensure a smooth learning experience. Start exploring and Build On Somnia

Somnia empowers developers to build applications for mass adoption. Foundry is a tool for building Smart Contracts for mass adoption, making it easy for developers to create and deploy Smart Contracts to the Somnia Network.

Foundry is a blazing fast, portable and modular toolkit for EVM application development written in Rust.

This guide will teach you how to deploy a “Voting” Smart Contract to the Somia Network using Foundry.

Pre-requisites:

1. This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

2. To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet.

3. Foundry is installed and set up on your local machine. See Guide

Initialise Foundry Project

To start a new project with Foundry, run the command:

forge init BallotVoting

This creates a new directory hello_foundry from the default template. Open BallotVoting directory, and the open the src directory where you will find a default Counter.sol solidity file. Delete the Counter.sol file.

Create the Smart Contract

Create a new file inside the src directory and name it BallotVoting.sol and paste the following code:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.28;

contract BallotVoting {
    struct Ballot {
        string name; 
        string[] options; 
        mapping(uint256 => uint256) votes; 
        mapping(address => bool) hasVoted; 
        bool active; 
        uint256 totalVotes; 
    }

    uint256 public ballotCount; 
    mapping(uint256 => Ballot) public ballots; 

    event BallotCreated(uint256 indexed ballotId, string name, string[] options);
    event VoteCast(uint256 indexed ballotId, address indexed voter, uint256 optionIndex);
    event BallotClosed(uint256 indexed ballotId);

    function createBallot(string memory name, string[] memory options) public {
        require(options.length > 1, "Ballot must have at least two options");

        ballotCount++;
        Ballot storage ballot = ballots[ballotCount];
        ballot.name = name;
        ballot.options = options;
        ballot.active = true;

        emit BallotCreated(ballotCount, name, options);
    }

    function vote(uint256 ballotId, uint256 optionIndex) public {
        Ballot storage ballot = ballots[ballotId];
        require(ballot.active, "This ballot is closed");
        require(!ballot.hasVoted[msg.sender], "You have already voted");
        require(optionIndex < ballot.options.length, "Invalid option index");
        ballot.votes[optionIndex]++;
        ballot.hasVoted[msg.sender] = true;
         ballot.totalVotes++;
        emit VoteCast(ballotId, msg.sender, optionIndex);
    }

    function closeBallot(uint256 ballotId) public {
        Ballot storage ballot = ballots[ballotId];
        require(ballot.active, "Ballot is already closed");
        ballot.active = false;

        emit BallotClosed(ballotId);
    }

    function getBallotDetails(uint256 ballotId)
        public
        view
        returns (
            string memory name,
            string[] memory options,
            bool active,
             uint256 totalVotes
        )
    {
        Ballot storage ballot = ballots[ballotId];
        return (ballot.name, ballot.options, ballot.active, ballot.totalVotes);
    }

    function getBallotResults(uint256 ballotId) public view returns (uint256[] memory results) {
        Ballot storage ballot = ballots[ballotId];
        uint256[] memory voteCounts = new uint256[](ballot.options.length);
        for (uint256 i = 0; i < ballot.options.length; i++) {
            voteCounts[i] = ballot.votes[i];
        }

        return voteCounts;
    }
}

Compile the Smart Contract

Compiling the Smart Contract will convert the Solidity code into machine-readable bytecode.

To compile the Smart Contract, run the command:

forge build

It will return the response:

[⠊] Compiling...
[⠢] Compiling 27 files with Solc 0.8.28
[⠆] Solc 0.8.28 finished in 2.22s
Compiler run successful!

You can learn more about parsing arguments using flags by reading the Foundry book.

Deploy Contract.

Deploying Smart Contracts to the Somnia Network is very straightforward. All you need the RPC URL and the Private Key from an Ethereum address which contains some STT tokens to pay for Gas during deployment. You can get some STT Tokens from the Somnia Faucet. Follow this guide to get your Private Key on MetaMask. To deploy the Smart Contract, run this command in the terminal:

forge create --rpc-url 
https://dream-rpc.somnia.network
 --private-key PRIVATE_KEY src/BallotVoting.sol:BallotVoting

You will see a status response:

[⠊] Compiling...
No files changed, compilation skipped
Deployer: 0xb6e4fa6ff2873480590c68D9Aa991e5BB14Dbf03
Deployed to: 0x46639fB6Ce28FceC29993Fc0201Cd5B6fb1b7b16
Transaction hash: 0xb3f8fe0443acae4efdb6d642bbadbb66797ae1dcde2c864d5c00a56302fb9a34

Copy the Transaction hash and paste it into the Somnia Network Explorer. You will find the deployed Smart Contract address. Congratulations. 🎉 You have deployed your “BallotVoting” Smart Contract to the Somnia Network using Foundry. 🎉

NOTE: Contract Verification on SomniaScan is COMING SOON!

The Somnia mission is to enable the building of mass-consumer real-time applications. As a Developer, you must understand the quick steps to deploy your first Smart Contract on the Somnia Network. This guide will teach you how to connect to and deploy your first Smart Contract to the Somia Network using the Remix IDE.

Pre-requisites:

1. This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

2. To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet.

Remix is an IDE for Smart Contract development, which includes compilation, deployment, testing, and debugging. It makes it easy for developers to create, debug, and deploy Smart Contracts to the Somnia Network. In this example, we will deploy a Greeter Smart contract, where we can update the state of the Contract to say “Hello” + Name.

Connect to Somnia Testnet

Ensure you are logged into your MetaMask, connected to the Somnia Testnet, and have some STT Tokens. Get STT Tokens from the faucet.

Create the Smart Contract

Go to the Remix IDE and create a new file. Paste the Smart Contract below:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.22;

contract Greeter {
    string public name;
    address public owner;

    event NameChanged(string oldName, string newName);

    modifier onlyOwner() {
        require(msg.sender == owner, "Only the owner can perform this action");
        _;
    }
    
    constructor(string memory _initialName) {
        name = _initialName;
        owner = msg.sender;
    }


    function changeName(string memory _newName) external onlyOwner {
        string memory oldName = name;
        name = _newName;
        emit NameChanged(oldName, _newName);
    }


    function greet() external view returns (string memory) {
        return string(abi.encodePacked("Hello, ", name, "!"));
    }
}

Compile the Smart Contract

On the left tab, click the “Solidity Compiler” menu item and then the “ Compile Greeter.sol” button. This will compile the Solidity file and convert the Solidity code into machine-readable bytecode.

Deploy the Smart Contract

The Smart Contract has been created and compiled into ByteCode, and the ABI has also been created. The next step is to deploy the Smart Contract to the Somnia DevNet so that you can perform READ and WRITE operations.

On the left tab, click the “Deploy and run transactions” menu item. To deploy the Smart Contract, we will require a wallet connection. In the Environment dropdown, select the option: “Injected Provider - MetaMask”. Then select the MetaMask account where you have STT Tokens.

In the “DEPLOY” field, enter a value for the “_INITIALNAME” variable, and click deploy.

When prompted, approve the Contract deployment on your MetaMask.

Look at the terminal for the response and the deployed Smart Contract address. You can interact with the Smart Contract via the Remix IDE. Send a transaction to change the name.

Congratulations. 🎉 You have deployed your first Smart Contract to the Somnia Network. 🎉

Somnia empowers developers to build applications for mass adoption. Smart Contracts deployed on Somnia will require front-end user interfaces to interact with them. These front-end user interfaces will require middleware libraries to establish a connection to the Somnia Network and enable interaction with Smart Contracts. In this Guide, you will learn how to use the Viem Library to establish a connection between your deployed Smart Contracts on Somnia Network and your Front-end User application. You will also learn how to perform READ and WRITE operations using Viem. Viem is a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum.

How does Viem enable UI interaction?

When a Smart Contract is programmed using any development tool such as RemixIDE, Hardhat or Foundry, the Smart Contract undergoes a “compilation” stage. Compiling a Smart Contract, among other things will convert the Solidity code into machine-readable bytecode. An ABI file is also produced when a Smart Contrac is compiled. ABI stand for Application Binary Interface. You can think of an ABI like the Interface that make it possible for a User Interface to connect with the Smart Contract functions in a way similar to how an API makes it possible to to connect a UI and Backend server in web2.

Example Smart Contract

Here is an example `Greeter.sol` Smart Contract:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.22;

contract Greeter {
    string public name;
    address public owner;

    event NameChanged(string oldName, string newName);

    modifier onlyOwner() {
        require(msg.sender == owner, "Only the owner can perform this action");
        _;
    }

    constructor(string memory _initialName) {
     name = _initialName;
        owner = msg.sender;
    }

    function changeName(string memory _newName) external onlyOwner {
        string memory oldName = name;
        name = _newName;
        emit NameChanged(oldName, _newName);
    }

    function greet() external view returns (string memory) {
        return string(abi.encodePacked("Hello, ", name, "!"));
    }
}

Example ABI

When the Greeter Smart Contract is compiled, below is its ABI:

The ABI is an array of JSON objects containing the constructor, event, and four functions in the Smart Contract. Using a Library such as Viem, you can perform READ and WRITE operations, for each of the ABI objects. You can READ the events, and other “view” only methods. You can perform WRITE operations on the “changeName” function. A cursory look at each ABI method will help you understand the function and what can be accomplished by interacting with the method. For example:

{
"inputs": [  --->specifies it is an input, i.e. a WRITE function
{
"internalType": "string", ---> the data type
"name": "_newName", ---> params name
"type": "string" ---> data type
}
],
"name": "changeName", ---> function name
"outputs": [], ---> it does not have a return property
"stateMutability": "nonpayable", ---> It changes the Blockchain State without Token exchange, it simply stores information.
"type": "function" ---> It is a function.
},

How to use Viem.

To use Viem, it has to be installed in the project directory where you want to perform READ and WRITE operations. First, create a directory and initialize a new project using npm.

mkdir viem-example && cd viem-example

Initialize a project in the directory by running the command:

npm init -y

Install Viem by running the following command.

npm i viem

Set Up Viem

To connect to the deployed Example Greeter Smart Contract using Viem, it is necessary to have access to the Smart Contract’s ABI and its Contract Address. Viem sets up a “transport” infrastructure to connect with a node in the EVM Network and the deployed Smart Contracts. We will use some Viem methods to connect to your Smart Contract deployed on the Somnia Network. Viem has a `createPublicClient` and a `createWalletClient` method. The PublicClient is used to perform READ operations, while the WalletClient is used to perform WRITE operations. Create a new file index.js Import the method classes from the Library:

import { createPublicClient, createWalletClient, http, defineChain } from "viem";

The http is the transport protocol for interacting with the Node of the Somnia Blockchain via RPC. It uses the default Somnia RPC URL: https://dream-rpc.somnia.network. In the future developers can use RPC providers to avoid rate limiting.

To connect to Somnia, we will use the defineChain method. Add the following chain definition variable:

const SOMNIA = defineChain({
  id: 50312,
  name: "Somnia Testnet",
  nativeCurrency: {
    decimals: 18,
    name: "Ether",
    symbol: "STT",
  },
  rpcUrls: {
    default: {
      http: ["https://dream-rpc.somnia.network"],
    },
  },
  blockExplorers: {
    default: { name: "Explorer", url: "http://shannon-explorer.somnia.network/" },
  },
});

Set up PublicClient

We will start with setting up the publicClient to read view only methods. Set up a publicClient where the default Transport is http and chain is SOMNIA network created using the defineChain method.

const publicClient = createPublicClient({ 
  chain: SOMNIA, 
  transport: http(), 
}) 

Consume Actions

Now that you have a Client set up, you can interact with Somnia Blockchain and consume Actions! An example will be to call the greet method on the deployed Smart Contract. To do this, we have to create a file name abi.js and add the exported ABI in the file.

export const ABI = [//...ABI here]

In the index.js we can import the ABI file and start calling methods on the deployed Smart Contract. Import the ABI:

import { ABI } from "./abi.js";

Set Contract Address

const CONTRACT_ADDRESS = "0x2e7f682863a9dcb32dd298ccf8724603728d0edd";

This is an example Greeter Smart Contract deployed on Somnia Testnet

Write a Function `interactWithContract`:

const interactWithContract = async () => {
  try {
    console.log("Reading message from the contract...");


    // Read the "greet" function
    const greeting = await publicClient.readContract({
      address: CONTRACT_ADDRESS,
      abi: ABI,
      functionName: "greet",
    });
    console.log("Current greeting:", greeting);
 } catch (error) {
    console.error("Error interacting with the contract:", error);
  }
};


interactWithContract();

Open your terminal and run the following:

node index.js

You will see the response from the Smart Contract logged into the Console!

Congratulations, you have successfully performed a READ operation on your Smart Contract deployed on Somnia.

Set up Wallet Client

To perform a write operation, we will parse the `createWalletClient` method to a `walletClient` variable. It is important to understand that carrying out WRITE operations changes the state of the Blockchain, unlike READ operations, where you read the state of the Blockchain. So, to perform WRITE operations, a user will have to spend Gas, and to be able to spend Gas, a user will have to parse his Private Key from an EOA to give the Library masked permission to carry out transactions on behalf of the user. To read the Private Key from an EOA, we will use a Viem method:

import { privateKeyToAccount } from "viem/accounts";

Then, create a variable walletClient

const walletClient = createWalletClient({
  account: privateKeyToAccount($YOUR_PRIVATE_KEY),
  chain: SOMNIA,
  transport: http(),
});

The variable `$YOUR_PRIVATE_KEY` variable can be parsed using a dotenv file.

After sending a WRITE operation, we also have to be able to read the transaction to see the state changes. We will rely on a READ method to read a transaction, `waitForTransactionReceipt`. Update the `interactWithContract` function with the code below:

   // Write to the "changeName" function
    const txHash = await walletClient.writeContract({
      address: CONTRACT_ADDRESS,
      abi: ABI,
      functionName: "changeName",
      args: ["Saksham!"],
    });
    console.log("Transaction sent. Hash:", txHash);
    console.log("Waiting for transaction confirmation...");

    // Wait for the transaction to be confirmed
    const receipt = await publicClient.waitForTransactionReceipt({ hash: txHash });
    console.log("Transaction confirmed. Receipt:", receipt);

    // Read the updated "greet" function
    const updatedGreeting = await publicClient.readContract({
      address: CONTRACT_ADDRESS,
      abi: ABI,
      functionName: "greet",
    });
    console.log("Updated greeting:", updatedGreeting);

Save the file and run the node command to see your responses logged into the console.

node index.js

Congratulations, you have successfully performed a WRITE operation on your Smart Contract deployed on Somnia. 🎉

Various developer tools can be used to build on Somnia to enable the Somnia mission of empowering developers to build Mass applications. One such development tool is Hardhat. Hardhat is a development environment for the EVM i.e. Somnia. It consists of different components for editing, compiling, debugging, and deploying your smart contracts and dApps, all working together to create a complete development environment. This guide will teach you how to deploy a “Buy Me Coffee” Smart Contract to the Somia Network using Hardhat Development tools.

Pre-requisites

1. This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

2. To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet.

3. Hardhat is installed and set up on your local machine. See Guide.

Initialise Hardhat Project

Start a new Hardhat project by running the following command in your Terminal:

npx hardhat init

This will give you a series of prompts. Select the option to “Create a TypeScript Project (with Viem)”

This will install the required dependencies for your project. Once the installation is complete, open the project directory and check the directories where you will find the `contracts` directory. This is where the Smart Contract will be added.

Create the Smart Contract

Open the Smart Contracts folder and delete the default Lock.sol file. Create a new file, BuyMeCoffee.sol and paste the following code:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.28;

contract BuyMeCoffee {
    event CoffeeBought(
        address indexed supporter,
        uint256 amount,
        string message,
        uint256 timestamp
    );

    address public owner;

    struct Contribution {
        address supporter;
        uint256 amount;
        string message;
        uint256 timestamp;
    }
    
    Contribution[] public contributions;

    constructor() {
        owner = msg.sender;
    }

    function buyCoffee(string memory message) external payable {
        require(msg.value > 0, "Amount must be greater than zero.");
        contributions.push(
            Contribution(msg.sender, msg.value, message, block.timestamp)
        );

        emit CoffeeBought(msg.sender, msg.value, message, block.timestamp);
    }

    function withdraw() external {
        require(msg.sender == owner, "Only the owner can withdraw funds.");
        payable(owner).transfer(address(this).balance);
    }

    function getContributions() external view returns (Contribution[] memory) {
        return contributions;
    }

    function setOwner(address newOwner) external {
        require(msg.sender == owner, "Only the owner can set a new owner.");
        owner = newOwner;
    }
}

Compile the Smart Contract

To compile your contracts, you need to customize the Solidity compiler options, open the hardhat.config.js file and ensure the Solidity version is 0.8.28 and then run the command:

npx hardhat compile

It will return the response:

Compiling...
Compiled 1 contract successfully

This will compile the Solidity file and convert the Solidity code into machine-readable bytecode. By default, the compiled artifacts will be saved in the newly created artifacts directory. The next step is to deploy the contracts to the Somnia Network. In Hardhat, deployments are defined through Ignition Modules. These modules are abstractions that describe a deployment, specifically, JavaScript functions that process the file you want to deploy. Open the ignition directory inside the project root's directory, then enter the directory named modules. Delete the Lock.ts file. Create a deploy.ts file and paste the following code:

import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";

const BuyMeCoffee = buildModule("BuyMeCoffee", (m) => {
  const contract = m.contract("BuyMeCoffee");
  return { contract };
});

module.exports = BuyMeCoffee;

Deploy Contract

Open the hardhat.config.js file and update the network information by adding Somnia Network to the list of networks. Copy your Wallet Address Private Key from MetaMask, and add it to the accounts section. Ensure there are enough STT Token in the Wallet Address to pay for Gas. You can get some from the Somnia Faucet.

module.exports = {
  // ...
  networks: {
    somnia: {
      url: "https://dream-rpc.somnia.network",
      accounts: ["0xPRIVATE_KEY"], // put dev menomonic or PK here,
    },
   },
  // ...
};

The "0xPRIVATE_KEY" is used to sign the Transaction from your EOA without permission. When deploying the smart contract, you must ensure the EOA that owns the Private Key is funded with enough STT Tokens to pay for gas. Follow this guide to get your Private Key on MetaMask.

Open a new terminal and deploy the smart contract to the Somnia Network. Run the command:

npx hardhat ignition deploy ./ignition/modules/deploy.ts --network somnia

You will see a confirmation message asking if you want to deploy to the Somnia Network. Answer by hitting “y” on your keyboard. This will confirm the deployment of the Smart Contract to the Somnia Network.

Congratulations. 🎉 You have deployed your “BuyMeCoffee” Smart Contract to the Somnia Network using Hardhat. 🎉

The Somnia mission is to enable the development of mass-consumer real-time applications. To achieve this as a developer, you will need to build applications that are Token enabled, as this is a requirement for many Blockchain applications. This guide will teach you how to connect to and deploy your ERC20 Smart Contract to the Somia Network using the Remix IDE.

Pre-requisite

1. This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

2. To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet.

Somnia Network is an EVM-compatible Layer 1 Blockchain. This means that critical implementation on Ethereum is available on Somnia, with higher throughput and faster finality. Smart Contract that follows the ERC-20 standard is an ERC-20 token; these Smart Contracts are often referred to as Token Contracts.

ERC-20 tokens provide functionality to

• Transfer tokens

• Allow others to transfer tokens on behalf of the token holder

It is important to note that ERC20 Smart Contracts are different from the Native Somnia Contracts, which are used to pay gas fees when transacting on Somnia. In the following steps, we will create an ERC20 Token by following the EIP Standard and also demonstrate the option to use a Library to create the ERC20 Token.

IERC-20

According to the EIP Standard, certain Smart Contract methods must be implemented adhering to the standard so that other Smart Contracts can interact with the deployed Smart Contracts and call the method. To achieve this, we will use the Solidity Interface Type to create the Smart Contract standard.

In Solidity, an interface is a special contract that defines a set of function signatures without implementation. It acts as a "blueprint" for other contracts, ensuring they adhere to a specific structure. Interfaces are crucial for creating standards, such as the ERC-20 token standards, allowing different contracts to interact seamlessly within the EVM ecosystem.

Create an Interface for the ERC20 Token. Copy and paste the code below into a file named IERC20.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.22;

interface IERC20 {
    function totalSupply() external view returns (uint256);
    function balanceOf(address account) external view returns (uint256);
    function transfer(address recipient, uint256 amount)
        external
        returns (bool);
    function allowance(address owner, address spender)
        external
        view
        returns (uint256);
    function approve(address spender, uint256 amount) external returns (bool);
    function transferFrom(address sender, address recipient, uint256 amount)
        external
        returns (bool);
}

ERC-20 Token Contract

With the Interface created and all the Token standard methods implemented, the next step is to import the Interface into the ERC20 Smart Contract implementation.

Create a file called ERC20.sol and paste the code below into it.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.22;

import "./IERC20.sol";

contract ERC20 is IERC20 {
    event Transfer(address indexed from, address indexed to, uint256 value);
    event Approval(
        address indexed owner, address indexed spender, uint256 value
    );

    uint256 public totalSupply;
    mapping(address => uint256) public balanceOf;
    mapping(address => mapping(address => uint256)) public allowance;
    string public name;
    string public symbol;
    uint8 public decimals;

    constructor(string memory _name, string memory _symbol, uint8 _decimals) {
        name = _name;
        symbol = _symbol;
        decimals = _decimals;
    }

    function transfer(address recipient, uint256 amount)
        external
        returns (bool)
    {
        balanceOf[msg.sender] -= amount;
        balanceOf[recipient] += amount;
        emit Transfer(msg.sender, recipient, amount);
        return true;
    }

    function approve(address spender, uint256 amount) external returns (bool) {
        allowance[msg.sender][spender] = amount;
        emit Approval(msg.sender, spender, amount);
        return true;
    }

    function transferFrom(address sender, address recipient, uint256 amount)
        external
        returns (bool)
    {
        allowance[sender][msg.sender] -= amount;
        balanceOf[sender] -= amount;
        balanceOf[recipient] += amount;
        emit Transfer(sender, recipient, amount);
        return true;
    }

    function _mint(address to, uint256 amount) internal {
        balanceOf[to] += amount;
        totalSupply += amount;
        emit Transfer(address(0), to, amount);
    }

    function _burn(address from, uint256 amount) internal {
        balanceOf[from] -= amount;
        totalSupply -= amount;
        emit Transfer(from, address(0), amount);
    }

    function mint(address to, uint256 amount) external {
        _mint(to, amount);
    }


    function burn(address from, uint256 amount) external {
        _burn(from, amount);
    }
}

We have implemented the various requirements for the ERC20 Token Standard:

constructor: Initializes the token's basic properties.

Accepts the token's name, symbol, and the number of decimals as parameters and sets these values as the token's immutable metadata.

Example: ERC20("MyToken", "MTK", 18) initializes a token named MyToken with the symbol

MTK and 18 decimal places (the standard for ERC-20).

Functions

transfer: Moves a specified amount of tokens from the sender to a recipient.

It checks if the sender has enough balance and deducts the amount from the sender's balance, and adds it to the recipient's. It also emits a Transfer event to log the transaction and returns `true` if the transfer is successful.

approve: It allows a spender to spend up to a certain amount of tokens on behalf of the owner. It sets the allowance for the spender to the specified amount. The spender is usually another Smart Contract. It then emits an Approval event to record the spender's allowance. It returns true if the approval is successful. A common use case is to enable spending through third-party contracts like decentralized exchanges (DEXs).

transferFrom: It allows a spender to transfer tokens on behalf of another account.

It checks if the sender has an approved allowance for the spender and ensures it is sufficient for the amount and deducts the amount from the allowance and the sender's balance and adds the amount to the recipient's balance. It also emits a Transfer event to log the transaction. It returns `true` if the transfer is successful. A common use case is DEXs or smart contracts to handle token transactions on behalf of users.

_mint: Creates new tokens and adds them to a specified account's balance.

Calling the method increases the recipient's balanceOf by the specified amount. It also increases the totalSupply of the ERC20 Tokens by the same amount. A transfer event with the from address as address(0) (indicating tokens are created).

_burn: Destroys a specified number of tokens from an account's balance.

It reduces the account's balanceOf and decreases the totalSupply by the amount. It emits a Transfer event with the to address as address(0) (indicating tokens are burned).

It is typically implemented in token-burning mechanisms to reduce supply, increasing scarcity.

mint: Public wrapper for _mint. It calls _mint to create new tokens for a specified to address. Allows the contract owner or authorized accounts to mint new tokens.

burn: Public wrapper for _burn. Calls _burn to destroy tokens from a specified from address.

Events

Transfer:

Logs token transfers, including minting and burning events. Parameters: from (sender), to (recipient), value (amount).

Approval:

Logs approvals of allowances for spenders. Parameters: owner, spender, value (allowance amount).

Compile Smart Contract

The ERC20 Token is now ready to be deployed to the Somnia Blockchain.

On the left tab, click the “Solidity Compiler” menu item and then the “ Compile ERC20.sol” button. This will compile the Solidity file and convert the Solidity code into machine-readable bytecode.

Deploy Smart Contract

The Smart Contract has been created and compiled into ByteCode, and the ABI has also been created. The next step is to deploy the Smart Contract to the Somnia DevNet so that you can perform READ and WRITE operations.

On the left tab, click the “Deploy and run transactions” menu item. To deploy the Smart Contract, we will require a wallet connection. In the Environment dropdown, select the option: “Injected Provider - MetaMask”. Then select the MetaMask account where you have STT Tokens.

In the “DEPLOY” field, enter the property values for the ERC20 Token:

• “_NAME” - type string

• “_SYMBOL” - type string

• “_DECIMALS” - type uint8

Click Deploy.

When prompted, approve the Contract deployment on your MetaMask.

Look at the terminal for the response and the deployed Smart Contract address. You can interact with the Smart Contract via the Remix IDE. Send a transaction to change the name.

Congratulations. 🎉 You have deployed an ERC20 Smart Contract to the Somnia Network. 🎉

OpenZeppelin

As was mentioned at the beginning of this Tutorial, there is the option to use a Library to create the ERC20 Token. The OpenZeppelin Smart Contract Library can be used to create an ERC20 Token, and developers can rely on the Smart Contracts wizard to specify particular properties for the created Token. See an example below:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.22;


import "@openzeppelin/contracts@4.0.0/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts@4.0.0/token/ERC20/extensions/ERC20Burnable.sol";
import "@openzeppelin/contracts@4.0.0/access/Ownable.sol";


contract MyToken is ERC20, ERC20Burnable, Ownable {
    constructor(address initialOwner)
        ERC20("MyToken", "MTK")
        Ownable()
    {}


    function mint(address to, uint256 amount) public onlyOwner {
        _mint(to, amount);
    }
}

The process for deploying this Smart Contract implementation built with OpenZeppelin is the same as Steps 3 and 4 above.

This tutorial will guide you through deploying a Smart contract to the Somnia Devnet using Thirdweb’s command-line tool (`thirdweb deploy`). Thirdweb simplifies deployment and interaction with smart contracts on Somnia.

Prerequisites

• This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

• To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet.

• Thirdweb CLI: Install globally with:

Set Up the Project

First, create a new folder for your project and initialize it.

Write the Smart Contract

This is a simple Greeter Smart Contract that any address can call the changeName function. The Smart Contract has two functions: changeName - This function allows anyone to change the name variable. It stores the old name, updates the name variable, and emits the NameChanged event with the old and new names.

greet - This function returns a greeting message that includes the current name. It uses abi.encodePacked to concatenate strings efficiently.

Deploy the Smart Contract using Thirdweb.

First, go to Thirdweb and create a profile. After you have completed the onboarding process, create a Project.

Go to the project settings.

Copy your secret key, and keep it safe. The secret key will be used to deploy the Smart Contract.

Go to the terminal and paste the following command to deploy the Smart Contract:

Select the solc option to be true in the prompts on Terminal.

Click the link to open the User Interface in your Browser to deploy the Smart Contract.

Enter an initialName. Select the Network as Somnia Devnet. Check the option to import it to the list of Contracts in your Thirdweb Dashboard. Click on Deploy Now and approve the Metamask prompts.

Your Smart Contract is deployed, and you can view it on your Thirdweb Dashboard.

Visit the Explorer section to simulate interactions with your deployed Smart Contract and carry out actual transactions.

Congratulations. 🎉 You have deployed your Smart Contract to the Somnia Network using Thirdweb. 🎉

Start a NextJS Project

Run the command below to start a NextJS project:

Select Typescript, TailWind CSS, and Page Router in the build options.

Change the directory into the project folder. Delete the code inside of the <main> tags and replace them with the following:

Install Viem

Import Methods

The next step is to set up the React State methods and the ViemJS methods that we will require:

Declare Somnia Chain

To connect to Somnia, we will use the defineChain method. Add the following chain definition variable:

Declare React States

State allows us to manage changing data in the User Interface. For this example application, we are going to manage two states:

• When we can read the User's Address

• When a User is connected (Authorization)

Add the states inside the export statement:

Now that the States are declared, we can declare a function to handle the MetaMask authentication process on Somnia Network.

Connect MetaMask Function

Add the function below inside the export statement:

Update the UI

MetaMask connection is set up, and the final step is to test the connection via the User Interface. Update the <p>Hello, World!</p> in the return statement to the following:

Open your terminal and run the following command to start the app:

2. To Request for Somnia Testnet Token, Click on Get STT Tokens button.

1. Click on "Get STT"

1. You should have it in your wallet

1. You can Select Somnia Testnet and See your tokens

Try Sending Tokens

1. Click on Send Tokens

1. Send STT tokens to your Desired Wallet address or a random address

1. Check our Activity Section in Metamask

Somnia is a high-performance, cost-efficient EVM-compatible Layer 1 blockchain capable of processing over 1,000,000 transactions per second (TPS) with sub-second finality. It is suitable for serving millions of users and building real-time mass-consumer applications like games, social applications, metaverses, and more, all fully on-chain.

In early MVPs, the Somnia blockchain achieved 1,000,000 TPS running over 100 nodes distributed globally. This TPS was ERC-20 transfers between several hundred thousand accounts. Our next step will be deploying Uniswap, measuring how many swaps per second our chain can do, and simulating a real-world NFT mint similar to the Otherside other deed mint. This actual user workload-style benchmarking is a true way to assess blockchain performance.

Somnia has four key innovations in blockchain architecture to achieve this performance level:

1. Initialize a Next.js project.

3. Add a global NavBar in _app.js so it appears on every page.

You will have a basic skeleton of a DApp, ready for READ/WRITE operations and UI components —topics we’ll cover in the subsequent articles.

Pre-requisites:

1. This guide is not an introduction to JavaScript Programming; you are expected to understand JavaScript.

Create Your Next.js Project

To create a NextJS project, run the command:

Accept the prompts and change directory into the folder after the build is completed.

This gives you a minimal Next.js setup with a pages folder (holding your routes), a public folder (for static assets), and config files.

(Optional) Add Tailwind CSS

If you plan to style your app with Tailwind, install and configure it now:

Then edit your tailwind.config.js:

Finally, include Tailwind in styles/globals.css:

Setting Up a React Context for Global State

• Create a folder and name it contexts at the project root or inside pages directory.

• Inside it, create a file called walletcontext.js add the following code to the file:

We parse three class methods from React: createContext, useContext, anduseState

useWallet() is a custom hook, so any page or component can do:

to access the global wallet state i.e. any of the Wallet.Provider methods

connectToMetaMask() triggers the MetaMask connection flow.

WalletProvider manages State and Methods in the application.

Creating a Global NavBar in _app.js

Next.js automatically uses pages/_app.js to initialize every page. We will wrap the entire app in the WalletProvider inside _app.js and inject a NavBar menu that appears site-wide in the application

Create the _app.js and add the code:

<WalletProvider> wraps the entire <Component /> tree so that every page can share the same wallet state.

<NavBar /> is placed above <main>, so it’s visible on all pages. We give <main> a pt-16 to avoid content hiding behind a fixed navbar.

NavBar

Create a sub directory components and add a file called navbar.js Add the code:

It uses useWallet() to read the global connected and addressstates, and the disconnectWallet function. The truncated address is displayed if a user is logged into the App or “Not connected” otherwise. A Logout button calls disconnectWallet() to reset the global state.

Test Your Setup

Start the dev server:

Open http://localhost:3000 in a Web Browser. You should see your NavBar at the top.

Because we haven’t built any advanced pages yet, you will see a blank home page. The important part is that your WalletContext and global NavBar are in place and ready for the next steps.

5. Next Steps

• Article 2 shows you how to implement READ/WRITE operations (e.g., deposit, create proposals, vote, etc.) across different Next.js pages—using the same WalletContext to handle contract calls.

• Article 3 will focus on UI components, like forms, buttons, and event handling, tying it all together into a polished user interface.

Congratulations! You have a clean foundation, a Next.js project configured with Tailwind, a global context to manage wallet states, and a NavBar appearing across all routes. This sets the stage for adding contract interactions and advanced UI flows in the subsequent articles. Happy building!

Welcome to Partner Tutorials

The Partner Tutorials section provides step-by-step guides on integrating Somnia with leading Web3 tools and services. Across various Infrastructure providers, these tutorials help you leverage partner ecosystems to build scalable and efficient blockchain applications.

Whether deploying dApps, integrating wallets, or optimizing smart contract interactions, these guides will ensure a smooth development experience. Explore the best tools to enhance your build and Build On Somnia!

Prerequisites

Before we begin, ensure you have the following:

1. This guide is not an introduction to JavaScript Programming; you are expected to understand JavaScript.

3. Familiarity with React and Next.js is assumed.

Create the Next.js Project

Open your terminal and run the following commands to set up a new Next.js project:

Install the required Dependencies which are wagmi, viem, @tanstack/react-query, and connectkit. Run the following command:

Configure the Somnia Network

Since wagmi doesn't include the Somnia network by default, we'll define it manually.

Create a new directory named lib in the app directory. Inside this directory, create a file named chains.tsx and add the following code:

Set Up Providers in Next.js

We'll set up several providers to manage the application's state and facilitate interactions with the blockchain.

Create a components directory in the app folder. Inside the components directory, create a file named ClientProvider.tsx with the following content:

In the app directory, locate the layout.tsx file and update it as follows:

Build the Home Page

We'll create a simple home page that allows users to connect their wallets and displays their address upon connection.

In the app directory, locate the page.tsx file and update it as follows:

To run the application, start the Development Server by running the following command:

Open your browser and navigate to http://localhost:3000. You should see the ConnectKit button, allowing users to connect their wallets to the Somnia network.

Conclusion

You've successfully integrated ConnectKit with the Somnia Network in a Next.js application. This setup provides a foundation for building decentralized applications on Somnia, enabling seamless wallet connections and interactions with the Somnia Network.

For further exploration, consider adding features such as interacting with smart contracts, displaying user balances, or implementing transaction functionalities.

This guide focuses exclusively on implementing Write Operations—interacting with your smart contract to perform actions such as depositing funds, creating proposals, voting, and executing proposals for the DAO Smart Contract. By the end of this article, you’ll be able to:

1. Understand the Write Operations necessary for the DAO.

2. Implement these operations within the existing WalletContext.

3. Integrate these operations into your Next.js pages with intuitive UI components.

4. Handle transaction states and provide user feedback.

Prerequisite: Ensure you’ve completed Part 2 of this series, where you set up the WalletContext for global state management and added a global NavBar.

Overview of Write Operations

Write Operations in a DAO involve actions that modify the blockchain state. These include:

• Depositing Funds: Adding 0.001 STT to the DAO to gain voting power.

• Creating Proposals: Submitting new proposals for the DAO to consider.

• Voting on Proposals: Casting votes (Yes/No) on existing proposals.

• Executing Proposals: Finalizing and implementing approved proposals.

These operations require users to sign transactions, incurring gas fees. Proper handling of these interactions is crucial for a smooth user experience.

Expand WalletContext with Write Functions

We’ll enhance the existing WalletContext by adding functions to handle the aforementioned write operations. This centralized approach ensures that all blockchain interactions are managed consistently.

Implement deposit

Allows users to deposit a fixed amount of ETH (e.g., 0.001 ETH) into the DAO contract to gain voting power.

import { parseEther } from "viem";

export function WalletProvider({ children }) {
  // ...existing state and actions
  
  // Deposit Function
  const deposit = async () => {
    if (!client || !address) {
      alert("Please connect your wallet first!");
      return;
    }
    try {
      const tx = await client.writeContract({
        address: "0x7be249A360DB86E2Cf538A6893f37aFd89C70Ab4", // Your DAO contract address
        abi: ABI,
        functionName: "deposit",
        value: parseEther("0.001"), // 0.001 STT
      });
      console.log("Deposit Transaction:", tx);
      alert("Deposit successful! Transaction hash: " + tx.hash);
    } catch (error) {
      console.error("Deposit failed:", error);
      alert("Deposit failed. Check console for details.");
    }
  };
  // ...other functions
  return (
    <WalletContext.Provider
      value={{
        // ...existing values
        deposit,
        // ...other write functions
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}

parseEther("0.001"): Converts 0.001 STT to Wei, the smallest denomination of Ether.

writeContract: Sends a transaction to call the deposit function on the DAO contract, transferring 0.001 STT.

Implement createProposal

Allows users to create a new proposal by submitting a description.

export function WalletProvider({ children }) {
  // ...existing state and actions
  
  // Create Proposal Function
  const createProposal = async (description) => {
    if (!client || !address) {
      alert("Please connect your wallet first!");
      return;
    }
    try {
      const tx = await client.writeContract({
        address: "0x7be249A360DB86E2Cf538A6893f37aFd89C70Ab4", // Your DAO contract address
        abi: ABI,
        functionName: "createProposal",
        args: [description],
      });
      console.log("Create Proposal Transaction:", tx);
      alert("Proposal created! Transaction hash: " + tx.hash);
    } catch (error) {
      console.error("Create Proposal failed:", error);
      alert("Failed to create proposal. Check console for details.");
    }
  };
  // ...other functions
  return (
    <WalletContext.Provider
      value={{
        // ...existing values
        createProposal,
        // ...other write functions
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}

createProposal(description): Takes a proposal description as an argument and sends a transaction to the DAO contract to create the proposal.

Implement voteOnProposal

Allows users to vote on a specific proposal by its ID, supporting either a Yes or No vote.

export function WalletProvider({ children }) {
// ...existing state and actions
  // Vote on Proposal Function
  const voteOnProposal = async (proposalId, support) => {
    if (!client || !address) {
      alert("Please connect your wallet first!");
      return;
    }
    try {
      const tx = await client.writeContract({
        address: "0x7be249A360DB86E2Cf538A6893f37aFd89C70Ab4", // Your DAO contract address
        abi: ABI,
        functionName: "vote",
        args: [parseInt(proposalId), support],
      });
      console.log("Vote Transaction:", tx);
      alert(`Voted ${support ? "YES" : "NO"} on proposal #${proposalId}! Transaction hash: ${tx.hash}`);
    } catch (error) {
      console.error("Vote failed:", error);
      alert("Voting failed. Check console for details.");
    }
  };
  // ...other functions
  return (
    <WalletContext.Provider
      value={{
        // ...existing values
        voteOnProposal,
        // ...other write functions
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}

voteOnProposal(proposalId, support): Takes a proposal ID and a boolean indicating support (true for Yes, false for No). Sends a transaction to cast the vote.

Implement executeProposal

Allows users to execute a proposal if it meets the necessary conditions (e.g., quorum reached).

export function WalletProvider({ children }) {
  // ...existing state and actions
  // Execute Proposal Function
  const executeProposal = async (proposalId) => {
    if (!client || !address) {
      alert("Please connect your wallet first!");
      return;
    }
    try {
      const tx = await client.writeContract({
        address: "0x7be249A360DB86E2Cf538A6893f37aFd89C70Ab4", // Your DAO contract address
        abi: ABI,
        functionName: "executeProposal",
        args: [parseInt(proposalId)],
      });
      console.log("Execute Proposal Transaction:", tx);
      alert(`Proposal #${proposalId} executed! Transaction hash: ${tx.hash}`);
    } catch (error) {
      console.error("Execute Proposal failed:", error);
      alert("Execution failed. Check console for details.");
    }
  };
  // ...other functions
  return (
    <WalletContext.Provider
      value={{
        // ...existing values
        executeProposal,
        // ...other write functions
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}

executeProposal(proposalId): Takes a proposal ID and sends a transaction to execute the proposal.

Integrate Write Operations

With the write functions added to WalletContext, the next step is to integrate these operations into your Next.js pages, providing users with interactive UI components to perform actions.

Create-Proposal Page

Allow users to submit new proposals by entering a description.

import { useState } from "react";
import { useRouter } from "next/router";
import { useWallet } from "../contexts/walletContext";
import { Label, TextInput, Button, Alert } from "flowbite-react";

export default function CreateProposalPage() {
  const [description, setDescription] = useState("");
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState("");
  const [error, setError] = useState("");
  
  const { connected, createProposal } = useWallet();
  const router = useRouter();

const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setSuccess("");
    if (!connected) {
      setError("You must connect your wallet first!");
      return;
    }
    if (!description.trim()) {
      setError("Proposal description cannot be empty!");
      return;
    }
    setLoading(true);
    try {
      await createProposal(description.trim());
      setSuccess("Proposal created successfully!");
      setDescription("");
      // Optionally redirect to home or another page
      // router.push("/");
    } catch (err) {
      console.error("Error creating proposal:", err);
      setError("Failed to create proposal. Check console for details.");
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <div className="max-w-2xl mx-auto mt-20 p-4">
      <h1 className="text-2xl font-bold mb-4">Create Proposal</h1>
      
      {error && (
        <Alert color="failure" className="mb-4">
          <span>
            <span className="font-medium">Error!</span> {error}
          </span>
        </Alert>
      )}
      
      {success && (
        <Alert color="success" className="mb-4">
          <span>
            <span className="font-medium">Success!</span> {success}
          </span>
        </Alert>
      )}
      
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <Label htmlFor="proposal-description" value="Proposal Description" />
          <TextInput
            id="proposal-description"
            type="text"
            placeholder="Enter proposal description..."
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            required
          />
        </div>
        <Button type="submit" color="purple" disabled={loading}>
          {loading ? "Submitting..." : "Submit Proposal"}
        </Button>
      </form>
    </div>
  );
}

State Variables:

• description: Stores the user's input for the proposal description.

• loading: Indicates whether the submission is in progress.

• success & error: Handle user feedback messages.

The handleSubmit function undergoes validation, ensuring that the user is connected and has entered a description. It then calls the createProposal from WalletContext. It displays success or error messages based on the outcome.

The return statement contains the UI Components:

• Label & TextInput: For user input.

• Button: Triggers the submission. Disabled and shows a loading state when processing.

• Alert: Provides visual feedback for success and error messages.

Fetch-Proposal Page: Vote and Execution

Allow users to fetch proposal details, vote on them, and execute if eligible.

import { useState } from "react";
import { useWallet } from "../contexts/walletContext";
import { Button, Card, Label, TextInput, Spinner, Alert } from "flowbite-react";

export default function FetchProposalPage() {
  const [proposalId, setProposalId] = useState("");
  const [proposalData, setProposalData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [voting, setVoting] = useState(false);
  const [executing, setExecuting] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  
  const { connected, fetchProposal, voteOnProposal, executeProposal } = useWallet();
  
  const handleFetch = async (e) => {
    e.preventDefault();
    setError("");
    setSuccess("");
    setProposalData(null);
    if (!connected) {
      setError("You must connect your wallet first!");
      return;
    }
    if (!proposalId.trim()) {
      setError("Please enter a proposal ID.");
      return;
    }
    setLoading(true);
    try {
      const data = await fetchProposal(proposalId);
      setProposalData(data);
    } catch (err) {
      console.error("Error fetching proposal:", err);
      setError("Failed to fetch proposal. Check console for details.");
    } finally {
      setLoading(false);
    }
  };
  const handleVote = async (support) => {
    setError("");
    setSuccess("");
    setVoting(true);
    try {
      await voteOnProposal(proposalId, support);
      setSuccess(`Successfully voted ${support ? "YES" : "NO"} on proposal #${proposalId}.`);
      // Optionally, refresh the proposal data
      const updatedData = await fetchProposal(proposalId);
      setProposalData(updatedData);
    } catch (err) {
      console.error("Error voting:", err);
      setError("Voting failed. Check console for details.");
    } finally {
      setVoting(false);
    }
  };
  const handleExecute = async () => {
    setError("");
    setSuccess("");
    setExecuting(true);
    try {
      await executeProposal(proposalId);
      setSuccess(`Proposal #${proposalId} executed successfully.`);
      // Optionally, refresh the proposal data
      const updatedData = await fetchProposal(proposalId);
      setProposalData(updatedData);
    } catch (err) {
      console.error("Error executing proposal:", err);
      setError("Execution failed. Check console for details.");
    } finally {
      setExecuting(false);
    }
  };
  return (
    <div className="max-w-2xl mx-auto mt-20 p-4">
      <h1 className="text-2xl font-bold mb-4">Fetch a Proposal</h1>
      {/* Form to input Proposal ID */}
      <form onSubmit={handleFetch} className="space-y-4">
        <div>
          <Label htmlFor="proposal-id" value="Proposal ID" />
          <TextInput
            id="proposal-id"
            type="number"
            placeholder="Enter proposal ID"
            value={proposalId}
            onChange={(e) => setProposalId(e.target.value)}
            required
          />
        </div>
        <Button type="submit" color="blue" disabled={loading}>
          {loading ? <Spinner aria-label="Loading" /> : "Fetch Proposal"}
        </Button>
      </form>
      {/* Display Errors */}
      {error && (
        <Alert color="failure" className="mt-4">
          <span>
            <span className="font-medium">Error!</span> {error}
          </span>
        </Alert>
      )}
      {/* Display Success Messages */}
      {success && (
        <Alert color="success" className="mt-4">
          <span>
            <span className="font-medium">Success!</span> {success}
          </span>
        </Alert>
      )}
      {/* Display Proposal Details */}
      {proposalData && (
        <Card className="mt-8">
          <h2 className="text-xl font-bold mb-2">Proposal #{proposalId}</h2>
          <ul className="list-disc list-inside space-y-1">
            <li>
              <strong>Description:</strong> {proposalData[0]}
            </li>
            <li>
              <strong>Deadline:</strong> {new Date(proposalData[1] * 1000).toLocaleString()}
            </li>
            <li>
              <strong>Yes Votes:</strong> {proposalData[2].toString()}
            </li>
            <li>
              <strong>No Votes:</strong> {proposalData[3].toString()}
            </li>
            <li>
              <strong>Executed:</strong> {proposalData[4] ? "Yes" : "No"}
            </li>
            <li>
              <strong>Proposer:</strong> {proposalData[5]}
            </li>
          </ul>
          {/* Voting Buttons */}
          <div className="mt-4 flex space-x-4">
            <Button
              color="green"
              onClick={() => handleVote(true)}
              disabled={voting || executing}
            >
              {voting ? <Spinner aria-label="Loading" size="sm" /> : "Vote YES"}
            </Button>
            <Button
              color="red"
              onClick={() => handleVote(false)}
              disabled={voting || executing}
            >
              {voting ? <Spinner aria-label="Loading" size="sm" /> : "Vote NO"}
            </Button>
          </div>
          {/* Execute Button */}
          {!proposalData[4] && (
            <div className="mt-4">
              <Button
                color="purple"
                onClick={handleExecute}
                disabled={executing || voting}
              >
                {executing ? <Spinner aria-label="Loading" size="sm" /> : "Execute Proposal"}
              </Button>
            </div>
          )}
        </Card>
      )}
    </div>
  );
}

State Variables:

• proposalId: User input for the proposal ID.

• proposalData: Stores fetched proposal details.

• loading, voting, executing: Manage the loading states for different operations.

• error & success: Handle feedback messages.

The handleFetch function ensures the user is connected and has entered a valid proposal ID. It calls fetchProposal to retrieve proposal details, and displays error messages if fetching fails.

The handleVote function has the parameters for indicating the Voter support (true for Yes, false for No). The function processes Vote, by calling voteOnProposal with the provided proposalId and supportparameter. It returns success or error messages based on the outcome. It re-fetches the proposal to reflect updated vote counts.

The handleExecute function processes execution by calling executeProposal with the provided proposalId. It returns success or error messages based on the outcome, and re-fetches the proposal to reflect execution status.

The return statement contains the UI Components:

• Label & TextInput: For inputting the proposal ID.

• Button: Triggers fetching, voting, and executing actions. Disabled and shows a spinner during processing.

• Alert: Provides visual feedback for success and error messages.

• Card: Displays the fetched proposal details in a structured format.

• Voting & Execution Buttons: Allow users to interact with the proposal directly from the details view.

Transaction States and User Feedback

Clear feedback during and after transactions enhances user experience and trust in your dApp. Consider using libraries like react-toastify for non-intrusive notifications. Example with Toast Notifications:

Install react-toastify

npm install react-toastify

Inside the _app.js

import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from 'react-toastify';
function MyApp({ Component, pageProps }) {
  return (
    <WalletProvider>
      <NavBar />
      <main className="pt-16">
        <Component {...pageProps} />
        <ToastContainer />
      </main>
    </WalletProvider>
  );
}
export default MyApp;

In your WalletContext or Pages

import { toast } from 'react-toastify';
// Replace alert with toast
toast.success("Deposit successful! Transaction hash: " + tx.hash);
toast.error("Deposit failed. Check console for details.");

The benefits of React Toastify are that it is non-intrusive and modal alerts don't block users. It is also customizable, which allows developers to style and position as needed.

Test Write Operations

Thorough testing ensures the reliability and trustworthiness of your dApp. Here's how to effectively test your write operations:

Connect to a Test Network

Run your application using the command:

npm run dev

Your application will be running on localhost:3000 in your web browser.

Obtain STT from the Faucet.

Perform Write Operations

Deposit Funds:

• Navigate to the Home page.

• Click the Deposit button.

• Confirm the transaction in MetaMask.

• Verify that the deposit is reflected in the contract's state.

Create a Proposal:

• Go to the Create Proposal page.

• Enter a proposal description and submit.

• Confirm the transaction in MetaMask.

• Check that the proposal count increments and the new proposal is retrievable.

Vote on a Proposal:

• Access the Fetch-Proposal page.

• Enter a valid proposal ID and fetch details.

• Click Vote YES or Vote NO.

• Confirm the transaction in MetaMask.

• Verify that vote counts update accordingly.

Execute a Proposal:

• After a proposal meets the execution deadline, execute it.

• Confirm the transaction in MetaMask.

• Ensure that the proposal's execution status is updated.

• Monitor the browser console for any errors or logs that aid in debugging.

Conclusion and Next Steps

In Part 3, you successfully implemented Write Operations in your DAO front end:

• deposit: Allowed users to deposit ETH into the DAO.

• createProposal: Enabled users to submit new proposals.

• voteOnProposal: Provided functionality to cast votes on proposals.

• executeProposal: Facilitated the execution of approved proposals.

Congratulations! Using Next.js and React Context, you’ve built a fully functional set of Write Operations for your DAO’s front end. This foundation empowers users to interact with your DAO seamlessly, fostering a decentralized, community-driven governance model.

Continue refining and expanding your dApp to cater to your community’s evolving needs.

Palmera DAO

Palmera is a multi-safe and multi-chain treasury management platform designed to simplify on-chain financial operations. It offers a unified dashboard for managing multiple Safes across various supported chains, enhancing financial transparency and control for DAOs and organizations.

Resources

• Documentation

To enable mass consumer real-time applications to be built at web2 scale with web3 properties, creating a more open, equitable internet.

Key Objectives

• Applications that can scale to web2 usage levels (millions of CCU, 100,000’s of transactions per second)

• Open censorship-resistant systems accessible to anyone with access to the internet

• No one counterparty controlling and hoarding value

• Composable systems where value is shared among the participants

• Free movement of people and assets between platforms so creators and users have freedom of choice

A more open and equitable world.

Core Principles

On-Chain Experiences

We are committed to building technology to make fully on-chain, real-time mass-scale applications possible and practical. We believe this is essential for creating a composable, open internet.

Multiverse over Monolith

We believe in a collection of applications, each with distinct, interconnected experiences, much like countries within a global community, sharing utilities that enhance mutual growth.

Empowering Composability

Central to our vision is the principle of composability—the ability for builders to build upon each other’s work, creating a culture of collaboration in which the collective output surpasses the sum of its parts.

Builder Empowerment

We will empower builders with the freedom to build sustainable models of engagement and ownership. This includes safeguarding the rights to digital assets and creating an environment where innovation is not stifled by platform constraints.

Accessibility for All

The promise of the virtual society is in its potential for universal access, removing barriers for content creation and participation. Leveling the playing field such that anyone with an internet connection can participate and succeed.

Sequence

Sequence is a smart contract wallet & account abstraction provider that enables gasless transactions and seamless user onboarding to dApps.

Resources

• Documentation

Thirdweb

Thirdweb simplifies smart contract deployment, account abstraction, and Web3 development on Somnia. It offers gasless transactions, token management, and SDKs for seamless dApp building.

Resources

• Thirdweb Somnia Docs

• Deploy Smart Contracts on Somnia

• Account Abstraction with Somnia

Decentralized Autonomous Organizations (DAOs) are an innovative way to organize communities where decisions are made collectively without centralized authority. In this tutorial, we’ll explore a simple DAO implemented in Solidity. By the end, you’ll understand how to deploy and interact with this contract.

Example Use Case: DAO Implementation in Gaming

DAOs can be particularly impactful in gaming environments. Imagine a massive multiplayer online game (MMO) with a shared in-game economy. A DAO can be used to manage a treasury funded by player contributions, allowing players to propose and vote on game updates, community events, or rewards.

For example:

1. In-Game Treasury Management: Players deposit some of their in-game earnings into a DAO treasury. Proposals for using these funds—such as hosting tournaments or funding new content—are created and voted on.

2. Player-Driven Governance: Gamers vote on new features like maps, characters, or weapons, giving them a direct say in the game's evolution.

3. Community Rewards: DAOs could allocate funds to reward top-performing players or teams, enhancing engagement and competition.

This decentralized approach ensures that game updates align with player interests, creating a more engaging and community-driven gaming experience.

Prerequisites

Before starting, ensure you have:

1. This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

2. To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet.

3. You can deploy the Smart Contracts using our Hardhat or Foundry guides.

Overview of the DAO Contract

The provided DAO contract allows users to:

1. Deposit funds to gain voting power.

2. Create proposals.

3. Vote on proposals.

4. Execute proposals if they pass.

The key features of the contract include:

• Proposal Struct: Stores details of proposals.

• Voting Mechanism: Allows weighted voting based on deposited funds.

• Execution Logic: Ensures proposals are executed only if approved.

Setting Up the Development Environment

Follow the Hardhat or Foundry guides.

Create the Smart Contract

Create a new file named DAO.sol in the contracts folder and copy the provided contract code.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.28;

contract DAO {
    struct Proposal {
        string description; // Proposal details
        uint256 deadline;   // Voting deadline
        uint256 yesVotes;   // Votes in favor
        uint256 noVotes;    // Votes against
        bool executed;      // Whether the proposal has been executed
        address proposer;   // Address of the proposer
    }

    mapping(uint256 => Proposal) public proposals;
    mapping(address => uint256) public votingPower;
    mapping(uint256 => mapping(address => bool)) public hasVoted;

    uint256 public totalProposals;
    uint256 public votingDuration = 10 minutes;
    address public owner;

    modifier onlyOwner() {
        require(msg.sender == owner, "Not the owner");
        _;
    }

    constructor() {
        owner = msg.sender;
    }

    function deposit() external payable {
        require(msg.value == 0.001 ether, "Must deposit STT");
        votingPower[msg.sender] += msg.value;
    }

    function createProposal(string calldata description) external {
        require(votingPower[msg.sender] > 0, "No voting power");

        proposals[totalProposals] = Proposal({
            description: description,
            deadline: block.timestamp + votingDuration,
            yesVotes: 0,
            noVotes: 0,
            executed: false,
            proposer: msg.sender
        });

        totalProposals++;
    }

    function vote(uint256 proposalId, bool support) external {
        Proposal storage proposal = proposals[proposalId];

        require(block.timestamp < proposal.deadline, "Voting has ended");
        require(!hasVoted[proposalId][msg.sender], "Already voted");
        require(votingPower[msg.sender] > 0, "No voting power");

        hasVoted[proposalId][msg.sender] = true;

        if (support) {
            proposal.yesVotes += votingPower[msg.sender];
        } else {
            proposal.noVotes += votingPower[msg.sender];
        }
    }

    function executeProposal(uint256 proposalId) external {
        Proposal storage proposal = proposals[proposalId];

        require(block.timestamp >= proposal.deadline, "Voting still active");
        require(!proposal.executed, "Proposal already executed");
        require(proposal.yesVotes > proposal.noVotes, "Proposal did not pass");

        proposal.executed = true;

        // Logic for proposal execution
        // Example: transfer STT to proposer as a reward for successful vote pass
        payable(proposal.proposer).transfer(0.001 ether);
    }
}

Let’s break down the contract into its main components:

Mappings

Mappings are used to store structured data efficiently:

1. proposals

mapping(uint256 => Proposal) public proposals;

• Stores all proposals created in the DAO.

• It represents the Proposal struct containing details like description, deadline, votes, and proposer.

struct Proposal {
        string description; // Proposal details
        uint256 deadline;   // Voting deadline
        uint256 yesVotes;   // Votes in favor
        uint256 noVotes;    // Votes against
        bool executed;      // Whether the proposal has been executed
        address proposer;   // Address of the proposer
    }

1. votingPower

mapping(address => uint256) public votingPower;

• Tracks the voting power of each address.

• Voting power increases when users deposit funds into the DAO.

1. hasVoted

mapping(uint256 => mapping(address => bool)) public hasVoted;

• Tracks whether a specific address has voted on a specific proposal.

• Prevents double voting.

Functions

The contract includes several key functions:

1. Constructor

constructor() {
    owner = msg.sender;
}

• Sets the deployer as the owner of the contract.

1. deposit

function deposit() external payable {
    require(msg.value >= 0.001 ether, "Minimum deposit is 0.001 STT");
    votingPower[msg.sender] += msg.value;
}

• Allows users to deposit STT Tokens to gain voting power.

• Increases their votingPower by the amount deposited.

1. createProposal

function createProposal(string calldata description) external {
    require(votingPower[msg.sender] > 0, "No voting power");
    proposals[totalProposals] = Proposal({
        description: description,
        deadline: block.timestamp + votingDuration,
        yesVotes: 0,
        noVotes: 0,
        executed: false,
        proposer: msg.sender
    });
    totalProposals++;
}    

• Allows users with voting power to create new proposals.

• Adds the proposal to the proposals mapping.

1. vote

function vote(uint256 proposalId, bool support) external {
    Proposal storage proposal = proposals[proposalId];


    require(block.timestamp < proposal.deadline, "Voting has ended");
    require(!hasVoted[proposalId][msg.sender], "Already voted");
    require(votingPower[msg.sender] > 0, "No voting power");


    hasVoted[proposalId][msg.sender] = true;


    if (support) {
        proposal.yesVotes += votingPower[msg.sender];
    } else {
        proposal.noVotes += votingPower[msg.sender];
    }
}

• Allows users to cast a vote on a proposal.

• Updates the yesVotes or noVotes in the Proposal struct based on the user's choice.

• Prevents double voting by using the hasVoted mapping.

1. executeProposal

function executeProposal(uint256 proposalId) external {
    Proposal storage proposal = proposals[proposalId];

    require(block.timestamp >= proposal.deadline, "Voting still active");
    require(!proposal.executed, "Proposal already executed");
    require(proposal.yesVotes > proposal.noVotes, "Proposal did not pass");
    
    proposal.executed = true;
    payable(proposal.proposer).transfer(0.001 ether);
}

• Executes a proposal if it passes (more yes votes than no votes).

• Transfers a fixed amount of ETH to the proposer as an example of execution logic.

• Ensures proposals cannot be executed multiple times.

Key Variables

1. totalProposals

uint256 public totalProposals;

• Tracks the total number of proposals created.

1. votingDuration

uint256 public votingDuration = 10 minutes;

• Sets the default duration for voting on proposals.

1. owner

address public owner;

• Stores the address of the contract owner.

• Used for functions that require administrative control.

Understanding these components shows how the DAO enables decentralized governance while maintaining transparency and fairness.

Deploy the Smart Contract to Somnia

Follow the Hardhat or Foundry guides. First, compile the Smart Contract to Bytecode by running the Hardhat or Foundry compile instructions.

This is an example deployment script using Hardhat. Create a file in the /ignition/module folder and name it deploy.js

import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";

const dao = buildModule("DAO", (m) => {
  const contract = m.contract("DAO");
  return { contract };
});

module.exports = dao;

Before running the deploy command, add Somnia Network to the hardhat.config.js file:

const config = {
  solidity: "0.8.28",
  networks: {
    somnia: {
      url: "https://dream-rpc.somnia.network",
      accounts: ["YOUR_PRIVATE_KEY"],
    },
  },
};

Ensure that the deploying address has enough STT Tokens. You can get STT Tokens from the Faucet.

Run the deployment script:

npx hardhat ignition deploy ./ignition/modules/deploy.ts --network somnia

Interacting with the Contract

Use the Hardhat console or scripts to interact with the contract.

1. Deposit Funds

Call the deposit function to gain voting power:

await dao.deposit({ value: ethers.utils.parseEther("0.001") });

2. Create a Proposal

Create a new proposal by calling createProposal:

await dao.createProposal("Fund development of new feature");

3. Vote on a Proposal

Vote on a proposal by specifying its ID and your support (true for yes, false for no):

await dao.vote(0, true); // Vote ‘yes’ on proposal 0

4. Execute a Proposal

After the voting deadline, execute the proposal if it has majority votes:

await dao.executeProposal(0);

Testing the Contract

Writing Tests

Create a test file DAO.test.js in the test folder.

const { expect } = require("chai");
const { ethers } = require("hardhat");


describe("DAO", function () {
  let dao;
  let owner, addr1;


  beforeEach(async function () {
    const DAO = await ethers.getContractFactory("DAO");
    dao = await DAO.deploy();
    [owner, addr1] = await ethers.getSigners();
  });


  it("Should allow deposits and update voting power", async function () {
    await dao.connect(addr1).deposit({ value: ethers.utils.parseEther("0.001") });
    expect(await dao.votingPower(addr1.address)).to.equal(ethers.utils.parseEther("0.001"));
  });


  it("Should allow proposal creation", async function () {
    await dao.connect(addr1).deposit({ value: ethers.utils.parseEther("0.001") });
    await dao.connect(addr1).createProposal("Test Proposal");
    const proposal = await dao.proposals(0);
    expect(proposal.description).to.equal("Test Proposal");
  });
});

Run the tests:

npx hardhat test

Enhance the DAO

You can expand this DAO contract by:

1. Adding Governance Tokens: Reward participants with tokens for voting or executing proposals. Follow the ERC20 Token Guide here.

2. Implementing Quorums: Require a minimum number of votes for proposals to pass.

3. Flexible Voting Power: Allow dynamic voting power allocation.

Conclusion

This tutorial provided a foundational understanding of building and deploying a simple DAO on Somnia. Experiment with enhancements to create more complex governance structures. DAOs are a powerful tool for decentralized decision-making, and the possibilities for innovation are limitless!

The Somnia mission is to enable the development of mass-consumer real-time applications. The Somnia Network allows developers to build a unique experience by implementing Smart Contract Wallets with gasless transactions via Account Abstraction (ERC-4337). In this tutorial, we'll use the Thirdweb React SDK to:

• Connect Smart Wallets (Account Abstraction)

• Read Wallet Balance

• Send STT Tokens

Pre-requisites

Before we start, ensure you have:

• Basic knowledge of React

• A Thirdweb account & Client ID

• Node.js & npm installed

Install Dependencies

Run the following command to set up your project:

npx create-next-app@latest somnia-thirdweb
cd somnia-thirdweb
npm install thirdweb ethers dotenv

This installs:

thirdweb → The Thirdweb React SDK.

ethers → To interact with blockchain transactions.

dotenv → To securely store API keys.

Define the Somnia Network

Since Somnia is not preconfigured in Thirdweb, we manually define the network. Create a chain.ts file and add the following:

import { defineChain } from "thirdweb";

export const somniaTestnet = defineChain({
  id: 50312, 
  name: "Somnia Testnet",
  nativeCurrency: {
    decimals: 18,
    name: "Somnia Token",
    symbol: "STT",
  },
  rpcUrls: {
    default: {
      http: ["https://dream-rpc.somnia.network/"],
    },
  },
  blockExplorers: {
    default: { name: "Somnia Explorer", url: "https://somnia-testnet.socialscan.io" },
  },
});

Create the Thirdweb Client

The Thirdweb client allows the app to communicate with the blockchain. Create a client.ts file and add:

import { createThirdwebClient } from "thirdweb";
export const client = createThirdwebClient({
  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID as string, // Replace with your actual Client ID
});

Add Environment Variables

Store API keys in a .env.local file:

NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your-client-id-here
NEXT_PUBLIC_SOMNIA_RPC_URL=https://dream-rpc.somnia.network/

Restart Next.js after modifying .env.local

Build the Account Abstraction App

To ensure Thirdweb Components are available throughout the app, wrap the children's components inside ThirdwebProvider. Modify layout.ts:

import { ThirdwebProvider } from 'thirdweb/react';

<body>
    <ThirdwebProvider>
        {children}
    </ThirdwebProvider>
 </body>

Create & Connect Smart Contract Wallet

The useActiveAccount hook allows us to detect the connected Smart Wallet Account. We use ConnectButton to handle authentication and connection to the blockchain.

import { useActiveAccount } from "thirdweb/react";

const smartAccount = useActiveAccount();

<ConnectButton
  client={client}
  appMetadata={{
    name: "Example App",
    url: "https://example.com",
  }}
/>

This button will connect the user's Smart Contract Wallet and authenticate the user with Thirdweb. After connection, it will also display the wallet address.

To show the connected address, we add the following UI component:

{smartAccount ? (
  <div className="mt-6 p-4 bg-white rounded-lg shadow">
    <p className="text-lg font-semibold text-gray-700">
      Connected as: {smartAccount.address}
    </p>
    {message && <p className="mt-2 text-green-600">{message}</p>}
  </div>
) : (
  <p className="text-lg text-red-600 text-center">
    Please connect your wallet.
  </p>
)}

Token Transfer

The useSendTransaction hook is used to send STT tokens to another address. The function sendTokens will check that the Smart Account is connected and then send 0.01 STT tokens to a recipient address. First, copy your Smart Wallet Address and request for Tokens on Discord in the dev-chat, you can also Transfer some from your EOA.

Log transaction success or failure messages to the console.

import { useSendTransaction } from "thirdweb/react";
import { ethers } from "ethers";

const { mutate: sendTransaction, isPending } = useSendTransaction();

const sendTokens = async () => {
  if (!smartAccount) {
    setMessage("No smart account connected.");
    return;
  }
  console.log("Sending 0.01 STT from:", smartAccount.address);
  sendTransaction(
    {
      to: "0xb6e4fa6ff2873480590c68D9Aa991e5BB14Dbf03",
      value: ethers.parseUnits("0.01", 18),
      chain: somniaTestnet,
      client,
    },
    {
      onSuccess: (receipt) => {
        console.log("Transaction Success:", receipt);
        setMessage(`Sent 0.01 STT! TX: ${receipt.transactionHash}`);
      },
      onError: (error) => {
        console.error("Transaction Failed:", error);
        setMessage("Transaction failed! Check console.");
      },
    }
  );
};

Button Integration

The button UI provides a clear interaction for sending STT tokens. The button shows a loading state (Sending...) when the transaction is pending and displays a success or failure message once the transaction is complete.

const [message, setMessage] = useState<string>('');

<button
  onClick={sendTokens}
  disabled={isPending}
  className={`mt-4 px-6 py-2 rounded-lg ${
    isPending ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700 text-white'
  }`}
>
  {isPending ? 'Sending...' : 'Send 0.01 STT'}
</button>
{message && <p className='mt-2 text-green-600'>{message}</p>}

'use client';

import { useState } from 'react';
import {
  ConnectButton,
  useActiveAccount,
  useSendTransaction,
} from 'thirdweb/react';
import { ethers } from 'ethers';
import { client } from './client';
import { somniaTestnet } from './chain';

export default function Home() {
  const [message, setMessage] = useState<string>('');
  const smartAccount = useActiveAccount(); // Get connected account
  const { mutate: sendTransaction, isPending } = useSendTransaction();

  const sendTokens = async () => {
    if (!smartAccount) {
      setMessage('No smart account connected.');
      return;
    }

    console.log('🚀 Sending 0.01 STT from:', smartAccount.address);

    sendTransaction(
      {
        to: '0xb6e4fa6ff2873480590c68D9Aa991e5BB14Dbf03', // Replace
        value: ethers.parseUnits('0.01', 18),
        chain: somniaTestnet,
        client,
      },
      {
        onSuccess: (receipt) => {
          console.log('Transaction Success:', receipt);
          setMessage(`Sent 0.01 STT! TX: ${receipt.transactionHash}`);
        },
        onError: (error) => {
          console.error('Transaction Failed:', error);
          setMessage('Transaction failed! Check console.');
        },
      }
    );
  };

  return (
    <main className='p-4 pb-10 min-h-[100vh] flex items-center justify-center container max-w-screen-lg mx-auto'>
      <div className='py-20'>
        <div className='flex justify-center mb-10'>
          <ConnectButton
            client={client}
            appMetadata={{
              name: 'Example App',
              url: 'https://example.com',
            }}
          />
        </div>

        {smartAccount ? (
          <div className='mt-6 p-4 bg-white rounded-lg shadow'>
            <p className='text-lg font-semibold text-gray-700'>
              Connected as: {smartAccount.address}
            </p>
            <button
              onClick={sendTokens}
              disabled={isPending}
              className={`mt-4 px-6 py-2 rounded-lg ${
                isPending
                  ? 'bg-gray-400 cursor-not-allowed'
                  : 'bg-blue-600 hover:bg-blue-700 text-white'
              }`}
            >
              {isPending ? 'Sending...' : 'Send 0.01 STT'}
            </button>
            {message && <p className='mt-2 text-green-600'>{message}</p>}
          </div>
        ) : (
          <p className='text-lg text-white-600 text-center'>
            Please connect your wallet.
          </p>
        )}
      </div>
    </main>
  );
}

The full implementation includes wallet connection, balance retrieval, and token transfer.

Conclusion

Congratulations! 🎉 You have successfully connected a smart contract wallet using Thirdweb. Read wallet balances and Transferred STT tokens on Somnia Testnet. You can explore additional features such as gasless transactions, NFT integration, and DeFi applications.

Somnia is built with a robust ecosystem of infrastructure providers that enable developers, projects, and businesses to integrate seamlessly with the network.

With Somnia's ecosystem of infrastructure partners, developers have access to scalable RPCs, smart contract tools, oracles, account abstraction, identity solutions, and analytics.

Each partner provides critical tooling, APIs, and services to power decentralized applications (dApps) on Somnia. Below is an overview of our key Infrastructure Partners and resources to get started.

Overview

DIA Oracles provide secure, customizable, and decentralized price feeds that can be integrated into smart contracts on the Somnia Testnet. This guide will walk you through how to access on-chain price data, understand the oracle’s functionality, and integrate it into your Solidity Smart Contracts.

Oracle Details

Contracts on Somnia Testnet

DIA Oracle contract address:

0x9206296Ea3aEE3E6bdC07F7AaeF14DfCf33d865D

Oracle Configuration

• Pricing Methodology: MAIR

• Deviation Threshold: 0.5% (Triggers price update if exceeded)

• Refresh Frequency: Every 120 seconds

• Heartbeat: Forced price update every 24 hours

Supported Asset Feeds

How the Oracle Works

DIA oracles continuously fetch and push asset prices on-chain using an oracleUpdater, which operates within the DIAOracleV2 contract. The oracle uses predefined update intervals and deviation thresholds to determine when price updates are necessary.

Each asset price feed has an adapter contract, allowing access through the AggregatorV3Interface. You can use the methods getRoundData and latestRoundData to fetch pricing information. Learn more here.

Using the Solidity Library

DIA has a dedicated Solidity library to facilitate the integration of DIA oracles in your own contracts. The library consists of two functions, getPrice and getPriceIfNotOlderThan.

Access the library

import { DIAOracleLib } from "./libraries/DIAOracleLib.sol";

getPrice

function getPrice(
        address oracle,
        string memory key
        )
        public
        view
        returns (uint128 latestPrice, uint128 timestampOflatestPrice);

Returns the price of a specified asset along with the update timestamp.

getPriceIfNotOlderThan

function getPriceIfNotOlderThan(
        address oracle,
        string memory key,
        uint128 maxTimePassed
        )
        public
        view
        returns (uint128 price, bool inTime)
    {

Checks if the oracle price is older than maxTimePassed

Full Example on DIA Docs

Using DIAOracleV2 Interface

The following contract provides an integration example of retrieving prices and verifying price age.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.13;

interface IDIAOracleV2 {
    function getValue(string memory) external view returns (uint128, 
             uint128);
}

contract DIAOracleSample {

    address diaOracle;

    constructor(address _oracle) {
        diaOracle = _oracle;
    }

    function getPrice(string memory key) 
    external 
    view
    returns (
        uint128 latestPrice, 
        uint128 timestampOflatestPrice
    ) {
        (latestPrice, timestampOflatestPrice) =   
                 IDIAOracleV2(diaOracle).getValue(key); 
    }
}

Glossary

Support

If you need further assistance integrating DIA Oracles, reach out through DIA’s official documentation and ask your questions in the #dev-support channel on Discord.

Developers can build secure, real-time, and on-chain financial applications with reliable pricing data by integrating DIA Oracles on Somnia.

The blockchain is an ever-growing database of transactions and Smart Contract events. Developers use subgraphs, an indexing solution provided by the Graph protocol, to retrieve and analyze this data efficiently.

A graph in this context represents the structure of blockchain data, including token transfers, contract events, and user interactions. A subgraph is a customized indexing service that listens to blockchain transactions and structures them in a way that can be easily queried using GraphQL.

Prerequisites

• This guide is not an introduction to Solidity Programming; you are expected to understand Basic Solidity Programming.

• GraphQL is installed and set up on your local machine.

npm install -g @graphprotocol/graph-cli

Deploy a Simple ERC20 Token on Somnia

We will deploy a basic ERC20 token on the Somnia network using Hardhat. Ensure you have Hardhat, OpenZeppelin, and dotenv installed:

npm install --save-dev hardhat @nomicfoundation/hardhat-ignition-ethers @openzeppelin/contracts dotenv ethers

Create an ERC20 Token Contract

Create a new Solidity file: contracts/MyToken.sol and update it

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.25;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract MyToken is ERC20 {
    constructor(uint256 initialSupply) ERC20("MyToken", "MTK") {
        _mint(msg.sender, initialSupply * 10**decimals());
    }
function mint(address to, uint256 amount) external {
        _mint(to, amount);
    }
function burn(uint256 amount) external {
        _burn(msg.sender, amount);
    }
}

Create a Deployment Script

Create a new file in ignition/modules/MyTokenModule.ts

import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";

export default buildModule("MyTokenModule", (m) => {
    const initialSupply = m.getParameter("initialSupply", 1000000n * 10n ** 18n);
    
    const myToken = m.contract("MyToken", [initialSupply]);
    return { myToken };
});

Deploy the Smart Contract

Open the hardhat.config.js file and update the network information by adding Somnia Network to the list of networks. Copy your Wallet Address Private Key from MetaMask, and add it to the accounts section. Ensure there are enough STT Token in the Wallet Address to pay for Gas. You can get some from the Somnia Faucet.

module.exports = {
  // ...
  networks: {
    somniaTestnet: {
      url: "https://dream-rpc.somnia.network",
      accounts: ["0xPRIVATE_KEY"], // put dev menomonic or PK here,
    },
   },
  // ...
};

Open a new terminal and deploy the smart contract to the Somnia Network. Run the command:

npx hardhat ignition deploy ./ignition/modules/MyTokenModule.ts --network somniaTestnet

This will deploy the ERC20 contract to the Somnia network and return the deployed contract address.

Simulate On-Chain Activity

Once deployed, we will create a script to generate multiple transactions on the blockchain.

Create a new file scripts/interact.js

require("dotenv").config();
const { ethers } = require("hardhat");

async function main() {
  // Connect to Somnia RPC
  const provider = new ethers.JsonRpcProvider(process.env.SOMNIA_RPC_URL);

  // Load wallets from .env
  const deployer = new ethers.Wallet(process.env.PRIVATE_KEY_1, provider);
  const user1 = new ethers.Wallet(process.env.PRIVATE_KEY_2, provider);
  const user2 = new ethers.Wallet(process.env.PRIVATE_KEY_3, provider);
  const user3 = new ethers.Wallet(process.env.PRIVATE_KEY_4, provider);
  const user4 = new ethers.Wallet(process.env.PRIVATE_KEY_5, provider);

  const contractAddress = "0xBF9516ADc5263d277E2505d4e141F7159B103d33"; // Replace with your deployed contract address
  const abi = [
    "function transfer(address to, uint256 amount) external returns (bool)",
    "function mint(address to, uint256 amount) external",
    "function burn(uint256 amount) external",
  ];

  // Attach to the deployed ERC20 contract
  const token = new ethers.Contract(contractAddress, abi, provider);

  console.log("🏁 Starting Token Transactions Simulation on Somnia...");

  // Simulate Transfers
  const transfers = [
    { from: deployer, to: user1.address, amount: "1000" },
    { from: deployer, to: user2.address, amount: "1000" },
    { from: user1, to: user2.address, amount: "50" },
    { from: user2, to: user3.address, amount: "30" },
    { from: user3, to: user4.address, amount: "10" },
    { from: user4, to: deployer.address, amount: "5" },
    { from: deployer, to: user2.address, amount: "100" },
    { from: user1, to: user3.address, amount: "70" },
    { from: user2, to: user4.address, amount: "40" },
  ];

  for (const tx of transfers) {
    const { from, to, amount } = tx;
    const txResponse = await token.connect(from).transfer(to, ethers.parseUnits(amount, 18));
    await txResponse.wait();
    console.log(`✅ ${from.address} sent ${amount} MTK to ${to}`);
  }

  // Simulate Minting
  const mintAmount1 = ethers.parseUnits("500", 18);
  const mintTx1 = await token.connect(deployer).mint(user1.address, mintAmount1);
  await mintTx1.wait();
  console.log(`✅ Minted ${ethers.formatUnits(mintAmount1, 18)} MTK to User1!`);

  const mintAmount2 = ethers.parseUnits("300", 18);
  const mintTx2 = await token.connect(deployer).mint(user2.address, mintAmount2);
  await mintTx2.wait();
  console.log(`✅ Minted ${ethers.formatUnits(mintAmount2, 18)} MTK to User2!`);

  // Simulate Burning
  const burnAmount1 = ethers.parseUnits("50", 18);
  const burnTx1 = await token.connect(user1).burn(burnAmount1);
  await burnTx1.wait();
  console.log(`🔥 User1 burned ${ethers.formatUnits(burnAmount1, 18)} MTK!`);

  const burnAmount2 = ethers.parseUnits("100", 18);
  const burnTx2 = await token.connect(user2).burn(burnAmount2);
  await burnTx2.wait();
  console.log(`🔥 User2 burned ${ethers.formatUnits(burnAmount2, 18)} MTK!`);

  console.log("🏁 Simulation Complete on Somnia!");
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Create an .env file to hold sensitive informations such as the private keys

SOMNIA_RPC_URL=https://dream-rpc.somnia.network
PRIVATE_KEY_1=0x...
PRIVATE_KEY_2=0x...
PRIVATE_KEY_3=0x...
PRIVATE_KEY_4=0x...
PRIVATE_KEY_5=0x...

Run the Script

node scripts/interact.js

This will generate several on-chain transactions for our subgraph to index.

Deploy a Subgraph on Somnia

Go to https://somnia.chain.love/ and connect your Wallet.

First, you need to create a private key for deploying subgraphs. To do so, please go to Somnia Protofire Service and create an Account.

You are now able to create subgraphs. Click the create button and enter the required details.

After initialising the subgraph on https://somnia.chain.love/ the next step is to create and deploy the subgraph via the terminal.

Initialize the Subgraph

graph init --contract-name MyToken --from-contract 0xYourTokenAddress --network somnia-testnet mytoken