linera-io · deuszx · Jun 25, 2025 · May 28, 2025 · May 29, 2025 · May 29, 2025
diff --git a/.env b/.env
@@ -0,0 +1,3 @@
+VITE_FAUCET_URL=https://faucet.testnet-babbage.linera.net
+VITE_COUNTER_APP_ID=
+VITE_FUNGIBLE_APP_ID=
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -39,7 +39,7 @@ jobs:
       with:
         submodules: true
     - uses: cachix/install-nix-action@v26
-    - uses: DeterminateSystems/magic-nix-cache-action@main
+    - uses: DeterminateSystems/flakehub-cache-action@main
     - name: Run all CI tasks
       run: |
         nix develop '.?submodules=1' --override-input linera-protocol ./linera-protocol --command pnpm run ci

diff --git a/README.md b/README.md
@@ -69,3 +69,12 @@ For development, you can also use `pnpm build --watch` to
 automatically rebuild the extension on change.  Changes to the client
 worker will not propagate to the extension, but once you run
 `wasm-pack build` they will be picked up.
+
+
+## Examples
+
+In `/examples` directory there are a couple of examples that can be run 
+to test the Linera network. The faucet address and application addresses 
+are controlled via ENV variables. Those can be set in `.env` file in the root
+of the project or you can overwrite them in `.env.production.local` - 
+a file ignored by git and so needs to be created locally.
diff --git a/examples/hosted-counter-metamask/index.html b/examples/hosted-counter-metamask/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Linera | Counter</title>
+    <link href="/style.css" rel="stylesheet">
+    <link href="/icon.png" rel="icon">
+    <style type="text/css">
+      .ui {
+          display: flex;
+          flex-direction: column;
+      }
+
+      .ui .counter {
+          font-size: 1.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="content">
+        <div class="description">
+          <h1>Counter</h1>
+          <p>
+            This is a simple application tracking some on-chain state that remembers the value of an integer counter.
+          </p>
+          <p>
+            Click the button to submit a block that increments the counter, and watch your local node's state update in real-time.
+          </p>
+        </div>
+        <div class="ui">
+          <p class="counter">Clicks: <span id="count">0</span></p>
+          <button id="increment-btn">Click me!</button>
+        </div>
+      </div>
+
+      <div class="logs">
+        <h2>Connected as <code id="owner" class="hex">requesting owner…</code> </h2>
+        <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code></h2>
+        <ul id="logs">
+          <template>
+            <li>
+              <span class="height"></span>: <span class="code hash"></span>
+            </li>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <script type="importmap">
+      {
+          "imports": {
+              "@linera/client": "./js/@linera/client/linera_web.js",
+              "@linera/signer": "./js/@linera/signer/index.js"
+          }
+      }
+    </script>
+
+    <script type="module">
+      import * as linera from '@linera/client';
+      import * as linera_signer from '@linera/signer';
+
+      const COUNTER_APP_ID = import.meta.env.VITE_COUNTER_APP_ID;
+
+      async function run() {
+          await linera.default();
+          const faucet = await new linera.Faucet(import.meta.env.VITE_FAUCET_URL);
+          const signer = await new linera_signer.MetaMaskEIP191Signer();
+          const wallet = await faucet.createWallet();
+          const owner = await signer.address();
+          document.getElementById('owner').innerText = owner;
+          document.getElementById('chain-id').innerText = await faucet.claimChain(wallet, owner);
+          const client = await new linera.Client(wallet, signer);
+          const counter = await client.frontend().application(COUNTER_APP_ID);
+          const logs = document.getElementById('logs');
+          const incrementButton = document.getElementById('increment-btn');
+          const blockTemplate = document.getElementById('block-template');
+
+          function addLogEntry(block) {
+              const entry = logs.getElementsByTagName('template')[0].content.cloneNode(true);
+              entry.querySelector('.height').textContent = block.height;
+              entry.querySelector('.hash').textContent = block.hash;
+              logs.insertBefore(entry, logs.firstChild);
+          }
+
+          async function updateCount() {
+              const response = await counter.query('{ "query": "query { value }" }');
+              document.getElementById('count').innerText
+                  = JSON.parse(response).data.value;
+          }
+
+          updateCount();
+          client.onNotification(notification => {
+              let newBlock = notification.reason.NewBlock;
+              if (!newBlock) return;
+              addLogEntry(newBlock);
+              updateCount();
+          });
+
+          incrementButton.addEventListener('click', () => {
+              counter.query('{ "query": "mutation { increment(value: 1) }" }');
+          });
+      }
+
+      if (document.readyState === 'loading')
+          document.addEventListener('DOMContentLoaded', run);
+      else
+          run();
+    </script>
+  </body>
+</html>
diff --git a/examples/hosted-counter-metamask/package.json b/examples/hosted-counter-metamask/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@linera/examples/hosted-counter-metamask",
+  "private": true,
+  "author": "Linera <[email protected]>",
+  "license": "Apache-2.0",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "ci": "pnpm build"
+  },
+  "dependencies": {
+    "@linera/client": "workspace:*",
+    "@linera/signer": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/hosted-counter-metamask/public/arrow.svg b/examples/hosted-counter-metamask/public/arrow.svg
@@ -0,0 +1 @@
+../../assets/arrow.svg
diff --git a/examples/hosted-counter-metamask/public/icon.png b/examples/hosted-counter-metamask/public/icon.png
@@ -0,0 +1 @@
+../../assets/icon.png
diff --git a/examples/hosted-counter-metamask/public/js/@linera/client b/examples/hosted-counter-metamask/public/js/@linera/client
@@ -0,0 +1 @@
+../../../node_modules/@linera/client/dist
diff --git a/examples/hosted-counter-metamask/public/style.css b/examples/hosted-counter-metamask/public/style.css
@@ -0,0 +1 @@
+../../assets/style.css
diff --git a/examples/hosted-counter-metamask/vite.config.ts b/examples/hosted-counter-metamask/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/hosted/counter/',
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
+  },
+  build: {
+    rollupOptions: {
+      external: ['@linera/client'],
+    },
+  },
+  esbuild: {
+    supported: {
+      'top-level-await': true,
+    },
+  },
+  optimizeDeps: {
+    exclude: [
+      '@linera/client',
+    ],
+  },
+})
diff --git a/examples/hosted-counter/index.html b/examples/hosted-counter/index.html
@@ -36,6 +36,7 @@ <h1>Counter</h1>
       </div>
 
       <div class="logs">
