Add simple web hosted client

2024-12-13 19:06:26 +00:00 · 2024-01-11 13:17:14 +00:00 · 2024-01-11 13:17:14 +00:00 · e5cb8d8308
commit e5cb8d8308
parent fe7a806d9d
11 changed files with 339 additions and 15 deletions
--- a/.github/workflows/frontend-build.yml
+++ b/.github/workflows/frontend-build.yml
@ -53,22 +53,30 @@ jobs:
      uses: actions/upload-artifact@v4
      with:
        name: web-main-js
-        path: frontend/static/frontend/main.js
-    - name: 'Archive Web Basic SelfhostedBuild Results'
+        path: |
+          frontend/static/frontend/*main.js
+          frontend/static/frontend/*.wasm
+    - name: 'Archive Web Basic Selfhosted Build Results'
      uses: actions/upload-artifact@v4
      with:
        name: web-basic-selfhosted-js
-        path: frontend/static/frontend/basic.selfhosted.js
+        path: |
+          frontend/static/frontend/*basic.selfhosted.js
+          frontend/static/frontend/*.wasm
    - name: 'Archive Web PRO Build Results'
      uses: actions/upload-artifact@v4
      with:
        name: web-pro-js
-        path: frontend/static/frontend/pro.js
+        path: |
+          frontend/static/frontend/*pro.js
+          frontend/static/frontend/*.wasm
    - name: 'Archive Web PRO SelhostedBuild Results'
      uses: actions/upload-artifact@v4
      with:
        name: web-pro-selfhosted-js
-        path: frontend/static/frontend/pro.selfhosted.js
+        path: |
+          frontend/static/frontend/*pro.selfhosted.js
+          frontend/static/frontend/*.wasm
    - name: 'Archive Mobile Build Results'
      uses: actions/upload-artifact@v4
      with:
@ -83,9 +91,15 @@ jobs:
      with:
        workflow: 'Docker: Coordinator'
        token: ${{ secrets.PERSONAL_TOKEN }}
-    - name: 'Invoke Client App Build CI/CD workflow'
+    - name: 'Invoke Selfhosted Client App Build CI/CD workflow'
      if: inputs.semver == ''
      uses: benc-uk/workflow-dispatch@v121
      with:
-        workflow: 'Docker: Client'
+        workflow: 'Docker: Selfhosted Client'
+        token: ${{ secrets.PERSONAL_TOKEN }}
+    - name: 'Invoke Web Client App Build CI/CD workflow'
+      if: inputs.semver == ''
+      uses: benc-uk/workflow-dispatch@v121
+      with:
+        workflow: 'Docker: Web Client'
        token: ${{ secrets.PERSONAL_TOKEN }}
--- a/.github/workflows/js-linter.yml
+++ b/.github/workflows/js-linter.yml
@ -8,7 +8,7 @@ on:
      - main
    paths:
      - frontend
-  pull_request:
+  pull_request_target:
    branches:
      - main
    paths:
@ -41,7 +41,5 @@ jobs:
        with:
          prettier: true
          prettier_dir: frontend
-
-          ## Disabled due to error
-          # eslint: true
-          # eslint_dir: frontend
+          eslint: true
+          eslint_dir: frontend
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -55,8 +55,15 @@ jobs:
    with:
      semver: ${{ needs.check-versions.outputs.semver }}

-  client-image:
-    uses: RoboSats/robosats/.github/workflows/client-image.yml@main
+  selfhosted-client-image:
+    uses: RoboSats/robosats/.github/workflows/selfhosted-client-image.yml@main
+    needs: frontend-build
+    secrets: inherit
+    with:
+      semver: ${{ needs.check-versions.outputs.semver }}
+
+  web-client-image:
+    uses: RoboSats/robosats/.github/workflows/web-client-image.yml@main
    needs: frontend-build
    secrets: inherit
    with:
--- a/.github/workflows/selfhosted-client-image.yml
+++ b/.github/workflows/selfhosted-client-image.yml
@ -1,4 +1,4 @@
-name: "Docker: Client"
+name: 'Docker: Selfhosted Client'

 on:
  workflow_dispatch:
--- a/.github/workflows/web-client-image.yml
+++ b/.github/workflows/web-client-image.yml
@ -0,0 +1,94 @@
+name: 'Docker: Web Client'
+
+on:
+  workflow_dispatch:
+  workflow_call:
+    inputs:
+      semver:
+        required: true
+        type: string
+  push:
+    branches: [ "main" ]
+    paths: ["frontend", "web"]
+  pull_request:
+    branches: [ "main" ]
+    paths: ["frontend", "web"]
+
+jobs:
+  push_to_registry:
+    name: 'Push Docker image to Docker Hub'
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: 'Copy Static' # Needed since Github actions does not support symlinks
+      run: cp -r frontend/static web/static
+
+    - name: 'Download main.js Artifact'
+      if: inputs.semver == ''  # Only if workflow fired from frontend-build.yml
+      uses: dawidd6/action-download-artifact@v3
+      with:
+        workflow: frontend-build.yml
+        workflow_conclusion: success
+        name: web-main-js
+        path: nodeapp/static/frontend/
+
+    - name: 'Download main.js Artifact for a release'
+      if: inputs.semver != ''  # Only if fired as job in release.yml
+      uses: actions/download-artifact@v4
+      with:
+        name: web-main-js
+        path: nodeapp/static/frontend/
+
+    - name: 'Download pro.js Artifact'
+      if: inputs.semver == ''  # Only if workflow fired from frontend-build.yml
+      uses: dawidd6/action-download-artifact@v3
+      with:
+        workflow: frontend-build.yml
+        workflow_conclusion: success
+        name: web-pro-js
+        path: nodeapp/static/frontend/
+
+    - name: 'Download pro.js Artifact for a release'
+      if: inputs.semver != ''  # Only if fired as job in release.yml
+      uses: actions/download-artifact@v4
+      with:
+        name: web-pro-js
+        path: nodeapp/static/frontend/
+
+    - name: 'Log in to Docker Hub'
+      uses: docker/login-action@v3
+      with:
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+
+    - name: 'Extract metadata (tags, labels) for Docker'
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: recksato/robosats-web
+        tags: |
+            type=ref,event=pr
+            type=ref,event=tag
+            type=semver,pattern={{major}}.{{minor}}
+            type=sha,enable=true,priority=100,prefix=,suffix=,format=short
+            type=raw,value=latest
+
+    - name: 'Get Commit Hash'
+      id: commit
+      uses: pr-mpt/actions-commit-hash@v3
+
+    - name: 'Set up QEMU'
+      uses: docker/setup-qemu-action@v3
+
+    - name: 'Set up Docker Buildx'
+      uses: docker/setup-buildx-action@v3
+
+    - name: 'Build and push Docker image'
+      uses: docker/build-push-action@v5
+      with:
+        context: ./nodeapp
+        platforms: linux/amd64,linux/arm64
+        push: true
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}
--- a/web/Dockerfile
+++ b/web/Dockerfile
@ -0,0 +1,24 @@
+FROM alpine:3.18.0
+
+LABEL maintainer="Reckless_Satoshi https://github.com/reckless-satoshi"
+
+# Needs a copy or symlink of /frontend/static in /nodeapp/static
+# Github client release workflow copies /frontend/static here
+
+RUN mkdir -p /usr/src/robosats
+WORKDIR /usr/src/robosats
+
+RUN set -x \
+    && addgroup -g 101 -S nginx \
+    && adduser -S -D -H -u 101 -h /var/cache/nginx -s /sbin/nologin -G nginx -g nginx nginx
+
+COPY . .
+COPY ./nginx.conf /etc/nginx/nginx.conf
+
+RUN apk -U --no-cache upgrade \
+    && apk --no-cache add nginx
+
+EXPOSE 80
+HEALTHCHECK CMD curl --fail http://localhost:80 || exit 1
+
+CMD ["sh", "run.sh"]
--- a/web/basic.html
+++ b/web/basic.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <link rel="shortcut icon" href="/static/assets/images/favicon-96x96.png" />
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon-192x192.png" sizes="192x192">
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="A simple and private way to exchange bitcoin for national currencies. Robosats simplifies the peer-to-peer user experience and uses lightning hold invoices to minimize custody and trust requirements. No user registration required.">
+
+    <title>RoboSats - Simple and Private Bitcoin Exchange</title>
+
+    <link rel="stylesheet" href="/static/css/fonts.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/loader.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/leaflet.css"/>
+  </head>
+  <body>
+    <noscript>
+      <div>
+        This site requires JavaScript. This message is only visible if you have it disabled. <br/><br/>
+        If you are using TOR browser set the "Security Level" to "Standard". If you keep seeing this message clear cache and storage of TOR browser app and retry.<br/><br/>
+        If the problem persists, ask for support in the RoboSats telegram group<a href="https://t.me/robosats"> (t.me/robosats)</a>
+      </div>
+    </noscript>
+    <div id="main">
+      <div id="app">
+        <div class="loaderCenter">
+          <div class="loaderSpinner"></div>
+          <div class="content-slider">
+            <div class="slider">
+              <div class="mask">
+                <ul>
+                  <li class="anim1">
+                    <div class="quote">Looking for robot parts ...</div>
+                  </li>
+                  <li class="anim2">
+                    <div class="quote">Adding layers to the onion ...</div>
+                  </li>
+                  <li class="anim3">
+                    <div class="quote">Winning at game theory ...</div>
+                  </li>
+                  <li class="anim4">
+                    <div class="quote">Moving Sats at light speed ...</div>
+                  </li>
+                  <li class="anim5">
+                    <div class="quote">Hiding in 2^256 bits of entropy...</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <script src="/static/frontend/main.js"></script>
+  </body>
+</html>
--- a/web/nginx.conf
+++ b/web/nginx.conf
@ -0,0 +1,58 @@
+daemon off;
+
+user nginx;
+worker_processes auto;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+
+    include /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    large_client_header_buffers 4 64K;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /dev/stdout  main;
+    error_log   /dev/stderr  warn;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+
+        listen 12596;
+        server_name robosats_client;
+
+        # add_header Access-Control-Allow-Headers "*";
+        # add_header Access-Control-Allow-Origin "*";
+
+        location / {
+            root /usr/src/robosats;
+            try_files $uri $uri/ /basic.html;
+            index basic.html;
+        }
+
+        location /pro {
+            root /usr/src/robosats;
+            try_files $uri $uri/ /pro.html;
+            index pro.html;
+        }
+
+        location /static/ {
+            alias /usr/src/robosats/static/;
+            autoindex on;
+        }
+
+        location = /favicon.ico {
+            alias /usr/src/robosats/static/assets/images/favicon-96x96.png;
+        }
+    }
+}
--- a/web/pro.html
+++ b/web/pro.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <link rel="shortcut icon" href="/static/assets/images/favicon-96x96.png" />
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="/static/assets/images/favicon-192x192.png" sizes="192x192">
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="A simple and private way to exchange bitcoin for national currencies. Robosats simplifies the peer-to-peer user experience and uses lightning hold invoices to minimize custody and trust requirements. No user registration required.">
+
+    <title>RoboSats PRO - Simple and Private Bitcoin Exchange</title>
+
+    <link rel="stylesheet" href="/static/css_pro/fonts.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/loader.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/leaflet.css"/>
+    <link rel="stylesheet" type="text/css" href="/css_pro/react-grid-layout.css"/>
+    <link rel="stylesheet" type="text/css" href="/css_pro/react-resizable.css"/>
+  </head>
+  <body>
+    <noscript>
+      <div>
+        This site requires JavaScript. This message is only visible if you have it disabled. <br/><br/>
+        If you are using TOR browser set the "Security Level" to "Standard". If you keep seeing this message clear cache and storage of TOR browser app and retry.<br/><br/>
+        If the problem persists, ask for support in the RoboSats telegram group<a href="https://t.me/robosats"> (t.me/robosats)</a>
+      </div>
+    </noscript>
+    <div id="main">
+      <div id="app">
+        <div class="loaderCenter">
+          <div class="loaderSpinner"></div>
+          <div class="content-slider">
+            <div class="slider">
+              <div class="mask">
+                <ul>
+                  <li class="anim1">
+                    <div class="quote">Looking for robot parts ...</div>
+                  </li>
+                  <li class="anim2">
+                    <div class="quote">Adding layers to the onion ...</div>
+                  </li>
+                  <li class="anim3">
+                    <div class="quote">Winning at game theory ...</div>
+                  </li>
+                  <li class="anim4">
+                    <div class="quote">Moving Sats at light speed ...</div>
+                  </li>
+                  <li class="anim5">
+                    <div class="quote">Hiding in 2^256 bits of entropy...</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <script src="/static/frontend/pro.js"></script>
+  </body>
+</html>
--- a/web/readme.md
+++ b/web/readme.md
@ -0,0 +1,5 @@
+# Host a RoboSat web client
+
+This docker app is intended for hosting a web client for public use.
+
+Similar to `/nodeapp`, but does not use the selfhosted flags nor torify connections to coordinators. The browser itself must support Tor.
--- a/web/run.sh
+++ b/web/run.sh
@ -0,0 +1,2 @@
+#!/bin/sh
+nginx