Update readme (#84)

* screenshot logo and typos

* lol

* jpg
This commit is contained in:
Thibaut Sardan
2019-07-14 22:23:26 +02:00
committed by Jaco Greeff
parent 11c7b24d3e
commit dc88e5775e
9 changed files with 14 additions and 21 deletions
+14 -21
View File
@@ -1,5 +1,4 @@
# @polkadot/extension
# ![polkadot{.js} extension](docs/logo.jpg)
[![Greenkeeper badge](https://badges.greenkeeper.io/polkadot-js/extension.svg)](https://greenkeeper.io/)
A very simple scaffolding browser extension that injects a [@polkadot/api](https://github.com/polkadot-js/api) Signer into a page, along with any associated accounts, allowing for use by any dapp. This is an extensible POC implementation of a Polkadot/Substrate browser signer.
@@ -11,17 +10,11 @@ As it stands, it does one thing: it _only_ manages accounts and allows the signi
- On Firefox, install the extension via [https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/](https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/)
- Chrome coming soon
<div>
![Create account](docs/create-account-40.png)
![Create account](docs/authorize-40.png)
![Create account](docs/sign-tx-40.png)
</div>
![interface screenshots](docs/concat-overview.jpg)
## Development version
Currently is not packaged since it is under heavy development. As such you need to build it yourself. To use -
Steps to build the extension and view your changes in a browser:
1. Build via `yarn build` or `yarn watch`
2. Install the extension
@@ -50,30 +43,30 @@ The repo is split into a number of packages -
## Dapp developers
The actual in-depth technical breakdown is given in the next section for any dapp developer wishing to work with the raw objects injected into the window. However convenience wrappers are provided that allows for any dapp to use this extension (or any other extension that conforms to the interface) without
The actual in-depth technical breakdown is given in the next section for any dapp developer wishing to work with the raw objects injected into the window. However, convenience wrappers are provided that allows for any dapp to use this extension (or any other extension that conforms to the interface) without
having to manage any additional info.
This approach is used to support multiple external signers in for instance [apps](https://github.com/polkadot-js/apps/). You can read more about the conenience wrapper [@polkadot/extension-dapp](packages/extension-dapp/) along with usage samples.
This approach is used to support multiple external signers in for instance [apps](https://github.com/polkadot-js/apps/). You can read more about the convenience wrapper [@polkadot/extension-dapp](packages/extension-dapp/) along with usage samples.
## API interface
The extension injection interfaces are generic, i.e. it is designed to allow any extension developer to easily inject extensions (that conforms to a specific interface) and at the same time it allows for any dapp developer to easily enable the interfaces from multiple extensions at the same time. It is not an all-or-nothing approch, but rather it is an ecosystem where the user can choose which extensions fit his style best.
The extension injection interfaces are generic, i.e. it is designed to allow any extension developer to easily inject extensions (that conforms to a specific interface) and at the same time, it allows for any dapp developer to easily enable the interfaces from multiple extensions at the same time. It is not an all-or-nothing approach, but rather it is an ecosystem where the user can choose which extensions fit his style best.
From a dapp developer perspective, the only work needed is to include the [@polkadot/extension-dapp](packages/extension-dapp/) package and call the appropriate enabling function to retrieve all the extensions and their associated interfaces.
From an extension developer perspective, the only work required is to enable the extension via the razor-thin [@polkadot/extension-inject](packages/extension-inject/) wrapper. Any dapp using the above interfaces will have access.
When there is more than one extension, each will populate an entry above, so from an extension implementation perspective, the structure should not be overridded. The `Injected` interface, as returned via `enable`, contains the following and is what any compliant extension supplies -
When there is more than one extension, each will populate an entry above, so from an extension implementation perspective, the structure should not be overridden. The `Injected` interface, as returned via `enable`, contains the following and is what any compliant extension supplies -
```js
interface Injected {
// the interface for Accounts, as detailed below
readonly accounts: Accounts;
read-only accounts: Accounts;
// the standard Signer interface for the API, as detailed below
readonly signer: Signer;
// not injected as of yet, subscriptable provider for polkadot-js API injection,
read-only signer: Signer;
// not injected as of yet, subscribable provider for polkadot-js API injection,
// this can be passed to the API itself upon construction in the dapp
// readonly provider: Provider
// read-only provider: Provider
}
interface Account = {
@@ -94,7 +87,7 @@ interface Accounts {
// a signer that communicates with the extension via sendMessage
interface Signer extends SignerInterface {
// no specific signer extensions, exposes the `sign` interface for use by
// the polkadot-js API, confirming the the Signer interface for this API
// the polkadot-js API, confirming the Signer interface for this API
}
```
@@ -102,7 +95,7 @@ interface Signer extends SignerInterface {
This information may change and evolve. It is therefore recommended that all access is done via the `-dapp` and `-inject` packages, which removes the need to work with the lower-level targets.
The extension injects `injectedWeb3` into the global `window` object, exposing the following: (This is meant to be generic accross extensions, allowing any dapp to utilize multiple signers, as they are available)
The extension injects `injectedWeb3` into the global `window` object, exposing the following: (This is meant to be generic across extensions, allowing any dapp to utilize multiple signers, as they are available)
```js
window.injectedWeb3 = {
@@ -130,4 +123,4 @@ const accounts = await pjsx.accounts.get();
const api = await Api.create({ signer: pjsx.signer });
```
Generally, you would probably want to have access to all extensions available and have a slighly higher-level interface to work with. For these cases, [extension-dapp](packages/extension-dapp/) provides a cleaner interface around the injected object, making it simpler to work with from a dapp perspective.
Generally, you would probably want to have access to all extensions available and have a slightly higher-level interface to work with. For these cases, [extension-dapp](packages/extension-dapp/) provides a cleaner interface around the injected object, making it simpler to work with from a dapp perspective.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 KiB