aquiladev / bls-snap

The MetaMask Snap for BLS Wallet

BLS Snap ·

The MetaMask Snap for BLS Wallet

bls-snap-demo.mov

Terminology

1. Action - Smart contract calldata (includes target contract, data and value).
2. Operation - Ordered list of actions.
3. Bundle - Ordered list of operations.
4. Aggreegator - Service which accepts BLS signed transactions and bundles them into one for submission.

Prerequisites

1. Chrome browser

2. MetaMask Flask

   Install MetaMask Flask in your Chrome browser. If you have MetaMask installed, you need to disable it because MetaMask does not support Snaps and cannot work with MetaMask Flask at the same time. Take a look FAQ

3. Node.js v16+

4. Yarn

Getting Started

1. Clone the repository

   mkdir ./bls-snap
   cd ./bls-snap
   git clone https://github.com/aquiladev/bls-snap.git .
   

2. Install dependencies

   yarn install
   

3. Run snap with UI

   yarn start
   

   Note: If you have issues on the snap installation, take a look Troubleshooting block.
4. Run tests

   yarn test
   

Snap APIs

The snap has APIs which allow dapps communicate with it.

A dapp must request MetaMask, in order to invoke snap API

await ethereum.request({
  method: 'wallet_invokeSnap',
  params: {
    snapId,
    request: {
      method: {SNAP_API},
      params: {SNAP_API_PARAMS},
    },
  },
})

List of APIs

• ping - Test API, dapp can hit the API and receive pong in response.
• bls_getNetworks - Returns list of supported networks with their configurations.
• bls_recoverAccounts - Returns list of accounts from snap state.
• bls_createAccount - Creates and returns new account. Snap uses seedprase from MetaMask through its API snap_getBip44Entropy in order to generate accounts. It allows to re-create the same accounts after snap re-installation.
• bls_addErc20Token - Adds ERC20 token to snap state.
• bls_getErc20Tokens - Returns list of ERC20 tokens from snap state.
• bls_removeErc20Token - Removes ERC20 token from snap state.
• bls_getErc20TokenBalance - Returns ERC20 token balance from snap state.
• bls_getActions - Returns list of actions from snap state.
• bls_addAction - Adds new action to snap state.
• bls_removeAction - Removes action from snap state.
• bls_getBundles - Returns list of bundles from snap state.
• bls_getBundle - Returns the bundle from snap state with status check.
• bls_sendBundle - Signs and sends new bundle with ordered list of operations to an aggreegator.

API params

API	Required	Optional
ping
bls_getNetworks
bls_recoverAccounts	chainId
bls_createAccount	chainId	addressIndex
bls_addErc20Token	chainId, tokenAddress, tokenName, tokenSymbol	tokenDecimals (default: 18)
bls_getErc20Tokens	chainId
bls_removeErc20Token	chainId, tokenAddress
bls_getErc20TokenBalance	chainId, tokenAddress, userAddress
bls_getActions	chainId, senderAddress
bls_addAction	chainId, senderAddress, contractAddress, encodedFunction	value (default: 0), functionFragment
bls_removeAction	chainId, id
bls_getBundles	chainId, senderAddress
bls_getBundle	chainId, bundleHash
bls_sendBundle	chainId, senderAddress, actionIds

Troubleshooting

