fix modals; add eslintrc for useEffect

.eslintrc.json

@@ -10,6 +10,8 @@
   "rules": {
     "react/react-in-jsx-scope": 0,
     "@next/next/no-img-element": 0,
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
     "@typescript-eslint/no-unused-vars": [
       2,
       {

components/modals/DepositModal.tsx

@@ -44,7 +44,7 @@ export const walletBalanceForToken = (
   token: string
 ): { maxAmount: number; maxDecimals: number } => {
   const group = mangoStore.getState().group
-  const bank = group?.banksMapByName.get(token)![0]
+  const bank = group?.banksMapByName.get(token)?.[0]
 
   let walletToken
   if (bank) {
@@ -97,7 +97,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const setMax = useCallback(() => {
     setInputAmount(tokenMax.maxAmount.toString())
     setSizePercentage('100')
-  }, [tokenMax, selectedToken])
+  }, [tokenMax])
 
   const handleSizePercentage = useCallback(
     (percentage: string) => {
@@ -108,7 +108,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
 
       setInputAmount(amount.toString())
     },
-    [tokenMax, selectedToken]
+    [tokenMax]
   )
 
   const handleSelectToken = (token: string) => {
@@ -152,7 +152,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
     }
 
     onClose()
-  }, [bank, wallet, inputAmount])
+  }, [bank, wallet, inputAmount, onClose])
 
   // TODO extract into a shared hook for UserSetup.tsx
   const banks = useMemo(() => {
@@ -175,6 +175,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
 
   const exceedsAlphaMax = useMemo(() => {
     const mangoAccount = mangoStore.getState().mangoAccount.current
+    const group = mangoStore.getState().group
     if (!group || !mangoAccount) return
     if (
       mangoAccount.owner.toString() ===
@@ -182,7 +183,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
     )
       return false
     const accountValue = toUiDecimalsForQuote(
-      mangoAccount.getEquity(group)!.toNumber()
+      mangoAccount.getEquity(group).toNumber()
     )
     return (
       parseFloat(inputAmount) > ALPHA_DEPOSIT_LIMIT ||

components/modals/RepayModal.tsx

@@ -84,7 +84,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const setMax = useCallback(() => {
     setInputAmount(borrowAmount.toFixed(bank?.mintDecimals))
     setSizePercentage('100')
-  }, [bank, borrowAmount, selectedToken])
+  }, [bank, borrowAmount])
 
   const handleSizePercentage = useCallback(
     (percentage: string) => {
@@ -97,7 +97,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
 
       setInputAmount(amount.toFixed(bank?.mintDecimals))
     },
-    [bank, borrowAmount, selectedToken]
+    [bank, borrowAmount]
   )
 
   const handleSelectToken = (token: string) => {
@@ -144,7 +144,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
 
       onClose()
     },
-    [bank, wallet]
+    [bank, wallet, onClose]
   )
 
   const banks = useMemo(() => {
@@ -164,7 +164,7 @@ function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
           }).filter((b) => b.borrowAmount > 0)
         : []
     return banks
-  }, [group?.banksMapByName, walletTokens, mangoAccount])
+  }, [group?.banksMapByName, mangoAccount])
 
   useEffect(() => {
     if (!token && banks.length) {