feat: Merge Browser into master (#530)

* fix: wasm loader added to react app

* feat: nf3 circuits in zkjs browser

* feat: zok js compile and genproof

* feat: zokjs nf browser

* feat: zkjs in browser

* feat: zkjs in browser

* feat: zkjs in browser

* fix: binary files added for compile out and pk binary

* fix: not in modules removed

* fix: deposit work in progress

* fix: eslint fixes

* fix: console.log removed

* fix: successfully rebased

* fix: eslint fixes

* fix: ignore big files

* fix: ignore big files

* feat: update deposit calls

* feat: update transfer to use zokrates js

* feat: update withdraw to use zokrates js

* fix: update gitignore

* fix: update zzokrates test view files

* fix: bug resolved for deposit

* fix: eslint fixes

* fix: configuration bigInt value deserialized

* fix: wasm loader added to react app

* feat: nf3 circuits in zkjs browser

* feat: zok js compile and genproof

* feat: zokjs nf browser

* feat: zkjs in browser

* feat: zkjs in browser

* feat: zkjs in browser

* fix: binary files added for compile out and pk binary

* fix: not in modules removed

* fix: deposit work in progress

* fix: eslint fixes

* fix: console.log removed

* fix: successfully rebased

* fix: eslint fixes

* fix: update zzokrates test view files

* fix: bug resolved for deposit

* fix: eslint fixes

* fix: update use of compressed pkds

* fix: eslint errors

* feat: browser side transfer

* feat: add blockProposed Ws

* feat: update bpHandler to use ws

* fix: fix indexdb calls

* feat: update transfer op

* fix: small config errors

* feat: single transfer and double transfer working

* feat: withdraw working

* chore: cleanup logging

* fix: small fixups

* fix: nightfall-browser config refactor import config module removed

* fix: eslint fixes

* fix: approve and submitTransaction implemented in wallet for deposit cli dependency removed

* chore: images for the main page like polygon web wallet

* test: trying to fix the error in the tests

I'll leave to do it in other task

* chore: adding wallet.svg icon and creating a new folder for icons

* style(scss): adding to scss files. one for the initial page and other for the assets component

* feat(main page): a main page like in the polygon website
https://wallet.polygon.technology/

* fix: remove e2e test from check PRs (#411)

* fix: #318 hosted geth config configured

* fix: testing 1

* fix: testing 2

* test: testing 4

* test: testing 5

* test: testing 6

* test: 8

* test: 9

* test: 10

* fix: removed testing workflow

* fix: github workflow to run cron job on hosted ropsten geth instead infura

* fix: hosted geth added to secret

* test: 1

* test: 3

* fix: github workflow used for testing changes for hosted geth node removed

* fix: variable name corrected and readme.md file updated

* test: 1

* test: 2

* fix: github workflow used for testing changes for hosted geth node removed

* fix: term hosted removed from code

* test: 3

* fix: github workflow used for testing changes for hosted geth node removed

* test: trying to fix the error in the tests

I'll leave to do it in other task

* style(scss): adding to scss files. one for the initial page and other for the assets component

* fix(eslint): fixing eslint problems

* fix(paths): adding the correct path to zokrates abis

* fix(paths): adding the correct path to zokrates abis

* fix: problems with images presentation

* fix: problems with page redirections just adding a exec tag on the main route

* chore(styles): adding new scss files to tokens presentation page

* chore(styles): refactoring asses scss

* feat(components): new page wallet with the components with new style to show the tokens

* fix(eslint): eslint fixes

* feat: bridge page added

* feat: confirm transaction modal

* feat: send tokens modal

* feat: update balance checks

* feat: wallet balance retrieval

* feat: web3 and nf3 instantiation

* feat: transfer and withdraw in bridge

* feat: deposit and trfs in bridge with pop up

* feat: send modal

* feat: send complete and incoming view keys

* fix: remove dup files

* feat: sidebar and navbar added to the project

* fix: merge issues

* feat: side bar refactored with icons

* feat: update styling

* fix: appling same fix to bridge jsx file too

* fix: eslint fixes

* fix: eslint fixes

* fix: eslint fixes

* feat: prepare new wallet for tests

* feat: increase waiting times

* feat: modal deposit and withdraw flow

* feat: transaction page

* feat: add login to wallet tests

* fix: abi added to nightfall-browser

* fix: web3 instance connected metamask provider

* fix: eslint fixes

* fix: todo comment corrected

* fix: bug fix

* feat: add tx tests

* fix: sign transaction

* feat: initial page refactored using polygon styles in className react tags

* fix: eslint errors

* fix: refactoring wallet page, side and nav bar styles

* fix: eslint

* chore: delete unused files (#458)

* fix: sdk nf3 initalisation removed also some refactor

* fix: console.log removed

* fix: last reference sdk removed

* fix: stop mnemonic popup just because metamask is mid-sign

* fix: bug fix for wallet page reload

* chore: update readme

* chore: rename keys inline with containers

* chore: remove silly logs

* chore: update readme and add helper script

* fix: update contract address retrieval to be dynamic

* chore: npm audit fix

* fix: field assignment

* fix: update optimist url, catch location bridge errors

* fix: move to npm ci

* fix: balance checks

* fix: update zokrates js

* feat: add update socket

* feat: offchain and ws fix

* feat: created a web component for the bridge deposit and withdraw component

* fix: e2e test implemented - but github workflw should fail

* fix: workflow fix

* fix: add -d flag with start-nightfall script

* fix: readme.md update for wallet startup instruction

* fix: removed old Selenium e2e test code

* fix: refactor e2e test

* fix: refactor and comment added

* fix: line end added

* fix: env get bg fix

* feat: update syncing to use timber

* feat: offchain in browser

* feat: save pkd in localStorage

* fix: e2e browser test bug fix

* fix: remove hosted geth

* fix: remove old wallet setups

* fix: remove public inputs

* fix: rename optimist endpoints to proposer endpoints

* fix: change request to PR 530 done

Co-authored-by: Liju Jose <liju.jose@gds.ey.com>
Co-authored-by: dwebchapey <harikrishnan.m@gds.ey.com>
Co-authored-by: Luiz <luiz.oamorim@gmail.com>
Co-authored-by: David Rodriguez Garcia <70919589+daveroga@users.noreply.github.com>
Co-authored-by: David Ruiz <druiz0992@gmail.com>

.eslintignore

@@ -6,3 +6,5 @@ cli/build/*
 wallet/src/index.js
 wallet/cli/*
 test/adversary/nightfall-adversary/*
+wallet/build
+/**/*.d.ts

.eslintrc.js

@@ -1,5 +1,10 @@
 module.exports = {
-  extends: ['codfish', 'eslint:recommended', 'plugin:react/recommended'],
+  extends: [
+    'codfish',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
   rules: {
     'no-underscore-dangle': 'off',
     'no-console': 'off',

.github/workflows/browser-e2e-test.yml

@@ -0,0 +1,97 @@
+name: Browser e2e test
+
+on:
+  pull_request:
+    branch:
+      - wallet/nf-browser-v2
+
+jobs:
+  e2e-test:
+    runs-on: ubuntu-18.04
+    environment: AWS
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.0'
+
+      - name: Install aws-cli
+        run: |
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+          unzip awscliv2.zip
+          sudo ./aws/install
+
+      - name: Verify aws-cli installation
+        run: aws --version
+
+      - name: Configure AWS credentials from Test account
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
+
+      - name: Download precompiled circuit outputs
+        run: aws s3 cp s3://nightfallv3/circuits ./wallet/src/zokrates --recursive
+
+      - name: Start Containers
+        run: |
+          npm ci
+          docker-compose -f docker-compose.dev.yml build
+          ./start-nightfall -g -d -s &> docker-compose.log &disown
+
+      - name: wait 1000s for Containers startup and setup completion
+        run: sleep 1000
+
+      - name: container logs
+        if: always()
+        run: cat docker-compose.log
+
+      - name: Setup proposer
+        run: cd cli && npm ci
+
+      - name: Run proposer
+        run:  |
+          ./proposer > proposer.log &disown
+          sleep 200
+
+      - name: proposer script log
+        if: always()
+        run: cat proposer.log
+
+      - name: Setup browser app
+        run: |
+          cd wallet/
+          npm ci
+          ./copy-zokrates-local.sh
+
+      - name: Start browser app
+        run: |
+          cd wallet/
+          npm start &> browser-app.log &disown
+          sleep 400
+
+      - name: debug logs - browser startup
+        if: always()
+        run: cat wallet/browser-app.log
+
+      # in local machine
+      # NETWORK_NAME=ganache-nightfall RPC_URL=http://localhost:8546 CHAIN_ID=1337 PRIVATE_KEY=0x4775af73d6dc84a0ae76f8726bda4b9ecf187c377229cb39e1afa7a18236a69e npm run e2e-test
+      - name: Run e2e test
+        run: cd wallet && npm run e2e-test
+        env:
+          NETWORK_NAME: 'ganache-nightfall'
+          RPC_URL: 'http://localhost:8546'
+          CHAIN_ID: 1337
+          PRIVATE_KEY: '0x4775af73d6dc84a0ae76f8726bda4b9ecf187c377229cb39e1afa7a18236a69e'
+
+      - name: test video
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: e2e-video
+          path: wallet/tests/e2e/videos/e2e-spec.js.mp4
+
+      - name: debug logs - Container log after e2ee test run
+        if: always()
+        run: cat docker-compose.log

.github/workflows/check-PRs.yml

@@ -15,6 +15,9 @@ jobs:
       - name: eslint check
         run: |
           npm ci
+          cd wallet/
+          npm ci
+          cd ..
           npm run lint
 
   ganache-test:

.gitignore

@@ -2,10 +2,14 @@
 node_modules
 cli/build
 .*swp
-
+.vscode/*
 
 # wallet
 wallet/build
 wallet/cli
+wallet/config
 __pycache__
 test/adversary/nightfall-adversary
+wallet/src/zokrates
+wallet/tests/e2e/videos
+wallet/tests/e2e/screenshots

README.md

@@ -190,18 +190,20 @@ use it:
 
 Nightfall_3 provides a Wallet to exercise its features. To use it:
 
-- Generate browser version of SDK:
+- If this is the first time you are using the wallet and do not have the wallet/src/zokrates directory. From the project root:
+```
+mkdir ./wallet/src/zokrates
+```
+- If you have access to the S3 bucket that contains the precompiled circuit outputs:
 
 ```
-cd cli
-npm install
-npm run build
+aws s3 cp s3://nightfallv3/circuits ./wallet/src/zokrates --recursive
 ```
 
 - Deploy nightfall (only ganache for now) from Nightfall's root folder
 
 ```
-./start-nightfall -g -s
+./start-nightfall -g -d -s
 ```
 
 - In a different terminal, start proposer from Nightfall's root folder once Nightfall deployment is
@@ -211,9 +213,7 @@ npm run build
 ./proposer
 ```
 
-- In a different terminal, start the liquitidy provider from Nightfall's root folder. Liquidity
-  provider is needed to use `instant withdraw` feature
-
+- In a different terminal, start the liquidity provider from Nightfall's root folder. Liquidity provider is needed to use `instant withdraw` feature
 ```
 ./liquidity-provider
 ```
@@ -222,7 +222,12 @@ npm run build
 
 ```
 cd wallet
-npm install
+npm ci
+```
+
+- Copy proving keys and compiled circuits into ./wallet/src/zokrates
+```
+./copy-zokrates-local.sh
 ```
 
 - Launch wallet in ganache (localhost)
@@ -249,8 +254,7 @@ More information can be found [here](https://github.com/EYBlockchain/nightfall_3
    test account with private key
    `0x4775af73d6dc84a0ae76f8726bda4b9ecf187c377229cb39e1afa7a18236a69e`
 3. Next step is to configure Nightfall's RPC network. Go to `Settings->Networks->Add Network`
-4. Enter the following information and press `Savle`
-
+4. Enter the following information and press `Save`
 - `Network Name` : nightfall-localhost
 - `New RPC URL` : http://localhost:8546
 - `Chain ID`: 1337
@@ -265,6 +269,13 @@ More information can be found [here](https://github.com/EYBlockchain/nightfall_3
   whereas ganache has reset it. If nonce is not reset, you will see an error message after signing
   the transaction. To reset the nonce in metamask:
 
+### Limitations
+- If you restart Ganache, you will need to manually delete the IndexedDB state in your browser storage as it will persist.
+1. Open Developer Console in your Chrome browser.
+2. Click on the Application tab and then click IndexedDB in the left sidebar.
+3. Clicking on the Nightfall Commitments storage should enable you to delete the database.
+
+- You need to reset the nonce every time you restart Nightfall, as Metamask will keep previous nonce whereas ganache has reset it. If nonce is not reset, you will see an error message after signing the transaction. To reset the nonce in metamask:
 1. Open Metamask in browser
 2. Settings->Advance->Reset Account