figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=128%3A541

Should render question and given answers.

Props:

• question: string
• answers: string[]
• correctAnswer: string
• onCorrectAnswer: function
• onInvalidAnswer: function

Integrate ledge so it can sign our eth1 deposit transaction.

This gist explains web integration, we need desktop
https://gist.github.com/gre/93fc39242c31a23c0570e71cc33bed5a

figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=96%3A0

This includes adding react memory router and navigating from login screen (with button register).

Screen should have selenium test that it has both buttons and on back it should return to login screen.

Add selenium test that checks if screen is shown after click on register button in login screen

https://storybook.js.org/docs/guides/guide-react/

Watch out! We are using typescript!
https://medium.com/@dandobusiness/setting-up-a-react-typescript-storybook-project-5e4e9f540568

figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=192%3A659

Props should be:

• stats: object
  • roi: number
  • balance: BN
  • uptime: number
• beaconNodes: array
  • id: string
  • url: string
  • respTime
• onBeaconNodeClick: function
• onRemoveClick: function
• onDetailsClick: function

• figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=126%3A0

Skip the selenium test for now.

Self explanatory.

• some "any" types could be turned to "uknown", others must be typed properly

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=276%3A3008

Notice it can be with or without green "water"

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=4%3A55

Should expose following props:

• label: string
• valid: boolean - true green, false red, undefined gray
• errorMessage: string

• after import/generate of signing key -> store keys in redux
• after withdrawal key import/generate -> store pubkey in redux
• generate dposit tx data using keys in redux
• wait for deposit tx to be visible (deposit event) or skip
• after password, store keystore/save account in database/delete keys from redux

• figure out how to open screen in maximized format
• change help menu to contain only "Github repo" and "Search Issues" items
• add chainguardian logo as app icon
• rename window title to ChainGuardian

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=4%3A55

Props:

• value: string
• onCopy: (text: string) => void

You should also create subclass MnemonicCopyField with bigger text and space between words like in figma

https://www.figma.com/file/dt1Z45BJkDGOg63IdNYwbR/ChainGuardian?node-id=4%3A55

Notes:

• should have props with current selected item
• should provide props with options (array of strings)
• should provide props function to notify on change
• should have "hover" background by default

Currently, the tooltips are implemented via image manipulation, meaning that in order to display the tooltip the whole source image is replaced with the image that contains original image + the tooltip segment, this means that while hovering the image component the image is replaced with a larger image, this causes various UX issues (tooltip overflows the parent, tooltip expands the parent, etc.). The tooltip should be fix-positioned to the wrapped component and should not interfere with the wrapped component's positioning.

Current tooltip implementation can be seen in the CopyButton component.

We could use a react-tooltip package or implement custom component.

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=256%3A1126

Component should have props:

• steps: []
• current: number - matching index in steps

figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=128%3A1149

Since we will have to fetch and parse events, we have already pulled most of dependencies of ethers.js so we should remove ethereumjs stuff and replace with ethers.js methods

options should be Size.NORMAL and Size.SMALL. Only difference is padding on text side (check YES/NO buttons in figma)

With some changes on various containers some UI bugs apeared:

• "I have saved this mnemonic" button is missing top padding
• Copy button in mnemonic and copy field is aligned top
• When verifying mnemonic, invalid button blinks "correct" green for a second
• center text in tool tip
• text is overlapping with validation checkmark in input fields
• password input isn't focused on create password screen

We can have this issue opened up and just add stuff here.

figma: https://www.figma.com/file/dt1Z45BJkDGOg63IdNYwbR/ChainGuardian?node-id=450%3A12

• figma: https://www.figma.com/file/dt1Z45BJkDGOg63IdNYwbR/ChainGuardian?node-id=276%3A2318
• lib: https://canvasjs.com/react-charts/

Validator balance:

• component interface:
  • defaultInterval - hour, day, week, month, year, all (you need to adjust scale below accordingly, example "hour" value should display balance in last like 8-10 hours - you can decide how many value you wish to display)
  • getData: (interval: IntervalEnum, limit: number) => number[] - you need to document that you expect latest data first, each number corresponds to single interval

• on login check password and display error message if invalid
• if valid, navigate to dashboard

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=4%3A158

Each type should be separate component (inherting from base component).

Should have props:

• disabled: boolean
• onClick: () => void

Class must support:

• check if docker is installed
• using cmd run given docker image
• ability to pass custom params
• open stream with logs
• kill command

I would skip e2e tests and keep just unit test and script to showcase it's working.

We need to support two use cases:

• user imports validator signing key
  • fetch all deposits (not sure if event.pubkey is indexed)
  • filter ones belongs to user pubkey
  • sum and check if ethere is enough ether deposited
• user generated signing key
  • listen on deposit event

Task: create methods to support given use cases

• create http clients wrapper with same methods as http client
• should be able to load balance requests across given http clients
• override produce block method and combine slashings from all http client reponses

• don't have figma
• spinning logo and given text in modal should be fine

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=256%3A586

Component should expose following props:

