diff --git a/components/Layout.tsx b/components/Layout.tsx
index fcb2c6df..43d2138c 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -8,7 +8,7 @@ import BottomBar from './mobile/BottomBar'
import BounceLoader from './shared/BounceLoader'
import TopBar from './TopBar'
import useLocalStorageState from '../hooks/useLocalStorageState'
-import { SIDEBAR_COLLAPSE_KEY } from '../utils/constants'
+import { ACCEPT_TERMS_KEY, SIDEBAR_COLLAPSE_KEY } from '../utils/constants'
import { useWallet } from '@solana/wallet-adapter-react'
import SuccessParticles from './shared/SuccessParticles'
import { tsParticles } from 'tsparticles-engine'
@@ -16,8 +16,10 @@ import { loadFull } from 'tsparticles'
import useInterval from './shared/useInterval'
import { Transition } from '@headlessui/react'
import { useTranslation } from 'next-i18next'
+import TermsOfUseModal from './modals/TermsOfUseModal'
const sideBarAnimationDuration = 500
+const termsLastUpdated = 1679441610978
const Layout = ({ children }: { children: ReactNode }) => {
const { connected } = useWallet()
@@ -26,6 +28,10 @@ const Layout = ({ children }: { children: ReactNode }) => {
SIDEBAR_COLLAPSE_KEY,
false
)
+ const [acceptTerms, setAcceptTerms] = useLocalStorageState(
+ ACCEPT_TERMS_KEY,
+ ''
+ )
const { width } = useViewport()
useEffect(() => {
@@ -56,6 +62,9 @@ const Layout = ({ children }: { children: ReactNode }) => {
particlesInit()
}, [])
+ const showTermsOfUse =
+ (!acceptTerms || acceptTerms < termsLastUpdated) && connected
+
return (
<>
@@ -103,6 +112,12 @@ const Layout = ({ children }: { children: ReactNode }) => {
+ {showTermsOfUse ? (
+ setAcceptTerms(Date.now())}
+ />
+ ) : null}
>
)
}
diff --git a/components/modals/TermsOfUseModal.tsx b/components/modals/TermsOfUseModal.tsx
new file mode 100644
index 00000000..f49b1692
--- /dev/null
+++ b/components/modals/TermsOfUseModal.tsx
@@ -0,0 +1,34 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import { useTranslation } from 'next-i18next'
+import Button from '@components/shared/Button'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+
+const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
+ const { t } = useTranslation('common')
+
+ return (
+
+ <>
+ {t('accept-terms')}
+
+ {t('accept-terms-desc')}
+
+ {t('terms-of-use')}
+
+
+
+
+ >
+
+ )
+}
+
+export default TermsOfUseModal
diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx
index 5b5be9d9..bc92cb8e 100644
--- a/components/modals/UserSetupModal.tsx
+++ b/components/modals/UserSetupModal.tsx
@@ -1,9 +1,9 @@
import { Transition } from '@headlessui/react'
import {
ArrowDownTrayIcon,
+ ArrowTopRightOnSquareIcon,
CheckCircleIcon,
ExclamationCircleIcon,
- FireIcon,
PencilIcon,
} from '@heroicons/react/20/solid'
import { useWallet } from '@solana/wallet-adapter-react'
@@ -43,6 +43,8 @@ import useBanksWithBalances from 'hooks/useBanksWithBalances'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
import { isMangoError } from 'types'
import ColorBlur from '@components/ColorBlur'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import { ACCEPT_TERMS_KEY } from 'utils/constants'
const UserSetupModal = ({
isOpen,
@@ -66,6 +68,7 @@ const UserSetupModal = ({
const { handleConnect } = useEnhancedWallet()
const { maxSolDeposit } = useSolBalance()
const banks = useBanksWithBalances('walletBalance')
+ const [, setAcceptTerms] = useLocalStorageState(ACCEPT_TERMS_KEY, '')
useEffect(() => {
if (connected) {
@@ -196,6 +199,9 @@ const UserSetupModal = ({
)
const handleNextStep = () => {
+ if (showSetupStep === 0) {
+ setAcceptTerms(Date.now())
+ }
setShowSetupStep(showSetupStep + 1)
}
@@ -203,8 +209,8 @@ const UserSetupModal = ({
{t('onboarding:intro-desc')}
-
+
-