add disclaimer modal (#2403)

base/components/AppLayout/index.tsx

@@ -1,4 +1,5 @@
 import { Box, CssBaseline, useMediaQuery, useTheme } from "@mui/material";
+import { DisclaimerModal } from "components/DisclaimerModal";
 import { FC, ReactNode, useState } from "react";
 import { MobileHeader } from "../MobileHeader";
 import { Sidebar } from "../Sidebar";
@@ -20,6 +21,7 @@ export const Layout: FC<Readonly<LayoutProps>> = ({ children }) => {
 
   return (
     <Box sx={{ display: "flex" }}>
+      <DisclaimerModal />
       <CssBaseline />
       {isMobile && <MobileHeader onMenuClick={handleDrawerToggle} />}
       <Sidebar

base/components/DisclaimerModal/index.tsx

@@ -0,0 +1,75 @@
+import { ButtonPrimary, Text } from "@klimadao/lib/components";
+import { useScrollLock } from "@klimadao/lib/utils";
+import { Modal } from "components/Modal";
+import { isNil } from "lodash";
+import { FC, useEffect, useState } from "react";
+import * as styles from "./styles";
+
+export const DisclaimerModal: FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  useScrollLock(showModal);
+
+  useEffect(() => {
+    if (isNil(window?.sessionStorage?.getItem("disclaimer_accepted"))) {
+      setShowModal(true);
+    }
+  }, []);
+
+  const setDisclaimer = async () => {
+    window.sessionStorage.setItem("disclaimer_accepted", "");
+    setShowModal(false);
+  };
+
+  if (!showModal) {
+    return null;
+  }
+
+  return (
+    <Modal title="Risk Disclaimer" className={styles.modal}>
+      <div className={styles.content}>
+        <Text t="body2">
+          Purchasing cryptocurrencies, including the $KLIMA token, involves a
+          high degree of risk and should be considered extremely speculative.
+          Here are some important points to consider:
+        </Text>
+        <Text t="body2">
+          Loss of Investment: The value of $KLIMA and other cryptocurrencies can
+          rapidly increase or decrease at any time. As a result, you could
+          experience significant and rapid losses, including the loss of all
+          money invested.
+        </Text>
+        <Text t="body2">
+          Lack of Liquidity: There may be no active market for $KLIMA, which may
+          result in losses if you need to sell your tokens quickly.
+        </Text>
+        <Text t="body2">
+          Regulatory Actions and Changes: The regulatory environment for
+          cryptocurrencies is evolving and changes in regulation could adversely
+          affect your investment.
+        </Text>
+        <Text t="body2">
+          Operational Risks: The KlimaDAO platform relies on various
+          technologies related to the Base network and other digital assets.
+          These technologies are subject to change, and such changes could
+          adversely affect your investment.
+        </Text>
+        <Text t="body2">
+          No Guarantee: There is no guarantee that the KlimaDAO platform or the
+          $KLIMA token will achieve its objectives or that any value will be
+          retained in the Protocol.
+        </Text>
+        <Text t="body2">
+          This summary risk warning does not disclose all the risks associated
+          with investing in $KLIMA. You should conduct your own due diligence
+          and consult with a financial advisor before making any investment
+          decisions.
+        </Text>
+        <ButtonPrimary
+          className={styles.dislaimerButton}
+          label="Acknowledge and Accept"
+          onClick={setDisclaimer}
+        />
+      </div>
+    </Modal>
+  );
+};

base/components/DisclaimerModal/styles.ts

@@ -0,0 +1,41 @@
+import { css } from "@emotion/css";
+import breakpoints from "@klimadao/lib/theme/breakpoints";
+
+export const modal = css`
+  gap: 0;
+  width: 90%;
+  height: auto;
+  top: auto;
+  bottom: auto;
+
+  div:first-of-type {
+    p {
+      font-weight: 600;
+      font-size: 2.4rem;
+      font-family: var(--font-family-secondary);
+    }
+  }
+
+  ${breakpoints.medium} {
+    width: 48rem;
+    max-height: 100vh;
+  }
+`;
+
+export const content = css`
+  margin-top: 2rem;
+  p {
+    color: white !important;
+    display: flex;
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+    margin-bottom: 1.2rem;
+  }
+`;
+
+export const dislaimerButton = css`
+  width: 100%;
+  border: none;
+  margin-top: 2.4rem;
+  color: #fff !important;
+`;