+        <h2>Connected as <code id="owner" class="hex">requesting owner…</code> </h2>
         <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code></h2>
         <ul id="logs">
           <template>
@@ -50,22 +51,27 @@ <h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code>
     <script type="importmap">
       {
           "imports": {
-              "@linera/client": "./js/@linera/client/linera_web.js"
+              "@linera/client": "./js/@linera/client/linera_web.js",
+              "@linera/signer": "./js/@linera/signer/index.js"
           }
       }
     </script>
 
     <script type="module">
       import * as linera from '@linera/client';
+      import { PrivateKey } from '@linera/signer';
 
-      const COUNTER_APP_ID = '2b1a0df8868206a4b7d6c2fdda911e4355d6c0115b896d4947ef8e535ee3c6b8';
+      const COUNTER_APP_ID = import.meta.env.VITE_COUNTER_APP_ID;
 
       async function run() {
           await linera.default();
-          const faucet = await new linera.Faucet('https://faucet.testnet-babbage.linera.net');
+          const faucet = await new linera.Faucet(import.meta.env.VITE_FAUCET_URL);
+          const signer = new PrivateKey("f77a21701522a03b01c111ad2d2cdaf2b8403b47507ee0aec3c2e52b765d7a66");
           const wallet = await faucet.createWallet();
-          const client = await new linera.Client(wallet);
-          document.getElementById('chain-id').innerText = await faucet.claimChain(client);
+          const owner = await signer.address();
+          document.getElementById('owner').innerText = owner;
+          document.getElementById('chain-id').innerText = await faucet.claimChain(wallet, owner);
+          const client = await new linera.Client(wallet, signer);
           const counter = await client.frontend().application(COUNTER_APP_ID);
           const logs = document.getElementById('logs');
           const incrementButton = document.getElementById('increment-btn');
@@ -78,7 +84,6 @@ <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

diff --git a/examples/hosted-counter/package.json b/examples/hosted-counter/package.json
@@ -12,9 +12,10 @@
     "ci": "pnpm build"
   },
   "dependencies": {
-    "@linera/client": "workspace:^"
+    "@linera/client": "workspace:*",
+    "@linera/signer": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   }
 }
diff --git a/examples/hosted-fungible/index.html b/examples/hosted-fungible/index.html
@@ -127,6 +127,7 @@ <h4>Transfer</h4>
       </div>
 
       <div class="logs">
+        <h2>Connected as <code id="owner" class="hex">requesting owner…</code> </h2>
         <h2>Chain history for <code id="chain-id" class="hex">requesting a new microchain…</code></h2>
         <ul id="logs">
           <template>
@@ -140,8 +141,10 @@ <h2>Chain history for <code id="chain-id" class="hex">requesting a new microchai
 
     <script type="module">
       import * as linera from '@linera/client';
