fixes

components/Layout.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useMemo, useState } from 'react'
+import { Fragment, ReactNode, useEffect, useMemo, useState } from 'react'
 import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import TopBar from './TopBar'
@@ -32,9 +32,8 @@ const Layout = ({ children }: { children: ReactNode }) => {
     return asPath === '/dashboard' || asPath === '/stats'
   }, [asPath])
 
-  // const [mounted, setMounted] = useState(false)
-  // useEffect(() => setMounted(true), [])
-  // if (!mounted) return null
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
 
   return (
     <main
@@ -71,11 +70,10 @@ const Layout = ({ children }: { children: ReactNode }) => {
               </div>
               {children}
             </>
-            // <div className="mx-auto max-w-[1440px]">{children}</div>
           )}
           <Footer />
           <DeployRefreshManager />
-          {isDashboardLayout ? <TermsOfUse /> : null}
+          {isDashboardLayout && mounted ? <TermsOfUse /> : null}
           <RestrictedCountryCheck
             ipCountry={ipCountry}
             loadingIpCountry={loadingIpCountry}

components/StakeForm.tsx

@@ -27,9 +27,7 @@ import {
 import { isMangoError } from 'types'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
-import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
 import InlineNotification from './shared/InlineNotification'
-import Link from 'next/link'
 import LeverageSlider from './shared/LeverageSlider'
 import useMangoGroup from 'hooks/useMangoGroup'
 import FormatNumericValue from './shared/FormatNumericValue'
@@ -123,7 +121,6 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
   const wallet = useWallet()
   const connection = mangoStore((s) => s.connection)
   const storedLeverage = mangoStore((s) => s.leverage)
-  const { usedTokens, totalTokens } = useMangoAccountAccounts()
   const { jlpGroup, lstGroup } = useMangoGroup()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
   const { financialMetrics, borrowBankBorrowRate } = useBankRates(
@@ -199,25 +196,18 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
     return change
   }, [liquidationPrice, stakePrice])
 
-  const tokenPositionsFull = useMemo(() => {
-    if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
-    const hasTokenPosition = usedTokens.find(
-      (token) => token.tokenIndex === stakeBank.tokenIndex,
-    )
-    return hasTokenPosition ? false : usedTokens.length >= totalTokens.length
-  }, [stakeBank, usedTokens, totalTokens])
-
   const tokenMax = useMemo(() => {
     if (!depositBank) return { maxAmount: 0, maxDecimals: 0 }
     return walletBalanceForToken(walletTokens, depositBank.name, clientContext)
   }, [walletTokens, depositBank, clientContext])
 
+  const isExistingPosition = useMemo(() => {
+    return positions.find((p) => p.bank.name === selectedToken)
+  }, [positions, selectedToken])
+
   const minSol = useMemo(() => {
-    const isExistingPosition = positions.find(
-      (p) => p.bank.name === selectedToken,
-    )
     return isExistingPosition ? MIN_SOL_BALANCE : MIN_SOL_BALANCE_FOR_ACCOUNT
-  }, [positions, selectedToken])
+  }, [isExistingPosition])
 
   const setMax = useCallback(() => {
     if (!depositBank) return
@@ -902,53 +892,50 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
           ) : null}
         </div>
         {connected ? (
-          <Button
-            onClick={handleDeposit}
-            className="w-full"
-            disabled={
-              connected &&
-              (!inputAmount ||
-                Number(inputAmount) == 0 ||
-                showInsufficientBalance ||
-                (borrowBank && availableVaultBalance < amountToBorrow) ||
-                depositLimitExceeded ||
-                !ipAllowed)
-            }
-            size="large"
-          >
-            {submitting ? (
-              <Loading className="mr-2 h-5 w-5" />
-            ) : showInsufficientBalance ? (
-              <div className="flex items-center">
-                <ExclamationCircleIcon className="icon-shadow mr-2 h-5 w-5 shrink-0" />
-                {t('swap:insufficient-balance', {
-                  symbol: selectedToken,
-                })}
+          <>
+            <Button
+              onClick={handleDeposit}
+              className="w-full"
+              disabled={
+                connected &&
+                (!inputAmount ||
+                  Number(inputAmount) == 0 ||
+                  showInsufficientBalance ||
+                  (borrowBank && availableVaultBalance < amountToBorrow) ||
+                  depositLimitExceeded ||
+                  !ipAllowed)
+              }
+              size="large"
+            >
+              {submitting ? (
+                <Loading className="mr-2 h-5 w-5" />
+              ) : showInsufficientBalance ? (
+                <div className="flex items-center">
+                  <ExclamationCircleIcon className="icon-shadow mr-2 h-5 w-5 shrink-0" />
+                  {t('swap:insufficient-balance', {
+                    symbol: selectedToken,
+                  })}
+                </div>
+              ) : ipAllowed ? (
+                `Add ${
+                  isSwapMode && uiOutAmount ? uiOutAmount : inputAmount
+                } ${formatTokenSymbol(selectedToken)}`
+              ) : (
+                'Country not allowed'
+              )}
+            </Button>
+            {!isExistingPosition ? (
+              <div className="mt-4">
+                <InlineNotification
+                  type="info"
+                  desc="It costs a small amount of SOL to open a new position. This is fully refunded when you close your position."
+                />
               </div>
-            ) : ipAllowed ? (
-              `Add ${
-                isSwapMode && uiOutAmount ? uiOutAmount : inputAmount
-              } ${formatTokenSymbol(selectedToken)}`
-            ) : (
-              'Country not allowed'
-            )}
-          </Button>
+            ) : null}
+          </>
         ) : (
           <SecondaryConnectButton className="w-full" isLarge />
         )}
-        {tokenPositionsFull ? (
-          <InlineNotification
-            type="error"
-            desc={
-              <>
-                {t('error-token-positions-full')}{' '}
-                <Link href="/settings" shallow>
-                  {t('manage')}
-                </Link>
-              </>
-            }
-          />
-        ) : null}
       </div>
     </>
   )

components/ThemeToggle.tsx

@@ -1,11 +1,12 @@
 import { useTheme } from 'next-themes'
 import { IconButton } from './shared/Button'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
 
 const ThemeToggle = () => {
   const { setTheme } = useTheme()
   const [isDarkTheme, setIsDarkTheme] = useState(false)
+  const [mounted, setMounted] = useState(false)
 
   const handleToggleTheme = (isDark: boolean) => {
     setIsDarkTheme(!isDark)
@@ -16,6 +17,9 @@ const ThemeToggle = () => {
     }
   }
 
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
   return (
     <IconButton onClick={() => handleToggleTheme(isDarkTheme)} size="large">
       {isDarkTheme ? (

components/TopBar.tsx

@@ -52,6 +52,7 @@ const TopBar = () => {
               path="/stats"
               text="Stats"
             />
+            {/* <NavLink active={pathname === '/faqs'} path="/faqs" text="FAQs" /> */}
           </>
         ) : null}
       </div>