Kibisis Web Extension

The wallet for your lifestyle.

This is the Kibisis web extension built in React, TypeScript and Webpack.

Table of contents

• 1. Overview
• 2. Usage
• 2. Development
  • 3.1. Requirements
  • 3.2. Setup
  • 3.3. Install Local Browsers
    • 3.3.1. Chrome
    • 3.3.2. Firefox
  • 3.4. Run
• 4. Appendix
  • 4.1. Useful Commands
  • 4.2. Manifest Permissions
• 5. How To Contribute
• 6. License

🗂️ 1. Overview

Coming soon...

🪄 2. Usage

Refer to the documentation for information on how to use Kibisis.

^{Back to top ^}

🛠 3. Development

3.1. Requirements

• Install Yarn v1.22.5+
• Install Node v20.9.0+
• Install jq (optional - if you are installing the local Chrome browser)

^{Back to top ^}

3.2. Setup

1. Install the dependencies:

$ yarn install

⚠️ NOTE: a post install script will run that creates a .env file.

2. In the newly created .env file, replace the environment values with the desired values.

^{Back to top ^}

3.3. Install Local Browsers (Optional)

If you are want to run a standalone browser for development, you can install developer versions of Chrome and Firefox. If these are installed, these will be used as the installation of the temporary extensions that are built in step 3.4.

⚠️ NOTE: the following commands can be run again to re-download and install the latest version. Your saved profile and extension settings will not be affected as they are stored in a separate directory in .<chrome|firefox>_profile/.

^{Back to top ^}

3.3.1. Chrome

1. Simply run:

yarn install:chrome

️ NOTE: the binary will be installed to .chrome/.

^{Back to top ^}

3.3.2. Firefox

1. Simply run:

yarn install:firefox

️ NOTE: the binary will be installed to .firefox/.

^{Back to top ^}

3.4. Run

• To run simply use:

$ yarn start:<chrome|firefox>

⚠️ NOTE: this command will bundle the TypeScript source code and extension assets into the .<chrome|firefox>_build/ directory and depending on your intended target (you can choose 'chrome' or 'firefox') the corresponding browser will start up with the unpacked extension as a temporary extension.

^{Back to top ^}

📑 4. Appendix

4.1. Useful Commands

Command	Description
yarn build:chrome	Bundles the source code and Chrome specific assets into the .chrome_build/ directory.
yarn build:edge	Bundles the source code and Microsoft Edge specific assets into the .edge_build/ directory.
yarn build:firefox	Bundles the source code and Firefox specific assets into the .firefox_build/ directory.
yarn install:chrome	Installs/updates the latest version of Chrome For Testing browser to the project root. This removes the existing version if it exists.
yarn install:firefox	Installs/updates the latest version of Firefox Developer Edition browser to the project root. This removes the existing version if it exists.
yarn package:chrome	Packages the contents of the .chrome_build/ directory into a kibisis-chrome-{version}.zip file, ready for submission.
yarn package:edge	Packages the contents of the .edge_build/ directory into a kibisis-edge-{version}.zip file, ready for submission.
yarn package:firefox	Packages the contents of the .firefox_build/ directory into a kibisis-firefox-{version}.zip file, ready for submission.
yarn prettier	Runs prettier with the same configuration that is run on the pre-commit hooks.
yarn start:chrome	Bundles the source code & the add-on assets, starts the local Chrome For Testing Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension.
yarn start:firefox	Bundles the source code & the add-on assets, starts the local Firefox Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension.
yarn start:dapp-example	Starts the example dApp at http://localhost:8080
yarn test	Runs unit tests.
yarn test:coverage	Runs unit tests with coverage.

^{Back to top ^}

4.2. Manifest Permissions

Value	Version	Justification
<all_urls>	2	When the extension attempts to scan the QR code of a WalletConnect dapp, the tabs.captureVisibleTab() function is used.
activeTab	3	As above, the extension requires access to the tabs.captureVisibleTab().
alarms	3	A user can switch on a password lock. This feature utilizes the Alarms API as a timeout to lock the extension behind a password.
storage	2 and 3	The storage API is used to maintain the state of the extension. It saves encrypted private keys, settings and the lists of AVM assets.
unlimitedStorage	2 and 3	As an n number of accounts/private keys are saved to storage, users that have a lot of accounts will most likely exceed the storage limit.

^{Back to top ^}

👏 5. How To Contribute

Please read the Contributing Guide to learn about the development process.

^{Back to top ^}

📄 6. License

Please refer to the COPYING file.

^{Back to top ^}