Hosted fungible example (#39)

* Hosted fungible example

* `examples/hosted-counter`: fix up style for shared stylesheet

* `hosted-fungible`: improve error handling

* `examples/hosted-fungible`: add copy button

* `client`: update manifest for publishing

* `linera-protocol`: bring to trunk

Author: Twey

client/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@linera/client",
-    "version": "1.0.0",
-    "description": "",
+    "version": "0.0.3",
+    "description": "Web client for the Linera blockchain",
     "main": "dist/linera_web.js",
     "types": "dist/linera_web.d.ts",
     "files": "dist",
@@ -15,5 +15,13 @@
     },
     "keywords": [],
     "author": "Linera <[email protected]>",
-    "license": "Apache-2.0"
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/linera-io/linera-web.git"
+    },
+    "bugs": {
+        "url": "https://github.com/linera-io/linera-web/issues"
+    },
+    "homepage": "https://github.com/linera-io/linera-web#readme"
 }

client/src/lib.rs

@@ -137,6 +137,21 @@ impl JsFaucet {
             .mutate(|wallet| wallet.set_default_chain(outcome.chain_id))
             .await??;
         context.client.track_chain(outcome.chain_id);
+        let chain_client = context.make_chain_client(outcome.chain_id)?;
+        wasm_bindgen_futures::spawn_local(async move {
+            let (listener, listen_handle, mut notifications) = chain_client.listen().await.unwrap();
+            wasm_bindgen_futures::spawn_local(async move {
+                while let Some(notification) = notifications.next().await {
+                    if let linera_core::worker::Reason::NewIncomingBundle { .. } =
+                        notification.reason
+                    {
+                        chain_client.process_inbox().await.unwrap();
+                    }
+                }
+            });
+            listener.await;
+            drop(listen_handle);
+        });
         Ok(outcome.chain_id.to_string())
     }
 }
@@ -186,6 +201,13 @@ pub struct Client {
 #[derive(Clone)]
 pub struct Frontend(Client);
 
+#[derive(serde::Deserialize)]
+struct TransferParams {
+    donor: Option<linera_base::identifiers::Owner>,
+    amount: u64,
+    recipient: linera_base::identifiers::Account,
+}
+
 #[wasm_bindgen]
 impl Client {
     /// Creates a new client and connects to the network.
@@ -279,6 +301,30 @@ impl Client {
         result
     }
 
+    #[wasm_bindgen]
+    pub async fn transfer(&self, options: wasm_bindgen::JsValue) -> JsResult<()> {
+        let params: TransferParams = serde_wasm_bindgen::from_value(options)?;
+        let chain_client = self.default_chain_client().await?;
+
+        let _hash = self
+            .apply_client_command(&chain_client, || {
+                chain_client.transfer(
+                    params.donor,
+                    linera_base::data_types::Amount::from_tokens(params.amount.into()),
+                    linera_execution::system::Recipient::Account(params.recipient),
+                )
+            })
+            .await??;
+
+        Ok(())
+    }
+
+    pub async fn identity(&self) -> JsResult<JsValue> {
+        Ok(serde_wasm_bindgen::to_value(
+            &self.default_chain_client().await?.identity().await?,
+        )?)
+    }
+
     /// Gets an object implementing the API for Web frontends.
     #[wasm_bindgen]
     #[must_use]

examples/assets/style.css

@@ -22,7 +22,7 @@ body {
     height: 100%;
     padding: 0.5rem;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(496px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 }
 
 .content {
@@ -45,11 +45,7 @@ p {
     max-width: 20rem;
 }
 
-.counter {
-    font-size: 1.25rem;
-}
-
-button {
+button, input[type="submit"] {
     background-color: rgb(222, 42, 2);
     color: #f3eee2;
     border: none;
@@ -65,11 +61,19 @@ button {
     height: fit-content;
 }
 
+button[disabled], input[type="submit"][disabled] {
+    background-color: gray;
+}
+
+input[type="text"] {
+    padding: 0.3rem;
+}
+
 button:hover {
     background-color: #d62f1a;
 }
 
-.log-panel {
+.logs {
     background-color: rgb(222, 42, 2);
     color: #f3eee2;
     border-radius: 24px;
@@ -80,18 +84,18 @@ button:hover {
     overflow: hidden;
 }
 
-.log-panel>* {
+.logs>* {
     white-space: nowrap;
 }
 
-.log-entry {
+#logs li {
     font-family: monospace;
     font-size: 0.9rem;
     padding: 0.5rem;
     overflow: hidden;
 }
 
-.log-entry .height {
+#logs li .height {
     min-width: 3em;
 }
 
@@ -110,6 +114,11 @@ h1::before {
     padding-bottom: 0.1em;
 }
 
+input {
+    background-color: #fffef2;
+    border-style: solid;
+}
+
 @keyframes breathe {
     from {
         scale: 100%;

examples/hosted-counter/index.html

@@ -11,6 +11,10 @@
           display: flex;
           flex-direction: column;
       }
+
+      .ui .counter {
+          font-size: 1.25rem;
+      }
     </style>
   </head>
   <body>
@@ -31,13 +35,13 @@ <h1>Counter</h1>
         </div>
       </div>
 
-      <div class="log-panel">
+      <div class="logs">
         <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code></h2>
-        <div class="logs" id="logs">
-          <template id="block-template">
-            <div class="log-entry">
+        <ul id="logs">
+          <template>
+            <li>
               <span class="height"></span>: <span class="code hash"></span>
-            </div>
+            </li>
           </template>
         </div>
       </div>
@@ -74,6 +78,7 @@ <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code>
               logs.insertBefore(entry, logs.firstChild);
           }
 
+
           async function updateCount() {
               const response = await counter.query('{ "query": "query { value }" }');
               document.getElementById('count').innerText