+      import { PrivateKey } from '@linera/signer';
 
-      const FUNGIBLE_APP_ID = '465e465b050db5034fd8a51df46b9a7cf02a8a6414cc2b94b102e912208d4a4b';
+      // This needs to point at actual deployed fungible application ID.
+      const FUNGIBLE_APP_ID = import.meta.env.VITE_FUNGIBLE_APP_ID;
 
       const gql = (query, variables = {}) => JSON.stringify({ query, variables });
 
@@ -216,11 +219,14 @@ <h2>Chain history for <code id="chain-id" class="hex">requesting a new microchai
           });
 
           await linera.default();
-          const faucet = await new linera.Faucet('https://faucet.testnet-babbage.linera.net');
+          const faucet = await new linera.Faucet(import.meta.env.VITE_FAUCET_URL);
+          const signer = new PrivateKey("f77a21701522a03b01c111ad2d2cdaf2b8403b47507ee0aec3c2e52b765d7a66");
           const wallet = await faucet.createWallet();
-          const client = await new linera.Client(wallet);
-          const chainId = await faucet.claimChain(client);
+          const owner = signer.address();
+          const chainId = await faucet.claimChain(wallet, owner);
+          const client = await new linera.Client(wallet, signer);
           document.querySelector('#chain-id').innerText = chainId;
+          document.querySelector('#owner').innerText = owner;
 
           const application = await client.frontend().application(FUNGIBLE_APP_ID);
 

diff --git a/examples/hosted-fungible/package.json b/examples/hosted-fungible/package.json
@@ -12,7 +12,8 @@
     "ci": "pnpm build"
   },
   "dependencies": {
-    "@linera/client": "workspace:^"
+    "@linera/client": "workspace:*",
+    "@linera/signer": "workspace:*"
   },
   "devDependencies": {
     "vite": "^5.4.11"

diff --git a/examples/hosted-fungible/vite.config.ts b/examples/hosted-fungible/vite.config.ts
@@ -27,5 +27,9 @@ export default defineConfig({
     exclude: [
       '@linera/client',
     ],
+    include: ['@adraffy/ens-normalize'],
   },
+  ssr: {
+    noExternal: ['@adraffy/ens-normalize'],
+  }
 })
diff --git a/extension/package.json b/extension/package.json
@@ -19,13 +19,7 @@
         "lit": "^3.2.0",
         "randomstring": "^1.3.0",
         "webext-bridge": "^6.0.1",
-        "@linera/client": "workspace:^"
-    },
-    "devDependencies": {
-        "@types/chrome": "^0.0.267",
-        "@types/randomstring": "^1.3.0",
-        "ts-auto-guard": "^5.0.1",
-        "typescript": "^5.6.2",
-        "vite": "^5.4.5"
+        "@linera/client": "workspace:*",
+        "@linera/signer": "workspace:*"
     }
 }
diff --git a/extension/src/wallet/index.ts b/extension/src/wallet/index.ts
@@ -1,5 +1,6 @@
 import * as linera from '@linera/client';
 import type { Client } from '@linera/client';
+import { PrivateKey } from '@linera/signer';
 
 import * as guard from './message.guard';
 
@@ -11,7 +12,7 @@ export class Server {
   async setWallet(wallet: string) {
     this.wallet = wallet;
     await linera;
-    this.client = await new linera.Client({} as linera.Wallet); // Replace with actual wallet initialization
+    this.client = await new linera.Client({} as linera.Wallet, new PrivateKey("f77a21701522a03b01c111ad2d2cdaf2b8403b47507ee0aec3c2e52b765d7a66") ); // Replace with actual wallet initialization
     this.client.onNotification((notification: any) => {
       console.debug('got notification for', this.subscribers.size, 'subscribers:', notification);
       for (const subscriber of this.subscribers.values()) {

diff --git a/package.json b/package.json
@@ -8,9 +8,23 @@
     "keywords": [],
     "author": "Linera <[email protected]>",
     "license": "Apache-2.0",
+    "dependencies": {
+        "@linera/client": "workspace:*",
+        "@linera/signer": "workspace:*"
+    },
+    "devDependencies": {
+        "@types/chrome": "^0.0.267",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^24.0.0",
+        "@types/randomstring": "^1.3.0",
+        "ts-auto-guard": "^5.0.1",
+        "typescript": "^5.8.3",
+        "vite": "^5.4.5"
+    },
     "pnpm": {
         "onlyBuiltDependencies": [
-            "@linera/client"
+            "@linera/client",
+            "@linera/signer"
         ]
     }
 }