Skip to main content

Code Example

On-Chain Website Example: ContractWithWebPage

Explore how you can host a fully functional website directly on-chain using ChainNet. Below is an example of a smart contract named ContractWithWebPage deployed on the Ethereum blockchain.

Contract Address​

How to Access the On-Chain Website​

/**
 *Submitted for verification at Etherscan.io on 2024-09-25
*/

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

contract ContractWithWebPage {

    string private html;
    string private css;
    string private js;
    string private url;

    constructor() {
        html = "<html><head></head><body><div class='center'>Hello World</div></body></html>";
        css = "body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; }"
              ".center { display: flex; justify-content: center; align-items: center; height: 100%; }";
        js = "";
        url = "";
    }

    // Setters
    function setWebPageHTML(string memory _html) public {
        html = _html;
    }

    function setWebPageCSS(string memory _css) public {
        css = _css;
    }

    function setWebPageJS(string memory _js) public {
        js = _js;
    }

    function setWebPageURL(string memory _url) public {
        url = _url;
    }

    // Getters
    function getWebPageHTML() public view returns (string memory) {
        return html;
    }

    function getWebPageCSS() public view returns (string memory) {
        return css;
    }

    function getWebPageJS() public view returns (string memory) {
        return js;
    }

    function getWebPageURL() public view returns (string memory) {
        return url;
    }
}

You can access the on-chain website hosted within this contract directly via the web:// protocol in the ChainNet browser. Simply enter the contract address into the ChainNet browser’s address bar using the format web://0x0f69f7a5d62A9eA2857a7e08d708A93E469c02Ec.

ABI (Application Binary Interface)​

The ABI (Application Binary Interface) is a crucial component that defines the methods and structures in which data is interacted with on the smart contract. Below is the ABI for the ContractWithWebPage.

ABI Code​

[{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"getWebPageCSS","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getWebPageHTML","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getWebPageJS","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getWebPageURL","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"_css","type":"string"}],"name":"setWebPageCSS","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_html","type":"string"}],"name":"setWebPageHTML","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_js","type":"string"}],"name":"setWebPageJS","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"_url","type":"string"}],"name":"setWebPageURL","outputs":[],"stateMutability":"nonpayable","type":"function"}]

Example URL​

web://0x0f69f7a5d62A9eA2857a7e08d708A93E469c02Ec

View the Contract on Etherscan​

You can also view the contract and its transactions on Etherscan by following the link below:

Conclusion​

This example demonstrates the power and flexibility of hosting websites directly on the blockchain using ChainNet. By leveraging smart contracts, developers can create secure, censorship-resistant websites that are always accessible and immutable.