A revised docker build procedure and infrastructure

.github/workflows/cicd-stg.yaml

@@ -0,0 +1,137 @@
+name: "CICD staging"
+
+on:
+  # Test run before merging
+  pull_request:
+    branches:
+      - main
+  # On merged
+  push:
+    branches:
+      - main
+      - users/richard/76-docker-build-and-host-dependency
+
+jobs:
+  build-makefile:
+    permissions:
+      id-token: write
+      contents: write
+    runs-on: ubuntu-22.04
+    # To test deployments, remove the github.ref_name clause: see devops/docs/z2-testing-apps.md - rrw 2024-04-12
+    # && github.ref_name == 'main'
+    if: github.actor != 'dependabot[bot]'
+    name: "Build image with Makefile"
+    strategy:
+      fail-fast: false
+      matrix:
+        application: [otterscan]
+        include:
+          - application: otterscan
+            image_name: otterscan
+            path: .
+            tag_length: 8
+            tag_latest: false
+    env:
+      DOCKER_DOMAIN: asia-docker.pkg.dev
+      REGISTRY: asia-docker.pkg.dev/prj-d-devops-services-4dgwlsse/zilliqa-public
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29
+        with:
+          submodules: recursive
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          fetch-depth: 0
+
+      - name: "Authenticate to Google Cloud - staging"
+        id: google-auth
+        uses: "google-github-actions/auth@71fee32a0bb7e97b4d33d548e7d957010649d8fa"
+        with:
+          token_format: "access_token"
+          workload_identity_provider: "${{ secrets.GCP_PRD_GITHUB_WIF }}"
+          service_account: "${{ secrets.GCP_STG_GITHUB_SA_DOCKER_REGISTRY }}"
+          create_credentials_file: true
+
+      - name: Login to the registry - staging
+        uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20
+        with:
+          registry: ${{ env.DOCKER_DOMAIN }}
+          username: "oauth2accesstoken"
+          password: "${{ steps.google-auth.outputs.access_token }}"
+
+      - name: Get tag version - staging
+        id: set-tag
+        uses: Zilliqa/gh-actions-workflows/actions/generate-tag@v1
+        with:
+          tag: ${{ env.REGISTRY }}/${{ matrix.image_name }}
+          length: ${{ matrix.tag_length }}
+
+      - name: "Build and push ${{ matrix.application }} - staging"
+        env:
+          ENVIRONMENT: stg
+          IMAGE_TAG: ${{ steps.set-tag.outputs.tags }}
+        run: |
+          cd ${{ matrix.path }}
+          make image/build-and-push
+
+      - name: "Build and push ${{ matrix.application }} tag latest - staging"
+        if: ${{ matrix.tag_latest == true }}
+        env:
+          ENVIRONMENT: stg
+          IMAGE_TAG: "${{ env.REGISTRY }}/${{ matrix.image_name }}:latest"
+        run: |
+          cd ${{ matrix.path }}
+          make image/build-and-push
+
+  deploy-to-staging:
+    needs: [build-makefile]
+    permissions:
+      id-token: write
+      contents: write
+    runs-on: ubuntu-22.04
+    if: github.actor != 'dependabot[bot]' && github.ref_name == 'main'
+    strategy:
+      fail-fast: false
+      matrix:
+        application:
+          - developer-portal
+    env:
+      APP_NAME: ${{ matrix.application }}
+      Z_ENV: infra/live/gcp/non-production/prj-d-staging/z_ase1.yaml
+      Z_SERVICE_ACCOUNT: ${{ secrets.GCP_STG_GITHUB_SA_K8S_DEPLOY }}
+      OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN_STG }}
+      GITHUB_PAT: ${{ secrets.GH_PAT }}
+      Z_IMAGE: asia-docker.pkg.dev/prj-d-devops-services-4dgwlsse/zilliqa-private/z:latest
+      REGISTRY: asia-docker.pkg.dev
+    steps:
+      - name: Checkout
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29
+        with:
+          repository: Zilliqa/devops
+          token: ${{ env.GITHUB_PAT }}
+          ref: main
+          sparse-checkout: |
+            ${{ env.Z_ENV }}
+
+      - name: Authenticate to Google Cloud
+        id: google-auth
+        uses: google-github-actions/auth@71fee32a0bb7e97b4d33d548e7d957010649d8fa
+        with:
+          token_format: "access_token"
+          workload_identity_provider: "${{ secrets.GCP_PRD_GITHUB_WIF }}"
+          service_account: ${{ env.Z_SERVICE_ACCOUNT }}
+          create_credentials_file: true
+
+      - name: Deploy application
+        run: |
+          gcloud auth print-access-token | docker login -u oauth2accesstoken --password-stdin https://${{ env.REGISTRY }}
+          docker run --rm \
+              -e ZQ_USER='${{ env.Z_SERVICE_ACCOUNT }}' \
+              -e Z_ENV='/devops/${{ env.Z_ENV }}' \
+              -e OP_SERVICE_ACCOUNT_TOKEN='${{ env.OP_SERVICE_ACCOUNT_TOKEN }}' \
+              -e GITHUB_PAT='${{ env.GITHUB_PAT }}' \
+              -e CLOUDSDK_AUTH_CREDENTIAL_FILE_OVERRIDE='/google/application_default_credentials.json' \
+              -v `pwd`:/devops \
+              -v ${{ steps.google-auth.outputs.credentials_file_path }}:/google/application_default_credentials.json \
+              --name z_container ${{ env.Z_IMAGE }} \
+              bash -c "gcloud config set account ${{ env.Z_SERVICE_ACCOUNT }} && z /app /devops app sync --cache-dir .cache ${{ env.APP_NAME }}"

