Browser extension signing example #1067

tadeohepperle · 2023-07-13T16:15:46Z

I split the Yew WASM App into routes for the 2 examples.
This example constructs a System->remark call with a remark parsed from user input.
We then let the user choose an account in the Talisman or PolkadotJS browser extension and sign the extrinsic in the extension. (Currently tested with the Dev version of the polkadotjs extension)
The full SubmittableExtrinsic is then sent to a local node where we wait for it to be successful.

What is missing?
Right now era, tip and mortality_checkpoint of BaseExtrinsicParams are not used for the extrinsic and we use hardcoded values instead (no tip and immortal)

Co-authored-by: Niklas Adolfsson <[email protected]>

* Reduce some repetition when obtaining metadata pallets/runtime_traits * make them pub * fix docs and clippy

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](tokio-rs/tokio@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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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](rust-lang/regex@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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [quote](https://github.com/dtolnay/quote) from 1.0.27 to 1.0.28. - [Release notes](https://github.com/dtolnay/quote/releases) - [Commits](dtolnay/quote@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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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](dtolnay/proc-macro2@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] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…xample

* practice TDD * implement a hashmap 2-phases approach * use nicer types * add test for cache filling * adjust test --------- Co-authored-by: James Wilson <[email protected]>

…xample

jsdw · 2023-07-31T11:00:21Z

examples/wasm-example/src/main.rs

+pub enum Route {
+    #[at("/fetching")]
+    Fetching,
+    #[at("/signing")]


Yew is quite nice really; I like the built in browser history/routing stuff, and actually I generally find it quite easy to follow overall!

I wonder how the other frameworks differ; I should really try some of them at some point!

lexnv · 2023-07-31T11:08:06Z

examples/wasm-example/Cargo.toml

+wasm-bindgen-futures = "0.4.36"
+anyhow = "1.0.71"
+serde = "1.0.163"
+serde_json = "1.0.96"


nit: we could add a new line here and below

lexnv · 2023-07-31T11:09:37Z

examples/wasm-example/index.js

@@ -0,0 +1,92 @@
+/// 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`


I'm not super familiar with js docs, but is this line complete here? Or should we remove it?

lexnv · 2023-07-31T11:14:42Z

subxt/src/config/extrinsic_params.rs

-    transaction_version: u32,
-    genesis_hash: T::Hash,
-    mortality_checkpoint: T::Hash,
+    /// era


Suggested change

/// era

/// Era defines how long the transaction will be valid for.

lexnv · 2023-07-31T11:15:26Z

subxt/src/config/extrinsic_params.rs

+    pub transaction_version: u32,
+    /// genesis hash of the chain
+    pub genesis_hash: T::Hash,
+    /// mortality checkpoint


Suggested change

/// mortality checkpoint

/// The block after which the transaction becomes valid.

lexnv · 2023-07-31T11:16:44Z

subxt/src/config/extrinsic_params.rs

+    pub era: Era,
+    /// nonce (account nonce sent along an extrinsic, such that no extrinsic is submitted twice)
+    pub nonce: u64,
+    /// tip


Suggested change

/// tip

/// The tip you would like to give to the block author for this transaction.

/// Note: Can be zero.

lexnv · 2023-07-31T11:19:18Z

subxt/src/tx/tx_client.rs

@@ -318,7 +318,8 @@ where
 pub struct PartialExtrinsic<T: Config, C> {
    client: C,
    call_data: Vec<u8>,
-    additional_and_extra_params: T::ExtrinsicParams,
+    /// Extrinsic params (Additional and Extra)
+    pub additional_and_extra_params: T::ExtrinsicParams,


Nit: Similarly to call_data we could create a getter for these params

/// Returns the additional and extra extrinsic params. pub fn extra_params(&self) -> &T::ExtrinsicParams { .. }

examples/wasm-example/src/services.rs

examples/wasm-example/src/routes/signing.rs

subxt/src/config/extrinsic_params.rs

jsdw · 2023-07-31T11:24:59Z

Looks great to me, and it works well!

I'd prefer that we don't expose any of those extra props in Subxt, and instead gather the information up from elsewhere; see my above comment :)

examples/wasm-example/src/routes/signing.rs

…xample

jsdw · 2023-08-02T12:01:53Z

examples/wasm-example/src/services.rs

+fn encode_to_hex_reverse<E: Encode>(input: &E) -> String {
+    let mut bytes = input.encode();
+    bytes.reverse();
+    format!("0x{}", hex::encode(bytes))
+}


Yeah, it's really because we aren't scale encoding some of these numbers at all; we're just providing the hex representation of them, which is naturally big endian. So really we should just hex::encode the numbers when converted to big endian bytes.

Maybe the functions should be:

// SCALE encode and then hex: fn scale_encoded_hex<E: Encode>(input: &E) -> String { ... } // Just hex encode the provided bytes: fn hex_encoded_bytes(input: &[u8]) -> String { ... }

And then .to_be_bytes or whatever on the numbers we pass to the latter?

jsdw · 2023-08-02T12:06:18Z

examples/wasm-example/src/services.rs

+///
+/// Some parameters are hard-coded here and not taken from the partial_extrinsic itself (mortality_checkpoint, era, tip).
+pub async fn extension_signature_for_partial_extrinsic(
+    partial_extrinsic: &PartialExtrinsic<PolkadotConfig, OnlineClient<PolkadotConfig>>,


Nit: you could just pass in the api.tx().call_data(remark_call) bytes here I think; you don't use any other part of the PartialExtrinsic :)

jsdw

A couple of minor nits but assuming it still works when tested again, it looks great to me!

tadeohepperle and others added 16 commits May 26, 2023 14:37

routing and signing example

d4c8158

cliipy fix

e2ffe65

submitting extrinsics

0efc233

change order of lines

b40026d

Skip call variants if there aren't any (#980)

526803c

Co-authored-by: Niklas Adolfsson <[email protected]>

Tidy up some metadata accessing (#978)

b5ae185

* Reduce some repetition when obtaining metadata pallets/runtime_traits * make them pub * fix docs and clippy

restrict sign_with_address_and_signature interface (#988)

add2339

changing js bridge

bd1f29d

dryrunresult ok

2f54934

submitting extrinsic working

a7b3433

tiny up code and ui

37be177

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

a0a1cc6

…xample

tadeohepperle requested a review from a team as a code owner July 13, 2023 16:15

tadeohepperle and others added 4 commits July 13, 2023 18:20

formatting

4e5c107

remove todos

ef9d739

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

8f6658b

…xample

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

9f0de42

…xample

jsdw mentioned this pull request Jul 19, 2023

Add usage examples to the guide #920

Open

tadeohepperle and others added 8 commits July 20, 2023 13:54

support tip and mortality

66dd32d

Prevent bug when reusing type ids in hashing (#1075)

402db95

* practice TDD * implement a hashmap 2-phases approach * use nicer types * add test for cache filling * adjust test --------- Co-authored-by: James Wilson <[email protected]>

small adjustment

953d7c0

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

c0a63ef

…xample

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

d5c969a

…xample

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

1c6e248

…xample

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

b0a8bd1

…xample

fix lock file

23ac08b

tadeohepperle and others added 4 commits July 25, 2023 10:31

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

32cb9b7

…xample

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

99abc29

…xample

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

b776032

…xample

tell users how to add Alice account to run signing example

1fbb0f9

jsdw reviewed Jul 31, 2023

View reviewed changes

lexnv reviewed Jul 31, 2023

View reviewed changes

examples/wasm-example/src/services.rs Show resolved Hide resolved

jsdw reviewed Jul 31, 2023

View reviewed changes

examples/wasm-example/src/routes/signing.rs Show resolved Hide resolved

lexnv reviewed Jul 31, 2023

View reviewed changes

subxt/src/config/extrinsic_params.rs Show resolved Hide resolved

lexnv reviewed Jul 31, 2023

View reviewed changes

examples/wasm-example/src/routes/signing.rs Show resolved Hide resolved

tadeohepperle added 3 commits August 1, 2023 16:12

adjust to PR comments

ea6f8be

Merge branch 'master' into tadeo-hepperle-browser-extension-signing-e…

eb01971

…xample

fmt

0e64607

jsdw reviewed Aug 2, 2023

View reviewed changes

jsdw approved these changes Aug 2, 2023

View reviewed changes

lexnv approved these changes Aug 2, 2023

View reviewed changes

tadeohepperle merged commit dc0aeac into master Aug 2, 2023
8 checks passed

tadeohepperle deleted the tadeo-hepperle-browser-extension-signing-example branch August 2, 2023 12:56

jsdw mentioned this pull request Aug 2, 2023

Prep for 0.31.0 release #1104

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser extension signing example #1067

Browser extension signing example #1067

tadeohepperle commented Jul 13, 2023 •

edited

Loading

jsdw Jul 31, 2023

lexnv Jul 31, 2023 •

edited

Loading

lexnv Jul 31, 2023

lexnv Jul 31, 2023

lexnv Jul 31, 2023

lexnv Jul 31, 2023 •

edited

Loading

lexnv Jul 31, 2023

jsdw commented Jul 31, 2023

jsdw Aug 2, 2023 •

edited

Loading

jsdw Aug 2, 2023 •

edited

Loading

jsdw Aug 2, 2023 •

edited

Loading

jsdw left a comment

	/// era
	/// Era defines how long the transaction will be valid for.

	/// mortality checkpoint
	/// The block after which the transaction becomes valid.

	/// tip
	/// The tip you would like to give to the block author for this transaction.
	/// Note: Can be zero.

Browser extension signing example #1067

Browser extension signing example #1067

Conversation

tadeohepperle commented Jul 13, 2023 • edited Loading

jsdw Jul 31, 2023

Choose a reason for hiding this comment

lexnv Jul 31, 2023 • edited Loading

Choose a reason for hiding this comment

lexnv Jul 31, 2023

Choose a reason for hiding this comment

lexnv Jul 31, 2023

Choose a reason for hiding this comment

lexnv Jul 31, 2023

Choose a reason for hiding this comment

lexnv Jul 31, 2023 • edited Loading

Choose a reason for hiding this comment

lexnv Jul 31, 2023

Choose a reason for hiding this comment

jsdw commented Jul 31, 2023

jsdw Aug 2, 2023 • edited Loading

Choose a reason for hiding this comment

jsdw Aug 2, 2023 • edited Loading

Choose a reason for hiding this comment

jsdw Aug 2, 2023 • edited Loading

Choose a reason for hiding this comment

jsdw left a comment

Choose a reason for hiding this comment

tadeohepperle commented Jul 13, 2023 •

edited

Loading

lexnv Jul 31, 2023 •

edited

Loading

lexnv Jul 31, 2023 •

edited

Loading

jsdw Aug 2, 2023 •

edited

Loading

jsdw Aug 2, 2023 •

edited

Loading

jsdw Aug 2, 2023 •

edited

Loading