feat: Network list by env (#79)

* feat: Network list by env

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

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

* fix: Added testnet env file

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

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

* changes to make test image for test environment, prod image that only has cc3 testnet

* fix: Update order

* fixed dockerfiles

* fix: Default Network

* fix: env back

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

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

* fix: yarn build

* fix: Lint

* fix: Lint

* fix: reverse yarn lock

* fix: update yarn lock

* fix: by node v21

---------

Co-authored-by: Frank Li <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Thomas McDonald <[email protected]>

Dockerfile

@@ -4,15 +4,12 @@
 # build environment
 FROM node:21 as build
 
-WORKDIR /tmp
-RUN npm install yarn --legacy-peer-deps
-
 WORKDIR /app
 COPY . .
-RUN git config --global url."https://github.com/".insteadOf [email protected]: \
- && git config --global url."https://".insteadOf ssh://git \
- && yarn install \
- && yarn build
+RUN yarn policies set-version '3.3.1'
+
+RUN yarn install \
+&& yarn run build
 
 # production environment
 FROM nginx:1.25.3-alpine

Dockerfile-Test

@@ -0,0 +1,19 @@
+# hadolint global ignore=DL3016
+# checkov:skip=CKV_DOCKER_3:Ensure that a user for the container has been created
+
+# build environment
+FROM node:21 as build
+
+WORKDIR /app
+COPY . .
+RUN yarn policies set-version '3.3.1'
+
+RUN yarn install \
+&& yarn run build:testnet
+
+# test environment
+FROM nginx:1.25.3-alpine
+HEALTHCHECK CMD wget -O /dev/null http://localhost || exit 1
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

creditcoin-staking-dashboard-ci.yml

@@ -28,6 +28,16 @@ jobs:
           echo "branchtag: $branchtag"
           echo "##vso[task.setvariable variable=releaseTag;]$branchtag"
 
+      - task: Docker@2
+        displayName: 'Build Test Docker Image'
+        inputs:
+          containerRegistry: 'substrate-relayer'
+          repository: 'gluwa/cc3-staking-dashboard'
+          command: 'buildAndPush'
+          Dockerfile: '**/Dockerfile-Test'
+          tags: |
+            test-$(Build.BuildId)
+
       - task: Docker@2
         displayName: 'Build Docker Image'
         inputs:

package.json

@@ -5,6 +5,7 @@
   "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

@@ -77,8 +77,9 @@ const makeCreditcoinNetwork = ({
 };
 
 const makeNetworkList = () => {
-  const networks: Networks = {
-    creditcoin: makeCreditcoinNetwork({
+  const networks: Networks = {};
+  if (import.meta.env.VITE_NETWORK !== 'testnet') {
+    networks.creditcoin = makeCreditcoinNetwork({
       name: 'creditcoin',
       endpoints: {
         lightClient: null,
@@ -89,20 +90,23 @@ const makeNetworkList = () => {
       },
       namespace: 'creditcoin-mainnet',
       subscanEndpoint: 'http://127.0.0.1:4399',
-    }),
-    creditcoinTest: makeCreditcoinNetwork({
-      name: 'creditcoinTest',
-      endpoints: {
-        lightClient: null,
-        defaultRpcEndpoint: 'Gluwa',
-        rpcEndpoints: {
-          Gluwa: 'wss://rpc.cc3-testnet.creditcoin.network/ws',
-        },
+    });
+  }
+  networks.creditcoinTest = makeCreditcoinNetwork({
+    name: 'creditcoinTest',
+    endpoints: {
+      lightClient: null,
+      defaultRpcEndpoint: 'Gluwa',
+      rpcEndpoints: {
+        Gluwa: 'wss://rpc.cc3-testnet.creditcoin.network/ws',
       },
-      namespace: '09573a3526818a8ecd6eb92f60f1175d',
-      subscanEndpoint: 'http://127.0.0.1:4399',
-    }),
-    creditcoinDev: makeCreditcoinNetwork({
+    },
+    namespace: '09573a3526818a8ecd6eb92f60f1175d',
+    subscanEndpoint: 'http://127.0.0.1:4399',
+  });
+
+  if (import.meta.env.VITE_NETWORK !== 'testnet') {
+    networks.creditcoinDev = makeCreditcoinNetwork({
       name: 'creditcoinDev',
       endpoints: {
         lightClient: null,
@@ -113,8 +117,8 @@ const makeNetworkList = () => {
       },
       namespace: '09573a3526818a8ecd6eb92f60f1175d',
       subscanEndpoint: 'http://127.0.0.1:4399',
-    }),
-  };
+    });
+  }
   if (import.meta.env.DEV) {
     networks.creditcoinLocal = makeCreditcoinNetwork({
       name: 'creditcoinLocal',
@@ -128,6 +132,7 @@ const makeNetworkList = () => {
       subscanEndpoint: 'http://127.0.0.1:4399',
     });
   }
+
   return networks;
 };
 

src/contexts/Network/defaults.ts

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

src/contexts/Network/index.tsx

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

src/library/Graphs/EraPoints.tsx

@@ -1,9 +1,11 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import {
   CategoryScale,
   Chart as ChartJS,
+  ChartOptions,
   Legend,
   LinearScale,
   LineElement,
@@ -33,9 +35,12 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => {
   const { mode } = useTheme();
   const { colors } = useNetwork().networkData;
 
-  const options = {
+  const options: ChartOptions<'line'> = {
     responsive: true,
     maintainAspectRatio: false,
+    interaction: {
+      mode: 'nearest',
+    },
     scales: {
       x: {
         border: {
@@ -66,8 +71,8 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => {
         },
         ticks: {
           display: true,
-          beginAtZero: false,
         },
+        beginAtZero: false,
       },
     },
     plugins: {
@@ -84,16 +89,13 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => {
         titleColor: graphColors.label[mode],
         bodyColor: graphColors.label[mode],
         bodyFont: {
-          weight: '600',
+          weight: 'bold',
         },
         callbacks: {
           title: () => [],
           label: (context: any) => `${context.parsed.y}`,
         },
         intersect: false,
-        interaction: {
-          mode: 'nearest',
-        },
       },
     },
   };

src/library/Graphs/PayoutBar.tsx

@@ -2,10 +2,12 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import BigNumber from 'bignumber.js';
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import {
   BarElement,
   CategoryScale,
   Chart as ChartJS,
+  ChartOptions,
   Legend,
   LinearScale,
   LineElement,
@@ -123,11 +125,12 @@ export const PayoutBar = ({ days, height }: PayoutBarProps) => {
     ],
   };
 
-  const options = {
+  const options: ChartOptions<'bar'> = {
     responsive: true,
     maintainAspectRatio: false,
-    barPercentage: 0.4,
-    maxBarThickness: 13,
+    interaction: {
+      mode: 'nearest',
+    },
     scales: {
       x: {
         stacked: true,
@@ -169,7 +172,7 @@ export const PayoutBar = ({ days, height }: PayoutBarProps) => {
         titleColor: graphColors.label[mode],
         bodyColor: graphColors.label[mode],
         bodyFont: {
-          weight: '600',
+          weight: 'bold',
         },
         callbacks: {
           title: () => [],

src/library/Graphs/PayoutLine.tsx

@@ -2,9 +2,11 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import BigNumber from 'bignumber.js';
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import {
   CategoryScale,
   Chart as ChartJS,
+  ChartOptions,
   Legend,
   LinearScale,
   LineElement,
@@ -124,9 +126,12 @@ export const PayoutLine = ({
       : colors.secondary[mode];
 
   // configure graph options
-  const options = {
+  const options: ChartOptions<'line'> = {
     responsive: true,
     maintainAspectRatio: false,
+    interaction: {
+      mode: 'nearest',
+    },
     scales: {
       x: {
         grid: {
@@ -141,7 +146,6 @@ export const PayoutLine = ({
       y: {
         ticks: {
           display: false,
-          beginAtZero: false,
         },
         border: {
           display: false,
@@ -161,7 +165,7 @@ export const PayoutLine = ({
         titleColor: graphColors.label[mode],
         bodyColor: graphColors.label[mode],
         bodyFont: {
-          weight: '600',
+          weight: 'bold',
         },
         callbacks: {
           title: () => [],
@@ -171,9 +175,6 @@ export const PayoutLine = ({
               .toFormat()} ${unit}`,
         },
         intersect: false,
-        interaction: {
-          mode: 'nearest',
-        },
       },
     },
   };

src/library/Help/index.tsx

@@ -53,8 +53,8 @@ export const Help = () => {
 
   if (definition) {
     // get items for active category
-    meta = Object.values(HelpConfig).find(
-      (c) => c?.definitions?.find((d) => d === definition)
+    meta = Object.values(HelpConfig).find((c) =>
+      c?.definitions?.find((d) => d === definition)
     );
   } else {
     // get all items

vs.code-workspace

@@ -1,10 +1,10 @@
 {
   "folders": [
     {
-      "path": "./"
-    }
+      "path": "./",
+    },
   ],
   "settings": {
-    "java.configuration.updateBuildConfiguration": "disabled"
-  }
+    "java.configuration.updateBuildConfiguration": "disabled",
+  },
 }