comit-network / app Goto Github PK

Technical specs

Sideshift and Uniswap are examples of similar interfaces.

This task covers extending the base app with a page for users to swap between BTC and DAI.

Definition of Done

• Users can create a swap request with parameters (but not yet submit to a backend.)
• UI Flow
  • (Uniswap) Form has the following inputs: amount in DAI and BTC
  • Form should display calculated amounts
  • Users can submit (console.log)

There are lot of issues with the Electron project, ranging from environment issues to issues installing dependencies. This is due to how the JS desktop app architecture relies on different main and renderer processes as well as other cross-platform considerations around native modules.

• Upgrade to latest release to see if it solves the issues https://github.com/electron-react-boilerplate/electron-react-boilerplate/releases/tag/v1.0.0
• https://electron-react-boilerplate.js.org/docs/adding-dependencies#which-packagejson-file-to-use
• https://github.com/electron-react-boilerplate/electron-react-boilerplate/wiki/Module-Structure----Two-package.json-Structure
• https://www.electron.build/tutorials/two-package-structure

In 'Balances.tsx' component, use useReducer, createContext, useContext and providers to extract out wallet state for easier use and clearer dataflow.

Add an input form for users to select which Maker to trade with

EDIT: Might be obsolete with decentralized orderbook

Running:

yarn cross-env DEBUG_PROD=true yarn start

Should start the production build of the app, however it results in an error:

init.ts:204 Unable to load preload script: /Users/yos/work/comit-app/app/dist/renderer.prod.js
(anonymous) @ init.ts:204
init.ts:205 Error: An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#6 for more information.
    at new t (styled-components.esm.js:205)
    at styled-components.esm.js:480
    at me (styled-components.esm.js:804)
    at e.makeTag (styled-components.esm.js:1023)
    at e.getTagForId (styled-components.esm.js:1041)
    at e.deferredInject (styled-components.esm.js:1081)
    at new e (styled-components.esm.js:2256)
    at ft (styled-components.esm.js:2300)
    at Object.<anonymous> (index.es.js:2738)
    at Object../node_modules/rimble-ui/dist/index.es.js (/Users/yos/work/comit-app/app/dist/renderer.prod.js:15)

https://github.com/comit-network/app/blob/feature/state-machines/app/containers/SwapDetailsPage.tsx#L23-L48

Use url instead of id

• Use swap URL as canonical identifier: 'The URL of a swap is its canonical identifier. It is available through the self property on the swap object'
• Refactor https://github.com/comit-network/app/blob/feature/state-machines/app/containers/SwapDetailsPage.tsx#L12 props to use url instead of id

Swaps are Stateful

• https://github.com/comit-network/app/blob/feature/state-machines/app/containers/SwapDetailsPage.tsx#L24-L37
• Instead of calling comitClient.retrieveSwapById multiple times, call once and save swap into state.
  • 'Reconstruct a swap object at any time through this constructor by passing in an instance of Cnd (the underlying HTTP client), the link to the swap and the wallets. '
  • Refactor findSwapById, retrieveSwapById
• Subsequent pools in useInterval is limited to calling fetchDetails()

When following the readme instructions I am getting an error to install the taker. Are you aware of this issue?

▶ cd ./app
▶ yarn
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
$ yarn electron-rebuild
yarn run v1.22.4
$ node -r ../internals/scripts/BabelRegister.js ../internals/scripts/ElectronRebuild.js
internal/modules/cjs/loader.js:985
  throw err;
  ^

Error: Cannot find module '@babel/register'
Require stack:
- /Users/froyer/src/comit-network/app/internals/scripts/BabelRegister.js
- internal/preload
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/froyer/src/comit-network/app/internals/scripts/BabelRegister.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/froyer/src/comit-network/app/internals/scripts/BabelRegister.js',
    'internal/preload'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

https://alchemyapi.io/infrastructure

When calling the comitClient.retrieveSwapById, sometimes we come across the following issue that halts the entire swap:

[warning] (net) Peer disconnected with requested blocks.
[warning] (net) Resending sync...
[warning] (net) Peer disconnected with requested blocks.
[warning] (net) Resending sync...
[warning] (net) Peer disconnected with requested blocks.
[warning] (net) Resending sync...

Only restarting comit-scripts appears to resolve this issue.

MakerService

• GET /
• GET /swaps
• GET /rates

On the swap tracking page, use a multi-step progress bar to clarify swap progress to users. For example:

In case polling breaks or there is an issue in the transaction, users should be able to trigger the next step manually. Showing buttons of what the taker app on your behalf may also help UX.

This is also necessary for Ledger support, since users will have to approve every transaction manually.

Technical specs

The frontend application is a desktop visual interface that allows users to swap between cryptoassets. Sideshift and Uniswap are examples of similar interfaces.

