Skip to content

Commit cf64acb

Browse files
dannywillemsdannywillems
committed
Website/frontend: add section for frontend components
1 parent 08d901c commit cf64acb

19 files changed

+646
-71
lines changed

‎.github/workflows/test-docs-scripts-frontend.yaml‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
name: Test Documentation Scripts - Frontend
2+
3+
# Test locally with:
4+
# ```bash
5+
# # Ubuntu 22.04 (recommended)
6+
# gh extension exec act \
7+
# --workflows .github/workflows/test-docs-scripts-frontend.yaml \
8+
# --matrix os:ubuntu-22.04
9+
#
10+
# # Ubuntu 24.04 (requires platform mapping)
11+
# gh extension exec act \
12+
# --workflows .github/workflows/test-docs-scripts-frontend.yaml \
13+
# --matrix os:ubuntu-24.04 \
14+
# -P ubuntu-24.04=catthehacker/ubuntu:act-24.04
15+
# ```
16+
17+
on:
18+
push:
19+
20+
jobs:
21+
test-frontend-scripts:
22+
runs-on: ${{ matrix.os }}
23+
strategy:
24+
matrix:
25+
os: [ubuntu-22.04, ubuntu-24.04, macos-latest]
26+
27+
steps:
28+
- name: Checkout repository
29+
uses: actions/checkout@v4
30+
31+
- name: Make scripts executable
32+
run: |
33+
chmod +x website/docs/developers/scripts/frontend/*.sh
34+
35+
- name: Install Node.js on Linux
36+
if: runner.os == 'Linux'
37+
run: |
38+
bash website/docs/developers/scripts/frontend/install-nodejs-linux.sh
39+
# Set up nvm environment for future steps
40+
echo "NVM_DIR=$HOME/.nvm" >> $GITHUB_ENV
41+
42+
- name: Install Node.js on macOS
43+
if: runner.os == 'macOS'
44+
run: |
45+
bash website/docs/developers/scripts/frontend/install-nodejs-macos.sh
46+
47+
- name: Install Angular CLI using documentation script
48+
run: |
49+
# Source nvm if available (Linux)
50+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
51+
\. "$NVM_DIR/nvm.sh"
52+
fi
53+
bash website/docs/developers/scripts/frontend/install-angular-cli.sh
54+
55+
- name: Install gtimeout on macOS
56+
if: runner.os == 'macOS'
57+
run: |
58+
brew install coreutils
59+
# Create symlink for timeout command
60+
sudo ln -sf /usr/local/bin/gtimeout /usr/local/bin/timeout
61+
62+
- name: Test install dependencies script
63+
run: |
64+
# Source nvm if available (Linux)
65+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
66+
\. "$NVM_DIR/nvm.sh"
67+
fi
68+
bash website/docs/developers/scripts/frontend/install-dependencies.sh
69+
70+
- name: Test build development script
71+
run: |
72+
# Source nvm if available (Linux)
73+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
74+
\. "$NVM_DIR/nvm.sh"
75+
fi
76+
bash website/docs/developers/scripts/frontend/build-development.sh
77+
78+
- name: Test build production script
79+
run: |
80+
# Source nvm if available (Linux)
81+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
82+
\. "$NVM_DIR/nvm.sh"
83+
fi
84+
bash website/docs/developers/scripts/frontend/build-production.sh
85+
86+
- name: Test format code script
87+
run: |
88+
# Source nvm if available (Linux)
89+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
90+
\. "$NVM_DIR/nvm.sh"
91+
fi
92+
bash website/docs/developers/scripts/frontend/format-code.sh
93+
94+
- name: Prepare for Cypress tests (Ubuntu 22.04)
95+
if: matrix.os == 'ubuntu-22.04'
96+
run: |
97+
sudo apt-get update
98+
sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
99+
libnss3 libxss1 libasound2 libxtst6 xauth xvfb
100+
101+
- name: Prepare for Cypress tests (Ubuntu 24.04)
102+
if: matrix.os == 'ubuntu-24.04'
103+
run: |
104+
sudo apt-get update
105+
sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
106+
libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb

‎Makefile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ lint-bash: ## Check all shell scripts using shellcheck
224224
-not -path "*/target/*" \
225225
-not -path "*/node_modules/*" \
226226
-not -path "*/website/docs/developers/scripts/setup/*" \
227+
-not -path "*/website/docs/developers/scripts/frontend/*" \
227228
-print0 | xargs -0 shellcheck
228229
@echo "Shellcheck completed successfully!"
229230

‎frontend/Makefile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ deploy: ## Deploy the application
6666

6767
.PHONY: deploy-leaderboard
6868
deploy-leaderboard: ## Deploy the leaderboard application
69+
$(MAKE) prebuild
70+
$(MAKE) build-prod
71+
cp dist/frontend/browser/assets/environments/leaderboard.js \
72+
dist/frontend/browser/assets/environments/env.js
73+
firebase deploy
74+
75+
.PHONY: deploy-leaderboard-sentry
76+
deploy-leaderboard-sentry: ## Deploy the leaderboard application with Sentry sourcemaps
6977
$(MAKE) prebuild
7078
$(MAKE) build-prod-sentry
7179
cp dist/frontend/browser/assets/environments/leaderboard.js \

‎frontend/README.md‎

Lines changed: 6 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,14 @@
11
# Openmina Frontend
22

3-
This is a simple Angular application that will help you to see the behaviour of
4-
your local rust based mina node.
3+
The frontend documentation has been moved to the main project website.
54

6-
## Prerequisites
5+
Please see: [Frontend Documentation](../website/docs/developers/frontend.mdx)
76

8-
### 1. Node.js v23.1.0
9-
10-
#### MacOS
11-
12-
```bash
13-
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
14-
brew install node@23.1.0
15-
```
16-
17-
#### Linux
18-
19-
```bash
20-
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
21-
source ~/.bashrc
22-
nvm install 23.1.0
23-
```
24-
25-
#### Windows
26-
27-
Download [Node.js v23.1.0](https://nodejs.org/) from the official website, open
28-
the installer and follow the prompts to complete the installation.
29-
30-
### 2. Angular CLI v19.2.14
31-
32-
```bash
33-
npm install -g @angular/cli@19.2.14
34-
```
35-
36-
### 3. Installation
37-
38-
Open a terminal and navigate to this project's root directory
39-
40-
```bash
41-
cd PROJECT_LOCATION/openmina/frontend
42-
```
43-
44-
Install the dependencies
45-
46-
```bash
47-
npm install
48-
```
49-
50-
## Run the application
51-
52-
```bash
53-
npm start
54-
```
55-
56-
# Using O1JS wrapper
57-
58-
as of now, o1js is not prepared to work with Angular, therefore we need to use
59-
the wrapper that is provided in the `src/assets/o1js` folder. This wrapper is a
60-
simple javascript webpack based application that will allow us to use the o1js
61-
library in our Angular application.
62-
63-
How to use it:
64-
65-
1. Open a terminal and navigate to the `src/assets/o1js` folder
66-
2. Install the dependencies
67-
68-
```bash
69-
npm install
70-
```
71-
72-
3. Build the wrapper
7+
To view the documentation locally:
738

749
```bash
75-
npm run build-o1jswrapper
10+
cd ../website
11+
make docs-serve
7612
```
7713

78-
4. That's it. Now you can use your code from o1js-wrapper inside the Angular
79-
application by using `BenchmarksWalletsZkService => o1jsInterface`
14+
Then navigate to http://localhost:3000/docs/developers/frontend

‎website/docs/developers/frontend/index.mdx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Frontend Applications
3+
description: Web-based interfaces for the Mina Rust node ecosystem
4+
sidebar_position: 1
5+
---
6+
7+
import CodeBlock from "@theme/CodeBlock";
8+
import Tabs from "@theme/Tabs";
9+
import TabItem from "@theme/TabItem";
10+
import InstallNodejsLinux from "!!raw-loader!../scripts/frontend/install-nodejs-linux.sh";
11+
import InstallNodejsMacos from "!!raw-loader!../scripts/frontend/install-nodejs-macos.sh";
12+
import InstallAngularCli from "!!raw-loader!../scripts/frontend/install-angular-cli.sh";
13+
14+
# Frontend Applications
15+
16+
The Mina Rust node ecosystem includes several web-based frontend applications,
17+
each serving a specific purpose in the network.
18+
19+
## Components
20+
21+
### [Node Dashboard](./node-dashboard)
22+
23+
A comprehensive web interface for monitoring and interacting with your Mina Rust
24+
node. View real-time blockchain state, network activity, and node metrics
25+
through an intuitive dashboard.
26+
27+
### [Leaderboard](./leaderboard)
28+
29+
Track community participation in testnets with a competitive leaderboard system.
30+
Previously used to monitor and rank testnet participants based on their
31+
contributions to network stability and block production.
32+
33+
### [WebNode](./webnode)
34+
35+
Run a Mina node directly in your web browser using WebAssembly. This
36+
experimental feature enables block production without installing native
37+
software, pushing the boundaries of decentralized infrastructure.
38+
39+
## Prerequisites
40+
41+
All frontend applications are built with Angular and require Node.js to be
42+
installed.
43+
44+
<!-- prettier-ignore-start -->
45+
46+
:::info Platform Compatibility
47+
48+
These instructions are tested and compatible with:
49+
50+
- **Ubuntu**: 22.04, 24.04
51+
- **macOS**: macOS-13, macOS-14, macOS-latest
52+
53+
:::
54+
55+
<!-- prettier-ignore-stop -->
56+
57+
### Install Node.js
58+
59+
<Tabs groupId="operating-systems">
60+
<TabItem value="linux" label="Linux">
61+
62+
<CodeBlock language="bash" title="scripts/frontend/install-nodejs-linux.sh">
63+
{InstallNodejsLinux}
64+
</CodeBlock>
65+
66+
</TabItem>
67+
<TabItem value="macos" label="macOS">
68+
69+
<CodeBlock language="bash" title="scripts/frontend/install-nodejs-macos.sh">
70+
{InstallNodejsMacos}
71+
</CodeBlock>
72+
73+
</TabItem>
74+
</Tabs>
75+
76+
### Install Angular CLI
77+
78+
<CodeBlock language="bash" title="scripts/frontend/install-angular-cli.sh">
79+
{InstallAngularCli}
80+
</CodeBlock>
81+
82+
## Next Steps
83+
84+
With Node.js and Angular CLI installed, you're ready to build and run any of the
85+
frontend applications. Select a component above to learn about its specific
86+
features and configuration.

‎website/docs/developers/frontend/leaderboard.mdx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Leaderboard
3+
description: Community participation tracking for Mina Rust node testnets
4+
sidebar_position: 3
5+
---
6+
7+
import CodeBlock from "@theme/CodeBlock";
8+
9+
# Leaderboard
10+
11+
The Leaderboard is a specialized frontend application designed to track and rank
12+
community participation in Mina Rust node testnets. It provides real-time
13+
visibility into testnet contributions, encouraging healthy competition among
14+
participants.
15+
16+
## Overview
17+
18+
The Leaderboard system was developed to monitor testnet participation metrics
19+
and provide transparent rankings of community members based on their
20+
contributions to network stability, block production, and overall testnet
21+
health.
22+
23+
## Configuration
24+
25+
### Building for Leaderboard
26+
27+
Build the Leaderboard-specific version:
28+
29+
```bash
30+
cd frontend
31+
32+
# Build with leaderboard configuration
33+
make build-prod
34+
35+
# Copy leaderboard environment
36+
cp dist/frontend/browser/assets/environments/leaderboard.js \
37+
dist/frontend/browser/assets/environments/env.js
38+
```
39+
40+
## Deployment
41+
42+
### Firebase Deployment
43+
44+
<!-- prettier-ignore-start -->
45+
46+
:::caution Outdated Configuration
47+
48+
The Firebase deployment configuration may be outdated. Please verify the current
49+
deployment targets and update the configuration as needed before deploying to
50+
production.
51+
52+
:::
53+
54+
<!-- prettier-ignore-stop -->
55+
56+
Deploy the Leaderboard to Firebase hosting:
57+
58+
```bash
59+
# Deploy leaderboard variant
60+
make deploy-leaderboard
61+
```
62+
63+
This command will:
64+
65+
1. Run prebuild to update version
66+
2. Build production assets with Sentry integration
67+
3. Configure leaderboard-specific environment
68+
4. Deploy to Firebase hosting
69+
70+
### Standalone Deployment
71+
72+
For custom hosting solutions:
73+
74+
```bash
75+
# Build the application
76+
make build-prod
77+
78+
# Configure for leaderboard
79+
cp dist/frontend/browser/assets/environments/leaderboard.js \
80+
dist/frontend/browser/assets/environments/env.js
81+
82+
# Serve the static files
83+
npx http-server dist/frontend/browser -p 8080
84+
```

0 commit comments

Comments
 (0)