.github/workflows/docker-publish.yaml

@@ -83,14 +83,11 @@ jobs:
             type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
             type=semver,pattern={{raw}}
 
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          platforms: ${{ matrix.platform }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+      - name: "Build and push ${{ matrix.application }}"
+        env:
+          ENVIRONMENT: stg
+          IMAGE_TAG: ${{ steps.set-tag.outputs.tags }}
+        run: |
+          cd ${{ matrix.path }}
+          make image/build-and-push
+

Dockerfile.zilliqa

@@ -0,0 +1,26 @@
+FROM node:22.9.0-alpine3.19 AS builder
+WORKDIR /otterscan-build
+COPY --link ["package.json", "package-lock.json", "/otterscan-build/"]
+RUN npm ci --fetch-timeout 6000000 --verbose
+COPY --link ["run-nginx.sh", "tsconfig.json", "tsconfig.node.json", "postcss.config.js", "tailwind.config.js", "vite.config.ts", "index.html", "/otterscan-build/"]
+COPY --link ["public", "/otterscan-build/public/"]
+COPY --link ["src", "/otterscan-build/src/"]
+COPY --link ["autogen", "/otterscan-build/autogen/"]
+RUN npm run just-build
+
+FROM nginx:1.27.3-alpine3.20
+RUN set -ex \
+    && apk update \
+    && apk add nginx-mod-http-brotli jq
+WORKDIR /usr/share/nginx/html/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/chains chains/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/topic0 topic0/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/assets assets/
+COPY --link --from=otterscan/otterscan-assets:v1.1.1 /usr/share/nginx/html/signatures signatures/
+COPY --link nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+COPY --link nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --link --from=builder /otterscan-build/dist /usr/share/nginx/html/
+COPY --link --from=builder /otterscan-build/run-nginx.sh /
+WORKDIR /
+
+CMD ["/run-nginx.sh"]

Makefile

@@ -0,0 +1,23 @@
+.PHONY: all
+all: image/build-and-push
+
+.ONESHELL:
+SHELL := /bin/bash
+.SHELLFLAGS = -ec
+
+ENVIRONMENT ?= dev
+VALID_ENVIRONMENTS := dev stg prd
+# Check if the ENVIRONMENT variable is in the list of valid environments
+ifeq ($(filter $(ENVIRONMENT),$(VALID_ENVIRONMENTS)),)
+$(error Invalid value for ENVIRONMENT. Valid values are dev, stg, or prd.)
+endif
+
+HERE=$(shell pwd)
+
+IMAGE_TAG ?= otterscan:latest
+
+
+.PHONY: image/build-and-push
+image/build-and-push:
+	./scripts/gen-version.sh autogen/version.ts
+	docker buildx build -f Dockerfile.zilliqa . -t $(IMAGE_TAG)

package.json

@@ -55,6 +55,7 @@
     "build": "./scripts/gen-version.sh autogen/version.ts && tsc && vite build",
     "preview": "./scripts/gen-version.sh autogen/version.ts && vite preview",
     "test": "jest",
+    "just-build": "tsc && vite build",
     "source-map-explorer": "source-map-explorer build/static/js/*.js",
     "assets-start": "docker run --rm -p 5175:80 --name otterscan-assets -d otterscan/otterscan-assets:v1.0.1",
     "assets-stop": "docker stop otterscan-assets",

public/config.json

@@ -2,9 +2,9 @@
   "erigonURL": "http://localhost:8545",
   "assetsURLPrefix": "http://localhost:5175",
   "connections": [
-    { "menuName": "zq1-mainnet", "url": "https://mainnet-v934-fireblocks.mainnet-20240103-ase1.zq1.network" },
-    { "menuName": "zq1-testnet", "url": "https://testnet-v932-fireblocks.testnet-ase1.zq1.dev" },
-    { "menuName": "zq2-prototestnet", "url": "https://api.zq2-prototestnet.zilliqa.com" },
-    { "menuName": "zq2-protomainnet", "url": "https://api.zq2-protomainnet.zilliqa.com" }
+    { "menuName": "zq1-mainnet", "url": "https://mainnet-v934-fireblocks.mainnet-20240103-ase1.zq1.network", "hostnames": ["otterscan.zilliqa.com"] },
+    { "menuName": "zq1-testnet", "url": "https://testnet-v932-fireblocks.testnet-ase1.zq1.dev", "hostnames": ["otterscan.testnet.zilliqa.com"] },
+    { "menuName": "zq2-prototestnet", "url": "https://api.zq2-prototestnet.zilliqa.com", "hostnames": ["explorer.zq2-prototestnet.zilliqa.com" ] },
+    { "menuName": "zq2-protomainnet", "url": "https://api.zq2-protomainnet.zilliqa.com", "hostnames": ["explorer.zq2-protomainnet.zilliqa.com"] }
   ]
 }

