Build a DApp:

Writing Contracts

Christian Reitwiessner @ethchris

Selling over the internet without an intermediary

What could possibly go wrong?

AliceBob

$

$

Buyer is a scammer

Bob Alice

Bob Alice

$

Seller is a scammer

Bob Alice

$

Use an escrow intermediaryEscrow is a scammer.

Escrow

$

Original idea: Oleg Andreev

Two party escrow

Smart Contract

Bob Alice

$

If there’s no buyer, seller can still cancel the sale

1. Seller puts 2x deposit

$$

Smart Contract

Bob Alice

$

2. Buyer puts price + deposit

$$

He knows the contract can send the deposit back

$

Smart Contract

Bob Alice

$

3A. Buyer receives product

$$

Legitimate transaction

$

Smart Contract

Bob Alice

$

4A. Buyer confirms they received

$$

Buyer gets deposit back, seller gets deposit + sale

$

Smart Contract

Bob Alice

$

3A. Buyer not satisfied with product

$$$

Smart Contract

Bob Alice

$

4A. Seller refunds buyer

$$

Or the money get stuck until they resolve it

$

Smart Contract

Bob Alice

Let’s implement it!

Build a DApp:

Design Principles for Dapp Developers

Alex Van de Sande @avsa

What's the job of a user interface designer?

The purpose of the interface is to translate the code to the user’s screens

The purpose of the interface designer is to be the translator between the

developer and the end user

Understand the code1

It might not be your job to develop it, but it’s your job to understand it and suggest changes if needed

function Purchase(_buyer) require(msg.value % 2 == 0) { seller = msg.sender; buyer = _buyer; value = msg.value / 2; }

Seller announces price

Buyer answers intent to buy

Seller deploys contract and communicates address to buyer

Buyer sends money to contract

function Purchase() require(msg.value % 2 == 0) { seller = msg.sender; value = msg.value / 2; }

Seller deploys contract with price information

Buyer sends money to contract

function abort() onlySeller inState(State.Created)

function confirmPurchase() inState(State.Created)

function confirmReceived() onlyBuyer inState(State.Locked)

function refund() onlySeller inState(State.Locked)

abort

confirmPurchase

confirmReceived

refund

onlySeller

onlyBuyer

State.Created

State.LockedonlySeller

State.Created

State.Locked

abort

confirmPurchase

confirmReceived

refundonlySeller

onlyBuyer

State.Created State.Locked State.Inactive

anyone

- -

-

--

CreatedSTATE

AS

SE

EN

BY

Neither

Seller

Buyer

Locked Inactive

CANCEL SALE

CONFIRM RECEIVED

BUY 10 ETHER

REFUND BUYER SALE DONE

RECEIVED

SOLD OUT SOLD OUT

Returns you 20 ether

To unlock 10 ether in security deposit

+10 ether in security deposit

Returns you 10 ether

Don’t try to do too much2

You don’t need to build a giant web portal. On a decentralised network you can make fees from

doing one job very well

Use open source fonts3

Don’t rely on third party sites. If you want to escape the default system fonts, use

fonts that allow redistribution.

Source Sans Pro

MONTSERRAT

Roboto

Cooper Hewitt

Source Code Pro

Use grids4

That applies everywhere. Always use grids.

32px

18.4

px

Width divisor of

320px, 480px, 960px, 1024pxHexagon

grid allows alignment of

circles

Test. Test. Test.5

Get constant user feedback by creating small and constant user testing

usabilityhub.com

invision.com

Quick user testing tools

Whoever is on the office

“Describe the image as you remember it”

“Write five substantives”

“Write five adjectives”

“What does that represent?”

“Describe the image in your own words”

“Describe the image in your own words”

Keep the user in control of his data6

You don’t need to hold customers funds or data. Let the user keep that.

Mist keeps the user in control of authentication and privacy