Million Ether Homepage

Storing Colors in a Pixel Grid

Million Ether Page Essential Smart Contract

Tip: Mining only when there are transactions

Tip: Using Remix IDE

Getting Started

Getting The Pixels and Ethereum Events

Building a DApp UI

Drawing in HTML Canvas

Using Websockets with Web3

We don't need the checkBalance function anymore, so let's get rid of it.

Web3 and Events Over WebSockets

Drawing Pixels from the Blockchain

Viewing Pixels

The rest of the script can be found in `scripts/buy-pixels-001-read.js` below

Buying An Image -- Reading Pixels

Buying An Image -- Sending Transactions

Pixel bidding and structs

Payable Contracts, payable Functions

Contract Owner and require

Payable color pixel function

Buying Pixels

Sending funds from a contract

The safer way to send funds from a contract

Also note that any sort of math like this _should_ be checking for overflows, which we'll talk about later.

The Pull Payment Pattern - Withdraw payments when outbid

Million Ether Homepage Summary

Auctioning Pixels

solidity

In this course, we'll build a DApp inspired by [The Million Dollar Homepage](https://en.wikipedia.org/wiki/The_Million_Dollar_Homepage). We'll build a 1 million pixel page, and each pixel can be colored by placing the highest bid.

In this course we'll walk through every step of writing a smart contract, deploying it, hosting auctions, and connecting it to the browser through web3. 

If you're looking to build real, full-stack ethereum Dapps, then this is a perfectly-sized example.

We'll build a DApp inspired by the Million Dollar Homepage, powered by an auction on the Ethereum blockchain

Let's build the essential contract for the Million Ether page. First, let's make a place for it.

mkdir -p ~/courses/newline-web3/million-ether-page
cd ~/courses/newline-web3/million-ether-page
mkdir contracts
# edit contracts/MillionEtherPage.sol

We're going to be storing our pixels in a 1000x1000 grid. The zero-zero point is the top left with x increasing to the right, and y increasing towards the bottom.

Remember that we're storing each pixel as 3 bytes. The datatype for this in Solidity is 

. In our contract, we'll represent this grid, initially, as a two dimensional array of 

// MillionEtherPage-001.sol
pragma solidity ^0.4.11;

contract MillionEtherPage {
  bytes3[1000][1000] public pixels;

  function colorPixel(uint x, uint y, bytes3 color) {
    pixels[x][y] = color;
  }
}

This array is going to be stored in our contract's storage. That is, every node on the Ethereum network will hold a copy of these pixels. 

 which means that Solidity will automatically create a public getter function to read these values.

To set a pixel color, we'll use the function 

 - it accepts an unsigned integer for the 

When this function is called, it will update the pixel at the appropriate location.

This contract is simple. We're storing a million pixels in our contract, with no restriction. This is just the first version. Over the next few videos we're going to talk about how bid for and buy pixels, how to emit events when pixels change, and how to give refunds when someone is outbid.

While those ideas might sound simple, there are a lot of tricky details that we're going to work through along the way.

---
title: Million Ether Page Essential Smart Contract


slug: 'million-ether-page-essential-smart-contract'
thumbnail: https://embed-ssl.wistia.com/deliveries/f9e8689709e2ae83e0dbab357af865a1bf812222.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/uecz4icrkh
description: ""



---

Let's build the essential contract for the Million Ether page. First, let's make a place for it.

    mkdir -p ~/courses/newline-web3/million-ether-page
    cd ~/courses/newline-web3/million-ether-page
    mkdir contracts
    # edit contracts/MillionEtherPage.sol

We're going to be storing our pixels in a 1000x1000 grid. The zero-zero point is the top left with x increasing to the right, and y increasing towards the bottom.

[slide 1000x1000x grid. Origin incrementing top-left]

Remember that we're storing each pixel as 3 bytes. The datatype for this in Solidity is `bytes3`. In our contract, we'll represent this grid, initially, as a two dimensional array of `bytes3`.

    // MillionEtherPage-001.sol
    pragma solidity ^0.4.11;

    contract MillionEtherPage {
      bytes3[1000][1000] public pixels;

      function colorPixel(uint x, uint y, bytes3 color) {
        pixels[x][y] = color;
      }
    }

This array is going to be stored in our contract's storage. That is, every node on the Ethereum network will hold a copy of these pixels. 

We'll mark these pixels _public_ which means that Solidity will automatically create a public getter function to read these values.

### `colorPixel`

To set a pixel color, we'll use the function `colorPixel` - it accepts an unsigned integer for the `x` and `y` location and a `bytes3` for the color.

When this function is called, it will update the pixel at the appropriate location.

This contract is simple. We're storing a million pixels in our contract, with no restriction. This is just the first version. Over the next few videos we're going to talk about how bid for and buy pixels, how to emit events when pixels change, and how to give refunds when someone is outbid.

While those ideas might sound simple, there are a lot of tricky details that we're going to work through along the way.

Nate Murray

Let's build the essential contract for the Million Ether page.

Then I'm going to edit contracts, millionetherpage.soul.

We're going to be storing our pixels in a 1000x1000 grid.

The 00 point is the top left, with x increasing to the right, and y increasing

Remember that we're storing each pixel as three bytes.

The data type for this insularity is "bytes 3".

In our contract, we'll represent this grid initially as a two-dimensional array

This array is going to be stored in our contracts storage,

that is, every node on the Ethereum network will hold a copy of these pixels.

We'll mark these pixels public, which means that Solidity will automatically

public getter function to read these values.

To set a pixel color, we'll use the function "color pixel".

It accepts an unsigned integer for the x and y location, and a bytes 3 for

When this function is called, it will update the pixel at the appropriate

We're storing a million pixels in our contract with no restrictions.

Over the next few videos, we're going to talk about how to bid for and buy

how to emit events when pixels change, and how to give refunds when someone is

While these ideas might sound simple, there are a lot of tricky details that we

But for now, this contract gives us the foundation to test our DAP end-to-end.

As a sanity check, let's deploy this contract to our local network and try

pixels. We'll compile and deploy this on the command line, and then we'll look

Let's compile our contract using Solk.js and generate the ABI.

If you watched the earlier course, we created our own private testnet and Geth.

I'm going to be using that testnet for this video too.

If you don't have a private testnet, go back and watch it.

We'll also need a couple of accounts that have mined some ether locally.

The first thing we need to do is unlock our account.

Something you should know is that you can set a time limit for the unlock by

parameter. I'm going to unlock my account for 24 hours.

If we restart Geth, you'll have to unlock your account again.

You can select it to copy and paste, or I'm on a max, so I'll use PB copy.

And then flipping back over to the Geth console, we'll type var contract code

and then paste the byte code of our contract.

And we submit the transaction to create an instance of the contract on the

Notice that we have our contract address via the contract key here.

And remember that your contract address will be different than mine.

Of course, before our contract can actually be used, we need to mine the

wait for it to finish, and then type miner.stop.

We also need our contract's ABI, the interface description of our contracts

Again, copy this, and flipping back over to Geth, we say var ABI equals Jason.

Next, we create a JavaScript class for our contract,

and then we create an instance of that contract at a particular address.

Now we can check the value of a particular pixel, let's say pixel one, two, and

Let's try changing a pixel by sending a transaction,

I'll type map dot color pixel dot send transaction,

then we put the coordinates one, two, and then a hex code for the bytes three,

Now, this won't mutate our contract state until the transaction has been mined,

Let's stop the miner, and let's check the value of pixel one, two again.

Of course, this contract is a bit silly, anyone can overwrite any pixel