fix settings link

components/DepositForm.tsx

@@ -37,8 +37,9 @@ import { ACCOUNT_ACTIONS_NUMBER_FORMAT_CLASSES, BackButton } from './BorrowForm'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import InlineNotification from './shared/InlineNotification'
-import Link from 'next/link'
 import useTokenPositionsFull from 'hooks/useTokenPositionsFull'
+import TopBarStore from '@store/topBarStore'
+import Link from 'next/link'
 
 interface DepositFormProps {
   onSuccess: () => void
@@ -77,6 +78,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
   const [sizePercentage, setSizePercentage] = useState('')
   const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
   const { maxSolDeposit } = useSolBalance()
+  const { setShowSettingsModal } = TopBarStore()
   const banks = useBanksWithBalances('walletBalance')
 
   const bank = useMemo(() => {
@@ -330,7 +332,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
                 desc={
                   <>
                     {t('error-token-positions-full')}{' '}
-                    <Link href="/settings" onClick={() => onSuccess()} shallow>
+                    <Link href={''} onClick={() => setShowSettingsModal(true)}>
                       {t('manage')}
                     </Link>
                   </>

components/TopBar.tsx

@@ -36,6 +36,7 @@ import Link from 'next/link'
 import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
 import FormatNumericValue from './shared/FormatNumericValue'
 import { useRouter } from 'next/router'
+import TopBarStore from '@store/topBarStore'
 
 export const TOPBAR_ICON_BUTTON_CLASSES =
   'relative flex h-16 w-10 sm:w-16 items-center justify-center sm:border-l sm:border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2'
@@ -61,7 +62,7 @@ const TopBar = () => {
   const [showDepositWithdrawModal, setShowDepositWithdrawModal] =
     useState(false)
   const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
-  const [showSettingsModal, setShowSettingsModal] = useState(false)
+  const { showSettingsModal, setShowSettingsModal } = TopBarStore()
   const isOnline = useOnlineStatus()
 
   const { isUnownedAccount } = useUnownedAccount()

components/swap/MarketSwapForm.tsx

@@ -36,6 +36,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { formatCurrencyValue } from 'utils/numbers'
 import { SwapFormTokenListType } from './SwapFormTokenList'
 import useTokenPositionsFull from 'hooks/useTokenPositionsFull'
+import TopBarStore from '@store/topBarStore'
 
 dayjs.extend(relativeTime)
 
@@ -318,6 +319,7 @@ const SwapFormSubmitButton = ({
   const { t } = useTranslation('common')
   const { mangoAccountAddress } = useMangoAccount()
   const { connected } = useWallet()
+  const { setShowSettingsModal } = TopBarStore()
   // const { amount: tokenMax, amountWithBorrow } = useTokenMax(useMargin)
   const { inputBank, outputBank } = mangoStore((s) => s.swap)
   const { remainingBorrowsInPeriod, timeToNextPeriod } =
@@ -370,7 +372,7 @@ const SwapFormSubmitButton = ({
             desc={
               <>
                 {t('error-token-positions-full')}{' '}
-                <Link href="/settings" shallow>
+                <Link href={''} onClick={() => setShowSettingsModal(true)}>
                   {t('manage')}
                 </Link>
               </>

components/swap/TriggerSwapForm.tsx

@@ -48,6 +48,7 @@ import { formatTokenSymbol } from 'utils/tokens'
 import Tooltip from '@components/shared/Tooltip'
 import Link from 'next/link'
 import useTokenPositionsFull from 'hooks/useTokenPositionsFull'
+import TopBarStore from '@store/topBarStore'
 
 dayjs.extend(relativeTime)
 
@@ -112,6 +113,7 @@ const TriggerSwapForm = ({
   const { t } = useTranslation(['common', 'swap', 'trade'])
   const { mangoAccountAddress } = useMangoAccount()
   const { ipAllowed, ipCountry } = useIpAddress()
+  const { setShowSettingsModal } = TopBarStore()
   // const [triggerPrice, setTriggerPrice] = useState('')
   const [orderType, setOrderType] = useState(ORDER_TYPES[0])
   const [submitting, setSubmitting] = useState(false)
@@ -890,7 +892,7 @@ const TriggerSwapForm = ({
             desc={
               <>
                 {t('error-token-positions-full')}{' '}
-                <Link href="/settings" shallow>
+                <Link href={''} onClick={() => setShowSettingsModal(true)}>
                   {t('manage')}
                 </Link>
               </>

store/topBarStore.ts

@@ -0,0 +1,21 @@
+import produce from 'immer'
+import create from 'zustand'
+
+type ItopBarStore = {
+  showSettingsModal: boolean
+  set: (x: (x: ItopBarStore) => void) => void
+  setShowSettingsModal: (val: boolean) => void
+}
+
+const TopBarStore = create<ItopBarStore>((set, get) => ({
+  showSettingsModal: false,
+  set: (fn) => set(produce(fn)),
+  setShowSettingsModal: (val: boolean) => {
+    const set = get().set
+    set((state) => {
+      state.showSettingsModal = val
+    })
+  },
+}))
+
+export default TopBarStore