diff --git a/base/components/AppLayout/index.tsx b/base/components/AppLayout/index.tsx index a27eed0ad2..0f350ffba6 100644 --- a/base/components/AppLayout/index.tsx +++ b/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> = ({ children }) => { return ( + {isMobile && } { + 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 ( + +
+ + 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: + + + 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. + + + Lack of Liquidity: There may be no active market for $KLIMA, which may + result in losses if you need to sell your tokens quickly. + + + Regulatory Actions and Changes: The regulatory environment for + cryptocurrencies is evolving and changes in regulation could adversely + affect your investment. + + + 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. + + + 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. + + + 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. + + +
+
+ ); +}; diff --git a/base/components/DisclaimerModal/styles.ts b/base/components/DisclaimerModal/styles.ts new file mode 100644 index 0000000000..46f558ed97 --- /dev/null +++ b/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; +`;