crypto-com / chain-desktop-wallet Goto Github PK

Just some thought when we try to improve it in next iteration: How about we keep prompting app password at the final step, just like what you did. But we change to use PasswordFormContainer and we could put the message as "One last step before using your wallet, you have to setup your application password. This application password will be used to encrypt your seed bla bla bla"
@calvinaco

Font acumin-pro is currently missing

React-Router

Add /dist to .gitignore

1 CRO = 10^8 BASECRO

• User facing balances and values should be in CRO

• Balances are persisted in BASECRO in the database

• On transfer or staking input values are in CRO and then converted when building the transaction: x10^8

• Check balance on transfer if the sender can currently afford the transfer

'Create password screen' is basic password submission with a password field and a confirm password field.

We can have a text on top saying something along the lines of "You need to set up app password, this password will be used to encrypt the wallets and you should never forget it because there's not a way to get it back when it's lost"

The design may reference on Create Wallet create.tsx / Restore Wallet Page restore.tsx at the moment.

Suggested form submission component: Form - Ant Design

An illustration on what configuration fields to be provided:
https://github.com/crypto-com/chain-desktop-wallet/blob/master/src/service/WalletImporter.spec.ts#L39

{
      derivationPath: "44'/245'/0'/0/0",
      name: 'Pystaport-Custom-Network',
      network: {
        chainId: 'chainmaind',
        addressPrefix: 'pcro',
        validatorAddressPrefix: 'pcrocncl',
        validatorPubKeyPrefix: 'pcrocnclconspub',
        coin: {
          baseDenom: 'basepcro',
          croDenom: 'pcro',
        },
        bip44Path: {
          coinType: 1,
          account: 0,
        },
      },
      nodeUrl: '123.18.45.12:3400',
    };

NOTE

High-resolution designs will be shared slightly later by the design team

A password entry popup is needed in various places as the wallet is requesting a password in operations like Transaction, Staking, etc.

May build up the popup with ModalPopup.tsx, or with Modal - Ant Design directly.
Foreseeably may have to integrate Form - Ant Design into the popup as well.

Need to understand more of the latest development of Ledger lib and see how it can be integrated into the desktop wallet once core features are ready.

This will expose an API like

  loadAccountBalance(address: string, assetDenom: string): Promise<string>;

  loadSequenceNumber(address: string): Promise<number>;

  loadAccountNumber(address: string): Promise<number>;

  // Broadcast trx return trx hash
  broadcastTransaction(signedTxHex: string): Promise<string>;

  getTransactionByHash(transactionHash: string): Promise<IndexedTx>;

Implementing the initial welcome screen UI with respect to shared design

Basically moving from something like import logo from '../../assets/logo-products-chain.svg' to import logo from '@assets/logo-products-chain.svg';

Just a proposal, I found that the pre-commit git hook of Lint is quite helpful for collaboration. It enforces your lints should without any error before commit. Could consider add stylelint tslint prettier at lint-stage

Reference:
https://github.com/crypto-com/chain-explorer/blob/master/package.json#L21

Just had a quick chat with @crypto-matto for LESS integration, know that css processing tools are not decided yet (CSS-module? style-component etc), and also the bundler (Webpack? Parcel? Rollup etc). So here is a discussion issue.

After the decision, @crypto-matto can better integrate LESS with the css processing tool and bundler as a whole.

Staking fields

• Validator address input field
• Amount to be staked

Withdraw staking rewards

• Validator address input field

https://github.com/atom/node-keytar

We should have a background job in place that runs periodically by fetching the latest wallet balances and latest market prices, after loading it should persist them in the local DB.

The data will later be used for displaying the latest balances and asset prices

https://www.electronjs.org/docs/tutorial/application-distribution

This would be implemented when the home screen is complete

  public async retrieveCurrentWalletAssets(): Promise<UserAsset[]> {
    const currentSession = await this.storageService.retrieveCurrentSession();
    const assets = await this.storageService.retrieveAssetsByWallet(
      currentSession.wallet.identifier,
    );

    return assets.map(data => {
      const asset: UserAsset = { ...data };
      return asset;
    });
  }

Also this.retrieveCurrentWalletAssets() might return null, getting [0] of null would result in crash

  public async retrieveDefaultWalletAsset(): Promise<UserAsset> {
    return (await this.retrieveCurrentWalletAssets())[0];
  }

Current state

Currently, mnemonic phrases are stored in plain text format, but the goal is to have them saved after being encrypted.

Objectives

• We should be able to save the mnemonic phrase encrypted after import/restore or new wallet creation

• When the user wants to do a transaction, we should be able to decrypt the encrypted mnemonic and extract the key from the mnemonic for signing purposes.

• The phrase should normally be encrypted with the user set password as the encryption key so that only the user or owner of the password can decrypt it and sign transactions

Outcome

At the end of this task, we should have the implementation of the 3 main steps or functions :

• Storing passwords securely, since these passwords will later be used as encryption keys

• Using that stored password to encrypt the mnemonic phrase, here the previously stored password is used as the encryption key. We'd only store the encrypted mnemonic phrase.

• And finally decrypting the previously-stored phrase with the password ( which was used as the encryption key ) and use the phrase to sign transactions when needed.

Note

This task is not UI related, it's mostly logic behind the storage of sensitive data, the encryption and decryption of phrases.

Subtask of #35

We will need to expose the validation functions from the chain-js lib first in order to implement this feature in the UI app

Either Recoil or Redux

• For actions or operations getting data from the network or any API call, the prefix load or fetch should be used

E.g : loadAccountBalance(), loadAssetPrice(), fetchAccountSequence()

• For actions or operations getting data from the local DB, the prefix retrieve should be used

E.g : retrieveAccountBalance(), retrieveCurrentSession()

Subtask of #35

1. Switching between wallets

User should be able to switch to all wallets that have been created or imported in the desktop app
The below function helps load all existing wallets in the app and shown in a pop-up list for users to select which wallet to switch to.

const allWallets = walletService.retrieveAllWallets()

2. Set current session

By switching to a new wallet, that means the session has changed to a new wallet, so whenever the app is opened again, the last wallet should be selected by default.

/// Something around this code snippet would be used to persist new session 
/// And also updating the recoil state
const newSession = new Session(newSelectedWallet)
setCurrentSession(newSession) 
setSession(newSession) // recoil

3. Keep session in the recoil state

In many places in the app, many views need to access the currently selected wallet info like wallet address and co.
So by keeping the session in a recoil state makes it easy to use it straight away in the views that need them.

An example here is for 'receive screen', we need to display QR code of the address, by using a recoil state, we can have something simple like.

  const session: Session = useRecoilValue<Session>(sessionState);
  
   <QRCode value={session.wallet.address} size={180} />

4. Display current asset data

Data like balance and staked balance can be shown straight by retrieving data from the DB

const currentAsset = await assetService.retrieveDefaultWalletAsset() // Return current asset

// Display balance
currentAsset.balance

// Display staked balance
currentAsset.stakedBalance