Skip to content

Commit dd59e03

Browse files
wojciech-cichockiwojciech-cichocki
authored
Merge pull request #1116 from invariant-labs/staging
Update prod
2 parents 384a600 + d783ff0 commit dd59e03

10 files changed

Lines changed: 916 additions & 54 deletions

File tree

‎src/components/Footer/Footer.tsx‎

Lines changed: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
11
import { social } from '@static/links'
22
import useStyles from './style'
3-
import { Grid } from '@mui/material'
3+
import { Box, Grid, Typography } from '@mui/material'
44
import { TooltipHover } from '@common/TooltipHover/TooltipHover'
5-
import { discordIcon, docsIcon, githubIcon, mediumIcon, telegramIcon, xIcon } from '@static/icons'
5+
import { discordIcon, docsIcon, githubIcon, telegramIcon, xIcon } from '@static/icons'
6+
import { ROUTES } from '@utils/utils'
67

78
export const Footer = () => {
89
const { classes } = useStyles()
10+
11+
const handleOpenTerms = () => {
12+
window.open(ROUTES.TERMS, '_blank', 'noopener,noreferrer')
13+
}
914
return (
1015
<Grid className={classes.footer}>
11-
<Grid className={classes.footerItem}>
12-
<TooltipHover title='Github'>
13-
<a href={social.github} className={classes.footerLink} target='_blank'>
14-
<img className={classes.icon} src={githubIcon} alt={'github icon'} />
15-
</a>
16-
</TooltipHover>
17-
</Grid>
18-
<Grid className={classes.footerItem}>
19-
<TooltipHover title='Telegram'>
20-
<a href={social.telegram} className={classes.footerLink} target='_blank'>
21-
<img className={classes.icon} src={telegramIcon} alt={'telegram icon'} />
22-
</a>
23-
</TooltipHover>
24-
</Grid>
25-
<Grid className={classes.footerItem}>
26-
<TooltipHover title='X'>
27-
<a href={social.x} className={classes.footerLink} target='_blank'>
28-
<img className={classes.icon} src={xIcon} alt={'x icon'} />
29-
</a>
30-
</TooltipHover>
31-
</Grid>
32-
<Grid className={classes.footerItem}>
33-
<TooltipHover title='Discord'>
34-
<a href={social.discord} className={classes.footerLink} target='_blank'>
35-
<img className={classes.icon} src={discordIcon} alt={'discord icon'} />
36-
</a>
37-
</TooltipHover>
38-
</Grid>
39-
<Grid className={classes.footerItem}>
40-
<TooltipHover title='Medium'>
41-
<a href={social.medium} className={classes.footerLink} target='_blank'>
42-
<img className={classes.icon} src={mediumIcon} alt={'medium icon'} />
43-
</a>
44-
</TooltipHover>
45-
</Grid>
46-
<Grid className={classes.footerItem}>
47-
<TooltipHover title='Docs'>
48-
<a href={social.docs} className={classes.footerLink} target='_blank'>
49-
<img className={classes.icon} src={docsIcon} alt={'medium icon'} />
16+
<Grid textAlign={'center'}>
17+
<Grid display='flex'>
18+
<Grid className={classes.footerItem}>
19+
<TooltipHover title='Github'>
20+
<a href={social.github} className={classes.footerLink} target='_blank'>
21+
<img className={classes.icon} src={githubIcon} alt={'github icon'} />
22+
</a>
23+
</TooltipHover>
24+
</Grid>
25+
<Grid className={classes.footerItem}>
26+
<TooltipHover title='Telegram'>
27+
<a href={social.telegram} className={classes.footerLink} target='_blank'>
28+
<img className={classes.icon} src={telegramIcon} alt={'telegram icon'} />
29+
</a>
30+
</TooltipHover>
31+
</Grid>
32+
<Grid className={classes.footerItem}>
33+
<TooltipHover title='X'>
34+
<a href={social.x} className={classes.footerLink} target='_blank'>
35+
<img className={classes.icon} src={xIcon} alt={'x icon'} />
36+
</a>
37+
</TooltipHover>
38+
</Grid>
39+
<Grid className={classes.footerItem}>
40+
<TooltipHover title='Discord'>
41+
<a href={social.discord} className={classes.footerLink} target='_blank'>
42+
<img className={classes.icon} src={discordIcon} alt={'discord icon'} />
43+
</a>
44+
</TooltipHover>
45+
</Grid>
46+
<Grid className={classes.footerItem}>
47+
<TooltipHover title='Docs'>
48+
<a href={social.docs} className={classes.footerLink} target='_blank'>
49+
<img className={classes.icon} src={docsIcon} alt={'medium icon'} />
50+
</a>
51+
</TooltipHover>
52+
</Grid>
53+
</Grid>
54+
<Box mt={2}>
55+
<a onClick={handleOpenTerms} className={classes.link}>
56+
<Typography>Terms of Use</Typography>
5057
</a>
51-
</TooltipHover>
58+
</Box>
5259
</Grid>
5360
</Grid>
5461
)

‎src/components/Footer/style.ts‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { colors, typography } from '@static/theme'
1+
import { colors, theme, typography } from '@static/theme'
22
import { makeStyles } from 'tss-react/mui'
33

4-
const useStyles = makeStyles()(theme => {
4+
const useStyles = makeStyles()(() => {
55
return {
66
footer: {
77
width: '100%',
@@ -10,7 +10,11 @@ const useStyles = makeStyles()(theme => {
1010
justifyContent: 'center',
1111
padding: '35px 0',
1212
position: 'relative',
13-
zIndex: 50
13+
zIndex: 50,
14+
flexDirection: 'column',
15+
[theme.breakpoints.down(1200)]: {
16+
marginBottom: 48
17+
}
1418
},
1519
footerItem: {
1620
margin: '0 10px',
@@ -25,7 +29,7 @@ const useStyles = makeStyles()(theme => {
2529
opacity: 1,
2630
transform: 'scale(1.1) rotate(10deg)',
2731
'@media (hover: none)': {
28-
opacity: 0.25,
32+
opacity: '.25',
2933
transform: 'none'
3034
}
3135
}
@@ -50,6 +54,16 @@ const useStyles = makeStyles()(theme => {
5054
icon: {
5155
height: 40,
5256
width: 40
57+
},
58+
link: {
59+
color: colors.invariant.lightGrey,
60+
cursor: 'pointer',
61+
marginTop: 1,
62+
textDecoration: 'underline',
63+
...typography.caption2,
64+
p: {
65+
...typography.caption2
66+
}
5367
}
5468
}
5569
})

‎src/components/TermsOfUse/TermsOfUse.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { useState } from 'react'
2+
import { Box, Typography, Checkbox, Link, FormControlLabel } from '@mui/material'
3+
import useStyles from './style'
4+
import { logoTitleIcon } from '@static/icons'
5+
import { Button } from '@common/Button/Button'
6+
import { colors } from '@static/theme'
7+
import { TooltipHover } from '@common/TooltipHover/TooltipHover'
8+
9+
interface TermsModalProps {
10+
openTerms: () => void
11+
handleContinue: () => void
12+
}
13+
14+
const TermsModal: React.FC<TermsModalProps> = ({ openTerms, handleContinue }) => {
15+
const { classes } = useStyles()
16+
const [accepted, setAccepted] = useState(false)
17+
18+
if (!open) return null
19+
20+
return (
21+
<div className={classes.overlay}>
22+
<div className={classes.container}>
23+
<Box className={classes.header}>
24+
<img src={logoTitleIcon} className={classes.logo} />
25+
</Box>
26+
27+
<Typography className={classes.heading}>Terms of Use</Typography>
28+
29+
<Typography className={classes.description}>
30+
Please make sure to read and understand the{' '}
31+
<Link className={classes.link} href='#' onClick={openTerms}>
32+
Terms of Use
33+
</Link>{' '}
34+
before entering the application.
35+
</Typography>
36+
37+
<Box display='flex' alignItems='center' gap={1} marginTop={2}>
38+
<FormControlLabel
39+
className={classes.form}
40+
control={
41+
<Checkbox
42+
checked={accepted}
43+
onChange={e => setAccepted(e.target.checked)}
44+
className={classes.checkbox}
45+
/>
46+
}
47+
label={
48+
<>
49+
<span>Agree to the</span>
50+
<span className={classes.pink}> Terms of Use.</span>
51+
</>
52+
}
53+
/>
54+
</Box>
55+
<TooltipHover
56+
title={
57+
accepted ? '' : 'You need to accept the Terms and Use before entering the application.'
58+
}
59+
color={colors.invariant.warning}
60+
fullSpan>
61+
<Button
62+
disabled={!accepted}
63+
onClick={() => {
64+
if (accepted) handleContinue?.()
65+
}}
66+
scheme='green'
67+
style={{
68+
color: colors.invariant.newDark,
69+
width: '100%'
70+
}}>
71+
Continue
72+
</Button>
73+
</TooltipHover>
74+
</div>
75+
</div>
76+
)
77+
}
78+
79+
export default TermsModal

‎src/components/TermsOfUse/style.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { makeStyles } from 'tss-react/mui'
2+
import { colors, theme, typography } from '@static/theme'
3+
4+
const useStyles = makeStyles()(() => {
5+
return {
6+
overlay: {
7+
position: 'fixed',
8+
inset: 0,
9+
zIndex: 500,
10+
display: 'flex',
11+
justifyContent: 'center',
12+
alignItems: 'center',
13+
background: 'rgba(2,6,23,0.55)',
14+
backdropFilter: 'blur(6px) brightness(0.7)',
15+
WebkitBackdropFilter: 'blur(6px) brightness(0.7)',
16+
padding: '24px',
17+
[theme.breakpoints.down('md')]: {
18+
padding: 16
19+
}
20+
},
21+
container: {
22+
zIndex: 501,
23+
width: '100%',
24+
maxWidth: 380,
25+
borderRadius: 24,
26+
padding: 32,
27+
display: 'flex',
28+
flexDirection: 'column',
29+
gap: 32,
30+
background: colors.invariant.pinkGreenLinearGradientOpacityVertical,
31+
boxShadow: '0px 4px 18px 0px #00000059',
32+
color: '#E6EEF8',
33+
overflow: 'hidden',
34+
[theme.breakpoints.down('md')]: {
35+
gap: 24,
36+
padding: 16
37+
}
38+
},
39+
header: {
40+
display: 'flex',
41+
alignItems: 'center'
42+
},
43+
checkbox: {
44+
width: 25,
45+
height: 25,
46+
marginLeft: 3,
47+
marginRight: 3,
48+
color: colors.invariant.newDark,
49+
'&.Mui-checked': {
50+
color: colors.invariant.green
51+
},
52+
'& .MuiSvgIcon-root': {
53+
fontSize: 25
54+
},
55+
padding: 0,
56+
'& .MuiIconButton-label': {
57+
width: 20,
58+
height: 20,
59+
display: 'flex',
60+
alignItems: 'center',
61+
justifyContent: 'center',
62+
margin: 0
63+
}
64+
},
65+
form: {
66+
'& span': {
67+
marginLeft: 3,
68+
[theme.breakpoints.down('md')]: {
69+
...typography.caption2
70+
}
71+
}
72+
},
73+
logo: {
74+
width: 'auto',
75+
height: 48,
76+
objectFit: 'contain',
77+
transform: 'translate(-10px)'
78+
},
79+
title: {
80+
fontWeight: 700,
81+
fontSize: '1.05rem'
82+
},
83+
pink: {
84+
color: colors.invariant.pink
85+
},
86+
heading: {
87+
...typography.heading1,
88+
[theme.breakpoints.down('md')]: {
89+
...typography.heading3
90+
}
91+
},
92+
description: {
93+
fontSize: 20,
94+
lineHeight: '28px',
95+
color: colors.invariant.textGrey,
96+
letterSpacing: '-0.03rem',
97+
fontWeight: 400,
98+
[theme.breakpoints.down('md')]: {
99+
...typography.body2
100+
}
101+
},
102+
link: {
103+
color: colors.invariant.green,
104+
textDecoration: 'underline',
105+
textDecorationThickness: 1,
106+
107+
'&:hover': {
108+
textDecorationThickness: 2
109+
}
110+
}
111+
}
112+
})
113+
114+
export default useStyles

‎src/pages/RootPage.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useCallback, useRef } from 'react'
1+
import React, { useEffect, useCallback, useRef, useState } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
33
import { useNavigate, useLocation, Outlet } from 'react-router-dom'
44
import EventsHandlers from '@containers/EventsHandlers'
@@ -22,6 +22,9 @@ import {
2222
setPhantomAccChangeTrigger
2323
} from '@utils/web3/wallet'
2424
import { ROUTES } from '@utils/utils'
25+
import TermsOfUse from '@components/TermsOfUse/TermsOfUse'
26+
27+
const TERMS_OF_USE_KEY = 'invariant-terms-of-use-v1'
2528

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

68+
const [showTermsOfUse, setShowTermsOfUse] = useState(() => {
69+
const storedData = localStorage.getItem(TERMS_OF_USE_KEY)
70+
if (storedData) {
71+
return false
72+
}
73+
return true
74+
})
75+
76+
const handleCloseModal = () => {
77+
setShowTermsOfUse(false)
78+
localStorage.setItem(TERMS_OF_USE_KEY, 'true')
79+
}
80+
const handleOpenTerms = () => {
81+
window.open(ROUTES.TERMS, '_blank', 'noopener,noreferrer')
82+
}
83+
6584
useEffect(() => {
6685
const title =
6786
metaData.get([...metaData.keys()].find(key => location.pathname.startsWith(key))!) ||
@@ -181,6 +200,9 @@ const RootPage: React.FC = React.memo(() => {
181200
<div className={classes.background} />
182201

183202
<PerformanceWarning />
203+
{showTermsOfUse && location.pathname !== ROUTES.TERMS && (
204+
<TermsOfUse openTerms={handleOpenTerms} handleContinue={handleCloseModal} />
205+
)}
184206
{/* {showHeader && currentNetwork === NetworkType.Mainnet && (
185207
<>
186208
<TopBanner onClose={handleBannerClose} isHiding={isHiding} />

0 commit comments

Comments
 (0)