├── .dockerignore
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── index.css
    ├── models
    │   ├── UTXO.js
    │   ├── Transaction.js
    │   ├── UTXOPool.js
    │   ├── Block.js
    │   └── Blockchain.js
    ├── App.test.js
    ├── network.js
    ├── index.js
    ├── server.js
    ├── components
    │   ├── AddIdentity.js
    │   ├── DetailBlock.js
    │   ├── IdentityListItem.js
    │   ├── Key.js
    │   ├── BlockInfo.js
    │   ├── UTXOPoolTable.js
    │   ├── TransactionTable.js
    │   ├── BlockchainWelcome.js
    │   ├── walkthrough.js
    │   ├── NewBlock.js
    │   ├── WelcomeUTXOPoolTable.js
    │   ├── BlockchainTree.js
    │   ├── NewBlockTransactionList.js
    │   ├── NewBlockHeader.js
    │   ├── Signature.js
    │   └── NewTransaction.js
    ├── App.css
    ├── crypto.js
    ├── logo.svg
    ├── store.js
    ├── registerServiceWorker.js
    └── App.js
├── helm-chart
    ├── Chart.yaml
    └── templates
    │   ├── client-service.yaml
    │   ├── server-service.yaml
    │   ├── client-ingress.yaml
    │   ├── client-deployment.yaml
    │   └── server-deployment.yaml
├── Dockerfile.server
├── Dockerfile.client
├── docker-compose.yml
├── .gitignore
├── package.json
├── nginx.conf
└── README.md


/.dockerignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /screencaps
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nambrot/blockchain-in-js/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/helm-chart/Chart.yaml:
--------------------------------------------------------------------------------
1 | apiVersion: v1
2 | description: A Helm chart blockchain-in-js
3 | name: blockchain-in-js
4 | version: 0.1.0
5 | 


