Setup dApp skeleton

.circleci/config.yml

@@ -0,0 +1,14 @@
+version: 2.1
+
+executors:
+  docker-node:
+    docker:
+      - image: circleci/node:11
+
+jobs:
+  test_solidity:
+    executor: docker-node
+    steps:
+        - checkout
+        - run: npm i
+        - run: npm run build

PLAN

@@ -0,0 +1,38 @@
+order:
+- request-deposit
+- initiate-deposit
+- await-deposit-confirm
+- prove-deposit
+- tbtc-minted
+
+
+requestADeposit
+    create action
+    call Keep to request a deposit
+    sign the transaction and submit
+    wait for it to be mined
+    get the deposit address
+    now call the deposit contract
+    and get the btc address
+    goto next
+
+sendTbtc
+    onclick "ok I sent it"
+    now show a waiting dialog, with some sort of smart countdown
+    wait for the transaction to be received
+    wait for the transaction to be confirmed
+    wait a certain number of confirmations on this step
+    when it's finally sufficiently confirmed, dispatch the txid
+    goto next
+
+proveDeposit
+    get the txid
+    run through the proof generation process
+    generate a proof
+    again, call the web3 contract, submitting the proof
+    wait for the tx to be mined successfully
+    filter through the contract events to get the transaction id
+    goto next
+
+tbtcMinted
+    show the link to the tx

README.md

@@ -1 +1,17 @@
-# tbtc-dapp
+# tbtc-dapp
+
+The tBTC dApp. 
+
+## Setup
+
+### Prerequisites
+
+ - Run Ganache test chain
+ - Deploy tBTC contracts
+
+### Running the dApp
+
+ 1. `cd app/``
+ 2. `npm i`
+ 3. `npm run dev` and open [http://localhost:3000](http://localhost:3000)
+

app/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true }]]
+}

app/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+.next

app/actions/index.js

@@ -0,0 +1,23 @@
+import { createActions, handleActions, combineActions } from 'redux-actions';
+
+export const REQUEST_A_DEPOSIT = 'REQUEST_A_DEPOSIT'
+export const WAIT_CONFIRMATION = 'WAIT_CONFIRMATION'
+export const SUBMIT_DEPOSIT_PROOF = 'SUBMIT_DEPOSIT_PROOF'
+
+export function requestADeposit() {
+    return {
+        type: REQUEST_A_DEPOSIT
+    }
+}
+
+export function waitConfirmation() {
+    return {
+        type: WAIT_CONFIRMATION
+    }
+}
+
+export function submitProof() {
+    return {
+        type: SUBMIT_DEPOSIT_PROOF
+    }
+}

app/components/AwaitDepositConfirmation.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+import { PageTemplate } from './PageTemplate'
+import { MainBlock } from "./MainBlock";
+import Link from 'next/link'
+import { IconBlock, ContentBlock, FormStep } from './FormStep';
+import { DarkGray } from '../styles';
+
+const QRCode = require('qrcode.react')
+
+
+const CopyAddressBox = styled.div`
+    background: #ddd;
+    border: 1px solid #ddd;
+    display: inline-block;
+    padding: 1em;
+    width: 420px;
+    color: ${DarkGray};
+`
+
+const WaitingForTx = styled.div`
+    text-align: center;
+    i {
+        font-size: 64px;
+        display: block;
+        clear: both;
+    }
+`
+
+const AwaitDepositConfirmation = ({ address }) => {
+    return <PageTemplate>
+        <MainBlock>
+            <FormStep>
+                <IconBlock>
+                    <WaitingForTx>
+                        <img src='/static/waiting.png'/>
+                    </WaitingForTx>
+                </IconBlock>
+
+                <ContentBlock>
+                    <h2>Pay 1 BTC</h2>
+                    <p>Scan the QR code or tap to pay, or copy the address below into your wallet</p>
+
+                    <CopyAddressBox>
+                        {address}
+                    </CopyAddressBox>
+
+                    <br/><br/>
+                    <a style={{ color: '#333', textDecoration: 'none' }} href="/prove-deposit">[debug] let's prove our deposit and claim tbtc</a>
+                </ContentBlock>
+            </FormStep>
+        </MainBlock>
+    </PageTemplate>
+}
+
+export { AwaitDepositConfirmation }

app/components/Button.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import { Blue } from '../styles'
+
+const Button = styled.button`
+    padding: 1em;
+    background: ${Blue};
+    color: white;
+
+    font-size: 16px;
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    color: #ffffff;
+
+    :hover {
+        cursor: pointer;
+        opacity: 0.8;
+        color: white;
+    }
+`
+
+export { Button }

app/components/FormStep.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const FormStep = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 850px;
+    margin: 0 auto;
+    padding-top: 2em;
+`
+
+export const IconBlock = styled.div`
+    width: 200px;
+    max-height: 256px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-right: 2em;
+    img {
+        height: 100%;
+        width: 100%;
+    }
+`
+
+export const ContentBlock = styled.div`
+    flex: 1;
+`

