add terms of use modal and agree to terms in onboarding

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 (
     <>
       <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}
     </>
   )
 }

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 (
+    <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

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 = ({
     <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 ${
+          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' : ''
+            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
+            <p className="mb-6 flex flex-wrap">
-              className="mb-12 w-44"
+              <span className="mr-1">{t('accept-terms-desc')}</span>
-              onClick={handleNextStep}
+              <a
-              size="large"
+                className="flex items-center"
-            >
+                href="https://docs.mango.markets/legal/terms-of-use"
-              <div className="flex items-center justify-center">
+                rel="noopener noreferrer"
-                <FireIcon className="mr-2 h-5 w-5" />
+                target="_blank"
-                {t('onboarding:lets-go')}
+              >
-              </div>
+                {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}>

public/locales/en/common.json

@@ -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",

public/locales/es/common.json

@@ -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",

public/locales/ru/common.json

@@ -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",

public/locales/zh/common.json

@@ -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",

public/locales/zh_tw/common.json

@@ -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",

styles/globals.css

@@ -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 {

utils/constants.ts

@@ -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',