Skip to content

add terms of use #1111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wojciech-cichocki merged 2 commits into from
Dec 13, 2025
Merged

add terms of use #1111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0dde3dc
add terms of use
p6te Nov 21, 2025
6a2f2bb
Update term of use
wojciech-cichocki Dec 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 49 additions & 42 deletions src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,61 @@
import { social } from '@static/links'
import useStyles from './style'
import { Grid } from '@mui/material'
import { Box, Grid, Typography } from '@mui/material'
import { TooltipHover } from '@common/TooltipHover/TooltipHover'
import { discordIcon, docsIcon, githubIcon, mediumIcon, telegramIcon, xIcon } from '@static/icons'
import { discordIcon, docsIcon, githubIcon, telegramIcon, xIcon } from '@static/icons'
import { ROUTES } from '@utils/utils'

export const Footer = () => {
const { classes } = useStyles()

const handleOpenTerms = () => {
window.open(ROUTES.TERMS, '_blank', 'noopener,noreferrer')
}
return (
<Grid className={classes.footer}>
<Grid className={classes.footerItem}>
<TooltipHover title='Github'>
<a href={social.github} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={githubIcon} alt={'github icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Telegram'>
<a href={social.telegram} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={telegramIcon} alt={'telegram icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='X'>
<a href={social.x} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={xIcon} alt={'x icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Discord'>
<a href={social.discord} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={discordIcon} alt={'discord icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Medium'>
<a href={social.medium} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={mediumIcon} alt={'medium icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Docs'>
<a href={social.docs} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={docsIcon} alt={'medium icon'} />
<Grid textAlign={'center'}>
<Grid display='flex'>
<Grid className={classes.footerItem}>
<TooltipHover title='Github'>
<a href={social.github} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={githubIcon} alt={'github icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Telegram'>
<a href={social.telegram} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={telegramIcon} alt={'telegram icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='X'>
<a href={social.x} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={xIcon} alt={'x icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Discord'>
<a href={social.discord} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={discordIcon} alt={'discord icon'} />
</a>
</TooltipHover>
</Grid>
<Grid className={classes.footerItem}>
<TooltipHover title='Docs'>
<a href={social.docs} className={classes.footerLink} target='_blank'>
<img className={classes.icon} src={docsIcon} alt={'medium icon'} />
</a>
</TooltipHover>
</Grid>
</Grid>
<Box mt={2}>
<a onClick={handleOpenTerms} className={classes.link}>
<Typography>Terms of Use</Typography>
</a>
</TooltipHover>
</Box>
</Grid>
</Grid>
)
Expand Down
22 changes: 18 additions & 4 deletions src/components/Footer/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { colors, typography } from '@static/theme'
import { colors, theme, typography } from '@static/theme'
import { makeStyles } from 'tss-react/mui'

const useStyles = makeStyles()(theme => {
const useStyles = makeStyles()(() => {
return {
footer: {
width: '100%',
Expand All @@ -10,7 +10,11 @@ const useStyles = makeStyles()(theme => {
justifyContent: 'center',
padding: '35px 0',
position: 'relative',
zIndex: 50
zIndex: 50,
flexDirection: 'column',
[theme.breakpoints.down(1200)]: {
marginBottom: 48
}
},
footerItem: {
margin: '0 10px',
Expand All @@ -25,7 +29,7 @@ const useStyles = makeStyles()(theme => {
opacity: 1,
transform: 'scale(1.1) rotate(10deg)',
'@media (hover: none)': {
opacity: 0.25,
opacity: '.25',
transform: 'none'
}
}
Expand All @@ -50,6 +54,16 @@ const useStyles = makeStyles()(theme => {
icon: {
height: 40,
width: 40
},
link: {
color: colors.invariant.lightGrey,
cursor: 'pointer',
marginTop: 1,
textDecoration: 'underline',
...typography.caption2,
p: {
...typography.caption2
}
}
}
})
Expand Down
79 changes: 79 additions & 0 deletions src/components/TermsOfUse/TermsOfUse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React, { useState } from 'react'
import { Box, Typography, Checkbox, Link, FormControlLabel } from '@mui/material'
import useStyles from './style'
import { logoTitleIcon } from '@static/icons'
import { Button } from '@common/Button/Button'
import { colors } from '@static/theme'
import { TooltipHover } from '@common/TooltipHover/TooltipHover'

interface TermsModalProps {
openTerms: () => void
handleContinue: () => void
}

const TermsModal: React.FC<TermsModalProps> = ({ openTerms, handleContinue }) => {
const { classes } = useStyles()
const [accepted, setAccepted] = useState(false)

if (!open) return null

return (
<div className={classes.overlay}>
<div className={classes.container}>
<Box className={classes.header}>
<img src={logoTitleIcon} className={classes.logo} />
</Box>

<Typography className={classes.heading}>Terms of Use</Typography>

<Typography className={classes.description}>
Please make sure to read and understand the{' '}
<Link className={classes.link} href='#' onClick={openTerms}>
Terms of Use
</Link>{' '}
before entering the application.
</Typography>

<Box display='flex' alignItems='center' gap={1} marginTop={2}>
<FormControlLabel
className={classes.form}
control={
<Checkbox
checked={accepted}
onChange={e => setAccepted(e.target.checked)}
className={classes.checkbox}
/>
}
label={
<>
<span>Agree to the</span>
<span className={classes.pink}> Terms of Use.</span>
</>
}
/>
</Box>
<TooltipHover
title={
accepted ? '' : 'You need to accept the Terms and Use before entering the application.'
}
color={colors.invariant.warning}
fullSpan>
<Button
disabled={!accepted}
onClick={() => {
if (accepted) handleContinue?.()
}}
scheme='green'
style={{
color: colors.invariant.newDark,
width: '100%'
}}>
Continue
</Button>
</TooltipHover>
</div>
</div>
)
}

export default TermsModal
114 changes: 114 additions & 0 deletions src/components/TermsOfUse/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import { makeStyles } from 'tss-react/mui'
import { colors, theme, typography } from '@static/theme'

const useStyles = makeStyles()(() => {
return {
overlay: {
position: 'fixed',
inset: 0,
zIndex: 500,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'rgba(2,6,23,0.55)',
backdropFilter: 'blur(6px) brightness(0.7)',
WebkitBackdropFilter: 'blur(6px) brightness(0.7)',
padding: '24px',
[theme.breakpoints.down('md')]: {
padding: 16
}
},
container: {
zIndex: 501,
width: '100%',
maxWidth: 380,
borderRadius: 24,
padding: 32,
display: 'flex',
flexDirection: 'column',
gap: 32,
background: colors.invariant.pinkGreenLinearGradientOpacityVertical,
boxShadow: '0px 4px 18px 0px #00000059',
color: '#E6EEF8',
overflow: 'hidden',
[theme.breakpoints.down('md')]: {
gap: 24,
padding: 16
}
},
header: {
display: 'flex',
alignItems: 'center'
},
checkbox: {
width: 25,
height: 25,
marginLeft: 3,
marginRight: 3,
color: colors.invariant.newDark,
'&.Mui-checked': {
color: colors.invariant.green
},
'& .MuiSvgIcon-root': {
fontSize: 25
},
padding: 0,
'& .MuiIconButton-label': {
width: 20,
height: 20,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: 0
}
},
form: {
'& span': {
marginLeft: 3,
[theme.breakpoints.down('md')]: {
...typography.caption2
}
}
},
logo: {
width: 'auto',
height: 48,
objectFit: 'contain',
transform: 'translate(-10px)'
},
title: {
fontWeight: 700,
fontSize: '1.05rem'
},
pink: {
color: colors.invariant.pink
},
heading: {
...typography.heading1,
[theme.breakpoints.down('md')]: {
...typography.heading3
}
},
description: {
fontSize: 20,
lineHeight: '28px',
color: colors.invariant.textGrey,
letterSpacing: '-0.03rem',
fontWeight: 400,
[theme.breakpoints.down('md')]: {
...typography.body2
}
},
link: {
color: colors.invariant.green,
textDecoration: 'underline',
textDecorationThickness: 1,

'&:hover': {
textDecorationThickness: 2
}
}
}
})

export default useStyles
24 changes: 23 additions & 1 deletion src/pages/RootPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useCallback, useRef } from 'react'
import React, { useEffect, useCallback, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate, useLocation, Outlet } from 'react-router-dom'
import EventsHandlers from '@containers/EventsHandlers'
Expand All @@ -22,6 +22,9 @@ import {
setPhantomAccChangeTrigger
} from '@utils/web3/wallet'
import { ROUTES } from '@utils/utils'
import TermsOfUse from '@components/TermsOfUse/TermsOfUse'

const TERMS_OF_USE_KEY = 'invariant-terms-of-use-v1'

// const BANNER_STORAGE_KEY = 'invariant-banner-state-2'
// const BANNER_HIDE_DURATION = 1000 * 60 * 60 * 24 // 24 hours
Expand Down Expand Up @@ -62,6 +65,22 @@ const RootPage: React.FC = React.memo(() => {
[ROUTES.POOL_DETAILS, 'Invariant | Pool Details']
])

const [showTermsOfUse, setShowTermsOfUse] = useState(() => {
const storedData = localStorage.getItem(TERMS_OF_USE_KEY)
if (storedData) {
return false
}
return true
})

const handleCloseModal = () => {
setShowTermsOfUse(false)
localStorage.setItem(TERMS_OF_USE_KEY, 'true')
}
const handleOpenTerms = () => {
window.open(ROUTES.TERMS, '_blank', 'noopener,noreferrer')
}

useEffect(() => {
const title =
metaData.get([...metaData.keys()].find(key => location.pathname.startsWith(key))!) ||
Expand Down Expand Up @@ -181,6 +200,9 @@ const RootPage: React.FC = React.memo(() => {
<div className={classes.background} />

<PerformanceWarning />
{showTermsOfUse && location.pathname !== ROUTES.TERMS && (
<TermsOfUse openTerms={handleOpenTerms} handleContinue={handleCloseModal} />
)}
{/* {showHeader && currentNetwork === NetworkType.Mainnet && (
<>
<TopBanner onClose={handleBannerClose} isHiding={isHiding} />
Expand Down
Loading