Skip to content

Commit 79c7b33

Browse files
TweyTwey
authored
Move Web examples into linera-protocol (#4383)
## Motivation We'd like to develop and deploy the Web examples along with `linera-protocol`. ## Proposal Copy the files from linera-io/linera-web@c92f521, replacing the existing GraphQL-based frontends for the `counter` and `fungible` apps. It would be nice to merge them using `git subtree` or similar, but since we forbid merge commits in `main` there's no alternative but to destroy the history. ## Test Plan Tested locally, a bit. We should add some Selenium tests going forward. ## Release Plan - Nothing to do / These changes follow the usual release cycle. ## Links - [reviewer checklist](https://github.com/linera-io/linera-protocol/blob/main/CONTRIBUTING.md#reviewer-checklist)
1 parent 57014c1 commit 79c7b33

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+4659
-17379
lines changed

‎.github/workflows/test-readmes.yml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ on:
66
pull_request:
77
merge_group:
88
workflow_dispatch:
9-
9+
1010

1111
# This allows a subsequently queued workflow run to interrupt previous runs on pull requests
1212
concurrency:
@@ -40,11 +40,16 @@ jobs:
4040
timeout-minutes: 40
4141
steps:
4242
- uses: actions/checkout@v4
43+
- uses: pnpm/action-setup@v4
44+
with:
45+
version: 10.11.0
4346
- uses: actions-rust-lang/setup-rust-toolchain@v1
44-
- name: Install Protoc
45-
uses: arduino/setup-protoc@v3
47+
- uses: arduino/setup-protoc@v3
4648
with:
4749
repo-token: ${{ secrets.GITHUB_TOKEN }}
50+
- uses: jetli/[email protected]
51+
with:
52+
version: latest
4853
- name: Build example applications
4954
run: |
5055
cd examples

‎examples/assets/arrow.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎examples/assets/icon.png‎

983 Bytes
Loading

‎examples/assets/style.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Epilogue:ital,wght@0,500;1,500&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
html {
10+
height: 100%;
11+
}
12+
13+
body {
14+
font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
15+
letter-spacing: -.02em;
16+
background-color: #f3eee2;
17+
height: 100%;
18+
}
19+
20+
.container {
21+
width: 100%;
22+
height: 100%;
23+
padding: 0.5rem;
24+
display: grid;
25+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
26+
}
27+
28+
.content {
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: center;
32+
padding: 2rem;
33+
}
34+
35+
h1 {
36+
font-size: 5rem;
37+
font-family: 'Epilogue', serif;
38+
font-weight: 500;
39+
line-height: 1.2;
40+
width: 100%;
41+
}
42+
43+
p {
44+
margin: 1rem 0;
45+
max-width: 40rem;
46+
}
47+
48+
em {
49+
font-style: normal;
50+
font-weight: bold;
51+
}
52+
53+
button, input[type="submit"] {
54+
background-color: rgb(222, 42, 2);
55+
color: #f3eee2;
56+
border: none;
57+
padding: 0.75rem 1.5rem;
58+
border-radius: 12px;
59+
font-size: 1rem;
60+
font-weight: 500;
61+
cursor: pointer;
62+
transition: background-color 0.2s ease;
63+
font-family: 'Poppins', sans-serif;
64+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
65+
width: fit-content;
66+
height: fit-content;
67+
}
68+
69+
button[disabled], input[type="submit"][disabled] {
70+
background-color: gray;
71+
}
72+
73+
input[type="text"] {
74+
padding: 0.3rem;
75+
}
76+
77+
button:hover {
78+
background-color: #d62f1a;
79+
}
80+
81+
.logs {
82+
background-color: rgb(222, 42, 2);
83+
color: #f3eee2;
84+
border-radius: 24px;
85+
display: flex;
86+
flex-direction: column;
87+
min-height: 20rem;
88+
padding: 1.5rem;
89+
overflow: hidden;
90+
}
91+
92+
.logs>* {
93+
white-space: nowrap;
94+
}
95+
96+
#logs li {
97+
font-family: monospace;
98+
font-size: 0.9rem;
99+
padding: 0.5rem;
100+
overflow: hidden;
101+
}
102+
103+
#logs li .height {
104+
min-width: 3em;
105+
}
106+
107+
.hex {
108+
font-family: monospace;
109+
background-color: rgba(255, 255, 255, 0.1);
110+
}
111+
112+
h1::before {
113+
display: block;
114+
width: 60px;
115+
height: 79px;
116+
background-image: url(./arrow.svg);
117+
content: '';
118+
animation: 1s infinite alternate breathe ease-out;
119+
padding-bottom: 0.1em;
120+
}
121+
122+
input {
123+
background-color: #fffef2;
124+
border-style: solid;
125+
}
126+
127+
@keyframes breathe {
128+
from {
129+
scale: 100%;
130+
}
131+
132+
to {
133+
scale: 110%;
134+
}
135+
}

