CSUB-1043: Change instances of the staking dashboard to point to spec…

…ific environment (#97)

* fix: Change networks by environment

* smarter use of docker file

* fixing github action as well

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* azdo ci fix

* proper way to reference var

* fix

* build and push have to be seperated

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fux

* fix: Remove duplicated build options

* fix: staging = prod

* fix: yarn build

---------

Co-authored-by: Frank Li <frank.li@gluwa.com>
Co-authored-by: Thomas McDonald <mcdonald.thomas1284@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.github/workflows/docker.yml

@@ -38,9 +38,13 @@ jobs:
           git diff
           echo "===== END ====="
 
-      - name: Build docker image
+      - name: Build test docker image
         run: |
-          docker build -t gluwa/creditcoin3-staking-dashboard .
+          docker build --build-arg="TARGET_NETWORK=test" -t gluwa/creditcoin3-staking-dashboard .
+
+      - name: Build prod docker image
+        run: |
+          docker build --build-arg="TARGET_NETWORK=prod" -t gluwa/creditcoin3-staking-dashboard .
 
       - name: Extract application files from docker image
         if: ${{ github.event_name == 'pull_request' }}

Dockerfile

@@ -3,13 +3,14 @@
 
 # build environment
 FROM node:21 as build
+ARG TARGET_NETWORK=""
 
 WORKDIR /app
 COPY . .
 RUN yarn policies set-version '3.3.1'
 
 RUN yarn install \
-&& yarn run build
+&& VITE_ENVIRONMENT=${TARGET_NETWORK} yarn build
 
 # production environment
 FROM nginx:1.25.3-alpine

creditcoin-staking-dashboard-ci.yml

@@ -33,8 +33,9 @@ jobs:
         inputs:
           containerRegistry: 'substrate-relayer'
           repository: 'gluwa/cc3-staking-dashboard'
-          command: 'buildAndPush'
-          Dockerfile: '**/Dockerfile-Test'
+          command: 'build'
+          Dockerfile: '**/Dockerfile'
+          arguments: '--build-arg="TARGET_NETWORK=test"'
           tags: |
             test-$(Build.BuildId)
 
@@ -43,8 +44,29 @@ jobs:
         inputs:
           containerRegistry: 'substrate-relayer'
           repository: 'gluwa/cc3-staking-dashboard'
-          command: 'buildAndPush'
+          command: 'build'
           Dockerfile: '**/Dockerfile'
+          arguments: '--build-arg="TARGET_NETWORK=prod"'
+          tags: |
+            $(Build.BuildId)
+            latest
+            $(releaseTag)
+
+      - task: Docker@2
+        displayName: 'Build Test Docker Image'
+        inputs:
+          containerRegistry: 'substrate-relayer'
+          repository: 'gluwa/cc3-staking-dashboard'
+          command: 'push'
+          tags: |
+            test-$(Build.BuildId)
+
+      - task: Docker@2
+        displayName: 'Build Docker Image'
+        inputs:
+          containerRegistry: 'substrate-relayer'
+          repository: 'gluwa/cc3-staking-dashboard'
+          command: 'push'
           tags: |
             $(Build.BuildId)
             latest

package.json

@@ -5,7 +5,6 @@
   "license": "GPL-3.0-only",
   "scripts": {
     "build": "tsc && vite build --base '/'",
-    "build:testnet": "tsc && VITE_NETWORK='testnet' vite build --base '/'",
     "build:pages": "tsc && vite build --base '/polkadot-staking-dashboard/'",
     "clear": "rm -rf node_modules build tsconfig.tsbuildinfo",
     "deploy:pages": "yarn build:pages && gh-pages -d build",

src/config/networks.ts

@@ -81,19 +81,22 @@ const makeCreditcoinNetwork = ({
 
 const makeNetworkList = () => {
   const networks: Networks = {};
-  if (import.meta.env.VITE_NETWORK !== 'testnet') {
-    networks.creditcoin = makeCreditcoinNetwork({
-      name: 'creditcoin',
+  if (
+    import.meta.env.VITE_ENVIRONMENT === 'test' ||
+    import.meta.env.VITE_ENVIRONMENT === undefined
+  ) {
+    networks.creditcoinDev = makeCreditcoinNetwork({
+      name: 'creditcoinDev',
       endpoints: {
         lightClient: null,
         defaultRpcEndpoint: 'Gluwa',
         rpcEndpoints: {
-          Gluwa: 'wss://rpc.cc3-mainnet.creditcoin.network/ws',
+          Gluwa: 'wss://rpc.cc3-devnet.creditcoin.network/ws',
         },
       },
-      namespace: 'creditcoin-mainnet',
+      namespace: '09573a3526818a8ecd6eb92f60f1175d',
       subscanEndpoint: 'http://127.0.0.1:4399',
-      subscanUrl: 'https://creditcoin3.subscan.io/',
+      subscanUrl: 'https://creditcoin3-testnet.subscan.io/',
     });
   }
   networks.creditcoinTest = makeCreditcoinNetwork({
@@ -109,23 +112,19 @@ const makeNetworkList = () => {
     subscanEndpoint: 'http://127.0.0.1:4399',
     subscanUrl: 'https://creditcoin3-testnet.subscan.io/',
   });
-
-  if (import.meta.env.VITE_NETWORK !== 'testnet') {
-    networks.creditcoinDev = makeCreditcoinNetwork({
-      name: 'creditcoinDev',
-      endpoints: {
-        lightClient: null,
-        defaultRpcEndpoint: 'Gluwa',
-        rpcEndpoints: {
-          Gluwa: 'wss://rpc.cc3-devnet.creditcoin.network/ws',
-        },
+  networks.creditcoin = makeCreditcoinNetwork({
+    name: 'creditcoin',
+    endpoints: {
+      lightClient: null,
+      defaultRpcEndpoint: 'Gluwa',
+      rpcEndpoints: {
+        Gluwa: 'wss://rpc.cc3-mainnet.creditcoin.network/ws',
       },
-      namespace: '09573a3526818a8ecd6eb92f60f1175d',
-      subscanEndpoint: 'http://127.0.0.1:4399',
-      subscanUrl: 'https://creditcoin3-testnet.subscan.io/',
-    });
-  }
-
+    },
+    namespace: 'creditcoin-mainnet',
+    subscanEndpoint: 'http://127.0.0.1:4399',
+    subscanUrl: 'https://creditcoin3.subscan.io/',
+  });
   if (import.meta.env.DEV) {
     networks.creditcoinLocal = makeCreditcoinNetwork({
       name: 'creditcoinLocal',

src/consts.ts

@@ -11,7 +11,11 @@ import type { Plugin } from 'types';
 export const AppVersion = '1.0.8';
 export const DappName = 'Creditcoin Staking Dashboard';
 export const CreditcoinUrl = 'https://creditcoin.org';
-export const DefaultNetwork = 'creditcoin';
+export const DefaultNetwork =
+  import.meta.env.VITE_ENVIRONMENT === 'test' ||
+  import.meta.env.VITE_ENVIRONMENT === undefined
+    ? 'creditcoinDev'
+    : 'creditcoin';
 export const ManualSigners = ['ledger', 'vault'];
 /*
  * Data Structure Helpers

src/contexts/Network/defaults.ts

@@ -4,8 +4,8 @@
 import { NetworkList } from 'config/networks';
 
 export const defaultNetworkContext = {
-  network: NetworkList.creditcoin?.name ?? NetworkList.creditcoinTest?.name,
-  networkData: NetworkList.creditcoin ?? NetworkList.creditcoinTest,
+  network: NetworkList.creditcoin?.name,
+  networkData: NetworkList.creditcoin,
 
   switchNetwork: () => {},
 };

src/contexts/Network/index.tsx

@@ -38,11 +38,8 @@ export const NetworkProvider = ({
     const localNetworkValid = !!Object.values(NetworkList).find(
       (n) => n.name === localNetwork
     );
-    return localNetworkValid
-      ? localNetwork
-      : Object.keys(NetworkList).length > 0
-        ? (Object.keys(NetworkList)[0] as NetworkName)
-        : DefaultNetwork;
+
+    return localNetworkValid ? localNetwork : DefaultNetwork;
   };
 
   // handle network switching