Forem: tosynthegeek

Building with Supra: Powering Decentralized Applications with Better Data

tosynthegeek — Mon, 03 Jun 2024 00:11:54 +0000

Introduction
- The Challenge of Data in Blockchain
- Supra: Bridging the Data Gap
- Key Features of Supra's Data Feeds
Consuming Supra Oracle Price Data Feeds with Ethers and Hardhat
Prerequisites
Setting Up the Environment
Build and Compile your Contract
Deploying and Interacting with the Supra Contract
What's Next?

Introduction

Supra stands as a prominent player in the realm of decentralized oracles, providing a critical service for DeFi applications: secure and reliable data feeds for blockchain environments. This guide delves into Supra's functionalities and explores how it empowers developers to build trust-worthy DeFi applications. Let's dive in.

The Challenge of Data in Blockchain

Blockchains, while revolutionary for security and immutability, are isolated ecosystems. This strength becomes a weakness when smart contracts, the engines of DeFi applications, require real-world data to function. External data is crucial for various DeFi use cases:

Decentralized Exchanges (DEXs): Accurate and timely price feeds are essential for DEXs to facilitate fair and efficient token swaps.
Lending Protocols: Reliable data on asset values is necessary for collateralization calculations and risk management in lending and borrowing platforms.
Prediction Markets: External data like sports scores or election results are crucial for settling prediction market contracts.

Existing oracle solutions often face challenges in terms of scalability and security, leaving developers with a gap to bridge when it comes to reliable data access for their DeFi applications.

Supra: Bridging the Data Gap

Enter Supra, a next-generation oracle solution, addresses these limitations. Unlike traditional oracles that rely heavily on adding more nodes (horizontal scaling), Supra prioritizes vertical scaling. This means Supra focuses on packing more processing power and resources into each individual node within its network. This approach offers several potential advantages for DeFi data delivery:

Faster Speeds: With more powerful nodes, Supra can potentially retrieve and process data significantly faster. This is crucial for real-time needs in DeFi, such as constantly fluctuating cryptocurrency prices or dynamic interest rates.
Reduced Latency: By minimizing the number of communication needed between nodes, vertical scaling can lead to lower latency in data delivery. This translates to less time between when data is requested and when it reaches the smart contract, ensuring applications operate with the most real-time data.
Potential Cost Efficiency: A smaller network of more powerful nodes could translate to lower operating costs for Supra and this would benefit developers by potentially leading to more competitive pricing for data feeds compared to oracles with a larger, horizontally scaled network.

Supra's core strength lies in its decentralized oracle price feeds. These oracles act as secure bridges, delivering real-world data to DeFi applications across various on-chain and off-chain scenarios. This ensures the data powering DeFi is accurate and verifiable, a critical requirement for applications relying on real-time information like cryptocurrency prices or market movements.

Key Features of Supra's Data Feeds

Pull Oracles: Pull Oracles function like a just-in-time data delivery system for smart contracts. Instead of receiving a constant stream of updates, smart contracts can actively request specific data points from the Supra network whenever they need them, minimizing unnecessary network congestion and lowering gas fees. - V1: Initial version, providing basic on-demand data services. - V2: Enhanced version with improved performance and additional features.
Push Oracles: Not all data needs to be constantly refreshed. Some DeFi applications, like lending protocols that peg interest rates to established benchmarks, can function perfectly with regular data updates. Push Oracles handles this by proactively pushing data updates from the Supra network to smart contracts at predetermined intervals. This is a more efficient approach for situations where real-time data isn't crucial, saving resources and reducing network congestion.

Decentralized VRF Supra's dVRF is designed to deliver secure, verifiable, and decentralized random number generation, offering DeFi applications a secure and reliable source of random numbers. Smart contracts can leverage this randomness for various purposes, ensuring fairness and transparency in a decentralized ecosystem.

Consuming Supra Oracle Price Data Feeds with Ethers and Hardhat

We would be building a smart contract that fetches price data feeds and emits an event if it meets a specific threshold using Hardhat and ethers. Code with me!

Prerequisites

Before we dive in, ensure you have the following tools and prerequisites in place:

Node.js
Hardhat
Metamask wallet: Configure metamask to connect to Sepolia network
Alchemy or Infura: Get your HTTP endpoint for the Sepolia testnet. Guide here
Test tokens: Request for Sepolia test
gRPC Server address for testnet
Pull Contract Address from the Avaialble networks on the Supra Docs. You can check for other available networks.

Setting Up the Environment

Now that we've gathered our tools, it's time to set up our development environment. Here's a step-by-step guide:

Start by running the following commands: ```bash

mkdir auction
cd auction
npm init -y
npm install --save-dev hardhat
npx hardhat init
npm install --save-dev @nomicfoundation/hardhat-toolbox
npm i dotenv
code .

- Next step would be to clone the Oracle pull example code from GitHub and install the necessary dependencies.
```bash


git clone https://github.com/Entropy-Foundation/oracle-pull-example
cd oracle-pull-example/javascript/evm_client
npm install

To keep sensitive information like your Metamask private key and RPC URL secure, create a .env file in your project directory and store your keys there in the format below: ```javascript

PRIVATE_KEY=""
RPC_URL=""

- Modify your Hardhat configuration file (hardhat.config.js) to recognize the keys from your .env file. Also, add sepolia as a network.
```javascript


require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();  

module.exports = {
    solidity:  "0.8.19",
    networks: {
        sepolia: {
            url:  process.env.RPC_URL,
            accounts: [process.env.PRIVATE_KEY],
        },
    },
};

Build and Compile your Contract

The next section will delve into building a smart contract that interacts with Supra Oracles using Hardhat. We'll walk you through the code, step-by-step, and demonstrate how to fetch price data feeds and emit events based on specific thresholds. I've added some comments to give more details of what's going on.

First, we will add the ISupraOraclePull which contains the verifyOracleProof function which performs verification and returns a PriceData struct containing the extracted price data. ```javascript

interface ISupraOraclePull {
/**
* @dev Verified price data structure.
* @param pairs List of pairs.
* @param prices List of prices corresponding to the pairs.
* @param decimals List of decimals corresponding to the pairs.
*/

struct  PriceData {
    uint256[] pairs;
    uint256[] prices;
    uint256[] decimals;
}

/**
* @dev Verifies oracle proof and returns price data.
* @param  _bytesproof The proof data in bytes.
* @return PriceData Verified price data.
*/
function  verifyOracleProof(
    bytes  calldata  _bytesproof
) external  returns (PriceData  memory);

}

-  For our contract, we would create an internal variable `oracle` to represent the interface. With this we can call the oracle's `verifyOracleProof` function to validate the proofs accompanying price data (delivered as byte strings). Once verified, the contract extracts the price information (including pair IDs, prices, and decimals) and stores it in internal mappings `latestPrices` and  `latestDecimal`.

```javascript


contract  Supra {
    // The oracle contract
    ISupraOraclePull  internal oracle;

    // Stores the latest price data for a specific pair
    mapping(uint256 => uint256) public latestPrices;
    mapping(uint256 => uint256) public latestDecimals;

    // Event to notify when a price threshold is met
    event  PriceThresholdMet(uint256  pairId, uint256  price);

    /**
    * @dev Sets the oracle contract address.
    * @param  oracle_ The address of the oracle contract.
    */
    constructor(address  oracle_) {
        oracle = ISupraOraclePull(oracle_);
    }

    /**
    * @dev Extracts price data from the bytes proof data.
    * @param  _bytesProof The proof data in bytes.
    */
    function  deliverPriceData(bytes  calldata  _bytesProof) external {
        ISupraOraclePull.PriceData  memory prices = oracle.verifyOracleProof(
            _bytesProof
        );

        // Iterate over all the extracted prices and store them
        for (uint256 i = 0; i < prices.pairs.length; i++) {
            uint256 pairId = prices.pairs[i];
            uint256 price = prices.prices[i];
            uint256 decimals = prices.decimals[i];

            // Update the latest price and decimals for the pair
            latestPrices[pairId] = price;
            latestDecimals[pairId] = decimals;


            // Example utility: Trigger an event if the price meets a certain threshold
            if (price > 1000 * (10 ** decimals)) {
            // Example threshold
            emit  PriceThresholdMet(pairId, price);
            }
        }
    }

    /**
    * @dev Updates the oracle contract address.
    * @param  oracle_ The new address of the oracle contract.
    */
    function  updatePullAddress(address  oracle_) external {
        oracle = ISupraOraclePull(oracle_);
    }

    /**
    * @dev Returns the latest price and decimals for a given pair ID.
    * @param  pairId The ID of the pair.
    * @return  price The latest price of the pair.
    * @return  decimals The decimals of the pair.
    */
    function  getLatestPrice(
        uint256  pairId
    ) external  view  returns (uint256  price, uint256  decimals) {
        price = latestPrices[pairId];
        decimals = latestDecimals[pairId];
    }

}

The getLatestPrice function woula allow us to retrieve the most recent price and its corresponding decimals for a specific pair ID.
Compile your contract by running this command: npx hardhat compile



npx hardhat compile 
Compiled 1 Solidity file successfully

Deploying and Interacting with the Supra Contract

Now that you have your contract compiled, we would import necessary libraries and set up the configuration for our script. ```javascript

const { ethers } = require("hardhat");
const PullServiceClient = require("../oracle-pull-example/javascript/evm_client/pullServiceClient");
require("dotenv").config();

const address = "testnet-dora.supraoracles.com";
const pairIndexes = [0, 21, 61, 49];
const sepoliaPullContractAdress = "0x6Cd59830AAD978446e6cc7f6cc173aF7656Fb917"; //Update for V1 or V2
const privateKey = process.env.PRIVATE_KEY;

- In our `main` function, we create a `PullServiceClient` instance (`client`) to communicate with the Supra Oracle service. We use this `client` to call the `getProof` method on the `client` object, passing the request (which contains the indexes and the chain type) and a callback function which also acepts two arguments and `err` and `response` . Now we can call the `calContract` function, passing the retrieved proof data (`response.evm`) as an argument.
```javascript


async  function  main() {
    const  client = new  PullServiceClient(address);
    const  request = {
        pair_indexes:  pairIndexes,
        chain_type:  "evm",
    };

    console.log("Getting proof....");

    const  proof = client.getProof(request, (err, response) => {
    if (err) {
        console.error("Error getting proof:", err.details);
        return;
    }
    console.log("Calling contract to verify the proofs.. ");
    callContract(response.evm);
    });
}

