lez / sporran-extension

KILT browser extension, to manage accounts and send / receive tokens.

sporran-extension

Quick start with play coins

1. We recommend using a different browser or a different profile of your browser to avoid mixing up the real Sporran and the play coins Sporran
2. Have git, Node.js, and yarn installed
3. git clone https://github.com/KILTprotocol/sporran-extension.git
4. cd sporran-extension
5. yarn install && yarn dev
6. Start Chrome and navigate to chrome://extensions (or in Firefox about:debugging#/runtime/this-firefox)
7. Enable Developer Mode by clicking the toggle switch next to Developer mode (Chrome only)
8. Click the Load unpacked button and select the sporran-extension/dist directory (or in Firefox click Load Temporary Add-on... and select sporran-extension/dist/manifest.json)
9. Now you have the internal version of Sporran installed. DO NOT USE IT for real KILT identities/addresses/coins! Choose wss://peregrine.kilt.io/parachain-public-ws in ⚙ Settings > Custom Endpoint. Click the Sporran icon in the browser toolbar and follow the flow to create an Identity. Click the Receive link and copy the Identity address on the next screen.
10. Visit the Faucet, paste the Identity address there, accept the Terms, and click Request Tokens to get some play KILT coins

Testing in browser

Getting the internal version of extension

1. Go to actions page for "Packages the internal version".
2. Click on the build you want to test.
3. Download the extension file from the Artifacts section at the bottom.
4. Unpack the downloaded .zip file and unpack the sporran-???.zip from it as well.

Getting the public version of extension

1. Go to actions page for "Packages the public version".
2. Click the buttons "Run workflow" -> "Run workflow" to prepare the public version and wait for the workflow to finish.
3. Click the link for the just finished workflow and download the extension file from the Artifacts section at the bottom.
4. Unpack the downloaded .zip file and unpack the sporran-???.zip from it as well.

Testing in Chrome

1. Navigate to chrome://extensions.
2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
3. Click the Load unpacked button and select the directory you have unpacked the extension into.

Testing in Firefox

1. Navigate to about:debugging#/runtime/this-firefox.
2. Click the Load Temporary Add-on... button.
3. Select the manifest.json from the directory you have unpacked the extension into.

Getting Started

Run the following commands to install dependencies and start developing

yarn install
yarn dev

Build and package for uploading

Update the version in src/static/manifest.json and src/configuration/configuration.ts.

Run the following commands:

yarn install
yarn build
yarn package

This will generate a file dist/web-ext-artifacts/sporran-???.zip ready to be uploaded to stores.

Scripts

• yarn dev - run webpack in watch mode
• yarn storybook - runs the Storybook server
• yarn build - builds the production-ready unpacked extension
• yarn package - packages the built code for upload
• yarn test -u - runs Jest + updates test snapshots
• yarn lint - runs Stylelint and ESLint
• yarn prettify - runs Prettier
• yarn open-firefox - opens Sporran in Firefox
• yarn open-chrome - opens Sporran in Chrome

Notes

• Includes a custom mock for the webextension-polyfill-ts package in src/__mocks__. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.

Built with

• React
• TypeScript
• Storybook
• Jest
• Eslint
• Prettier
• Webpack
• Babel
• webextension-polyfill-ts

Misc. References

• Chrome Extension Developer Guide
• Firefox Extension Developer Guide