1. mcl-wasm has strange behaviour during execution in snap sandbox. one line changed in file mcl_c.js:

   if (scriptDirectory.indexOf("blob:") !== 0) {
   

   to

   if (typeof scriptDirectory === 'string' && scriptDirectory.indexOf("blob:") !== 0) {
   

   Note: This fix requires snap re-installation. You need to build the snap, remove it from MetaMask and install it again.

bls-snap's Issues

Action structure improvement

Make action data understandable to users, including data decoding

Unit Tests coverage improvements

Add tests for wallets management module

CD

Setup release process of the snap

Unit Tests coverage improvements

Add tests for assets management module

Unit Tests coverage improvements

Add tests for network management module

Bundle representation improvements

As a user I want to see which actions were included in a bundle

Add ability to see list of actions included into a bundle.

1. Bundle item in a bundle list should have transaction hash with a link to an explorer when bundle is completed
2. Bundle item should be expandable (collapsed by default)
   Action list must be displayed when bundle expanded

Unit Tests skeleton

Create skeleton for Unit Tests, to make it possible to write tests for the Snap

Multiple Wallets

Add ability to add multiple wallets for a single network

Action management

Add ability to remove action from the list.
Use bls_removeAction snap api

Wallet creation

Implement randomized wallet creation

Wallet storage

Add storage for wallets, in order to avoid creation of wallet on each application load by reading the data from storage and using the wallet by default

Assets management

Add ability to add new assets and remove existing

Action management

Add ability to remove action from list of prepared actions for batch

Testing Guide

Add guideline for end-user testing of the Snap and Wallet

Unit Tests coverage improvements

Calculate test coverage of bls-snap package. It can be done by using nyc package

Assets management

As a user I want to add and remove assets

Add ability to manage assets via Snap APIs

1. Add token

   We need to add button 'Add Token' on a bottom of a left hand side panel, after list of assets.
   The modal form should be open on a click of the button.
   

   Field validation:

   • ContractAddress - check ethers.utils.isAddress
   • Name - Ascii text, length 1-64
   • Symbol - Ascii text, length 1-16
   • Decimals - unsigned number

   On 'Cancel' button click, close the form
   On 'Add' button click, send request to bls_addErc20Token snap api with provided parameters.

   • In case of success api call, close the form and refresh asset list
   • In case of error, display an error on the form, keep it open

2. Remove token
   User must be able to remove an asset from an asset list.
   If asset has isInternal: false flag, it should be possible to remove it from the list.
   Add remove button (only icon) to a right hand side of an asset item in an asset list. On 'Remove' button click send request to bls_removeErc20Token snap api.

   • In case of success api call, refresh asset list

Theme improvements

Improve current design by unifying font sizes, styles, elements and controls behavior, paddings, positioning, make dark theme usable, etc.

Switching of networks

on network change, the application should call Snap API for that, with wallet state reload

---

As a wallet user I want to have ability to switch networks.
The network dropdown must be in a header near by theme switcher.

The selected network must be stored in state (in order to load resources for previously selected network).

On network switch resources should be loaded for the network (if not present in the state). It includes accounts(recover or create), tokens, operations(actions) and bundles

CD

Setup release process of wallet with deployment to GitHub pages

Network-specific storage

Implement network-specific storage structure. The Snap storage should have network-specific structure, because wallet, assets, operation and batches are network-specific

Action representation improvements

Add ability to see action details:

Current action view:

(which is action.contractAddress and action.encodedFunction)

Needs to be transformed into:

Action must be selectable (checkbox on the left hand side), it must be checked by default.
Button click "Send Bundle" must send only selected actions. When there is no selected actions, "Send Bundle" button must be disabled

Wallet initialization improvements

Update Wallet initialization by fetching data(wallets, networks) from Snap on application load with representation

Needs to be done:

• Change order of 'operations' and 'bundles'. Last should be on top
• Update send bundle process. On 'Send Bundle' button click request to snap should be send and after receiving result operations (included in bundle) should be removed from UI. 'Send Bundle' button should be disabled while sending request. The button should have a loader
• Add ability to disconnect the snap from UI
• Put account icon on center
• Add warning popup when MetaMask Flask is not installed

CI

Add basic CI for listing, compiling and testing of Snap changes

Multiple wallet representation

Add ability to load, represent and select wallet

Note: latest version of snap has named accounts, snap must be reinstalled before development of the task.

• bls_recoverAccounts returns model [{address, name, index}]
• bls_createAccount returns model {address, name, index}

---

1. Account name must be displayed on UI. If accounts are not yet loaded, display 'My account'

2. It should be possible to create new account. bls_createAccount API has parameter addressIndex, which is 0 by default, for new account the parameter must be incremented. The API returns created account, so it is possible to store it in a wallet-ui state
3. It should be possible to see all created accounts (loaded by bls_recoverAccounts API call or from state). The list must be sorted by account index
4. It should be possible to select account in the list. The wallet-ui must store selected account in state, user must see last selected account even after page reload. If account is not found (eg, snap re-installed), then select first in the list
   

THe wallet-ui must display selected account

Documentation

Update documentation with all available Snap APIs

Unit Tests coverage improvements

Add tests for assets management module
Add tests for actions and batches management module

Default Networks

Add more networks as default, update networks management in order to provide all available networks to client

Blogpost

Write a blogpost about the Snap, how to install and use it

Improve entities structure

• Relation between operations and batches
  Add relation operation *- batch, operations should be attached to the batch after sending of the batch.
  Done in scope of #33
• Rename operation to action

Documentation for developers

Add readme file with explanation of the project, how to run it, how to test, etc. The docs should have basic explanation of Snap’s API

Info dialog after account creation

As a user I want to have more information about my account.

After account creation we need to show modal dialog with additional info about the new account.

Content:

---

Network
{Active Network}

Bls account
{address}

INFO: This account was generated with your MetaMask Secret Recovery Phrase.

---

The dialog should have button 'OK', which closes the dialog on click.