The frontend stack is:

• React.js
• Electron for cross-platform support.

This task covers the initial setup and configuration for a React.js-based desktop app with Electron.

Definition of Done

• Users can install and run the desktop app.

On HomePage, we should refactor the Maker info, swaps, and rate into a single encapsulated hook.

https://github.com/unlock-protocol/unlock/blob/master/unlock-app/src/hooks/useMembers.js#L113-L115

Technical specs

The Node.js backend API is responsible for making BTC-DAI offers for the user and proceed with the swap if someone takes the offer from the desktop client.

This task implements:

• Running a Bitcoin and Ethereum node as the maker, using the SDK (?)
• Accepts swap requests
• Executes swap requests

I'm not yet clear of which of the functionality is already implemented by the SDK and which needs to be implemented.

Definition of Done

• Users can submit a swap request to the maker.
• Users can perform a swap with the maker (to be expanded.)

TODOs Phase 2

• Maker Backend
  • Initialize Maker
  • Create endpoint GET / (root) to display maker info e.g. peerId, addresshint for Frontend Taker to use to createSwap
  • Create endpoint GET /swaps to return maker.comitClient.getNewSwaps()
  • Grok Swap fetch function https://github.com/comit-network/comit-js-sdk/blob/9ab87203d0c204ea24c32312b1d485e4f4cea975/src/cnd/cnd.ts#L161
  • State machine for Maker to do 'next' step when polling
  • Spike and implement polling mechanism
  • Needs to poll for taker.comitClient.sendSwap to be confirmed, and
  • call makerSwapHandle.accept(...)
  • Needs to poll for takerSwapHandle.fund(...) to be confirmed, and
  • call makerSwapHandle.fund(...)
  • Needs to poll for takerSwapHandle.redeem(...) to be confirmed, and call:
  • makerSwapHandle.redeem
• Taker Frontend
  • Initialize Taker
  • SwapForm submit should createSwap and,
  • (Optional) Implement a confirmation modal
  • sendSwap
  • Implement SwapList component for HomePage
  • Implement SwapDetailsPage to display status and info of a single swap and perform next steps
    • Automated with useEffect? Or manual / user-initiated?
  • State machine for Taker to do 'next' step when polling
  • Spike and implement polling mechanism
  • Needs to poll for makerSwapHandle.accept(...) to be confirmed, and call:
  • takerSwapHandle.deploy(...)
  • takerSwapHandle.fund(...)
  • Needs to poll for makerSwapHandle.fund(...) to be confirmed, and call:
  • takerSwapHandle.redeem
  • Needs to poll for makerSwapHandle.redeem(...) to be confirmed, and:
  • let user know that the swap is done
• Debug bitcoin balances not displaying correctly Split into separate issue
• Update README to describe architecture and setup instructions (Maker & poller, Taker, etc.)
• Final round of cleanup and refactoring beforge merging to master
  • Taker: Refactor MAKER_URL to application-level .env Deferred to separate issue
  • Refactor taker & maker state machines into its own class with data + functions Deferred to separate issue
    • runTakerNextStep and parseTakerSwapStatus
  • Address all remaining inline TODOs

Open Questions

• Should the desktop app also have its own backend instead of having the app call the COMIT SDK?
  • especially for monitoring transactions?
• Monitoring maker & taker confirmations Swap.fetchDetails returns status for: swap, alpha & beta ledgers, communication
  • Implement or use a third-party service e.g. AlchemyAPI
  • SDK may need to return transaction ID on functions that perform a transaction, for async monitoring purposes Available in Swap object

• Refactor taker & maker state machines into its own class with data + functions
  • runTakerNextStep and parseTakerSwapStatus

https://github.com/davidkpiano/xstate/tree/master/packages/xstate-fsm

Use https://github.com/paybase/machine

For some reason, the taker consistently fails to execute the last transaction of swap.redeem. This step happens after all other transactions has been completed and the maker has redeemed.

The transaction simply times out with no error message.

The current app fully implements the 'happy path', but the refund and expiry flow is not yet implemented.

Under this flow, the user is prompted with buttons on what to do next. Users would be able to trigger the next step manually.

• Screens must show action buttons e.g. fund, redeem prompting user to initiate the next action instead of automatically executing it.
  • In addition to next() that returns the action, do we need a function that returns info about the next paths to display it?
• Refactor current state machines to match proposed SDK API https://public.3.basecamp.com/p/MdjfVzhMNpQoe8SyKDQUe1dW
• Extend state machine with branching support with https://github.com/paybase/machine
• Display Refund button if possible
  • Implement a canRefund() function in the state machine.

Technical specs

The Node.js backend API is responsible for making BTC-DAI offers for the user and proceed with the swap if someone takes the offer from the desktop client.

