Rebuild MobyMask app before starting stack (#467)

* Rebuild MobyMask app before starting stack

* Upgrade mobymask app versions

* Upgrade MobyMask watcher version

app/data/compose/docker-compose-mobymask-app.yml

@@ -14,12 +14,14 @@ services:
       CERC_APP_WATCHER_URL: ${CERC_APP_WATCHER_URL}
       CERC_RELAY_NODES: ${CERC_RELAY_NODES}
       CERC_DENY_MULTIADDRS: ${CERC_DENY_MULTIADDRS}
-      CERC_BUILD_DIR: "@cerc-io/mobymask-ui/build"
+      CERC_RELEASE: "v0.1.5"
+      CERC_USE_NPM: true
+      CERC_CONFIG_FILE: "src/config.json"
     working_dir: /scripts
     command: ["sh", "mobymask-app-start.sh"]
     volumes:
-      - ../config/network/wait-for-it.sh:/scripts/wait-for-it.sh
       - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh
+      - ../config/watcher-mobymask-v2/mobymask-app-config.json:/app/src/mobymask-app-config.json
       - peers_ids:/peers
       - mobymask_deployment:/server
     ports:
@@ -46,12 +48,14 @@ services:
       CERC_APP_WATCHER_URL: ${CERC_APP_WATCHER_URL}
       CERC_RELAY_NODES: ${CERC_RELAY_NODES}
       CERC_DENY_MULTIADDRS: ${CERC_DENY_MULTIADDRS}
-      CERC_BUILD_DIR: "@cerc-io/mobymask-ui-lxdao/build"
+      CERC_RELEASE: "v0.1.5-lxdao-0.1.1"
+      CERC_USE_NPM: false
+      CERC_CONFIG_FILE: "src/utils/config.json"
     working_dir: /scripts
     command: ["sh", "mobymask-app-start.sh"]
     volumes:
-      - ../config/network/wait-for-it.sh:/scripts/wait-for-it.sh
       - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh
+      - ../config/watcher-mobymask-v2/mobymask-app-config.json:/app/src/mobymask-app-config.json
       - peers_ids:/peers
       - mobymask_deployment:/server
     ports:

app/data/config/watcher-mobymask-v2/mobymask-app-config.json

@@ -0,0 +1,7 @@
+{
+  "name": "MobyMask",
+  "relayNodes": [],
+  "peer": {
+    "enableDebugInfo": true
+  }
+}

app/data/config/watcher-mobymask-v2/mobymask-app-start.sh

@@ -33,11 +33,23 @@ else
   echo "Taking deployed contract details from env"
 fi
 
-# Use yq to create config.yml with environment variables
-yq -n ".address = env(CERC_DEPLOYED_CONTRACT)" > /config/config.yml
-yq ".watcherUrl = env(CERC_APP_WATCHER_URL)" -i /config/config.yml
-yq ".chainId = env(CERC_CHAIN_ID)" -i /config/config.yml
-yq ".relayNodes = strenv(CERC_RELAY_NODES)" -i /config/config.yml
-yq ".denyMultiaddrs = strenv(CERC_DENY_MULTIADDRS)" -i /config/config.yml
+cd /app
+git checkout $CERC_RELEASE
 
-/scripts/start-serving-app.sh
+# Export config values in a json file
+jq --arg address "$CERC_DEPLOYED_CONTRACT" \
+  --argjson chainId "$CERC_CHAIN_ID" \
+  --argjson relayNodes "$CERC_RELAY_NODES" \
+  --argjson denyMultiaddrs "$CERC_DENY_MULTIADDRS" \
+  '.address = $address | .chainId = $chainId | .relayNodes = $relayNodes | .peer.denyMultiaddrs = $denyMultiaddrs' \
+  /app/src/mobymask-app-config.json > /app/${CERC_CONFIG_FILE}
+
+if [ "${CERC_USE_NPM}" = "true" ]; then
+  npm install
+  REACT_APP_WATCHER_URI="$CERC_APP_WATCHER_URL/graphql" npm run build
+else
+  yarn install
+  REACT_APP_WATCHER_URI="$CERC_APP_WATCHER_URL/graphql" yarn build
+fi
+
+http-server -p 80 /app/build

app/data/container-build/cerc-mobymask-ui/Dockerfile

@@ -6,9 +6,6 @@ FROM node:${VARIANT}
 ARG USERNAME=node
 ARG NPM_GLOBAL=/usr/local/share/npm-global
 
-# This container pulls npm package from a registry configured via env var
-ARG CERC_NPM_REGISTRY_URL
-
 # Add NPM global to PATH.
 ENV PATH=${NPM_GLOBAL}/bin:${PATH}
 # Prevents npm from printing version warnings
@@ -33,28 +30,14 @@ RUN \
 RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     && apt-get -y install --no-install-recommends jq bash netcat
 
-# We do this to get a yq binary from the published container, for the correct architecture we're building here
-COPY --from=docker.io/mikefarah/yq:latest /usr/bin/yq /usr/local/bin/yq
-
 RUN mkdir -p /scripts
-COPY ./apply-webapp-config.sh /scripts
-COPY ./start-serving-app.sh /scripts
-
-# Configure the local npm registry
-RUN npm config set @cerc-io:registry ${CERC_NPM_REGISTRY_URL}
-
-RUN mkdir -p /config
 
 # Install simple web server for now (use nginx perhaps later)
 RUN yarn global add http-server
 
-# Globally install both versions of the payload web app package
-# Install old version of MobyMask web app
-RUN yarn global add @cerc-io/mobymask-ui@0.1.4
-# Install the LXDAO version of MobyMask web app
-RUN yarn global add @cerc-io/mobymask-ui-lxdao@npm:@cerc-io/mobymask-ui@0.1.4-lxdao-0.1.1
+WORKDIR /app
+COPY . .
+RUN npm install
 
 # Expose port for http
 EXPOSE 80
-
-CMD ["/scripts/start-serving-app.sh"]

app/data/container-build/cerc-mobymask-ui/apply-webapp-config.sh

@@ -1,42 +0,0 @@
-#!/usr/bin/env bash
-if [ -n "$CERC_SCRIPT_DEBUG" ]; then
-    set -x
-fi
-if [[ $# -ne 3 ]]; then
-    echo "Illegal number of parameters" >&2
-    exit 1
-fi
-config_file_name=$1
-webapp_files_dir=$2
-config_prefix=$3
-if ! [[ -f ${config_file_name} ]]; then
-    echo "Config file ${config_file_name} does not exist" >&2
-    exit 1
-fi
-if ! [[ -d ${webapp_files_dir} ]]; then
-    echo "Webapp directory ${webapp_files_dir} does not exist" >&2
-    exit 1
-fi
-# First some magic using sed to translate our yaml config file into an array of key value pairs like:
-# ${config_prefix}<path-through-objects>=<value>
-# sed "s/'//g" is used to remove single quote for relayNodes value
-readarray -t config_kv_pair_array < <( sed -E 's/([^:]+):\s*(.*)/\1=\2/g' ${config_file_name} | sed "s/'//g" |  sed "s/^/${config_prefix}_/" )
-declare -p config_kv_pair_array
-# Then iterate over that kv array making the template substitution in our web app files
-for kv_pair_string in "${config_kv_pair_array[@]}"
-do
-    kv_pair=(${kv_pair_string//=/ })
-    template_string_to_replace=${kv_pair[0]}
-    template_value_to_substitute=${kv_pair[1]}
-    # Run find and sed to do the substitution of one variable over all files
-    # See: https://stackoverflow.com/a/21479607/1701505
-    echo "Substituting: ${template_string_to_replace} = ${template_value_to_substitute}"
-
-    # TODO: Pass keys to be replaced without double quotes
-    if [[ "$template_string_to_replace" =~ ^${config_prefix}_(relayNodes|chainId|denyMultiaddrs)$ ]]; then
-        find ${webapp_files_dir} -type f -exec sed -i 's#"'"${template_string_to_replace}"'"#'"${template_value_to_substitute}"'#g' {} +
-    else
-        # Note: we do not escape our strings, on the expectation they do not container the '#' char.
-        find ${webapp_files_dir} -type f -exec sed -i 's#'${template_string_to_replace}'#'${template_value_to_substitute}'#g' {} +
-    fi
-done

app/data/container-build/cerc-mobymask-ui/build.sh

@@ -8,5 +8,4 @@ SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 
 CERC_NPM_REGISTRY_URL="https://git.vdb.to/api/packages/cerc-io/npm/"
 
-docker build -t cerc/mobymask-ui:local  ${build_command_args} -f ${SCRIPT_DIR}/Dockerfile \
-  --build-arg CERC_NPM_REGISTRY_URL ${SCRIPT_DIR}
+docker build -t cerc/mobymask-ui:local  ${build_command_args} -f ${SCRIPT_DIR}/Dockerfile ${CERC_REPO_BASE_DIR}/mobymask-ui

app/data/container-build/cerc-mobymask-ui/start-serving-app.sh

@@ -1,9 +0,0 @@
-#!/usr/bin/env bash
-if [ -n "$CERC_SCRIPT_DEBUG" ]; then
-    set -x
-fi
-
-# TODO: Don't hard wire this:
-webapp_files_dir="/usr/local/share/.config/yarn/global/node_modules/${CERC_BUILD_DIR}"
-/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} MOBYMASK_HOSTED_CONFIG
-http-server -p 80 ${webapp_files_dir}

app/data/stacks/mobymask-v2/stack.yml

@@ -7,8 +7,9 @@ repos:
   - github.com/ethereum-optimism/optimism@v1.0.4
   - github.com/ethereum-optimism/op-geth@v1.101105.2
   - github.com/cerc-io/watcher-ts@v0.2.43
-  - github.com/cerc-io/mobymask-v2-watcher-ts@v0.1.1
+  - github.com/cerc-io/mobymask-v2-watcher-ts@v0.1.2
   - github.com/cerc-io/MobyMask@v0.1.2
+  - github.com/cerc-io/mobymask-ui
 containers:
   - cerc/go-ethereum
   - cerc/lighthouse