The callContract function, takes retrieved price data proof (response) and prepares a transaction to interact with the deployed Supra contract. ```javascript

async function callContract(response) {
const Supra = await ethers.getContractFactory("Supra");
const supra = await Supra.deploy(sepoliaPullContractAdress);
const contractAddress = await supra.getAddress();

console.log("Supra deployed to: ", contractAdress);

const  hex = ethers.hexlify(response);    
const  txData = await  supra.deliverPriceData(hex);
const  gasEstimate = await  supra.estimateGas.deliverPriceData(hex);
const  gasPrice = await  ethers.provider.getGasPrice();

console.log("Estimated gas for deliverPriceData:", gasEstimate.toString());
console.log("Estimated gas price:", gasPrice.toString());  

const  tx = {
    from:  "0xDA01D79Ca36b493C7906F3C032D2365Fb3470aEC",
    to:  contractAddress,
    data:  txData,
    gas:  gasEstimate,
    gasPrice:  gasPrice,
};

const  wallet = new  ethers.Wallet(privateKey);
const  signedTransaction = await  wallet.signTransaction(tx);
const  txResponse = await  wallet.sendTransaction(tx);

console.log("Transaction sent! Hash:", txResponse.hash);

// (Optional) Wait for transaction confirmation (e.g., 1 block confirmation)
const  receipt = await  txResponse.wait(1);
console.log("Transaction receipt:", receipt);

}

### Deploying to Sepolia

To deploy to sepolia, run the following command:

npx hardhat run scripts/run-supra.js --network sepolia

With this, you should be able to use Supra price data feeds with Hardhat in building decentralized applications. You can find the full code for this tutorial [here](https://github.com/tosynthegeek/supraoracle-implementation).

## <a id = "j">What's Next? </a>
By leveraging Supra Oracles, developers can build secure and reliable DeFi applications with access to trustworthy and timely data feeds. To continue building with Supra and exploring other services, I recommend the following resources:
- [The Supra Docs](https://supra.com/docs/): for access to solution, repos, smart contract addresses, and other essential information
- [The Supra Research Page](https://supra.com/research/): for technical deep dives and researchs.
- [The Supra Academy](https://supra.com/academy/): # Explore topics. Dive in. Level up.

Building on Morph

tosynthegeek — Sat, 18 May 2024 12:40:38 +0000

Introduction
- The Morph Solution: Bridging Web3 gap by transitioning real-world applications Onchain
- Morph's Architecture: Core Functionalities
Building Applications on Morph
- Getting Started
- Set up the environment
- Building and Compiling the Smart contract
- Deploying and Interacting with the Contract
What's Next?

Introduction

In the fast-evolving blockchain industry, scaling solutions have emerged as crucial for enhancing the scalability and efficiency of underlying blockchain infrastructures. Blockchains like Ethereum, once revolutionary, now struggle with the demands of a growing user base. Transaction fees have skyrocketed, and transaction throughput low, hindering its ability to handle the growing demand. Enter Morph, a next-generation blockchain platform designed to address these limitations.

The Morph Solution: Bridging Web3 gap by transitioning real-world applications Onchain

Morph is not just another scaling solution; it's a next-generation blockchain platform built from the ground up to address these critical limitations. Unlike traditional blockchains that store every transaction detail on-chain, Morph leverages a unique architecture that combines established and cutting-edge technologies. This unique blend empowers developers to build powerful and user-friendly applications without sacrificing scalability, security, or efficiency.

Morph's Architecture: Core Functionalities

Morph is designed with a modular architecture that consists of three functional modules that effectively collaborate with one another while preserving their individual autonomy:

Decentralized Sequencer Network for Consensus and Execution, ensuring fair and transparent transaction processing through a decentralized network of nodes, reducing the risk of censorship and centralization.
Rollup for Data Availability, ensuring that transaction data is stored and accessible off-chain while keeping the on-chain data footprint minimal. Rollups aggregate multiple transactions into a single batch, which is then recorded on the blockchain. This process significantly reduces the amount of data that needs to be stored on-chain, thereby improving scalability and reducing costs.
Optimistic zkEVM for Settlement of transactions, validating them off-chain and only submitting proofs to the blockchain when necessary.

Read more on Morph Modular Design

Building Applications on Morph

Good news: It's just like building on Ethereum! There are very few changes needed. So if you're an Ethereum builder, you are already a Morph builder. 😎

In the next part, we'll be deploying a smart contract to the Morph Holesky Testnet. It's the same code from my Confidential Smart Contracts post.

Getting Started

Metamask Wallet Setup for Morph Testnet: Crypto wallet.
Hardhat: Ethereum development environment. It comes as an npm package.
Morph Holesky Testnet RPC URL
Get some Morph Testnet Ethereum here

Set up environment

Now that we've gathered our tools, it's time to set up our development environment. Here's a step-by-step guide:

Start by running the following commands:

mkdir auction

cd auction

npm init -y

npm install --save-dev hardhat (We will be using typescript)

npx hardhat init

npm install --save-dev @nomicfoundation/hardhat-toolbox

npm i dotenv

code .

To keep sensitive information like your Metamask private key, create a .env file in your project directory and store your keys there in the format below:

PRIVATE_KEY=""

Modify your Hardhat configuration file (hardhat.config.ts) to recognize the keys from your .env file. Also, add morph testnet as a network.

import { HardhatUserConfig } from  "hardhat/config";

import  "@nomicfoundation/hardhat-toolbox";

const  config: HardhatUserConfig = {
    solidity:  "0.8.24",
    networks: {
        morph: {
            url:  "https://rpc-quicknode-holesky.morphl2.io",
            accounts:
                process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
        },
    },
};

export  default  config;

Building and Compiling the Contract

In the /contracts directory of your Hardhat project, create a new file named Auction.sol. I've added the smart contract below with some comments to explain what's going on.

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

contract Auction {
    // Auction details
    address payable public seller; // Address of the seller
    uint256 public startingPrice; // Starting price of the auction
    uint256 public highestBid; // Highest bid amount
    address public highestBidder; // Address of the highest bidder
    uint256 public auctionEndTime; // Timestamp when the auction ends
    bool public auctionEnded; // Flag to indicate if the auction has ended
    uint256 public bidCount;

    // Struct to store bid details
    struct Bid {
        address bidder;
        uint256 bid;
    }

    Bid[] public bids; // Array to store all bids

    // Events for auction lifecycle
    event BidCreated(address bidder, uint256 amount);
    event AuctionEnded(address winner, uint256 winningBid);

    // Constructor to initialize auction parameters
    constructor(
        address payable _seller, // Address of the seller
        uint256 _startingPrice, // Starting price of the auction
        uint256 _auctionEndTime // Duration of the auction
    ) {
        seller = _seller;
        startingPrice = _startingPrice;
        highestBid = startingPrice;
        auctionEndTime = block.timestamp + _auctionEndTime; // Set the end time of the auction
    }

    /**
     * @notice Allows a user to place a bid in the auction.
     * @dev The bid must be higher than the current highest bid, and the auction must not have ended.
     */
    function bid() external payable {
        require(block.timestamp < auctionEndTime, "Auction has ended");
        require(
            msg.value > highestBid,
            "Bid must be higher than the current highest bid"
        );
        if (highestBidder != address(0)) {
            payable(highestBidder).transfer(highestBid);
        }
        highestBid = msg.value;
        highestBidder = msg.sender;
        Bid memory newBid = Bid(msg.sender, msg.value);
        bids.push(newBid);
        bidCount++;
        emit BidCreated(msg.sender, msg.value);
    }

    /**
     * @notice Allows the highest bidder or seller to check the bid at a given index.
     * @dev The auction must have ended, and only the highest bidder or seller can check bids.
     * @param index The index of the bid to check.
     * @return The bidder's address and bid amount.
     */
    function checkBid(uint256 index) external view returns (address, uint256) {
        require(index <= bidCount, "Wrong Index");
        Bid memory getBid = bids[index];
        require(block.timestamp > auctionEndTime, "Auction is still ongoing");
        require(
            msg.sender == highestBidder || msg.sender == seller,
            "Only Highest Bidder and seller can check bids"
        );
        return (getBid.bidder, getBid.bid);
    }

    /**
     * @notice Returns the timestamp when the auction ends.
     * @return The timestamp when the auction ends.
     */
    function checkAuctionEndTime() external view returns (uint256) {
        return auctionEndTime;
    }

    /**
     * @notice Ends the auction and transfers the highest bid amount to the seller.
     * @dev The auction must have ended.
     */
    function endAuction() external {
        require(block.timestamp >= auctionEndTime, "Auction is still ongoing");
        auctionEnded = true; // Update auction status
        seller.transfer(highestBid); // Transfer the highest bid to the seller
        emit AuctionEnded(highestBidder, highestBid); // Emit AuctionEnded event
    }

    /**
     * @notice Returns the auction details.
     * @return The seller's address, starting price, highest bid amount, highest bidder's address,
     * auction end timestamp, auction end status, and total bid count.
     */
    function getAuctionDetails()
        external
        view
        returns (address, uint256, uint256, address, uint256, bool, uint256)
    {
        return (
            seller,
            startingPrice,
            highestBid,
            highestBidder,
            auctionEndTime,
            auctionEnded,
            bidCount
        );
    }
}

Compile the contract using the command: npx hardhat compile

npx hardhat compile 
Compiled 1 Solidity file successfully

Deploying and Interacting with the Contract

Now that you have your contract compiled, the next step would be to write a script to deploy and interact with your contract. In the /scripts folder, you'll find a default script, deploy.ts, you can delete that. Go ahead and create a new file called run-auction.ts and add the following code into it:

import  hre  from  "hardhat";

async  function  getStorageAt(address: string, slotNumber: string) {
    const  provider = hre.ethers.provider;
    const  result = await  provider.getStorage(address, slotNumber);

    return  result.toString();
}

/**
* @notice Decode the transaction input data using the ABI.
* @param  abi The ABI of the contract.
* @param  inputData The input data of the transaction.
* @return The decoded transaction data, or an empty object if decoding fails.
*/

function  decodeTransactionInput(abi: any[], inputData: string) {
    try {
        const  iauction = new  hre.ethers.Interface(abi);
        const  decodedData = iauction.parseTransaction({ data:  inputData});
    return  decodedData;
    } catch (error) {
        console.error("Error decoding transaction input:");
        return { args: [] };
    }
}

async  function  main(value: number) {
    const  index = 0;
    const  address = "0xDA01D79Ca36b493C7906F3C032D2365Fb3470aEC";
    const  Auction = await  hre.ethers.getContractFactory("Auction");
    const  auction = await  Auction.deploy(
    "0xd109e8c395741b4b3130e3d84041f8f62af765ef",
    100,
    60  // 10 minutes for the auction duration
    );
    console.log("Auction contract deployed on Morph to: ",
    await  auction.getAddress()
    );

    console.log("Bidding....");
    const  tx = await  auction.bid({
    value:  value.toString(),
    });
    await  tx.wait();
    console.log("Bid successful!");

// Trying to get the bid of an associated address
    try {
        console.log("Checking bid at Index: ", index);
        const  bid = await  auction.checkBid(index);
        console.log("Bid at Index 0 is:", bid);
    } catch (error) {
        console.error("Failed to check bid: Auction is still ongoing");
    }

    console.log("Waiting....");

    const  endTime = await  auction.checkAuctionEndTime();
    console.log("Auction endtime is: ", endTime);

    console.log("Still waiting....");

    try {
        await  new  Promise((resolve) =>  setTimeout(resolve, 100_000));
        console.log("Checking bid again");
        const  bid = await  auction.checkBid(index);
        console.log("Bid:", bid);
    } catch (error) {
        console.log("Failed to check bid: Auction is still ongoing");
    }

    const  decodedInput = decodeTransactionInput(
    auction.interface.format(),
    tx.data
    );

    console.log("Decoded data input: ", decodedInput?.args);  

    const  StateData = await  getStorageAt(await  auction.getAddress(), "0x0");
    console.log("State data at slot 0x0 is: ", StateData);
}

main(120).catch((error) => {
    console.error(error);
    process.exitCode = 1;
});

This script demonstrates how to interact with the auction contract by performing several actions:

Deployment: Deploys the contract, initializing it with the starting price and auction duration.
Bidding: Places a bid in the auction, confirming the transaction hash.
Bid Access Control: Attempts to check a specific bid while the auction is ongoing, showcasing the access restriction that only allows the highest bidder or seller to view bid details during the auction. It then successfully checks the bid details after the auction ends.
Transaction Input Decoding: Decodes the transaction input data used for checking the bid, extracting relevant information like the bid amount.
State Retrieval Simulation: Simulates retrieving state data at a specific slot.

Deploying to Morph Testnet

To deploy to Morph testnet, run the command:

npx hardhat run scripts/run-auction.ts --network morph

You should get an output that looks like this:

Auction contract deployed on Morph to: 0x290946a5f508530023e08260B67957f408D6dB75
Bidding.... 
Bid successful! 
Checking bid at Index: 0 
Failed to check bid: Auction is still ongoing Waiting.... 
Auction endtime is: 1715895486n Still waiting.... 
Checking bid again 
Bid: Result(2) [ '0xDA01D79Ca36b493C7906F3C032D2365Fb3470aEC', 120n ] 
Decoded data input: Result(0) [] 
State data at slot 0x0 is: 0x000000000000000000000000d109e8c395741b4b3130e3d84041f8f62af765ef

This means your contract has been successfully deployed to the Morph Test Network!
Head over to the Morph Testnet Explorer to scan your contract address.

What's Next?

To continue building on the Morph network, I recommend the following resources:

Morph Developer Docs: for technical specifications and functionalities.
Discord Channel: Join the Morph Community to get feedback and share thoughts.
Morph Blog: Also check out the Morph Blog for News, Announcements and Guides like this.

Synternet Data Layer

tosynthegeek — Sat, 11 May 2024 20:19:57 +0000

Introduction: Synternet and the Data Layer
- Synternet: Powering Data Infrastructure for Web3
- The Data Layer: The Leading Protocol for Real-Time Data
Prerequisites
Setting Up the Environment
Exploring the Data Layer with the Synternet Golang SDK
Conclusion

Introduction

As the blockchain landscape explodes with new projects and protocols, a major challenge emerges: data exchange and interoperability.

Traditional blockchains often operate in silos, built with their own unique structures and protocols. This isolation makes it difficult for them to seamlessly communicate and share information.

Imagine a world where each bank operates on its own isolated financial network, unable to exchange funds or verify transactions with other banks. That's the current state of many blockchains – a fragmented ecosystem hindering the full potential of a connected web3 world.

Now, imagine a layer exists where real-time blockchain data can be exchanged securely and efficiently, and this is what Synternet brings to Web3.

Synternet: Powering Data Infrastructure for Web3

Synternet tackles this data isolation problem by offering an interoperable data infrastructure across all major chains. It functions as a bridge between blockchains, enabling them to exchange data securely and efficiently. This interoperable data layer empowers developers to build applications that leverage data from various blockchains, fostering a more interconnected web3 ecosystem.

The Data Layer: The Leading Protocol for Real-Time Data

At the heart of Synternet lies the Data Layer, its core protocol acting as a bridge between blockchains. Imagine a universal translator for blockchain data – that's the essence of the Data Layer. It empowers developers with instant access to any cross-chain data, fostering a truly interconnected web3 ecosystem.

This functionality is achieved through a publish-subscribe (pub-sub) framework where data providers can continuously stream live data (like current prices or transaction details) to applications and smart contracts. This approach eliminates the need for traditional request-reply oracles, which can be computationally expensive and introduce centralization risks. By contrast, the Data Layer offers real-time, ultra-low-cost data delivery without any middlemen, promoting a more efficient and secure web3 environment.

In this article, we will explore the data layer using the Synternet Go SDK.

Prerequisites

Before we dive in, ensure you have the following tools and prerequisites in place:

Go: Follow the installation guide.
Nats: Set up and start the NATS server using this guide. For Windows users, I recommend using chocolatey or Go for installation.
Nats CLI: Install Nats CLI to help interact with subjects from the terminal. Use this guide
Amber Testnet Tokens: To help interact with the Data Layer. Geyt some from the faucet.
Create a Synternet project to get Access Token. Use this guide
Subscribe to a Stream

Setting Up the Environment

Now that we've gathered our tools, it's time to set up our development environment. Here's a step-by-step guide:

Create a new file directory and enable dependency tracking for your code.

mkdir synternet

cd synternet

go mod init synternet

code .

Run the following command to install all the necessary packages

go get github.com/SyntropyNet/pubsub-go/pubsub 
go get github.com/joho/godotenv 
go get github.com/nats-io/nats.go/

Create a new go file and import the following packages.

pacakage main

import (
    "context"
    "fmt"
    "log"
    "os"
    "os/signal"
    "syscall"


    "github.com/SyntropyNet/pubsub-go/pubsub"
    "github.com/joho/godotenv"
    "github.com/nats-io/nats.go"
)

To keep sensitive information like your access key, create a .env file in your project directory and store your keys there in the format below:

ACCESS_KEY="THISISMYACCESSKEY"

Create these as global variables as we would need them all through.

// Configuration variables
const (
    natsUrl = "nats://127.0.0.1:4222"  // Default NATS server address
    subject = "staking.osmosis.mempool"  // The subject we want to subscribe to
)

// Access token retrieved from environment variable
var  accessToken  string // Would be initialized in the main function

Now we have all we need, let's dive in.

Exploring the Data Layer with the Synternet Golang SDK

We would get started by creating a function PrintData which would serve as a message handler to process and log data about the received message.

func  PrintData(ctx  context.Context, service *pubsub.NatsService, data []byte) error {
log.Println("Received message on subject:", subject)
fmt.Println(string(data)) // Print the message data as a string
return  nil
}

It takes in 3 arguments:

ctx: This argument is of type context.Context. It provides information about the context of the function call, including cancellation signals.
service: This argument is a pointer to a pubsub.NatsService object. This object represents the connection to the NATS server and provides methods for message handling.
data: This argument is a slice of bytes ([]byte). It contains the actual data received from the subscribed subject. Proceeding to our main function, we would start by initializing our accessToken from our .env file.

func main() {
    // Load environment variables from .env
    err := godotenv.Load()
    if  err != nil {
    log.Fatal("Error loading .env file: ", err)
    }

    // Read access token from the environment variable "ACCESS_TOKEN"
    accessToken = os.Getenv("ACCESS_TOKEN")
    fmt.Println("Access Token:", accessToken) // For debugging, remove for security issues
}

Running go run main.go would have our access token printed to the console.
We would go ahead to use this access token to generate a JWT token for authorization with the NATS server.

jwt, err := pubsub.CreateAppJwt(accessToken)
if  err != nil {
    log.Println("Error creating JWT token:", err)
} else {
    fmt.Println("Generated JWT token:", jwt) // Log the generated JWT token (for debugging)
}

This would allow us to establish a connection with the NATS server for subscribing to messages.

// NATS connection options with User JWT and Seed (access token) for authentication
opts := []nats.Option{
nats.UserJWTAndSeed(jwt, accessToken),
}

// Connect to the NATS server using the configured URL and options
service := pubsub.MustConnect(pubsub.Config{
URI: natsUrl,
Opts: opts,
})
log.Println("Connected to NATS server successfully.")

// Create a context with cancellation functionality
ctx, cancel := context.WithCancel(context.Background())
defer  cancel() // Ensure cancellation on exit

// Informational message
fmt.Println("Waiting for messages...")

Run the command to confirm your code works just fine: go run main.go

You should get something like this as an output:

Access Token: SAAHDFQNIJ5S5DENJPUJAVGRHSQZRYZLT7NJVBBAOWYBSP6AWNDZZZ7KVU
Generated JWT token: eyJhbGciOiJlZDI1NTE5LW5rZXkiLCJ0eXAiOiJKV1QifQ.eyJqdGkiOiIxNzE1MzgwNDE1NjIyMzAwNDE1NDgzNjIxIiwiaWF0IjoxNzE1MzgwNDE1LCJpc3MiOiJBQ0tVNEk2VjI2QUFUQTQ2U1FRT1dFUjZCTVBCMlk1RDZUWVc2Q0QyMk00Tk1IQUlGSVJPNUczSyIsIm5hbWUiOiJkZXZlbG9wZXIiLCJzdWIiOiJBQ0tVNEk2VjI2QUFUQTQ2U1FRT1dFUjZCTVBCMlk1RDZUWVc2Q0QyMk00Tk1IQUlGSVJPNUczSyIsIm5hdHMiOnsiZGF0YSI6LTEsInBheWxvYWQiOi0xLCJwdWIiOnt9LCJzdWIiOnt9LCJzdWJzIjotMSwidHlwZSI6InVzZXIiLCJ2ZXJzaW9uIjoyfX0.XFwuojtVox2MxW0vAh5hitjnIymLqR2fIAZZR-1zFxI_QFlhPjyRB7L_WA6SgBIRY0IM8O5HA61dRY_4WoYNAg
2024/05/10 23:33:35 Connected to NATS server successfully.
Waiting for messages...

Next, we subscribe to the subject and create a channel to receive signals from the system.

// Subscribe to the specified subject using a handler function
service.AddHandler(subject, func(data []byte) error {
    fmt.Println("Received message data:")
    return  PrintData(ctx, service, data) // Process data using PrintData function
})

signalChan := make(chan  os.Signal, 1)
signal.Notify(signalChan, syscall.SIGINT, syscall.SIGTERM)
go  func() {
    <-signalChan
    cancel() // Cancel the context on receiving SIGINT or SIGTERM
}()

// Start serving messages and handle them using the registered handler
service.Serve(ctx)
fmt.Println("Exiting application...")

By following this guide, you'll be equipped to leverage the Synternet Data Layer and receive real-time blockchain data streams using Go. To get a sense of the data formats and potential applications, explore the Synternet Showcase: https://showcase.synternet.com/

You can find the full code for this tutorial here. Feel free to make contributions.

Conclusion

With this guide, you have learned:

The Data Interoperability Problem and how Synternet solves it
Synternet Data Layer
Building with the Golang SDK

This is just the beginning. As you delve deeper into the Synternet network, consider exploring the following resources:

Confidential Smart Contracts & Building w/Oasis Sapphire

tosynthegeek — Mon, 06 May 2024 16:29:30 +0000

Introduction: Confidential Smart Contracts & Oasis Network
- Confidential Smart Contract: A Quick Overview
- Oasis Network: Smart Privacy for Web3
Building a Sapphire Native dApp
- Prerequisites
- Set up the environment for Sapphire and Sepolia
- Build and Compile Smart contract
- Deploying and Interacting with the Auction Contract
Conclusion

Introduction: Confidential Smart Contract & Oasis Network

As blockchain adoption expands across diverse industries, maintaining transaction inputs and contract states private from unauthorized access becomes crucial for safeguarding on-chain privacy. This enables the potential to strike a balance between the inherent transparency of public blockchains and the privacy control offered by confidential smart contracts, ultimately paving the way for widespread adoption in real-world applications.

In this article, we will dive into confidential smart contracts and how we can build with Oasis Sapphire.

Confidential Smart Contract: A Quick Overview

Confidential smart contracts are self-executing programs on a blockchain that can keep data involved in the agreement private, even from unauthorized parties. This is achieved through user-defined permissions that control which data is encrypted and who can access it.

While confidential smart contracts represent a paradigm shift, not every contract or application requires the same level of confidentiality. To address this, Oasis introduces the key design element of customizability. This allows developers to tailor contracts to meet the specific privacy requirements of each use case, ensuring that only the necessary data is kept confidential.

Oasis Network: Smart Privacy for Web3

Oasis Network is a privacy-first, layer-1 blockchain that provides a unique architecture and infrastructure for building confidential and secure applications.

Through its layered architecture, separating consensus and execution into two layers, the Consensus and the Paratime layer, Oasis is able to offer a high degree of scalability, through parallel processing and versatility through the ability to develop specialized ParaTimes.

The Consensus layer is a scalable, high-throughput, secure, proof-of-stake consensus run by a decentralized set of validator nodes.

The Paratimes layer hosts many parallel runtimes (ParaTimes), each representing a replicated compute environment with a shared state.

Building a Sapphire Native dApp

We would be building an auction to demonstrate the difference between confidential and non-confidential computation by analyzing the working of a Solidity smart contract on the Ethereum Sepolia Testnet and the Oasis Sapphire Testnet.

Prerequisites

Before we dive in, ensure you have the following tools and prerequisites in place:

Node.js
Hardhat
Metamask wallet: Configure metamask to connect to Sepolia network and Sapphire testnet to your metamask
Alchemy or Infura: Get your HTTP endpoint for the Sepolia testnet. Here is a guide on how to set it up.
Test tokens: Request for Sepolia test and Sapphire test tokens

Set up environment

Now that we've gathered our tools, it's time to set up our development environment. Here's a step-by-step guide:

Start by running the following commands:

mkdir auction

cd auction

npm init -y

npm install --save-dev hardhat (We will be using typescript)

npx hardhat init

npm install --save-dev @nomicfoundation/hardhat-toolbox @oasisprotocol/sapphire-hardhat

npm i dotenv

code .

To keep sensitive information like your Metamask private key and RPC URL secure, create a .env file in your project directory and store your keys there in the format below:

Modify your Hardhat configuration file (hardhat.config.ts) to recognize the keys from your .env file. Also, add sepolia and Sapphire testnet as networks

import { HardhatUserConfig } from  "hardhat/config";

import  "@oasisprotocol/sapphire-hardhat";

import  "@nomicfoundation/hardhat-toolbox";

require("dotenv").config();


const  config: HardhatUserConfig = {

    solidity:  "0.8.19",

    networks: {

        "sapphire-testnet": {

            url:  "https://testnet.sapphire.oasis.io",

            accounts: [process.env.PRIVATE_KEY],

            chainId:  0x5aff,
        },

        sepolia: {

            url:  process.env.ALCHEMY_API_KEY_URL,

            accounts: [process.env.PRIVATE_KEY],
        },
    },
}; 

export  default  config;

Build and Compile your Contract

In the /contracts directory of your Hardhat project, create a new file named Auction.sol and add the following code to it:

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

import "@oasisprotocol/sapphire-contracts/contracts/Sapphire.sol";

contract Auction {
    // Auction details
    address payable public seller; // Address of the seller
    uint256 public startingPrice; // Starting price of the auction
    uint256 public highestBid; // Highest bid amount
    address public highestBidder; // Address of the highest bidder
    uint256 public auctionEndTime; // Timestamp when the auction ends
    bool public auctionEnded; // Flag to indicate if the auction has ended
    uint256 public bidCount;

    // Struct to store bid details
    struct Bid {
        address bidder;
        uint256 bid;
    }

    Bid[] public bids; // Array to store all bids

    // Events for auction lifecycle
    event BidCreated(address bidder, uint256 amount);
    event AuctionEnded(address winner, uint256 winningBid);

    // Constructor to initialize auction parameters
    constructor(
        address payable _seller, // Address of the seller
        uint256 _startingPrice, // Starting price of the auction
        uint256 _auctionEndTime // Duration of the auction
    ) {
        seller = _seller;
        startingPrice = _startingPrice;
        highestBid = startingPrice;
        auctionEndTime = block.timestamp + _auctionEndTime; // Set the end time of the auction
    }

    /**
     * @notice Allows a user to place a bid in the auction.
     * @dev The bid must be higher than the current highest bid, and the auction must not have ended.
     */
    function bid() external payable {
        require(block.timestamp < auctionEndTime, "Auction has ended");
        require(
            msg.value > highestBid,
            "Bid must be higher than the current highest bid"
        );
        if (highestBidder != address(0)) {
            payable(highestBidder).transfer(highestBid);
        }
        highestBid = msg.value;
        highestBidder = msg.sender;
        Bid memory newBid = Bid(msg.sender, msg.value);
        bids.push(newBid);
        bidCount++;
        emit BidCreated(msg.sender, msg.value);
    }

    /**
     * @notice Allows the highest bidder or seller to check the bid at a given index.
     * @dev The auction must have ended, and only the highest bidder or seller can check bids.
     * @param index The index of the bid to check.
     * @return The bidder's address and bid amount.
     */
    function checkBid(uint256 index) external view returns (address, uint256) {
        require(index <= bidCount, "Wrong Index");
        Bid memory getBid = bids[index];
        require(block.timestamp > auctionEndTime, "Auction is still ongoing");
        require(
            msg.sender == highestBidder || msg.sender == seller,
            "Only Highest Bidder and seller can check bids"
        );
        return (getBid.bidder, getBid.bid);
    }

    /**
     * @notice Returns the timestamp when the auction ends.
     * @return The timestamp when the auction ends.
     */
    function checkAuctionEndTime() external view returns (uint256) {
        return auctionEndTime;
    }

    /**
     * @notice Ends the auction and transfers the highest bid amount to the seller.
     * @dev The auction must have ended.
     */
    function endAuction() external {
        require(block.timestamp >= auctionEndTime, "Auction is still ongoing");
        auctionEnded = true; // Update auction status
        seller.transfer(highestBid); // Transfer the highest bid to the seller
        emit AuctionEnded(highestBidder, highestBid); // Emit AuctionEnded event
    }

    /**
     * @notice Returns the auction details.
     * @return The seller's address, starting price, highest bid amount, highest bidder's address,
     * auction end timestamp, auction end status, and total bid count.
     */
    function getAuctionDetails()
        external
        view
        returns (address, uint256, uint256, address, uint256, bool, uint256)
    {
        return (
            seller,
            startingPrice,
            highestBid,
            highestBidder,
            auctionEndTime,
            auctionEnded,
            bidCount
        );
    }
}

The Auction contract implemets a simple auction system that allows users to bid on an item with the highest bid winning the auction. An auction is initialized with essential parameters like sellers address, starting price and duration. Bidders can participate by placing bids higher than the current highest bid until the auction's predetermined end time. The contract has a checkBid function which offers a limited form of access control, allowing only the highest bidder or the seller to access the details of a specific bid after the auction ends. This restriction prevents other users from viewing bid amounts or bidder information for bids they weren't directly involved in.

Overall, this is a basic auction contract, you can find the contract code here.

Compile your contract by running this command: npx hardhat compile

npx hardhat compile 
Compiled 1 Solidity file successfully

Deploying and Interacting with the Auction Contract

import { ethers } from "hardhat";

/**
 * @notice Retrieves the storage data at a specific slot for a given address.
 * @param address The address of the contract.
 * @param slotNumber The slot number in hexadecimal format.
 * @returns The storage data at the specified slot as a string.
 */
async function getStorageAt(address: string, slotNumber: string) {
  const provider = ethers.provider;
  const result = await provider.getStorage(address, slotNumber);

  return result.toString();
}

/**
 * @notice Decode the transaction input data using the ABI.
 * @param abi The ABI of the contract.
 * @param inputData The input data of the transaction.
 * @returns The decoded transaction data, or an empty object if decoding fails.
 */
function decodeTransactionInput(abi: any[], inputData: string) {
  try {
    const iauction = new ethers.Interface(abi);
    const decodedData = iauction.parseTransaction({ data: inputData });
    return decodedData;
  } catch (error) {
    console.error("Error decoding transaction input:");
    return { args: [] };
  }
}

/**
 * @notice Main function to interact with the Auction contract.
 * @param value The bid amount to place in the auction.
 */
async function main(value: number) {
  const index = 0;
  const address = "0xDA01D79Ca36b493C7906F3C032D2365Fb3470aEC";

  // Deploying the Auction contract
  const Auction = await ethers.getContractFactory("Auction");
  const auction = await Auction.deploy(
    "0xd109e8c395741b4b3130e3d84041f8f62af765ef",
    100,
    60 // 10 minutes for the auction duration
  );
  console.log("Auction contract deployed to: ", await auction.getAddress());

  // Placing a bid in the auction
  console.log("Bidding....");
  const tx = await auction.bid({
    value: value.toString(),
  });
  await tx.wait();
  console.log("Bid successful!");

  // Checking a bid at a specific index
  try {
    console.log("Checking bid at Index: ", index);
    const bid = await auction.checkBid(index);
    console.log("Bid at Index 0 is:", bid);
  } catch (error) {
    console.error("Failed to check bid: Auction is still ongoing");
  }

  // Waiting for the auction to end
  console.log("Waiting....");
  const endTime = await auction.checkAuctionEndTime();
  console.log("Auction endtime is: ", endTime);
  console.log("Still waiting....");
  try {
    await new Promise((resolve) => setTimeout(resolve, 100_000));
    console.log("Checking bid again");
    const bid = await auction.checkBid(index);
    console.log("Bid:", bid);
  } catch (error) {
    console.log("Failed to check bid: Auction is still ongoing");
  }

  // Decoding the transaction input data
  const decodedInput = decodeTransactionInput(
    auction.interface.format(),
    tx.data
  );
  console.log("Decoded data input: ", decodedInput?.args);

  // Retrieving storage data at a specific slot
  const StateData = await getStorageAt(await auction.getAddress(), "0x0");
  console.log("State data at slot 0x0 is: ", StateData);
}

main(120).catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

This script demonstrates how to interact with the auction contract on by performing several actions:

Deployment: Deploys the contract, initializing it with the starting price and auction duration.
Bidding: Places a bid in the auction, confirming the transaction hash.
Bid Access Control: Attempts to check a specific bid while the auction is ongoing, showcasing the access restriction that only allows the highest bidder or seller to view bid details during the auction. It then successfully checks the bid details after the auction ends.
Transaction Input Decoding: Decodes the transaction input data used for checking the bid, extracting relevant information like the bid amount.
State Retrieval Simulation: Simulates retrieving state data at a specific slot.

Deploying to Sepolia

To deploy to sepolia, run the following command:

npx hardhat run scripts/run-auction.ts --network sepolia

The script will produce the following output:

Auction contract deployed to:  0xf1D32C3e2a084aE8694151D66DA647416ed54871
Bidding....
Bid successful!
Checking bid at Index:  0
Failed to check bid: Auction is still ongoing
Waiting....
Auction endtime is:  1714989132n
Still waiting....
Checking bid again
Bid: Result(2) [ '0xDA01D79Ca36b493C7906F3C032D2365Fb3470aEC', 120n ]
Decoded data input:  Result(0) []
State data at slot 0x0 is:  0x000000000000000000000000d109e8c395741b4b3130e3d84041f8f62af765ef

Deploying to Sapphire

To deploy to sepolia, run the following command:

npx hardhat run scripts/run-auction.ts --network sapphire-testnet

The script will produce the following output:

Auction contract deployed to:  0x17a8FdB2526bd5d2049EF5D7A57ff9b54628b67f
Bidding....
Bid successful!
Checking bid at Index:  0
Failed to check bid: Auction is still ongoing
Waiting....
Auction endtime is:  1714987471n
Still waiting....
Checking bid again
Bid: Result(2) [ '0xDA01D79Ca36b493C7906F3C032D2365Fb3470aEC', 120n ]
Decoded data input:  undefined
State data at slot 0x0 is:  0x0

Comparing the results on Sepolia and Sapphire testnets reveals key differences that highlight the presence of confidential data on Sapphire:

Decoding: The script successfully decoded the transaction input data on Sepolia, indicating a standard transaction format. However, on Sapphire, the decoding failed, returning "undefined," suggesting the presence of confidential data inaccessible to standard decoding tools.
State Data: While both networks retrieved data at slot 0x0, the values differed. On Sepolia, the retrieved data contained a specific value, while on Sapphire, it was "0x0." This potentially indicates that the actual auction data on Sapphire is stored in a confidential slot.

These contrasting results demonstrate the fundamental difference between public and confidential networks. Sepolia operates with standard data formats, while Sapphire utilizes confidential storage for specific data, requiring specialized tools like the Oasis SDK for interaction. This comparison effectively showcases the presence and impact of confidentiality features on the Sapphire testnet.

Conclusion

You have successfully built and deployed your first dApp on Sapphire experiencing the power of confidential computation. This journey likely provided valuable insights into the core principles of confidential smart contracts and how they can be implemented to safeguard sensitive data on the blockchain.
As you delve deeper into confidential computation, consider exploring the following resources to broaden your understanding and explore its potential:

Oasis Network Documentation: Dive into the technical specifications and functionalities of the Oasis Network and its confidential computing capabilities. https://docs.oasis.io/
Oasis Community: Join the Oasis developer community to share knowledge, collaborate on projects, and stay updated on the latest developments in the community. https://oasisprotocol.org/
Read on What You Can Build with Sapphire
Check out the Oasis Blog

Exploring ZKSync: A Journey through ZKSync with the Golang SDK

tosynthegeek — Mon, 22 Apr 2024 06:41:17 +0000

Introduction: Zero Knowledge Rollups & zkSync
- Zero Knowledge Rolups: A Quick Overview
- zkSync: Scaling Ethereum’s Technology and Values
Introducing zkSync-go SDK
- Prerequisites
- Setting up the project
Interacting with zkSync using the Golang SDK
- Implementing Deposit
- Implementing Withdrawal
- Implementing Transfer
Conclusion

Introduction: Zero Knowledge Rollups & ZKSync

Zero Knowledge Technology: A Quick Overview

In cryptography, zero-knowledge proof or zero-knowledge protocols is a method by which one party can prove to another party that a given statement is true, without revealing any extra information beyond the proof.

What then are Zero knowledge rollups?

Zero-Knowledge (ZK) rollups are layer-2 scaling solutions for Ethereum that improve transaction throughput and reduce fees. This is achieved by bundling (or "rolling up") transactions into batches and executing them off-chain.

Off-chain computation reduces the amount of data stored on the Ethereum mainnet. Instead of sending each transaction individually, operators submit a cryptographic proof, using zero-knowledge proofs (ZKPs), that verifies the validity of the off-chain computations and the resulting state changes. These proofs are then submitted to the Ethereum mainnet for final settlement, ensuring the system’s security is maintained by leveraging the Ethereum blockchain.

ZKSync: Scaling Ethereum’s Technology and Values

ZkSync is a Zero Knowledge rollup, that uses cryptographic validity proofs to provide scalable and low-cost transactions on Ethereum. It is a user-centric zk-rollup platform with security, user experience, and developer experience as the core focus.

Introducing zkSync-go SDK

The zkSync-go SDK allows you to interact with the zkSync network, perform operations like transfers, deploying of contracts, and even using unique zkSync features like account abstractions.

In this post, we will use the Go SDK to:

Deposit tokens from Ethereum (L1) to the zkSync network(L2)
Withdraw from zkSync to Ethereum
Transfer from one address to another

Prerequisites

Before you dive in, you need the following prerequisites:

Golang >= 1.17, you can follow this installation guide.
Install the SDK for zkSync Era using the command below:
go get github.com/zksync-sdk/zksync2-go
You need a basic understanding of Golang

Setting up the project

Create a new file directory and enable dependency tracking for your code

mkdir zksync

cd zksync

go mod init zksync

code .

Create a new go file and import the following packages.

import (

"context"

"fmt"

"log"

"math/big"


"github.com/ethereum/go-ethereum/accounts/abi/bind"

"github.com/ethereum/go-ethereum/common"

"github.com/ethereum/go-ethereum/ethclient"

"github.com/zksync-sdk/zksync2-go/accounts"

"github.com/zksync-sdk/zksync2-go/clients"

"github.com/zksync-sdk/zksync2-go/utils"

)

Create these as global variables as we would need them all through.

privateKey:= os.Getenv("PRIVATE_KEY") // Create a .env for your private key

toAddress:= common.HexToAddress("0xD109E8C395741b4b3130E3D84041F8F62aF765Ef") // Replacethis with address of your choice

zkSyncEraProvider := "https://sepolia.era.zksync.dev"

ethProvider:= ""  // Import your Ethereum provider URL here

With this you have all we need. Now, dive in.

Interacting with zkSync using the Golang SDK

Implementing Deposit

We are going to start by establishing a connection to both the ZK and Ethereum clients through the providers.

// Connect to the zkSync network
ZKClient, err:= clients.Dial(zkSyncEraProvider)
if  err != nil {
log.Fatal(err.Error())
}
defer  ZKClient.Close() // Close on exit 

fmt.Println("zkSync client connected....")

// Connect to the Ethereum network
ethClient, err:= ethclient.Dial(ethProvider)
if  err != nil {
log.Fatal(err.Error())
}
defer  ethClient.Close() // Close on exit

fmt.Println("Ethereum clients connected......")

This connection serves as a bridge, enabling you to perform actions on the ZKSync network and interact with the Ethereum mainnet.
Now let's create an instance of a wallet associated with the private key we passed in our .env. We also check for the current balance of this wallet so we can compare it to the balance after making the deposit.

// Create a new wallet using the private key and network clients
wallet, err:= accounts.NewWallet(common.Hex2Bytes(privateKey), &ZKClient, ethClient)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("Wallet Created.... ")

// Get balance before deposit. Setting block number to nil so it returns balance at the latest block
balance, err:= wallet.Balance(context.Background(), utils.EthAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("Balance before deposit is: ", balance)

The Balance function allows us to check the balance of a specified token in an address. It accepts 3 arguments:

ctx: A context object used for cancellation or deadline management.
token: The address of the specific token you're interested in. utils.EthAddress represents the address of the wrapped Ethereum token on the zkSync network
at: The block number at which you want to query the balance, when set to nil returns the balance at the latest block.

At this step, we are ready to make a deposit from Ethereum to the zkSync network.

tx, err:= wallet.Deposit(nil, accounts.DepositTransaction{
Token: utils.EthAddress,
Amount: big.NewInt(1000000000), // In Wei
To: wallet.Address(), // Deposits to our own address
})

if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("L1 Tx Hash: ", tx.Hash())

This Deposit function called accounts.DepositTransaction contains details about the deposit transaction:

Token: utils.EthAddress: This specifies that the deposit is for the wrapped Ethereum token (ETH) on ZKSync.
Amount: big.NewInt(1000000000): This sets the deposit amount to 1,000,000,000 Wei (the smallest denomination of Ether).
To: wallet.Address(): This specifies the recipient's address for the deposit. Since it's set to wallet.Address(), the funds are being deposited to the same ZKSync wallet that is initiating the transaction.

This function returns a transaction from Ethereum and an error. So we have to confirm this transaction is successfully included in a block on Ethereum (L1) and retrieve the corresponding transaction receipt for further confirmation.

// Wait for the deposit transaction to be finalized on L1 (Ethereum) network
_, err = bind.WaitMined(context.Background(), ethClient, tx)
if  err != nil {
log.Panic(err)
}

// Get the receipt for Ethereum Transaction
ethReciept, err:= ethClient.TransactionReceipt(context.Background(), tx.Hash())
if  err != nil {
log.Fatal(err.Error())
}

fmt.Println("Reciept of Ethereum Tx: ", ethReciept)

The _ indicates that the function might return a value, but we are not interested in it, we just want our transaction to be mined and successful.

Now you can easily use this receipt from Ethereum to retrieve the corresponding transaction on the ZKSync network. Like on Ethereum we also need to wait for the deposit to be finalized on zkSync.

zkTx, err:= ZKClient.L2TransactionFromPriorityOp(context.Background(), ethReciept)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("L2 Hash:", zkTx)

// Wait for the deposit transaction to be finalized on L2 (zkSync) network (can take 5-7 minutes)
_, err = ZKClient.WaitMined(context.Background(), zkTx.Hash)
if  err != nil {
log.Fatal(err.Error())
}

After some time, the deposit will be finalized on zkSync and we can proceed to check our zkSync balance once again to compare to the initial address.

// Get balance after deposit. Setting block number to nil so it returns balance at the latest block
balance, err= wallet.Balance(context.Background(), utils.EthAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("Balance after deposit:", balance)

Overall this should be your output on your console:

This is a brief overview of what we can do with the Go SDK, next we will go ahead to make a withdrawal from zkSync (L2) to Ethereum (L1).

Implementing Withdrawal

We would get started by creating a connection to both the Ethereum and zkSync networks using the providers declared.

// Connect to the zkSync network
ZKClient, err:= clients.Dial(zkSyncEraProvider)
if  err != nil {
log.Fatal(err.Error())
}
defer  ZKClient.Close() // Close on exit 

fmt.Println("zkSync client connected....")

// Connect to the Ethereum network
ethClient, err:= ethclient.Dial(ethProvider)
if  err != nil {
log.Fatal(err.Error())
}
defer  ethClient.Close() // Close on exit

fmt.Println("Ethereum clients connected......")

This connection would allow you to interact and perform transactions on both networks.
The accounts package from the Go SDK allows us to create a new zkSync wallet object, with this we create an instance of wallet associated with the privateKey we passed in our .env.
For the sake of comparison, we would go ahead and check the current balance of Ethereum in this wallet.

// Create a new wallet using the private key and network clients
wallet, err:= accounts.NewWallet(common.Hex2Bytes(privateKey), &ZKClient, ethClient)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("Wallet Created.... ")

// Get balance before withdrawal. Setting block number to nil so it returns balance at the latest block
balance, err:= wallet.Balance(context.Background(), utils.EthAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("Balance before deposit is: ", balance)

With this, we have all we need to initiate a withdrawal from zkSync to Ethereum using the withdrawal function.

// Initiate withdrawal from zkSync(L2) to Ethereum(L1)
tx, err:= wallet.Withdraw(nil, accounts.WithdrawalTransaction{
Amount: big.NewInt(1000000000),
Token: utils.EthAddress,
To: wallet.Address(),
})
if  err != nil {
log.Fatal(err.Error())
}

The accounts.WithdrawalTransaction struct contains details about the withdrawal transaction we want to initiate.

Amount: big.NewInt(1000000000): This sets the withdrawal amount to 1,000,000,000 Wei (the smallest denomination of Ether).
Token: utils.EthAddress: This specifies that the withdrawal is for the wrapped Ethereum token (ETH) on ZKSync.
To: wallet.Address(): This specifies the recipient address for the withdrawal. Since it's set to wallet.Address(), the funds are being withdrawn back to our address on the Ethereum mainnet (L1) that corresponds to the ZKSync wallet.

Unlike for deposits, we do not have for the transaction to be mined. However, the withdrawal process still involves waiting for the transaction to be finalized on L1. This finalization confirms the state update on the mainnet and unlocks the corresponding funds on the L1 contract.

You can read more about withdrawal delay here

Now, we can easily check our balance after withdrawal to compare it to the initial balance before we initiated the withdrawal.

// Get balance after deposit. Setting block number to nil so it returns balance at the latest block
balance, err= wallet.Balance(context.Background(), utils.EthAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}
fmt.Println("Balance after deposit:", balance)

Your console output should look like this:

This is a brief overview of what we can do to perform a withdrawal from zkSync to Ethereum using the Go SDK, next we will go ahead to make a transfer from our address to another address.

Implementing Transfer

First step?
Guessed right. We have to establish a connection to both the Ethereum and zkSync networks using the providers declared to allow us to interact and perform transactions on both networks.

// Connect to the zkSync network
ZKClient, err:= clients.Dial(zkSyncEraProvider)
if  err != nil {
log.Fatal(err.Error())
}
defer  ZKClient.Close() // Close on exit 

fmt.Println("zkSync client connected....")

// Connect to the Ethereum network
ethClient, err:= ethclient.Dial(ethProvider)
if  err != nil {
log.Fatal(err.Error())
}
defer  ethClient.Close() // Close on exit

fmt.Println("Ethereum clients connected......")

If you recall from the global variables we created, we have a variable toAddress, which is the recipient of our transfer.
After checking for the current balance of our wallet created, we also checked the current balance of this recipient address using the zkClient connection we established, setting the block number to nil to indicate we are looking for the current balance.

// Create a new wallet using the private key and network clients
wallet, err:= accounts.NewWallet(common.Hex2Bytes(privateKey), &ZKClient, ethClient)
if  err != nil {
log.Fatal(err.Error())
} 

fmt.Println("Wallet Created....")
fmt.Println("Checking both balance before initiating transfer....")

// Get wallet balance before transfer
myBalance, err:= wallet.Balance(context.Background(), utils.EthAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}

fmt.Println("My balance before transfer is: ", myBalance)  

// Check recipient balance before transfer
recipientBalance, err:= ZKClient.BalanceAt(context.Background(), toAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}

fmt.Println("Recipient balance before transfer is: ", recipientBalance)

With this we have all we need to initiate a transfer, passing all the details about the transfer transaction:

Token: utils.EthAddress: This specifies that the transfer involves the wrapped Ethereum token (ETH) on ZKSync.
Amount: big.NewInt(1000000000): This sets the transfer amount to 1,000,000,000 Wei (the smallest denomination of Ether).
To: toAddress: This specifies the recipient address for the transfer.

// Transfer token from my wallet to the recipient address
tx, err:= wallet.Transfer(nil, accounts.TransferTransaction{
Token: utils.EthAddress,
Amount: big.NewInt(1000000000),
To: toAddress,
})
if  err != nil {
log.Fatal(err.Error())
}

fmt.Println("Transaction Hash: ", tx.Hash())
fmt.Println("Waiting for transaction to be mined on the blockchain...")

_, err = ZKClient.WaitMined(context.Background(), tx.Hash())
if  err != nil {
log.Fatal(err.Error())
}

After initiating, you have to wait for the ZK-rollup system to process and finalize the batch containing your transfer. This finalization ensures the validity of the transaction and updates the state of the ZKSync network accordingly.

Read more Finality on Ethereum and zkSync here

At this point, we can check for our balance after the transfer to compare it to our balance before the transfer.

// Check wallet balance after transfer
myBalance, err = wallet.Balance(context.Background(), utils.EthAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}

fmt.Println("My balance after transfer is: ", myBalance)

// Check recipient balance after transfer
recipientBalance, err = ZKClient.BalanceAt(context.Background(), toAddress, nil)
if  err != nil {
log.Fatal(err.Error())
}

fmt.Println("Recipient balance after transfer is: ", recipientBalance)

Now we can run our code using the command below: go run transfer/main.go

We should have this output on our console:

You see how easy and fun it is to play around with the Go SDK and how we can perform transfer with it.

Conclusion

This tutorial taught you how to use the Go SDK to interact with the zkSync network and perform transactions. You can find all the code in the zkSync Interaction repo. Feel free to make any contributions.

Here are some helpful resources for understanding and building on zkSync:

Practical Roadmap to Becoming a Scrypto Developer (Radix DLT)

tosynthegeek — Wed, 17 Apr 2024 10:03:43 +0000

Introduction

Scrypto is an asset-focused programming language that builds upon the foundation of Rust to enable developers to create powerful and versatile smart contracts specifically designed for the Radix Network. Scrypto retains the fundamental elements of Rust while introducing a customized set of functions and syntax that seamlessly align with the Radix Engine.

The Radix Engine allows for the execution of smart contracts with assets as the core element.

Why Should You Learn Scrypto?

The most interesting thing about scrypto is the community because it has a wide variety of developers with different levels of experience from beginners (developers with scrypto as their first language) to more experienced developers/builders with multiple years of experience. This has been a boost to the level of creativity and enthusiasm in the community.

Scrypto is also a very easy language to pick up. Though Rust has been known to have a steep learning curve, Scrypto makes this easier as you don't need to delve deeply into Rust's intricacies before diving into Scrypto development. The low entry barrier associated with Scrypto is one of the key factors contributing to its interest within the developer community. It enables individuals to get started more easily, attracting enthusiasts and newcomers to the language.

Key Characteristics of Scrypto

Here are some key features that make Scrypto a useful programming language:

Asset-Oriented: Scrypto treats assets as first-class citizens, streamlining the creation and management of tokens and digital assets.
Safe: Scrypto is designed to be safe and secure, incorporating features like type safety and runtime verification.
Efficient: Scrypto is designed to be efficient, both in terms of code size and execution speed.
Scalable: Scrypto is designed to be scalable, so it can be used to build applications that can handle a large number of users and transactions.

Learning Materials

Before getting into Scrypto it is highly advisable to establish a solid understanding of Rust syntaxes and its underlying mechanics. This foundational knowledge would significantly accelerate your comprehension of Scrypto.

Rust

The recommended starting point for learning rust is The Rust Book. It serves as an excellent resource for grasping the fundamentals. For practical insights, pairing it with Rust by Example Book provides hands-on experience that reinforces your understanding.

If you prefer video-based learning or find videos more effective, Tom McGurl's playlist on “The Rust Lang Book” is an excellent place to start and this is personally recommended if this is your first programming experience. He helps break down each module into digestible bits making it very easy to understand even for beginners.

However, if you are more experienced and simply need a quick refresher on Rust syntax and its functionalities, Let’s Get Rusty’s playlist is a concise option that can get you up and running.

Ultimately, your choice of learning resources should align with your prior experience and preferred learning style, ensuring a smoother transition into your journey of Scrypto development.

Scrypto

For geeks who prefer in-depth reference materials, the Scrypto Documentation is a must-read. It provides detailed explanations of Scrypto's mechanics, features, and best practices.

The Scrypto 101 Course by the Radix Academy provides everything you need to know to write your first smart contract in Scrypto, including the examples and exercises.

When settling with any material, I highly recommend you make the Scrypto Examples Repository a compulsory resource for learning. The hands-on experience would help you learn and understand advanced concepts in a relatively simpler way.

Solidifying your Knowledge

Radix Developer Program

Enroll in the Radix Developer Program, to not only expand your knowledge but also earn recognition for your contributions while honing your Scrypto expertise.

Participate in Challenges

The Scypto Developer Program Incentives are designed to reward developers who actively engage with Scrypto and contribute valuable code examples to support the community. This presents an excellent opportunity to showcase your skills and gain recognition within the Scrypto developer community.

Interact with the Community

As previously mentioned, the most intriguing aspect of the scrypto journey is the remarkably helpful and supportive community. Getting involved with the conversation within the community would not only accelerate your comprehension but would also provide clarity and valuable guidance for newcomers in the community.

Testing Solana Programs (Anchor) with Mocha

tosynthegeek — Wed, 17 Apr 2024 10:03:22 +0000

Introduction

Testing your programs is essential to ensure the reliability and functionality of your code and ensure it performs as intended. In this article, we will provide a comprehensive guide on writing tests using Mocha JS. We'll focus on a program developed by DataKnox in Anchor, a specialized Rust framework for Solana programs.

Here is what the program looks like:

use anchor_lang::prelude::*;

declare_id!("ByxaKZWC2QqigDuUjxH6nMv3MdVgBNzbpdRmiEE3ssn9");

#[program]
pub mod flipper {
    use super::*;

    pub fn initialize(ctx: Context<Initialize>) -> Result<()> {
        let switchAccount = &mut ctx.accounts.switchAccount;
        switchAccount.state = true;
        Ok(())
    }

    pub fn flip(ctx: Context<Flip>) -> Result<()> {
        let switchAccount = &mut ctx.accounts.switchAccount;
        if switchAccount.state {
            switchAccount.state = false
        } else {
            switchAccount.state = true
        }
        Ok(())
    }
}

#[derive(Accounts)]
pub struct Initialize<'info> {
    #[account(init, payer = user, space = 16 + 16)]
    pub switchAccount: Account<'info, SwitchAccount>,
    #[account(mut)]
    pub user: Signer<'info>,
    pub system_program: Program<'info, System>,
}

#[derive(Accounts)]
pub struct Flip<'info> {
    #[account(mut)]
    pub switchAccount: Account<'info, SwitchAccount>,
} 

#[account]
pub struct SwitchAccount {
    pub state: bool,
}

The first step would be to run anchor build to compile the program and generate a keypair that can be used to deploy it.

We also need to get our program ID (an address for the program that our program can be identified with) using the command:

solana address -k target/deploy/flipper-keypair.json. Replace flipper with the name of your program.

In our code, the program ID needs to go in two places:

The declare_id! macro at the top of our program’s source code.
The Anchor.toml file under the key with the same name as your program.

declare_id!("ByxaKZWC2QqigDuUjxH6nMv3MdVgBNzbpdRmiEE3ssn9");

[programs.localnet]
flipper = "ByxaKZWC2QqigDuUjxH6nMv3MdVgBNzbpdRmiEE3ssn9"

Prerequisites

Before we dive into testing, make sure you have the following prerequisites in place:

Solana CLI: Install the Solana Command Line Interface (CLI) tools by following the instructions here.
Node.js and NPM: Ensure you have Node.js and NPM installed on your system. You can download them from nodejs.org.

Setting our Solana Environment

This process involves using a local Solana validator to simulate the Solana blockchain network using the Solana CLI to provide practical insights into the program's behavior.

Generate a Keypair:

We start by generating a key pair for the dev environment by using the command solana-keygen new and you will get an address that you can use to interact with the blockchain.

Configure RPC-URL:

For our local testing, we need to set the RPC-URL to localhost using the command: solana config set --url localhost.

The output should look like this:

Start the Test Validator

The next step would be to start our test validator using the command solana-test-validator. This would help simulate the Solana blockchain locally.

With our test validator running, we can now make requests (like request airdrop, get details about our address, deploy and test our program) to our local blockchain.

Deploy to Localhost

With solana-test-validator running on your local machine, you can deploy the contract with the command: anchor deploy.

Writing the Test in Mocha

When the anchor build command is executed, Anchor automatically generates a test file for us, complete with a basic scaffold for the code. The test is written in Mocha, the it functions are used for the individual tests, and the describe function helps organize and group related tests together.

//Import necessary libraries
const anchor = require("@coral-xyz/anchor");
const assert = require("assert");
const { SystemProgram } = anchor.web3;

// Set up Mocha test suite
describe("flipper", () => {
  // Configure the client to use the local cluster.
  const provider = anchor.AnchorProvider.env();
  anchor.setProvider(provider);
  const program = anchor.workspace.Flipper;
});

We then have two tests for each of our instructions from the flipper program.

Testing the Initialize Instruction

The first test calls the initialize instruction of the flipper program, then fetches the account data and checks if the property of the account is true.

it("Creates and Flip Account", async () => {
    // Generate a keypair
    const switchAccount = anchor.web3.Keypair.generate();
    // Call the initialize function
    await program.methods
      .initialize()
      .accounts({
        switchAccount: switchAccount.publicKey,
        user: provider.wallet.publicKey,
        systemProgram: SystemProgram.programId,
      })
      .signers([switchAccount])
      .rpc();
    // Fetch account data
    const baseAccount = await program.account.switchAccount.fetch(
      switchAccount.publicKey
    );
    assert.ok(baseAccount.state);
    _baseAccount = baseAccount;
  });

Testing the Flip Instruction

The next test calls the flip instruction of the flipper program, specifying the switchAccount as the only account that is needed. Finally, it gets the switchAccount from the Solana cluster and asserts that its state is false.

it("Flip It", async () => {
    const baseAccount = _baseAccount;
    // Call the flip function
    await program.methods
      .flip()
      .accounts({
        accounts: {
          dataAccount: baseAccount.publicKey,
        },
      })
      .rpc();
    // Fetch the account data
    const account = await program.account.dataAccount.fetch(
      baseAccount.publicKey
    );
    assert.ok(account.state == false);
  });

Running the Tests

You can run the tests for your Solana program using the following command:

anchor test

This command will execute your Mocha tests and provide feedback on the program's behavior.

Conclusion

Overall, testing is an essential part of the software development. Testing programs can help to ensure that our codes are of the highest quality and that they meet the intended needs.

To delve deeper into the Solana ecosystem or embark on your journey of building on Solana, the Solana Dev Resource is an excellent starting point.

Solana Account Model: How your data and program are stored on Solana

tosynthegeek — Wed, 17 Apr 2024 10:02:59 +0000

In the world of blockchain technology, Solana stands out for its innovative approach to storing data and executing programs. At the heart of this uniqueness lies the Solana Account Model – a concept that might initially seem challenging but holds the key to unlocking new possibilities for developers.

In this article, we'll delve into the intricacies of this model and explore how you, as a developer, can harness its power.

Demystifying Solana's Account System

Accounts are used for storing data on the Solana blockchain. Accounts have the remarkable capability to store various data types, from valuable tokens like SOL to a program’s state variables such as integers, strings, public keys, and even entire programs themselves.

How Solana's Account Model improve Solana compared to other blockchains

In other chains, transactions occur in sequence (one at a time), while in Solana, transactions are processed in parallel and this is made possible through the unique Solana Account Model among other concepts.

In Ethereum smart contracts, data and state variables are stored within the contract itself. This limitation means that performing actions like retrieving data and transferring assets simultaneously becomes intricate, making it less possible to run transactions in parallel on Ethereum.

In comparison to Solana programs (Smart Contracts in Solana are called Programs), the program and the data/state of the account are separated into accounts. So the program in itself is stateless, it does not hold any data in it. This makes it easy for transactions to run in parallel without conflicts.

Types of Accounts

Recalling that accounts can store any data type, they are categorized into two based on the data type they hold:

Executable accounts: are accounts that are used for storing only program code.
Non-executable accounts: accounts used to hold all other needed data. Example token balances, variables for a program.

Rent

These accounts are stored in the validator's memory and require “rent” to be maintained. Rents are storage costs required to keep accounts alive. This is because validators have to store these accounts which costs them, so every account pays rent to keep the account active.

But there is this cool thing called rent-exempt, which means that if an account holds 2 years' worth of rent, the account becomes exempt from further payments.

You can easily check the rent cost of storage size (in bytes) using the Solana rent command through the Solana Command Line Interface (CLI).

Ownership Dynamics

Every account on Solana is owned, by default, by a built-in program called the “System Program”. Ownership can, however, be transferred from the Solana System Program to other programs. There are a few things to note about ownership and permission of accounts:

Only the owner of an account can change the account’s owner.
Once a program has been finalized, it cannot be changed; it can however be replaced.
Programs can read or credit any account but only the owner of the account can debit it.

Conclusion

The Solana Account Model serves as the foundation for Solana's impressive capabilities which gives developers the power to create efficient applications that can run in parallel, pushing the boundaries of blockchain speed and scalability.

To delve deeper into the Solana ecosystem or embark on your journey of building on Solana, the Solana Dev Resource is an excellent starting point.

Understanding DOM Manipulation with JavaScript

tosynthegeek — Wed, 17 Apr 2024 10:02:28 +0000

Document Object Model or DOM is a programming interface that allows JavaScript to manipulate elements in an HTML document.

When an HTML code is loaded in a browser, the browser parses it. In order to make these web pages and HTML documents dynamic, the browser lets JavaScript tap into the power of the DOM to access nodes and elements within the HTML file in a hierarchical form.

DOM can easily be seen as an Application Programming Interface (API) for accessing and manipulating HTML files.

In this article, we will look at how to use the document object to select elements, traverse the DOM, insert, remove, and replace elements

Selecting Elements in the DOM

You can select elements within the Document Object Model (DOM) using various methods available through the document object. These methods allow you to select either a single element or multiple elements. These methods are:

getElementById()

document.getElementById() access elements with a specific id that matches the one mentioned in the string.

<html>
         <head>
                <title>DOM Manipulation</title>
            <script src="./app.js" defer></script>
        </head>
        <body>
                <h1 id="heading"> JavaScript getElementById() 
              </h1>
            <ul class="parent">
                   <li class="item">First Item</li>
                   <li class="item">Second Item</li>
            </ul>
        </body>
</html>

const element = document.getElementById("heading");

The id is unique within an HTML document. However, HTML is a forgiving language. If the HTML document has multiple elements with the same id, the document.getElementById() method returns the first element it encounters. In cases where the ID given does not exist, it returns null.

getElementByClassName()

document.getElementByClassName() is used to access elements with specific class names. These names would be passed as arguments to the method when it is called.

It returns an array-like (not everything you can do on an array works there) object of the child elements with a specified class name.

These arrays are called HTML collections and are different from true Javascript arrays. Therefore, not all array operations can work with these HTML collections.

Just like document.getElementById(), document.getElementByClassName() method returns the first element it encounters. In cases where the class name given does not exist, it returns null.

Here is a code snippet that describes how getElementsByClassName() works with HTML elements:

<html>
        <head>
            <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
                <nav>
               <ul class="parent">
                    <li class="item">First Item</li>
                    <li class="item">Second Item</li>
               </ul>
                </nav>
        </body>
</html>

const items = document.getElementsByClassName("item");

In the code snippet, the first element with the class item is selected and stored in a variable items.

querySelector()

document.querySelector() is a method that allows you to select the first element that matches the CSS selector.

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
               <nav>
             <ul>
                    <li class="item">First Item</li>
                  <li class="item">Second Item</li>
                  <li class="item">Third Item</li>
             </ul>
               </nav>
        </body>
</html>

const items = document.querySelector("li");
console.log(items);

In this code, the js script uses the document.querySelector("li") to select the first li element.

Selecting Multiple Elements in the DOM

When it comes to selecting multiple elements within the DOM, there are several methods you can use. These methods typically return a collection of elements that matches specific criteria. Here are some commonly used approaches:

querySelectorAll()

document.querySelectorAll() is used to select all elements with a CSS selector. It returns a static NodeList of elements. This means that it does not change or reflect when tag names are deleted to added.

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
               <nav>
             <ul>
                    <li class="item">First Item</li>
                  <li class="item">Second Item</li>
                  <li class="item">Third Item</li>
             </ul>
               </nav>
        </body>
</html>

const items = document.querySelectorAll("li");
console.log(items);

From the above JavaScript code, we can easily select all the elements with the li CSS selector.

P S: This should not be confused with querySelector(). querySelector() selects just the first element with a specific CSS selector. While querySelectorAll() selects all elements with a specific CSS selector

getElementByTagName()

document.getElementByTagName() allows the selection of all elements that match a tag name. It returns a live HTMLCollection of elements. This means that it automatically reflects changes when tag names are deleted to added. For example,

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
                <h1>Tag Name 1</h1>
                <p>This is for some random text</p>
            <h1>Tag Name 2</h1>
                <p>This is for some more random text</p>
                <h1>Tag Name 3</h1>
                <p>This is for some other random text</p>
        </body>
</html>

const headings = document.getElementsByTagName("h1");
console.log(headings);

In the JavaScript code snippet, all of the elements with the tag name h1 are selected and displayed.

Traversing the DOM

DOM Traversing is the process of moving or selecting an element from another element.

It involves navigating the Document Object Model(DOM) tree to access and manipulate elements.

Traversing can occur in three directions:

Upwards
Sideways
Downwards

Upward traversing

This involves accessing a child element from its parent element or ancestors. The most common method used for upward traversing is parentElement().

Using parentElemet or parentNode

You can traverse up the DOM using parentElement() or parentNode(). This lets you access the element/node that encloses the current element.

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
         <body>
           <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>
        </body>
</html>

const item = document.querySelector(".child");
const parentN = item.parentNode
const parentEl = item.parentElement
console.log(parentN);
console.log(parentEl)

In the JavaScript code snippet, the first element with the class child is selected and stored in a variable item. Now, we can use the parentNode and parentElement methods to access this element's parent node and parent element.

Sideways traversing

This involves moving between elements that share the same parent. These elements are also referred to as sibling elements. The most common methods used for sideways traversing are nextElementSibling and previousElementSibling

Using nextElementSibling and previousElementSibling

When navigating the DOM sideways we can select the next element using nextElementSibling and select the previous element using previousElementSibling.

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
           <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>
        </body>
</html>

const firstItem = document.querySelector("li");
console.log(firstItem.nextElementSibling);
const secondItem = document.querySelectorAll("li")[1];
console.log(secondItem.previousElementSibling);

This might be a bit confusing so let’s break down the code:

Line 1 we select the first element with the tag name li and store it in a variable named firstItem.

Line 2 we easily access the next element of the firstItem using the nextElementSibling method.

In line 3 we use querySelectorAll() to access all elements with the tag li, then we use the index [1] to select just the second element with the tag li, storing it in a variable named secondItem”

Line 4 we easily access the previous element of secondItem using the previousElementSibling() method.

PS: This should give further clarity on the differences between querySelector() and querySelectorAll() and how they are used.

Downward Traversing

This involves moving from a parent element to its child elements. In navigating the DOM downwards, we can use the children property to select direct descendants of the current element.

Selecting children Element

In navigating the DOM downwards, we can use the children property to select direct descendants of the current element.

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
           <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>
        </body>
</html>

const parent = document.querySelector(".parent");
const children = parent.children;

In the JavaScript code snippet, the first element with the class parent is selected and stored in a variable parent. Now, we can use the children method to access the descendants of the element.

Creating HTML Elements in JavaScript

We can create new HTML elements from a Javascript code using the document.createElement() method. This method takes an argument of the type of element we want to create.

For example:

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
           <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>
        </body>
</html>

We can use the createElement() method to create a new <li> element in JavaScript code.

const newList = document.createElement("li");

Now, we can easily add some content to the newList using the textContent method;

const newList = document.createElement("li");
newList.textContent = "Fourth Item";
console.log(newList)

The output would be "Fourth Item".

Quite interesting, isn't it? With this, we can easily add elements and text content into existing HTML code in just a few lines of code. We can now go ahead to insert this into the existing list in the HTML code as a fourth Item.

Inserting Elements

We have seen how we can select and create elements, now we can easily insert elements in the DOM.

We can easily do this using the append() or appendChild() method. For example, we would use one of these to insert a new list as the Fourth Item in the HTML code.

<html>
        <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
           <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>
        </body>
</html>

const items = document.querySelector("ul")
const newList = document.createElement("li");
newList.textContent = "Fourth Item";
items.appendChild(newList);

In the preceding code, the ul element and stored in a variable items. Then we create a new li element using the createElement method, storing it in a variable newList. We easily add some content to it using the textElement method.

To add newList to items, we use the append method while passing newList as the parameter. The updated list would be updated to;

First Item
Second Item
Third Item
Fourth Item

Removing and Replacing Elements

Just as we can select and insert elements into the DOM, we can also easily remove elements from the DOM using the remove() method.

For example, let us remove the first item from the list with this method. We would first select the first li element using querySelector and store it in a variable firstItem.

const firstItem = document.querySelector("li");
firstItem.remove();
document.querySelector("li");

Using the remove() method, we deleted the first list from the HTML list, which would now be updated to:

Second Item
Third Item

In cases where we just want to replace the element and not get rid of them, we can use the replaceWith() method.

const newList = document.createElement("li");
newList.textContent = "Fourth Item";
const firstItem = document.querySelector("li")
firstItem.replaceWith(newList);

The list would be updated to:

Fourth Item             
Second Item
Third Item

Cloning DOM Nodes

We can clone a Node using the cloneNode() method. This would return a brand new node and keep the old node. It takes an optional argument which is a boolean argument that is, either true or false.

By default, it is set at false, and in this case, only the selected element is cloned without any nested element.

<html>
        <head>
                <title>Cloning DOM Nodes</title>
                <script src="./app.js" defer></script>
        </head>
        <body>
           <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>
        </body>
</html>

const items = document.querySelector("ul");
const clone = items.cloneNode(false);
console.log(clone);

The output would be:

<ul class="parent"> </ul>

When the argument is passed as true, all descendants of the selected element will be cloned.

const items = document.querySelector("ul");
const clone = items.cloneNode(true);
console.log(clone);

The output in the console would be:

         <ul class="parent">
                <li class="child">First Item</li>
            <li class="child">Second Item</li>
                <li class="child">Third Item</li>
         </ul>

Dynamic NFTs: Everything you need to know

tosynthegeek — Wed, 17 Apr 2024 10:02:01 +0000

In a fast growing industry like web3, everyone is looking out for the new Meta and Microsoft. This birthed the idea of Dynamic NFTs as the next Meta.

Until recently, NFTs have been known to be static assets. Though unique, they couldn’t be altered or updated. The emergence of Dynamic NFTs or dNFTs has brought a new dimension to this and helped solve this problem to a large extent.

What are Dynamic NFTs?

Dynamic NFTs or dNFTs, is a type of NFTs that its metadata can be updated and evolve by programmed features encoded by their creators.. Unlike normal static NFTs, Dynamic NFTs can change some of its inherent traits based on external conditions.

I love this definition by CoinTelegraph

“Dynamic NFTs are real assets similar to living entities. They grow, morph, degrade and regenerate based on external stimuli”

How does Dynamic NFT work?

Dynamic NFTs are the combination of first generation NFT technology (static NFTs) and real-time data feeds. These data feeds can either be on-chain or off-chain. For the case of off-chain data (which holds the more enticing use-cases), this data needs to be added to the blockchain for analysis by the smart contract. Oracles like Chainlink play a pivotal role in performing this service.

Various things cause the change or update, as programmed by the developer, could be a change in weather, the passage of time, an update in sports data, and even interaction with other NFTs.

Dynamic NFTs make all of this possible by using smart contracts to integrate these elements inside the metadata of an NFT. For example, a PFP’s hat might change depending on the weather in France, or a sports star NFT character might show a different emotion depending on the outcome of their most recent game.

Use Cases

Thoughts are this will thrive in the next wave of the NFT bull run and it's no surprise. Dynamic NFTs have begun to prove useful in several industries.

Sports

Dynamic NFTs could be leveraged by professional athletes to take charge of their personal brands and build direct personal relationships with their fans.

Let’s say that we have a dynamic NFT representing a real-world football player. The NFT could have information, such as milestones achieved, records broken, titles won and other statistics, even details like speed, agility, strength, goals scored, assists, etc., stored in the token’s metadata.

However, as the footballer’s career progresses, these details will change as, for example, the player might score a few goals. This means that the dynamic NFT might have the option to fetch off-chain data regarding the player’s progression and update the metadata accordingly. This would not be possible with a static NFT since the metadata would be permanent once someone creates the token in the first place.

Real Estate

For tokenized real estate, details of assets can be updated and represented on its NFT. This would help provide real time changes taht occur to the property, which is of interest to potential buyers.

So, for example, the metadata should present maintenance history, age, market value, past sales, etc. As such, when tokenizing real-world assets such as property, it’s clearly beneficial to have the ability to update and change the metadata of the tokens.

Gaming

Recently in blockchain gaming, characters are updated as new traits and levels are unlocked. This can translate into the character becoming more efficient and having special advantages in-game.

For example, the speed and accuracy of a racecar in a game can improve when a user takes it for servicing and updates its wheels, but as time goes by, the efficiency reduces.

Conclusion

Dynamic NFTs are the combination of first generation NFT technology (static NFTs) and real-time data feeds. These data feeds can either be on-chain or off-chain. Could this be the perfect intersection between real life and NFTs? We will find out

Getting Started with NFT Loans

tosynthegeek — Wed, 17 Apr 2024 10:01:29 +0000

Several DeFi companies offer the ability to lend and stake your crypto to earn interest. At the time of writing, there is more than $14 billion invested in lending companies like Compound, Maker and Aave.

Just as staking, lending and borrowing disrupted the DeFi ecosystem, these same mechanics are being implemented in the NFT space.

NFT staking is used by platforms to provide extra utility and passive income to holders. NFT staking lets holders lock their assets in DeFi platforms to receive rewards. All without the need to sell their NFT collections.

What is NFT Lending?

According to NFTNOW, NFT lending is the act of collateralizing your NFT as a loan in exchange for immediate crypto payment. And it solves the asset class’ most significant problem: liquidity.

Relative to other asset classes, NFTs are relatively illiquid — meaning it’s not easy to quickly sell your NFT for its designated market value in cash (or cryptocurrency). In other words, it can take months for someone to buy your JPEG.

How Does NFT Lending Work?

Platforms that allow NFT loans allow holders to borrow funds and set terms without any intermediary by putting up their asset as collateral — NFT as in this case.

The lender provides liquidity to the holder in exchange for interest. But if the borrower cannot repay the loan on agreed terms, the loan obligation goes into default and the lender gains full access to the NFT collateral. In most cases, this process is autonomously executed by smart contracts on the blockchain.

The process of NFT lending and borrowing is executed through on of two main models both of which has its own pros and cons:

Peer to Peer

This is the easiest and the most straight forward model. It replicates the classic model of lending marketplaces. Peer to peer platforms allows anyone to create loans for different NFT collections and set their terms to receive loan offers without any centralized or third party.

As part of the loan agreement, the platform automatically transfers your NFT into a digital vault — an escrow smart contract — for the duration of the loan.

You get your NFT back into your wallet when you repay the loan before the expiration date. If you default on your loan, the lender will receive your NFT at a huge discount. One of the best aspect of this model is you get flexibility with setting terms for your loan

Peer to Protocol

This model gives users the chance to interact directly with the liquidity pool, rather than relying on a borrower or lender to accept your terms like the peer to peer model.

Similar to DeFi lending protocols, these NFT lending platforms rely on liquidity providers adding crypto funds to a protocol pool. Borrowers can access liquidity immediately after collateralizing their NFTs and locking them up in the protocol’s smart contract-powered digital vaults.

It is through these models that borrowers can access instant loans because of the ready liquidity available in the liquidity pool.

Though peer to protocol is still unproven and experimental, there has been increasing attention lately.

Here is a comparison on the volume between peer to peer and peer to pool models in 2022 made by Delphi Digital

NFT Platforms You Can Get Started With

NFTFi

NFTFi is a peer-to-peer NFT lending protocol, where borrowers collateralize their NFTs and receive loans from lenders — thus allowing borrowers to unlock liquidity for their NFTs.

NFTFi allows NFT owners to use their assets to access the liquidity they need by receiving secured wETH and DAI loans from liquidity providers, in a completely trustless manner. NFT liquidity providers use NFTfi to earn attractive yields or — in the case of loan defaults — to have a chance at obtaining NFTs at a steep discount to their market value.

Pine

Pine is currently a peer to peer lending platform with plans of transitioning into an intersection of peer to peer and peer to protocol model. It is a platform for multiple lenders to list their loan offerings and allows NFT holders to initiate and extend loans with the best terms available on the market.

In the back, the platform operates similar to an exchange that provides an offer book structure and guarantees enforceability of the terms.

When a loan is initiated on the Pine Protocol, the terms and conditions for the loan are defined in a smart contract and the NFT collateral is deposited into the same smart contract.

The smart contract is between the borrower and the lender and depending on different conditions, either party would have the rights to take ownership of the NFT collateral asset.

As the protocol is designed to be decentralized and non-custodial, no one besides the borrower and lender would have access to withdraw the NFT from the smart contract.

BendDAO

BendDAO is the first decentralized peer-to-pool based NFT liquidity protocol. NFT holders are able to borrow ETH through the lending pool using NFTs as collateral instantly, while depositors provide ETH liquidity to earn interest.

The leveraged NFT trading is built on instant NFT-backed loans.

To assign value to the collateralized NFTs, BendDAO uses Chainlink oracles to obtain floor price information from OpenSea and then allow users to instantly access a set percentage of their NFTs floor price as an NFT-backed loan. The NFT is then simultaneously locked within the protocol.

Conclusion

There are a lot of options to choose from when it comes to NFT lending and borrowing. However, remember that financial investment in NFTs and DeFi – or the intersection of both as in this case – presents a myriad of risks, including sudden downturns in the cryptocurrency market, smart contract exploits and regulatory crackdowns.

Although many of these platforms are audited, an audit doesn’t guarantee safety, it only points out the errors in a platform’s code as far as the auditor can spot. However, employing caution, being security conscious, and adopting the best NFT lending practices can prove very beneficial and financially rewarding.

Building a Decentralized Todo List Application on Ethereum

tosynthegeek — Wed, 17 Apr 2024 09:52:12 +0000

Welcome to the exciting world of decentralized applications (dApps) on the Ethereum blockchain! In this step-by-step guide, we'll walk through the process of creating a decentralized todo list application using the Hardhat development framework.

We will cover interesting topics like setting up your development environment, writing a Solidity smart contract, testing it, and deploying it to the Sepolia testnet. Code along for better understanding!

Prerequisites

Before we dive in, ensure you have the following tools and prerequisites in place:

Node
Hardhat: JavaScript framework to interact with the Blockchain.
Metamask: Install Metamaks and obtain your private key. Configure Metamask to connect to the Sepolia network.
Alchemy: Get your alchemy HTTP endpoint for the Sepolia testnet. Here is a guide on how to set it up.
Test Sepolia ETH: Request for some Sepolia ETH from the faucet.

Setting up our environment

Now that we've gathered our tools, it's time to set up our development environment. Here's a step-by-step guide:

Create a new project directory for your application todolist.

mkdir todolist
cd todolist
npm init -y
npm install --save-dev hardhat

Initialize your Hardhat project by running:

npx hardhat init

Choose the option to create a JavaScript project, and accept the default options. Hardhat will generate a sample project and install the necessary dependencies for you.

Open your project folder in your preferred code editor. If you use Visual Studio Code, simply run:

code .

To keep sensitive information like your Metamask private key and Alchemy RPC URL secure, create a .env file in your project directory and store your keys there in the format below:
Install the dotenv package, which will help us work with environment variables:

npm i dotenv

Modify your Hardhat configuration file (usually named hardhat.config.js) to recognize the keys from your .env file:

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

module.exports = {
  solidity: "0.8.19",

  networks: {
    sepolia: {
      url: process.env.ALCHEMY_API_KEY_URL,
      accounts: [process.env.PRIVATE_KEY],
    },
  },
};

Your environment is now ready to perform some magic on the Ethereum blockchain!

Building our Contract

Let's delve into the heart of our todo list application by writing a Solidity smart contract. In the contracts folder, you will find a default 'Lock.sol' file. Begin by locating the 'Lock.sol' file in the 'contracts' folder and rename it to 'TodoList.sol' to align with the name of our contract.

Below is the ‘TodoList’ contract, along with comments to explain what each block of code is doing:

// SPDX-License-Identifier: MIT

// Solidity Version
pragma solidity 0.8.19;

contract TodoList {
    // Struct to represent a task
    struct Task {
        uint id; // Unique task identifier
        uint date; // Timestamp of task creation
        string name; // Task name
        string description; // Task description
        bool isCompleted; // Flag indicating task completion status
        address owner; // Address of the task owner
    }

    // Array to store all tasks
    Task[] public tasks;

    // Mapping to associate user addresses with their task IDs
    mapping(address => uint[]) private userTasks;

    // Constructor function
    constructor() {}

    // Event emitted when a task is created
    event TaskCreated(
        uint id,
        uint date,
        string name,
        string description,
        bool isCompleted,
        address owner
    );

    // Event emitted when a task is marked as completed
    event TaskCompleted(uint id, address owner);

    // Event emitted when a task is deleted
    event TaskDeleted(uint id, address owner);

    // Function to create a new task
    function createTask(string memory name, string memory description) public {
        uint taskId = tasks.length; // Calculate the new task ID
        tasks.push(
            Task(taskId, block.timestamp, name, description, false, msg.sender)
        ); // Create and add the new task to the array
        userTasks[msg.sender].push(taskId); // Update the userTasks mapping
        emit TaskCreated(
            taskId,
            block.timestamp,
            name,
            description,
            false,
            msg.sender
        ); // Emit a TaskCreated event
    }

    // Function to retrieve task details by ID
    function getTask(
        uint id
    )
        public
        view
        returns (uint, uint, string memory, string memory, bool, address)
    {
        // Ensure the task ID is valid
        require(id < tasks.length, "Task ID does not exist"); 
        Task storage task = tasks[id]; // Retrieve the task from storage
        return (
            task.id,
            task.date,
            task.name,
            task.description,
            task.isCompleted,
            task.owner
        ); // Return task details
    }

    // Function to mark a task as completed
    function markTaskCompleted(uint id) public {
        // Ensure the task ID is valid
        require(id < tasks.length, "Task ID does not exist"); 
        Task storage task = tasks[id]; // Retrieve the task from storage
        require(
            task.owner == msg.sender,
            "Only the owner can complete the task"
        );
        // Ensure the task is not already completed
        require(!task.isCompleted, "Task is already completed"); 
        task.isCompleted = true; // Mark the task as completed
        emit TaskCompleted(id, msg.sender); // Emit a TaskCompleted event
    }

    // Function to delete a task
    function deleteTask(uint id) public {
        // Ensure the task ID is valid
        require(id < tasks.length, "Task ID does not exist"); 
        Task storage task = tasks[id]; // Retrieve the task from storage
        // Ensure only the owner can delete the task
        require(task.owner == msg.sender, "Only the owner can delete the task"); 
        emit TaskDeleted(id, msg.sender); // Emit a TaskDeleted event

        // Delete the task by replacing it with the last task in the array 
        // and reducing the array size
        uint lastIndex = tasks.length - 1;
        if (id != lastIndex) {
            Task storage lastTask = tasks[lastIndex];
            tasks[id] = lastTask;
            userTasks[msg.sender][id] = lastIndex;
        }
        tasks.pop();
        userTasks[msg.sender].pop();
    }

    // Function to retrieve all task IDs belonging to the caller
    function getUserTasks() public view returns (uint[] memory) {
        // Return the task IDs associated with the caller's address
        return userTasks[msg.sender]; 
    }
}

Testing our Contract

Testing our contract is essential to guarantee its reliability and functionality to ensure it performs as intended. In an industry prone to hacks and exploits, writing tests is very necessary to make sure we don't leave our contract vulnerable to exploits.

Writing our Test in Mocha

We'll use Mocha for testing, so let's set up our tests. Inside the test folder, rename the Lock.js file to test.js and replace the code with the following:


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

describe("TodoList contract", function () {
  let TodoList;
  let todolist;
  let owner;

  before(async function () {
    [owner] = await ethers.getSigners();

    // Deploy the TodoList contract
    todolist = await ethers.deployContract("TodoList");
    // await TodoList.waitForDeployment();
  });

  it("should create a new task", async function () {
    const taskName = "Sample Task";
    const taskDescription = "This is a sample task description";

    // Create a new task
    await todolist.createTask(taskName, taskDescription);

    // Retrieve the task details
    const [id, date, name, description, isCompleted, taskOwner] =
      await todolist.getTask(0);

    expect(id).to.equal(0);
    expect(name).to.equal(taskName);
    expect(description).to.equal(taskDescription);
    expect(isCompleted).to.equal(false);
    expect(taskOwner).to.equal(owner.address);
  });

  it("should mark a task as completed", async function () {
    // Mark the task at index 0 as completed
    await todolist.markTaskCompleted(0);

    // Retrieve the task details
    const [, , , , isCompleted] = await todolist.getTask(0);

    expect(isCompleted).to.equal(true);
  });

  it("should delete a task", async function () {
    // Create a new task
    await todolist.createTask(
      "Task to be deleted",
      "This task will be deleted"
    );

    // Delete the task at index 1
    await todolist.deleteTask(1);

    // Attempt to retrieve the deleted task (should throw an error)
    let errorOccurred = false;
    try {
      await todolist.getTask(1);
    } catch (error) {
      errorOccurred = true;
    }

    expect(errorOccurred).to.equal(true);
  });

  it("should retrieve the user's tasks", async function () {
    // Create a new task
    await todolist.createTask("User's Task", "This is the user's task");

    // Retrieve the user's tasks
    const userTasks = await todolist.getUserTasks();

    // Expect that there is at least one task
    expect(userTasks.length).to.be.at.least(1);
  });
});

To test our contract, we run the common:

npx hardhat test

The response should look like this:

Deploying our Contract

Now, the thrilling part - deploying our smart contract to the Sepolia network. We'll write a deployment script to make this happen.

Writing our Deployment Script

In the scripts folder, you will find a deploy.js file with some sample code. Replace the JavaScript code with the following:

// Import the ethers library from the Hardhat framework
const { ethers } = require("hardhat");

// Define an asynchronous main function for contract deployment
async function main() {
  // Deploy the contract
  const TodoList = await ethers.deployContract("TodoList");

  // Log message to show deployment in progress
  console.log("Deploying contract.....");

  // Wait for the deployment of the contract to complete
  await TodoList.waitForDeployment();

  // Log the deployment target (contract address) to the console
  console.log(`TodoList deployed to ${TodoList.target}`);
}

// Execute the main function, and handle any errors that may occur
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

To deploy our contract to the Sepolia network, use the command:

npx hardhat run scripts/deploy.js --network sepolia

NB: If you intend to deploy your smart contract to a different network you can easily replace sepolia with the network of your choice.

This should take some seconds as we are deploying to a testnet. You'll receive confirmation of the contract deployment, along with the contract's address.

Now you can experience the excitement of your decentralized todo list coming to life! Go ahead and copy your contract address and verify its presence on the Sepolia Testnet Explorer just like you can do on the Ethereum mainnet. Super Interesting!

Conclusion

You have successfully built and deployed your first dApp to the Ethereum Blockchain. As a next step, I highly recommend the following resources:

Lumos Academy: Lumos Academy by Lumos Labs is a platform dedicated to (aspiring) Web3 developers who are learning Web3 development

Ethereum Development Tutorial: This curated list of community tutorials covers a wide range of Ethereum development topics

Hope you enjoyed the article! If you have any questions or comments, feel free to drop them below or reach out to me on Twitter!

Forem: tosynthegeek

Building with Supra: Powering Decentralized Applications with Better Data

Building on Morph

Deploying to Morph Testnet

Synternet Data Layer

Confidential Smart Contracts & Building w/Oasis Sapphire

Deploying to Sepolia

Deploying to Sapphire

Exploring ZKSync: A Journey through ZKSync with the Golang SDK

Practical Roadmap to Becoming a Scrypto Developer (Radix DLT)

Introduction

Why Should You Learn Scrypto?

Key Characteristics of Scrypto

Learning Materials

Rust

Scrypto

Solidifying your Knowledge

Further Reading

Testing Solana Programs (Anchor) with Mocha

Introduction

Prerequisites

Setting our Solana Environment

Generate a Keypair:

Configure RPC-URL:

Start the Test Validator

Deploy to Localhost

Writing the Test in Mocha

Testing the Initialize Instruction

Testing the Flip Instruction

Running the Tests

Conclusion

Solana Account Model: How your data and program are stored on Solana

Demystifying Solana's Account System

How Solana's Account Model improve Solana compared to other blockchains

Types of Accounts

Rent

Ownership Dynamics

Conclusion

Understanding DOM Manipulation with JavaScript

Selecting Elements in the DOM

getElementById()

getElementByClassName()

querySelector()

Selecting Multiple Elements in the DOM

querySelectorAll()

getElementByTagName()

Traversing the DOM

Upward traversing

Using parentElemet or parentNode

Sideways traversing

Using nextElementSibling and previousElementSibling

Downward Traversing

Selecting children Element

Creating HTML Elements in JavaScript

Inserting Elements

Removing and Replacing Elements

Cloning DOM Nodes

Dynamic NFTs: Everything you need to know

What are Dynamic NFTs?

How does Dynamic NFT work?

Use Cases

Sports

Real Estate

Gaming

Conclusion

Getting Started with NFT Loans

What is NFT Lending?

How Does NFT Lending Work?

Peer to Peer

Peer to Protocol

NFT Platforms You Can Get Started With

NFTFi

Pine

BendDAO

Conclusion

Building a Decentralized Todo List Application on Ethereum

Prerequisites

Setting up our environment

Building our Contract

Testing our Contract