‎examples/counter/README.md‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ For example, if the contract was initialized with 1, querying the contract would
1212
`increment` it by 3, we will have to perform an operation with the parameter being 3. Now querying the
1313
application would give us 4 (1+3 = 4).
1414

15-
## Usage
16-
17-
### Setting Up
15+
## Setup and Deployment
1816

1917
Before getting started, make sure that the binary tools `linera*` corresponding to
2018
your version of `linera-sdk` are in your PATH. For scripting purposes, we also assume
@@ -24,19 +22,19 @@ From the root of Linera repository, this can be achieved as follows:
2422

2523
```bash
2624
export PATH="$PWD/target/debug:$PATH"
27-
source /dev/stdin <<<"$(linera net helper 2>/dev/null)"
25+
eval "$(linera net helper 2>/dev/null)"
2826
```
2927

3028
Next, start the local Linera network and run a faucet:
3129

3230
```bash
33-
FAUCET_PORT=8079
34-
FAUCET_URL=http://localhost:$FAUCET_PORT
35-
linera_spawn linera net up --with-faucet --faucet-port $FAUCET_PORT
31+
LINERA_FAUCET_PORT=8079
32+
LINERA_FAUCET_URL=http://localhost:$LINERA_FAUCET_PORT
33+
linera_spawn linera net up --with-faucet --faucet-port $LINERA_FAUCET_PORT
3634

3735
# If you're using a testnet, run this instead:
3836
# LINERA_TMP_DIR=$(mktemp -d)
39-
# FAUCET_URL=https://faucet.testnet-XXX.linera.net # for some value XXX
37+
# export LINERA_FAUCET_URL=https://faucet.testnet-XXX.linera.net # for some value XXX
4038
```
4139

4240
Create the user wallet and add chains to it:
@@ -46,75 +44,77 @@ export LINERA_WALLET="$LINERA_TMP_DIR/wallet.json"
4644
export LINERA_KEYSTORE="$LINERA_TMP_DIR/keystore.json"
4745
export LINERA_STORAGE="rocksdb:$LINERA_TMP_DIR/client.db"
4846

49-
linera wallet init --faucet $FAUCET_URL
47+
linera wallet init --faucet $LINERA_FAUCET_URL
5048

51-
INFO_1=($(linera wallet request-chain --faucet $FAUCET_URL))
52-
CHAIN_1="${INFO_1[0]}"
53-
OWNER_1="${INFO_1[1]}"
49+
INFO=($(linera wallet request-chain --faucet $LINERA_FAUCET_URL))
50+
CHAIN="${INFO[0]}"
51+
OWNER="${INFO[1]}"
5452
```
5553

5654
Now, compile the `counter` application WebAssembly binaries, publish and create an application instance.
5755

5856
```bash
59-
(cd examples/counter && cargo build --release --target wasm32-unknown-unknown)
57+
cd examples/counter
58+
cargo build --release --target wasm32-unknown-unknown
6059

