feature: MET-1450-1451-1466 add faq, terms, policy

src/AppContainer.tsx

@@ -18,12 +18,15 @@ const AppContainer: React.FC<Props> = (props) => {
   const { theme } = useSelector(({ user }: RootState) => user);
   const { children } = props;
   const location = useLocation();
-  const excludedRoutes: any = [
+  const excludedRoutes: string[] = [
     routers.SIGN_IN,
     routers.SIGN_UP,
     routers.FORGOT_PASSWORD,
     routers.RESET_PASSWORD,
-    routers.VERIFY_EMAIL
+    routers.VERIFY_EMAIL,
+    routers.FAQ,
+    routers.TERMS_AND_CONDITIONS,
+    routers.POLICY
   ];
   return (
     <ThemeProvider theme={themes[theme]}>

src/Routers.tsx

@@ -46,6 +46,9 @@ import InstantRewards from "./pages/InstantRewards";
 import { getAllBookmarks } from "./commons/utils/userRequest";
 import { NETWORK, NETWORK_TYPES } from "./commons/utils/constants";
 import { setOpenSyncBookmarkModal } from "./stores/user";
+import FAQ from "./pages/Refference/FAQ";
+import Policy from "./pages/Refference/Policy";
+import TermOfServices from "./pages/Refference/TermOfServices";
 
 const Routes: React.FC = () => {
   const { isLoggedIn } = useAuth();
@@ -119,6 +122,9 @@ const Routes: React.FC = () => {
           </Switch>
         </AccountLayout>
       </Route>
+      <Route path={routers.FAQ} exact component={FAQ} />
+      <Route path={routers.POLICY} exact component={Policy} />
+      <Route path={routers.TERMS_AND_CONDITIONS} exact component={TermOfServices} />
       <Route path={routers.NOT_FOUND} component={NotFound} />
     </Switch>
   );

src/commons/resources/index.ts

@@ -281,3 +281,4 @@ export { ReactComponent as RewardsAvailableIcon } from "./icons/rewards-availabl
 export { ReactComponent as StatusIcon } from "./icons/status-ic.svg";
 export { ReactComponent as RedeemerPlusIcon } from "./icons/redeemer-plus.svg";
 export { ReactComponent as RedeemerArrowDownIcon } from "./icons/redeemer-arrow-down.svg";
+export { ReactComponent as IRisLogo } from "./icons/iris-logo.svg";

src/commons/routers.ts

@@ -42,6 +42,9 @@ export const routers = {
   REPORT_GENERATED: "/report-generated/:tab",
   REPORT_GENERATED_STAKING_DETAIL: "/report-generated/:reportId/staking",
   REPORT_GENERATED_POOL_DETAIL: "/report-generated/:reportId/pool",
+  POLICY: "/policy",
+  FAQ: "/faq",
+  TERMS_AND_CONDITIONS: "/terms-and-conditions",
   NOT_FOUND: "/*"
 } as const;
 

src/components/commons/Layout/Footer/index.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { styled, Container } from "@mui/material";
+import { styled, Container, Box } from "@mui/material";
+import { Link } from "react-router-dom";
 
 import { APP_VERSION } from "src/commons/utils/constants";
+import { routers } from "src/commons/routers";
 
 import FooterMenu from "../Sidebar/FooterMenu";
 
@@ -41,6 +43,34 @@ const Copyright = styled("small")`
   }
 `;
 
+const RefContainer = styled(Box)`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justiy-content: center;
+  margin-right: 30px;
+  ${(props) => props.theme.breakpoints.down("md")} {
+    width: 100%;
+    justify-content: center;
+    margin: 10px 0px;
+  }
+  ${(props) => props.theme.breakpoints.down("sm")} {
+    flex-direction: column;
+    margin: 20px 0 40px 0;
+  }
+`;
+
+const DotDivide = styled(Box)`
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: ${(props) => props.theme.palette.green[650]};
+`;
+
+const LinkTo = styled(Link)`
+  color: ${(props) => `${props.theme.palette.blue[850]} !important`};
+`;
+
 const Footer: React.FC = () => {
   return (
     <StyledFooter data-testid="footer">
@@ -49,6 +79,19 @@ const Footer: React.FC = () => {
         <Copyright data-testid="footer-text">
           &copy; {new Date().getFullYear()} Cardano Foundation. All rights reserved. Version: {APP_VERSION}
         </Copyright>
+        <RefContainer>
+          <LinkTo to={routers.FAQ} target="_blank" rel="noopener noreferrer">
+            FAQ
+          </LinkTo>
+          <DotDivide />
+          <LinkTo to={routers.TERMS_AND_CONDITIONS} target="_blank" rel="noopener noreferrer">
+            Terms and Conditions
+          </LinkTo>
+          <DotDivide />
+          <LinkTo to={routers.POLICY} target="_blank" rel="noopener noreferrer">
+            Privacy Policy
+          </LinkTo>
+        </RefContainer>
       </FooterContainer>
     </StyledFooter>
   );