ChainnetAI
  • Introduction
  • Overview
    • Vision and Mission
    • What Problems ChainNet Solves
    • Why ChainNet is Unique
  • Getting Started
    • Navigating the Interface
    • Basic Browser Features
    • Built-in Extensions
  • Using web:// Protocol
    • Introduction to the web:// Protocol
    • How to Browse Contracts Directly
  • Hosting Websites On-chain
    • The Benefits of Using web:// Protocol
    • How to Use ChainNet Functions
    • Code Example
    • ChainNet's Expanded Chain Support
  • Ecosystem
    • Utility and Benefits of Holding $CNAI
    • ChainNet Roadmap
    • Revenue Sharing and Future Streams
    • Frequently Asked Questions
Powered by GitBook
On this page
  • On-Chain Website Example: ContractWithWebPage
  • Contract Address​
  • How to Access the On-Chain Website​
  • ABI (Application Binary Interface)​
  • View the Contract on Etherscan​
  • Conclusion​
  1. Hosting Websites On-chain

Code Example

PreviousHow to Use ChainNet FunctionsNextChainNet's Expanded Chain Support

Last updated 5 months ago

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

  • Address:

  • Name: ContractWithWebPage

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.

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.

[{"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"}]

web://0x0f69f7a5d62A9eA2857a7e08d708A93E469c02Ec

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

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.

ABI (Application Binary Interface)

ABI Code

Example URL

View the Contract on Etherscan

Etherscan Link:

Conclusion

​
0x0f69f7a5d62A9eA2857a7e08d708A93E469c02Ec
​
​
​
​
​
View on Etherscan
​