Browser extension signing example (#1067)

* routing and signing example * cliipy fix * submitting extrinsics * change order of lines * Skip call variants if there aren't any (#980) Co-authored-by: Niklas Adolfsson <niklasadolfsson1@gmail.com> * Tidy up some metadata accessing (#978) * Reduce some repetition when obtaining metadata pallets/runtime_traits * make them pub * fix docs and clippy * Bump tokio from 1.28.1 to 1.28.2 (#984) Bumps [tokio](https://github.com/tokio-rs/tokio) from 1.28.1 to 1.28.2. - [Release notes](https://github.com/tokio-rs/tokio/releases) - [Commits](https://github.com/tokio-rs/tokio/compare/tokio-1.28.1...tokio-1.28.2) --- updated-dependencies: - dependency-name: tokio dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump regex from 1.8.2 to 1.8.3 (#986) Bumps [regex](https://github.com/rust-lang/regex) from 1.8.2 to 1.8.3. - [Release notes](https://github.com/rust-lang/regex/releases) - [Changelog](https://github.com/rust-lang/regex/blob/master/CHANGELOG.md) - [Commits](https://github.com/rust-lang/regex/compare/1.8.2...1.8.3) --- updated-dependencies: - dependency-name: regex dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump quote from 1.0.27 to 1.0.28 (#983) Bumps [quote](https://github.com/dtolnay/quote) from 1.0.27 to 1.0.28. - [Release notes](https://github.com/dtolnay/quote/releases) - [Commits](https://github.com/dtolnay/quote/compare/1.0.27...1.0.28) --- updated-dependencies: - dependency-name: quote dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump proc-macro2 from 1.0.58 to 1.0.59 (#985) Bumps [proc-macro2](https://github.com/dtolnay/proc-macro2) from 1.0.58 to 1.0.59. - [Release notes](https://github.com/dtolnay/proc-macro2/releases) - [Commits](https://github.com/dtolnay/proc-macro2/compare/1.0.58...1.0.59) --- updated-dependencies: - dependency-name: proc-macro2 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * restrict sign_with_address_and_signature interface (#988) * changing js bridge * dryrunresult ok * submitting extrinsic working * tiny up code and ui * formatting * remove todos * support tip and mortality * Prevent bug when reusing type ids in hashing (#1075) * practice TDD * implement a hashmap 2-phases approach * use nicer types * add test for cache filling * adjust test --------- Co-authored-by: James Wilson <james@jsdw.me> * small adjustment * Merge branch 'master' into tadeo-hepperle-browser-extension-signing-example * fix lock file * tell users how to add Alice account to run signing example * adjust to PR comments * fmt --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: James Wilson <james@jsdw.me> Co-authored-by: Niklas Adolfsson <niklasadolfsson1@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-06-12 07:41:08 +00:00 · 2023-08-02 14:56:41 +02:00
parent 2176ec9fa7
commit dc0aeac3d6
14 changed files with 1134 additions and 424 deletions
@@ -0,0 +1,89 @@
+/**
+ * The `@polkadot/extension-dapp` package can be dynamically imported.
+ * Usually it is wise to use a package manager like npm or yarn to install it as a dependency.
+ *
+ * The `getPolkadotJsExtensionMod` closure returns the `@polkadot/extension-dapp` module on demand.
+ */
+let getPolkadotJsExtensionMod = (() => {
+    let mod = null;
+
+    // initialize `@polkadot/extension-dapp` module on page load
+    let initPromise = (async () => {
+        mod = await import(
+            "https://cdn.jsdelivr.net/npm/@polkadot/extension-dapp@0.46.3/+esm"
+            );
+    })();
+
+    // return a function that waits for initialization to be finished, in case mod is not initialized yet.
+    return async () => {
+        if (mod == null) {
+            await initPromise;
+        }
+        return mod;
+    };
+})();
+
+/**
+ *  Queries wallets from browser extensions like Talisman and the Polkadot.js extension for user accounts.
+ *
+ *  @returns a json string that contains all the accounts that were found.
+ */
+async function getAccounts() {
+    const extensionMod = await getPolkadotJsExtensionMod();
+    await extensionMod.web3Enable("Subxt Example App");
+    const allAccounts = await extensionMod.web3Accounts();
+    const accountObjects = allAccounts.map((account) => ({
+        name: account.meta.name, // e.g. "Alice"
+        source: account.meta.source, // e.g. "talisman", "polkadot-js"
+        ty: account.type, // e.g. "sr25519"
+        address: account.address // e.g. "5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY"
+    }));
+    console.log(accountObjects);
+    return JSON.stringify(accountObjects);
+}
+
+/**
+ * Signs a payload via browser extension
+ *
+ * @param payloadAsStr a string representing a JSON object like this:
+ * let payload = {
+ *     "specVersion": "0x000024d6",
+ *     "transactionVersion": "0x00000018",
+ *     "address": "5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY",
+ *     "blockHash": "0xd7aad6185db012b7ffbce710b55234d6c9589170566b925ee50cfa3d7f1e6f8f",
+ *     "blockNumber": "0x00000000",
+ *     "era": "0x0000",
+ *     "genesisHash": "0xd7aad6185db012b7ffbce710b55234d6c9589170566b925ee50cfa3d7f1e6f8f",
+ *     "method": "0x0503001cbd2d43530a44705ad088af313e18f80b53ef16b36177cd4b77b846f2a5f07c0b00c465f14670",
+ *     "nonce": "0x00000000",
+ *     "signedExtensions": [
+ *         "CheckNonZeroSender",
+ *         "CheckSpecVersion",
+ *         "CheckTxVersion",
+ *         "CheckGenesis",
+ *         "CheckMortality",
+ *         "CheckNonce",
+ *         "CheckWeight",
+ *         "ChargeTransactionPayment",
+ *         "PrevalidateAttests"
+ *     ],
+ *     "tip": "0x00000000000000000000000000000000",
+ *     "version": 4
+ * };
+ * @param source the extension used for signing as a string
+ * @param address the ss58 encoded address as a string
+ * @returns {Promise<*>}
+ */
+async function signPayload(payloadAsStr, source, address) {
+    let payload = JSON.parse(payloadAsStr);
+    const extensionMod = await getPolkadotJsExtensionMod();
+    const injector = await extensionMod.web3FromSource(source);
+    const signPayload = injector?.signer?.signPayload;
+    if (!!signPayload) {
+        const {signature} = await signPayload(payload);
+        console.log("signature js:", signature)
+        return signature;
+    } else {
+        throw "The extension's injector does not have a `signPayload` function on its `signer`";
+    }
+}