Add simple web hosted federated client

RoboSats · Jan 11, 2024 · 2472551 · 2472551
1 parent b18dcec
commit 2472551
Show file tree

Hide file tree

Showing 10 changed files with 325 additions and 5 deletions.
diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
@@ -91,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 }}
diff --git 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:

diff --git a/.github/workflows/client-image.yml → ...hub/workflows/selfhosted-client-image.yml b/.github/workflows/client-image.yml → ...hub/workflows/selfhosted-client-image.yml
@@ -1,4 +1,4 @@
-name: "Docker: Client"
+name: 'Docker: Selfhosted Client'
 
 on:
   workflow_dispatch:

diff --git 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 nodeapp/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 }}
diff --git a/frontend/src/components/HostAlert/UnsafeAlert.tsx b/frontend/src/components/HostAlert/UnsafeAlert.tsx
@@ -24,6 +24,8 @@ function federationUrls(): string[] {
     }
   }
 
+  // web hosted frontend without coordinator
+  urls.push('robodexarjwtfryec556cjdz3dfa7u47saek6lkftnkgshvgg2kcumqd.onion');
   return urls;
 }
 

diff --git a/web/Dockerfile b/web/Dockerfile
@@ -0,0 +1,26 @@
+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
+COPY ./coordinators/ /etc/nginx/conf.d/
+
+RUN apk -U --no-cache upgrade \
+    && apk --no-cache add socat \
+    && apk --no-cache add nginx
+
+EXPOSE 12596
+HEALTHCHECK CMD curl --fail http://localhost:12596/selfhosted || exit 1
+
+CMD ["sh", "robosats-client.sh"]
diff --git 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>
diff --git 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;
+        }
+    }
+}
diff --git 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>
diff --git 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.
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,8 @@ function federationUrls(): string[] { @@
         }
       }
+      // web hosted frontend without coordinator
+      urls.push('robodexarjwtfryec556cjdz3dfa7u47saek6lkftnkgshvgg2kcumqd.onion');
       return urls;
     }
@@ Expand Down @@