@@ -52,61 +52,64 @@ <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code>
5252 </ div >
5353
5454 < script type ="module ">
55- import * as linera from '@linera/client' ;
56- import * as linera_metamask from '@linera/metamask' ;
55+ import * as linera from '@linera/client' ;
56+ import * as linera_metamask from '@linera/metamask' ;
5757
58- async function run ( ) {
59- await linera . initialize ( ) ;
60- const faucet = await new linera . Faucet ( import . meta. env . LINERA_FAUCET_URL ) ;
61- const signer = await new linera_metamask . Signer ( ) ;
62- const wallet = await faucet . createWallet ( ) ;
63- const owner = await signer . address ( ) ;
64- const chain = await faucet . claimChain ( wallet , owner ) ;
65- document . getElementById ( 'owner' ) . innerText = owner ;
66- document . getElementById ( 'chain-id' ) . innerText = chain ;
58+ const logs = document . getElementById ( 'logs' ) ;
59+ const incrementButton = document . getElementById ( 'increment-btn' ) ;
60+ const blockTemplate = document . getElementById ( 'block-template' ) ;
6761
68- // add a new local wallet to the chain that can autosign blocks
69- // without prompting every time
70- const autosigner = linera . signer . PrivateKey . createRandom ( ) ;
71- const client = await new linera . Client ( wallet , new linera . signer . Composite ( autosigner , signer ) ) ;
72- await client . addOwner ( autosigner . address ( ) ) ;
73- wallet . setOwner ( chain , autosigner . address ( ) ) ;
62+ // Initialize the Linera client and set up the MetaMask signer.
63+ await linera . initialize ( ) ;
64+ const faucet = await new linera . Faucet ( import . meta. env . LINERA_FAUCET_URL ) ;
65+ const signer = await new linera_metamask . Signer ( ) ;
66+ const wallet = await faucet . createWallet ( ) ;
67+ const owner = await signer . address ( ) ;
68+ const chain = await faucet . claimChain ( wallet , owner ) ;
69+ document . getElementById ( 'owner' ) . innerText = owner ;
70+ document . getElementById ( 'chain-id' ) . innerText = chain ;
7471
75- const counter = await client . application ( import . meta . env . LINERA_APPLICATION_ID ) ;
76- const logs = document . getElementById ( 'logs' ) ;
77- const incrementButton = document . getElementById ( 'increment-btn' ) ;
78- const blockTemplate = document . getElementById ( 'block-template' ) ;
72+ // For autosigning: first we set up a local (in-memory) signer, and provide it to the
73+ // client along with the MetaMask signer
74+ const autosigner = linera . signer . PrivateKey . createRandom ( ) ;
75+ const client = await new linera . Client ( wallet , new linera . signer . Composite ( autosigner , signer ) ) ;
7976
80- function addLogEntry ( block ) {
81- const entry = logs . getElementsByTagName ( 'template' ) [ 0 ] . content . cloneNode ( true ) ;
82- entry . querySelector ( '.height' ) . textContent = block . height ;
83- entry . querySelector ( '.hash' ) . textContent = block . hash ;
84- logs . insertBefore ( entry , logs . firstChild ) ;
85- }
77+ // Connect to the counter application.
78+ const counter = await client . application ( import . meta. env . LINERA_APPLICATION_ID ) ;
8679
87- async function updateCount ( ) {
88- const response = await counter . query ( '{ "query": "query { value }" }' ) ;
89- document . getElementById ( 'count' ) . innerText
90- = JSON . parse ( response ) . data . value ;
91- }
80+ // When we get a new block, show it in the UI and update the counter from the chain state.
81+ client . onNotification ( notification => {
82+ let newBlock = notification . reason . NewBlock ;
83+ if ( ! newBlock ) return ;
84+ addLogEntry ( newBlock ) ;
85+ updateCount ( newBlock . hash ) ;
86+ } ) ;
9287
93- updateCount ( ) ;
94- client . onNotification ( notification => {
95- let newBlock = notification . reason . NewBlock ;
96- if ( ! newBlock ) return ;
97- addLogEntry ( newBlock ) ;
98- updateCount ( ) ;
99- } ) ;
88+ // For autosigning: we then add the in-memory signer as an owner of the chain in the
89+ // wallet, and set it as the default owner (so it will be used to process messages and
90+ // events).
91+ await client . addOwner ( autosigner . address ( ) ) ;
92+ wallet . setOwner ( chain , autosigner . address ( ) ) ;
10093
101- incrementButton . addEventListener ( 'click' , ( ) => {
102- counter . query ( '{ "query": "mutation { increment(value: 1) }" }' ) ;
103- } ) ;
104- }
94+ function addLogEntry ( block ) {
95+ const entry = logs . getElementsByTagName ( 'template' ) [ 0 ] . content . cloneNode ( true ) ;
96+ entry . querySelector ( '.height' ) . textContent = block . height ;
97+ entry . querySelector ( '.hash' ) . textContent = block . hash ;
98+ logs . insertBefore ( entry , logs . firstChild ) ;
99+ }
100+
101+ async function updateCount ( blockHash ) {
102+ const response = await counter . query ( '{ "query": "query { value }" }' , { blockHash } ) ;
103+ document . getElementById ( 'count' ) . innerText = JSON . parse ( response ) . data . value ;
104+ }
105+
106+ updateCount ( ) ;
105107
106- if ( document . readyState === 'loading' )
107- document . addEventListener ( 'DOMContentLoaded' , run ) ;
108- else
109- run ( ) ;
108+ incrementButton . addEventListener ( 'click' , ( ) => {
109+ // For autosigning: when we make user-initiated mutations, we explicitly make them with
110+ // the original (MetaMask) owner by providing the `owner` option to the `query` call.
111+ counter . query ( '{ "query": "mutation { increment(value: 1) }" }' , { owner } ) ;
112+ } ) ;
110113 </ script >
111114 </ body >
112115</ html >
0 commit comments