show modal when token slots are nearly full and again when full

components/Layout.tsx

@@ -17,6 +17,7 @@ import {
   ACCEPT_TERMS_KEY,
   SECONDS,
   SIDEBAR_COLLAPSE_KEY,
+  SLOTS_WARNING_KEY,
 } from '../utils/constants'
 import { useWallet } from '@solana/wallet-adapter-react'
 import SuccessParticles from './shared/SuccessParticles'
@@ -30,6 +31,11 @@ import { useTheme } from 'next-themes'
 import PromoBanner from './rewards/PromoBanner'
 import { useRouter } from 'next/router'
 import StatusBar from './StatusBar'
+import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
+import TokenSlotsWarningModal, {
+  WARNING_LEVEL,
+} from './modals/TokenSlotsWarningModal'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 export const sideBarAnimationDuration = 300
 const termsLastUpdated = 1679441610978
@@ -41,7 +47,27 @@ const Layout = ({ children }: { children: ReactNode }) => {
     SIDEBAR_COLLAPSE_KEY,
     false,
   )
+  const [hasSeenSlotsWarning, setHasSeenSlotsWarning] = useLocalStorageState(
+    SLOTS_WARNING_KEY,
+    undefined,
+  )
   const { asPath } = useRouter()
+  const { usedTokens, totalTokens } = useMangoAccountAccounts()
+  const { initialLoad: loadingMangoAccount } = useMangoAccount()
+
+  const showSlotsNearlyFullWarning = useMemo(() => {
+    const slotsAvailable = totalTokens.length - usedTokens.length
+    if (hasSeenSlotsWarning === 0 || !slotsAvailable || slotsAvailable > 1)
+      return false
+    return true
+  }, [hasSeenSlotsWarning, usedTokens, totalTokens])
+
+  const showSlotsFullWarning = useMemo(() => {
+    const slotsAvailable = totalTokens.length - usedTokens.length
+    if (hasSeenSlotsWarning === 1 || slotsAvailable || loadingMangoAccount)
+      return false
+    return true
+  }, [hasSeenSlotsWarning, usedTokens, totalTokens, loadingMangoAccount])
 
   useEffect(() => {
     const animationFrames = 15
@@ -132,6 +158,20 @@ const Layout = ({ children }: { children: ReactNode }) => {
         </div>
         <DeployRefreshManager />
         <TermsOfUse />
+        {showSlotsNearlyFullWarning ? (
+          <TokenSlotsWarningModal
+            isOpen={showSlotsNearlyFullWarning}
+            onClose={() => setHasSeenSlotsWarning(WARNING_LEVEL.NEARLY_FULL)}
+            warningLevel={WARNING_LEVEL.NEARLY_FULL}
+          />
+        ) : null}
+        {showSlotsFullWarning ? (
+          <TokenSlotsWarningModal
+            isOpen={showSlotsFullWarning}
+            onClose={() => setHasSeenSlotsWarning(WARNING_LEVEL.FULL)}
+            warningLevel={WARNING_LEVEL.FULL}
+          />
+        ) : null}
       </div>
     </main>
   )

components/modals/TokenSlotsWarningModal.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from 'react'
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import { useTranslation } from 'next-i18next'
+import Button, { LinkButton } from '@components/shared/Button'
+import TopBarStore from '@store/topBarStore'
+
+export enum WARNING_LEVEL {
+  NEARLY_FULL,
+  FULL,
+}
+
+type TokenSlotsWarningModalProps = {
+  warningLevel: WARNING_LEVEL
+}
+
+type ModalCombinedProps = TokenSlotsWarningModalProps & ModalProps
+
+const TokenSlotsWarningModal = ({
+  isOpen,
+  onClose,
+  warningLevel,
+}: ModalCombinedProps) => {
+  const { t } = useTranslation(['common', 'account'])
+  const { setShowSettingsModal } = TopBarStore()
+
+  const warningHeading = useMemo(() => {
+    if (warningLevel === WARNING_LEVEL.NEARLY_FULL) {
+      return t('account:token-slots-nearly-full')
+    } else return t('account:token-slots-full')
+  }, [warningLevel])
+
+  const handleOpenSettings = () => {
+    setShowSettingsModal(true)
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <h2 className="mb-2 text-center">{warningHeading}</h2>
+      <p className="mb-2">{t('account:token-slots-warning-desc')}</p>
+      <p>{t('account:token-slots-manage')}</p>
+      <p className="mb-2 font-bold text-th-fgd-2">
+        {t('account:slots-settings-path')}
+      </p>
+      <p>{t('account:slots-open-account')}</p>
+      <Button className="mt-6 w-full" onClick={handleOpenSettings}>
+        {t('account:open-settings')}
+      </Button>
+      <LinkButton className="mx-auto mt-3" onClick={onClose}>
+        {t('dismiss')}
+      </LinkButton>
+    </Modal>
+  )
+}
+
+export default TokenSlotsWarningModal

public/locales/en/account.json

@@ -24,9 +24,16 @@
     "no-data": "No data to display",
     "no-pnl-history": "No PnL History",
     "not-following-yet": "Your not following any accounts yet...",
+    "open-settings": "Open Settings",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
     "refresh-balance": "Refresh Balance",
+    "slots-open-account": "Open a new account to increase the number of tokens you can hold on Mango.",
+    "slots-settings-path": "Account Settings > Account Slots",
+    "token-slots-full": "You're out of token slots",
+    "token-slots-manage": "You can manage your account slots here:",
+    "token-slots-nearly-full": "You have one token slot left",
+    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow a slot will become available again.",
     "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-connect-to-follow": "Connect to follow accounts",
     "tooltip-follow-account": "Follow account on your account page",

public/locales/en/common.json

@@ -73,6 +73,7 @@
   "details": "Details",
   "disconnect": "Disconnect",
   "discord": "Discord",
+  "dismiss": "Dismiss",
   "docs": "Docs",
   "documentation": "Documentation",
   "edit": "Edit",

public/locales/es/account.json

@@ -24,9 +24,16 @@
     "no-data": "No data to display",
     "no-pnl-history": "No PnL History",
     "not-following-yet": "Your not following any accounts yet...",
+    "open-settings": "Open Settings",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
     "refresh-balance": "Refresh Balance",
+    "slots-open-account": "Open a new account to increase the number of tokens you can hold on Mango.",
+    "slots-settings-path": "Account Settings > Account Slots",
+    "token-slots-full": "You're out of token slots",
+    "token-slots-manage": "You can manage your account slots here:",
+    "token-slots-nearly-full": "You have one token slot left",
+    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow a slot will become available again.",
     "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-connect-to-follow": "Connect to follow accounts",
     "tooltip-follow-account": "Follow account on your account page",

public/locales/es/common.json

@@ -73,6 +73,7 @@
   "details": "Details",
   "disconnect": "Disconnect",
   "discord": "Discord",
+  "dismiss": "Dismiss",
   "docs": "Docs",
   "documentation": "Documentation",
   "edit": "Edit",

public/locales/ru/account.json

@@ -24,9 +24,16 @@
     "no-data": "No data to display",
     "no-pnl-history": "No PnL History",
     "not-following-yet": "Your not following any accounts yet...",
+    "open-settings": "Open Settings",
     "pnl-chart": "PnL Chart",
     "pnl-history": "PnL History",
     "refresh-balance": "Refresh Balance",
+    "slots-open-account": "Open a new account to increase the number of tokens you can hold on Mango.",
+    "slots-settings-path": "Account Settings > Account Slots",
+    "token-slots-full": "You're out of token slots",
+    "token-slots-manage": "You can manage your account slots here:",
+    "token-slots-nearly-full": "You have one token slot left",
+    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow a slot will become available again.",
     "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
     "tooltip-connect-to-follow": "Connect to follow accounts",
     "tooltip-follow-account": "Follow account on your account page",

public/locales/ru/common.json

@@ -73,6 +73,7 @@
   "details": "Details",
   "disconnect": "Disconnect",
   "discord": "Discord",
+  "dismiss": "Dismiss",
   "docs": "Docs",
   "documentation": "Documentation",
   "edit": "Edit",

public/locales/zh/account.json

@@ -24,9 +24,16 @@
     "no-data": "无数据可显示",
     "no-pnl-history": "无盈亏历史",
     "not-following-yet": "Your not following any accounts yet...",
+    "open-settings": "Open Settings",
     "pnl-chart": "盈亏图表",
     "pnl-history": "盈亏历史",
     "refresh-balance": "更新余额",
+    "slots-open-account": "Open a new account to increase the number of tokens you can hold on Mango.",
+    "slots-settings-path": "Account Settings > Account Slots",
+    "token-slots-full": "You're out of token slots",
+    "token-slots-manage": "You can manage your account slots here:",
+    "token-slots-nearly-full": "You have one token slot left",
+    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow a slot will become available again.",
     "tooltip-collateral-value": "该币种为你提供用于交易与借贷的资本金额。",
     "tooltip-connect-to-follow": "Connect to follow accounts",
     "tooltip-follow-account": "Follow account on your account page",

public/locales/zh/common.json

@@ -73,6 +73,7 @@
   "details": "细节",
   "disconnect": "断开连接",
   "discord": "Discord",
+  "dismiss": "Dismiss",
   "docs": "说明书",
   "documentation": "文档",
   "edit": "编辑",

public/locales/zh_tw/account.json

@@ -24,9 +24,16 @@
     "no-data": "無數據可顯示",
     "no-pnl-history": "無盈虧歷史",
     "not-following-yet": "Your not following any accounts yet...",
+    "open-settings": "Open Settings",
     "pnl-chart": "盈虧圖表",
     "pnl-history": "盈虧歷史",
     "refresh-balance": "更新餘額",
+    "slots-open-account": "Open a new account to increase the number of tokens you can hold on Mango.",
+    "slots-settings-path": "Account Settings > Account Slots",
+    "token-slots-full": "You're out of token slots",
+    "token-slots-manage": "You can manage your account slots here:",
+    "token-slots-nearly-full": "You have one token slot left",
+    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow a slot will become available again.",
     "tooltip-collateral-value": "該幣種為你提供用於交易與借貸的資本金額。",
     "tooltip-connect-to-follow": "Connect to follow accounts",
     "tooltip-follow-account": "Follow account on your account page",

public/locales/zh_tw/common.json

@@ -73,6 +73,7 @@
   "details": "細節",
   "disconnect": "斷開連接",
   "discord": "Discord",
+  "dismiss": "Dismiss",
   "docs": "說明書",
   "documentation": "文檔",
   "edit": "編輯",

utils/constants.ts

@@ -79,6 +79,8 @@ export const MANGO_MINTS_BANNER_KEY = 'mangoMintsBanner-0.1'
 
 export const SEND_TELEMETRY_KEY = 'sendTelemetry-0.1'
 
+export const SLOTS_WARNING_KEY = 'tokenSlotsWarning-0.1'
+
 // Unused
 export const PROFILE_CATEGORIES = [
   'borrower',