Download - Devcon 1 - Build a Ðapp: Contract and Design
![Page 1: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/1.jpg)
Build a DApp:
Writing Contracts
Christian Reitwiessner @ethchris
![Page 2: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/2.jpg)
Selling over the internet without an intermediary
What could possibly go wrong?
AliceBob
$
![Page 3: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/3.jpg)
$
Buyer is a scammer
Bob Alice
![Page 4: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/4.jpg)
Bob Alice
$
Seller is a scammer
![Page 5: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/5.jpg)
Bob Alice
$
Use an escrow intermediaryEscrow is a scammer.
Escrow
![Page 6: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/6.jpg)
$
Original idea: Oleg Andreev
Two party escrow
Smart Contract
Bob Alice
![Page 7: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/7.jpg)
$
If there’s no buyer, seller can still cancel the sale
1. Seller puts 2x deposit
$$
Smart Contract
Bob Alice
![Page 8: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/8.jpg)
$
2. Buyer puts price + deposit
$$
He knows the contract can send the deposit back
$
Smart Contract
Bob Alice
![Page 9: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/9.jpg)
$
3A. Buyer receives product
$$
Legitimate transaction
$
Smart Contract
Bob Alice
![Page 10: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/10.jpg)
$
4A. Buyer confirms they received
$$
Buyer gets deposit back, seller gets deposit + sale
$
Smart Contract
Bob Alice
![Page 11: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/11.jpg)
$
3A. Buyer not satisfied with product
$$$
Smart Contract
Bob Alice
![Page 12: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/12.jpg)
$
4A. Seller refunds buyer
$$
Or the money get stuck until they resolve it
$
Smart Contract
Bob Alice
![Page 13: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/13.jpg)
Let’s implement it!
![Page 14: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/14.jpg)
Build a DApp:
Design Principles for Dapp Developers
Alex Van de Sande @avsa
![Page 15: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/15.jpg)
What's the job of a user interface designer?
![Page 16: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/16.jpg)
The purpose of the interface is to translate the code to the user’s screens
![Page 17: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/17.jpg)
The purpose of the interface designer is to be the translator between the
developer and the end user
![Page 18: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/18.jpg)
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
![Page 19: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/19.jpg)
function Purchase(_buyer) require(msg.value % 2 == 0) { seller = msg.sender; buyer = _buyer; value = msg.value / 2; }
![Page 20: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/20.jpg)
Seller announces price
Buyer answers intent to buy
Seller deploys contract and communicates address to buyer
Buyer sends money to contract
![Page 21: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/21.jpg)
function Purchase() require(msg.value % 2 == 0) { seller = msg.sender; value = msg.value / 2; }
![Page 22: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/22.jpg)
Seller deploys contract with price information
Buyer sends money to contract
![Page 23: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/23.jpg)
function abort() onlySeller inState(State.Created)
function confirmPurchase() inState(State.Created)
function confirmReceived() onlyBuyer inState(State.Locked)
function refund() onlySeller inState(State.Locked)
![Page 24: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/24.jpg)
abort
confirmPurchase
confirmReceived
refund
onlySeller
onlyBuyer
State.Created
State.LockedonlySeller
State.Created
State.Locked
![Page 25: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/25.jpg)
abort
confirmPurchase
confirmReceived
refundonlySeller
onlyBuyer
State.Created State.Locked State.Inactive
anyone
- -
-
--
![Page 26: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/26.jpg)
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
![Page 27: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/27.jpg)
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
![Page 28: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/28.jpg)
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.
![Page 29: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/29.jpg)
Source Sans Pro
MONTSERRAT
Roboto
Cooper Hewitt
Source Code Pro
![Page 30: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/30.jpg)
Use grids4
That applies everywhere. Always use grids.
![Page 31: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/31.jpg)
32px
18.4
px
Width divisor of
320px, 480px, 960px, 1024pxHexagon
grid allows alignment of
circles
![Page 32: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/32.jpg)
Test. Test. Test.5
Get constant user feedback by creating small and constant user testing
![Page 33: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/33.jpg)
usabilityhub.com
invision.com
Quick user testing tools
Whoever is on the office
![Page 34: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/34.jpg)
![Page 35: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/35.jpg)
![Page 36: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/36.jpg)
![Page 37: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/37.jpg)
“Describe the image as you remember it”
![Page 38: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/38.jpg)
“Write five substantives”
![Page 39: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/39.jpg)
“Write five adjectives”
![Page 40: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/40.jpg)
“What does that represent?”
![Page 41: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/41.jpg)
“Describe the image in your own words”
![Page 42: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/42.jpg)
“Describe the image in your own words”
![Page 43: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/43.jpg)
Keep the user in control of his data6
You don’t need to hold customers funds or data. Let the user keep that.
![Page 44: Devcon 1 - Build a Ðapp: Contract and Design](https://reader033.vdocuments.us/reader033/viewer/2022052915/587331821a28ab596c8b6b5f/html5/thumbnails/44.jpg)
Mist keeps the user in control of authentication and privacy