Resolve warnings in react app build (#10)

Part of https://plan.wireit.in/deepstack/browse/VUL-251/

Co-authored-by: Pranav <jadhavpranav89@gmail.com>
Reviewed-on: #10

.env.example

@@ -1,5 +1,3 @@
-REACT_APP_WALLET_CONNECT_PROJECT_ID=
-
 REACT_APP_DEFAULT_GAS_PRICE=0.025
 # Reference: https://github.com/cosmos/cosmos-sdk/issues/16020
 REACT_APP_GAS_ADJUSTMENT=2

config-overrides.js

@@ -54,5 +54,20 @@ module.exports = function override(config, env) {
 
   config.resolve.alias['react-native$'] = require.resolve('react-native-web');
 
+  // Ignore source map warnings from third-party packages. Ref: https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-3416044
+  const ignoreSourceMapPackages = [
+    '@cosmjs',
+    '@confio/ics23',
+    '@json-rpc-tools',
+    '@pedrouid/environment',
+    '@walletconnect',
+    'cosmjs-types',
+  ];
+
+  config.ignoreWarnings = ignoreSourceMapPackages.map(pkg => ({
+    module: new RegExp(`node_modules/${pkg.replace('/', '\\/')}`),
+    message: /Failed to parse source map/,
+  }));
+
   return config;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-wallet",
-  "version": "0.1.7-zenith-0.2.0",
+  "version": "0.1.7-zenith-0.2.3",
   "private": true,
   "dependencies": {
     "@laconic-network/cosmjs-util": "^0.1.0",

src/hooks/useInitialization.ts

@@ -20,6 +20,10 @@ export default function useInitialization(
   }, [setWeb3wallet]);
 
   useEffect(() => {
+    if (!import.meta.env.REACT_APP_WALLET_CONNECT_PROJECT_ID) {
+      return;
+    }
+
     if (!initialized) {
       onInitialize();
     }

src/utils/wallet-connect/COSMOSData.ts

@@ -38,5 +38,5 @@ export const COSMOS_SIGNING_METHODS = {
 export const COSMOS_METHODS = {
   ...COSMOS_SIGNING_METHODS,
   COSMOS_SEND_TOKENS: 'cosmos_sendTokens', // Added for pay.laconic.com
-  COSMOS_SEND_TRANSACTION: 'cosmos_sendTransaction', // Added for testnet onboarding app
+  COSMOS_SEND_TRANSACTION: 'cosmos_sendTransaction', // Added for onboarding app
 };

stack/stack-orchestrator/compose/docker-compose-zenith-wallet-web.yml

@@ -5,7 +5,6 @@ services:
     image: cerc/zenith-wallet-web:local
     environment:
       CERC_SCRIPT_DEBUG: ${CERC_SCRIPT_DEBUG}
-      WALLET_CONNECT_ID: ${WALLET_CONNECT_ID}
       WALLET_CONNECT_VERIFY_CODE: ${WALLET_CONNECT_VERIFY_CODE}
       CERC_DEFAULT_GAS_PRICE: ${CERC_DEFAULT_GAS_PRICE:-0.025}
       CERC_GAS_ADJUSTMENT: ${CERC_GAS_ADJUSTMENT:-2}

stack/stack-orchestrator/config/app/run.sh

@@ -6,19 +6,17 @@ if [ -n "$CERC_SCRIPT_DEBUG" ]; then
 fi
 
 echo "Using the following env variables:"
-echo "WALLET_CONNECT_ID: ${WALLET_CONNECT_ID}"
 echo "CERC_DEFAULT_GAS_PRICE: ${CERC_DEFAULT_GAS_PRICE}"
 echo "CERC_GAS_ADJUSTMENT: ${CERC_GAS_ADJUSTMENT}"
 echo "CERC_ALLOWED_URLS: ${CERC_ALLOWED_URLS}"
 
 # Build with required env
-export REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_ID
 export REACT_APP_DEFAULT_GAS_PRICE=$CERC_DEFAULT_GAS_PRICE
 export REACT_APP_GAS_ADJUSTMENT=$CERC_GAS_ADJUSTMENT
 export REACT_APP_ALLOWED_URLS=$CERC_ALLOWED_URLS
 
 # Set env variables in build
-yarn set-env
+import-meta-env -x /app/.env.example -p /app/build/index.html
 
 # Define the directory and file path
 FILE_PATH="/app/build/.well-known/walletconnect.txt"

stack/stack-orchestrator/container-build/cerc-zenith-wallet-web/Dockerfile

@@ -1,7 +1,9 @@
 # Originally from: https://github.com/devcontainers/images/blob/main/src/javascript-node/.devcontainer/Dockerfile
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
 ARG VARIANT=22-bullseye
-FROM node:${VARIANT}
+
+# Build stage
+FROM node:${VARIANT} AS builder
 
 ARG USERNAME=node
 ARG NPM_GLOBAL=/usr/local/share/npm-global
@@ -26,18 +28,30 @@ RUN \
   && su ${USERNAME} -c "umask 0002 && npm install -g eslint" \
   && npm cache clean --force > /dev/null 2>&1
 
-# Install additional OS packages.
-RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-    && apt-get -y install --no-install-recommends jq bash netcat
-
-RUN mkdir -p /scripts
-
-# Install simple web server for now (use nginx perhaps later)
-RUN yarn global add serve
-
 WORKDIR /app
 COPY . .
 RUN yarn install && yarn build
 
+# Production stage
+FROM node:${VARIANT}-slim AS production
+
+# Install additional OS packages for debugging
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends bash netcat \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN mkdir -p /scripts
+
+# Install serve package globally
+# Install import-meta-env for setting environment variables (check package.json for version)
+RUN yarn global add serve@^14.2.4 @import-meta-env/cli@^0.7.3
+
+# Create app directory
+WORKDIR /app
+
+# Copy built application and env example from builder stage
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/.env.example ./.env.example
+
 # Expose port for http
 EXPOSE 80