# FLAX Front-End Design
This doc focuses on the design of the front end for FLAX. It focuses on any component that users will have to interact with directly.

The back-end/contract logic can be found here - https://hackmd.io/m7Hx1375Rwad6_9xRAoLEg?view

So far, we plan to create 3 major components for the front-end:
1. Chrome/Brave Extension with Ethereum Provider API
- https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md
3. Mobile app (similar to the extension)
4. DApp specific web pages - Ex. a FLAX-Uniswap page where users can quickly anonymously swap tokens via Uniswap

These peices will allow users to sign and send FLAX transactions from their computer or phone. It also allows DApp developers to build their DApp such that FLAX wallet holders can still interact.

## Extension + Ethereum Provider API
### Goals
The extension and Ethereum provider API aim to achieve the following goals:
* Allow users to view in browser all of their owned assets stored in the FLAX Vault
* Secure storage of FLAX addresses and keys
* Allow DApp developers to easily integrate their front-end with the FLAX extension via the Ethereum Provider API
* Sign tx data
* Custom functions that allow easy creation of spend and refund objects? (easy creation of any objects needed for FLAX transactions, basically an SDK?)
* Will also include zk proof generation

### Note Scanning
For detailed explanations of the cryptography, see the back-end design doc: https://hackmd.io/m7Hx1375Rwad6_9xRAoLEg?edit

A FLAX address consists of three uint256 values:

struct FLAXAddress {
    uint256 H1; // Compressed Babyjub point h1
    uint256 H2; // Compressed Babyjub point h2
    uint256 H3; // Compressed Babyjub point h3
}

* `pk` - FLAXAddress as shown above
* `vk` - Viewing / nullifier key
* `sk` - Spending / validating key

$$ (vk \cdot H_1 = H_2) \mbox{ and } (sk \cdot H_1 = H_3)$$

The public key (pk) will be visible on-chain to the public. However, every time a user adds funds to the Vault (via makeDeposit or through a refund), they will use a randomized public key. A randomized public key can be chosen by randomly choosing a randomizer `r` and computing $(r \cdot H_1, r \cdot H_2, r \cdot H_3)$.

Every time a new note is added to the Vault, an event will be emitted that contains the FLAX address of that note. This will allow the extension (which holds the viewing key `vk`) to scan all events for which notes belong to the user signed in.

The extension will need to:
* Securely store `vk` and `sk`
* Randomly generate a new rerandomized address for every FLAX deposit/refund
* Follow events from the FLAX contracts to see which new notes are for the user that is signed in
* If a new note has public key: K1, K2, and K3, the wallet will need to check:
$$(vk \cdot K_1 == K_2)$$
* If so, then this new note detected does belong to the user signed in.

### Secure Storage
...

### Ethereum / FLAX Provider API
#### Concrete next steps

1. Go through Web3.js and Ethers.js APIs and categorize by what we can or cannot keep / directly emulate.
2. For those that we cannot stay compatible with, design new APIs that offer dapps the same functionality. Tentative list: any address-based read and write access to chain require new APIs.
3. Add new APIs to submit transactions to a Flax sequencer.

## Mobile App
The mobile app's main purpose is to allow users to interact with FLAX via their phone. This opens anonymous DeFi to mobile users. The mobile app functionality can be based off of the chrome extension.

## DApp Specific Web Pages
Since there are some limitations to using FLAX for all of a user's DeFi transactions (ex. handling return data), it might make sense to have FLAX supported web pages for the most popular DeFi applications. These web pages will be custom designed to make user interaction with these services as simple as possible, and as close to the service's own web page (in terms of functionality) as well.

Popular services that could benefit from their own custom web page:
* Uniswap - would allow for easier handling of liquidity position NFTs
* ...

## Appendix
### Other Wallet Extensions
Here are other projects working on building EVM wallet extensions. These may be helpful to reference when building ours out.
* BLS-Wallet - https://github.com/web3well/bls-wallet/tree/main/extension
* Somewhat similar to what we are trying to do since this wallet secures BLS keys (corresponds to FLAX keys) and they rollup transactions by sending them to an aggregator
* Block Wallet - https://github.com/block-wallet/block-extension-dev-docs/tree/main/provider
* MetaMask - https://github.com/MetaMask
* Rainbow Wallet (React native app) - https://github.com/rainbow-me/rainbow