app/components/InitiateDeposit.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+const QRCode = require('qrcode.react')
+import Link from 'next/link'
+import { Button } from '../components/Button'
+import { PageTemplate } from '../components/PageTemplate'
+import { MainBlock } from "../components/MainBlock"
+import { IconBlock, FormStep, ContentBlock } from '../components/FormStep';
+
+const CopyAddressBox = styled.div`
+    background: white;
+    border: 1px solid #ddd;
+    display: inline-block;
+    padding: 1em;
+    margin-bottom: 1em;
+    width: 420px;
+`
+
+const InitiateDeposit = ({ address }) => {
+    return <PageTemplate>
+        <MainBlock>
+            <FormStep>
+                <IconBlock>
+                    <QRCode size={160} value={address || ''}/>
+                </IconBlock>
+
+                <ContentBlock>
+                    <h2>Pay 1 BTC</h2>
+                    <p>Scan the QR code or tap to pay, or copy the address below into your wallet</p>
+
+                    <CopyAddressBox>
+                        {address}
+                    </CopyAddressBox>
+
+                    <br/>
+                    <Link href="/await-deposit-confirm">
+                        <Button>Ok, I sent it!</Button>
+                    </Link>
+                </ContentBlock>
+
+            </FormStep>
+        </MainBlock>
+    </PageTemplate>
+}
+
+export { InitiateDeposit }

app/components/MainBlock.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+import { LightBlue } from '../styles'
+
+const MainBlock = styled.div`
+    flex: 1;
+    align-items: start;
+    display: flex;
+    flex-direction: column;
+    padding: 0em 4em;
+    background: ${LightBlue};
+`
+
+export { MainBlock }

app/components/PageTemplate.js

@@ -0,0 +1,80 @@
+import { Button } from "../components/Button";
+import styled from 'styled-components'
+import Link from 'next/link'
+
+import { DarkBlue } from '../styles'
+
+export const PageWrapper = styled.div`
+    min-height: 100vh;
+
+    display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: stretch;
+    align-content: stretch;
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        font-weight: 300;
+        color: ${DarkBlue};
+    }
+
+    p {
+        color: ${DarkBlue};
+    }
+
+`
+
+export const PageContainer = styled.div`
+
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    flex: 1;
+`
+
+export const HeaderBlock = styled.div`
+    flex: 0 1;
+    padding: 0em 0;
+    margin: 2em 4em;
+`
+
+export const MainBlock = styled.div`
+    flex: 1;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    margin: 0em 4em;
+`
+
+export const TBTCTitle = styled.div`
+    font-size: 1.6em;
+    color: ${DarkBlue};
+
+    :hover {
+        cursor: pointer;
+    }
+`
+
+
+const PageTemplate = ({ children }) => {
+    return <PageWrapper>
+        <PageContainer>
+
+        <HeaderBlock>
+            <Link href="/">
+                <TBTCTitle>tbtc</TBTCTitle>
+            </Link>
+        </HeaderBlock>
+
+        {children}
+
+    </PageContainer>
+    </PageWrapper>
+
+}
+
+export { PageTemplate }