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

Web3 and Events Over WebSockets

Drawing Pixels from the Blockchain

Viewing Pixels

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

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

To color a pixel, we are going to require that Ether is sent to buy the pixel. 

 as before. This way our UI can keep track of how much each pixel costs.

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

contract MillionEtherPage {
  struct Pixel {
    address owner;
    uint soldPrice;
    bytes3 color;
  }
  Pixel[1000][1000] public pixels;

  event PixelChanged(
    uint x,
    uint y,
    address owner,
    uint soldPrice,
    bytes3 color
  );

  function colorPixel(uint x, uint y, bytes3 color) payable {
    Pixel storage pixel = pixels[x][y];

    // pixel.soldPrice will initialize to 0
    require(msg.value > pixel.soldPrice);

    pixel.owner = msg.sender;
    pixel.soldPrice = msg.value;
    pixel.color = color;

    PixelChanged(x, y, pixel.owner, pixel.soldPrice, pixel.color);
  }
}

---
title: Payable color pixel function


slug: 'payable-color-pixel-function'
thumbnail: https://embed-ssl.wistia.com/deliveries/d8fdfe89711d1c2d633653e98285e7723b055028.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/ye6zzed6cj



---

To color a pixel, we are going to require that Ether is sent to buy the pixel. 

That means our `colorPixel` function needs to be marked `payable`. 

We have our `Pixel` struct already, and we also want our `PixelChanged` event to emit the new `owner` and `soldPrice`, along with the `x`, `y`, and `color` as before. This way our UI can keep track of how much each pixel costs.

Here's how change colorPixel:

```javascript
/// MillionEtherPage-003.sol
pragma solidity ^0.4.11;

contract MillionEtherPage {
  struct Pixel {
    address owner;
    uint soldPrice;
    bytes3 color;
  }
  Pixel[1000][1000] public pixels;

  event PixelChanged(
    uint x,
    uint y,
    address owner,
    uint soldPrice,
    bytes3 color
  );

  function colorPixel(uint x, uint y, bytes3 color) payable {
    Pixel storage pixel = pixels[x][y];

    // pixel.soldPrice will initialize to 0
    require(msg.value > pixel.soldPrice);

    pixel.owner = msg.sender;
    pixel.soldPrice = msg.value;
    pixel.color = color;

    PixelChanged(x, y, pixel.owner, pixel.soldPrice, pixel.color);
  }
}
```

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Million Ether Homepage

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Getting Started

Lesson 1: (3:23)

Million Ether Homepage

Lesson 2: (3:18)

Storing Colors in a Pixel Grid

Lesson 3: (4:29)

Million Ether Page Essential Smart Contract

Lesson 4: (1:56)

Tip: Mining only when there are transactions

Lesson 5: (7:08)

Tip: Using Remix IDE

Module 2: Viewing Pixels

Lesson 1: (6:08)

Getting The Pixels and Ethereum Events

Lesson 2: (7:15)

Gas

Lesson 3: (1:01)

Building a DApp UI

Lesson 4: (3:09)

Drawing in HTML Canvas

Lesson 5: (1:15)

Using Websockets with Web3

Lesson 6: (3:09)

Web3 and Events Over WebSockets

Lesson 7: (3:41)

Drawing Pixels from the Blockchain

Module 3: Buying Pixels

Lesson 1: (1:57)

Buying An Image -- Reading Pixels

Lesson 2: (4:51)

Buying An Image -- Sending Transactions

Lesson 3: (1:25)

Pixel bidding and structs

Lesson 4: (2:48)

Payable Contracts, payable Functions

Lesson 5: (3:35)

Contract Owner and require

Lesson 6: (2:38)

Payable color pixel function

Module 4: Auctioning Pixels

Lesson 1: (4:03)

Sending funds from a contract

Lesson 2: (3:26)

The safer way to send funds from a contract

Lesson 3: (4:37)

The Pull Payment Pattern - Withdraw payments when outbid

Lesson 4: (6:46)

Million Ether Homepage Summary

Payable color pixel function