filter tokens in remove list

components/Footer.tsx

@@ -1,8 +1,6 @@
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
-
 const Footer = () => {
   return (
-    <div className="mt-6 flex items-center justify-between rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-4">
+    <div className="mt-6 flex items-center justify-center rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-4">
       <a
         href="https://app.mango.markets"
         rel="noopener noreferrer"
@@ -10,15 +8,6 @@ const Footer = () => {
       >
         <span className="font-bold text-th-fgd-1">Powered by 🥭</span>
       </a>
-      <a
-        className="flex items-center rounded bg-th-bkg-1 px-1.5 py-1 text-th-fgd-1"
-        target="_blank"
-        href="https://boost-v1.mango.markets/"
-        rel="noopener noreferrer"
-      >
-        <span className="mr-1.5 block font-bold leading-none">Boost! v1</span>
-        <ArrowTopRightOnSquareIcon className="h-5 w-5" />
-      </a>
     </div>
   )
 }

components/Layout.tsx

@@ -1,8 +1,5 @@
 import { Fragment, ReactNode, useEffect, useMemo, useState } from 'react'
-import {
-  ArrowPathIcon,
-  ArrowTopRightOnSquareIcon,
-} from '@heroicons/react/20/solid'
+import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import TopBar from './TopBar'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@@ -43,7 +40,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
             {children}
             <Footer />
           </div>
-          <div className="fixed bottom-8 right-8 hidden lg:block">
+          {/* <div className="fixed bottom-8 right-8 hidden lg:block">
             <a
               className="flex items-center rounded-md border-b-2 border-th-bkg-3 bg-th-bkg-1 px-2 py-0.5 text-th-fgd-1"
               target="_blank"
@@ -53,7 +50,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
               <span className="mr-1.5 block font-bold">Boost! v1</span>
               <ArrowTopRightOnSquareIcon className="h-5 w-5" />
             </a>
-          </div>
+          </div> */}
           <DeployRefreshManager />
           <TermsOfUse />
           <RestrictedCountryCheck

components/Positions.tsx

@@ -50,8 +50,6 @@ const Positions = ({
     showInactivePositions,
   )
 
-  console.log(positions)
-
   const numberOfPositions = useMemo(() => {
     if (!positions.length) return 0
     return positions.filter((pos) => pos.stakeBalance > 0).length

components/Stake.tsx

@@ -1,5 +1,5 @@
 import TokenButton from './TokenButton'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import TabUnderline from './shared/TabUnderline'
 import StakeForm from '@components/StakeForm'
 import UnstakeForm from '@components/UnstakeForm'
@@ -12,6 +12,7 @@ import DespositForm from './DepositForm'
 import { EnterBottomExitBottom } from './shared/Transitions'
 import TokenSelect from './TokenSelect'
 import Label from './forms/Label'
+import usePositions from 'hooks/usePositions'
 
 const set = mangoStore.getState().set
 
@@ -20,6 +21,7 @@ const Stake = () => {
   const [showTokenSelect, setShowTokenSelect] = useState(false)
   const selectedToken = mangoStore((s) => s.selectedToken)
   const { isDesktop } = useViewport()
+  const { positions } = usePositions()
 
   const handleTokenSelect = useCallback((token: string) => {
     set((state) => {
@@ -28,6 +30,32 @@ const Stake = () => {
     setShowTokenSelect(false)
   }, [])
 
+  const handleTabChange = useCallback(
+    (tab: string) => {
+      setActiveFormTab(tab)
+      if (tab === 'Remove' && positions?.length) {
+        const hasPosition = positions.find(
+          (position) => position.bank.name === selectedToken,
+        )
+        if (!hasPosition) {
+          set((state) => {
+            state.selectedToken = positions[0].bank.name
+          })
+        }
+      }
+    },
+    [positions, selectedToken],
+  )
+
+  const selectableTokens = useMemo(() => {
+    if (activeFormTab === 'Add') {
+      return STAKEABLE_TOKENS
+    } else if (positions?.length) {
+      const positionTokens = positions.map((position) => position.bank.name)
+      return positionTokens
+    } else return []
+  }, [activeFormTab, positions])
+
   const swapUrl = `https://app.mango.markets/swap?in=USDC&out=${selectedToken}&walletSwap=true`
 
   return (
@@ -41,7 +69,7 @@ const Stake = () => {
             Select token to {activeFormTab === 'Add' ? 'Boost!' : 'Unboost'}
           </h2>
           <div className="space-y-4">
-            {STAKEABLE_TOKENS.map((token) => (
+            {selectableTokens.map((token) => (
               <TokenSelect
                 key={token}
                 onClick={() => handleTokenSelect(token)}
@@ -58,32 +86,44 @@ const Stake = () => {
               <TabUnderline
                 activeValue={activeFormTab}
                 values={['Add', 'Remove']}
-                onChange={(v) => setActiveFormTab(v)}
+                onChange={(v) => handleTabChange(v)}
               />
             </div>
-            <div className="pb-6">
-              <Label text="Token" />
-              <TokenButton
-                onClick={() => setShowTokenSelect(true)}
-                tokenName={selectedToken}
-              />
-            </div>
-            {selectedToken == 'USDC' ? (
+            {selectableTokens.length ? (
               <>
-                {activeFormTab === 'Add' ? <DespositForm token="USDC" /> : null}
-                {activeFormTab === 'Remove' ? (
-                  <UnstakeForm token="USDC" />
-                ) : null}
+                <div className="pb-6">
+                  <Label text="Token" />
+                  <TokenButton
+                    onClick={() => setShowTokenSelect(true)}
+                    tokenName={selectedToken}
+                  />
+                </div>
+                {selectedToken == 'USDC' ? (
+                  <>
+                    {activeFormTab === 'Add' ? (
+                      <DespositForm token="USDC" />
+                    ) : null}
+                    {activeFormTab === 'Remove' ? (
+                      <UnstakeForm token="USDC" />
+                    ) : null}
+                  </>
+                ) : (
+                  <>
+                    {activeFormTab === 'Add' ? (
+                      <StakeForm token={selectedToken} />
+                    ) : null}
+                    {activeFormTab === 'Remove' ? (
+                      <UnstakeForm token={selectedToken} />
+                    ) : null}
+                  </>
+                )}
               </>
             ) : (
-              <>
-                {activeFormTab === 'Add' ? (
-                  <StakeForm token={selectedToken} />
-                ) : null}
-                {activeFormTab === 'Remove' ? (
-                  <UnstakeForm token={selectedToken} />
-                ) : null}
-              </>
+              <div className="p-10">
+                <p className="text-center text-th-fgd-4">
+                  No positions to remove
+                </p>
+              </div>
             )}
           </div>
         </div>

components/UnstakeForm.tsx

@@ -51,13 +51,9 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
   const { t } = useTranslation(['common', 'account'])
   const [inputAmount, setInputAmount] = useState('')
   const [submitting, setSubmitting] = useState(false)
-  // const [selectedToken, setSelectedToken] = useState(
-  //   token || INPUT_TOKEN_DEFAULT,
-  // )
   const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
   const [sizePercentage, setSizePercentage] = useState('')
   const { maxSolDeposit } = useSolBalance()
-  // const banks = useBanksWithBalances('walletBalance')
   const { usedTokens, totalTokens } = useMangoAccountAccounts()
   const { jlpGroup, lstGroup } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
@@ -74,14 +70,6 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
     return [stakeBank, borrowBank]
   }, [selectedToken, jlpGroup, lstGroup])
 
-  // const stakeBank = useMemo(() => {
-  //   return group?.banksMapByName.get(selectedToken)?.[0]
-  // }, [selectedToken, group])
-
-  // const borrowBank = useMemo(() => {
-  //   return group?.banksMapByName.get('USDC')?.[0]
-  // }, [group])
-
   const tokenPositionsFull = useMemo(() => {
     if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
     const hasTokenPosition = usedTokens.find(