Link Search Menu Expand Document
Haven Protocol Web Vault Development Docs

Haven Protocol Web App

Getting Started

Lets get setup with the React JS app first. There are a few prerequisites you’ll need. I’ll keep my repositories locally in a Projects folder.

> mkdir ~/Projects
> cd ~/Projects
> git clone https://github.com/haven-protocol-org/haven-web-app.git

This will grab all the code from github, its around 400MB so will take a few minutes.

> cd haven-web-app

This is a react app scaffolded with “react-scripts” more info at the Create React site

There are 3 folders

  1. client This is the JS for the React App
  2. haven-desktop-app JS for the Electron App
  3. sh helper scripts for building the Electron App

Lets walk through the client folder

> cd client

package.json

Its worth checking through the package.json

Note the haven-wallet-core dependancy, this is how the compiled web assembly code is imported to the project. If you were to be in a development environment then you will need to work around this, easiest way would be to remove the dependancy and copy your own version in.

The project also makes heavy use of Styled Components

NPM Scripts

Currently scripts are

  • analyze Check your build size
  • start:web Starts a webserver and serves the app
  • build:web Builds the web app
  • start:desktop Start and serve the desktop app
  • build:desktop Build the desktop app JS
  • build:web:ci For github builds ( continous integration )
  • build:desktop:ci For github builds ( continous integration )
  • copy-build Copy the built JS to the desktop app folder need to run this before building the Electron App
  • copy-haven-core Copies the haven-wallet-core into the public folder
  • test Left over from the scaffolding
  • eject Left over from the scaffolding

First thing is to install the required dependancies

> npm install

Once thats finished you’ll have the various node libraries in the node_modules folder. To allow node to serve the web assembly files they need to be copied from the node_modules folder to the public folder that node serves

> npm run copy-haven-core

You should now be able to build and start the app with

> npm run build:web

You’ll be presented with a network selection

1) mainnet
2) testnet
3) stagenet
please select net type:

This is the choice for which Haven Network node you will be connecting to, best to choose testnet during development, we will startup a local testnet node in the next section, so for now enter 2 and wait for the build to finish, this will save files into the build sub directory then

> npm run start:web

This should start up a development server and sere the files into your web browser at http://localhost:3000/

This will be able to open wallet files and generate new wallets but you won’t be able to sync without a local node runnning.

Start a local development node