index.html

<h1>Ethereum Static Websites</h1>

<h2>Any data you attach on an ethereum transaction can now be a static webpage</h2>

<a target="_blank" href="/t#0xd2426eaa74bc162f2738295f58376f46ca9dd6705f450ff5dc805e4632fd7826">View Sample Hello world Webpage on Ethereum Blockchain</a>
<br>
<a target="_blank" href="https://etherscan.io/tx/0xd2426eaa74bc162f2738295f58376f46ca9dd6705f450ff5dc805e4632fd7826">Transaction on Blockchain</a>

<br><br>

<a target="_blank" href="/t#0x4586856e98a800c277f1fe0b129a52c9e1e352caed88999d0c82ff8565937170">View Sample Webpage #2 on Ethereum Blockchain</a>
<br>
<a target="_blank" href="https://etherscan.io/tx/0x4586856e98a800c277f1fe0b129a52c9e1e352caed88999d0c82ff8565937170">Transaction on Blockchain</a>

<br><br>

<a target="_blank" href="/t#0x3bedf12d8c7b4ca40dc66d4d2f6043e0179b3e66a60cdc2c7c3a6d809a8f7720">View This Webpage #3 on Ethereum Blockchain</a>
<br>
<a target="_blank" href="https://etherscan.io/tx/0x3bedf12d8c7b4ca40dc66d4d2f6043e0179b3e66a60cdc2c7c3a6d809a8f7720">Transaction on Blockchain</a>
<br><br>

<a target="_blank" href="/t#0x8304c760938b30d17c85b86cb995ff59ef1287197ea2797cea59dc90e2908f21">View Passage from A Tale of Two Cities</a>
<br>
<a target="_blank" href="https://etherscan.io/tx/0x8304c760938b30d17c85b86cb995ff59ef1287197ea2797cea59dc90e2908f21">Transaction on Blockchain</a>
<br><br>

<a target="_blank" href="/t/#0x93e29afee14093f1159ff34ac8703b10dc7e52b409ffac2369f8c520e804068a">View 2017 blog post</a>
<br>
<a target="_blank" href="https://etherscan.io/tx/0x93e29afee14093f1159ff34ac8703b10dc7e52b409ffac2369f8c520e804068a">Transaction on Blockchain</a>
<br><br>




<h2>View Ethereum transaction as static webpage</h2>

Enter an ethereum transaction to see as webpage:
<input type="text" id="txn">
<button id="see-transaction">See Transaction</button>

<br><br>

As a sample you can enter
<br>
0xd2426eaa74bc162f2738295f58376f46ca9dd6705f450ff5dc805e4632fd7826
<br>
0x4586856e98a800c277f1fe0b129a52c9e1e352caed88999d0c82ff8565937170
<br>

<h2>Simple Publisher</h2>

<button class="enableEthereumButton">Connect Wallet</button>
<h2>Account: <span class="showAccount"></span></h2>


<textarea id="ascii-publish" placeholder="Enter your html here">
</textarea>
<br>
<button id="publish-button">Publish to Ethereum Blockchain</button>
<span id="bytecount">0</span><span> bytes</span>

<p>Clicking the Publish button will pop up a dialog to confirm the transaction and set the data for you. The price you will pay is 0 ETH + the gas price</p>

<div class="publish-msg"></div>

<h2>How to Publish Webpage</h2>

1. First download the <a href="metamask.io">metamask chrome extension</a>, though you could use any way of sending ether that lets you attach input data. You'll also need ether in your wallet.
<br>
2. Create your html web page and enter it in the textarea above.<br>
3. Click the button "Publish to Ethereum Blockchain"<br>
4. That's it! Now go find the transaction hash and that will have the info to save your webpage.



<hr>

<h2>Manual - Encode Your Webpage as hex data to add to a transaction</h2>

<h3>Convert ASCII Text to Hex</h3>
<textarea id="ascii">
Enter your html here
</textarea>
<br>
<button id="convert-to-hex">Convert to Hex</button>


<h4>Your Hex Result Here. Copy this as the input to the transaction</h4>
<textarea id="hex">Your hex result will show here. Copy this as the input to the transaction.</textarea>
<br>
<button id="convert-to-ascii">Convert to ASCII</button>

<h2>How to Manually Publish Webpage</h2>

1. First download the metamask chrome extension, though you could use any way of sending ether that lets you attach input data. You'll also need ether in your wallet.
<br>
2. Create your html web page.<br>
3. Copy your web page into the first textarea, and click, "Convert to Hex"<br>
4. Copy your resulting hex to your clipboard<br>
5. Now create a transaction in metamask. You'll click send, then type in another wallet address you own. You can send some minimal amount. Then copy your hex result into the input section. <br>
6. That's it! Now go find the transaction hash and that will have the info to save your webpage.


<div class="message"></div>

<h4>Other technical details</h4>

