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.

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

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

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;
}

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

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.

PreviousThe Benefits of Using web:// Protocol NextCode Example

Last updated 5 months ago

Introduction

How `setWebPageURL` Works

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

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

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.

Introduction

How setWebPageURL Works

Use Case

Best Practice

Using setWebPageHTML, setWebPageCSS, and setWebPageJS

Introduction

How setWebPageURL Works

Use Case

Best Practice

Using setWebPageHTML, setWebPageCSS, and setWebPageJS

HTML

CSS

JS

Example

CSS and JS Integration

Conclusion

HTML

CSS

JS

Example

CSS and JS Integration

Conclusion

How `setWebPageURL` Works

Using `setWebPageHTML`, `setWebPageCSS`, and `setWebPageJS`

How `setWebPageURL` Works

Using `setWebPageHTML`, `setWebPageCSS`, and `setWebPageJS`