diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index 503dd67..1345bfe 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -4,6 +4,7 @@ import { Outlet, ScrollRestoration } from "react-router-dom"
import { Navbar } from "@common/Navbar"
import { Footer } from "@common/Footer"
import { Geoblock } from "@common/Geoblock"
+import { TermsDisclaimer } from "@common/TermsDisclaimer"
const App = () => {
return (
@@ -13,6 +14,8 @@ const App = () => {
+
+
)
diff --git a/frontend/src/components/common/TermsDisclaimer/index.tsx b/frontend/src/components/common/TermsDisclaimer/index.tsx
new file mode 100644
index 0000000..cd0f509
--- /dev/null
+++ b/frontend/src/components/common/TermsDisclaimer/index.tsx
@@ -0,0 +1,138 @@
+import { useState } from "react"
+import {
+ Button,
+ Checkbox,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ Link,
+ Modal,
+ ModalDialog,
+} from "@mui/joy"
+import { Link as RouterLink } from "react-router-dom"
+import { Controller, useForm } from "react-hook-form"
+
+import { stylesOnlyAt } from "@utils/styles"
+
+const DISCLAIMER_URL = "https://static.levana.finance/legal/disclaimer.pdf"
+const TERMS_ACCEPTED_KEY = "terms_accepted"
+const TERMS_ACCEPTED_VALUE = "true"
+
+interface DisclaimerFormValues {
+ readTerms: boolean
+ agreeTerms: boolean
+}
+
+const TermsDisclaimer = () => {
+ const [accepted, setAccepted] = useState(
+ localStorage.getItem(TERMS_ACCEPTED_KEY) === TERMS_ACCEPTED_VALUE,
+ )
+
+ const form = useForm({
+ defaultValues: {
+ readTerms: false,
+ agreeTerms: false,
+ },
+ })
+
+ const onSubmit = (formValues: DisclaimerFormValues) => {
+ const readTerms = formValues.readTerms
+ const agreeTerms = formValues.agreeTerms
+
+ if (readTerms && agreeTerms) {
+ localStorage.setItem(TERMS_ACCEPTED_KEY, TERMS_ACCEPTED_VALUE)
+ setAccepted(true)
+ } else {
+ return Promise.reject()
+ }
+ }
+
+ const canSubmit = form.formState.isValid
+
+ return (
+
+
+
+ Terms of Service
+
+
+
+ (
+
+ {
+ field.onChange(e.currentTarget.checked)
+ }}
+ label={
+ <>
+ I have read the complete disclaimer in the terms of
+ service.
+ >
+ }
+ variant="solid"
+ />
+
+ Read disclaimer
+
+
+ )}
+ />
+ (
+
+ {
+ field.onChange(e.currentTarget.checked)
+ }}
+ label={
+ <>
+ I agree to the terms of service and I live in a country
+ where I'm allowed to participate in Prediction markets.
+ >
+ }
+ variant="solid"
+ />
+
+ )}
+ />
+
+
+
+
+
+
+
+ )
+}
+
+export { TermsDisclaimer }
diff --git a/frontend/src/config/theme.tsx b/frontend/src/config/theme.tsx
index 7c2dc8d..f13b2e6 100644
--- a/frontend/src/config/theme.tsx
+++ b/frontend/src/config/theme.tsx
@@ -237,6 +237,10 @@ const theme = extendTheme({
lg: ".75rem",
xl: "1.5rem",
},
+ zIndex: {
+ modal: 1000000,
+ tooltip: 1000300,
+ },
components: {
JoyAlert: {
defaultProps: {
@@ -702,7 +706,7 @@ const ThemeProvider = (props: PropsWithChildren) => {
},
".notistack-SnackbarContainer": {
- zIndex: 1000000,
+ zIndex: 1000600,
},
".notistack-Snackbar": {