feat: dockerize app with hyperchains configurable at runtime (#189)

.github/workflows/release.yml

@@ -39,6 +39,33 @@ jobs:
           VITE_FIREBASE_PROJECT_ID=zksync-dapp-wallet-v2 \
             npx semantic-release || true
 
+  docker:
+    name: Build Docker
+    runs-on: ubuntu-latest
+    needs: publish
+    if: ${{ github.ref == 'refs/heads/main' && needs.publish.outputs.releaseVersion != '' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USER }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          push: true
+          tags: |
+            matterlabs/dapp-portal:latest
+            matterlabs/dapp-portal:${{ needs.publish.outputs.releaseVersion }}
+          file: Dockerfile
+          no-cache: true
 
   staging:
     name: Deploy to Staging

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18.17.1-alpine AS base-stage
+
+WORKDIR /usr/src/app
+COPY package*.json ./
+
+FROM base-stage AS build-stage
+RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*
+RUN npm cache clean --force && npm install
+COPY . .
+RUN npm run generate
+
+FROM base-stage AS production-stage
+COPY --from=build-stage /usr/src/app/.output/public ./dist
+RUN npm i -g http-server
+
+ARG PORT=3000
+ENV PORT=${PORT}
+
+WORKDIR /usr/src/app/dist
+
+CMD http-server -p $PORT -c-1 --proxy="http://127.0.0.1:$PORT/index.html?"

composables/usePortalRuntimeConfig.ts

@@ -15,5 +15,6 @@ export const usePortalRuntimeConfig = () => {
           }
         : undefined,
     },
+    hyperchainsConfig: runtimeConfig?.hyperchainsConfig,
   };
 };

data/networks.ts

@@ -103,7 +103,7 @@ const publicChains: ZkSyncNetwork[] = [
 ];
 
 const getHyperchains = (): ZkSyncNetwork[] => {
-  const hyperchains = Hyperchains as Config;
+  const hyperchains = portalRuntimeConfig.hyperchainsConfig || (Hyperchains as Config);
   return hyperchains.map((e) => {
     const network: ZkSyncNetwork = {
       ...e.network,

types/index.d.ts

@@ -1,3 +1,5 @@
+import { type Config as HyperchainsConfig } from "@/scripts/hyperchains/common";
+
 export type Hash = `0x${string}`;
 
 export type TokenPrice = number | undefined;
@@ -132,7 +134,7 @@ declare global {
       track: (eventName: string, params?: unknown) => void;
       initialized: boolean;
     };
-    '##runtimeConfig'?: {
+    "##runtimeConfig"?: {
       nodeType?: string;
       walletConnectProjectId?: string;
       ankrToken?: string;
@@ -141,8 +143,9 @@ declare global {
         rudder?: {
           key: string;
           dataplaneUrl: string;
-        }
-      }
-    }
+        };
+      };
+      hyperchainsConfig?: HyperchainsConfig;
+    };
   }
 }