<p>
In the <a href="https://etherscan.io/tx/0x4586856e98a800c277f1fe0b129a52c9e1e352caed88999d0c82ff8565937170">sample</a> above (sent in June 2017) the transaction included 913 bytes of data. The cumulative gas used was 104084. The actual cost was $0.56. The gas limit is right now around 3.14 million. There is a limit on the size of the pages which would be the size that hits the max gas limit. It would get more expensive to store larger web pages but for basic pages or text it is cheap to store forever.
</p>



<h4>Author</h4>
This website is made by Jeremy Keeshin. <br>
<a href="http://twitter.com/jkeesh">Twitter</a><br>
<a href="https://github.com/jkeesh/etherstatic">View source on github</a><br>
Using ethereum nodes with <a href="https://www.alchemyapi.io/">Alchemy API</a>.


<style>
textarea{
    width: 400px;
    height: 200px;
    font-family: monospace;
    margin-top: 5px;
    word-wrap: break-word;
}

.publish-msg{
    color: blue;
}

</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

<script>
if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask is installed!');
}

// Source https://docs.metamask.io/guide/getting-started.html#basic-considerations
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {
  getAccount();
});


async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  const account = accounts[0];
  showAccount.innerHTML = account;
}

ethereum.on('accountsChanged', function (accounts) {
  const account = accounts[0];
  showAccount.innerHTML = account;
});


String.prototype.convertToHex = function (delim) {
    return this.split("").map(function(c) {
        return ("0" + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(delim || "");
};

function hex2a(hexx) {
    var hex = hexx.toString();//force conversion
    var str = '';
    for (var i = 0; i < hex.length; i += 2)
        str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    return str;
}


async function sendTransaction(result) {
    const transactionParameters = {
      nonce: '0x00', // ignored by MetaMask
      //gasPrice: '0x09184e72a000', // customizable by user during MetaMask confirmation.
      gas: '0x7208', // customizable by user during MetaMask confirmation.
      to: '0xf639fFF07E0ef4e885B9Cb298CC5E25D0D7A09b6', // Required except during contract publications.
      from: ethereum.selectedAddress, // must match user's active address.
      value: '0x00', // Only required to send ether to the recipient from the initiating external account.
      data: result, // Optional, but used for defining smart contract creation and interaction.
      chainId: '0x3', // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask.
    };

    // txHash is a hex string
    // As with any RPC call, it may throw an error
    const txHash = await ethereum.request({
      method: 'eth_sendTransaction',
      params: [transactionParameters],
    })
    .then((txHash) => {
        console.log(txHash)

        // If you get a transactionHash, you can assume it was sent,
        // or if you want to guarantee it was received, you can poll
        // for that transaction to be mined first.
        var link = "<a target='_blank' href='https://etherscan.io/tx/" + txHash + "'>View transaction on blockchain.</a>";

        link += " <a target='_blank' href='http://etherstatic.com/t#" + txHash + "'>View webpage.</a>";

        renderMessage('.publish-msg', 'Transaction Sent. ' + link);
    })
    .catch((error) => console.error);

    // }, function (err, transactionHash) {
    //     if (err) return renderMessage('.publish-msg', 'There was a problem!: ' + err.message);

    // });

}

$(function(){

    $("#see-transaction").click(function(){
        var txn = $("#txn").val();
        window.location.href = '/t#' + txn;
    });

    $("#ascii-publish").keyup(function() {
        var val = $("#ascii-publish").val().length;
        $("#bytecount").html(val);
    });

    $("#convert-to-ascii").click(function(){
        var val = $("#hex").val();
        var result = hex2a(val);
        $("#ascii").val(result);
    });

    $("#convert-to-hex").click(function(){
        var val = $("#ascii").val();
        var result = val.convertToHex();
        $("#hex").val(result);
    });

    $("#publish-button").click(function(){

        var val = $("#ascii-publish").val();
        var result = val.convertToHex();

        console.log("data");
        console.log(result);

        sendTransaction(result)



    });
});



//////////////////////////////////////////
/// Metmask tip button

// var MY_ADDRESS = '0xf639fFF07E0ef4e885B9Cb298CC5E25D0D7A09b6';
// var tipButton = document.querySelector('.tip-button');
// tipButton.addEventListener('click', function() {
//   if (typeof web3 === 'undefined') {
//     return renderMessage('<div>You need to install <a href=“https://metmask.io“>MetaMask </a> to use this feature.  <a href=“https://metmask.io“>https://metamask.io</a></div>');
//   }

//   var tipAmount = $("#tip-amount").val();
//   console.log(tipAmount);

//   var user_address = web3.eth.accounts[0];
//   web3.eth.sendTransaction({
//     to: MY_ADDRESS,
//     from: user_address,
//     value: web3.toWei(tipAmount, 'ether'),
//   }, function (err, transactionHash) {
//     if (err) return renderMessage('.message', 'There was a problem!: ' + err.message);
//     // If you get a transactionHash, you can assume it was sent,
//     // or if you want to guarantee it was received, you can poll
//     // for that transaction to be mined first.
//     renderMessage('.message', 'Thanks for the generosity!');
//   });
// });
function renderMessage (selector, message) {
  var messageEl = document.querySelector(selector);
  messageEl.innerHTML = message;
}


</script>