This task should implement the following behaviour:

• Returning rates of BTC-DAI using the CoinMarketCap API.

Definition of Done

• Users can view the rates of the single maker.

Refactor rate fetching into a hook that allows refreshing to latest rate.

Eventually, we want to split the Maker backend and Taker app to separate repos.

Code that can be shared between the two should be kept as modular as possible.

Technical specs

Implement the backend Node.js service that will act as a counterparty. It implements the maker side of the SDK negotiation protocol by making offers and proceed with the swap if someone takes the offer from the desktop client.

-- /
 | - maker/ (backend)
    |- package.json
 |- app/ (frontend)
 |- package.json

This task covers just the setup and configuration, as well as integrating it with the Electron app. At minimum, the Electron app should be able to communicate with it. Starting the Electron app should also start this backend.

Defition of Done

• Users can run and install both frontend and backend.
• Frontend communicates with backend

Fix Electron release build pipelines issues to make it directly executable.

https://github.com/electron-react-boilerplate/electron-react-boilerplate
electron-react-boilerplate/electron-react-boilerplate#400

• Debug why Windows package-ci is failing.
• Debug why https://github.com/electron-userland/electron-builder is failing
• Debug what https://github.com/electron/electron-rebuild is doing

As development goes on:

• Go through https://comit.network/docs/getting-started/create-comit-app
• Identify gaps in documentation
• Raise open questions that can be documented

Collated feedback so far:

• The create-comit-app documentation do not explain anything about the API surface. https://comit.network/docs/getting-started/create-comit-app
• The documentation above just shows outputs of console commands. Not very useful.
• We are forcing developers go through the example repo themselves without any explanation about each step / function. This is poor developer experience. COMIT should have a tutorial: https://docs.renproject.io/developers/ren-sdk
• From a third-party developer's perspective, the protocol sections are not that useful. They only care about shipping something and needs to know how the SDK works and where they can 'plug in' their code. They do not care about HTLCs.
• There's no documentation about nodes / infrastructure. No recommendations of how to make production-ready COMIT apps on either testnet or mainnet. This leaves a lot up to the third-party developers.
• To address the above, perhaps we can have a section explaining the internals of comit-scripts, and what nodes / infrastructure the developer needs to execute a COMIT swap (e.g. what nodes, how many nodes, other recommendations.)
• The fact that developers have to think about nodes may be a bad abstraction.
• Why does the SDK even need InMemoryBitcoinWallet and EthereumWallet? Users should be able to just use bcoin or ethers.js directly.
• Why not call.InMemoryBitcoinWallet just BitcoinWallet?

--

• Is createActor idempotent and generate the same peerId every time it's called? If so, 'create' may not be the best name for it because create is usually not idempotent.
• Do we have a transaction monitoring solution? Developers would need to monitor each transaction to proceed with a swap. Possible by polling swap.fetchDetails.
• What's the difference between getNewSwaps and getOngoingSwaps and getDoneSwaps? We may want to make it clear for developers what the corresponding statuses mean.
  • Which category do expired swaps go under?
• What if instead of having three different functions, the SDK provides a single getSwaps({ status: ...}) that accept filtering arguments? By default, it can return all swaps regardless of status.
• What is a Swap and its properties?
  • What is peerId?
  • What does alpha and beta correspond to? Why not maker and taker?
• Why does swap.fetchDetails() return SwapDetails instead of SwapProperties directly? The SwapDetails interface seems to only contain a single properties attribute. In we can simplify this, perhaps swap.getProperties() would be a better name.
• Swaps may need a serialization function such as .toJSON() for ease of transport over HTTP.
• What's important in the documentation is to help developers create a 'model' on how to think about what they're doing and how it relates to what they're trying to achieve. For example, functions like redeem, refund etc means nothing to third-party developers unless we explain how it relates to what they're trying to do - which is to swap assets across chains.
• How is expiry handled? Is there an EXPIRED status?
• In building the app, I realized that developers would need to implement a state machine to keep track of the swap status and what to do next when polling. Would it make sense to have a similar functionality in the SDK?
• Is it possible to have the ETH deploy and fund steps be done in a single transaction? Nontrivial

Use reducer pattern to encapsulate more robust loading and error flags flags when fetching data from maker backend. This should be applied to all data fetching hooks.

EDIT: This should be encapsulated in a custom useFetch hook.

https://electron-react-boilerplate.js.org/docs

TODO: Fix Electron

• Regenerate fresh electron react project comit-app-regen
• Install native dependencies until it fails to build
  • comit-sdk ***
  • bn.js
  • lodash
  • moment
  • satoshi-bitcoin-ts
• 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

Users should not be able to submit a swap if they have insufficient balance. The app should validate against this before sendSwap.

Note: Implement in SwapForm.validateForm()