S01E03 - DApps Dev Club

layout: true
class: center, middle, inverse
---

.width50percent[
  ![DApps Dev Club S01E03 deck QR code](./deck-qrcode.png)
]

*scan me!*

https://dappsdev.org/deck/s01e03/

---
name: start
layout: false
class: center, middle, inverse

# Decentralised Applications Development Club

![DApps Dev Club](https://dappsdev.org/img/dadc-logo.png)

## Intro to Solidity

26/03/2019

???

- The title for tonight's session is "Intro to solidity", but we'll be doing more than that
- In addition, we'll be getting your local set up (on your computers) ready for future sessions, to interact with the Ethereum network, and therefore DApps deployed to Ethereum

---
layout: false
class: center, middle, inverse

.width50percent[
  ![DApps Dev Club S01E03 deck QR code](./deck-qrcode.png)
]

*scan me!*

https://dappsdev.org/deck/s01e03/

---
name: agenda
layout: false
class: left, middle, inverse

## Today

- [Partners](#partners)
- [Intro](#intro)
- [Recap Session #02](#recap)
- [Key Generation](#keygen)
- [MetaMask](#metamask)
- [Solidity](#solidity)
- [Games](#games)
- [Next session](#next)
- [Announcements](#next)

???

- This is the line up for tonight's session
- We'll start off by introducing our partners, and ourselves
- Then do a not-so-quick recap of the previous session
  - Not-so-quick, because as part of the recap, we're going to go into a little bit more detail about byte code, as that's going to set us up to understand what solidity is about later in the session
- But before we get into solidity, we're going to get you set up with some Ethereum Keys, and with MetaMask, so that you can finally talk to the Ethereum network
  - In the previous session, I asked you to install MetaMask, can I have a show of hands, who here managed to do that?
  - Who here tried to install MetaMask, but ran into some issues, or got stuck?
  - OK, so we'll make sure all of you here are properly set up tonight
- We'll then do the intro to solidity, and then try out some crypto zombies
- Finally we'll wrap with infomration about the next session, as well as some announcements

---
name: partners
layout: false
class: left, middle, inverse

## Partners

???

---
layout: false
class: left, middle, inverse

.left-column[
## Partners
### Chainstack
]
.right-column[
  .width50percent[
    ![Chainstack](/img/chainstack-logo.svg)
  ]
]

---
layout: false
class: left, middle, inverse

.left-column[
## Partners
### Chainstack
### BitTemple
]
.right-column[
  .width50percent[
    ![BitTemple](/img/bittemple-logo.png)
  ]
]

---
layout: false
class: left, middle, inverse

.left-column[
## Partners
### Chainstack
### BitTemple
### Spartan
]
.right-column[
  .width50percent[
    ![Spartan Group](https://static.wixstatic.com/media/dbc33c_2c759d6693424944ad5b6f7be2dd039a~mv2.png)
  ]
]

---
layout: false
class: left, middle, inverse

.left-column[
## Partners
### Chainstack
### BitTemple
### Spartan
### NBC'19
]
.right-column[
  .width50percent[
    ![National Blockchain Challenge '19](https://www.globaltechchallenge.com/static/NBC_no-font-3678ea62042bbdfc621ac92a89052221.png)
  ]
]

---
layout: false
class: left, middle, inverse

.left-column[
## Partners
### Chainstack
### BitTemple
### Spartan
### NBC'19
### StartupToken
]
.right-column[
  .width50percent[
    ![StartupToken meetup](https://www.startuptoken.com/wp-content/uploads/2017/09/StartupToken-logo-copy-Website-361x100.png)
  ]
]

---
layout: false
class: left, middle, inverse

.left-column[
## Partners
### Chainstack
### BitTemple
### Spartan
### NBC'19
### StartupToken
### EngineersSG
]
.right-column[
  .width50percent[
    ![Engineers.SG](https://pbs.twimg.com/profile_images/939337823785594880/YZBJObdX_400x400.jpg)
  ]
]

---
name: intro
layout: false
class: left, middle, inverse

## Intro

???

- Before we go into the the topics, for the benefit of those who are attending the their first session today

---
layout: false
class: left, middle, inverse

.left-column[
## Intro
### DADC
]
.right-column[

.width50percent[
  ![DApps Dev Club](https://dappsdev.org/img/dadc-logo.png)
]

- Decentralised Applications Development Club
- Format inspired by the technical book club from SingaporeJS
- [dappsdev.org](https://dappsdev.org/)
- [our discord](https://discordapp.com/invite/eM9Vv7P)
]

???

- The DApps Dev Club meets twice a month, and this is our 2nd session
  - In each session, we plan to discuss about 3 or four different topics, selected from the *Mastering Ethereum* book
- We are a technical book club, so in each session, when we meet up together, we'll be discussing select parts from this book, plus working through things together
  - I should mention that while this is not a common format, it isn't completely new - in fact it is inspired by the book club that the SingaporeJS meetup runs
  - In the first couple of sessions, it was mostly me talking, but this session onwards will be a whole lot more hands on
- The nexus for all the club happennings are on this website, dappsdev.org
  - The main thing to look out for on the website are the news feed, which you can subscribe to via the RSS feed, or check back on manually
  - The other thing to look out for on the website is the sessions page, which is a calendar for all of the events
- Apart from meeting in person, we can also have discussions online
  - We have a discord server for that, and you can join using the link found on our website

---
layout: false
class: left, middle, inverse

.left-column[
## Intro
### DADC
### Kenneth
]
.right-column[
- Also runs the Blockchain&DApps meetup
- CTO of Bytepay

.width50percent[
  ![Kenneth Hu](http://www.kennethhu.net/img/huchiawei.jpg)
]

.footnote[
- http://www.kennethhu.net/
]
]

???

- Kenneth is the CTO of Bytepay
- He knows the Ethereum stack inside out
- He also runs a blockchain events across Taiwan, Malaysia, and Singapore

---
layout: false
class: left, middle, inverse

.left-column[
## Intro
### DADC
### Kenneth
### Brendan
]
.right-column[
- Started DApps Dev Club
- NodeJS developer

.footnote[
- http://bguiz.com/
]
]

???

- I'm Brendan, and I work as a software engineer
- Spend most of my time doing NodeJs
- Met Kenneth through the EthSG hackathon last year
- We decided to collaborate and create a series of educational blockchain meetups, and here we are

---
layout: false
class: left, middle, inverse

.left-column[
## Intro
### DADC
### Kenneth
### Brendan
### You!
]
.right-column[
- No blockchain knowledge required
- No solidity or smart contract knowledge required
- Basic Javascript needed in session #05
- ~~wen ico? wen moon?~~
]

???

- So, how about you? These sessions are designed with a particular audience in mind.
- If you know nothing about blockchain, or about smart contracts, that's perfect
- However, if you don't know some basic JS, you'll need to pick that up to follow along in the later sessions.
  - I'll post some resources that you can use to learn JS after this session, or come talk to me, or ask around in our discord
- Bring your laptops to the sessions, as you'll be able to paerticipate in the hands on parts of the sessions

---
layout: false
class: left, middle, inverse

.left-column[
## Intro
### DADC
### Kenneth
### Brendan
### You!
### Noticed
]
.right-column[

.width50percent[
  !["Author of Mastering Ethereum likes tweet about DApps Dev Club"](./andreas-antonopoulos-likes-tweet.png)
]

.footnote[
- [this tweet](https://twitter.com/ChainstackHQ/status/1106042958443233280)
]

]

???

- Our last session was held at Chainstack, and they tweeted about it
- And it looks like DApps Dev Club has been *noticed* by an author of the book we're using as our reference material for our sessions!

---
name: recap
class: center, middle, inverse, nextSection

## Recap of Session #02

???

- Before we begin the topics for this session, I'd like to do a quick recap of what we did in the prev session
- Ethereum Virtual Machine
- Smart contracts
- Web3
- Hands on: Compile some solidity using remix
- Hands on: Code+state blockchain

---
layout: false
class: left, middle, inverse

.left-column[
## #02
### EVM
]
.right-column[

- Executes byte code
- Stack-based execution
- Gas costs
  - Finite limits
  - Economic incentives
  - *Quasi* Turing complete
- Distributed computation
  - Uses blockchain as consensus mechanism
  - Global computer

.footnote[
- https://dappsdev.org/deck/s01e02/#evm
]
]

???

- The EVM, executes op code/ byte code, which is similar to assembly language/ machine code
  - The point of the VM is that the same set of byte code can execute on any platform, and is an software abstraction layer over different hardware implementations
- It makes use of a stack-based execution model
- It also has this concept of **gas**, where each byte code has a particular cost associated with it.
  - When you execute something within the EVM, each instruction that is executed adds an this amount to a running total
  - When the invoker-specified limit for this running total is hit (or the global limit is reached), execution is aborted
  - For this reason, it is considered Turing complete, but not really, hence "quasi"
  - Finally, the invoker has to pay for the cost of this gas using Ether, which has a real cost
- We also looked at the EVM through the lens of distributed computation
  - Where many different computers compute the same tasks, as if it were a single computer
  - This achieves decentralisation, which is Ethereum's goal, but also entails more complexity
  - Thankfully this complexity is largely already taken care of, by using the a blockchain to achieve consensus
- So on this slide, one of the things mentioned was only very briefly mentioned in the previous session, and that is stack-based execution

---
layout: false
class: left, middle, inverse

.left-column[
## #02
### EVM
### EVM Stacks/1
]
.right-column[

- Stack-based computation
  - Each *op* pushes and/or pops a particular number of bytes into or out of the stack
- Single artithmetic operation
  - In-fix: 2 * 3
  - Post-fix: 3 2 *
  - EVM byte code: `0x600360020250`
  - EVM op code: `PUSH1 0x03 PUSH1 0x02 MUL POP`

.footnote[
- http://mathworld.wolfram.com/ReversePolishNotation.html
- https://github.com/comaeio/porosity/wiki/Ethereum-Internals#evm-functions
- [`MUL`](https://github.com/ethereum/go-ethereum/blob/7504dbd6eb3f62371f86b06b03ffd665690951f2/core/vm/instructions.go#L56-L63), [`ADD`](https://github.com/ethereum/go-ethereum/blob/7504dbd6eb3f62371f86b06b03ffd665690951f2/core/vm/instructions.go#L40-L46)
]
]

???

- Who here is familiar with Revere Polish Notation?
  - What pocket calculators use
- Imagine that model extended to include to include general purpose instructions, not just math
  - Conditionals, branches, storage, etc
  - This is a stack based architecture

---
layout: false
class: left, middle, inverse

.left-column[
## #02
### EVM
### EVM Stacks/2
]
.right-column[

- Stack-based computation
  - Each *op* pushes and/or pops a particular number of bytes into or out of the stack
- Two arithmetic operations
  - In-fix: (2 * 3) + 4
  - Post-fix: 4 3 2 * +
  - EVM byte code: `0x600460036002020150`
  - EVM op code: `PUSH1 0x04 PUSH1 0x03 PUSH1 0x02 MUL ADD POP`

???

- Talk about decimal 0123456789 hexadecimal 0123456789ABCDEF
- Who here is familiar with Revere Polish Notation?
  - What pocket calculators use
- Imagine that model extended to include to include general purpose instructions, not just math
  - Conditionals, branches, storage, etc
  - This is a stack based architecture

---
name: evm_stacks_steps
class: left, middle, inverse

.left-column[
## #02
### EVM
### EVM Stacks/3
]
.right-column[

.footnote[
]
]

???

- Demo time
- TODO find a way to make the graphic zoom upon load, or export as separate images and put them on one per slide
- Talk through each step
- Stop after the 3 pushes, and then ask if everyone is following so far
- Upon reaching the MUL, show the geth MUL implementation in the source again, and point out the stack operations within it

---
layout: false
class: left, middle, inverse

.left-column[
## #02
### EVM
### EVM Stacks/3
]
.right-column[

- Learn by doing!
- Build your own RPN calculator!

.width50percent[
  ![CodingGame Reverse Polish Notation puzzle](./codingame-rpn.png)
]

.footnote[
- https://www.codingame.com/training/hard/reverse-polish-notation
]
]

???

- The best way to learn what a stack based architecture is, is to actually implement one yourself
- Something with the simplest set of instructions will, such as add, subtract, multiply, and divide is perfect to get started with
- This link here is an interactive puzzle that let's you pick any programming language you like, and then build precisely that, and it has tests to make sure that you've got it going right
- Try this out yourself after the session!
- So that's the EVM

---
layout: false
class: left, middle, inverse

.left-column[
## #02
### EVM
### EVM Stacks/2
### Smart Contracts
]
.right-column[

- Smart contracts are programs
- Usually written in Solidity (high level)
- Compiled into EVM byte code (low level)
- *Deployed* onto the blockchain
  - Code: Permanent
  - State: Can only be modified by itself

.width50percent[
  ![Code State Blockchain Demo - DApps Dev Club](../s01e02/dadc-code-state-blockchain-demo.png)
]

.footnote[
- https://dappsdev.org/deck/s01e02/#sc
]
]

???

- We also talked about smart contracts in the previous session
- Both of our hands-on sessions from the previous session were smart contracts focussed
  - Tried out remix, by copy pasting a simple smart contract, and looking at the compiled output
  - Used a forked version of Anders' blockchain demo that showed how smart contracts encapsulated (code + state), and that this was stored on the blockchain itself
- Now this is the part that we are going to make our focus in tonight's session
  - We will be looking at writing our own smart contract using Solidity, instead of copy-pasting it

---
layout: false
class: left, middle, inverse

.left-column[
## #02
### EVM
### EVM Stacks/2
### Smart Contracts
### Web3
]
.right-column[

- Client-side API to talk to smart contracts

.footnote[
- https://dappsdev.org/deck/s01e02/#web3
]
]

???

- We rounded out the previous session with Web3, with a focus on web3.js
- This is a client-side library that allows your website or web app to invoke functions on a smart contract deployed on the Ethereum network
- In this session, we will not focus on web3 very much - that will come in later sessions!

---
name: keygen
class: center, middle, inverse, nextSection

## Key Generation

???

- Hopefully that quick refresh from a couple of weeks ago has jogged your memories. Now, let's begin with tonight's new topics!
- First up we will start with cryptographic key generation
- Here keys refer to private keys and public keys that are used by wallet software to sign transactions

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
]
.right-column[

- Bitcoin Improvement Proposals
- BIP39: Mnemonic code for generating deterministic keys

> … is meant to be a way to transport computer-generated randomness with a human readable transcription.

.footnote[
- https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki
- https://en.bitcoin.it/wiki/Seed_phrase
]
]

???

- BIPs are Bitcoin Improvement Proposals
  - Ethereum also has the equivalent: EIPs
- BIP39's actual title is "Mnemonic code for generating deterministic keys"
  - But it's more commonly known as the seed phrase wallet proposal
  - While this technique originated with the Bitcoin community, it doesn't really have much to do with Bitcoin itself, but rather cryptographic methods for generating asymmetric keys
  - So it works well with Ethereum, and many other cryptocurrencies too!
- This will also be a hands-on session for all of you. Be sure to follow along, as we will be generating a new wallet, which we will be making use of during the rest of the session.

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
]
.right-column[

- Open Ian Coleman's BIP39 page
- Select **12** words for the seed phrase, press **GENERATE**
- In **Coin** select **ETH - Ethereum**
- From **BIP39 Mnemonic** copy-and-paste into your own text editor

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- We will step through these one at a time

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### /2
]
.right-column[

.width100percent[
  ![BIP39](./bip39-generate.png)
]

.footnote[
- https://iancoleman.io/bip39/
- [relevant XKCD](https://xkcd.com/936/)
]
]

???

- Open Ian Coleman's BIP39 page
- Select **12** words for the seed phrase, press **GENERATE**

---
layout:false
class: left, middle, inverse

.width100percent[
  ![XKCD password strength](https://imgs.xkcd.com/comics/password_strength.png "To anyone who understands information theory and security and is in an infuriating argument with someone who does not (possibly involving mixed case), I sincerely apologize.")
]

???

- some of you might ask, why generate a seed phrase at random, why not choose your own words instead? well it turns out that humans are particularly bad at generating entropy, and computers are much better at it. let's check out this relevant XKCD comic.

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### /3
]
.right-column[

.width100percent[
  ![BIP39](./bip39-select-coin.png)
]

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- In **Coin** select **ETH - Ethereum**

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### /4
]
.right-column[

.width100percent[
  ![BIP39](./bip39-copy-seed-phrase.png)
]

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- From **BIP39 Mnemonic** copy-and-paste into your own text editor

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
]
.right-column[

- BIP44: Multi-Account Hierarchy for Deterministic Wallets

> We define the following 5 levels in BIP32 path:
> `m / purpose' / coin_type' / account' / change / address_index`
> Apostrophe in the path indicates that BIP32 hardened derivation is used.

.footnote[
- https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki
]
]

???

- In addition to BIP39, we're also going to use another Bitcoin Improvement Proposal, BIP44, which is for generating **Hierarchical deterministic wallets**, also known as **HD wallets**

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
### BIP32
]
.right-column[

- BIP32: Hierarchical Deterministic Wallets

> The specification consists of two parts. In a first part, a system for deriving a tree of keypairs from a single seed is presented. The second part demonstrates how to build a wallet structure on top of such a tree.

.footnote[
- https://github.com/bitcoin/bips/blob/master/bip-0032.mediawiki
]
]

???

- BIP44 is based upon yet another BIP - BIP32
- Now you *do not* need to know what all of these BIPs are, for DApp development, at least in a great level of detail.
  - At this point it is sufficient to know that you can generate a large number of different cryptographic key pairs, and therefore a large number of wallets, using a single seed phrase
  - This is just background info, but feel free to delve into this stuff deeper after the session

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
### BIP32
### Hands-on
]
.right-column[

- Note **Derivation path** uses `BIP44` by default
- Check that **BIP32 Derivation Path** is `m/44'/60'/0'/0`
- Now should see a table under **Derived Addresses**
- The seed phrase plus the derivation paths are used to generate as many keys as needed
  - Pro: Makes it easy to manage many separate wallets
  - Con: If the seed phrase is compromised, all of these wallets are compromised

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- Next we're going to all do this, and we will obtain a large set of Ethereum keys

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
### BIP32
### /2
]
.right-column[

.width100percent[
  ![BIP44](./bip44-selection.png)
]

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- Note **Derivation path** uses `BIP44` by default

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
### BIP32
### /3
]
.right-column[

.width100percent[
  ![BIP44](./bip44-bip32-derivation-path.png)
]

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- Check that **BIP32 Derivation Path** is `m/44'/60'/0'/0`

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
### BIP32
### /4
]
.right-column[

.width100percent[
  ![BIP44](./bip44-derived-addresses.png)
]

.footnote[
- https://iancoleman.io/bip39/
]
]

???

- Now should see a table under **Derived Addresses**
- The seed phrase plus the derivation paths are used to generate as many keys as needed
  - Pro: Makes it easy to manage many separate wallets
  - Con: If the seed phrase is compromised, all of these wallets are compromised
- Just a reminder - don't close this tab without first copy-pasting this into a text editor somewhere

---
layout: false
class: left, middle, inverse

.left-column[
## Key Gen
### BIP39
### Hands-on
### BIP44
### BIP32
### Hands-on
### Wallets
]
.right-column[

- Now what do we do with all these wallets?
- Use them directly
- Enter the seed phrase + derivation path into an existing wallet software that is compliant with both BIP39 and BIP44

.footnote[
- https://metamask.io/
- https://www.myetherwallet.com/
- https://wallet.trezor.io/#/
- https://carbonwallet.com/
]
]

???

- So we have gone through a technique that allows us to generate an unlimited number of keys - but what do we do with all of them?
- You can, of course, use them directly, with the protected key and the public key
- But the main point of proposing techniques using BIPs and EIPs is so that implementations using them can be standardised, and in this case we have multiple wallet software that specifically implement BIP39 plus BIP44
- The one that we will be using in our sessions is Metamask

---
layout: false
class: left, middle, inverse

.left-column[
### BIP39
### Hands-on
### BIP44
### BIP32
### Hands-on
### Wallets
### Security
]
.right-column[

- QR codes
- Don't use the hosted website, git clone the repo and run it yourself
- Air gapped, completely offline
- Never store digitally, only pen and paper

.footnote[
- https://en.wikipedia.org/wiki/Air_gap_(networking)
- https://kb.myetherwallet.com/offline/
]
]

???

- The process that we have used is not the most secure, and is good enough for demo and learning
- If you wish to use BIP39 and BIP44 to generate keys which you intend to use to store serious amounts of Ether, you should takes precautions to ensure that this information is not compromised
- MyEtherWallet has a wallet that's available at myetherwallet.com - but it also has a great guide on how to use the same wallet offline and locally on your computer
  - While these instructions are specific to MyEtherWallet, the general principles are applicable to any cryptocurrecny wallet
  - In the previous session one of you asked some questions regarding wallet security
    - The more securely you store something, the harder it is going to be to operate and use
  - Note that this will not be necessary for our sessions, but I would not feel right if I didn't at least mention this
    - For DApps, a lot of the time we only need to store small amounts of Ether in them, usually used to pay for gas fees
    - In our sessions, we will be working with test nets anyway, so we will not be using real Ether, but rather test Ether

---
name: metamask
class: center, middle, inverse, nextSection

## MetaMask

???

- Next up we have MetaMask, which is a browser extension that allows you to sign transactions and broadcast them to the Ethereum network
  - And this is the basic prerequisite to us being able to use a DApp
- We mentioned this briefly in the previous session, but now we are actually going to get it working on your computers
- Can we have a show of hands who has installed MetaMask already?

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup/1
]
.right-column[

- Chrome -> Profile -> Manage People -> Add person
- You can treat this profile as a sandbox for DApp development
- Install MetaMask in this profile
- "Restore" an account using BIP39 seed phrase generated
- "Add Account" to create more keys

.footnote[
- https://www.google.com/chrome/
- https://metamask.io/
]
]

???

- So let's get set up with MetaMask within Chrome
- First up we're going to create a new profile within chrome, call it `dappsdev` or something similar
- Once we've got a profile, we'll install the extension from metamask.io
  - Beware that there are many impostor metamask extensions, so be sure to get it from the link on its website and nowhere else
- Hopefully you still have that seed phrase that we generated using Ian Coleman's site
- Click on "restore account", and then paste or type your seedphrase here

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup/2
]
.right-column[

- "Add Account" to create more keys
- Check that addresses match

.footnote[
- https://www.google.com/chrome/
- https://metamask.io/
]
]

???

- You should notice that the address of the "Account 1" that was generated is the same as the first address in the table on the website
- Now click on the account avatar, and click on "+ Create Account"
- See "Account 2", which just got created. It's address should be the same as the second acount in the table.
- How does this work? It's because of BIP39, BIP44, and BIP32 - both Ian Coleman's website and MetaMask implement the same techniques
  - That's the point of having standards - different pieces of software are interoperable, and behave in a predictable way. That's a good thing!
  - More nuanced: Some of you may have noticed that you have told MetaMask about the seephrase, but have not input the BIP32 derivation path. That's because MetaMask simply uses the default BIP32 derivation path for Ethereum. Other wallet software allows you to specify a custom BIP32 derivation path

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup
### Hands-on
]
.right-column[

- Now let's try to put MetaMask to use!

.footnote[
- https://dappsdev.org/hands-on/simple-tx/
- https://discordapp.com/invite/eM9Vv7P
]
]

???

- So let's do some stuff hands on
- I've created a webpage that is the bare minimum to use Web3
- All it does is allow you to input an address, an amount of ether, and an optional message
- When you press the send button
- In metamask, switch to the Ropsten test net
- Find a Ropsten faucet (just google it) and get some test net Ether, *or* join our discord, and copy your address from metamask and paste it in the `#sessions` room, and I will send you a small amount
- You can think of Ether on the test nets as monopoly money
- TODO screenshot of the thing

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup
### /2
]
.right-column[

.width100percent[
  ![Hands-on Simple Tx - DApps Dev Club](hands-on-simple-tx-01.png)
]

.footnote[
]
]

???

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup
### /3
]
.right-column[

.width100percent[
  ![Hands-on Simple Tx - DApps Dev Club](hands-on-simple-tx-02.png)
]

.footnote[
]
]

???

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup
### /4
]
.right-column[

.width100percent[
  ![Hands-on Simple Tx - DApps Dev Club](hands-on-simple-tx-03.png)
]

.footnote[
]
]

???

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup
### /5
]
.right-column[

.width100percent[
  ![Hands-on Simple Tx - DApps Dev Club](hands-on-simple-tx-04.png)
]

.footnote[
]
]

???

---
layout: false
class: left, middle, inverse

.left-column[
## MetaMask
### Setup
### /6
]
.right-column[

.width100percent[
  ![Hands-on Simple Tx - DApps Dev Club](hands-on-simple-tx-05.png)
]

.footnote[
]
]

???

- ?

---
name: solidity
class: center, middle, inverse, nextSection

## Solidity

???

---
layout: false
class: left, middle, inverse

.left-column[
## Solidity
### What
]
.right-column[

- High-level programming language
- Strongly typed
- Compiler target: EVM byte code
- Used to create smart contracts deployed to Ethereum
  - (also some other networks)

.footnote[
- https://solidity.readthedocs.io/
]
]

???

- Solidity is a contract oriented language
- It is strictly typed
- It is syntactically similar to Javascript, but internally it is quite different

---
layout: false
class: left, middle, inverse

.left-column[
## Solidity
### What
### How
]
.right-column[

- Write smart contract in solidity
- Compile using `solc` -> ABI + bytecode
- Deploy bytecode by sending bytecode as `data` to `0x00`
- ABI is used by client

.footnote[
- https://solidity.readthedocs.io/
]
]

???

- Here is the rough flow for working with solidity
- Firstly, you write the smart contract using Solidity
- Then you use `solc` which is the solidity compiler, to compile it
- This will output some EVM bytecode, and an ABI
- The ABI is the application binary interface, which is used by client in a DApp - but we aren't using this yet, not in this session
- The bytecode is what we are interested in now
- We sign a transaction to send a gas fee to a special zero address or null address (and pay for the gass fee, the amount being transferred is zero Ether)
- This bytecode is executed, and whatever state is left over after execution is the smart contract that is stored on the blockchain
- Once this happens the smart contract is considered to be deployed

---
layout: false
class: left, middle, inverse

.left-column[
## Solidity
### What
### How
### Hands-on
]
.right-column[

- In the previous session, we used Remix
- Today we'll start off using remix, but next session we will also try `solc`

.footnote[
- [remix.ethereum.org](https://remix.ethereum.org/#optimize=false&version=soljson-v0.5.1+commit.c8a2cb62.js)
- https://solidity.readthedocs.io/en/v0.4.24/installing-solidity.html
]
]

???

---
layout: false
class: left, middle, inverse

.left-column[
## Solidity
### What
### How
### Hands-on
### Types
]
.right-column[

- Boolean
- Integer
- Address
- String
- Enum

.footnote[
- https://solidity.readthedocs.io/en/v0.5.6/types.html
]
]

???

- TODO create a gist for this

---
layout: false
class: left, middle, inverse

.left-column[
## Solidity
### What
### How
### Hands-on
### Data types
### Functions
]
.right-column[

- Functions
- Modifiers
- Fallback function

.footnote[
- https://solidity.readthedocs.io/en/v0.5.6/contracts.html#functions
]
]

???

- TODO create a gist for this

---
layout: false
class: left, middle, inverse

.left-column[
## Solidity
### What
### How
### Hands-on
### Data types
### Functions
### Events
]
.right-column[

- Creating events
- Indices

.footnote[
- https://solidity.readthedocs.io/en/v0.5.6/contracts.html#events
]
]

???

- TODO create a gist for this

---
name: games
class: center, middle, inverse, nextSection

## Games

???

- Next up we are going to look at games that run on Ethereum

---
layout: false
class: left, middle, inverse

.left-column[
## Games
### Kitties
]
.right-column[

- CryptoKitties?
- Make your own, but with Zombies

.footnote[
- https://www.cryptokitties.co/
]
]

???

- Has anyone here heard of CryptoKitties?
- It was an Ethereum DApp that became so incredibly popular that it literally crashed the network, as the network simply could not cope with the sheer volume of requests that were made per second by people using this DApp
- For a lot of people - mainstream, non-developers - this was the first time that they had heard of a DApp
- TODO picture of cryptokitties

---
layout: false
class: left, middle, inverse

.left-column[
## Games
### Kitties
### Zombies
]
.right-column[

- Make your own game
- Guided tutorial
- ~~Cats~~ Zombies

.footnote[
- https://cryptozombies.io/
]
]

???

- Well guess what, now there is a way to make your own version of cryptokitties, by programming in solidity
- The code that you will write is (mostly) functionally equivalent to cryptokitties, but the difference is in the artwork - you get zombies instyead of cats!
- It is all in the browser, and you are guided through the whole process step by step, and is an excellent beginners' introduction developing in solidity
- TODO picture of cryptozombies

---
layout: false
class: left, middle, inverse

.left-column[
## Games
### Kitties
### Zombies
### Hands-on
]
.right-column[

- Let's do the very first tutorial
- (time permitting)

.footnote[
- https://cryptozombies.io/
]
]

???

- (If time is running out, consider swapping it for after the intro instead)
- (Get everyone to go to cryptozombies.io)

---
name: next
layout: false
class: left, middle, inverse, nextSection

## Next

???

- So we have made it to the end of tonight's sessions, and we hope that you have all learnt something new, and are inspired to start developing DApps

---
layout: false
class: left, middle, inverse

.left-column[
## Next
### Recap
]
.right-column[

- Generate seed phrase ⇨ Keys
- MetaMask ⇦ seed phrase
- Send each other some Ether
- Solidity

.footnote[
]
]

???

- Before we talk about the next session, let's do a recap of what we've gone through today
  - We started off by talking about a bunch of BIPs which combined are used to generate cryptographic keys, in a standard way, such that various standards compliant Ethereum wallet software can use
  - We then installed one of these wallets, MetaMask, using the seed phrase we just generated
  - Then we used that wallet to interact with the ethereum wallet using the most basic possible DApp, to transfer Ether to each other on a testnet
    - There wasn't even any smart contract involved at this stage, just pure transactions!
- At this point we're all set up to interact with the Ethereum network, but we need solidity for smart contracts

---
layout: false
class: left, middle, inverse

.left-column[
## Next
### Recap
### S01E04
]
.right-column[

- [DApps Dev Club S01E04](https://dappsdev.org/sessions#session-SG-S01-E04)
- Will be going into more detail about Solidity
- Also, Smart Contract development tools: `solc` and `truffle`
- [Guest speaker: Alex Towle](https://dappsdev.org/blog/2019-02-01-alex-towle-guest-speaker/)

.footnote[
]
]

???

- So our next session will be on the 2nd Tuesday of the month, at Chainstack, check out the details on the sessions page on our website
- We will be learning more Solidity
- Session 4, will be special as we will be having our first guest speaker, Alex Towle, who is the lead engineer at Authio, which does smart contract developement
- He's very brilliant, and can actually read and write EVM byte code - hat's off to him!
- We met at EthSG at the end of last year, and he's so passionate about education that he's running a school in Costa Rica in the middle of a jungle to teach kids there about computers
- Read all about it in the blog post on our site!
- TODO image of the blog post banner

---
layout: false
class: left, middle, inverse

.left-column[
## Next
### Recap
### S01E04
### Hands-on

]
.right-column[

- Read from Ethereum Book:
  - The rest of [Chapter 7](https://github.com/ethereumbook/ethereumbook/blob/develop/07smart-contracts-solidity.asciidoc)
- Try Solidity:
  - Continue doing some [Crypto Zombies](https://cryptozombies.io/en/course/)
- Check out some DApps
  - [State of the DApps](https://www.stateofthedapps.com/rankings/platform/ethereum)

.footnote[
]
]

???

- Also between now and the next session, there are 2 weeks, and that's plenty of time to try out the stuff that we have learnt during this session.
- Please do continue trying out solidity by writing it in Remix, compiling it, and running it, etc
- Tonight we also had a taste of CryptoZombies, which teaches you how to write Solidity while making your own game - it's definitely worth your time to do more of the lessons - you'll learn alot plus it is really fun!
- Also, it is worth checking out the other DApps that there are out there - state of the DApps is a website that catalogues many popular DApps, and you can get a feel for what is out there, what can be done out there
- TODO screenshots

---
layout: false
class: left, middle, inverse

.left-column[
## Next
### Recap
### S01E04
### Hands-on
### Tools

]
.right-column[

- Install software
  - [MetaMask](https://metamask.io/)
  - [NodeJs](https://nodejs.org/)
  - [solc](https://solidity.readthedocs.io/en/v0.4.24/installing-solidity.html)
  - [truffle](https://truffleframework.com/docs/truffle/getting-started/installation)

.footnote[
]
]

???

- Finally here's a list of all the tools that we will be making use of in the next session
- Hopefully tonight we all already have MetaMask down pat, but in addition to htat we'll also need to
  install NodeJS, `solc`, and `truffle`
- Try to install them before coming, because some of these are quite large downloads *cough* node_modules *cough*,
  and it will really slow us down during the session
- So install away, as much as you can.
- TODO meme of node_modules size

---
layout: false
class: left, middle, inverse

.left-column[
## Next
### Recap
### S01E04
### Hands-on
### Tools
### Q&A

]
.right-column[

Questions?

.footnote[
- https://discordapp.com/invite/eM9Vv7P
]
]

???

- Before we wrap up, do you have any questions?
- Is you think of some questions later, or already have them, but prefer to type instead, head over to our discord, the link is right there!

---
layout: false
class: left, middle, inverse

## Thanks!

Chainstack, BitTemple, Spartan, NBC'19, StartupToken, Blockchain&DApps

---
layout: false
class: center, middle, inverse

![DApps Dev Club](https://dappsdev.org/img/dadc-logo.png)

https://dappsdev.org/

???

- be sure to check out the sessions page for updates, and join our discord
- Q&A
- any other announcements?

---
layout: false
class: center, middle, inverse

Steal my (test net) Ethers!

.footnote[
- https://gist.github.com/bguiz/a5d409189b867f7268cdf93198076e9a
]