• isVisible: boolean
• level: "info"|"error"
• horizontalPosition: "left"|"right"|"center"
• verticalPosition: "top"|"bottom"|"center"

component should have unit tests

• should be able to submit object (input name => value) and joi schema
• should return object with inputName => error message or null if valid

Figma:

• https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=128%3A34
• https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=128%3A439

Don't duplicate code just to change text

bls keystore implementation: https://github.com/nodefactoryio/bls-keystore

• function to generate deposit transaction from signing private key and withdrawal public key
  • https://github.com/ethereum/eth2.0-specs/blob/dev/specs/core/0_deposit-contract.md#deposit-function
• interface to sign transaction with eth1 wallet
• ability to return metamask ready tx data of unsigned transaction

Function to generate deposit function data should be:
generateDeposit(signingKey: Keypair, withrawalPubKey: BLSPubKey): DepositParams
Keypair type can be found in @chainsafe/bls, and BLSPubKey in @chainsafe/eth2.0-types.

interface DepositParams {
   withdrawalCredentials: bytes32;
   signature: bytes96;
   root: Hash
}

You should also expose method to generate eth1 data like so:
generateEth1DepositTx(depositParams: DepositParams): Tx

interface Tx {
   to: string;
   value: string;
   data: string;
}

I suggest using https://github.com/ethereumjs/ethereumjs-abi for encoding tx.data so we don't pull too many eth1 dependencies.

Create Account class
with following methods:

• getValidatorsAddresses(): string[] - should return addresses from validator keystores in account directory
• getValidators(password): Keypair[] - returns all validator keypairs or throws if not unlocked
• isCorrectPassword(password: string): boolean -
• unlock(password: string): void - should try to decrypt keystores using given password, throw exception if wrong password (save unlocked keypairs into private field)
• lock(): void - delete all unlocked keypairs from object

with following public properties:

• name: string
• directory: string
• sendStats: boolean

Account should have it's own ssz type definition and database repository implementation.

Note: you will probably have to override repository method for fetching to wrap returned object into AccountClass

• ethereum/consensus-specs#1362

Currently we use eth1 style of converting mnemonic to keypair which may not always result in valid keys.
Use @chainsafe/bls-keygen to generate private key from mnemonic

• create client for this api: https://github.com/ethereum/eth2.0-APIs/tree/master/apis/validator
• use axios to make request
• use axios suggested error handling and convert to custom exception class

• figma:
  • https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=128%3A110
  • https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=128%3A470

Dont copy paste code to support both modals. Make sure to validate input and write selenium tests

• should be same flow as for signing key

• onClick handle should return id of clicked tab

Modals with back button are not placed in center

Renderer:

• implement new DatabaseController (IpcDatabaseController) which passes all data to appropriate ipc channels
• use replace LevelDatabaseController with IpcDatabaseController

Main:

• move LevelDatabaseController from renderer
• Create LevelDatabaseController wrapper which listens on ipc events and passes given data to LevelDatabaseController

Overview of db arch would be:
renderer process -> DatabaseApi -> IpcDatabaseController -> ipc event -> main process -> ipcListener -> LevelDatabaseController

create scalable wrapper for level db like this:
https://github.com/ChainSafe/lodestar/tree/master/packages/lodestar/src/db

There is new package: https://www.npmjs.com/package/@chainsafe/eth2.0-utils
It has method to convert from rest json to eth2-types:
https://github.com/ChainSafe/lodestar/blob/master/packages/eth2.0-utils/src/converters/json.ts#L46

Additionally:

• update unit tests to reflect that
• update rest of lodestar packages to latest version

• figma: https://www.figma.com/file/dt1Z45BJkDGOg63IdNYwbR/ChainGuardian?node-id=446%3A3337

Since we don't have all the data, dashboard should be simplified:

• we need to display:
  • Validator public key
  • Deposit amount
  • Status: "Waiting for deposit", "Waiting for activation" (we cannot detect if validator is active until we have access to beacon nodes)
  • Buttons: Delete, Check Deposit

P.S. each account keystore is validator

Figma: https://www.figma.com/file/S5odpXGtT3b0yXItCpDCXK/ChainGuardian?node-id=276%3A2079

Props:

• hasBack: boolean - to display or not back button
• onBack: () => void
• children: ReactElement[] - should be rendered inside

• expose method which will open native dialog(checkout electron prompts) which is suppose to block main window
• prompt (dialog) should have submit and cancel button
• password input should be hidden
• method should be async and return password or null
• submit is suppose to check password before returning and display error message if invalid

• track and store response times of each method of HTTP client
• add db method to calculate response avg over a given time period

This will be used in graphs. If a response is not received it should be saved as offline in uptime. Should watch for and write down next online status.

• accepts log stream and displays it continuosly
• should render cmd colors

should create service that supports:

• ability to generate eth2 keypair
  • entropy - https://www.npmjs.com/package/@chainsafe/bls
  • mnemonic - ethereum/consensus-specs#1361
• encrypt keypair into keystore - ethereum/consensus-specs#1361
• decrypt keystore