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

We can read an image, so now let's color each pixel on the blockchain.

What we're going to do is iterate over each pixel and send a transaction for each pixel we want to color. Of course, this can be a lot of transactions if the image is large. But the idea is that someone is purchasing a scarce pixel, for a long period of time, so it's not that big of a deal if it takes a while to buy the whole image.

The first thing we need to do is connect to our web3 node:

const Web3 = require('web3');
const web3 = new Web3();

web3.setProvider(
  new web3.providers.HttpProvider('http://localhost:8545')
);

Here I'm using the HttpProvider, but it's worth looking into the 

Next we need a handle to our contract. We do this, like we have before, by loading the ABI and looking up the contract's deployed address. 

const abi = require('../src/MillionEtherPage.abi.json');
const mepAddress =
  '0x23b51f380a0d8cc3ec9dd7b1b7ff13457c8b4360';
const mep = new web3.eth.Contract(abi, mepAddress);

Because we're sending transactions, we'll also need the sending account address. Normally, you'd configure this as an environment variable or command-line argument, but we can hardcode it for now.

const fromAccount =
  '0xa91aaf38a9020d893e2f94e42f8060b7ee70026c';

Now that we have the contract, when we loop over each pixel, instead of logging it, we want to call the 

 method on the contract to send a transaction:

console.log({ x: x, y: y }, [r, g, b]);

mep.methods
.colorPixel(
  xPos + x,
  yPos + y,
  ['0x', dec2hex(r), dec2hex(g), dec2hex(b)].join(
    ''
  )
)
.send({ from: fromAccount });

Each image can be placed in a particular position on the board. So as we write each pixel, we'll add the xPos and yPos as an offset. We can control the location of the image this way.

---
title: Buying An Image -- Sending Transactions


slug: 'buying-an-image-sending-transactions'
thumbnail: https://embed-ssl.wistia.com/deliveries/fe313e620a745fcb6268cf0c808cc8177876b330.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/8005a4gvk8



---

We can read an image, so now let's color each pixel on the blockchain.

What we're going to do is iterate over each pixel and send a transaction for each pixel we want to color. Of course, this can be a lot of transactions if the image is large. But the idea is that someone is purchasing a scarce pixel, for a long period of time, so it's not that big of a deal if it takes a while to buy the whole image.

### Connecting to Web3

The first thing we need to do is connect to our web3 node:

```javascript
const Web3 = require('web3');
const web3 = new Web3();

web3.setProvider(
  new web3.providers.HttpProvider('http://localhost:8545')
);
```

Here I'm using the HttpProvider, but it's worth looking into the `IpcProvider`, too.

### Getting a handle to the contract

Next we need a handle to our contract. We do this, like we have before, by loading the ABI and looking up the contract's deployed address. 

```javascript
const abi = require('../src/MillionEtherPage.abi.json');
const mepAddress =
  '0x23b51f380a0d8cc3ec9dd7b1b7ff13457c8b4360';
const mep = new web3.eth.Contract(abi, mepAddress);
```

Because we're sending transactions, we'll also need the sending account address. Normally, you'd configure this as an environment variable or command-line argument, but we can hardcode it for now.

```javascript
const fromAccount =
  '0xa91aaf38a9020d893e2f94e42f8060b7ee70026c';
```

Now that we have the contract, when we loop over each pixel, instead of logging it, we want to call the `colorPixel` method on the contract to send a transaction:

```javascript
console.log({ x: x, y: y }, [r, g, b]);

mep.methods
.colorPixel(
  xPos + x,
  yPos + y,
  ['0x', dec2hex(r), dec2hex(g), dec2hex(b)].join(
    ''
  )
)
.send({ from: fromAccount });
```

Each image can be placed in a particular position on the board. So as we write each pixel, we'll add the xPos and yPos as an offset. We can control the location of the image this way.

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

Buying An Image -- Sending Transactions