comit-network / ambrosia Goto Github PK

Pitch
https://3.basecamp.com/4403044/buckets/16930224/messages/2632331598

TODOs

• Refund Redeem flow comit-network/app#18
  • Show manual buttons
  • Display Refund button if possible
  • Implement a canRefund() function in the state machine.
• Dashboard screen
  • Important: Do a Text UI for the home screen, that says 'I want to ____ ____' e.g. 'I want to buy BTC with DAI', where inputs are dropdowns
  • The idea is that in the long run we can extend this screen to allow to filter for various trading pairs.
• Orderbook screen(s)
  • Lists Orders (Order: trading pair, amounts, expiry, makerPeerId, rate)
    • An overview of available orders to take. e g
  • View Order - a modal with a Take button to proceed with the swap
    • After an order was taken, transitions to the swap progress screen
  • Flesh out list element component
    • make currency and amount a single horizontal line
    • make list item element thinner, like a ticker line
    • make entire list item element clickable, opening modal
  • Simplify filters
    • Change dropdowns to radio buttons [BTC->DAI DAI->BTC All]
• Unmount / migrate away from Electron comit-network/app#45
• Port hooks /providers e.g. useEthereumWallet to use settings store instead of env vars
• Add providers to App.tsx
  • EthereumWallet
  • BitcoinWallet
  • Cnd
  • ComitClient?
• Review orderbook REST API
  • https://github.com/comit-network/comit-rs/blob/dbook2/api_tests/tests/orderbook.ts
• Implement Orderbook module / Integrate with REST API https://3.basecamp.com/4403044/buckets/16930224/messages/2632331598#__recording_2648784219
  • getOrders()
    • https://swr.now.sh/
  • fillOrder()
  • Integrate Orderbook module functions with actual orderbook UI
    • The goal is to just display orders and take orders, converting it to a swap
    • Exchange page should pull real data from Orderbook.getOrders()
    • Order confirmation page should call Orderbook.fillOrder()
  • Set up postman collection to create the Maker's orders for demo purposes
• Upgrade to latest SDK #4
  • Port Wallet balances component https://github.com/comit-network/app/blob/master/app/containers/WalletBalances.tsx
  • display ETH wallet balance (first)
  • display bitcoin wallet balance
    - new bitcoind wallet requires username and password https://github.com/comit-network/create-comit-app/blob/c7f5bae242a4d8d7e2b9081d84a9a8a2fecf6a4e/scripts/src/docker/bitcoin.rs#L23-L24
  • ~~call cnd.getSwaps() ~~
• Link new Orderbook pages to Swap page controllers
• Swap detail pages
  • get swap by id https://github.com/comit-network/app/blob/master/app/containers/SwapDetailsPage.tsx#L23
• Swap Progress UI comit-network/app#21
  • Should add tx links to transactions

We've worked on the app but have yet to test it with users. We want to ship the app to the mainnet and test with users to get feedback. However before we can do that, we need to implement the following:

1. External Provider Support in SDK https://github.com/comit-network/app/issues/9

Related SDK issue: comit-network/comit-js-sdk#154

The current BitcoinWallet and EthereumWallet provided by the SDK doesn't let us use the Ledger.

Other cross-chain libraries support external wallets using the Provider standard. More details: https://github.com/liquality/chainabstractionlayer

This is still open, early research. I'm not yet certain what needs to be done here, but I think following the Provider standard should give us a modular and extensible wallet support.

2. Fix Electron build pipeline comit-network/app#19

We use Electron to build desktop apps. There's currently a native modules issue that's breaking the build pipeline. Until this is fixed, we can't generate cross-platform application executables.

3. Mainnet Node Infrastructure

The app uses local nodes for testing, but we can't use comit-scripts for production. Before we can package our desktop app, we need to figure out the mainnet node infrastructure:

• How do we run Ethereum / Bitcoin nodes on the mainnet? What does that look like?
• Do we package it as part of the app or use remote nodes?
• How should we include the CND nodes as part of the app?

As a start, we can first allow users to have the create-comit-app example run on mainnet.

4. Deploy and Host Maker backend

Blocker: Mainnet Node infrastructure must be complete before we can deploy a Maker service.

The fixed maker service needs to be deployed and hosted somewhere. This is fairly straightforward.

We should also split the Maker service and the Taker app to separate repos at this point comit-network/app#37

Overview

As of 0.17.0 release, InMemoryBitcoinWallet is no more.
https://github.com/comit-network/comit-js-sdk/blob/dev/CHANGELOG.md