src/NetworkMenuWithConfig.tsx

@@ -6,6 +6,7 @@ import {
   chooseConnection,
   deleteParametersFromLocation,
   newConnection,
+  forgetLocalStorage
 } from "./useConfig";
 
 type NetworkMenuWithConfigProps = {
@@ -45,6 +46,13 @@ const NetworkMenuWithConfig: FC<NetworkMenuWithConfigProps> = ({ config }) => {
       //window.location.reload();
     }
   }
+
+  async function forgetBrowserSettings() {
+    console.log("Forget browser settings");
+    await forgetLocalStorage();
+    window.location.reload();
+  }
+
   var legend =
     connections.find((elem) => elem?.url == config?.erigonURL)?.menuName ??
     "Networks";
@@ -68,7 +76,8 @@ const NetworkMenuWithConfig: FC<NetworkMenuWithConfigProps> = ({ config }) => {
           </MenuButton>
           <MenuItems className="absolute left-0 mt-1 flex min-w-max flex-col rounded-b border bg-white p-1 text-sm">
             {connectionItems}
-            <NetworkSetItem onClick={() => setGoToOpen(true)} />
+          <NetworkSetItem onClick={() => setGoToOpen(true)} />
+      <RemoveConfigItem onClick={() => forgetBrowserSettings()} />
           </MenuItems>
         </div>
       </Menu>
@@ -151,7 +160,7 @@ const NetworkMenuWithConfig: FC<NetworkMenuWithConfigProps> = ({ config }) => {
                   }}
                 >
                   Connect
-                </button>
+        </button>
               </div>
             </div>
           </div>
@@ -161,6 +170,29 @@ const NetworkMenuWithConfig: FC<NetworkMenuWithConfigProps> = ({ config }) => {
   );
 };
 
+type RemoveConfigItemProps = {
+  onClick: (event?: any) => void;
+};
+
+
+export const RemoveConfigItem: React.FC<RemoveConfigItemProps> = ({ onClick}) => {
+  return (
+    <MenuItem>
+      {({ focus }) => (
+        <div
+          className={`px-2 py-1 text-left text-sm ${
+            focus ? "border-zq-lightblue text-gray-500" : "text-gray-400"
+          } transition-colors transition-transform duration-75`}
+        >
+          <button name="Forget" onClick={onClick}>
+          Forget Browser Settings
+          </button>
+        </div>
+      )}
+      </MenuItem>
+  );
+};
+
 type NetworkSetItemProps = {
   onClick: (event?: any) => void;
 };