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

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.

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.

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:

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

Faucet

Community

IDE

Solidity Resources

Toolkit

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.

Connect to Somnia Testnet

Create the Smart Contract

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

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. 🎉

Pre-requisite

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

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

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.

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:

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

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.

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.

Initialise Foundry Project

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

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:

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:

It will return the response:

Deploy Contract.

You will see a status response:

NOTE: Contract Verification on SomniaScan is COMING SOON!

Pre-requisites

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

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

module.exports = {
  // ...
  networks: {
    somnia: {
      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/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. 🎉

Verify Your Smart Contract

Update hardhat.config.jsAdd the following to your config file:

jsCopyEditmodule.exports = {
  solidity: "0.8.28",
  networks: {
    somnia: {
      url: "https://dream-rpc.somnia.network",
      accounts: ["YOUR_PRIVATE_KEY"],
    },
  },
  sourcify: {
    enabled: false,
  },
  etherscan: {
    apiKey: {
      somnia: "ETHERSCAN_API_KEY",
    },
    customChains: [
      {
        network: "somnia",
        chainId: 50312,
        urls: {
          apiURL: "https://shannon-explorer.somnia.network/api",
          browserURL: "https://shannon-explorer.somnia.network",
        },
      },
    ],
  },
};

Store your private key in a .env file and import it securely to avoid hardcoding.

After deploying your contract, run the Verify command. Copy the deployed address and run:

npx hardhat verify --network somnia DEPLOYED_CONTRACT_ADDRESS "ConstructorArgument1" ...

Example for a contract with one string constructor arg:

npx hardhat verify --network somnia 0xYourContractAddress "YourDeployerWalletAddress"

The verified Smart Contracts contain the Source Code, which anyone can review for bugs and malicious code. Users can also connect with and interact with the Verified Smart Contract.

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

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:

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:

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.

Initialize a project in the directory by running the command:

Install Viem by running the following command.

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:

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.

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.

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

Set Contract Address

This is an example Greeter Smart Contract deployed on Somnia Testnet

Write a Function `interactWithContract`:

Open your terminal and run the following:

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:

Then, create a variable walletClient

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:

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

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

Start a NextJS Project

Run the command below to start a NextJS project:

npx create-next-app metamask-example

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:

 <p>Hello, World!</p>

Install Viem

npm i viem

Import Methods

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

import { useState } from "react";
import {
  createPublicClient,
  http,
  createWalletClient,
} from "viem";

Import Somnia

Import Somnia Testnet

import { somniaTestnet } from "viem/chains";

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:

const [address, setAddress] = useState<string>("");
const [connected, setConnected] = useState(false);

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:

const connectToMetaMask = async () => {
    if (typeof window !== "undefined" && window.ethereum !== undefined) {
      try {
        await window.ethereum.request({ method: "eth_requestAccounts" });
        const walletClient = createWalletClient({
          chain: SOMNIA,
          transport: custom(window.ethereum),
        });
        const [userAddress] = await walletClient.getAddresses();
        setClient(walletClient);
        setAddress(userAddress);
        setConnected(true);
        console.log("Connected account:", userAddress);
      } catch (error) {
        console.error("User denied account access:", error);
      }
    } else {
      console.log(
        "MetaMask is not installed or not running in a browser environment!"
      );
    }
  };

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:

{!connected ? (
        <button
          onClick={connectToMetaMask}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Connect Wallet
        </button>
      ) : (
        <div>
          <p>Connected as: {address}</p>
         </div>
      )}

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

npm run dev

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:

npx create-next-app my-dapp-ui

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:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then edit your tailwind.config.js:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, include Tailwind in styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

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:

import { createContext, useContext, useState } from "react";

const WalletContext = createContext();

export function WalletProvider({ children }) {
  const [connected, setConnected] = useState(false);
  const [address, setAddress] = useState("");
  
  async function connectToMetaMask() {
    if (typeof window !== "undefined" && window.ethereum) {
      try {
        await window.ethereum.request({ method: "eth_requestAccounts" });
        // For simplicity, get the first address
        const [userAddress] = window.ethereum.selectedAddress
          ? [window.ethereum.selectedAddress]
          : [];
        setAddress(userAddress);
         setConnected(true);
      } catch (err) {
        console.error("User denied account access:", err);
      }
    } else {
      console.log("MetaMask is not installed!");
    }
  }

  function disconnectWallet() {
    setConnected(false);
    setAddress("");
  }

  // Return the context provider
  return (
<WalletContext.Provider
      value={{
        connected,
        address,
        connectToMetaMask,
        disconnectWallet,
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}


export function useWallet() {
  return useContext(WalletContext);
}

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

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

const { connected, ... } = useWallet()

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:

import "../styles/globals.css";
import { WalletProvider } from "../contexts/walletcontext";
import NavBar from "../components/navbar";

function MyApp({ Component, pageProps }) {
  return (
    <WalletProvider>
      <NavBar />
      <main className="pt-16">
        <Component {...pageProps} />
      </main>
    </WalletProvider>
  );
}

export default MyApp;

<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:

import { useWallet } from "../contexts/walletcontext";
import Link from "next/link";

export default function NavBar() {
  const { connected, address, disconnectWallet } = useWallet();


  return (
    <nav className="fixed w-full bg-white shadow z-50">
      <div className="mx-auto max-w-7xl px-4 flex h-16 items-center justify-between">
        <Link href="/">
          <h1 className="text-xl font-bold text-blue-600">MyDAO</h1>
        </Link>
<div>
          {connected ? (
            <div className="flex items-center space-x-4 text-blue-500">
              <span>{address.slice(0, 6)}...{address.slice(-4)}</span>
              <button onClick={disconnectWallet} className="px-4 py-2 bg-red-500 text-white rounded">
                Logout
              </button>
            </div>
          ) : (
            <span className="text-gray-500">Not connected</span>
          )}
        </div>
      </div>
    </nav>
  );
}

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:

npm run dev

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!

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 Network 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

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

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"],
    },
  },
};

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!

2. Implement functions to fetch the total number of proposals and specific proposal details.

3. Integrate these READ operations into your Next.js pages to display dynamic data.

Understand READ Operations

In decentralized applications (dApps), Read Operations involve fetching data from the blockchain without altering its state. In the example DAO Smart Contract, this is crucial for displaying dynamic information such as:

• Total Number of Proposals: How many proposals have been created.

• Proposal Details: Information about a specific proposal, including its description, votes, and execution status.

These operations are read-only and do not require the user to sign any transactions, making them free of gas costs.

We’ll use the viem library to interact with our smart contract and perform these READ operations.

Expand walletcontext.js for Read Operations

walletcontext.js is the central hub for managing wallet connections and interacting with your Smart Contract. We’ll add two primary READ functions:

1. fetchTotalProposals(): Retrieves the total number of proposals created.

2. fetchProposal(proposalId): Fetches details of a specific proposal by its ID.

Fetch Total Proposals

Functionality: This function calls the totalProposals method in your smart contract to determine how many proposals have been created so far.

fetchTotalProposals() uses publicClient.readContract to call the totalProposals function in the Smart Contract. This function returns a BigInt representing the total number of proposals. fetchProposal(proposalId) calls the proposals mapping in your contract to retrieve details of a specific proposal by its ID. It returns a struct containing the proposal's description, deadline, votes, execution status, and proposer.

Integrate Read Operations into Pages

With the read functions in place, let’s integrate them into Next.js pages to display dynamic data.

Home Page

Update the index.js page to show the total number of proposals created in your DAO on the home page.

Here we set the totalProposals state variable to store the fetched total number of proposals. The ConnectButton implements the MetaMask authentication. The useWallet hook parse the function from WalletContext.

The useEffect Hook is applied on component mount, fetchTotalProposals() is then called to retrieve the total number of proposals from the Smart Contract.

The page displays a loading message until totalProposals is fetched. Once fetched, it displays the total number of proposals. Users will have to click the ConnectButton to connect their wallets for WRITE operations. See part 3.

Fetch-Proposal Page

This page allow users to input a proposal ID, fetch its details, and display them. Additionally, on the page users are provided options for voting on or executing the proposal.

Implementation:

The following React states are implemented

• proposalId: Stores the user-inputted proposal ID.

• proposalData: Stores the fetched proposal details.

• error: Captures any errors during fetch, vote, or execute operations.

The handleSubmit function is used to validate the input and connection status. It then calls the fetchProposal(proposalId) to retrieve proposal details.

We use a Form element for users to input a proposal ID and fetch its details. The Error Display is implemented to show any errors that occur during operations. The Proposal Details displays the fetched proposal information in a styled card.

The card contains Vote and Execute buttons for users to vote YES/NO or execute the proposal if eligible.

Edge Cases and Errors

For better UX, consider adding loading indicators while fetching data or awaiting transaction confirmations.

Example:

Test Read Operations

Populate Some Data

Before testing read operations, make sure there are some proposals created:

2. Deposit 0.001 ETH to gain voting power.

3. Create one or more proposals via the Create Proposal page.

Verify Read Operations

Run your application using the command:

Your application will be running on localhost:3000 in your web browser. Check for the following in the User Interface:

1. Total Proposals: On the Home page, verify that the total number of proposals matches the number you’ve created via Remix IDE.

2. Fetch Proposal Details: - Navigate to the Fetch-Proposal page. - Input a valid proposalId (e.g., 0 for the first proposal). - Verify that all proposal details are accurately displayed.

Monitor the browser console for any errors or logs that can help in debugging.

Conclusion and Next Steps

In Part 2, you successfully implemented Read Operations in your DAO front end:

• fetchTotalProposals(): Displayed the total number of proposals on the Home page.

• fetchProposal(proposalId): Retrieved and displayed specific proposal details on the Fetch-Proposal page.

What's Next?

Stay tuned for Part 3 of this series, where we’ll dive into building UI Components—crafting forms, buttons, and enhancing event handling to create a more polished and user-friendly interface for your DAO dApp.

Congratulations! You’ve now built a robust foundation for reading data from your DAO smart contract within your Next.js front end. Keep experimenting and enhancing your dApp’s capabilities in the upcoming sections!

1. Understand the Write Operations necessary for the DAO.

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

4. Handle transaction states and provide user feedback.

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.

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.

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.

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).

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.

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.

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

Install react-toastify

Inside the _app.js

In your WalletContext or Pages

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:

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

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.

STT is the native token of the Somnia Network, similar to ETH on Ethereum. Unlike ERC20 tokens, STT is built into the protocol itself and does not have a contract address.

This multi-part guide shows how to use STT for:

• Payments

• Escrow

• Donations & Tipping

• Sponsored gas via Account Abstraction

Use STT for Payments in Smart Contracts

A simple contract that accepts exact STT payments:

function payToAccess() external payable {
  require(msg.value == 0.01 ether, "Must send exactly 0.01 STT");
}

Use msg.value to access the native token sent in a transaction. No ERC20 functions are needed.

To withdraw collected STT:

function withdraw() external onlyOwner {
  payable(owner).transfer(address(this).balance);
}

Deploy using Hardhat Ignition or Viem and test with a sendTransaction call.

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

contract STTPayment {
    address public owner;

    constructor() {
        owner = msg.sender;
    }

    // Modifier to restrict access to the contract owner
    modifier onlyOwner() {
        require(msg.sender == owner, "Only owner can call this");
        _;
    }

    // User must send exactly 0.01 STT to access this feature
    function payToAccess() external payable {
        require(msg.value == 0.01 ether, "Must send exactly 0.01 STT");

        // Logic for access: mint token, grant download, emit event, etc.
    }

    // Withdraw collected STT to owner
    function withdraw() external onlyOwner {
        payable(owner).transfer(address(this).balance);
    }
}

Build an STT Escrow Contract

A secure escrow contract allows a buyer to deposit STT and later release or refund:

constructor(address payable _seller) payable {
  buyer = msg.sender;
  seller = _seller;
  amount = msg.value;
}

Release funds to the seller:

function release() external onlyBuyer {
  seller.transfer(amount);
}

Deploy with Hardhat Ignition and pass STT as value during deployment.

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

contract STTEscrow {
    address public buyer;
    address payable public seller;
    uint256 public amount;
    bool public isDeposited;

    constructor(address payable _seller) payable {
        buyer = msg.sender;
        seller = _seller;
        amount = msg.value;
        require(amount > 0, "Must deposit STT");
        isDeposited = true;
    }

    modifier onlyBuyer() {
        require(msg.sender == buyer, "Only buyer can call this");
        _;
    }

    function release() external onlyBuyer {
        require(isDeposited, "No funds to release");
        isDeposited = false;
        seller.transfer(amount);
    }

    function refund() external onlyBuyer {
        require(isDeposited, "No funds to refund");
        isDeposited = false;
        payable(buyer).transfer(amount);
    }
}

STT Tip Jar

Allow any wallet to send tips directly:

receive() external payable {
  emit Tipped(msg.sender, msg.value);
}

Withdraw all tips:

function withdraw() external onlyOwner {
  payable(owner).transfer(address(this).balance);
}

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

contract STTTipJar {
    address public owner;

    event Tipped(address indexed from, uint256 amount);
    event Withdrawn(address indexed to, uint256 amount);

    constructor() {
        owner = msg.sender;
    }

    receive() external payable {
        emit Tipped(msg.sender, msg.value);
    }

    function withdraw() external {
        require(msg.sender == owner, "Only owner can withdraw");
        uint256 balance = address(this).balance;
        require(balance > 0, "No tips available");
        payable(owner).transfer(balance);
        emit Withdrawn(owner, balance);
    }
}

Frontend tip

await walletClient.sendTransaction({
  to: '0xTipJarAddress',
  value: parseEther('0.05'),
});

Sponsor STT Transactions with Account Abstraction

Using a smart account + relayer (e.g. via Privy, Thirdweb), the dApp can cover gas fees:

await sendTransaction({
  to: contractAddress,
  data: mintFunctionEncoded,
  value: 0n, // user sends no STT
});

The Smart Contract function can execute mint or other logic as usual. The paymaster or relayer pays STT.

Conclusion

• STT is native and used via msg.value, .transfer(), and payable.

• There is no contract address for STT.

• You can integrate STT into any Solidity or Viem app with no ERC20 logic.

• Account Abstraction enables gasless dApps using STT as sponsor currency.

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:

npm thirdweb install

Set Up the Project

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

mkdir somnia-thirdweb-example
cd somnia-thirdweb-example

Write the Smart Contract

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

contract OpenGreeter {
    string public name;
    address public owner;

    event NameChanged(string oldName, string newName);

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

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

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

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:

npx thirdweb deploy -k your_secret_key

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. 🎉

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:

npx create-next-app@latest somnia-connectkit
cd somnia-connectkit

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

npm install wagmi viem @tanstack/react-query connectkit

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:

'use client';

import { WagmiConfig, createConfig } from 'wagmi';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { somniaTestnet } from 'viem/chains';


const queryClient = new QueryClient();


const config = createConfig(
  getDefaultConfig({
    autoConnect: true,
    appName: 'Somnia DApp',
    chains: [somniaTestnet],
  })
);

export default function ClientProvider({ children }) {
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  );
}

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

import ClientProvider from './components/ClientProvider';
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Somnia DApp</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <ClientProvider>{children}</ClientProvider>
      </body>
    </html>
  );
}

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:

'use client';

import { useAccount } from 'wagmi';
import { ConnectKitButton } from 'connectkit';

export default function Home() {
  const { address, isConnected } = useAccount();
return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        Hello, world!
        {/* Connect Button */}
        <div className="mt-4">
          <ConnectKitButton />
        </div>
        {/* Show Wallet Address */}
        {isConnected && (
          <p className="mt-4 text-lg text-blue-600">Connected as: {address}</p>
        )}
      </main>
    </div>
  );
}