--------------------------------------------------------------------------------
/src/models/UTXO.js:
--------------------------------------------------------------------------------
1 | export default class UTXO {
2 |   constructor(publicKey, amount) {
3 |     this.publicKey = publicKey
4 |     this.amount = amount
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/Dockerfile.server:
--------------------------------------------------------------------------------
 1 | FROM node:6
 2 | RUN npm install -g yarn
 3 | RUN yarn add express
 4 | RUN yarn add socket.io
 5 | 
 6 | # COPY package.json yarn.lock ./
 7 | # RUN yarn --pure-lockfile
 8 | 
 9 | COPY ./src ./src
10 | CMD node src/server.js
11 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/Dockerfile.client:
--------------------------------------------------------------------------------
 1 | FROM node:6.9.1
 2 | RUN npm install -g yarn
 3 | 
 4 | COPY package.json yarn.lock ./
 5 | RUN yarn --pure-lockfile
 6 | 
 7 | COPY src src
 8 | COPY public public
 9 | 
10 | RUN yarn run build
11 | 
12 | FROM nginx
13 | COPY --from=0 build /usr/share/nginx/html
14 | COPY nginx.conf /etc/nginx/nginx.conf
15 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3'
 2 | services:
 3 |   client:
 4 |     build:
 5 |       context: .
 6 |       dockerfile: Dockerfile.client
 7 |     ports:
 8 |     - "80:80"
 9 |     links:
10 |     - socketio-server
11 |   socketio-server:
12 |     build:
13 |       context: .
14 |       dockerfile: Dockerfile.server
15 |     ports:
16 |     - "4000:4000"
17 | 


--------------------------------------------------------------------------------
/src/network.js:
--------------------------------------------------------------------------------
 1 | import io from 'socket.io-client';
 2 | const socket = io();
 3 | 
 4 | export const subscribeTo = (type, callback) => {
 5 |   socket.on('channel', function(data){
 6 |     if (data.type === type) {
 7 |       callback(data.payload)
 8 |     }
 9 |   })
10 | }
11 | 
12 | export const publish = (type, payload) => {
13 |   socket.emit('channel', { type, payload })
14 | }
15 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | /screencaps
12 | 
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/helm-chart/templates/client-service.yaml:
--------------------------------------------------------------------------------
 1 | # web-service.yml
 2 | apiVersion: v1
 3 | kind: Service
 4 | metadata:
 5 |   name: client-service
 6 |   labels:
 7 |     name: client-service
 8 |   namespace: blockchain-in-js-{{ .Values.step_name }}
 9 | spec:
10 |   type: ClusterIP
11 |   ports:
12 |     - port: 80
13 |       targetPort: 80
14 |       protocol: TCP
15 |   selector:
16 |     name: client-deployment
17 | 


--------------------------------------------------------------------------------
/helm-chart/templates/server-service.yaml:
--------------------------------------------------------------------------------
 1 | # web-service.yml
 2 | apiVersion: v1
 3 | kind: Service
 4 | metadata:
 5 |   name: socketio-server
 6 |   labels:
 7 |     name: socketio-server
 8 |   namespace: blockchain-in-js-{{ .Values.step_name }}
 9 | spec:
10 |   type: ClusterIP
11 |   ports:
12 |     - port: 4000
13 |       targetPort: 4000
14 |       protocol: TCP
15 |   selector:
16 |     name: server-deployment
17 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import {action, state} from './store';
 3 | import {subscribeTo, publish} from './network'
 4 | action({})
 5 | 
 6 | subscribeTo('BLOCKCHAIN_BROADCAST', (names) => {
 7 |   action({ type: 'BLOCKCHAIN_BROADCAST', names })
 8 | })
 9 | 
10 | subscribeTo('BLOCKCHAIN_BROADCAST_REQUEST', () => {
11 |   publish('BLOCKCHAIN_BROADCAST', state.blockchains.map((b) => b.name))
12 | })
13 | 
14 | publish('BLOCKCHAIN_BROADCAST_REQUEST', {})
15 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | var app = require('express')();
 2 | var http = require('http').Server(app);
 3 | var io = require('socket.io')(http);
 4 | 
 5 | // app.get('/', function(req, res){
 6 | //   res.sendFile(__dirname + '/index.html');
 7 | // });
 8 | 
 9 | io.on('connection', function(socket){
10 |   socket.on('channel', function(msg){
11 |     io.emit('channel', msg);
12 |   });
13 | });
14 | 
15 | http.listen(4000, function(){
16 |   console.log('listening on *:4000');
17 | });
18 | 


--------------------------------------------------------------------------------
/src/components/AddIdentity.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Button } from "@blueprintjs/core";
 3 | import { action } from "../store";
 4 | 
 5 | export default class AddIdentity extends Component {
 6 |   render() {
 7 |     return (
 8 |         <Button
 9 |         text="Add another identity"
10 |         iconName="pt-icon-add"
11 |         className="pt-intent-primary pt-input-action"
12 |         style={{ paddingLeft: '15px'}}
13 |         onClick={() => action({type: 'ADD_IDENTITY'})}
14 |       />
15 |       )
16 | 
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/helm-chart/templates/client-ingress.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: extensions/v1beta1
 2 | kind: Ingress
 3 | metadata:
 4 |   name: blockchain-ingress
 5 |   annotations:
 6 |     kubernetes.io/tls-acme: "true"
 7 |     kubernetes.io/ingress.class: "nginx"
 8 |   namespace: blockchain-in-js-{{ .Values.step_name }}
 9 | spec:
10 |   tls:
11 |   - hosts:
12 |     - blockchain-{{ .Values.step_name }}.nambrot.com
13 |     secretName: echoserver-tls-{{ .Values.step_name }}
14 |   rules:
15 |   - host: blockchain-{{ .Values.step_name }}.nambrot.com
16 |     http:
17 |       paths:
18 |       - path: /
19 |         backend:
20 |           serviceName: client-service
21 |           servicePort: 80
22 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | @import "../node_modules/@blueprintjs/core/dist/blueprint.css";
 2 | 
 3 | .App {
 4 |   text-align: center;
 5 | }
 6 | 
 7 | .App-logo {
 8 |   animation: App-logo-spin infinite 20s linear;
 9 |   height: 80px;
10 | }
11 | 
12 | .App-header {
13 |   background-color: #222;
14 |   height: 150px;
15 |   padding: 20px;
16 |   color: white;
17 | }
18 | 
19 | .App-title {
20 |   font-size: 1.5em;
21 | }
22 | 
23 | .App-intro {
24 |   font-size: large;
25 | }
26 | 
27 | @keyframes App-logo-spin {
28 |   from { transform: rotate(0deg); }
29 |   to { transform: rotate(360deg); }
30 | }
31 | 
32 | .rst__row.partOfLongestChain .rst__rowContents{
33 |   background-color: #82cfff;
34 |   color: white;
35 | }
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blockchain-js",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@blueprintjs/core": "^1.32.0",
 7 |     "@blueprintjs/labs": "^0.12.0",
 8 |     "classnames": "^2.2.5",
 9 |     "crypto-js": "^3.1.9-1",
10 |     "elliptic": "^6.4.0",
11 |     "express": "^4.16.2",
12 |     "ramda": "^0.25.0",
13 |     "react": "^16.1.0",
14 |     "react-addons-css-transition-group": "^15.6.2",
15 |     "react-dom": "^16.1.0",
16 |     "react-scripts": "1.0.17",
17 |     "react-sortable-tree": "^1.5.0",
18 |     "socket.io": "^2.0.4",
19 |     "socket.io-client": "^2.0.4"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test --env=jsdom",
25 |     "eject": "react-scripts eject"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/crypto.js:
--------------------------------------------------------------------------------
 1 | import elliptic from "elliptic";
 2 | const ec = new elliptic.ec("secp256k1");
 3 | 
 4 | export function generatePair() {
 5 |   const keypair = ec.genKeyPair();
 6 |   window.keypair = keypair;
 7 |   return {
 8 |     publicKey: keypair.getPublic("hex"),
 9 |     privateKey: keypair.getPrivate("hex")
10 |   };
11 | }
12 | 
13 | export function sign(message, privateKey) {
14 |   try {
15 |     const keypair = ec.keyFromPrivate(privateKey, "hex");
16 |     return keypair.sign(message).toDER("hex");
17 |   } catch (error) {
18 |     return "invalid signature";
19 |   }
20 | }
21 | 
22 | export function verifySignature(message, signature, publicKey) {
23 |   try {
24 |     const keypair = ec.keyFromPublic(publicKey, "hex");
25 |     return ec.verify(message, signature, keypair);
26 |   } catch (error) {
27 |     return false;
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/DetailBlock.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Tab2, Tabs2 } from "@blueprintjs/core";
 3 | import BlockInfo from "./BlockInfo";
 4 | import UTXOPoolTable from "./UTXOPoolTable";
 5 | import TransactionTable from "./TransactionTable";
 6 | class DetailBlock extends Component {
 7 |   render() {
 8 |     return (
 9 |       <div style={{ padding: "10px" }}>
10 |         <Tabs2>
11 |           <Tab2
12 |             id="blockinfo"
13 |             title="Block Info"
14 |             panel={<BlockInfo block={this.props.block} />}
15 |           />
16 |           <Tab2
17 |             id="transactions"
18 |             title="Transactions"
19 |             panel={<TransactionTable transactions={this.props.block.transactions} />}
20 |           />
21 |           <Tab2
22 |             id="utxopool"
23 |             title="UTXOPool"
24 |             panel={<UTXOPoolTable block={this.props.block} />}
25 |           />
26 |         </Tabs2>
27 |       </div>
28 |     );
29 |   }
30 | }
31 | 
32 | export default DetailBlock;
33 | 


--------------------------------------------------------------------------------
/src/components/IdentityListItem.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import Key from "./Key";
 3 | import { Tab2, Tabs2, EditableText } from "@blueprintjs/core";
 4 | import { action } from "../store"
 5 | export default class IdentityListItem extends Component {
 6 |   changeName = (name) => {
 7 |     action({type: 'CHANGE_IDENTITY_NAME', publicKey: this.props.identity.publicKey, name })
 8 |   }
 9 |   render() {
10 |     return (
11 |       <div style={{marginBottom: '10px'}}>
12 |         <h6><EditableText value={this.props.identity.name} onChange={this.changeName}/></h6>
13 |         <Tabs2>
14 |           <Tab2
15 |             id="public"
16 |             title="Public Key"
17 |             panel={<Key value={this.props.identity.publicKey} />}
18 |           />
19 |           <Tab2
20 |             id="private"
21 |             title="Private Key"
22 |             panel={
23 |               <textarea
24 |                 className="pt-input"
25 |                 spellCheck={false}
26 |                 style={{ width: "100%", height: "100px" }}
27 |                 value={this.props.identity.privateKey}
28 |                 readOnly
29 |               />
30 |             }
31 |           />
32 |         </Tabs2>
33 |       </div>
34 |     );
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/helm-chart/templates/client-deployment.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: extensions/v1beta1
 2 | kind: Deployment
 3 | metadata:
 4 |   annotations:
 5 |     deployment.kubernetes.io/revision: "1"
 6 |   labels:
 7 |     name: client-deployment
 8 |   name: client-deployment
 9 |   namespace: blockchain-in-js-{{ required "step name" .Values.step_name }}
10 | spec:
11 |   replicas: 1
12 |   selector:
13 |     matchLabels:
14 |       name: client-deployment
15 |   strategy:
16 |     rollingUpdate:
17 |       maxSurge: 1
18 |       maxUnavailable: 1
19 |     type: RollingUpdate
20 |   template:
21 |     metadata:
22 |       creationTimestamp: null
23 |       labels:
24 |         name: client-deployment
25 |     spec:
26 |       containers:
27 |       - env:
28 |         image: {{ required "Client image" .Values.client_image }}
29 |         imagePullPolicy: Always
30 |         name: client-deployment
31 |         ports:
32 |         - containerPort: 80
33 |           name: http-server
34 |           protocol: TCP
35 |         resources:
36 |           requests:
37 |             cpu: 10m
38 |             memory: 10Mi
39 |         terminationMessagePath: /dev/termination-log
40 |       dnsPolicy: ClusterFirst
41 |       restartPolicy: Always
42 |       securityContext: {}
43 |       terminationGracePeriodSeconds: 30
44 | 


--------------------------------------------------------------------------------
/nginx.conf:
--------------------------------------------------------------------------------
 1 | 
 2 | user  nginx;
 3 | worker_processes  1;
 4 | 
 5 | error_log  /var/log/nginx/error.log warn;
 6 | pid        /var/run/nginx.pid;
 7 | 
 8 | 
 9 | events {
10 |     worker_connections  1024;
11 | }
12 | 
13 | 
14 | http {
15 |     map $http_upgrade $connection_upgrade {
16 |           default upgrade;
17 |           '' close;
18 |     }
19 | 
20 |     upstream server {
21 |         server socketio-server:4000;
22 |     }
23 | 
24 |     server {
25 |         listen 80;
26 | 
27 |         location /socket.io {
28 |             proxy_http_version 1.1;
29 |             proxy_set_header Upgrade $http_upgrade;
30 |             proxy_set_header Connection $connection_upgrade;
31 |             proxy_pass http://server;
32 |         }
33 |     }
34 | 
35 |     root /usr/share/nginx/html;
36 | 
37 |     include       /etc/nginx/mime.types;
38 |     default_type  application/octet-stream;
39 | 
40 |     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
41 |                       '$status $body_bytes_sent "$http_referer" '
42 |                       '"$http_user_agent" "$http_x_forwarded_for"';
43 | 
44 |     access_log  /var/log/nginx/access.log  main;
45 | 
46 |     sendfile        on;
47 |     #tcp_nopush     on;
48 | 
49 |     keepalive_timeout  65;
50 | 
51 |     #gzip  on;
52 | 
53 |     # include /etc/nginx/conf.d/*.conf;
54 | }
55 | 


--------------------------------------------------------------------------------
/src/models/Transaction.js:
--------------------------------------------------------------------------------
 1 | import sha256 from "crypto-js/sha256";
 2 | import { verifySignature } from "../crypto";
 3 | 
 4 | export default class Transaction {
 5 |   constructor(inputPublicKey, outputPublicKey, amount, fee, signature) {
 6 |     this.inputPublicKey = inputPublicKey;
 7 |     this.outputPublicKey = outputPublicKey;
 8 |     this.amount = amount;
 9 |     this.fee = fee;
10 |     this.signature = signature;
11 |     this._setHash();
12 |   }
13 | 
14 |   hasValidSignature() {
15 |     return (
16 |       this.signature !== undefined &&
17 |       verifySignature(this.hash, this.signature, this.inputPublicKey)
18 |     );
19 |   }
20 | 
21 |   toJSON() {
22 |     return {
23 |       inputPublicKey: this.inputPublicKey,
24 |       outputPublicKey: this.outputPublicKey,
25 |       amount: this.amount,
26 |       fee: this.fee,
27 |       hash: this.hash,
28 |       signature: this.signature
29 |     };
30 |   }
31 | 
32 |   _setHash() {
33 |     this.hash = this._calculateHash();
34 |   }
35 | 
36 |   _calculateHash() {
37 |     return sha256(
38 |       this.inputPublicKey + this.outputPublicKey + this.amount + this.fee
39 |     ).toString();
40 |   }
41 | }
42 | 
43 | export function transactionFromJSON(transaction) {
44 |   return new Transaction(
45 |     transaction.inputPublicKey,
46 |     transaction.outputPublicKey,
47 |     transaction.amount,
48 |     transaction.fee,
49 |     transaction.signature
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/helm-chart/templates/server-deployment.yaml:
--------------------------------------------------------------------------------
 1 | # Please edit the object below. Lines beginning with a '#' will be ignored,
 2 | # and an empty file will abort the edit. If an error occurs while saving this file will be
 3 | # reopened with the relevant failures.
 4 | #
 5 | apiVersion: extensions/v1beta1
 6 | kind: Deployment
 7 | metadata:
 8 |   annotations:
 9 |     deployment.kubernetes.io/revision: "1"
10 |   labels:
11 |     name: server-deployment
12 |   name: server-deployment
13 |   namespace: blockchain-in-js-{{ .Values.step_name }}
14 | spec:
15 |   replicas: 1
16 |   selector:
17 |     matchLabels:
18 |       name: server-deployment
19 |   strategy:
20 |     rollingUpdate:
21 |       maxSurge: 1
22 |       maxUnavailable: 1
23 |     type: RollingUpdate
24 |   template:
25 |     metadata:
26 |       creationTimestamp: null
27 |       labels:
28 |         name: server-deployment
29 |     spec:
30 |       containers:
31 |       - env:
32 |         image: {{ required "server image" .Values.server_image }}
33 |         imagePullPolicy: Always
34 |         name: server-deployment
35 |         ports:
36 |         - containerPort: 4000
37 |           name: http-server
38 |           protocol: TCP
39 |         resources:
40 |           requests:
41 |             cpu: 10m
42 |             memory: 10Mi
43 |         terminationMessagePath: /dev/termination-log
44 |       dnsPolicy: ClusterFirst
45 |       restartPolicy: Always
46 |       securityContext: {}
47 |       terminationGracePeriodSeconds: 30
48 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>Blockchain in JS</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/models/UTXOPool.js:
--------------------------------------------------------------------------------
 1 | import { clone } from 'ramda';
 2 | import UTXO from './UTXO';
 3 | 
 4 | export default class UTXOPool {
 5 |   constructor(utxos = {}) {
 6 |     this.utxos = utxos
 7 |   }
 8 | 
 9 |   addUTXO(publicKey, amount) {
10 |     if (this.utxos[publicKey]) {
11 |       this.utxos[publicKey].amount += amount
12 |     } else {
13 |       const utxo = new UTXO(publicKey, amount)
14 |       this.utxos[publicKey] = utxo
15 |     }
16 |   }
17 | 
18 |   handleTransaction(transaction, feeReceiver) {
19 |     if (!this.isValidTransaction(transaction))
20 |       return
21 |     const inputUTXO = this.utxos[transaction.inputPublicKey];
22 |     inputUTXO.amount -= transaction.amount
23 |     inputUTXO.amount -= transaction.fee
24 |     if (inputUTXO.amount === 0)
25 |       delete this.utxos[transaction.inputPublicKey]
26 |     this.addUTXO(transaction.outputPublicKey, transaction.amount)
27 |     this.addUTXO(feeReceiver, transaction.fee)
28 |   }
29 | 
30 |   isValidTransaction(transaction) {
31 |     const { inputPublicKey, amount, fee } = transaction
32 |     const utxo = this.utxos[inputPublicKey]
33 |     return utxo !== undefined && utxo.amount >= (amount + fee) && amount > 0
34 |   }
35 | 
36 |   addingTransactionErrorMessage(transaction) {
37 |     const { inputPublicKey, amount, fee } = transaction
38 |     const utxo = this.utxos[inputPublicKey]
39 |     if (utxo === undefined)
40 |       return "No UTXO was associated with this public key"
41 |     if (amount <= 0)
42 |       return "Amount has to be at least 0"
43 |     if (utxo.amount < amount + fee)
44 |       return `UTXO associated with this public key (${utxo.amount}) does not cover desired amount (${amount}) and fee (${fee})`
45 |   }
46 | 
47 |   clone() {
48 |     return new UTXOPool(clone(this.utxos))
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/components/Key.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Tooltip, Position } from "@blueprintjs/core";
 3 | import { Popover2 } from "@blueprintjs/labs";
 4 | 
 5 | // from https://stackoverflow.com/a/16348977
 6 | const stringToColour = function(str) {
 7 |   let hash = 0;
 8 |   for (let i = 0; i < str.length; i++) {
 9 |     hash = str.charCodeAt(i) + ((hash << 5) - hash);
10 |   }
11 |   let colour = "#";
12 |   for (let i = 0; i < 3; i++) {
13 |     const value = (hash >> (i * 8)) & 0xff;
14 |     colour += ("00" + value.toString(16)).substr(-2);
15 |   }
16 |   return colour;
17 | };
18 | 
19 | export default class Key extends Component {
20 |   static defaultProps = {
21 |     readOnly: true,
22 |     onChange: () => {},
23 |     popover: null,
24 |     tooltipText:
25 |       "The color should help you find instances of this key throughout the page",
26 |     popoverDidOpen: () => {}
27 |   };
28 |   onChange = evt => {
29 |     this.props.onChange(evt.target.value);
30 |   };
31 |   render() {
32 |     return (
33 |       <Tooltip
34 |         content={this.props.tooltipText}
35 |         inline={true}
36 |         position={Position.TOP}
37 |       >
38 |         <Popover2 autoFocus={false} popoverDidOpen={this.props.popoverDidOpen}>
39 |           <textarea
40 |             className="pt-input"
41 |             spellCheck={false}
42 |             style={{
43 |               width: "150px",
44 |               height: "75px",
45 |               borderWidth: "3px",
46 |               borderStyle: "solid",
47 |               borderColor: stringToColour(this.props.value)
48 |             }}
49 |             value={this.props.value}
50 |             readOnly={this.props.readOnly}
51 |             onChange={this.onChange}
52 |           />
53 |           {this.props.popover}
54 |         </Popover2>
55 |       </Tooltip>
56 |     );
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/BlockInfo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import Key from "./Key";
 3 | 
 4 | export default class BlockInfo extends Component {
 5 |   render() {
 6 |     return (
 7 |       <table className="pt-table .modifier">
 8 |         <tbody>
 9 |           <tr>
10 |             <td />
11 |             <td>SHA256(</td>
12 |           </tr>
13 |           <tr>
14 |             <td>Parent Hash</td>
15 |             <td>
16 |               <textarea
17 |                 className="pt-input"
18 |                 spellCheck={false}
19 |                 style={{ width: "200px", height: "100px" }}
20 |                 value={this.props.block.parentHash}
21 |                 readOnly
22 |               />
23 |             </td>
24 |           </tr>
25 |           <tr>
26 |             <td />
27 |             <td>+</td>
28 |           </tr>
29 |           <tr>
30 |             <td>Coinbase Beneficiary</td>
31 |             <td>
32 |               <Key value={this.props.block.coinbaseBeneficiary} />
33 |             </td>
34 |           </tr>
35 |           <tr>
36 |             <td />
37 |             <td>+</td>
38 |           </tr>
39 |           <tr>
40 |             <td>Combined Transactions Hash </td>
41 |             <td>
42 |               <textarea
43 |                 className="pt-input"
44 |                 spellCheck={false}
45 |                 style={{ width: "200px", height: "100px" }}
46 |                 value={this.props.block.combinedTransactionsHash()}
47 |                 readOnly
48 |               />
49 |             </td>
50 |           </tr>
51 |           <tr>
52 |             <td />
53 |             <td>+</td>
54 |           </tr>
55 |           <tr>
56 |             <td>Nonce</td>
57 |             <td>
58 |               <textarea
59 |                 className="pt-input"
60 |                 spellCheck={false}
61 |                 style={{ width: "200px", height: "100px" }}
62 |                 value={this.props.block.nonce}
63 |                 readOnly
64 |               />
65 |             </td>
66 |             <td />
67 |           </tr>
68 |           <tr>
69 |             <td />
70 |             <td>) =</td>
71 |           </tr>
72 |           <tr>
73 |             <td>Hash</td>
74 |             <td>
75 |               <textarea
76 |                 className="pt-input"
77 |                 spellCheck={false}
78 |                 style={{ width: "200px", height: "100px" }}
79 |                 value={this.props.block.hash}
80 |                 readOnly
81 |               />
82 |             </td>
83 |           </tr>
84 |         </tbody>
85 |       </table>
86 |     );
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/components/UTXOPoolTable.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import Key from "./Key";
 3 | import classnames from "classnames";
 4 | import { state } from "../store";
 5 | import { Tooltip, advanceTo } from "./walkthrough";
 6 | 
 7 | export default class UTXOPoolTable extends Component {
 8 |   static defaultProps = {
 9 |     onSelectRow: null
10 |   };
11 |   onSelectRow = utxo => {
12 |     return () => {
13 |       if (this.props.onSelectRow !== null) {
14 |         this.props.onSelectRow(utxo);
15 |         advanceTo(7);
16 |       }
17 |     };
18 |   };
19 |   render() {
20 |     const renderedTooltip = false;
21 |     return (
22 |       <div>
23 |         <table
24 |           className={classnames("pt-table", {
25 |             "pt-interactive": this.props.onSelectRow !== null
26 |           })}
27 |         >
28 |           <thead>
29 |             <tr>
30 |               <th>Name (where known)</th>
31 |               <th>Public Key</th>
32 |               <th>Amount</th>
33 |             </tr>
34 |           </thead>
35 |           <tbody>
36 |             {Object.values(this.props.block.utxoPool.utxos).map(utxo => {
37 |               const identity = state.identities[utxo.publicKey];
38 |               let name = identity && identity.name;
39 | 
40 |               if (identity !== undefined && !renderedTooltip) {
41 |                 name = (
42 |                   <td>
43 |                     <Tooltip
44 |                       content={
45 |                         <p style={{ maxWidth: "250px" }}>
46 |                           Here you see spendable coins who the owners of them
47 |                           are. With coins that you now own, you can either hodl
48 |                           or use them to transact. Let's send some money!
49 |                         </p>
50 |                       }
51 |                       next={this.onSelectRow(utxo)}
52 |                       nextLabel="Spread the love!"
53 |                       step={6}
54 |                     >
55 |                       {name}
56 |                     </Tooltip>
57 |                   </td>
58 |                 );
59 |               } else {
60 |                 name = <td>{name}</td>;
61 |               }
62 |               return (
63 |                 <tr key={utxo.publicKey} onClick={this.onSelectRow(utxo)}>
64 |                   {name}
65 |                   <td>
66 |                     <Key value={utxo.publicKey} />
67 |                   </td>
68 |                   <td>{utxo.amount}</td>
69 |                 </tr>
70 |               );
71 |             })}
72 |           </tbody>
73 |         </table>
74 |       </div>
75 |     );
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/components/TransactionTable.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Icon } from "@blueprintjs/core";
 3 | import Key from "./Key";
 4 | import Signature from "./Signature";
 5 | 
 6 | export default class TransactionTable extends Component {
 7 |   static defaultProps = {
 8 |     noTransactionsText: "",
 9 |     transactionAction: () => {}
10 |   };
11 |   render() {
12 |     if (Object.keys(this.props.transactions).length === 0)
13 |       return <p>{this.props.noTransactionsText}</p>;
14 | 
15 |     return (
16 |       <table>
17 |         <thead>
18 |           <tr>
19 |             <th>Transaction Hash</th>
20 |             <th>Sender Public Key</th>
21 |             <th />
22 |             <th>Receiver Public Key</th>
23 |             <th>Amount</th>
24 |             <th>Fee</th>
25 |             <th>Signature</th>
26 |           </tr>
27 |         </thead>
28 |         <tbody>
29 |           {Object.values(this.props.transactions).map(tx => {
30 |             return (
31 |               <tr key={tx.hash}>
32 |                 <td>
33 |                   <textarea
34 |                     className="pt-input"
35 |                     spellCheck={false}
36 |                     style={{ width: "150px", height: "75px" }}
37 |                     value={tx.hash}
38 |                     readOnly
39 |                   />
40 |                 </td>
41 |                 <td>
42 |                   <Key value={tx.inputPublicKey} />
43 |                 </td>
44 |                 <td>
45 |                   <Icon iconName="pt-icon-arrow-right" />
46 |                 </td>
47 |                 <td>
48 |                   <Key value={tx.outputPublicKey} />
49 |                 </td>
50 |                 <td
51 |                   style={{
52 |                     height: "100px",
53 |                     width: "100px",
54 |                     fontSize: "34px",
55 |                     textAlign: "center"
56 |                   }}
57 |                 >
58 |                   {tx.amount}
59 |                 </td>
60 |                 <td
61 |                   style={{
62 |                     height: "100px",
63 |                     width: "100px",
64 |                     fontSize: "34px",
65 |                     textAlign: "center"
66 |                   }}
67 |                 >
68 |                   {tx.fee}
69 |                 </td>
70 |                 <td>
71 |                   <Signature
72 |                     signature={tx.signature}
73 |                     messageToSign={tx.hash}
74 |                     publicKey={tx.inputPublicKey}
75 |                     isEditable={false}
76 |                   />
77 |                 </td>
78 |                 <td>{this.props.transactionAction(tx)}</td>
79 |               </tr>
80 |             );
81 |           })}
82 |         </tbody>
83 |       </table>
84 |     );
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
  1 | import "./index.css";
  2 | import "@blueprintjs/core/dist/blueprint.css";
  3 | 
  4 | import App from "./App";
  5 | import React from "react";
  6 | import ReactDOM from "react-dom";
  7 | import "./index.css";
  8 | import { any, find } from "ramda";
  9 | import Blockchain from "./models/Blockchain";
 10 | import { generatePair } from "./crypto";
 11 | 
 12 | const defaultBlockchain = new Blockchain("Bitcoin");
 13 | 
 14 | function createIdentity() {
 15 |   const pair = generatePair();
 16 | 
 17 |   return {
 18 |     name: "Node " + pair.publicKey.substr(0, 10),
 19 |     ...pair
 20 |   };
 21 | }
 22 | 
 23 | const identity = createIdentity();
 24 | 
 25 | const identities = {};
 26 | identities[identity.publicKey] = identity;
 27 | 
 28 | let state = {
 29 |   walkthrough: {
 30 |     show: true,
 31 |     step: 0,
 32 |     enabled: window.localStorage.getItem("walkthroughEnabled") === null
 33 |   },
 34 |   blockchains: [defaultBlockchain],
 35 |   selectedBlockchain: defaultBlockchain,
 36 |   identities: identities,
 37 |   node: identity
 38 | };
 39 | 
 40 | window.state = state;
 41 | 
 42 | // If prospective employers see this, I know very much that mutation of state in place is discouraged, but was done here for pedagogical reasons
 43 | const action = function(actionPayload) {
 44 |   console.log(actionPayload);
 45 |   switch (actionPayload.type) {
 46 |     case "PICK_BLOCKCHAIN":
 47 |       if (actionPayload.name === "") break;
 48 |       let blockchain = find(bc => bc.name === actionPayload.name)(
 49 |         state.blockchains
 50 |       );
 51 |       if (blockchain === undefined) {
 52 |         blockchain = new Blockchain(actionPayload.name);
 53 |         state.blockchains.push(blockchain);
 54 |       }
 55 |       state.selectedBlockchain = blockchain;
 56 |       break;
 57 |     case "BLOCKCHAIN_BROADCAST":
 58 |       actionPayload.names.forEach(name => {
 59 |         if (!any(b => b.name === name)(state.blockchains)) {
 60 |           const blockchain = new Blockchain(name);
 61 |           state.blockchains.push(blockchain);
 62 |         }
 63 |       });
 64 |       break;
 65 |     case "ADD_IDENTITY": {
 66 |       const identity = createIdentity();
 67 |       state.identities[identity.publicKey] = identity;
 68 |       break;
 69 |     }
 70 |     case "CHANGE_IDENTITY_NAME": {
 71 |       const identity = state.identities[actionPayload.publicKey];
 72 |       if (identity === undefined) break;
 73 |       identity.name = actionPayload.name;
 74 |       break;
 75 |     }
 76 |     case "HIDE_WALKTHROUGH": {
 77 |       state.walkthrough = { ...state.walkthrough, show: false };
 78 |       break;
 79 |     }
 80 |     case "ADVANCE_WALKTHROUGH": {
 81 |       if (actionPayload.step !== undefined) {
 82 |         if (state.walkthrough.step > actionPayload.step) break;
 83 |         state.walkthrough.step = actionPayload.step;
 84 |       } else state.walkthrough.step += 1;
 85 |       state.walkthrough.show = true;
 86 |       break;
 87 |     }
 88 |     case "DISABLE_WALKTHROUGH": {
 89 |       state.walkthrough = { ...state.walkthrough, enabled: false };
 90 |       window.localStorage.setItem("walkthroughEnabled", false);
 91 |       break;
 92 |     }
 93 |     case "RERENDER":
 94 |       // do nothing really
 95 |       break;
 96 |     default:
 97 |       break;
 98 |   }
 99 |   const component = ReactDOM.render(
100 |     <App appState={state} />,
101 |     document.getElementById("root")
102 |   );
103 |   component.forceUpdate();
104 | };
105 | 
106 | export function rerender() {
107 |   action({ type: "RERENDER" });
108 | }
109 | 
110 | export { action, state };
111 | 


--------------------------------------------------------------------------------
/src/components/BlockchainWelcome.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import BlockchainTree from "./BlockchainTree";
 3 | import IdentityListItem from "./IdentityListItem";
 4 | import { Tab2, Tabs2, Tooltip } from "@blueprintjs/core";
 5 | import WelcomeUTXOPoolTable from "./WelcomeUTXOPoolTable";
 6 | import "../App.css";
 7 | import AddIdentity from "./AddIdentity";
 8 | import { Tooltip as WalkthroughTooltip } from "./walkthrough";
 9 | 
10 | class BlockchainWelcome extends Component {
11 |   render() {
12 |     return (
13 |       <div>
14 |         <div style={{ width: "65%", display: "inline-block" }}>
15 |           <h3>Blockchain Visualization</h3>
16 |           <BlockchainTree
17 |             blockchain={this.props.blockchain}
18 |             identities={this.props.identities}
19 |             node={this.props.node}
20 |           />
21 |         </div>
22 |         <div
23 |           style={{
24 |             width: "35%",
25 |             display: "inline-block",
26 |             verticalAlign: "top"
27 |           }}
28 |         >
29 |           <Tabs2>
30 |             <Tab2
31 |               id="utxo"
32 |               title="UTXOPool"
33 |               panel={
34 |                 <div>
35 |                   <p>
36 |                     This is the{" "}
37 |                     <Tooltip
38 |                       className="pt-tooltip-indicator"
39 |                       inline={true}
40 |                       content={
41 |                         "A UTXO pool is a list of UTXOs, which are 'owned' by the public key, and can be 'spent' with the corresponding private key."
42 |                       }
43 |                     >
44 |                       UTXO pool
45 |                     </Tooltip>{" "}
46 |                     for the longest chain. You can click on UTXOs to broadcast a
47 |                     transaction.
48 |                   </p>
49 |                   {this.props.blockchain.maxHeightBlock().isRoot() ? (
50 |                     <p>The root block has no unspent transaction outputs</p>
51 |                   ) : (
52 |                     <WelcomeUTXOPoolTable blockchain={this.props.blockchain} />
53 |                   )}
54 |                 </div>
55 |               }
56 |             />
57 |           </Tabs2>
58 |           <hr />
59 |           <Tabs2>
60 |             <Tab2
61 |               id="nodes"
62 |               title="Identities"
63 |               panel={
64 |                 <WalkthroughTooltip
65 |                   content={
66 |                     <p style={{ maxWidth: "250px" }}>
67 |                       Ownership of coins is established via control over public
68 |                       keys with their corresponding private keys. Here you find
69 |                       the pairs that you generated and thus control exclusively.
70 |                       You can change their names for your convenience
71 |                     </p>
72 |                   }
73 |                   nextLabel="Next"
74 |                   step={5}
75 |                   quitWalkthroughVisible={true}
76 |                 >
77 |                   <div>
78 |                     {Object.values(this.props.identities).map(identity => (
79 |                       <IdentityListItem
80 |                         key={identity.publicKey}
81 |                         identity={identity}
82 |                       />
83 |                     ))}
84 |                     <AddIdentity />
85 |                   </div>
86 |                 </WalkthroughTooltip>
87 |               }
88 |             />
89 |           </Tabs2>
90 |         </div>
91 |       </div>
92 |     );
93 |   }
94 | }
95 | 
96 | export default BlockchainWelcome;
97 | 


--------------------------------------------------------------------------------
/src/models/Block.js:
--------------------------------------------------------------------------------
  1 | import sha256 from "crypto-js/sha256";
  2 | import UTXOPool from "./UTXOPool";
  3 | import { map } from "ramda";
  4 | import { transactionFromJSON } from "./Transaction";
  5 | 
  6 | const DIFFICULTY = 2;
  7 | 
  8 | class Block {
  9 |   constructor(opts) {
 10 |     const {
 11 |       blockchain,
 12 |       parentHash,
 13 |       height,
 14 |       coinbaseBeneficiary,
 15 |       nonce,
 16 |       utxoPool,
 17 |       transactions
 18 |     } = {
 19 |       coinbaseBeneficiary: "root",
 20 |       nonce: "",
 21 |       utxoPool: new UTXOPool(),
 22 |       transactions: {},
 23 |       ...opts
 24 |     };
 25 |     this.blockchain = blockchain;
 26 |     this.nonce = nonce;
 27 |     this.parentHash = parentHash;
 28 |     this.height = height;
 29 |     this.coinbaseBeneficiary = coinbaseBeneficiary;
 30 |     this.utxoPool = utxoPool;
 31 |     this.transactions = map(transactionFromJSON)(transactions);
 32 |     this._setHash();
 33 |     // for visualization purposes
 34 |     this.expanded = true;
 35 |   }
 36 | 
 37 |   isRoot() {
 38 |     return this.parentHash === "root";
 39 |   }
 40 |   isValid() {
 41 |     return (
 42 |       this.isRoot() ||
 43 |       (this.hash.substr(-DIFFICULTY) === "0".repeat(DIFFICULTY) &&
 44 |         this.hash === this._calculateHash())
 45 |     );
 46 |   }
 47 | 
 48 |   createChild(coinbaseBeneficiary) {
 49 |     const block = new Block({
 50 |       blockchain: this.blockchain,
 51 |       parentHash: this.hash,
 52 |       height: this.height + 1,
 53 |       utxoPool: this.utxoPool.clone(),
 54 |       coinbaseBeneficiary
 55 |     });
 56 | 
 57 |     // For convenience, allow the miner to immediately spend the coinbase coins
 58 |     block.utxoPool.addUTXO(coinbaseBeneficiary, 12.5);
 59 | 
 60 |     return block;
 61 |   }
 62 | 
 63 |   addTransaction(transaction) {
 64 |     if (!this.isValidTransaction(transaction)) return;
 65 |     this.transactions[transaction.hash] = transaction;
 66 |     this.utxoPool.handleTransaction(transaction, this.coinbaseBeneficiary);
 67 |     this._setHash();
 68 |   }
 69 | 
 70 |   isValidTransaction(transaction) {
 71 |     return (
 72 |       this.utxoPool.isValidTransaction(transaction) &&
 73 |       transaction.hasValidSignature()
 74 |     );
 75 |   }
 76 | 
 77 |   addingTransactionErrorMessage(transaction) {
 78 |     if (!transaction.hasValidSignature()) return "Signature is not valid";
 79 |     return this.utxoPool.addingTransactionErrorMessage(transaction);
 80 |   }
 81 | 
 82 |   setNonce(nonce) {
 83 |     this.nonce = nonce;
 84 |     this._setHash();
 85 |   }
 86 | 
 87 |   combinedTransactionsHash() {
 88 |     if (Object.values(this.transactions).length === 0)
 89 |       return "No Transactions in Block";
 90 |     return sha256(
 91 |       Object.values(this.transactions)
 92 |         .map(tx => tx.hash)
 93 |         .join("")
 94 |     );
 95 |   }
 96 | 
 97 |   toJSON() {
 98 |     return {
 99 |       hash: this.hash,
100 |       nonce: this.nonce,
101 |       parentHash: this.parentHash,
102 |       height: this.height,
103 |       coinbaseBeneficiary: this.coinbaseBeneficiary,
104 |       transactions: map(transaction => transaction.toJSON(), this.transactions)
105 |     };
106 |   }
107 | 
108 |   _setHash() {
109 |     this.hash = this._calculateHash();
110 |   }
111 | 
112 |   _calculateHash() {
113 |     return sha256(
114 |       this.nonce +
115 |         this.parentHash +
116 |         this.coinbaseBeneficiary +
117 |         this.combinedTransactionsHash()
118 |     ).toString();
119 |   }
120 | }
121 | 
122 | export default Block;
123 | 
124 | export function blockFromJSON(blockchain, data) {
125 |   return new Block({
126 |     ...data,
127 |     blockchain
128 |   });
129 | }
130 | 


--------------------------------------------------------------------------------
/src/components/walkthrough.js:
--------------------------------------------------------------------------------
  1 | import { state, action } from "../store";
  2 | import React, { Component } from "react";
  3 | import { Tooltip2 } from "@blueprintjs/labs";
  4 | import { Dialog, Button, Intent, Classes } from "@blueprintjs/core";
  5 | import classNames from "classnames";
  6 | 
  7 | function isAtStepAndActive(number) {
  8 |   return (
  9 |     state.walkthrough.enabled && state.walkthrough.show && isAtStep(number)
 10 |   );
 11 | }
 12 | 
 13 | export function isAtStep(number) {
 14 |   return state.walkthrough.step === number;
 15 | }
 16 | 
 17 | export function hideWalkthrough() {
 18 |   action({ type: "HIDE_WALKTHROUGH" });
 19 | }
 20 | 
 21 | export function disableWalkthrough() {
 22 |   action({ type: "DISABLE_WALKTHROUGH" });
 23 | }
 24 | 
 25 | export function advanceTo(step) {
 26 |   action({ type: "ADVANCE_WALKTHROUGH", step });
 27 | }
 28 | 
 29 | export class Tooltip extends Component {
 30 |   static defaultProps = {
 31 |     nextLabel: "Next",
 32 |     nextButtonVisible: true,
 33 |     quitWalkthroughVisible: false
 34 |   };
 35 |   next = () => {
 36 |     if (this.props.next !== undefined) this.props.next();
 37 |     else advanceTo(this.props.step + 1);
 38 |   };
 39 |   render() {
 40 |     return (
 41 |       <Tooltip2
 42 |         isOpen={isAtStepAndActive(this.props.step)}
 43 |         content={
 44 |           <div>
 45 |             <button
 46 |               aria-label="Hide"
 47 |               title="Hide"
 48 |               className={classNames(
 49 |                 Classes.DIALOG_CLOSE_BUTTON,
 50 |                 Classes.iconClass("small-cross")
 51 |               )}
 52 |               style={{ float: "right", padding: "0px 0px 6px 6px" }}
 53 |               onClick={hideWalkthrough}
 54 |             />
 55 |             <div>{this.props.content}</div>
 56 |             {this.props.nextButtonVisible && (
 57 |               <div className="pt-dialog-footer">
 58 |                 <div className="pt-dialog-footer-actions">
 59 |                   <Button
 60 |                     intent={Intent.PRIMARY}
 61 |                     onClick={this.next}
 62 |                     text={this.props.nextLabel}
 63 |                   />
 64 |                   {this.props.quitWalkthroughVisible && (
 65 |                     <Button
 66 |                       intent={Intent.WARNING}
 67 |                       onClick={disableWalkthrough}
 68 |                       text="Quit"
 69 |                     />
 70 |                   )}
 71 |                 </div>
 72 |               </div>
 73 |             )}
 74 |           </div>
 75 |         }
 76 |       >
 77 |         {this.props.children}
 78 |       </Tooltip2>
 79 |     );
 80 |   }
 81 | }
 82 | 
 83 | class WalkthroughDialog extends Component {
 84 |   static defaultProps = {
 85 |     nextLabel: "Next",
 86 |     quitWalkthroughVisible: false
 87 |   };
 88 |   render() {
 89 |     return (
 90 |       <Dialog
 91 |         isOpen={isAtStepAndActive(this.props.step)}
 92 |         onClose={advanceTo.bind(this, this.props.step + 1)}
 93 |         {...this.props}
 94 |       >
 95 |         <div>
 96 |           <div style={{ padding: "10px" }}>{this.props.children}</div>
 97 | 
 98 |           <div className="pt-dialog-footer">
 99 |             <div className="pt-dialog-footer-actions">
100 |               <Button
101 |                 intent={Intent.PRIMARY}
102 |                 onClick={advanceTo.bind(this, this.props.step + 1)}
103 |                 text={this.props.nextLabel}
104 |               />
105 |               {this.props.quitWalkthroughVisible && (
106 |                 <Button
107 |                   intent={Intent.WARNING}
108 |                   onClick={disableWalkthrough}
109 |                   text="Quit"
110 |                 />
111 |               )}
112 |             </div>
113 |           </div>
114 |         </div>
115 |       </Dialog>
116 |     );
117 |   }
118 | }
119 | 
120 | export { WalkthroughDialog as Dialog };
121 | 


--------------------------------------------------------------------------------
/src/components/NewBlock.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import classnames from "classnames";
  3 | import { Tab2, Tabs2, Button } from "@blueprintjs/core";
  4 | import NewBlockHeader from "./NewBlockHeader";
  5 | import NewBlockTransactionList from "./NewBlockTransactionList";
  6 | import UTXOPoolTable from "./UTXOPoolTable";
  7 | import { Tooltip, advanceTo, isAtStep } from "./walkthrough";
  8 | class NewBlock extends Component {
  9 |   addBlock = evt => {
 10 |     if (this.props.block.isValid()) {
 11 |       this.props.block.blockchain.addBlock(this.props.block);
 12 |       this.props.onCancel();
 13 |       advanceTo(5);
 14 |     }
 15 |   };
 16 | 
 17 |   rerender = () => {
 18 |     this.forceUpdate();
 19 |   };
 20 |   render() {
 21 |     return (
 22 |       <div style={{ padding: "10px" }}>
 23 |         <Tabs2
 24 |           onChange={(newTabId, prevTabId, event) => {
 25 |             if (newTabId === "txs" && isAtStep(14)) advanceTo(15);
 26 |           }}
 27 |         >
 28 |           <Tab2
 29 |             id="blockheader"
 30 |             title="Block Header"
 31 |             panel={
 32 |               <NewBlockHeader
 33 |                 block={this.props.block}
 34 |                 rerender={this.rerender}
 35 |               />
 36 |             }
 37 |           />
 38 |           <Tab2
 39 |             id="txs"
 40 |             title={
 41 |               <Tooltip
 42 |                 content={
 43 |                   <p style={{ maxWidth: "250px" }}>
 44 |                     Here you can see broadcasted transactions or add your own
 45 |                   </p>
 46 |                 }
 47 |                 step={14}
 48 |                 nextButtonVisible={false}
 49 |               >
 50 |                 Transactions
 51 |               </Tooltip>
 52 |             }
 53 |             panel={
 54 |               <NewBlockTransactionList
 55 |                 block={this.props.block}
 56 |                 rerender={this.rerender}
 57 |               />
 58 |             }
 59 |           />
 60 |           <Tab2
 61 |             id="utxopool"
 62 |             title="UTXO Pool"
 63 |             panel={
 64 |               <div>
 65 |                 <p>
 66 |                   This represents the UTXO pool after the mining reward and all
 67 |                   transactions that would be applied, i.e. the successful mining
 68 |                   and validation of a block.
 69 |                 </p>
 70 |                 <UTXOPoolTable block={this.props.block} />
 71 |               </div>
 72 |             }
 73 |           />
 74 |         </Tabs2>
 75 | 
 76 |         <div style={{ float: "right" }}>
 77 |           <Tooltip
 78 |             content={
 79 |               <p style={{ maxWidth: "250px" }}>
 80 |                 Assuming you did everything right, you have indeed found a
 81 |                 nonce, that will yield you a valid hash for your block. You can
 82 |                 now "add" your block to the parent block and brodcast it to
 83 |                 other nodes. If your block is part of the longest chain of
 84 |                 blocks and other nodes continue to work of this chain, then
 85 |                 you'll be indeed the owner of the mining reward.
 86 |               </p>
 87 |             }
 88 |             next={this.addBlock}
 89 |             nextLabel="Broadcast my block!"
 90 |             step={4}
 91 |           >
 92 |             <Button
 93 |               iconName="pt-icon-add"
 94 |               className={classnames("pt-intent-primary", {
 95 |                 "pt-disabled": !this.props.block.isValid()
 96 |               })}
 97 |               onClick={this.addBlock}
 98 |             >
 99 |               Add Block
100 |             </Button>
101 |           </Tooltip>
102 | 
103 |           <Button
104 |             style={{ marginLeft: "10px", marginRight: "24px" }}
105 |             onClick={this.props.onCancel}
106 |           >
107 |             Cancel
108 |           </Button>
109 |         </div>
110 |       </div>
111 |     );
112 |   }
113 | }
114 | 
115 | export default NewBlock;
116 | 


--------------------------------------------------------------------------------
/src/models/Blockchain.js:
--------------------------------------------------------------------------------
  1 | import Block from "./Block";
  2 | import { blockFromJSON } from "./Block";
  3 | import { transactionFromJSON } from "./Transaction";
  4 | import { rerender } from "../store";
  5 | import { publish, subscribeTo } from "../network";
  6 | import { maxBy, reduce, unfold, reverse, values, prop } from "ramda";
  7 | 
  8 | class Blockchain {
  9 |   constructor(name) {
 10 |     this.name = name;
 11 |     this.genesis = null;
 12 |     this.blocks = {};
 13 | 
 14 |     this.pendingTransactions = {};
 15 | 
 16 |     this.createGenesisBlock();
 17 | 
 18 |     subscribeTo("BLOCKS_BROADCAST", ({ blocks, blockchainName }) => {
 19 |       if (blockchainName === this.name) {
 20 |         blocks.forEach(block => this._addBlock(blockFromJSON(this, block)));
 21 |       }
 22 |     });
 23 | 
 24 |     subscribeTo("TRANSACTION_BROADCAST", ({ transaction, blockchainName }) => {
 25 |       if (blockchainName === this.name) {
 26 |         this.pendingTransactions[transaction.hash] = transactionFromJSON(transaction);
 27 |       }
 28 |     });
 29 | 
 30 |     publish("REQUEST_BLOCKS", { blockchainName: this.name });
 31 |     subscribeTo("REQUEST_BLOCKS", ({ blockchainName }) => {
 32 |       if (blockchainName === this.name)
 33 |         publish("BLOCKS_BROADCAST", {
 34 |           blockchainName,
 35 |           blocks: Object.values(this.blocks).map(b => b.toJSON())
 36 |         });
 37 |     });
 38 |   }
 39 | 
 40 |   maxHeightBlock() {
 41 |     const blocks = values(this.blocks);
 42 |     const maxByHeight = maxBy(prop("height"));
 43 |     const maxHeightBlock = reduce(maxByHeight, blocks[0], blocks);
 44 |     return maxHeightBlock;
 45 |   }
 46 | 
 47 |   longestChain() {
 48 |     const getParent = x => {
 49 |       if (x === undefined) {
 50 |         return false;
 51 |       }
 52 | 
 53 |       return [x, this.blocks[x.parentHash]];
 54 |     };
 55 |     return reverse(unfold(getParent, this.maxHeightBlock()));
 56 |   }
 57 | 
 58 |   createGenesisBlock() {
 59 |     const block = new Block({
 60 |       blockchain: this,
 61 |       parentHash: "root",
 62 |       height: 1,
 63 |       nonce: this.name
 64 |     });
 65 |     this.blocks[block.hash] = block;
 66 |     this.genesis = block;
 67 |   }
 68 | 
 69 |   containsBlock(block) {
 70 |     return this.blocks[block.hash] !== undefined;
 71 |   }
 72 | 
 73 |   addBlock(newBlock) {
 74 |     this._addBlock(newBlock);
 75 |     publish("BLOCKS_BROADCAST", {
 76 |       blocks: [newBlock.toJSON()],
 77 |       blockchainName: this.name
 78 |     });
 79 |   }
 80 | 
 81 |   _addBlock(block) {
 82 |     if (!block.isValid()) return;
 83 |     if (this.containsBlock(block)) return;
 84 | 
 85 |     // check that the parent is actually existent and the advertised height is correct
 86 |     const parent = this.blocks[block.parentHash];
 87 |     if (parent === undefined && parent.height + 1 !== block.height) return;
 88 | 
 89 |     const isParentMaxHeight = this.maxHeightBlock().hash === parent.hash;
 90 | 
 91 |     // clone the utxo pool of the parent and reconcile with the block
 92 |     const newUtxoPool = parent.utxoPool.clone();
 93 |     block.utxoPool = newUtxoPool;
 94 | 
 95 |     // Add coinbase coin to the pool
 96 |     block.utxoPool.addUTXO(block.coinbaseBeneficiary, 12.5);
 97 | 
 98 |     // Reapply transactions to validate them
 99 |     const transactions = block.transactions;
100 |     block.transactions = {};
101 |     let containsInvalidTransactions = false;
102 | 
103 |     Object.values(transactions).forEach(transaction => {
104 |       if (block.isValidTransaction(transaction)) {
105 |         block.addTransaction(transaction);
106 | 
107 |         // if we have the transaction as a pending one on the chain, remove it from the pending pool if we are at max height
108 |         if (isParentMaxHeight && this.pendingTransactions[transaction.hash])
109 |           delete this.pendingTransactions[transaction.hash];
110 |       } else {
111 |         containsInvalidTransactions = true;
112 |       }
113 |     });
114 | 
115 |     // If we found any invalid transactions, dont add the block
116 |     if (containsInvalidTransactions) return;
117 | 
118 |     this.blocks[block.hash] = block;
119 |     rerender();
120 |   }
121 | }
122 | export default Blockchain;
123 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 |       } else {
 39 |         // Is not local host. Just register service worker
 40 |         registerValidSW(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/components/WelcomeUTXOPoolTable.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { Dialog, Button } from "@blueprintjs/core";
  3 | import NewTransaction from "./NewTransaction";
  4 | import Transaction from "../models/Transaction";
  5 | import UTXOPoolTable from "./UTXOPoolTable";
  6 | import classnames from "classnames";
  7 | import { publish } from "../network";
  8 | import {
  9 |   Tooltip,
 10 |   advanceTo
 11 | } from "./walkthrough";
 12 | 
 13 | export default class WelcomeUTXOPoolTable extends Component {
 14 |   state = {
 15 |     isAddingTransaction: false,
 16 |     inputPublicKey: "",
 17 |     outputPublicKey: "",
 18 |     transactionAmount: 0,
 19 |     fee: 0,
 20 |     signature: ""
 21 |   };
 22 | 
 23 |   onChangeInputPublicKey = inputPublicKey => {
 24 |     this.setState({ inputPublicKey });
 25 |   };
 26 |   onChangeOutputPublicKey = outputPublicKey => {
 27 |     this.setState({ outputPublicKey });
 28 |   };
 29 |   onChangeTransactionAmount = evt => {
 30 |     this.setState({ transactionAmount: parseFloat(evt.target.value) || 0 });
 31 |   };
 32 |   onChangeFee = evt => {
 33 |     this.setState({ fee: parseFloat(evt.target.value) || 0 });
 34 |   };
 35 |   onChangeSignature = signature => {
 36 |     this.setState({ signature });
 37 |   };
 38 |   exitAddingTransaction = () => {
 39 |     this.setState({
 40 |       isAddingTransaction: false,
 41 |       inputPublicKey: "",
 42 |       outputPublicKey: "",
 43 |       amount: 0,
 44 |       fee: 0,
 45 |       signature: ""
 46 |     });
 47 |   };
 48 | 
 49 |   authoringTransaction() {
 50 |     return new Transaction(
 51 |       this.state.inputPublicKey,
 52 |       this.state.outputPublicKey,
 53 |       this.state.transactionAmount,
 54 |       this.state.fee,
 55 |       this.state.signature
 56 |     );
 57 |   }
 58 | 
 59 |   isValidTransaction() {
 60 |     return (
 61 |       this.state.inputPublicKey !== "" &&
 62 |       this.state.outputPublicKey !== "" &&
 63 |       this.state.transactionAmount > 0 &&
 64 |       this.authoringTransaction().hasValidSignature()
 65 |     );
 66 |   }
 67 |   broadcastTransaction = () => {
 68 |     publish("TRANSACTION_BROADCAST", {
 69 |       blockchainName: this.props.blockchain.name,
 70 |       transaction: this.authoringTransaction().toJSON()
 71 |     });
 72 |     advanceTo(14);
 73 |     this.exitAddingTransaction();
 74 |   };
 75 |   render() {
 76 |     return (
 77 |       <div>
 78 |         <UTXOPoolTable
 79 |           block={this.props.blockchain.maxHeightBlock()}
 80 |           onSelectRow={utxo =>
 81 |             this.setState({
 82 |               isAddingTransaction: true,
 83 |               inputPublicKey: utxo.publicKey,
 84 |               amount: utxo.amount
 85 |             })
 86 |           }
 87 |         />
 88 |         <Dialog
 89 |           isOpen={this.state.isAddingTransaction}
 90 |           onClose={this.exitAddingTransaction}
 91 |           title="Broadcast transaction"
 92 |           style={{ width: "95%" }}
 93 |         >
 94 |           <div style={{ padding: "10px" }}>
 95 |             <NewTransaction
 96 |               transaction={this.authoringTransaction()}
 97 |               onChangeInputPublicKey={this.onChangeInputPublicKey}
 98 |               onChangeOutputPublicKey={this.onChangeOutputPublicKey}
 99 |               onChangeTransactionAmount={this.onChangeTransactionAmount}
100 |               onChangeFee={this.onChangeFee}
101 |               onChangeSignature={this.onChangeSignature}
102 |               block={this.props.blockchain.maxHeightBlock()}
103 |             />
104 |             <div style={{ float: "right" }}>
105 |               <Tooltip
106 |                 content={
107 |                   <p style={{ maxWidth: "250px" }}>
108 |                     Now you are ready to announce your transaction to the
109 |                     network in the hopes that someone will pick it up and add it
110 |                     to their block. If you really want to make sure it will end
111 |                     up in the blockchain, you can also just mine the block
112 |                     yourself and add your own transaction!
113 |                   </p>
114 |                 }
115 |                 next={this.broadcastTransaction}
116 |                 nextLabel="Broadcast"
117 |                 step={13}
118 |               >
119 |                 <Button
120 |                   iconName="pt-icon-add"
121 |                   className={classnames("pt-intent-primary", {
122 |                     "pt-disabled": !this.isValidTransaction()
123 |                   })}
124 |                   onClick={this.broadcastTransaction}
125 |                 >
126 |                   Broadcast
127 |                 </Button>
128 |               </Tooltip>
129 |               <Button
130 |                 style={{ marginLeft: "10px", marginRight: "24px" }}
131 |                 onClick={this.exitAddingTransaction}
132 |               >
133 |                 Cancel
134 |               </Button>
135 |             </div>
136 |           </div>
137 |         </Dialog>
138 |       </div>
139 |     );
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import "./App.css";
  3 | import BlockchainWelcome from "./components/BlockchainWelcome";
  4 | import { Button } from "@blueprintjs/core";
  5 | import { action } from "./store";
  6 | import { Tooltip, Dialog } from "./components/walkthrough";
  7 | 
  8 | class App extends Component {
  9 |   state = {
 10 |     ownBlockchainName: ""
 11 |   };
 12 |   pickBlockchain = name => {
 13 |     action({ type: "PICK_BLOCKCHAIN", name });
 14 |   };
 15 |   render() {
 16 |     return (
 17 |       <div className="">
 18 |         <nav className="pt-navbar">
 19 |           <div className="pt-navbar-group pt-align-left">
 20 |             <div className="pt-navbar-heading">Build your own Blockchain</div>
 21 |             Made by&nbsp;<a
 22 |               href="https://twitter.com/nambrot"
 23 |               target="_blank"
 24 |               rel="noopener noreferrer"
 25 |             >
 26 |               @nambrot
 27 |             </a>
 28 |           </div>
 29 | 
 30 |           <div className="pt-navbar-group pt-align-right">
 31 |             <Tooltip
 32 |               step={1}
 33 |               content={
 34 |                 <p style={{ maxWidth: "250px" }}>
 35 |                   You can either keep the current blockchain or start you own
 36 |                   blockchain from scratch
 37 |                 </p>
 38 |               }
 39 |             >
 40 |               <select
 41 |                 onChange={evt => {
 42 |                   this.pickBlockchain(evt.target.value);
 43 |                 }}
 44 |                 value={
 45 |                   this.props.appState.selectedBlockchain
 46 |                     ? this.props.appState.selectedBlockchain.name
 47 |                     : ""
 48 |                 }
 49 |               >
 50 |                 {[
 51 |                   <option key="default" value="">
 52 |                     Pick a blockchain or
 53 |                   </option>
 54 |                 ].concat(
 55 |                   this.props.appState.blockchains.map(b => (
 56 |                     <option key={b.name} value={b.name}>
 57 |                       {b.name}
 58 |                     </option>
 59 |                   ))
 60 |                 )}
 61 |               </select>
 62 |             </Tooltip>
 63 |             <div className="pt-control-group">
 64 |               <div className="pt-input-group">
 65 |                 <input
 66 |                   className="pt-input"
 67 |                   placeholder="create your own"
 68 |                   value={this.state.ownBlockchainName}
 69 |                   style={{ paddingRight: "150px" }}
 70 |                   onChange={evt =>
 71 |                     this.setState({ ownBlockchainName: evt.target.value })
 72 |                   }
 73 |                   onKeyPress={evt => {
 74 |                     if (evt.charCode === 13) {
 75 |                       this.pickBlockchain(this.state.ownBlockchainName);
 76 |                     }
 77 |                   }}
 78 |                 />
 79 |                 <div className="pt-input-action">
 80 |                   <Button
 81 |                     text="Create"
 82 |                     onClick={() =>
 83 |                       this.pickBlockchain(this.state.ownBlockchainName)
 84 |                     }
 85 |                   />
 86 |                 </div>
 87 |               </div>
 88 |             </div>
 89 |           </div>
 90 |         </nav>
 91 |         <Dialog step={0} title="Welcome!" quitWalkthroughVisible={true}>
 92 |           <div>
 93 |             <p>
 94 |               This is an final step of an interactive blockchain demo. There is
 95 |               a detailed step by step expanation of all the mechanics involved 
 96 |               in making a blockchain that will give you a much better understanding 
 97 |               of how blockchains work, so I highly recommend checking it out at {" "}
 98 |               <a
 99 |                 href="https://github.com/nambrot/blockchain-in-js"
100 |                 target="_blank"
101 |                 rel="noopener noreferrer"
102 |               >
103 |                 repo at github.com/nambrot/blockchain-in-js
104 |               </a>{" "}.
105 |               Note that this is a distributed demo, so you can open up{" "}
106 |               <a href="/" target="_blank" rel="noopener noreferrer">
107 |                 multiple tabs
108 |               </a>{" "}
109 |               of this app to simulate multiple participants. I have prepared a
110 |               walkthrough for you that you can follow along, or if you are the
111 |               more freedom-loving kind, you can quit and figure it out yourself.
112 |             </p>
113 |           </div>
114 |         </Dialog>
115 |         <div className="container" style={{ padding: 24 }}>
116 |           {this.props.appState.selectedBlockchain === undefined && (
117 |             <p>
118 |               Learn more about blockchains. Start by picking or create a new
119 |               blockchain in the top-right corner.
120 |             </p>
121 |           )}
122 |           {this.props.appState.selectedBlockchain !== undefined && (
123 |             <BlockchainWelcome
124 |               blockchain={this.props.appState.selectedBlockchain}
125 |               node={this.props.appState.node}
126 |               identities={this.props.appState.identities}
127 |             />
128 |           )}
129 |         </div>
130 |       </div>
131 |     );
132 |   }
133 | }
134 | 
135 | export default App;
136 | 


--------------------------------------------------------------------------------
/src/components/BlockchainTree.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import SortableTree from "react-sortable-tree";
  3 | import { getTreeFromFlatData } from "react-sortable-tree";
  4 | import { Button, Dialog } from "@blueprintjs/core";
  5 | import { contains, pluck, pipe } from "ramda";
  6 | import NewBlock from "./NewBlock";
  7 | import DetailBlock from "./DetailBlock";
  8 | import { Tooltip, advanceTo, Dialog as WalkthroughDialog } from "./walkthrough";
  9 | import { last } from "ramda";
 10 | 
 11 | function generateNodeProps(longestChain) {
 12 |   return function({ node, path }) {
 13 |     const addBlock = () => {
 14 |       this.addBlockFrom(node);
 15 |       advanceTo(3);
 16 |     };
 17 |     const normalButton = (
 18 |       <Button key="add" text="Add block from here" onClick={addBlock} />
 19 |     );
 20 |     const isMaxHeightBlock = last(longestChain).hash === node.hash;
 21 | 
 22 |     return {
 23 |       buttons: [
 24 |         <Button
 25 |           key="detail"
 26 |           iconName="pt-icon-database"
 27 |           onClick={this.showBlock(node)}
 28 |         />,
 29 |         isMaxHeightBlock ? (
 30 |           <Tooltip
 31 |             content={
 32 |               <p style={{ maxWidth: "250px" }}>
 33 |                 Mining blocks means adding blocks to another parent block by
 34 |                 pointing to it in the block header. Unless someone else gives
 35 |                 you coins, mining is the only way for you to get coins, so let's
 36 |                 start here.
 37 |               </p>
 38 |             }
 39 |             next={addBlock}
 40 |             nextLabel="Start mining!"
 41 |             step={2}
 42 |           >
 43 |             {normalButton}
 44 |           </Tooltip>
 45 |         ) : (
 46 |           normalButton
 47 |         )
 48 |       ],
 49 |       node: {
 50 |         title: `Block ${node.hash.substr(0, 10)}`,
 51 |         subtitle: `Height ${node.height}`,
 52 |         expanded: true
 53 |       },
 54 |       className: pipe(pluck("hash"), contains(node.hash))(longestChain)
 55 |         ? "partOfLongestChain"
 56 |         : ""
 57 |     };
 58 |   };
 59 | }
 60 | 
 61 | class BlockchainWelcome extends Component {
 62 |   state = {
 63 |     addBlock: null,
 64 |     showBlock: null
 65 |   };
 66 |   addBlockFrom = parent => {
 67 |     const parentBlock = parent.blockchain.blocks[parent.hash];
 68 |     this.setState({
 69 |       addBlock: parentBlock.createChild(this.props.node.publicKey)
 70 |     });
 71 |   };
 72 |   showBlock = block => {
 73 |     return evt => {
 74 |       const showBlock = block.blockchain.blocks[block.hash];
 75 |       this.setState({ showBlock });
 76 |     };
 77 |   };
 78 |   closeAddBlock = () => {
 79 |     this.setState({ addBlock: null });
 80 |   };
 81 |   closeShowBlock = () => {
 82 |     this.setState({ showBlock: null });
 83 |   };
 84 |   render() {
 85 |     const treeData = getTreeFromFlatData({
 86 |       flatData: Object.values(this.props.blockchain.blocks),
 87 |       getKey: block => block.hash,
 88 |       getParentKey: block => block.parentHash,
 89 |       rootKey: this.props.blockchain.genesis.parentHash
 90 |     });
 91 |     const longestChain = this.props.blockchain.longestChain();
 92 |     return (
 93 |       <div style={{ height: 800 }}>
 94 |         <SortableTree
 95 |           treeData={treeData}
 96 |           canDrag={false}
 97 |           onChange={treeData => this.setState({ treeData })}
 98 |           generateNodeProps={generateNodeProps(longestChain).bind(this)}
 99 |         />
100 |         <Dialog
101 |           isOpen={this.state.addBlock !== null}
102 |           onClose={this.closeAddBlock}
103 |           transitionDuration={50}
104 |           title="Add block"
105 |           style={{ width: "95%" }}
106 |         >
107 |           <NewBlock
108 |             block={this.state.addBlock}
109 |             onCancel={this.closeAddBlock}
110 |             node={this.props.node}
111 |           />
112 |         </Dialog>
113 |         {this.state.showBlock === null && (
114 |           <WalkthroughDialog step={16} title="The end" nextLabel="Bye!">
115 |             <div>
116 |               <p>
117 |                 Thank you you following this demo. You can continue to play
118 |                 around with this to get a better intuitive understanding of how
119 |                 blockchains work. I especially recommend you to work blocks from
120 |                 various places and see how it impacts the consensus of the
121 |                 system. I would love to hear your feedback, you can find me at{" "}
122 |                 <a
123 |                   href="https://nambrot.com"
124 |                   target="_blank"
125 |                   rel="noopener noreferrer"
126 |                 >
127 |                   nambrot.com
128 |                 </a>
129 |                 . If you enjoyed this demo, feel free to{" "}
130 |                 <a
131 |                   href="https://twitter.com/intent/tweet?text=Check%20out%20this%20cool%20blockchain%20demo%20at%20blockchain.nambrot.com"
132 |                   target="_blank"
133 |                   rel="noopener noreferrer"
134 |                 >
135 |                   tweet it
136 |                 </a>{" "}
137 |                 .
138 |               </p>
139 |             </div>
140 |           </WalkthroughDialog>
141 |         )}
142 |         <Dialog
143 |           isOpen={this.state.showBlock !== null}
144 |           onClose={this.closeShowBlock}
145 |           transitionDuration={50}
146 |           title="Block Detail"
147 |           style={{ width: "70%" }}
148 |         >
149 |           <DetailBlock
150 |             block={this.state.showBlock}
151 |             onCancel={this.closeShowBlock}
152 |             identities={this.props.identities}
153 |           />
154 |         </Dialog>
155 |       </div>
156 |     );
157 |   }
158 | }
159 | 
160 | export default BlockchainWelcome;
161 | 


--------------------------------------------------------------------------------
/src/components/NewBlockTransactionList.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { Collapse, Button, Callout } from "@blueprintjs/core";
  3 | import TransactionTable from "./TransactionTable";
  4 | import NewTransaction from "./NewTransaction";
  5 | import Transaction from "../models/Transaction";
  6 | import { Tooltip } from "./walkthrough";
  7 | 
  8 | export default class NewBlockTransactionList extends Component {
  9 |   state = {
 10 |     isAddingNewTransaction: false,
 11 |     inputPublicKey: "",
 12 |     outputPublicKey: "",
 13 |     transactionAmount: 0,
 14 |     fee: 0,
 15 |     signature: ""
 16 |   };
 17 |   onChangeInputPublicKey = inputPublicKey => {
 18 |     this.setState({ inputPublicKey });
 19 |   };
 20 |   onChangeOutputPublicKey = outputPublicKey => {
 21 |     this.setState({ outputPublicKey });
 22 |   };
 23 |   onChangeTransactionAmount = evt => {
 24 |     this.setState({ transactionAmount: parseFloat(evt.target.value) || 0 });
 25 |   };
 26 |   onChangeFee = evt => {
 27 |     this.setState({ fee: parseFloat(evt.target.value) || 0 });
 28 |   };
 29 |   onChangeSignature = signature => {
 30 |     this.setState({ signature });
 31 |   };
 32 | 
 33 |   authoringTransaction() {
 34 |     return new Transaction(
 35 |       this.state.inputPublicKey,
 36 |       this.state.outputPublicKey,
 37 |       this.state.transactionAmount,
 38 |       this.state.fee,
 39 |       this.state.signature
 40 |     );
 41 |   }
 42 |   addTransaction = () => {
 43 |     if (this.state.isAddingNewTransaction) {
 44 |       this.props.block.addTransaction(this.authoringTransaction());
 45 |       this.setState({
 46 |         isAddingNewTransaction: false,
 47 |         inputPublicKey: "",
 48 |         outputPublicKey: "",
 49 |         transactionAmount: 0,
 50 |         fee: 0
 51 |       });
 52 |       this.props.rerender();
 53 |     } else {
 54 |       this.setState({ isAddingNewTransaction: true });
 55 |     }
 56 |   };
 57 | 
 58 |   shouldValidateTransaction() {
 59 |     return (
 60 |       this.state.inputPublicKey !== "" && this.state.transactionAmount !== 0
 61 |     );
 62 |   }
 63 | 
 64 |   isValidTransaction() {
 65 |     return this.props.block.isValidTransaction(this.authoringTransaction());
 66 |   }
 67 | 
 68 |   addingTransactionErrorMessage() {
 69 |     return this.props.block.addingTransactionErrorMessage(
 70 |       this.authoringTransaction()
 71 |     );
 72 |   }
 73 | 
 74 |   applicableExternalTransactions() {
 75 |     return Object.values(
 76 |       this.props.block.blockchain.pendingTransactions
 77 |     ).filter(
 78 |       transaction =>
 79 |         this.props.block.transactions[transaction.hash] === undefined &&
 80 |         this.props.block.isValidTransaction(transaction)
 81 |     );
 82 |   }
 83 | 
 84 |   renderExternalTransactions() {
 85 |     if (this.applicableExternalTransactions().length === 0) return null;
 86 | 
 87 |     return (
 88 |       <div>
 89 |         <h5>Broadcasted Transactions</h5>
 90 |         <p>
 91 |           Below listed you find transactions that have been broadcasted and are
 92 |           valid on this block (i.e. have valid signatures and have spendable
 93 |           UTXOs). You can add them to the block.
 94 |         </p>
 95 |         <Tooltip
 96 |           content={
 97 |             <p style={{ maxWidth: "250px" }}>
 98 |               Below you should see all transactions that have been broadcasted
 99 |               including yours. As a miner you can add as many transactions as
100 |               possible to collect the fees. Remember, you will still have to
101 |               find a valid nonce that makes your block hash valid and then
102 |               broadcast it!
103 |             </p>
104 |           }
105 |           step={15}
106 |         >
107 |           <TransactionTable
108 |             transactions={this.applicableExternalTransactions()}
109 |             noTransactionsText="This block contains no transactions."
110 |             transactionAction={transaction => (
111 |               <Button
112 |                 text="Add Transaction"
113 |                 onClick={() => {
114 |                   this.props.block.addTransaction(transaction);
115 |                   this.props.rerender();
116 |                 }}
117 |               />
118 |             )}
119 |           />
120 |         </Tooltip>
121 |       </div>
122 |     );
123 |   }
124 | 
125 |   render() {
126 |     return (
127 |       <div>
128 |         <div>
129 |           <p>
130 |             This is where you can add transactions to this block. The UTXO pool
131 |             will contain the mining reward of the coinbase that you can spend
132 |             immediately
133 |           </p>
134 |           <TransactionTable
135 |             transactions={this.props.block.transactions}
136 |             noTransactionsText="This block contains no transactions."
137 |           />
138 |           <Collapse isOpen={this.state.isAddingNewTransaction}>
139 |             <NewTransaction
140 |               transaction={this.authoringTransaction()}
141 |               onChangeInputPublicKey={this.onChangeInputPublicKey}
142 |               onChangeOutputPublicKey={this.onChangeOutputPublicKey}
143 |               onChangeTransactionAmount={this.onChangeTransactionAmount}
144 |               onChangeFee={this.onChangeFee}
145 |               onChangeSignature={this.onChangeSignature}
146 |               block={this.props.block}
147 |             />
148 |             {this.shouldValidateTransaction() &&
149 |               !this.isValidTransaction() && (
150 |                 <Callout className="pt-intent-danger">
151 |                   <p>{this.addingTransactionErrorMessage()}</p>
152 |                 </Callout>
153 |               )}
154 |           </Collapse>
155 | 
156 |           <Button
157 |             iconName="pt-icon-add"
158 |             className="pt-intent-primary pt-input-action"
159 |             onClick={this.addTransaction}
160 |             disabled={
161 |               this.state.isAddingNewTransaction && !this.isValidTransaction()
162 |             }
163 |             text={
164 |               this.state.isAddingNewTransaction
165 |                 ? "Add Transaction to Block"
166 |                 : "Create Transaction"
167 |             }
168 |           />
169 | 
170 |           {this.renderExternalTransactions()}
171 |         </div>
172 |       </div>
173 |     );
174 |   }
175 | }
176 | 


--------------------------------------------------------------------------------
/src/components/NewBlockHeader.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import sha256 from "crypto-js/sha256";
  3 | import classnames from "classnames";
  4 | import { Button } from "@blueprintjs/core";
  5 | import Key from "./Key";
  6 | import { Tooltip, advanceTo } from "./walkthrough";
  7 | 
  8 | export default class NewBlockHeader extends Component {
  9 |   changeNonce = evt => {
 10 |     this.props.block.setNonce(evt.target.value);
 11 |     this.props.rerender();
 12 |   };
 13 |   tryUntilFound = () => {
 14 |     if (!this.props.block.isValid()) {
 15 |       this.props.block.setNonce(
 16 |         sha256(new Date().getTime().toString()).toString()
 17 |       );
 18 |       this.props.rerender();
 19 | 
 20 |       if (!this.props.block.isValid()) {
 21 |         setTimeout(this.tryUntilFound, 2);
 22 |       } else {
 23 |         advanceTo(4)
 24 |       }
 25 |     } else {
 26 |       advanceTo(4)
 27 |     }
 28 |   };
 29 |   render() {
 30 |     return (
 31 |       <div>
 32 |         <p>
 33 |           This is the "mining" part of blockchains. In order to be allowed to
 34 |           add a block to the chain, is has to conform to certain criteria. To
 35 |           achieve consensus over the history of blocks, we have to make it
 36 |           difficult to do so, and in proof-of-work systems, that is ensured by
 37 |           having miners solve computational puzzles. In this case, we expect the
 38 |           hashes of of the blocks to end in a certain number of '0's by trying
 39 |           out many nonces. Other nodes can easily verify the integrity of the
 40 |           block by recalculating the hash.
 41 |         </p>
 42 |         <table className="pt-table .modifier">
 43 |           <tbody>
 44 |             <tr>
 45 |               <td />
 46 |               <td>SHA256(</td>
 47 |             </tr>
 48 |             <tr>
 49 |               <td>Parent Hash</td>
 50 |               <td>
 51 |                 <textarea
 52 |                   className="pt-input"
 53 |                   spellCheck={false}
 54 |                   style={{ width: "150px", height: "75px" }}
 55 |                   value={this.props.block.parentHash}
 56 |                   readOnly
 57 |                 />
 58 |               </td>
 59 |               <td>This value refers to the parent and is thus static.</td>
 60 |             </tr>
 61 |             <tr>
 62 |               <td />
 63 |               <td>+</td>
 64 |             </tr>
 65 |             <tr>
 66 |               <td>Coinbase Beneficiary</td>
 67 |               <td>
 68 |                 <Key value={this.props.block.coinbaseBeneficiary} />
 69 |               </td>
 70 |               <td>This is the public key of your node</td>
 71 |             </tr>
 72 |             <tr>
 73 |               <td />
 74 |               <td>+</td>
 75 |             </tr>
 76 |             <tr>
 77 |               <td>Combined Transactions Hash </td>
 78 |               <td>
 79 |                 <textarea
 80 |                   className="pt-input"
 81 |                   spellCheck={false}
 82 |                   style={{ width: "150px", height: "75px" }}
 83 |                   value={this.props.block.combinedTransactionsHash()}
 84 |                   readOnly
 85 |                 />
 86 |               </td>
 87 |               <td>
 88 |                 This is the combined hash for all transactions in the block that
 89 |                 is computed via SHA256(txHash1 + txHash2 + ...)
 90 |               </td>
 91 |             </tr>
 92 |             <tr>
 93 |               <td />
 94 |               <td>+</td>
 95 |             </tr>
 96 |             <tr>
 97 |               <td>Nonce</td>
 98 |               <td>
 99 |                 <Tooltip
100 |                   content={
101 |                     <p style={{ maxWidth: "250px" }}>
102 |                       The hash of the block is based upon various parameters in this header, like the hash of the parent block, or the receiver of the mining reward (aka coinbase). Per rules of the protocol, the hash has to fullfill certain criteria, such as end in a minimum number of 0s. Changing the nonce allows you to change the hash of the block. Only valid blocks are considered by other nodes, thus if you actually want to receive coins, you better start mining for applicable nonces!
103 |                     </p>
104 |                   }
105 |                   next={this.tryUntilFound}
106 |                   nextLabel="Crunch some numbers!"
107 |                   step={3}
108 |                 >
109 |                   <textarea
110 |                     className="pt-input"
111 |                     spellCheck={false}
112 |                     style={{ width: "150px", height: "75px" }}
113 |                     value={this.props.block.nonce}
114 |                     onChange={this.changeNonce}
115 |                   />
116 |                 </Tooltip>
117 |               </td>
118 |               <td>
119 |                 This is the part that is miners have to guess random values for
120 |                 so that the hash becomes valid. Manually try to change the nonce
121 |                 or <Button onClick={this.tryUntilFound}>brute-force</Button>
122 |               </td>
123 |             </tr>
124 |             <tr>
125 |               <td />
126 |               <td>) =</td>
127 |             </tr>
128 |             <tr>
129 |               <td>Hash</td>
130 |               <td>
131 |                 <textarea
132 |                   className={classnames("pt-input", {
133 |                     "pt-intent-danger": !this.props.block.isValid(),
134 |                     "pt-intent-primary": this.props.block.isValid()
135 |                   })}
136 |                   spellCheck={false}
137 |                   style={{ width: "150px", height: "75px" }}
138 |                   value={this.props.block.hash}
139 |                   readOnly
140 |                 />
141 |               </td>
142 |               <td>
143 |                 {this.props.block.isValid() &&
144 |                   "The hash is valid as the last {BLOCK_DIFFICULTY = 2} characters are '0'. "}
145 |                 {!this.props.block.isValid() &&
146 |                   "The hash is invalid as the last {BLOCK_DIFFICULTY = 2} characters are not '0'. "}
147 |                 In real blockchains, this difficulty is dynamic based upon how
148 |                 many blocks were mined in the recent past
149 |               </td>
150 |             </tr>
151 |           </tbody>
152 |         </table>
153 |       </div>
154 |     );
155 |   }
156 | }
157 | 


--------------------------------------------------------------------------------
/src/components/Signature.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { Icon, Button, Dialog } from "@blueprintjs/core";
  3 | import { Popover2 } from "@blueprintjs/labs";
  4 | import AddIdentity from "./AddIdentity";
  5 | import { sign, verifySignature } from "../crypto";
  6 | import { state } from "../store";
  7 | import classnames from "classnames";
  8 | import Key from "./Key";
  9 | import {
 10 |   Tooltip,
 11 |   advanceTo,
 12 |   hideWalkthrough,
 13 | } from "./walkthrough";
 14 | export default class Signature extends Component {
 15 |   static defaultProps = {
 16 |     isEditable: true,
 17 |     signature: "",
 18 |     messageToSign: "",
 19 |     publicKey: "",
 20 |     onChangeSignature: () => {},
 21 |     onOpenSignatureDialog: () => {}
 22 |   };
 23 | 
 24 |   constructor(props) {
 25 |     super(props);
 26 | 
 27 |     this.state = {
 28 |       isAddingSignature: false,
 29 |       privateKey: ""
 30 |     };
 31 |   }
 32 |   openSignature = () => {
 33 |     this.setState({ isAddingSignature: true });
 34 |     this.props.onOpenSignatureDialog();
 35 |   };
 36 |   closeSignature = () => this.setState({ isAddingSignature: false });
 37 |   submitSignature = () => {
 38 |     this.props.onChangeSignature(this.calculatedSignature());
 39 |     this.closeSignature();
 40 |   };
 41 | 
 42 |   changePrivateKey = evt => {
 43 |     hideWalkthrough();
 44 |     this.setState({ privateKey: evt.target.value });
 45 |   };
 46 |   calculatedSignature() {
 47 |     return sign(this.props.messageToSign, this.state.privateKey);
 48 |   }
 49 |   isSignatureValid() {
 50 |     return verifySignature(
 51 |       this.props.messageToSign,
 52 |       this.props.signature,
 53 |       this.props.publicKey
 54 |     );
 55 |   }
 56 | 
 57 |   isCalculatedSignatureValid() {
 58 |     return verifySignature(
 59 |       this.props.messageToSign,
 60 |       this.calculatedSignature(),
 61 |       this.props.publicKey
 62 |     );
 63 |   }
 64 | 
 65 |   selectPrivateKey = privateKey => {
 66 |     return () => {
 67 |       advanceTo(12);
 68 |       this.setState({ privateKey });
 69 |     };
 70 |   };
 71 |   render() {
 72 |     return (
 73 |       <div>
 74 |         <div className="pt-control-group">
 75 |           <div className="pt-input-group">
 76 |             <textarea
 77 |               className={classnames("pt-input", {
 78 |                 "pt-intent-danger": !this.isSignatureValid()
 79 |               })}
 80 |               placeholder="Signature"
 81 |               style={{
 82 |                 height: "75px",
 83 |                 width: "150px"
 84 |               }}
 85 |               readOnly={true}
 86 |               value={this.props.signature}
 87 |             />
 88 |             {this.props.isEditable && (
 89 |               <div className="pt-input-action">
 90 |                 <Button
 91 |                   iconName="pt-icon-add"
 92 |                   className="pt-intent-primary"
 93 |                   text={this.props.signature === "" ? "Add" : "Update"}
 94 |                   onClick={this.openSignature}
 95 |                 />
 96 |               </div>
 97 |             )}
 98 |           </div>
 99 |         </div>
100 |         <Dialog
101 |           isOpen={this.state.isAddingSignature}
102 |           title="Add signature"
103 |           onClose={this.closeSignature}
104 |           style={{ width: "70%" }}
105 |         >
106 |           <div style={{ padding: "10px" }}>
107 |             <p>
108 |               Signatures are used to prove ownership over a public key. Only the
109 |               corresponding private key can yield a valid signature. Updates to
110 |               transaction data require an updated signature.
111 |             </p>
112 |             <table>
113 |               <thead>
114 |                 <tr>
115 |                   <th>Public Key</th>
116 |                   <th>Message to Sign</th>
117 |                   <th />
118 |                   <th>Private Key</th>
119 |                   <th />
120 |                   <th>Signature</th>
121 |                 </tr>
122 |               </thead>
123 |               <tbody>
124 |                 <tr>
125 |                   <td>
126 |                     <Key value={this.props.publicKey} />
127 |                   </td>
128 |                   <td>
129 |                     <textarea
130 |                       className="pt-input"
131 |                       placeholder="Signature"
132 |                       style={{
133 |                         height: "75px",
134 |                         width: "150px"
135 |                       }}
136 |                       readOnly={true}
137 |                       value={this.props.messageToSign}
138 |                     />
139 |                   </td>
140 |                   <td>+</td>
141 |                   <td>
142 |                     <Popover2 defaultIsOpen={true}>
143 |                       <textarea
144 |                         className="pt-input"
145 |                         placeholder="Private Key"
146 |                         style={{
147 |                           height: "75px",
148 |                           width: "150px"
149 |                         }}
150 |                         onChange={this.changePrivateKey}
151 |                         value={this.state.privateKey}
152 |                       />
153 |                       <div style={{ padding: "10px" }}>
154 |                       <Tooltip
155 |                       content={
156 |                         <p style={{ maxWidth: "250px" }}>
157 |                          Pick the right private key for the originating public key
158 |                         </p>
159 |                       }
160 |                       step={11}
161 |                       nextButtonVisible={false}
162 |                     >
163 |                           <h6>Identities you control</h6>
164 |                           </Tooltip>
165 |                         {Object.values(state.identities).map(identity => {
166 |                           return (
167 |                             <a
168 |                               key={identity.publicKey}
169 |                               onClick={this.selectPrivateKey(
170 |                                 identity.privateKey
171 |                               )}
172 |                             >
173 |                               <li>{identity.name}</li>
174 |                             </a>
175 |                           );
176 |                         })}
177 |                         <AddIdentity />
178 |                       </div>
179 |                     </Popover2>
180 |                   </td>
181 |                   <td>
182 |                     <Icon iconName="pt-icon-arrow-right" />
183 |                   </td>
184 |                   <td>
185 |                     <textarea
186 |                       className="pt-input"
187 |                       placeholder="Signature"
188 |                       style={{
189 |                         height: "75px",
190 |                         width: "150px"
191 |                       }}
192 |                       value={this.calculatedSignature()}
193 |                     />
194 |                   </td>
195 |                 </tr>
196 |               </tbody>
197 |             </table>
198 |             <div className="pt-dialog-footer">
199 |               <div className="pt-dialog-footer-actions">
200 |                 <Button text="Cancel" onClick={this.closeSignature} />
201 |                 <Tooltip
202 |                   content={
203 |                     <p style={{ maxWidth: "250px" }}>Add the signature here.</p>
204 |                   }
205 |                   nextLabel="Update"
206 |                   next={this.submitSignature}
207 |                   step={12}
208 |                 >
209 |                   <Button
210 |                     iconName="pt-icon-add"
211 |                     className="pt-intent-primary"
212 |                     onClick={this.submitSignature}
213 |                     text="Update Signature"
214 |                   />
215 |                 </Tooltip>
216 |               </div>
217 |             </div>
218 |           </div>
219 |         </Dialog>
220 |       </div>
221 |     );
222 |   }
223 | }
224 | 


--------------------------------------------------------------------------------
/src/components/NewTransaction.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { Icon } from "@blueprintjs/core";
  3 | import Key from "./Key";
  4 | import { state } from "../store";
  5 | import UTXOPoolTable from "./UTXOPoolTable";
  6 | import AddIdentity from "./AddIdentity";
  7 | import Signature from "./Signature";
  8 | import { Tooltip, isAtStep, hideWalkthrough, advanceTo } from "./walkthrough";
  9 | export default class NewTransaction extends Component {
 10 |   static defaultProps = {
 11 |     transaction: null,
 12 |     block: null,
 13 |     onChangeInputPublicKey: () => {},
 14 |     onChangeOutputPublicKey: () => {},
 15 |     onChangeTransactionAmount: () => {},
 16 |     onChangeFee: () => {},
 17 |     onChangeSignature: () => {}
 18 |   };
 19 |   onChangeSignature = signature => {
 20 |     this.props.onChangeSignature(signature);
 21 |     if (isAtStep(12)) setTimeout(advanceTo.bind(this, 13), 1000);
 22 |   };
 23 |   onChangeOutputPublicKey = outputPublicKey => {
 24 |     this.props.onChangeOutputPublicKey(outputPublicKey);
 25 |     if (isAtStep(7))
 26 |       setTimeout(() => {
 27 |         if (isAtStep(7)) advanceTo(8);
 28 |       }, 1200);
 29 |   };
 30 |   onChangeFee = fee => {
 31 |     this.props.onChangeFee(fee);
 32 |     hideWalkthrough();
 33 |     if (isAtStep(9))
 34 |       setTimeout(() => {
 35 |         if (isAtStep(9)) advanceTo(10);
 36 |       }, 1000);
 37 |   };
 38 |   onChangeTransactionAmount = amount => {
 39 |     this.props.onChangeTransactionAmount(amount);
 40 |     hideWalkthrough();
 41 |     if (isAtStep(8))
 42 |       setTimeout(() => {
 43 |         if (isAtStep(8)) advanceTo(9);
 44 |       }, 800);
 45 |   };
 46 | 
 47 |   render() {
 48 |     return (
 49 |       <table>
 50 |         <thead>
 51 |           <tr>
 52 |             <th>Transaction Hash</th>
 53 |             <th>Sender Public Key</th>
 54 |             <th />
 55 |             <th>Receiver Public Key</th>
 56 |             <th>Amount</th>
 57 |             <th>Fee</th>
 58 |             <th>Signature</th>
 59 |           </tr>
 60 |         </thead>
 61 |         <tbody>
 62 |           <tr>
 63 |             <td>
 64 |               <textarea
 65 |                 className="pt-input"
 66 |                 spellCheck={false}
 67 |                 style={{ width: "150px", height: "75px" }}
 68 |                 value={this.props.transaction.hash}
 69 |                 readOnly
 70 |               />
 71 |             </td>
 72 |             <td>
 73 |               <Tooltip
 74 |                 content={
 75 |                   <p style={{ maxWidth: "250px" }}>
 76 |                     Click into the text area and specify who the money goes to.
 77 |                     Remember whoever has control over this public key will be
 78 |                     able to spend the coins. You can always create "another"
 79 |                     identity.
 80 |                   </p>
 81 |                 }
 82 |                 step={7}
 83 |                 nextButtonVisible={false}
 84 |               >
 85 |                 <Key
 86 |                   value={this.props.transaction.inputPublicKey}
 87 |                   onChange={this.props.onChangeInputPublicKey}
 88 |                   readOnly={false}
 89 |                   tooltipText="Specify the public key of the sender"
 90 |                   popover={
 91 |                     <div style={{ padding: "10px" }}>
 92 |                       <h6>Available UTXOs to spend</h6>
 93 |                       <UTXOPoolTable
 94 |                         block={this.props.block}
 95 |                         onSelectRow={utxo =>
 96 |                           this.props.onChangeInputPublicKey(utxo.publicKey)
 97 |                         }
 98 |                       />
 99 |                     </div>
100 |                   }
101 |                 />
102 |               </Tooltip>
103 |             </td>
104 |             <td>
105 |               <Icon iconName="pt-icon-arrow-right" />
106 |             </td>
107 |             <td>
108 |               <Key
109 |                 value={this.props.transaction.outputPublicKey}
110 |                 onChange={this.onChangeOutputPublicKey}
111 |                 readOnly={false}
112 |                 tooltipText="Specify who should receive the coins with their public key"
113 |                 popoverDidOpen={hideWalkthrough}
114 |                 popover={
115 |                   <div style={{ padding: "10px" }}>
116 |                     <h6>Identities you control</h6>
117 |                     {Object.values(state.identities).map(identity => {
118 |                       return (
119 |                         <a
120 |                           key={identity.publicKey}
121 |                           onClick={() =>
122 |                             this.onChangeOutputPublicKey(identity.publicKey)
123 |                           }
124 |                         >
125 |                           <li>{identity.name}</li>
126 |                         </a>
127 |                       );
128 |                     })}
129 |                     <AddIdentity />
130 |                   </div>
131 |                 }
132 |               />
133 |             </td>
134 |             <td>
135 |               <Tooltip
136 |                 content={<p style={{ maxWidth: "250px" }}>Be generous!</p>}
137 |                 step={8}
138 |                 nextButtonVisible={false}
139 |               >
140 |                 <input
141 |                   style={{
142 |                     height: "75px",
143 |                     width: "75px",
144 |                     fontSize: "34px",
145 |                     textAlign: "center"
146 |                   }}
147 |                   type="number"
148 |                   onChange={this.onChangeTransactionAmount}
149 |                   value={this.props.transaction.amount}
150 |                 />
151 |               </Tooltip>
152 |             </td>
153 |             <td>
154 |               <Tooltip
155 |                 content={
156 |                   <p style={{ maxWidth: "250px" }}>
157 |                     When you broadcast this transaction, the receiver won't
158 |                     really just take your word for it. To achieve consensus on
159 |                     the blockchain, you need the transaction to be part of a
160 |                     block that hopefully lands in the longest chain of blocks.
161 |                     To incentivize miners to do so, you can add a transaction
162 |                     fee.
163 |                   </p>
164 |                 }
165 |                 step={9}
166 |                 nextButtonVisible={false}
167 |               >
168 |                 <input
169 |                   style={{
170 |                     height: "75px",
171 |                     width: "75px",
172 |                     fontSize: "34px",
173 |                     textAlign: "center"
174 |                   }}
175 |                   type="number"
176 |                   onChange={this.onChangeFee}
177 |                   value={this.props.transaction.fee}
178 |                 />
179 |               </Tooltip>
180 |             </td>
181 |             <td>
182 |               <Tooltip
183 |                 content={
184 |                   <p style={{ maxWidth: "250px" }}>
185 |                     In order to proof to the network that you indeed can spend
186 |                     these coins, you sign the transaction hash (which encodes
187 |                     all the transaction data) with your corresponding private
188 |                     key
189 |                   </p>
190 |                 }
191 |                 step={10}
192 |                 nextButtonVisible={false}
193 |               >
194 |                 <Signature
195 |                   signature={this.props.transaction.signature}
196 |                   messageToSign={this.props.transaction.hash}
197 |                   publicKey={this.props.transaction.inputPublicKey}
198 |                   onChangeSignature={this.onChangeSignature}
199 |                   onOpenSignatureDialog={advanceTo.bind(this, 11)}
200 |                 />
201 |               </Tooltip>
202 |             </td>
203 |           </tr>
204 |         </tbody>
205 |       </table>
206 |     );
207 |   }
208 | }
209 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Build your own Blockchain in Javascript
  2 | 
  3 | With all the hype about blockchains and cryptocurrencies, I decided to learn a bit more about it. And what better way to learn than to try to build it yourself? Below you will find a step-to-step explanation of how a blockchain works and how to build one from their basic principles. At every step below, you can check out the equivalent version of the demo at [blockchain-step${N}.nambrot.com](https://blockchain.nambrot.com) with the final version being available at [blockchain.nambrot.com](https://blockchain.nambrot.com) Disclaimer: I took some liberties in some aspects where this blockchain will diverge from reality for pedagogical purposes.
  4 | 
  5 | ## Step 1: A chain of blocks?
  6 | 
  7 | To understand how blockchains work, let's start with the name. Blockchain? A chain of blocks?
  8 | 
  9 | A common misconception is that a blockchain is a single chain of blocks, when in reality, it's more like a tree of blocks. So at any given time, there are multiple chains for blocks by pointing to their respective parent. The pointing happens via hashes which are calculated based upon the data inside the block (i.e. hash of the parent, transaction data and other important stuff)
 10 | 
 11 | By pointing via hashes of blocks, we can enforce a specific order of blocks. I.e given a chain of blocks, you can't just take a block in the middle of the chain and change its data, since that would change its hash and subsequently also all blocks that are descendents of the block in question.
 12 | 
 13 | ```javascript
 14 | class Block {
 15 |   constructor(blockchain, parentHash, nonce = sha256(new Date().getTime().toString()).toString()) {
 16 |     this.blockchain = blockchain;
 17 |     this.nonce = nonce;
 18 |     this.parentHash = parentHash;
 19 |     this.hash = sha256(this.nonce + this.parentHash).toString()
 20 |   }
 21 | ```
 22 | 
 23 | If you look at the code, you can see how the P2P aspect of blockchains comes into play. Once a node decided it "mined" a block, it can broadcast that block to all other nodes, you can verify it and then add it to their tree, as well.
 24 | 
 25 | ![blockbroadcast](https://user-images.githubusercontent.com/571810/32704273-37b7b07a-c7d0-11e7-900c-851031c81ad4.gif)
 26 | 
 27 | 
 28 | ## Step 2: So what is THE blockchain?
 29 | 
 30 | [Link to Step 2 Demo](https://blockchain-step2.nambrot.com/)
 31 | 
 32 | In step 1, we saw that in a chain of blocks, the last block basically validates all data in the chain of its ascendents, as any change in the data up the chain would inevitably change the hash of the last block. That is all great, but what do people mean by THE blockchain?
 33 | 
 34 | By definition, THE blockchain is just the longest chain available in the tree. So at one point, a chain can be the longest one, but then get superseeded by another. Let's visualize the longest chain in the tree.
 35 | 
 36 | ```javascript
 37 | class Blockchain {
 38 |   longestChain() {
 39 |     const blocks = values(this.blocks)
 40 |     const maxByHeight = maxBy(prop('height'))
 41 |     const maxHeightBlock = reduce(maxByHeight, blocks[0], blocks)
 42 |     const getParent = (x) => {
 43 |       if (x === undefined) {
 44 |         return false
 45 |       }
 46 | 
 47 |       return [x, this.blocks[x.parentHash]]
 48 |     }
 49 |     return reverse(unfold(getParent, maxHeightBlock))
 50 |   }
 51 | }
 52 | ```
 53 | 
 54 | ![longestchain](https://user-images.githubusercontent.com/571810/33043509-b40cb21c-ce13-11e7-8fb2-20f3932e85d1.gif)
 55 | 
 56 | So given a tree, the longest chain represents our current view of which history of blocks, and thus which representation of data is the one we deem valid.
 57 | 
 58 | ## Step 3: Not a free-for-all
 59 | 
 60 | [Link to Step 3 Demo](https://blockchain-step3.nambrot.com/)
 61 | 
 62 | If real blockchains worked like Step 2, then it would be a chaotic free-for-all where nodes just can abitrarily fork a chain of blocks and add basically infinitely many blocks to it, to make it the longest chain and thus THE blockchain (as you have seen in the above GIF). That would mean that anyone could just change history and effectively mutate past data. How do we avoid that situation?
 63 | 
 64 | By making it difficult to add a block with a computational puzzle. Instead of accepting any arbitrary block, part of the concensus rules of a blockchain mandate what blocks are valid and which ones aren't. In this case, we want to make adding blocks resource-intensive. The most common way of doing so, and probably the most admirable piece of the original Bitcoin whitepaper), is to pair this with proof-of-work (POW). POW allows us to ensure that nodes who want to add blocks to the tree to proof that they had to expend considerable effort. Since the SHA256 hash of a block is (hopefully) truly random, we can mandate that the hash ends in a certain number of '0's (in Bitcoin the requirement is for it to start with a certain number of '0's).
 65 | 
 66 | ```javascript
 67 | class Block {
 68 |   isValid() {
 69 |     return this.parentHash === 'root' ||
 70 |       (this.hash.substr(-DIFFICULTY) === "0".repeat(DIFFICULTY) &&
 71 |       this.hash === sha256(this.nonce + this.parentHash).toString())
 72 |   }
 73 | 
 74 |   setNonce(nonce) {
 75 |     this.nonce = nonce
 76 |     this._setHash()
 77 |   }
 78 | 
 79 |   _setHash() {
 80 |     this.hash = sha256(this.nonce + this.parentHash).toString()
 81 |   }
 82 | }
 83 | ```
 84 | 
 85 | The actual number of '0's in real world blockchains is calculated dynamically based upon the speed at which recent blocks have been added. A miner would then have to try many different nonces to hope that evetually it yields in a hash that ends with {DIFFICULTY} '0's.
 86 | 
 87 | ![proofofwork](https://user-images.githubusercontent.com/571810/33279514-cdae5fd2-d36c-11e7-97c5-94e61d4e9bce.gif)
 88 | 
 89 | Proof-of-work is what "secures" the blockchain, makes it decentralized and the reason where the infamous 51% double-spend attack comes from. Once a block makes it onto the blockchain (the longest chain of blocks), an attacker would have to redo the proof-of-work for that block and all blocks following it. The example would be a double-spend: Add a transaction to a block, but then make it "invalid" by mining an alternate chain from the parent. However, without having 51% of the computation power of the network, it would be always lagging behind all the other nodes in the network trying to add blocks from the currently legitimate blockchain. Thus the security of the blockchain relies on computational power to not be centralized within single parties.
 90 | 
 91 | ## Step 4: What do I mine?
 92 | 
 93 | [Link to Step 4 Demo](https://blockchain-step4.nambrot.com/)
 94 | 
 95 | So the question is why miners would expend all this effort to add a block? Unless it is a fun game for them, usually we are talking about economic incentives now. In order for the blockchain to be secured by miners, the protocol gives miners a mining reward, currently amounting to 12.5 Bitcoin. Other nodes will accept the miners block with the reward to itself as long as it passes the other rules of the protocol we discussed above. Let's talk about the specific mechanic of how a miner gives itself the reward, which requires a concept of ownership and a way to include such ownership in a block.
 96 | 
 97 | To understand ownership, you'll need a high-level understanding of public-key encryption which is beyond the scope of this tutorial. ([https://www.youtube.com/watch?v=3QnD2c4Xovk](https://www.youtube.com/watch?v=3QnD2c4Xovk) looks like a good non-technical explanation). All you need to know for this is that the following possible:
 98 | 
 99 | 1. There is a way to generate two things, a public key and a private key. Keep the private key secret.
100 | 2. Per the name, the public key is something that you can publish publically to other parties.
101 | 3. In order to proof that you were the one that generated the public key, you can sign a specific message (or arbitrary data) with your private key. Others can take your signature (that is specific to the message), the message as well as your public key and verify that the signature must have indeed come from someone who has control of the private key (as there is no way to satisfactorally sign the message without the private key).
102 | 4. (With a public key, you can encrypt a message (data) so that only the owner of the private key can decrypt it)
103 | 
104 | In short, ownership is the concept of being in control of something, in this case, you "own" the public key, and you can prove such ownership by signing data with your private key. Thus, in order to receive the mining reward, i.e. claim ownership over it, all the miner has to do is to include their public key in the block. That public key is also known as the wallet address in Bitcoin (oversimplication).
105 | 
106 | So let's just simply add a field in the block called `coinbaseBeneficiary` that contains the public key of the miner and add it to the payload for the hash calculation:
107 | 
108 | ```javascript
109 | class Block {
110 |   isValid() {
111 |     return this.parentHash === 'root' ||
112 |       (this.hash.substr(-DIFFICULTY) === "0".repeat(DIFFICULTY) &&
113 |       this.hash === this._calculateHash())
114 |   }
115 | 
116 |   createChild(coinbaseBeneficiary) {
117 |     return new Block({
118 |       blockchain: this.blockchain,
119 |       parentHash: this.hash,
120 |       height: this.height + 1,
121 |       coinbaseBeneficiary
122 |     })
123 |   }
124 | 
125 |   _calculateHash() {
126 |     return sha256(this.nonce + this.parentHash + this.coinbaseBeneficiary).toString()
127 |   }
128 | }
129 | ```
130 | 
131 | Thus, a coin is just ownership over a public key with a private key. By walking down a chain of blocks, you can add up which public keys own how many coins. In reality, these are called Unspent Transaction Outputs (UTXOs), the transaction part will come shortly). To avoid having to traverse chains of blocks everytime we want to find out how many coins an address controls, we "cache" that knowledge with each block into a UTXO pool. Whenever we add a block to a parent, we just take the parents UTXO pool and add the coins of the coinbase beneficiary.
132 | 
133 | ```javascript
134 | class UTXOPool {
135 |   constructor(utxos = {}) {
136 |     this.utxos = utxos
137 |   }
138 | 
139 |   addUTXO(publicKey, amount) {
140 |     if (this.utxos[publicKey]) {
141 |       this.utxos[publicKey].amount += amount
142 |     } else {
143 |       const utxo = new UTXO(publicKey, amount)
144 |       this.utxos[publicKey] = utxo
145 |     }
146 |   }
147 | 
148 |   clone() {
149 |     return new UTXOPool(clone(this.utxos))
150 |   }
151 | }
152 | 
153 | class Blockchain {
154 |   _addBlock(block) {
155 |     if (!block.isValid())
156 |       return
157 |     if (this.containsBlock(block))
158 |       return
159 | 
160 |     // check that the parent is actually existent and the advertised height is correct
161 |     const parent = this.blocks[block.parentHash];
162 |     if (parent === undefined && parent.height + 1 !== block.height )
163 |       return
164 | 
165 |     // Add coinbase coin to the pool of the parent
166 |     const newUtxoPool = parent.utxoPool.clone();
167 |     newUtxoPool.addUTXO(block.coinbaseBeneficiary, 12.5)
168 |     block.utxoPool = newUtxoPool;
169 | 
170 |     this.blocks[block.hash] = block;
171 |     rerender()
172 |   }
173 | }
174 | ```
175 | 
176 | As you can see, if we keep mining more blocks, we keep accumulating coins.
177 | 
178 | ![utxopool](https://user-images.githubusercontent.com/571810/33613173-ec3851de-d9a1-11e7-8a2d-90adce353ac5.gif)
179 | 
180 | This way, you should also start the see of how the blockchain acts as a ledger, but also how it is inherently volatile. A fork in the blockchain will yield different UTXOPools and thus different assertions over coins (which is why securing consensus is so important) as you can see in the GIF below. That's why it is generally recommended to wait a certain number of blocks until you can consider a transaction to be settled, otherwise a fork can invalidate what you assumed to be the state of the ledger.
181 | 
182 | ![51attack](https://user-images.githubusercontent.com/571810/33613179-f1c861c0-d9a1-11e7-8366-4064cec2e95b.gif)
183 | 
184 | ### Step 5: You get a coin! You get a coin!
185 | 
186 | [Link to Step 5 Demo](https://blockchain-step5.nambrot.com/)
187 | 
188 | We are getting very close to have this be a usable blockchain. The only thing we are really lacking is the ability to send someone a coin. We are finally getting to transactions. And it's actually pretty simple:
189 | 
190 | ```javascript
191 | class Transaction {
192 |   constructor(inputPublicKey, outputPublicKey, amount) {
193 |     this.inputPublicKey = inputPublicKey
194 |     this.outputPublicKey = outputPublicKey
195 |     this.amount = amount
196 |     this._setHash()
197 |   }
198 | 
199 |   _setHash() {
200 |     this.hash = this._calculateHash()
201 |   }
202 | 
203 |   _calculateHash() {
204 |     return sha256(this.inputPublicKey + this.outputPublicKey + this.amount).toString()
205 |   }
206 | }
207 | ```
208 | 
209 | A transaction is simply a declaration to move ownership from one public key to the other, thus all we have to record in a transaction is the public key that has any coins, the target public key and the amount of coins we want to transfer. (In real Bitcoin, UTXOs have to be fully consumed and can have multiple inputs and outputs.) We obviously need to make sure that people only spend coins that exist. We do that with the UTXOPool which keeps track of "balances".
210 | 
211 | ```javascript
212 | class UTXOPool {
213 |   handleTransaction(transaction) {
214 |     if (!this.isValidTransaction(transaction.inputPublicKey, transaction.amount))
215 |       return
216 |     const inputUTXO = this.utxos[transaction.inputPublicKey];
217 |     inputUTXO.amount -= transaction.amount
218 |     if (inputUTXO.amount === 0)
219 |       delete this.utxos[transaction.inputPublicKey]
220 |     this.addUTXO(transaction.outputPublicKey, transaction.amount)
221 |   }
222 | 
223 |   isValidTransaction(inputPublicKey, amount) {
224 |     const utxo = this.utxos[inputPublicKey]
225 |     return utxo !== undefined && utxo.amount >= amount && amount > 0
226 |   }
227 | }
228 | ```
229 | 
230 | Since we add the hashes of the transactions to the computation of the block hash, other nodes in the network can easily verify that the transactions are 1. valid given a block's ascendants and 2. came from a node that had to do the "proof-of-work".
231 | 
232 | ```javascript
233 | class Blockchain {
234 |   _addBlock(block) {
235 |     // ...
236 |     const newUtxoPool = parent.utxoPool.clone();
237 |     block.utxoPool = newUtxoPool;
238 | 
239 |     // Add coinbase coin to the pool
240 |     block.utxoPool.addUTXO(block.coinbaseBeneficiary, 12.5)
241 | 
242 |     // Reapply transactions to validate them
243 |     const transactions = block.transactions
244 |     block.transactions = {}
245 |     let containsInvalidTransactions = false;
246 | 
247 |     Object.values(transactions).forEach(transaction => {
248 |       if (block.isValidTransaction(transaction.inputPublicKey, transaction.amount)) {
249 |         block.addTransaction(transaction.inputPublicKey, transaction.outputPublicKey, transaction.amount)
250 |       } else {
251 |         containsInvalidTransactions = true
252 |       }
253 |     })
254 | 
255 |     // If we found any invalid transactions, dont add the block
256 |     if (containsInvalidTransactions)
257 |       return
258 |     // ...
259 |   }
260 | }
261 | ```
262 | 
263 | You should recognize an additional method of keeping miners "honest". If miners include transactions that are invalid, peer nodes will reject the block and thus not consider it to be part of the longest chain. Thus we maintain concensus over valid transactions. Here is everything in GIF-form:
264 | 
265 | ![addingtx](https://user-images.githubusercontent.com/571810/33800311-3746ef66-dd0b-11e7-9427-64c0053a4d5e.gif)
266 | 
267 | # Step 6: I don't do math.
268 | 
269 | [Link to Step 6 Demo](https://blockchain-step6.nambrot.com/)
270 | 
271 | What if you (or more specifically your computers) are bad at math, does that mean you don't get to have your transactions added to the blockchain? That would be terrible! Instead, as a non-mining node, let's add the ability to broadcast a transaction, that a different mining node can then add to their block:
272 | 
273 | ```javascript
274 | class Blockchain {
275 |   constructor() {
276 |     // ...
277 |     subscribeTo("TRANSACTION_BROADCAST", ({ transaction, blockchainName }) => {
278 |       if (blockchainName === this.name) {
279 |         this.pendingTransactions[transaction.hash] = new Transaction(
280 |           transaction.inputPublicKey,
281 |           transaction.outputPublicKey,
282 |           transaction.amount
283 |         );
284 |       }
285 |     });
286 |   }
287 | }
288 | ```
289 | 
290 | ![txbroadcast](https://user-images.githubusercontent.com/571810/33802204-a2f0ed8c-dd3f-11e7-8fa7-3ba84f01e97d.gif)
291 | 
292 | 
293 | # Step 7: No free lunches
294 | 
295 | [Link to Step 7 Demo](https://blockchain-step7.nambrot.com/)
296 | 
297 | Unless you subscribe to the charitable interpretations of "love thy neighbor", people generally don't like to do things free for others. So why would a mining node add a transaction for a non-mining node? You are right, they wouldn't. So let's add some incentives for them with a transaction fee that we can specify as a transaction author to increase the chances of some mining node adding our transaction to their block.
298 | 
299 | ```javascript
300 | class Block {
301 |   addTransaction(inputPublicKey, outputPublicKey, amount, fee) {
302 |     if (!this.isValidTransaction(inputPublicKey, amount, fee))
303 |       return
304 |     const transaction = new Transaction(inputPublicKey, outputPublicKey, amount, fee)
305 |     this.transactions[transaction.hash] = transaction
306 |     this.utxoPool.handleTransaction(transaction, this.coinbaseBeneficiary)
307 |     this._setHash();
308 |   }
309 | }
310 | 
311 | class UTXOPool {
312 |   handleTransaction(transaction, feeReceiver) {
313 |     if (!this.isValidTransaction(transaction.inputPublicKey, transaction.amount, transaction.fee))
314 |       return
315 |     const inputUTXO = this.utxos[transaction.inputPublicKey];
316 |     inputUTXO.amount -= transaction.amount
317 |     inputUTXO.amount -= transaction.fee
318 |     if (inputUTXO.amount === 0)
319 |       delete this.utxos[transaction.inputPublicKey]
320 |     this.addUTXO(transaction.outputPublicKey, transaction.amount)
321 |     this.addUTXO(feeReceiver, transaction.fee)
322 |   }
323 | }
324 | ```
325 | 
326 | # Step 8: Don't touch my money
327 | 
328 | [Link to Final Demo](https://blockchain.nambrot.com/)
329 | 
330 | If you paid attention, you have noticed that it was possible for any node to spend any UTXO available. If that were the case in reality, it would be madness! Let's fix this by completing the ownership story. As we said above, ownership is really just the ability to prove that you have generated the private key. So to know if a transaction was truly the intention of the owner, all we have to do is request a signature of the transaction hash with the private key. Nodes can then verify that the signature is indeed valid for the transaction when they validate transaction of blocks they are receiving.
331 | 
332 | ```javascript
333 | class Transaction {
334 |   constructor(inputPublicKey, outputPublicKey, amount, fee, signature) {
335 |     this.inputPublicKey = inputPublicKey;
336 |     this.outputPublicKey = outputPublicKey;
337 |     this.amount = amount;
338 |     this.fee = fee;
339 |     this.signature = signature;
340 |     this._setHash();
341 |   }
342 | 
343 |   hasValidSignature() {
344 |     return (
345 |       this.signature !== undefined &&
346 |       verifySignature(this.hash, this.signature, this.inputPublicKey)
347 |     );
348 |   }
349 | }
350 | 
351 | class Block {
352 |   isValidTransaction(transaction) {
353 |     return (
354 |       this.utxoPool.isValidTransaction(transaction) &&
355 |       transaction.hasValidSignature()
356 |     );
357 |   }
358 | }
359 | ```
360 | 
361 | As seen in the GIF below, this will complete our blockchain by tieing control of UTXOs to the corresponding owner of the public key via signatures from their private key.
362 | 
363 | ![transactionsinging](https://user-images.githubusercontent.com/571810/33810869-ab96ec7c-ddd8-11e7-81bd-2435de149d83.gif)
364 | 
365 | AND THATS IT!!! As you'll hopefully agree with me, blockchains are actually quite simple. So simple that [Bitcoin's original whitepaper](https://bitcoin.org/bitcoin.pdf) is only 8 pages. As we learned in this walkthrough, all you really need to know is some public key encryption knowledge and the fact that some hash functions are very hard to reverse.
366 | 
367 | # Wait, there is more
368 | 
369 | JK, there isn't as of yet. I might add merkle trees and segwit in the future, but for now, I hope this gives you a good overview of how blockchains such as Bitcoin work.
370 | 
371 | 
372 | ## To run
373 | 
374 | This project is based upon `create-react-app` so a simple `yarn start` will pretty much start everything. You'll only need to start a simple `socket.io` server with `node src/server.js`. You can also run it with `docker-compose` if you prefer. Or find the most recent version running on [blockchain.nambrot.com](https://blockchain.nambrot.com)
375 | 


--------------------------------------------------------------------------------