From a956e570fb790ec7bddf3c48eff3214b6da6759c Mon Sep 17 00:00:00 2001
From: justinschuldt <jschuldt@jumptrading.com>
Date: Tue, 26 Oct 2021 05:02:59 -0500
Subject: [PATCH] run bridge_ui in devnet

Change-Id: Id48de471bffda421a6ae70d15c66e7c5477fc1d1
---
 DEVELOP.md                          |  7 ++++++
 Tiltfile                            | 24 ++++++++++++++++++++
 bridge_ui/.env.sample               |  1 +
 bridge_ui/Dockerfile                | 29 ++++++++++++++++++++++++
 bridge_ui/README.md                 |  8 +++++++
 devnet/{web.yaml => bridge-ui.yaml} | 35 ++++++++++++++++-------------
 6 files changed, 88 insertions(+), 16 deletions(-)
 create mode 100644 bridge_ui/.env.sample
 create mode 100644 bridge_ui/Dockerfile
 rename devnet/{web.yaml => bridge-ui.yaml} (50%)

diff --git a/DEVELOP.md b/DEVELOP.md
index 7f3d90b8..03fd09ea 100644
--- a/DEVELOP.md
+++ b/DEVELOP.md
@@ -90,3 +90,10 @@ Guardian events can be persisted to a cloud BigTable instance by passing a GCP p
 Launch the devnet with flags supplying your database info to forward events to your cloud BigTable, rather than the local devnet BigTable emulator:
 
     tilt up -- --num=1  --gcpProject=your-project-id --bigTableKeyPath=./your-service-account-key.json
+
+## bridge UI
+
+Run the bridge UI in devnet by supplying the `--bridge_ui` flag:
+
+    tilt up -- --bridge_ui
+
diff --git a/Tiltfile b/Tiltfile
index 95c6dd9d..4f18ed13 100644
--- a/Tiltfile
+++ b/Tiltfile
@@ -32,6 +32,7 @@ config.define_string("bigTableKeyPath", False, "Path to BigTable json key file")
 # Components
 config.define_bool("pyth", False, "Enable Pyth-to-Wormhole component")
 config.define_bool("explorer", False, "Enable explorer component")
+config.define_bool("bridge_ui", False, "Enable bridge UI component")
 
 cfg = config.parse()
 num_guardians = int(cfg.get("num", "1"))
@@ -41,6 +42,7 @@ bigTableKeyPath = cfg.get("bigTableKeyPath", "./event_database/devnet_key.json")
 ci = cfg.get("ci", False)
 pyth = cfg.get("pyth", ci)
 explorer = cfg.get("explorer", ci)
+bridge_ui = cfg.get("bridge_ui", ci)
 
 # namespace
 
@@ -230,6 +232,28 @@ k8s_resource("eth-devnet2", port_forwards = [
     port_forward(8546, name = "Ganache RPC [:8546]"),
 ])
 
+if bridge_ui:
+
+    docker_build(
+        ref = "bridge-ui",
+        context = ".",
+        only = ["./ethereum", "./sdk", "./bridge_ui"],
+        dockerfile = "bridge_ui/Dockerfile",
+        live_update = [
+            sync("./bridge_ui/src", "/app/bridge_ui/src"),
+        ],
+    )
+
+    k8s_yaml_with_ns("devnet/bridge-ui.yaml")
+
+    k8s_resource(
+        "bridge-ui",
+        resource_deps = ["proto-gen-web", "wasm-gen"],
+        port_forwards = [
+            port_forward(5000, name = "Bridge UI [:5000]"),
+        ],
+    )
+
 # bigtable
 
 def build_cloud_function(container_name, go_func_name, path, builder):
diff --git a/bridge_ui/.env.sample b/bridge_ui/.env.sample
new file mode 100644
index 00000000..deb8ef30
--- /dev/null
+++ b/bridge_ui/.env.sample
@@ -0,0 +1 @@
+REACT_APP_COVALENT_API_KEY=
diff --git a/bridge_ui/Dockerfile b/bridge_ui/Dockerfile
new file mode 100644
index 00000000..bc537cf6
--- /dev/null
+++ b/bridge_ui/Dockerfile
@@ -0,0 +1,29 @@
+# syntax=docker.io/docker/dockerfile:experimental@sha256:de85b2f3a3e8a2f7fe48e8e84a65f6fdd5cd5183afa6412fff9caa6871649c44
+
+# Derivative of ethereum/Dockerfile, look there for an explanation on how it works.
+FROM node:16-alpine@sha256:004dbac84fed48e20f9888a23e32fa7cf83c2995e174a78d41d9a9dd1e051a20
+
+RUN mkdir -p /app
+WORKDIR /app
+
+ADD . .
+
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm ci --prefix ethereum
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm ci --prefix sdk/js
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm run build --prefix sdk/js
+
+
+WORKDIR ./bridge_ui
+
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm ci
+
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm i serve
+
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm run build
+
diff --git a/bridge_ui/README.md b/bridge_ui/README.md
index db44a720..f3971f68 100644
--- a/bridge_ui/README.md
+++ b/bridge_ui/README.md
@@ -53,3 +53,11 @@ REACT_APP_CLUSTER=mainnet REACT_APP_COVALENT_API_KEY=YOUR_API_KEY REACT_APP_SOLA
 ```bash
 npx serve -s build
 ```
+
+## Environment Variables (optional)
+
+Create `.env` from the sample file, then add your Covalent API key:
+
+```bash
+cp .env.sample .env
+```
diff --git a/devnet/web.yaml b/devnet/bridge-ui.yaml
similarity index 50%
rename from devnet/web.yaml
rename to devnet/bridge-ui.yaml
index 949cbbf3..212dcddf 100644
--- a/devnet/web.yaml
+++ b/devnet/bridge-ui.yaml
@@ -2,45 +2,48 @@
 apiVersion: v1
 kind: Service
 metadata:
-  name: web
+  name: bridge-ui
   labels:
-    app: web
+    app: bridge-ui
 spec:
   ports:
-    - port: 3000
-      name: rpc
+    - port: 8001
+      name: http
       protocol: TCP
   clusterIP: None
   selector:
-    app: web
+    app: bridge-ui
 ---
 apiVersion: apps/v1
 kind: StatefulSet
 metadata:
-  name: web
+  name: bridge-ui
 spec:
   selector:
     matchLabels:
-      app: web
-  serviceName: web
+      app: bridge-ui
+  serviceName: bridge-ui
   replicas: 1
   template:
     metadata:
       labels:
-        app: web
+        app: bridge-ui
     spec:
       terminationGracePeriodSeconds: 1
       containers:
-        - name: web
-          image: web
+        - name: bridge-ui
+          image: bridge-ui
           command:
-            - /usr/local/bin/npm
-            - start
+            - /app/bridge_ui/node_modules/.bin/serve
+            - -s
+            - build
+            - -n
           tty: true
           ports:
-            - containerPort: 3000
-              name: react-devserver
+            - containerPort: 5000
+              name: npxserver
               protocol: TCP
           readinessProbe:
             httpGet:
-              port: react-devserver
+              port: npxserver
+              path: /