Skip to content

Commit 9cb72b3

Browse files
deuszxdeuszx
authored
Update examples to use latest linera-web APIs. (#49)
* Add basic EmbeddedEIP191Signer * Use IJsSigner interface exported from linera-protocol * Work with string types in JS api * Move the sample Embedded signer to linera-protocol repo * Use updated APIs * Integrate MetaMask example * Update hosted fungible demo to use embedded signer * Fix CI * Adapt to work with latest version of linera-web * Update git submodule to point at main. Workspace deps * Update to work w/ latest main branch * Pull in faucet url and app IDs via env vars * Make base demos use the PrivateKey signers * Add separate counter with MetaMask integration * Remove imported Buffer * COmmit newlines at the end of the files * Initialize a Signer in extension example * Add section to README about env vars * Replace magic-nix-cache with flakehub-cache * Remove extension from workspace * Move linera-protocol out of the workspace * See if this helps * Update submodule * Move linera-protocol back to workspace member * Call install --frozen-lockfile in root package.json * Update to use main linera-protocol * Do not install deps in pnpm build for hosted-counter eexample * Generate new privkey for every app load
1 parent 5561f91 commit 9cb72b3

File tree

21 files changed

+21572
-879
lines changed

21 files changed

+21572
-879
lines changed

‎.env‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
VITE_FAUCET_URL=https://faucet.testnet-babbage.linera.net
2+
VITE_COUNTER_APP_ID=
3+
VITE_FUNGIBLE_APP_ID=

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ jobs:
3939
with:
4040
submodules: true
4141
- uses: cachix/install-nix-action@v26
42-
- uses: DeterminateSystems/magic-nix-cache-action@main
42+
- uses: DeterminateSystems/flakehub-cache-action@main
4343
- name: Run all CI tasks
4444
run: |
4545
nix develop '.?submodules=1' --override-input linera-protocol ./linera-protocol --command pnpm run ci

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,12 @@ For development, you can also use `pnpm build --watch` to
6969
automatically rebuild the extension on change. Changes to the client
7070
worker will not propagate to the extension, but once you run
7171
`wasm-pack build` they will be picked up.
72+
73+
74+
## Examples
75+
76+
In `/examples` directory there are a couple of examples that can be run
77+
to test the Linera network. The faucet address and application addresses
78+
are controlled via ENV variables. Those can be set in `.env` file in the root
79+
of the project or you can overwrite them in `.env.production.local` -
80+
a file ignored by git and so needs to be created locally.

‎examples/hosted-counter-metamask/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Linera | Counter</title>
7+
<link href="/style.css" rel="stylesheet">
8+
<link href="/icon.png" rel="icon">
9+
<style type="text/css">
10+
.ui {
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
15+
.ui .counter {
16+
font-size: 1.25rem;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div class="container">
22+
<div class="content">
23+
<div class="description">
24+
<h1>Counter</h1>
25+
<p>
26+
This is a simple application tracking some on-chain state that remembers the value of an integer counter.
27+
</p>
28+
<p>
29+
Click the button to submit a block that increments the counter, and watch your local node's state update in real-time.
30+
</p>
31+
</div>
32+
<div class="ui">
33+
<p class="counter">Clicks: <span id="count">0</span></p>
34+
<button id="increment-btn">Click me!</button>
35+
</div>
36+
</div>
37+
38+
<div class="logs">
39+
<h2>Connected as <code id="owner" class="hex">requesting owner…</code> </h2>
40+
<h2>Chain history for <code id="chain-id" class="hex">requesting chain…</code></h2>
41+
<ul id="logs">
42+
<template>
43+
<li>
44+
<span class="height"></span>: <span class="code hash"></span>
45+
</li>
46+
</template>
47+
</div>
48+
</div>
49+
</div>
50+
51+
<script type="importmap">
52+
{
53+
"imports": {
54+
"@linera/client": "./js/@linera/client/linera_web.js",
55+
"@linera/signer": "./js/@linera/signer/index.js"
56+
}
57+
}
58+
</script>
59+
60+
<script type="module">
61+
import * as linera from '@linera/client';
62+
import * as linera_signer from '@linera/signer';
63+
64+
const COUNTER_APP_ID = import.meta.env.VITE_COUNTER_APP_ID;
65+
66+
async function run() {
67+
await linera.default();
68+
const faucet = await new linera.Faucet(import.meta.env.VITE_FAUCET_URL);
69+
const signer = await new linera_signer.MetaMaskEIP191Signer();
70+
const wallet = await faucet.createWallet();
71+
const owner = await signer.address();
72+
document.getElementById('owner').innerText = owner;
73+
document.getElementById('chain-id').innerText = await faucet.claimChain(wallet, owner);
74+
const client = await new linera.Client(wallet, signer);
75+
const counter = await client.frontend().application(COUNTER_APP_ID);
76+
const logs = document.getElementById('logs');
77+
const incrementButton = document.getElementById('increment-btn');
78+
const blockTemplate = document.getElementById('block-template');
79+
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+
}
86+
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+
}
92+
93+
updateCount();
94+
client.onNotification(notification => {
95+
let newBlock = notification.reason.NewBlock;
96+
if (!newBlock) return;
97+
addLogEntry(newBlock);
98+
updateCount();
99+
});
100+
101+
incrementButton.addEventListener('click', () => {
102+
counter.query('{ "query": "mutation { increment(value: 1) }" }');
103+
});
104+
}
105+
106+
if (document.readyState === 'loading')
107+
document.addEventListener('DOMContentLoaded', run);
108+
else
109+
run();
110+
</script>
111+
</body>
112+
</html>

‎examples/hosted-counter-metamask/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@linera/examples/hosted-counter-metamask",
3+
"private": true,
4+
"author": "Linera <[email protected]>",
5+
"license": "Apache-2.0",
6+
"version": "0.0.0",
7+
"type": "module",
8+
"scripts": {
9+
"dev": "vite",
10+
"build": "vite build",
11+
"preview": "vite preview",
12+
"ci": "pnpm build"
13+
},
14+
"dependencies": {
15+
"@linera/client": "workspace:*",
16+
"@linera/signer": "workspace:*"
17+
},
18+
"devDependencies": {
19+
"vite": "^5.4.11"
20+
}
21+
}

‎examples/hosted-counter-metamask/public/arrow.svg‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../assets/arrow.svg

‎examples/hosted-counter-metamask/public/icon.png‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../assets/icon.png

‎examples/hosted-counter-metamask/public/js/@linera/client‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../../node_modules/@linera/client/dist

‎examples/hosted-counter-metamask/public/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../assets/style.css

‎examples/hosted-counter-metamask/vite.config.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { defineConfig } from 'vite';
2+
3+
// https://vitejs.dev/config/
4+
export default defineConfig({
5+
base: '/hosted/counter/',
6+
server: {
7+
headers: {
8+
'Cross-Origin-Embedder-Policy': 'require-corp',
9+
'Cross-Origin-Opener-Policy': 'same-origin',
10+
},
11+
},
12+
build: {
13+
rollupOptions: {
14+
external: ['@linera/client'],
15+
},
16+
},
17+
esbuild: {
18+
supported: {
19+
'top-level-await': true,
20+
},
21+
},
22+
optimizeDeps: {
23+
exclude: [
24+
'@linera/client',
25+
],
26+
},
27+
})

0 commit comments

Comments
 (0)