Zecwallet UX - Replace Zecwallet UI with a React-based one

Improve Zecwallet UX - Replace Zecwallet UI with React-based UI from Zepio

Background

Zecwallet is a full node and lightclient wallet for Zcash. It has two components:

  1. A UI written in C++/Qt
  2. A backend written in Rust/C++ that implements the lightclient and full node protocol and Zecwallet features

We propose to replace (1) with a new React-powered UI based on the open-source Zepio wallet.

Motivation - Why we need a new UI

Zecwallet was originally written, from scratch, a year ago. It was written in C++/Qt to be fast and responsive. However, over the last year, two issues have cropped up:

  1. As the Zecwallet feature set has grown, implementing it in C++/Qt has becoming increasingly difficult.
  2. C++/Qt is limited to native widgets in the Qt toolkit, severely limiting UX improvements and new features that can be implemented.

In the meanwhile, the Zcash Foundation also funded another wallet, Zepio, which has built a very user-friendly UI and wallet for a Zcash full node. React is a powerful and very flexible UI frontend tech that allows for very expressive UIs to be built easily. And since Zepio has already built one, we can reuse it and implement the UI on top of existing Zecwallet, and use that as a starting point for all the future Zecwallet features.

Building the UI in React will also help us down the road for a React-native based Lightwallet for iOS and Android (although the iOS and Android apps are not in scope for this project).

What we will build

We will take the react-based Zepio UI and integrate it on top of the existing Zecwallet codebase. This includes:

1. Zecwallet Lite

Use the react frontend as the UI on top of the existing Zecwallet code base. The Zecwallet Lightclient library will be compiled into WASM and used in an electron app. This will be available as:

  • An electron App for MacOS, Windows and Linux.
  • A webapp that can be run inside a browser.
2. Zecwallet Fullnode

Use the react frontend as the UI on top of the existing Zecwallet full node app. This will be available as a electron App for MacOS, Windows and Linux.

Technical Approach

Zecwallet Fullnode and Zecwallet Lite share a majority of their UI code already, and we will continue to be true to use the same UI for both apps.

  • Use the React-based UI from Zepio and implement it as a frontend for both Zecwallet Fullnode and Zecwallet Lite
  • Implement all missing features in the UI that Zecwallet supports, including:
    • Companion App support
    • Labels and Address Book
    • Full memo (incoming + outgoing) support
    • Z-address and T-address support
    • Wallet encryption (Lightwallet only)
  • The existing lightclient library will be reused, compiled into WASM and be used as a backend for the new UI.
Security considerations

Npm/electron based apps have suffered some high-profile hacks in the past due to supply-chain attacks on the npm packages. To limit these as much as possible, we will run all the critical code - Private key management, payment detection, tx signing etc… - inside WASM, which runs in a separate memory space, thus benefiting from the WASM's security model

Downsides

There are two notable downsides:

  • Electron apps have a reputation for being bulky or slow, especially compared to native/C++/Qt apps. This will likely be true for the React-based wallet. This is somewhat mitigated in our case due to the use of native code running inside WASM.
  • Nodejs/NPM apps have suffered security lapses due to compromised dependencies. This is mitigated in our case by doing most of the work inside WASM, and limiting the number of NodeJS/NPM dependencies we have to import.

Timeline

This project will take 8 weeks.

  • Migrate Zepio UI to Zecwallet (1 week)
  • Implement missing UI features (3 weeks)
  • Integrate Zecwallet Lite into WASM and merge (1 week)
  • Build, Test and release setup for Zecwallet lite (1 week)
  • Integrate Zecwallet fullnode into UI and merge (1 week)
  • Build, Test and release setup for Zecwallet Full node (1 week)

Budget

The total funding requested for this project is USD 60,000.

  • Milestone 1 - Zecwallet Lite with React-based UI (6 weeks) - USD 45,000
  • Milestone 2 - Zecwallet FullNode with React-based UI (2 weeks) - USD 15,000

Tipping

Tips Received
???  
ZEC

Campaign

Started
8 months ago
Funding
$60,000 
Funded through  
Zecwallet Lite UI
2
Zecwallet Fullnode UI

Zecwallet Fullnode UI

Estimate: March 2020
Reward: $24,000
The team was awarded $24,000 in ZEC on Mar 25th, 2020, 2:40 am.
New Zecwallet FullNode UI based on react