feat: replace hardcoded sanchonet with the network from network metrics

README.md

@@ -3,24 +3,23 @@
 </p>
 
 <p align="center">
-  <big><strong>Monorepo containing SanchoNet GovTool and supporting utilities</strong></big>
+  <big><strong>Monorepo containing Voltaire GovTool and supporting utilities</strong></big>
 </p>
 
 <div align="center">
 
 [![npm](https://img.shields.io/npm/v/npm.svg?style=flat-square)](https://www.npmjs.com/package/npm) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-
-[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=intersect-govtool&metric=ncloc)](https://sonarcloud.io/summary/overall?id=intersect-govtool) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=intersect-govtool&metric=coverage)](https://sonarcloud.io/summary/overall?id=intersect-govtool) [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=intersect-govtool&metric=sqale_index)](https://sonarcloud.io/summary/overall?id=intersect-govtool) 
+[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=intersect-govtool&metric=ncloc)](https://sonarcloud.io/summary/overall?id=intersect-govtool) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=intersect-govtool&metric=coverage)](https://sonarcloud.io/summary/overall?id=intersect-govtool) [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=intersect-govtool&metric=sqale_index)](https://sonarcloud.io/summary/overall?id=intersect-govtool)
 
 </div>
 
 <hr/>
 
 ## 🌄 Purpose
 
-The SanchoNet GovTool enables ada holders to experience some of the governance features described in [CIP-1694](https://github.com/cardano-foundation/CIPs/blob/master/CIP-1694/README.md) and to test governance features on [SanchoNet](https://sancho.network/) through a guided and straightforward experience.
-The SanchoNet GovTool is currently open for beta testing and can be accessed at [sanchogov.tools](https://sanchogov.tools/).
+The Voltaire GovTool enables ada holders to experience some of the governance features described in [CIP-1694](https://github.com/cardano-foundation/CIPs/blob/master/CIP-1694/README.md) and to test governance features.
+The Voltaire GovTool is currently open for preview testing and can be accessed at [preview.gov.tools](https://preview.gov.tools/).
 
 Learn more; [docs.sanchogov.tools](https://docs.sanchogov.tools/).
 

docs/operations/README.md

@@ -1,50 +1,53 @@
 # Overview
 
 The application is setup with the following tools:
-* Terraform - for creating infrastructure in AWS for each environment
-* Docker - to build and run application components
-* Docker Compose - to connect the application components together and deploy them as a stack
-* make - to simplify operations tasks
-* Prometheus - to gather metrics from application host and Docker containers
-* Grafana - to visualize metrics gathered from Prometheus and handle alerting
+
+- Terraform - for creating infrastructure in AWS for each environment
+- Docker - to build and run application components
+- Docker Compose - to connect the application components together and deploy them as a stack
+- make - to simplify operations tasks
+- Prometheus - to gather metrics from application host and Docker containers
+- Grafana - to visualize metrics gathered from Prometheus and handle alerting
 
 # Environments
 
 The application is hosted on AWS, there are several application environments, each of them is described with Terraform in `src/terraform/main.tf` file. Terraform is executed manually, in order to add/modify/delete an environment, modify the code and run `terraform plan` to see the changes and `terraform apply` to execute them.
 
 Each environment consists of:
 
-* VPC network (with subnets, route tables, IGW)
-* Security Groups
-* EC2 instance
-* Elastic IPs associated with EC2 instance
-* Route 53 record (only for environments using `govtool.byron.network` domain)
+- VPC network (with subnets, route tables, IGW)
+- Security Groups
+- EC2 instance
+- Elastic IPs associated with EC2 instance
+- Route 53 record (only for environments using `govtool.byron.network` domain)
 
 For each environment, the frontend is hosted at root and the backend is at `/api`.
 
 ## List of public environments
 
 ### beta
 
-A beta environment connected to `sanchonet` Cardano network.
+A beta environment connected to `preview` Cardano network.
 
-Available at https://sanchogov.tools/. The DNS record for this domain is created manually.
+Available at https://preview.gov.tools/. The DNS record for this domain is created manually.
 
 # Deployment
 
 Deployment is performed via GitHub Actions workflow (`.github/workflows/build-and-deploy.yml`).
 
 The workflow performs the following steps:
-* check if the environment is defined in Terraform (to avoid deployment attempt to inexistant environment)
-* build of frontend app
-* build of backend app
-* generate configuration files and upload them (over SSH) to the target environment
-* setup the application compoments with Docker Compose on the target environment
+
+- check if the environment is defined in Terraform (to avoid deployment attempt to inexistant environment)
+- build of frontend app
+- build of backend app
+- generate configuration files and upload them (over SSH) to the target environment
+- setup the application compoments with Docker Compose on the target environment
 
 The workflow can be triggered directly from GitHub Actions panel. When ruuning the workflow, you need to specify:
-* Cardano network to be used
-* environment name
-* optionally skip the build process (frontend and backend) - useful when there are plain configuration changes that do not require the application to be rebuild
+
+- Cardano network to be used
+- environment name
+- optionally skip the build process (frontend and backend) - useful when there are plain configuration changes that do not require the application to be rebuild
 
 # Monitoring
 

govtool/frontend/index.html

@@ -10,7 +10,7 @@
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SanchoNet Govtool</title>
+    <title>Voltaire Govtool</title>
     <style>
       html,
       body {

govtool/frontend/maintenance-page/index.html

@@ -153,12 +153,10 @@
       <div>
         <h1 class="heading">GovTool is down</h1>
         <h2 class="text">
-          The SanchoNet GovTool Beta is currently down for maintenance.
-          SanchoNet Govtool is connected to SanchoNet testnet, which 
-          means that if the network gets upgraded with new features 
-          Govtool needs to be updated too.
-
-          Please try again later.
+          The Voltaire GovTool is currently down for maintenance. Voltaire
+          Govtool is connected to Preview testnet, which means that if the
+          network gets upgraded with new features Govtool needs to be updated
+          too. Please try again later.
         </h2>
         <!-- <a href="" class="status">Status tracker</a> -->
       </div>

govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx

@@ -2,7 +2,7 @@ import { Box, Divider } from "@mui/material";
 
 import { Button, Typography } from "@atoms";
 import { primaryBlue } from "@consts";
-import { useModal } from "@context";
+import { useAppContext, useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab, testIdFromLabel } from "@utils";
 
@@ -22,13 +22,14 @@ export const AutomatedVotingCard = ({
   votingPower,
   transactionId,
 }: AutomatedVotingCardProps) => {
+  const { cExplorerBaseUrl } = useAppContext();
   const { isMobile, screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
   const testIdLabel = testIdFromLabel(title);
 
   const onClickShowTransaction = () =>
-    openInNewTab(`https://sancho.cexplorer.io/tx/${transactionId}`);
+    openInNewTab(`${cExplorerBaseUrl}/tx/${transactionId}`);
 
   return (
     <Card

govtool/frontend/src/components/molecules/DashboardActionCard.tsx

@@ -4,6 +4,7 @@ import { FC, ReactNode } from "react";
 import { Button, LoadingButtonProps, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
+import { useAppContext } from "@context";
 
 import { Card } from "./Card";
 
@@ -25,6 +26,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const { cExplorerBaseUrl } = useAppContext();
   const {
     buttons,
     children,
@@ -41,7 +43,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
   const { screenWidth } = useScreenDimension();
 
   const onClickShowTransaction = () =>
-    openInNewTab(`https://sancho.cexplorer.io/tx/${transactionId}`);
+    openInNewTab(`${cExplorerBaseUrl}/tx/${transactionId}`);
 
   return (
     <Card

govtool/frontend/src/components/molecules/GovernanceActionCardMyVote.tsx

@@ -4,6 +4,7 @@ import { Button, Typography, VotePill } from "@atoms";
 import { openInNewTab } from "@utils";
 import { useTranslation } from "@hooks";
 import { Vote } from "@models";
+import { useAppContext } from "@context";
 
 type Props = {
   voteTxHash: string;
@@ -12,6 +13,7 @@ type Props = {
 
 export const GovernanceActionCardMyVote = ({ voteTxHash, vote }: Props) => {
   const { t } = useTranslation();
+  const { cExplorerBaseUrl } = useAppContext();
 
   return (
     <Box data-testid="my-vote" mb="20px">
@@ -41,9 +43,7 @@ export const GovernanceActionCardMyVote = ({ voteTxHash, vote }: Props) => {
           <VotePill vote={vote} />
         </Box>
         <Button
-          onClick={() =>
-            openInNewTab(`https://sancho.cexplorer.io/tx/${voteTxHash}`)
-          }
+          onClick={() => openInNewTab(`${cExplorerBaseUrl}/tx/${voteTxHash}`)}
           variant="text"
           size="small"
           sx={{

govtool/frontend/src/components/organisms/RegisterAsDRepSteps/WhatRetirementMeans.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import * as Sentry from "@sentry/react";
 
 import { Typography } from "@atoms";
-import { useCardano, useModal } from "@context";
+import { useCardano, useModal, useAppContext } from "@context";
 import {
   useGetVoterInfo,
   useScreenDimension,
@@ -17,6 +17,7 @@ export const WhatRetirementMeans = ({
 }: {
   onClickCancel: () => void;
 }) => {
+  const { cExplorerBaseUrl } = useAppContext();
   const {
     isPendingTransaction,
     buildDRepRetirementCert,
@@ -60,7 +61,7 @@ export const WhatRetirementMeans = ({
           state: {
             buttonText: t("modals.common.goToDashboard"),
             dataTestId: "retirement-transaction-submitted-modal",
-            link: `https://sancho.cexplorer.io/tx/${result}`,
+            link: `${cExplorerBaseUrl}/tx/${result}`,
             message: t("modals.retirement.message"),
             onSubmit,
             status: "success",

govtool/frontend/src/components/organisms/RegisterAsDirectVoterBox.tsx

@@ -6,10 +6,11 @@ import * as Sentry from "@sentry/react";
 import { PATHS } from "@consts";
 import { RegisterAsDirectVoterBoxContent } from "@organisms";
 import { CenteredBoxBottomButtons } from "@molecules";
-import { useCardano, useModal } from "@context";
+import { useAppContext, useCardano, useModal } from "@context";
 import { useGetVoterInfo, useWalletErrorModal } from "@hooks";
 
 export const RegisterAsDirectVoterBox = () => {
+  const { cExplorerBaseUrl } = useAppContext();
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const { buildSignSubmitConwayCertTx, buildDRepRegCert, buildDRepUpdateCert } =
@@ -42,7 +43,7 @@ export const RegisterAsDirectVoterBox = () => {
             status: "success",
             title: t("modals.registration.title"),
             message: t("modals.registration.message"),
-            link: `https://sancho.cexplorer.io/tx/${result}`,
+            link: `${cExplorerBaseUrl}/tx/${result}`,
             buttonText: t("modals.common.goToDashboard"),
             onSubmit: () => {
               navigate(PATHS.dashboard);

govtool/frontend/src/consts/images.ts

@@ -1,5 +1,5 @@
 export const IMAGES = {
-  appLogo: "/images/SanchoLogo.png",
+  appLogo: "/images/AppLogo.png",
   appLogoWithoutText: "/images/AppLogoWithoutText.png",
   bgBlue: "/images/BGBlue.png",
   bgOrange: "/images/BGOrange.png",

govtool/frontend/src/consts/index.ts

@@ -12,3 +12,15 @@ export * from "./placeholders";
 export * from "./queryKeys";
 
 export const DRAWER_WIDTH = 268;
+export const NETWORK_NAMES = {
+  sanchonet: "SanchoNet",
+  preview: "Preview",
+  testnet: "TestNet",
+  mainnet: "MainNet",
+};
+export const CEXPLORER_BASE_URLS = {
+  sanchonet: "https://sancho.cexplorer.io",
+  preview: "https://preview.cexplorer.io",
+  testnet: "https://testnet.cexplorer.io",
+  mainnet: "https://cexplorer.io",
+};

govtool/frontend/src/context/appContext.tsx

@@ -0,0 +1,68 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
+import * as Sentry from "@sentry/react";
+
+import { NETWORK_NAMES, CEXPLORER_BASE_URLS } from "@/consts";
+import { useGetNetworkMetrics } from "@/hooks";
+
+type AppContextType = {
+  networkName: string;
+  network: string;
+  cExplorerBaseUrl: string;
+};
+
+const AppContext = createContext<AppContextType | null>(null);
+
+/**
+ * Provides app context to its children components.
+ *
+ * @param children - The child components to render.
+ */
+const AppContextProvider = ({ children }: PropsWithChildren) => {
+  useEffect(() => {
+    Sentry.setTag("component_name", "AppContextProvider");
+  }, []);
+
+  const { networkMetrics } = useGetNetworkMetrics();
+
+  const value = useMemo(
+    () => ({
+      networkName:
+        NETWORK_NAMES[
+          (networkMetrics?.networkName as keyof typeof NETWORK_NAMES) ||
+            "preview"
+        ],
+      network: networkMetrics?.networkName || "preview",
+      cExplorerBaseUrl:
+        CEXPLORER_BASE_URLS[
+          (networkMetrics?.networkName as keyof typeof NETWORK_NAMES) ||
+            "preview"
+        ],
+    }),
+    [networkMetrics],
+  );
+
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+/**
+ * Custom hook that provides access to the app context.
+ * Throws an error if used outside of an AppContextProvider.
+ * @returns The app context.
+ */
+const useAppContext = () => {
+  const context = useContext(AppContext);
+
+  if (!context) {
+    throw new Error("useAppContext must be used within an AppContextProvider");
+  }
+
+  return context;
+};
+
+export { AppContextProvider, useAppContext };

govtool/frontend/src/context/contextProviders.tsx

@@ -1,3 +1,4 @@
+import { AppContextProvider } from "./appContext";
 import { CardanoProvider, useCardano } from "./wallet";
 import { ModalProvider, useModal } from "./modal";
 import { SnackbarProvider, useSnackbar } from "./snackbar";
@@ -10,17 +11,19 @@ interface Props {
 }
 
 const ContextProviders = ({ children }: Props) => (
-  <GovernanceActionProvider>
-    <FeatureFlagProvider>
-      <ModalProvider>
-        <SnackbarProvider>
-          <DataActionsBarProvider>
-            <CardanoProvider>{children}</CardanoProvider>
-          </DataActionsBarProvider>
-        </SnackbarProvider>
-      </ModalProvider>
-    </FeatureFlagProvider>
-  </GovernanceActionProvider>
+  <AppContextProvider>
+    <GovernanceActionProvider>
+      <FeatureFlagProvider>
+        <ModalProvider>
+          <SnackbarProvider>
+            <DataActionsBarProvider>
+              <CardanoProvider>{children}</CardanoProvider>
+            </DataActionsBarProvider>
+          </SnackbarProvider>
+        </ModalProvider>
+      </FeatureFlagProvider>
+    </GovernanceActionProvider>
+  </AppContextProvider>
 );
 
 export { ContextProviders, useCardano, useModal, useSnackbar };

govtool/frontend/src/context/index.ts

@@ -1,3 +1,4 @@
+export * from "./appContext";
 export * from "./contextProviders";
 export * from "./dataActionsBar";
 export * from "./modal";