feat: replace hardcoded sanchonet with the network from network metrics

CHANGELOG.md

@@ -12,7 +12,8 @@ changes.
 
 ### Added
 
--
+- Unsancho GovTool [Issue 1637](https://github.com/IntersectMBO/govtool/issues/1637)
+- Add network metrics model to frontend service
 
 ### Fixed
 
@@ -27,7 +28,6 @@ changes.
 ### Added
 
 - Add network name to GET /network/metrics [Issue 1644](https://github.com/IntersectMBO/govtool/issues/1644)
-- Add network metrics model to frontend service
 
 ### Fixed
 

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/.storybook/appContextMockProvider.tsx

@@ -0,0 +1,51 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+} from "react";
+
+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 AppContextMockProvider = ({ children }: PropsWithChildren) => {
+  const value = useMemo(
+    () => ({
+      networkName: "Mainnet",
+      network: "mainnet",
+      cExplorerBaseUrl: "https://cexplorer.io",
+    }),
+    [],
+  );
+
+  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 AppContextMockProvider.
+ * @returns The app context.
+ */
+const useAppContext = () => {
+  const context = useContext(AppContext);
+
+  if (!context) {
+    throw new Error(
+      "useAppContext must be used within an AppContextMockProvider",
+    );
+  }
+
+  return context;
+};
+
+export { AppContextMockProvider, useAppContext };

govtool/frontend/.storybook/preview.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { I18nextProvider } from "react-i18next";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
+
+import { AppContextMockProvider } from "./appContextMockProvider";
 import { ModalProvider } from "../src/context/modal";
 import i18n from "../src/i18n";
 import { theme } from "../src/theme";
@@ -22,32 +24,34 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => (
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <ModalProvider>
-            <I18nextProvider i18n={i18n}>
-              <MemoryRouter>
-                <Routes>
-                  <Route
-                    path="/*"
-                    element={
-                      <div
-                        style={{
-                          margin: "0px",
-                          padding: "0px",
-                          position: "relative",
-                        }}
-                      >
-                        <Story />
-                      </div>
-                    }
-                  />
-                </Routes>
-              </MemoryRouter>
-            </I18nextProvider>
-          </ModalProvider>
-        </ThemeProvider>
-      </QueryClientProvider>
+      <AppContextMockProvider>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider theme={theme}>
+            <ModalProvider>
+              <I18nextProvider i18n={i18n}>
+                <MemoryRouter>
+                  <Routes>
+                    <Route
+                      path="/*"
+                      element={
+                        <div
+                          style={{
+                            margin: "0px",
+                            padding: "0px",
+                            position: "relative",
+                          }}
+                        >
+                          <Story />
+                        </div>
+                      }
+                    />
+                  </Routes>
+                </MemoryRouter>
+              </I18nextProvider>
+            </ModalProvider>
+          </ThemeProvider>
+        </QueryClientProvider>
+      </AppContextMockProvider>
     ),
   ],
 };

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);