We want to update https://github.com/comit-network/taker-ui/blob/master/app/hooks/useBitcoinWallet.tsx#L33-L42 to use the new SDK Wallet.

You can see https://github.com/comit-network/taker-ui/blob/master/app/hooks/useEthereumWallet.tsx#L33-L37 for a working Ethereum wallet example.

Currently the whole comit-sdk folder was added to the eslintignore files.
Remove that entry and fix the linting problems.

Overview

Run yarn lint and yarn tsc.
You should see some lint / typescript warnings. Fix them until the warnings go away.

Fixing some (you don't have to fix all of them) of these issues should give you an opportunity to get an overview of the project.

TODOs

• Set up and run the app locally https://github.com/comit-network/taker-ui#prerequisites
• yarn lint
• yarn tsc
• Resolve the lint warnings (as much as you can)
• Open a PR

@yosriady commented on Mon May 25 2020

TODO: Fix Electron

• Regenerate fresh electron react project comit-app-regen
• Post All previous fixes for Electron from old /app repo
  • webpack postprocessing
  • babel fixes
  • pipelines
  • renderer fixes
  • main process fixes
• Install native dependencies until it fails to build
  • comit-sdk ***
  • bn.js
  • lodash
  • moment
  • satoshi-bitcoin-ts
• Fix CI issues
  • Github Actions
  • Travis
• Debug latest run https://github.com/yosriady/comit-app-regen/actions/
  • Works with [email protected]
• Electron package pipeline fixed.

TODO: comit-app-regen -> taker-ui

• Might be easier to just regenerate the whole TS/React app instead of pruning Electron from the existing app
  • Bootstrap structure
  • Dependencies
  • components
  • hooks
  • pages
• Add routers to App.tsx
• Environment variables for app Use file-based electron-store and settings page instead
• Redesign
  • Use chakra UI instead of rimble
    • Revert yarn add rimble-ui styled-components once chakra migration is completed
  • Add sidebar
    • highlight active link
  • settings page
    • use https://github.com/electron-userland/electron-json-storage
    • Create yarn command to populate settings store with ~/.create-comit-app/env contents
  • order confirmation page
  • swap details page
    • Multi stage progress bar
• Add providers to index
• Upgrade to latest SDK version [email protected]
  • There's a problem with SDK version 0.14.0, so the downgrade is temporary
  • Should upgrade back after resdesign and polish
  • InMemoryBitcoinWallet to BitcoindWallet

@yosriady commented on Tue Jun 09 2020

Electron Recovery Plan:

1. First, extract a pure React app from the existing Electron app
2. Then, generate a new Electron app with the latest libraries
3. Include all previous fixes and pipeline modifications from old project
4. Port the React app back in

Steps 2 and 3

• ~~Regenerate Electron app ~~ Still fails https://github.com/yosriady/comit-app-regen/runs/753017498
  • OR if that still fails https://github.com/electron-userland/electron-builder
  • OR if that still fails https://www.electron.build/ and electron-webpack-quickstart

@yosriady commented on Tue Jun 09 2020

Error details: https://gist.github.com/yosriady/a8313b4a7f42ff5e5c5bc3adaa98026c

echo $(brew --prefix openssl)/include
/usr/local/opt/[email protected]/include

actions/runner-images#837

OpenSSL 1.0.2t 10 Sep 2019 (/usr/local/opt/openssl -> /usr/local/Cellar/openssl/1.0.2t)

@yosriady commented on Wed Jun 10 2020

• Try Travis instead of Github Actions https://electron-react-boilerplate.js.org/docs/ci
  • Check https://travis-ci.com/github/yosriady/comit-app-regen
  • Same error Fatal error: 'openssl/aes.h' file not found https://travis-ci.com/github/yosriady/comit-app-regen/jobs/346519135

@yosriady commented on Wed Jun 10 2020

• CI should use https://github.com/marketplace/actions/upload-files-to-a-github-release

Note: To be done after orderbook + swap is done - i.e. end to end from getting order of maker to finish the swap with the maker.

Depends on this to be fixed: comit-network/create-comit-app#778
Also depends on releasing create-comit-app so all the fixes done on the way are in (e.g. Derivation path print fix, see: https://github.com/comit-network/create-comit-app/tree/wallet-descriptor-fix)

Basically do this in package.json of the app:

{
  ...
  "scripts": {
    ...
    "start-env": "comit-scripts start-env"
  },
  ...
  "dev-dependencies": {
    "comit-scripts": "^0.9.0",
  }
}

Then just use yarn start-env in the app. No create-comit-app no more.

Goal

Upgrade to the latest COMIT SDK.

Documentation is non-existent, so you'll have to dig through the code.

Problem

When (Bitcoin) wallet initialization encounters an error we just bubble the error up (just visible in console).

Goal

Better error handling, better user experience.

Recommendation

Have a look at https://reactjs.org/docs/error-boundaries.html
Consider introducing boundaries for wallet initialization. Might want to use this more for other problems.

Problem

We want to support external wallets, but the current SDK doesn't provide support for it. To add external wallet support, we will likely need to update the SDK ComitClient to support providers. However, how this looks is not yet 'shaped up'.

Goal

Provide a document in coblox/spikes repo that summarises the approaches used in the blockchain ecosystem to support a variety of wallets for Ethereum and Bitcoin.

The document is structured as a Shape Up pitch: https://basecamp.com/shapeup/1.5-chapter-06

TODOs

• Define current wallet interface and what functions the SDK uses
• Research and summarize external wallet support / the Provider API in other projects
  • Liquality
  • Metamask
  • Ethers providers
  • 0x subproviders
  • Ledger providers
• Research what the Provider actually does and how the SDK can consume it
  • https://d2uvd02r4antif.cloudfront.net/docs/guides/web3-provider-explained#introduction
• Recommendations for SDK
  • How the two implementations differ
  • What needs to be implemented on the SDK

Links

https://github.com/MetaMask/web3-provider-engine
https://github.com/Neufund/ledger-wallet-provider
https://github.com/liquality/chainabstractionlayer
https://github.com/blockmason/web3-provider-ledger
https://0x.org/docs/tools/subproviders

Introduction

I've worked on building the PoC App with the COMIT SDK for a few sprints. Based on that, I've identified a list of three missing features that an app developer will need to build on COMIT. All three features have already been implemented on the app, since they were required for it to work.

This issue is meant to spark a conversation of whether we want to provide these features to other app developers, by adding it to the COMIT SDK.

1. State Machines

Related SDK issue: comit-network/comit-js-sdk#94

The current SDK provides functions like deploy, fund, and redeem but as an app developer I have no idea when to call each of the functions. Specifically: when is a swap ready for step X? I've had to dig through the internal swap workflow, call swap.fetchDetails() to parse the ledger statuses, and figure out the steps on my own.

I've implemented two state machines (for the Taker app and the Maker service.) The state machine has this interface:

const s = new TakerStateMachine(swap)
await s.next();

Internally, it parses the swap properties to 'understand' what to do next. More details here: comit-network/comit-js-sdk#94 (comment)

We can port this to the SDK, so that users can just call next on a Swap:

await swap.next();

How the API will look like is open for discussion.

Note: The current state machine only implements the 'happy path', but to be production ready the state machines will need to handle branches such as the refund and expiry flow.

2. Polling

Both the Taker and Maker needs to execute the next action after the counterparty has executed theirs. The app needs to find this out by repeatedly polling fetchDetails() for the latest swap state.

Since there's no out-of-the-box polling functionality provided by the SDK, I've implemented my own for both the Maker service and the Taker app. It's a simple polling mechanism. Basically:

for (let swap of swaps) {
      await swap.next();
}

Note: There are two polling mechanisms, one for the backend and one for the frontend. The backend uses Node.js async/await, while the frontend approach uses React hooks to be more idiomatic React code.

For the SDK, we could explore a subscription-based API instead, for example:

swap.on('ready', (data) => {
  //  ... do something on the app
  swap.next();
})

I think this API is more flexible and easier to work with.

Feedback most welcome.

3. React Context & Hooks

Based on feedback, the app needed to use swaps as stateful objects and use a singleton global store for this state. This required the app to undergo a rearchitecture. The SDK doesn't provide an out-of-the box way to build a frontend in this style.

React Context and Hooks are key building blocks for modern React apps. Think of it as the idiomatic way to inject and consume dependencies such as modules or services in React.

I've started encapsulating the recommended architecture as reusable React hooks. Behind the scenes, these hooks manage state from a global store, so developers don't have to reinstantiate or rehydrate modules every time. With hooks, your clients and wallets are made available anywhere in the component tree as a singleton:

export default function HomePage(props: Props) {
  const {
    wallet: bitcoinWallet
  } = useBitcoinWallet();
  const {
    wallet: ethereumWallet
  } = useEthereumWallet();
  const { cnd } = useCnd();

  // you can call `cnd.getSwaps()` here
 // ... other code
}

We can package these React-specific helper code to a @comit/comit-react package to further accelerate COMIT App development. These hooks allow React developers to build COMIT apps at a higher level of abstraction with prebuilt components that follow our recommended practices.