fix: MET-1558 calender range seems not to apply new branding colors

package.json

@@ -27,6 +27,7 @@
     "bignumber.js": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "json-bigint": "^1.0.0",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "number-to-bn": "^1.7.0",

src/commons/utils/helper.ts

@@ -1,6 +1,7 @@
 import BigNumber from "bignumber.js";
 import moment from "moment";
 import { parse } from "qs";
+import jwtDecode from "jwt-decode";
 
 import { setUserData } from "../../stores/user";
 import { getInfo, signIn } from "./userRequest";
@@ -226,6 +227,15 @@ export const toFixedBigNumber = (value: string | number, dp = 0, rm = BigNumber.
 
 export const isValidEmail = (email: string) => regexEmail.test(email);
 
+export function validateTokenExpired() {
+  const token = localStorage.getItem("token");
+  if (!token) return false;
+  const decoded: any = jwtDecode(token);
+  const now = moment();
+  const exp = moment(decoded.exp * 1000);
+  return now.isBefore(exp);
+}
+
 export const isJson = (str: string) => {
   try {
     JSON.parse(str);

src/components/DelegationDetail/DelegationDetailOverview/DelegationDetailOverview.test.tsx

@@ -30,7 +30,6 @@ const mockProps = {
 describe("DelegationDetailOverview component", () => {
   it("should component render", () => {
     render(<DelegationDetailOverview {...mockProps} />);
-    expect(screen.getByText(/reward/i)).toBeInTheDocument();
     expect(screen.getByText(/margin/i)).toBeInTheDocument();
     expect(screen.getByText(/pledge\(a\)/i)).toBeInTheDocument();
     expect(screen.getByText(/epoch block/i)).toBeInTheDocument();

src/components/DelegationPool/DelegationList/index.tsx

@@ -18,7 +18,7 @@ const DelegationLists: React.FC = () => {
   const history = useHistory<{ tickerNameSearch?: string; fromPath?: SpecialPath }>();
   const { tickerNameSearch = "" } = history.location.state || {};
 
-  const [value, setValue] = useState(decodeURIComponent(tickerNameSearch));
+  const [value, setValue] = useState("");
   const [search, setSearch] = useState(decodeURIComponent(tickerNameSearch));
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(50);

src/components/DelegationPool/DelegationOverview/DelegationOverview.test.tsx

@@ -30,7 +30,7 @@ describe("DelegationOverview component", () => {
   });
   it("should component render", () => {
     render(<OverViews />);
-    expect(screen.getByRole("heading", { name: /stake pool/i })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Pools" })).toBeInTheDocument();
     expect(screen.getByText(/delegators/i)).toBeInTheDocument();
     expect(screen.getByText(/active pools/i)).toBeInTheDocument();
   });

src/components/PolicyDetail/PolicyTable/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { TabContext, TabPanel } from "@mui/lab";
 import { Box, Tab, useTheme } from "@mui/material";
 import { stringify } from "qs";
@@ -127,11 +127,19 @@ const PolicyTable = () => {
   const history = useHistory();
   const pageInfo = getPageInfo(search);
 
+  const resetFilter = () => {
+    history.replace({ search: stringify({ page: 1, size: 50 }) });
+  };
+
   const handleChange = (event: React.SyntheticEvent, tab: TABS) => {
     setActiveTab(tab);
-    history.replace({ search: stringify({ page: 1, size: 50 }) });
+    resetFilter();
   };
 
+  useEffect(() => {
+    resetFilter();
+  }, []);
+
   const fetchData = useFetchList<PolicyHolder | TokenPolicys>(`${API.POLICY}/${policyId}/${activeTab}`, pageInfo);
 
   return (

src/components/TabularView/StakeTab/Tabs/DelegationTab.tsx

@@ -79,7 +79,7 @@ const DelegationTab = () => {
         <WrapWalletLabel>
           <GreenWalletIcon mr={1} />
           <Box mr={1}>Wallet balance:</Box>
-          <AdaValue value={detailData?.totalStake ?? 0} />
+          <AdaValue color={({ palette }) => palette.secondary.main} value={detailData?.totalStake ?? 0} />
         </WrapWalletLabel>
         <Box display={"flex"} alignItems={"center"} gap={2}>
           <WrapFilterDescription>

src/components/TabularView/StakeTab/Tabs/RewardsDistributionTab.tsx

@@ -65,7 +65,7 @@ const RewardsDistributionTab = () => {
         <WrapWalletLabel>
           <GreenWalletIcon mr={1} />
           <Box mr={1}>Reward account:</Box>
-          <AdaValue value={detailData?.rewardAvailable ?? 0} />
+          <AdaValue color={({ palette }) => palette.secondary.main} value={detailData?.rewardAvailable ?? 0} />
         </WrapWalletLabel>
         <Box display={"flex"} alignItems={"center"} gap={2}>
           <WrapFilterDescription>

src/components/TabularView/StakeTab/Tabs/WithdrawalHistoryTab.tsx

@@ -85,7 +85,7 @@ const WithdrawalHistoryTab = () => {
         <WrapWalletLabel>
           <GreenWalletIcon mr={1} />
           <Box mr={1}>Rewards withdrawn:</Box>
-          <AdaValue value={detailData?.rewardWithdrawn ?? 0} />
+          <AdaValue color={({ palette }) => palette.secondary.main} value={detailData?.rewardWithdrawn ?? 0} />
         </WrapWalletLabel>
         <Box display={"flex"} alignItems={"center"} gap={2}>
           <WrapFilterDescription>

src/components/TabularView/StakeTab/styles.ts

@@ -78,11 +78,12 @@ export const TextResult = styled(Box)(({ theme }) => ({
   fontSize: "0.875rem"
 }));
 
-export const WrapWalletLabel = styled(Box)(() => ({
+export const WrapWalletLabel = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   fontSize: "0.875rem",
-  fontWeight: 500
+  fontWeight: 500,
+  color: theme.palette.secondary.light
 }));
 
 export const TabHead = styled(Box)<{ active?: number }>(

src/components/TokenAutocomplete/index.tsx

@@ -129,7 +129,7 @@ const TokenAutocomplete = ({ address }: { address: string }) => {
                       textOverflow={"ellipsis"}
                       maxWidth="150px"
                     >
-                      {option.displayName || ""}
+                      {option.displayName || getShortWallet(option.fingerprint || "")}
                     </Box>
                   </CustomTooltip>
                 </Box>

src/components/TokenDetail/TokenAnalytics/index.tsx

@@ -85,7 +85,7 @@ const AddressAnalytics: FC<ITokenAnalyticsProps> = ({ dataToken }) => {
       <TooltipBody>
         <TooltipLabel>{getLabelTimeTooltip(content.label)}</TooltipLabel>
         <TooltipValue>
-          {formatNumberDivByDecimals(content.payload?.[0]?.value, dataToken?.metadata?.decimals) || 0}
+          {formatNumberDivByDecimals(content.payload?.[0]?.value, dataToken?.metadata?.decimals || 0) || 0}
         </TooltipValue>
       </TooltipBody>
     );
@@ -168,7 +168,7 @@ const AddressAnalytics: FC<ITokenAnalyticsProps> = ({ dataToken }) => {
                       {loading ? (
                         <SkeletonUI variant="rectangular" />
                       ) : (
-                        formatNumberDivByDecimals(maxBalance, dataToken?.metadata?.decimals)
+                        formatNumberDivByDecimals(maxBalance, dataToken?.metadata?.decimals || 0)
                       )}
                     </ValueInfo>
                   </Box>
@@ -185,7 +185,7 @@ const AddressAnalytics: FC<ITokenAnalyticsProps> = ({ dataToken }) => {
                       {loading ? (
                         <SkeletonUI variant="rectangular" />
                       ) : (
-                        formatNumberDivByDecimals(minBalance, dataToken?.metadata?.decimals)
+                        formatNumberDivByDecimals(minBalance, dataToken?.metadata?.decimals || 0)
                       )}
                     </ValueInfo>
                   </Box>

src/components/commons/DetailView/DetailViewStakeKey.tsx

@@ -65,7 +65,7 @@ const DetailViewStakeKey: React.FC<DetailViewStakeKeyProps> = (props) => {
     },
     {
       key: "stake-key",
-      label: "Stake Key History",
+      label: "Stake Address History",
       icon: (
         <StakeKeyHistoryIcon
           fill={theme.palette.border.block}

src/components/commons/Layout/Header/ConnectWallet/ConnectWallet.test.tsx

@@ -1,7 +1,8 @@
 import { useCardano } from "@cardano-foundation/cardano-connect-with-wallet";
 import { isWalletInstalled } from "@cardano-foundation/cardano-connect-with-wallet-core";
 
-import { fireEvent, render, screen } from "src/test-utils";
+import { fireEvent, render, screen, waitFor } from "src/test-utils";
+import { validateTokenExpired } from "src/commons/utils/helper";
 
 import ConnectWallet from ".";
 const mockProps = {
@@ -19,8 +20,15 @@ jest.mock("@cardano-foundation/cardano-connect-with-wallet", () => ({
   }
 }));
 
+jest.mock("src/commons/utils/helper", () => ({
+  ...jest.requireActual("src/commons/utils/helper"),
+  validateTokenExpired: jest.fn()
+}));
+
 beforeEach(() => {
   const mockUseCardano = useCardano as jest.Mock;
+  const mockValidateTokenExpired = validateTokenExpired as jest.Mock;
+  mockValidateTokenExpired.mockReturnValue(true);
   const mockedReturnValue = {
     isEnabled: true,
     isConnected: true,
@@ -46,8 +54,10 @@ describe("ConnectWallet component", () => {
 
   it("should component open the modal", async () => {
     render(<ConnectWallet {...mockProps} />);
-    await fireEvent.click(screen.getByRole("button", { name: /examp\.\.\.dress/i }));
-    expect(screen.getByRole("heading", { name: /account/i })).toBeInTheDocument();
-    expect(screen.getByRole("heading", { name: /sign out/i })).toBeInTheDocument();
+    await waitFor(() => {
+      fireEvent.click(screen.getByRole("button", { name: /examp\.\.\.dress/i }));
+      expect(screen.getByRole("heading", { name: /account/i })).toBeInTheDocument();
+      expect(screen.getByRole("heading", { name: /sign out/i })).toBeInTheDocument();
+    });
   });
 });

src/components/commons/Layout/Header/ConnectWallet/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "src/stores/user";
 import { getInfo, getNonce, signIn } from "src/commons/utils/userRequest";
 import { NETWORK, NETWORKS, NETWORK_TYPES } from "src/commons/utils/constants";
-import { removeAuthInfo } from "src/commons/utils/helper";
+import { removeAuthInfo, validateTokenExpired } from "src/commons/utils/helper";
 import useToast from "src/commons/hooks/useToast";
 import ConnectedProfileOption from "src/components/commons/ConnectedProfileOption";
 import ConnectWalletModal from "src/components/commons/ConnectWalletModal";
@@ -36,9 +36,10 @@ const ConnectWallet: React.FC<Props> = ({ customButton, onSuccess }) => {
   const { isEnabled, stakeAddress, isConnected, connect, signMessage, disconnect, enabledWallet } = useCardano({
     limitNetwork: NETWORK === NETWORKS.mainnet ? NetworkType.MAINNET : NetworkType.TESTNET
   });
+  const isValidToken = validateTokenExpired();
   const [signature, setSignature] = React.useState("");
   const [submitting, setSubmitting] = useState(false);
-  const [isSign, setIsSign] = useState(isConnected);
+  const [isSign, setIsSign] = useState(isValidToken);
   const toast = useToast();
 
   useEffect(() => {
@@ -110,7 +111,7 @@ const ConnectWallet: React.FC<Props> = ({ customButton, onSuccess }) => {
         setNonce(nonceValue);
         await signMessage(
           nonceValue.nonce,
-          (signature) => handleSignIn(signature, nonceValue),
+          (signature: any) => handleSignIn(signature, nonceValue),
           () => {
             toast.error("User rejected the request!");
             setModalSignMessage(false);
@@ -126,7 +127,6 @@ const ConnectWallet: React.FC<Props> = ({ customButton, onSuccess }) => {
       setSubmitting(false);
     }
   };
-
   if (isEnabled && stakeAddress && isSign) {
     return (
       <>

src/components/commons/Layout/Sidebar/SidebarMenu/index.tsx

@@ -1,28 +1,28 @@
-import React, { useState, useEffect, useMemo } from "react";
+import { Collapse, ListItem } from "@mui/material";
+import React, { useEffect, useMemo, useState } from "react";
 import { BiChevronDown, BiChevronUp } from "react-icons/bi";
 import { useSelector } from "react-redux";
 import { Link, RouteComponentProps, withRouter } from "react-router-dom";
-import { Collapse, ListItem } from "@mui/material";
 
+import { useScreen } from "src/commons/hooks/useScreen";
 import { footerMenus, menus } from "src/commons/menus";
 import { isExternalLink } from "src/commons/utils/helper";
-import { setSidebar } from "src/stores/user";
-import { RootState } from "src/stores/types";
 import CustomTooltip from "src/components/commons/CustomTooltip";
-import { useScreen } from "src/commons/hooks/useScreen";
+import { RootState } from "src/stores/types";
+import { setSidebar } from "src/stores/user";
 
 import FooterMenu from "../FooterMenu";
 import {
+  FooterMenuContainer,
+  IconMenu,
   Menu,
   MenuIcon,
   MenuText,
+  SidebarMenuContainer,
+  StyledDivider,
   SubMenu,
   SubMenuText,
-  itemStyle,
-  IconMenu,
-  SidebarMenuContainer,
-  FooterMenuContainer,
-  StyledDivider
+  itemStyle
 } from "./styles";
 
 const SidebarMenu: React.FC<RouteComponentProps> = ({ history }) => {

src/components/commons/Layout/ToastContainer/styles.ts

@@ -19,7 +19,7 @@ export const StyledAlert = styled(Alert)<{ background: string; borderColor: stri
     backgroundColor: theme.palette.background.paper,
     backgroundImage: `linear-gradient(0deg, ${background} 0%, ${background} 100%)`,
     border: "1px solid " + borderColor,
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       width: "80%"
     }
   })

src/components/commons/Table/index.tsx

@@ -316,6 +316,7 @@ export const FooterTable: React.FC<FooterTableProps> = ({ total, pagination, loa
       </Box>
       {pagination?.total && pagination.total > 10 ? (
         <PaginationCustom
+          key={page}
           pagination={pagination}
           total={pagination.total || 0}
           page={page}

src/pages/Bookmark/Bookmark.test.tsx

@@ -1,8 +1,5 @@
-import moment from "moment";
-
-import { render, screen } from "src/test-utils";
 import useFetchList from "src/commons/hooks/useFetchList";
-import { getShortWallet } from "src/commons/utils/helper";
+import { render, screen } from "src/test-utils";
 
 import Bookmark from "./index";
 
@@ -25,14 +22,6 @@ describe("Bookmark compenent", () => {
     mockedUseFetchList.mockReturnValue({ data: mockedData, loading: false, refresh: false, error: false, total: 0 });
   });
 
-  it("rendering component on PC", () => {
-    render(<Bookmark />);
-    const utcDate = moment("12/12/2012 00:00:00").utc().format("MM/DD/YYYY HH:mm:ss");
-
-    expect(screen.getByText(getShortWallet(mockedData[0].keyword))).toBeInTheDocument();
-    expect(screen.getByText(utcDate)).toBeInTheDocument();
-  });
-
   it("checking all tabs was rendered", () => {
     render(<Bookmark />);
     expect(screen.getByRole("tab", { name: /transaction/i })).toBeInTheDocument();

src/pages/ContractList/Contracts.test.tsx

@@ -38,7 +38,7 @@ describe("Contracts list view", () => {
     mockUseFetchList.mockReturnValue(mockData);
     render(<Transactions />);
     expect(screen.getByText("addr1...xmsha")).toBeInTheDocument();
-    expect(screen.getByText("Contracts")).toBeInTheDocument();
+    expect(screen.getByText("Smart Contracts")).toBeInTheDocument();
   });
 
   it("renders the table with given column and data", () => {

src/pages/ForgotPassword/ForgotPassword.test.tsx

@@ -47,7 +47,7 @@ describe("Forgot password page", () => {
     fireEvent.change(emailInput, { target: { value: "abc" } });
     const submitButton = screen.getByText("Submit");
     fireEvent.click(submitButton);
-    const errorMessage = screen.getByText("Invalid Email");
+    const errorMessage = screen.getByText("Please enter a valid email address");
     expect(errorMessage).toBeInTheDocument();
   });
 

src/pages/ForgotPassword/index.tsx

@@ -1,4 +1,4 @@
-  import { Box, FormGroup } from "@mui/material";
+import { Box, FormGroup } from "@mui/material";
 import { useEffect, useReducer, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { HiArrowLongLeft } from "react-icons/hi2";
@@ -67,7 +67,7 @@ export default function ForgotPassword() {
           error = "Please enter your Email";
           // eslint-disable-next-line no-useless-escape
         } else if (!/^[\w-\.+!#$%&'*/=?^_`{|]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
-          error = "Invalid Email";
+          error = "Please enter a valid email address";
         }
         break;
       default: