Skip to main content

How to Use ChainNet Functions

Introduction​

ChainNet offers a groundbreaking approach to hosting websites directly on-chain through a set of smart contract functions: setWebPageHTML, setWebPageCSS, setWebPageJS, and setWebPageURL. These functions provide developers with the flexibility to store, update, and retrieve their web content in a decentralized manner. This guide will dive deep into how these functions work, why they are essential, and how to utilize them effectively for on-chain website hosting.

How setWebPageURL Works​

The setWebPageURL function allows you to override the on-chain HTML, CSS, and JS with a direct link to an external website. When this function is set to a non-empty URL, ChainNet will load the page from that URL, bypassing the on-chain content.

Use Case​

You may want to link to a dynamic or larger website that is impractical to store on-chain due to gas costs.

Best Practice​

If you want to utilize on-chain content instead, ensure that getWebPageURL returns an empty string (""). This will trigger the browser to load the HTML, CSS, and JS stored within the smart contract.

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

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

Using setWebPageHTML, setWebPageCSS, and setWebPageJS​

These functions allow you to store the core components of your webpage directly on-chain. This content can be accessed, modified, and rendered directly by ChainNet.

HTML​

Stores the structure of your webpage. This can include elements like <div>, <p>, <img>, and more.

CSS​

Defines the styling of your webpage. It is automatically inserted into the <head> section of your HTML.

JS​

Contains the JavaScript necessary for interactive elements on your page.

Storing and Retrieving HTML The setWebPageHTML function lets you store your webpage's HTML content directly on-chain. This is where you define the structure and content of your webpage.

function setWebPageHTML(string memory _html) public {
    webPageHTML = _html;
}

function getWebPageHTML() public view returns (string memory) {
    return webPageHTML;
}

Example​

Here’s how you might structure a simple "Hello World" page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

CSS and JS Integration​

  • CSS: This is where you define the visual appearance of your webpage. The CSS you store on-chain using setWebPageCSS is directly injected into the <head> section of your HTML.

  • JS: This function stores JavaScript code, enabling interactive elements on your webpage. It's crucial for dynamic content, form validations, animations, etc.

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

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

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

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

Conclusion​

The setWebPageHTML, setWebPageCSS, setWebPageJS, and setWebPageURL functions empower developers to fully utilize the blockchain for decentralized web hosting. Whether you want to host an entire site directly on-chain or simply link to an off-chain resource, ChainNet's robust set of functions makes it possible.

By embracing these tools, you not only ensure that your content is secure and censorship-resistant but also contribute to the growing ecosystem of decentralized, blockchain-based web technologies.