add terms of use modal and agree to terms in onboarding
This commit is contained in:
saml33
parent
7750942ca5
commit
f805dc215a
|
|
@ -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 (
|
||||
<>
|
||||
<div className="fixed z-30">
|
||||
|
|
@ -103,6 +112,12 @@ const Layout = ({ children }: { children: ReactNode }) => {
|
|||
</div>
|
||||
<DeployRefreshManager />
|
||||
</div>
|
||||
{showTermsOfUse ? (
|
||||
<TermsOfUseModal
|
||||
isOpen={showTermsOfUse}
|
||||
onClose={() => setAcceptTerms(Date.now())}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Modal isOpen={isOpen} onClose={onClose} disableOutsideClose hideClose>
|
||||
<>
|
||||
<h2 className="mb-2 text-center">{t('accept-terms')}</h2>
|
||||
<p className="mb-6 flex flex-wrap justify-center">
|
||||
<span className="mr-1">{t('accept-terms-desc')}</span>
|
||||
<a
|
||||
className="flex items-center"
|
||||
href="https://docs.mango.markets/legal/terms-of-use"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{t('terms-of-use')}
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
|
||||
</a>
|
||||
</p>
|
||||
<Button className="w-full" onClick={onClose} size="large">
|
||||
{t('agree-and-continue')}
|
||||
</Button>
|
||||
</>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default TermsOfUseModal
|
||||
|
|
@ -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 = ({
|
|||
<Modal isOpen={isOpen} onClose={onClose} fullScreen disableOutsideClose>
|
||||
<div className="grid h-screen overflow-auto bg-th-bkg-1 text-left lg:grid-cols-2">
|
||||
<img
|
||||
className={`absolute -bottom-20 left-1/2 mt-8 h-auto w-[90%] -translate-x-1/2 sm:w-[60%] md:w-[470px] lg:left-auto lg:-right-10 lg:w-[55%] lg:-translate-x-0 xl:-bottom-40 ${
|
||||
showSetupStep !== 0 ? 'hidden lg:block' : ''
|
||||
className={`absolute -bottom-20 left-1/2 mt-8 h-auto -translate-x-1/2 sm:w-[60%] md:w-[410px] lg:left-auto lg:-right-10 lg:w-[55%] lg:-translate-x-0 xl:-bottom-40 ${
|
||||
showSetupStep !== 0 ? 'hidden lg:block' : 'hidden sm:block'
|
||||
}`}
|
||||
src="/images/swap-trade@0.75x.png"
|
||||
srcSet="/images/swap-trade@0.75x.png 1098x, /images/swap-trade@1x.png 1463w,
|
||||
|
|
@ -238,21 +244,26 @@ const UserSetupModal = ({
|
|||
<p className="text-base sm:mb-2 lg:text-lg">
|
||||
{t('onboarding:intro-desc')}
|
||||
</p>
|
||||
<div className="mb-6 space-y-2 py-3">
|
||||
<div className="mb-3 space-y-2 py-3">
|
||||
<CheckBullet text={t('onboarding:bullet-1')} />
|
||||
<CheckBullet text={t('onboarding:bullet-2')} />
|
||||
<CheckBullet text={t('onboarding:bullet-3')} />
|
||||
<CheckBullet text={t('onboarding:bullet-4')} />
|
||||
</div>
|
||||
<Button
|
||||
className="mb-12 w-44"
|
||||
onClick={handleNextStep}
|
||||
size="large"
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
<FireIcon className="mr-2 h-5 w-5" />
|
||||
{t('onboarding:lets-go')}
|
||||
</div>
|
||||
<p className="mb-6 flex flex-wrap">
|
||||
<span className="mr-1">{t('accept-terms-desc')}</span>
|
||||
<a
|
||||
className="flex items-center"
|
||||
href="https://docs.mango.markets/legal/terms-of-use"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{t('terms-of-use')}
|
||||
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
|
||||
</a>
|
||||
</p>
|
||||
<Button className="mb-12" onClick={handleNextStep} size="large">
|
||||
{t('agree-and-continue')}
|
||||
</Button>
|
||||
</UserSetupTransition>
|
||||
<UserSetupTransition delay show={showSetupStep === 1}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"404-heading": "This page was liquidated",
|
||||
"404-description": "or, never existed...",
|
||||
"accept-terms": "Accept Terms",
|
||||
"accept-terms-desc": "By continuing, you accept the Mango",
|
||||
"account": "Account",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
|
|
@ -13,6 +15,7 @@
|
|||
"accounts": "Accounts",
|
||||
"actions": "Actions",
|
||||
"add-new-account": "Add New Account",
|
||||
"agree-and-continue": "Agree and Continue",
|
||||
"amount": "Amount",
|
||||
"amount-owed": "Amount Owed",
|
||||
"asset-liability-weight": "Asset/Liability Weights",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"404-heading": "This page was liquidated",
|
||||
"404-description": "or, never existed...",
|
||||
"accept-terms": "Accept Terms",
|
||||
"accept-terms-desc": "By continuing, you accept the Mango",
|
||||
"account": "Account",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
|
|
@ -13,6 +15,7 @@
|
|||
"accounts": "Accounts",
|
||||
"actions": "Actions",
|
||||
"add-new-account": "Add New Account",
|
||||
"agree-and-continue": "Agree and Continue",
|
||||
"amount": "Amount",
|
||||
"amount-owed": "Amount Owed",
|
||||
"asset-liability-weight": "Asset/Liability Weights",
|
||||
|
|
@ -21,8 +24,8 @@
|
|||
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"bal": "Bal",
|
||||
"balance": "Balance",
|
||||
"bal": "Bal",
|
||||
"balances": "Balances",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
|
|
@ -62,6 +65,7 @@
|
|||
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
|
||||
"deposit-rate": "Deposit APR",
|
||||
"disconnect": "Disconnect",
|
||||
"documentation": "Documentation",
|
||||
"edit": "Edit",
|
||||
"edit-account": "Edit Account Name",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
"max": "Max",
|
||||
"max-borrow": "Max Borrow",
|
||||
|
|
@ -98,6 +103,7 @@
|
|||
"optional": "Optional",
|
||||
"outstanding-balance": "Outstanding Balance",
|
||||
"perp": "Perp",
|
||||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
"show-zero-balances": "Show Zero Balances",
|
||||
"solana-tps": "Solana TPS",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"terms-of-use": "Terms of Use",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"404-heading": "This page was liquidated",
|
||||
"404-description": "or, never existed...",
|
||||
"accept-terms": "Accept Terms",
|
||||
"accept-terms-desc": "By continuing, you accept the Mango",
|
||||
"account": "Account",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
|
|
@ -13,6 +15,7 @@
|
|||
"accounts": "Accounts",
|
||||
"actions": "Actions",
|
||||
"add-new-account": "Add New Account",
|
||||
"agree-and-continue": "Agree and Continue",
|
||||
"amount": "Amount",
|
||||
"amount-owed": "Amount Owed",
|
||||
"asset-liability-weight": "Asset/Liability Weights",
|
||||
|
|
@ -21,8 +24,8 @@
|
|||
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"bal": "Bal",
|
||||
"balance": "Balance",
|
||||
"bal": "Bal",
|
||||
"balances": "Balances",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
|
|
@ -62,6 +65,7 @@
|
|||
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
|
||||
"deposit-rate": "Deposit APR",
|
||||
"disconnect": "Disconnect",
|
||||
"documentation": "Documentation",
|
||||
"edit": "Edit",
|
||||
"edit-account": "Edit Account Name",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
"max": "Max",
|
||||
"max-borrow": "Max Borrow",
|
||||
|
|
@ -98,6 +103,7 @@
|
|||
"optional": "Optional",
|
||||
"outstanding-balance": "Outstanding Balance",
|
||||
"perp": "Perp",
|
||||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
"show-zero-balances": "Show Zero Balances",
|
||||
"solana-tps": "Solana TPS",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"terms-of-use": "Terms of Use",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"404-heading": "This page was liquidated",
|
||||
"404-description": "or, never existed...",
|
||||
"accept-terms": "Accept Terms",
|
||||
"accept-terms-desc": "By continuing, you accept the Mango",
|
||||
"account": "Account",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
|
|
@ -13,6 +15,7 @@
|
|||
"accounts": "Accounts",
|
||||
"actions": "Actions",
|
||||
"add-new-account": "Add New Account",
|
||||
"agree-and-continue": "Agree and Continue",
|
||||
"amount": "Amount",
|
||||
"amount-owed": "Amount Owed",
|
||||
"asset-liability-weight": "Asset/Liability Weights",
|
||||
|
|
@ -21,8 +24,8 @@
|
|||
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"bal": "Bal",
|
||||
"balance": "Balance",
|
||||
"bal": "Bal",
|
||||
"balances": "Balances",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
|
|
@ -62,6 +65,7 @@
|
|||
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
|
||||
"deposit-rate": "Deposit APR",
|
||||
"disconnect": "Disconnect",
|
||||
"documentation": "Documentation",
|
||||
"edit": "Edit",
|
||||
"edit-account": "Edit Account Name",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
"max": "Max",
|
||||
"max-borrow": "Max Borrow",
|
||||
|
|
@ -98,6 +103,7 @@
|
|||
"optional": "Optional",
|
||||
"outstanding-balance": "Outstanding Balance",
|
||||
"perp": "Perp",
|
||||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
"show-zero-balances": "Show Zero Balances",
|
||||
"solana-tps": "Solana TPS",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"terms-of-use": "Terms of Use",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"404-heading": "This page was liquidated",
|
||||
"404-description": "or, never existed...",
|
||||
"accept-terms": "Accept Terms",
|
||||
"accept-terms-desc": "By continuing, you accept the Mango",
|
||||
"account": "Account",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
|
|
@ -13,6 +15,7 @@
|
|||
"accounts": "Accounts",
|
||||
"actions": "Actions",
|
||||
"add-new-account": "Add New Account",
|
||||
"agree-and-continue": "Agree and Continue",
|
||||
"amount": "Amount",
|
||||
"amount-owed": "Amount Owed",
|
||||
"asset-liability-weight": "Asset/Liability Weights",
|
||||
|
|
@ -21,8 +24,8 @@
|
|||
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
"available-balance": "Available Balance",
|
||||
"bal": "Bal",
|
||||
"balance": "Balance",
|
||||
"bal": "Bal",
|
||||
"balances": "Balances",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
|
|
@ -62,6 +65,7 @@
|
|||
"deposit-more-sol": "Your SOL wallet balance is too low. Add more to pay for transactions",
|
||||
"deposit-rate": "Deposit APR",
|
||||
"disconnect": "Disconnect",
|
||||
"documentation": "Documentation",
|
||||
"edit": "Edit",
|
||||
"edit-account": "Edit Account Name",
|
||||
"edit-profile-image": "Edit Profile Image",
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
"max": "Max",
|
||||
"max-borrow": "Max Borrow",
|
||||
|
|
@ -98,6 +103,7 @@
|
|||
"optional": "Optional",
|
||||
"outstanding-balance": "Outstanding Balance",
|
||||
"perp": "Perp",
|
||||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
"show-zero-balances": "Show Zero Balances",
|
||||
"solana-tps": "Solana TPS",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"terms-of-use": "Terms of Use",
|
||||
|
|
|
|||
|
|
@ -440,6 +440,10 @@ li {
|
|||
@apply text-sm text-th-fgd-3;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply default-transition text-th-fgd-1 md:hover:text-th-fgd-3;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
input::placeholder {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,8 @@ export const SHOW_ORDER_LINES_KEY = 'showOrderLines-0.1'
|
|||
|
||||
export const SHOW_SWAP_INTRO_MODAL = 'showSwapModal-0.1'
|
||||
|
||||
export const ACCEPT_TERMS_KEY = 'termsOfUseAccepted-0.1'
|
||||
|
||||
// Unused
|
||||
export const PROFILE_CATEGORIES = [
|
||||
'borrower',
|
||||
|
|
|
|||
Loading…
Reference in New Issue