add validation to deposit form when token positions full

components/DepositForm.tsx

@@ -36,6 +36,9 @@ import { isMangoError } from 'types'
 import TokenListButton from './shared/TokenListButton'
 import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 import TokenLogo from './shared/TokenLogo'
+import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
+import InlineNotification from './shared/InlineNotification'
+import Link from 'next/link'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -76,12 +79,21 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
   const { connect } = useWallet()
   const { maxSolDeposit } = useSolBalance()
   const banks = useBanksWithBalances('walletBalance')
+  const { usedTokens, totalTokens } = useMangoAccountAccounts()
 
   const bank = useMemo(() => {
     const group = mangoStore.getState().group
     return group?.banksMapByName.get(selectedToken)?.[0]
   }, [selectedToken])
 
+  const tokenPositionsFull = useMemo(() => {
+    if (!bank || !usedTokens.length || !totalTokens.length) return true
+    const hasTokenPosition = usedTokens.find(
+      (token) => token.tokenIndex === bank.tokenIndex,
+    )
+    return hasTokenPosition ? false : usedTokens.length >= totalTokens.length
+  }, [bank, usedTokens, totalTokens])
+
   const { connected, publicKey } = useWallet()
   const walletTokens = mangoStore((s) => s.wallet.tokens)
 
@@ -293,7 +305,10 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
           <Button
             onClick={connected ? handleDeposit : connect}
             className="flex w-full items-center justify-center"
-            disabled={connected && (!inputAmount || showInsufficientBalance)}
+            disabled={
+              connected &&
+              (!inputAmount || showInsufficientBalance || tokenPositionsFull)
+            }
             size="large"
           >
             {!connected ? (
@@ -317,6 +332,19 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
               </div>
             )}
           </Button>
+          {tokenPositionsFull ? (
+            <InlineNotification
+              type="error"
+              desc={
+                <>
+                  {t('error-token-positions-full')}{' '}
+                  <Link href="/settings" onClick={() => onSuccess()} shallow>
+                    {t('manage')}
+                  </Link>
+                </>
+              }
+            />
+          ) : null}
         </div>
       </FadeInFadeOut>
     </>

public/locales/en/common.json

@@ -75,6 +75,7 @@
   "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
+  "error-token-positions-full": "No token positions available in your account.",
   "explorer": "Explorer",
   "fee": "Fee",
   "feedback-survey": "Feedback Survey",
@@ -102,6 +103,7 @@
   "loading": "Loading",
   "loan-origination-fee": "Borrow Fee",
   "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow",
+  "manage": "Manage",
   "mango": "Mango",
   "mango-stats": "Mango Stats",
   "market": "Market",

public/locales/es/common.json

@@ -75,6 +75,7 @@
   "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
+  "error-token-positions-full": "No token positions available in your account.",
   "explorer": "Explorer",
   "fee": "Fee",
   "feedback-survey": "Feedback Survey",
@@ -102,6 +103,7 @@
   "loading": "Loading",
   "loan-origination-fee": "Borrow Fee",
   "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow",
+  "manage": "Manage",
   "mango": "Mango",
   "mango-stats": "Mango Stats",
   "market": "Market",

public/locales/ru/common.json

@@ -75,6 +75,7 @@
   "edit": "Edit",
   "edit-account": "Edit Account Name",
   "edit-profile-image": "Edit Profile Image",
+  "error-token-positions-full": "No token positions available in your account.",
   "explorer": "Explorer",
   "fee": "Fee",
   "feedback-survey": "Feedback Survey",
@@ -102,6 +103,7 @@
   "loading": "Loading",
   "loan-origination-fee": "Borrow Fee",
   "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow",
+  "manage": "Manage",
   "mango": "Mango",
   "mango-stats": "Mango Stats",
   "market": "Market",

public/locales/zh/common.json

@@ -75,6 +75,7 @@
   "edit": "编辑",
   "edit-account": "编辑帐户标签",
   "edit-profile-image": "切换头像",
+  "error-token-positions-full": "No token positions available in your account.",
   "explorer": "浏览器",
   "fee": "费用",
   "feedback-survey": "Feedback Survey",
@@ -101,6 +102,7 @@
   "loading": "加载中",
   "loan-origination-fee": "借贷费用",
   "loan-origination-fee-tooltip": "执行借贷费用是{{fee}}。",
+  "manage": "Manage",
   "mango": "Mango",
   "mango-stats": "Mango统计",
   "market": "市场",

public/locales/zh_tw/common.json

@@ -75,6 +75,7 @@
   "edit": "編輯",
   "edit-account": "編輯帳戶標籤",
   "edit-profile-image": "切換頭像",
+  "error-token-positions-full": "No token positions available in your account.",
   "explorer": "瀏覽器",
   "fee": "費用",
   "feedback-survey": "Feedback Survey",
@@ -101,6 +102,7 @@
   "loading": "加載中",
   "loan-origination-fee": "借貸費用",
   "loan-origination-fee-tooltip": "執行借貸費用是{{fee}}。",
+  "manage": "Manage",
   "mango": "Mango",
   "mango-stats": "Mango統計",
   "market": "市場",