61-
APPLICATION_ID=$(linera publish-and-create \
62-
examples/target/wasm32-unknown-unknown/release/counter_{contract,service}.wasm \
60+
LINERA_APPLICATION_ID=$(linera publish-and-create \
61+
../target/wasm32-unknown-unknown/release/counter_{contract,service}.wasm \
6362
--json-argument "1")
6463
```
6564

66-
We have saved the `APPLICATION_ID` as it will be useful later.
65+
We have saved the `LINERA_APPLICATION_ID` as it will be useful later.
66+
67+
## Connecting with the Web Frontend
68+
69+
If you install the dependencies for the Web frontend and export the
70+
necessary variables you can run a local development server using Vite:
71+
72+
```bash,ignore
73+
export LINERA_APPLICATION_ID LINERA_FAUCET_URL
74+
pnpm install
75+
pnpm dev
76+
```
77+
78+
This will start a server and print its address; access that URL to use
79+
the application frontend.
6780

68-
### Using the Counter Application
81+
Alternatively, there is a frontend in `metamask` that signs
82+
transactions using the user's MetaMask wallet; it can be accessed the
83+
same way.
84+
85+
## Connecting with the GraphQL Client
86+
87+
Alternatively, you can connect to the application using the GraphQL
88+
client. This is useful for inspecting and debugging the backend APIs.
6989

7090
First, a node service for the current wallet has to be started:
7191

7292
```bash
7393
PORT=8080
7494
linera service --port $PORT &
95+
echo "http://localhost:8080/chains/$CHAIN/applications/$LINERA_APPLICATION_ID"
7596
```
7697

77-
#### Using GraphiQL
98+
Clicking the printed URL will take you to a
99+
[GraphiQL](https://www.gatsbyjs.com/docs/how-to/querying-data/running-queries-with-graphiql/)
100+
environment connected to your app.
78101

79-
Type each of these in the GraphiQL interface and substitute the env variables with their actual values that we've defined above.
102+
To get the current value of `counter`, you can run the query:
80103

81-
- Navigate to the URL you get by running `echo "http://localhost:8080/chains/$CHAIN_1/applications/$APPLICATION_ID"`.
82-
- To get the current value of `counter`, run the query:
83-
```gql,uri=http://localhost:8080/chains/$CHAIN_1/applications/$APPLICATION_ID
104+
```gql,uri=http://localhost:8080/chains/$CHAIN/applications/$LINERA_APPLICATION_ID
84105
query {
85106
value
86107
}
87108
```
88-
- To increase the value of the counter by 3, perform the `increment` operation.
89-
```gql,uri=http://localhost:8080/chains/$CHAIN_1/applications/$APPLICATION_ID
109+
110+
To increase the value of the counter, you can run the `increment`
111+
mutation. Note that the result of a mutation is the hash of the
112+
resulting block, if any.
113+
114+
```gql,uri=http://localhost:8080/chains/$CHAIN/applications/$LINERA_APPLICATION_ID
90115
mutation Increment {
91116
increment(field0: 3)
92117
}
93118
```
94-
- Running the query again would yield `4`.
95-
96119

97-
#### Using web frontend
98-
99-
Installing and starting the web server:
100-
101-
```bash
102-
cd examples/counter/web-frontend
103-
npm install --no-save
104-
105-
# Start the server but do not open the web page right away.
106-
BROWSER=none npm start &
107-
```
108-
109-
Web UIs for specific accounts can be opened by navigating URLs of the form
110-
`http://localhost:3000/$CHAIN_1?app=$APPLICATION_ID&owner=$OWNER_1&port=$PORT` where
111-
- the path is the ID of the chain where the account is located.
112-
- the `app` argument is the token application ID obtained when creating the token.
113-
- `owner` is the address of the chosen user account (owner must have permissions to create blocks in the given chain).
114-
- `port` is the port of the wallet service (the wallet must know the secret key of `owner`).
115-
116-
The following command will print the URL of the web UI:
117-
118-
```bash
119-
echo "http://localhost:3000/$CHAIN_1?app=$APPLICATION_ID&owner=$OWNER_1&port=$PORT"
120-
```
120+
If you run the query again, you'll now see a value of 4.

0 commit comments

Comments
 (0)