Test: #73, #92, #28, #75, #80

CHANGELOG.md

@@ -9,29 +9,15 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED`
 changes.
 
 ## [Unreleased]
-
-### Added
--
+- Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81)
+- i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80)
 
 ### Fixed
 - Fixed vote calculation problems related to NoConfidence DRep [Issue 59](https://github.com/IntersectMBO/govtool/issues/59)
 - Fixed ada-holder/get-current-delegation error when delegated to NoConfidence or AlwaysAbstain dreps. [Issue 82](https://github.com/IntersectMBO/govtool/issues/82)
 
 ### Changed
 - Changed and improved working conventions docs, PR template and codeowners file, addressing [Issue 88](https://github.com/IntersectMBO/govtool/issues/88).
-
-### Removed
--
-
-## [sancho-v1.0.1](https://github.com/IntersectMBO/govtool/releases/tag/sancho-v1.0.1) 2023-12-XX
-
-### Added
--
-
-### Fixed
--
-
-### Changed
 - Changed Node version from 8.7.1-pre to 8.7.2 and Db-sync version from sancho-2-3-0 to sancho-3-0-0.
 - (`docs/update-working-conventions`) Addressing [Issue 25](https://github.com/IntersectMBO/govtool/issues/25) changed working conventions documentation to improve intended flows.
 

CODEOWNERS

@@ -1,21 +1,21 @@
 # GovTool Project Codeowners
 
 # These owners will be the default owners for everything in the repository.
-* @Ryun1 @kickloop
+* @kickloop @MSzalowski
 
 # Frontend assets templates
-govtool/frontend/*                                                          @Sworzen1 @JanJaroszczak @kickloop
-*.tsx                                                                       @Sworzen1 @JanJaroszczak @kickloop
-*.ts                                                                        @Sworzen1 @JanJaroszczak @kickloop
-*.css                                                                       @Sworzen1 @JanJaroszczak @kickloop
+govtool/frontend/*                                                          @MSzalowski @Sworzen1 @JanJaroszczak @kickloop
+*.tsx                                                                       @MSzalowski @Sworzen1 @JanJaroszczak @kickloop
+*.ts                                                                        @MSzalowski @Sworzen1 @JanJaroszczak @kickloop
+*.css                                                                       @MSzalowski @Sworzen1 @JanJaroszczak @kickloop
 
 # Backend
-govtool/backend/*                                                           @jankun4 @kickloop
+govtool/backend/*                                                           @MSzalowski @jankun4 @kickloop
 
 # DevOps
-.github/workflows/*                                                         @adgud @kickloop
-config/govtool/*                                                            @adgud @kickloop
-infra/terraform/*                                                           @adgud @kickloop
+.github/workflows/*                                                         @placek @adgud @kickloop
+config/govtool/*                                                            @placek @adgud @kickloop
+infra/terraform/*                                                           @placek @adgud @kickloop
 
 # Testing
 gov-action-loader/*                                                         @IntersectMBO/govtool-test @kickloop

govtool/backend/src/VVA/API.hs

@@ -46,6 +46,7 @@ type VVAApi =
                     :> QueryParam "sort" GovernanceActionSortMode
                     :> QueryParam "page" Natural
                     :> QueryParam "pageSize" Natural
+                    :> QueryParam "drepId" HexText
                     :> Get '[JSON] ListProposalsResponse
     :<|> "proposal" :> "get" :> Capture "proposalId" GovActionId :> QueryParam "drepId" HexText :> Get '[JSON] GetProposalResponse
     :<|> "epoch" :> "params" :> Get '[JSON] GetCurrentEpochParamsResponse
@@ -175,13 +176,26 @@ listProposals
   -> Maybe GovernanceActionSortMode
   -> Maybe Natural
   -> Maybe Natural
+  -> Maybe HexText
   -> m ListProposalsResponse
-listProposals selectedTypes sortMode mPage mPageSize = do
+listProposals selectedTypes sortMode mPage mPageSize mDrepRaw = do
   let page = (fromIntegral $ fromMaybe 0 mPage) :: Int
       pageSize = (fromIntegral $ fromMaybe 10 mPageSize) :: Int
 
+  -- proposals that the provided Drep has already voted on should be filtered out
+  proposalsToRemove <- case mDrepRaw of
+    Nothing -> return []
+    Just drepId ->
+      map (voteParamsProposalId . voteResponseVote)
+        <$> getVotes drepId [] Nothing
+
   CacheEnv {proposalListCache} <- asks vvaCache
   mappedAndSortedProposals <-
+    filter
+      ( \ProposalResponse {proposalResponseId} ->
+          proposalResponseId `notElem` proposalsToRemove
+      )
+      <$>
     mapSortAndFilterProposals selectedTypes sortMode
     <$> cacheRequest proposalListCache () Proposal.listProposals
 

govtool/frontend/package.json

@@ -11,7 +11,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",
-    "chromatic": "chromatic"
+    "chromatic": "chromatic",
+    "test": "vitest",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -28,11 +30,13 @@
     "buffer": "^6.0.3",
     "date-fns": "^2.30.0",
     "esbuild": "^0.19.8",
+    "i18next": "^23.7.19",
     "keen-slider": "^6.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.47.0",
+    "react-i18next": "^14.0.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.13.0",
     "storybook-addon-manual-mocks": "^1.0.3",
@@ -52,19 +56,25 @@
     "@storybook/react-vite": "^7.4.5",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.4.8",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/ui": "^1.1.0",
     "chromatic": "^10.0.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.14",
+    "jsdom": "^23.0.1",
     "storybook": "^7.4.5",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vitest": "^1.1.0"
   },
   "eslintConfig": {
     "extends": [

govtool/frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
-import { ScrollToTop } from "@atoms";
+import { Modal, ScrollToTop } from "@atoms";
 import { PATHS } from "@consts";
-import { useCardano } from "@context";
+import { useCardano, useModal } from "@context";
 import {
   DashboardCards,
   DashboardGovernanceActions,
@@ -23,6 +23,7 @@ import {
   DashboardGovernanceActionsCategory,
 } from "@pages";
 import {
+  callAll,
   getItemFromLocalStorage,
   WALLET_LS_KEY,
   removeItemFromLocalStorage,
@@ -34,6 +35,7 @@ export default function App() {
   const { enable, setDRep, setIsDrepLoading } = useCardano();
   const navigate = useNavigate();
   const { data } = useGetDRepInfo();
+  const { modal, openModal, modals } = useModal();
 
   useWalletConnectionListener();
 
@@ -118,6 +120,20 @@ export default function App() {
         <Route path="*" element={<ErrorPage />} />
         <Route path={PATHS.error} element={<ErrorPage />} />
       </Routes>
+      {modals[modal.type]?.component && (
+        <Modal
+          open={Boolean(modals[modal.type].component)}
+          handleClose={
+            !modals[modal.type].preventDismiss
+              ? callAll(modals[modal.type]?.onClose, () =>
+                  openModal({ type: "none", state: null })
+                )
+              : undefined
+          }
+        >
+          {modals[modal.type]?.component ?? <></>}
+        </Modal>
+      )}
     </>
   );
 }

govtool/frontend/src/components/atoms/CopyButton.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 
 import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
+import { useTranslation } from "@hooks";
 
 interface Props {
   isChecked?: boolean;
@@ -11,6 +12,8 @@ interface Props {
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();
+  const { t } = useTranslation();
+
   const iconSrc = useMemo(() => {
     if (variant === "blue") {
       return ICONS.copyBlueIcon;
@@ -29,7 +32,7 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
       alt="copy"
       onClick={(e) => {
         navigator.clipboard.writeText(text);
-        addSuccessAlert("Copied to clipboard.");
+        addSuccessAlert(t("alerts.copiedToClipboard"));
         e.stopPropagation();
       }}
       src={iconSrc}

govtool/frontend/src/components/atoms/LoadingButton.tsx

@@ -1,24 +1,37 @@
-import { Button, CircularProgress } from '@mui/material';
-import type { ButtonProps } from '@mui/material';
+import { Button, CircularProgress } from "@mui/material";
+import type { ButtonProps, SxProps } from "@mui/material";
 
-export type ButtonIntent = 'primary' | 'secondary';
-export interface ExtendedButtonProps extends Omit<ButtonProps, 'size'> {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- conflicting event types for form and button event handlers
-  onClick?: (e?: any) => void;
+interface Props extends Omit<ButtonProps, "size" | "sx"> {
+  isLoading?: boolean;
+  size?: "small" | "medium" | "large" | "extraLarge";
+  sx?: SxProps;
 }
 
-interface Props extends ExtendedButtonProps {
-  isLoading: boolean;
-}
+export const LoadingButton = ({
+  isLoading,
+  disabled,
+  children,
+  size = "large",
+  sx,
+  ...rest
+}: Props) => {
+  const buttonHeight = {
+    extraLarge: 48,
+    large: 40,
+    medium: 36,
+    small: 32,
+  }[size];
 
-export const LoadingButton = ({ isLoading, disabled, children, ...rest }: Props) => {
   return (
-    <Button disabled={disabled || isLoading} {...rest}>
-      {isLoading ? (
-        <CircularProgress />
-      ) : (
-        children
+    <Button
+      disabled={disabled || isLoading}
+      sx={{ height: buttonHeight, ...sx }}
+      {...rest}
+    >
+      {isLoading && (
+        <CircularProgress size={26} sx={{ position: "absolute" }} />
       )}
+      {children}
     </Button>
   );
-}
+};

govtool/frontend/src/components/atoms/StakeRadio.tsx

@@ -3,7 +3,11 @@ import { Box, IconButton, Typography } from "@mui/material";
 
 import { ICONS } from "@consts";
 import { theme } from "@/theme";
-import { useGetAdaHolderVotingPowerQuery, useScreenDimension } from "@/hooks";
+import {
+  useGetAdaHolderVotingPowerQuery,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
 import { correctAdaFormat } from "@/utils/adaFormat";
 
 type StakeRadioProps = {
@@ -21,6 +25,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
   const { isMobile } = useScreenDimension();
   const { powerIsLoading, votingPower } =
     useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -65,12 +70,11 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
         </Box>
         <Box alignItems="center" display="flex">
           <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
-            Voting power:
+            {t("votingPower")}
           </Typography>
           {powerIsLoading ? (
             <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
-              {" "}
-              Loading...
+              {t("loading")}
             </Typography>
           ) : (
             <Typography

govtool/frontend/src/components/atoms/VotingPowerChips.tsx

@@ -7,18 +7,19 @@ import {
   useGetAdaHolderVotingPowerQuery,
   useGetDRepVotingPowerQuery,
   useScreenDimension,
+  useTranslation,
 } from "@hooks";
 import { correctAdaFormat } from "@utils";
 import { Tooltip } from "@atoms";
-import { tooltips } from "@/consts/texts";
 
 export const VotingPowerChips = () => {
   const { dRep, stakeKey, isDrepLoading } = useCardano();
-  const { data: drepVotingPower, isLoading: drepPowerIsLoading } =
+  const { dRepVotingPower, isDRepVotingPowerLoading } =
     useGetDRepVotingPowerQuery();
   const { votingPower, powerIsLoading } =
     useGetAdaHolderVotingPowerQuery(stakeKey);
   const { isMobile, screenWidth } = useScreenDimension();
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -34,9 +35,9 @@ export const VotingPowerChips = () => {
     >
       {dRep?.isRegistered && (
         <Tooltip
-          heading={tooltips.votingPower.heading}
-          paragraphOne={tooltips.votingPower.paragraphOne}
-          paragraphTwo={tooltips.votingPower.paragraphTwo}
+          heading={t("tooltips.votingPower.heading")}
+          paragraphOne={t("tooltips.votingPower.paragraphOne")}
+          paragraphTwo={t("tooltips.votingPower.paragraphTwo")}
           placement={"bottom-end"}
           arrow
         >
@@ -51,10 +52,10 @@ export const VotingPowerChips = () => {
       )}
       {screenWidth >= 1024 && (
         <Typography color="#A5A6A5" sx={{ mr: 1.5 }} variant="body2">
-          Voting power:
+          {t("votingPower")}
         </Typography>
       )}
-      {(dRep?.isRegistered && drepPowerIsLoading) ||
+      {(dRep?.isRegistered && isDRepVotingPowerLoading) ||
       (!dRep?.isRegistered && powerIsLoading) ||
       isDrepLoading ? (
         <CircularProgress size={20} color="primary" />
@@ -67,7 +68,7 @@ export const VotingPowerChips = () => {
         >
           ₳{" "}
           {dRep?.isRegistered
-            ? correctAdaFormat(drepVotingPower) ?? 0
+            ? correctAdaFormat(dRepVotingPower) ?? 0
             : correctAdaFormat(votingPower) ?? 0}
         </Typography>
       )}

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

@@ -2,15 +2,17 @@ import { Box, Typography } from "@mui/material";
 
 import { useCardano } from "@context";
 import { CopyButton } from "@atoms";
+import { useTranslation } from "@hooks";
 
 export const DRepInfoCard = () => {
   const { dRepIDBech32 } = useCardano();
+  const { t } = useTranslation();
 
   return (
     <Box border={1} borderColor="#D6E2FF" py={1} px={2} borderRadius={3}>
       <Box sx={{ display: "flex", justifyContent: "space-between" }}>
         <Typography color="gray" fontSize={12} fontWeight={500}>
-          My DRep ID:
+          {t("myDRepId")}
         </Typography>
         <CopyButton text={dRepIDBech32} variant="blue" />
       </Box>