Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 intermediary
Escrow 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 code
1
It might not be your job to develop it, but it’s your
job to understand it and suggest changes if ne...
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 m...
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 confirmRecei...
abort
confirmPurchase
confirmReceived
refund
onlySeller
onlyBuyer
State.Created
State.LockedonlySeller
State.Created
State...
abort
confirmPurchase
confirmReceived
refundonlySeller
onlyBuyer
State.Created State.Locked State.Inactive
anyone
- -
-
--
Created
STATE
ASSEENBY
Neither
Seller
Buyer
Locked Inactive


CANCEL SALE
CONFIRM RECEIVED
BUY 10 ETHER
REFUND BUYER SAL...
Don’t try to do too much
2
You don’t need to build a giant web portal. On a
decentralised network you can make fees from
d...
Use open source fonts
3
Don’t rely on third party sites. If you want
to escape the default system fonts, use
fonts that al...
Source Sans Pro
MONTSERRAT
Roboto
Cooper Hewitt
Source Code Pro
Use grids
4
That applies everywhere.
Always use grids.
32px
18.4px
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 data
6
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
Devcon 1 - Build a Ðapp: Contract and Design
Devcon 1 - Build a Ðapp: Contract and Design
Devcon 1 - Build a Ðapp: Contract and Design
Upcoming SlideShare
Loading in …5
×

Devcon 1 - Build a Ðapp: Contract and Design

3,582 views

Published on

These are the slides of the talk I (Alex Van de Sande) and Christian Reitwiessner
 (@ethchris) did for DevconOne no november 10, 2015. This was part of a 3 part talk were Christian live coded a contract, then analyse it from the pot of a designer and then Fabian implemented it. Unfortunately I don't have Fabian's slides here.

The slides were not designed to be self explanatory so as soon as the video recordings are up I recommend you watch these instead.

Published in: Technology
  • Be the first to comment

Devcon 1 - Build a Ðapp: Contract and Design

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

×