use settings for slider or buttons to swap

components/shared/LeverageSlider.tsx

@@ -1,6 +1,4 @@
-import useMangoAccount from 'hooks/useMangoAccount'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
-import { useTokenMax } from './useTokenMax'
 
 const LeverageSlider = ({
   amount,
@@ -65,41 +63,6 @@ const LeverageSlider = ({
   )
 }
 
-export const SwapLeverageSlider = ({
-  amount,
-  onChange,
-  useMargin,
-  step,
-}: {
-  amount: number
-  onChange: (x: string) => void
-  useMargin: boolean
-  step: number
-}) => {
-  const { mangoAccount } = useMangoAccount()
-  const { amountWithBorrow } = useTokenMax(useMargin)
-
-  return (
-    <>
-      {!mangoAccount ? (
-        <LeverageSlider
-          amount={amount}
-          leverageMax={100}
-          onChange={onChange}
-          step={step}
-        />
-      ) : (
-        <LeverageSlider
-          amount={amount}
-          leverageMax={amountWithBorrow.toNumber()}
-          onChange={onChange}
-          step={step}
-        />
-      )}
-    </>
-  )
-}
-
 // export const BorrowLeverageSlider = ({
 //   amount,
 //   tokenMax,

components/swap/SwapForm.tsx

@@ -15,7 +15,6 @@ import JupiterRouteInfo from './JupiterRouteInfo'
 import TokenSelect from './TokenSelect'
 import useDebounce from '../shared/useDebounce'
 import { floorToDecimal, numberFormat } from '../../utils/numbers'
-import { SwapLeverageSlider } from './LeverageSlider'
 import { useTranslation } from 'next-i18next'
 import SwapFormTokenList from './SwapFormTokenList'
 import { Transition } from '@headlessui/react'
@@ -31,6 +30,7 @@ import {
   INPUT_TOKEN_DEFAULT,
   MANGO_MINT,
   OUTPUT_TOKEN_DEFAULT,
+  SIZE_INPUT_UI_KEY,
   USDC_MINT,
 } from '../../utils/constants'
 import { useTokenMax } from './useTokenMax'
@@ -40,6 +40,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { RouteInfo } from 'types/jupiter'
 import useMangoGroup from 'hooks/useMangoGroup'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import SwapSlider from './SwapSlider'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -57,6 +59,7 @@ const SwapForm = () => {
   const [showSettings, setShowSettings] = useState(false)
   const [showConfirm, setShowConfirm] = useState(false)
   const { group } = useMangoGroup()
+  const [swapFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'Slider')
 
   const set = mangoStore.getState().set
   const {
@@ -270,13 +273,6 @@ const SwapForm = () => {
               isAllowed={withValueLimit}
             />
           </div>
-          {!useMargin ? (
-            <PercentageSelectButtons
-              amountIn={amountInFormValue}
-              setAmountIn={setAmountInFormValue}
-              useMargin={useMargin}
-            />
-          ) : null}
         </div>
         <div className="-mb-2 flex justify-center">
           <button
@@ -313,9 +309,6 @@ const SwapForm = () => {
                 </SheenLoader>
               </div>
             ) : (
-              // <span className="p-3 font-mono">
-              //   {amountOut ? numberFormat.format(amountOut.toNumber()) : ''}
-              // </span>
               <NumberFormat
                 inputMode="decimal"
                 thousandSeparator=","
@@ -332,20 +325,20 @@ const SwapForm = () => {
             )}
           </div>
         </div>
-        {useMargin ? (
-          <>
-            <div className="mb-1 flex items-center justify-between">
-              <p className="text-th-fgd-3">{t('leverage')}</p>
-              {/* <p className="text-th-fgd-1">0.00x</p> */}
-            </div>
-            <SwapLeverageSlider
-              useMargin={useMargin}
-              amount={amountIn.toNumber()}
-              onChange={setAmountInFormValue}
-              step={1 / 10 ** (inputBank?.mintDecimals || 6)}
-            />
-          </>
-        ) : null}
+        {swapFormSizeUi === 'Slider' ? (
+          <SwapSlider
+            useMargin={useMargin}
+            amount={amountIn.toNumber()}
+            onChange={setAmountInFormValue}
+            step={1 / 10 ** (inputBank?.mintDecimals || 6)}
+          />
+        ) : (
+          <PercentageSelectButtons
+            amountIn={amountIn.toString()}
+            setAmountIn={setAmountInFormValue}
+            useMargin={useMargin}
+          />
+        )}
         <SwapFormSubmitButton
           loadingSwapDetails={loadingSwapDetails}
           useMargin={useMargin}
@@ -478,18 +471,27 @@ const PercentageSelectButtons = ({
   useMargin: boolean
 }) => {
   const [sizePercentage, setSizePercentage] = useState('')
-  const { amount: tokenMax, decimals } = useTokenMax(useMargin)
+  const {
+    amount: tokenMax,
+    amountWithBorrow,
+    decimals,
+  } = useTokenMax(useMargin)
+
+  const maxAmount = useMemo(() => {
+    if (!tokenMax && !amountWithBorrow) return new Decimal(0)
+    return useMargin ? amountWithBorrow : tokenMax
+  }, [tokenMax, amountWithBorrow, useMargin])
 
   useEffect(() => {
-    if (tokenMax.gt(0) && amountIn && tokenMax.eq(amountIn)) {
+    if (maxAmount.gt(0) && amountIn && maxAmount.eq(amountIn)) {
       setSizePercentage('100')
     }
-  }, [amountIn, tokenMax])
+  }, [amountIn, maxAmount])
 
   const handleSizePercentage = (percentage: string) => {
     setSizePercentage(percentage)
-    if (tokenMax.gt(0)) {
-      let amount = tokenMax.mul(percentage).div(100)
+    if (maxAmount.gt(0)) {
+      let amount = maxAmount.mul(percentage).div(100)
       if (percentage !== '100') {
         amount = floorToDecimal(amount, decimals)
       }

components/swap/SwapSlider.tsx

@@ -0,0 +1,42 @@
+import useMangoAccount from 'hooks/useMangoAccount'
+import LeverageSlider from '../shared/LeverageSlider'
+import { useTokenMax } from './useTokenMax'
+
+const SwapSlider = ({
+  amount,
+  onChange,
+  useMargin,
+  step,
+}: {
+  amount: number
+  onChange: (x: string) => void
+  useMargin: boolean
+  step: number
+}) => {
+  const { mangoAccount } = useMangoAccount()
+  const { amount: tokenMax, amountWithBorrow } = useTokenMax(useMargin)
+
+  return (
+    <>
+      {!mangoAccount ? (
+        <LeverageSlider
+          amount={amount}
+          leverageMax={100}
+          onChange={onChange}
+          step={step}
+        />
+      ) : (
+        <LeverageSlider
+          amount={amount}
+          leverageMax={
+            useMargin ? amountWithBorrow.toNumber() : tokenMax.toNumber()
+          }
+          onChange={onChange}
+          step={step}
+        />
+      )}
+    </>
+  )
+}
+
+export default SwapSlider

components/trade/AdvancedTradeForm.tsx

@@ -30,7 +30,7 @@ import TabUnderline from '@components/shared/TabUnderline'
 import PerpSlider from './PerpSlider'
 import HealthImpact from '@components/shared/HealthImpact'
 import useLocalStorageState from 'hooks/useLocalStorageState'
-import { TRADE_FORM_UI_KEY } from 'utils/constants'
+import { SIZE_INPUT_UI_KEY } from 'utils/constants'
 import SpotButtonGroup from './SpotButtonGroup'
 import PerpButtonGroup from './PerpButtonGroup'
 import SolBalanceWarnings from '@components/shared/SolBalanceWarnings'
@@ -51,7 +51,7 @@ const AdvancedTradeForm = () => {
   const { selectedMarket, price: marketPrice } = useSelectedMarket()
   const [useMargin, setUseMargin] = useState(true)
   const [placingOrder, setPlacingOrder] = useState(false)
-  const [tradeFormUi] = useLocalStorageState(TRADE_FORM_UI_KEY, 'Slider')
+  const [tradeFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'Slider')
 
   const baseSymbol = useMemo(() => {
     return selectedMarket?.name.split(/-|\//)[0]
@@ -457,14 +457,14 @@ const AdvancedTradeForm = () => {
           </div>
         </div>
       </div>
-      <div className={`${tradeFormUi === 'Slider' ? 'mt-4' : 'mt-2'} flex`}>
+      <div className={`${tradeFormSizeUi === 'Slider' ? 'mt-4' : 'mt-2'} flex`}>
         {selectedMarket instanceof Serum3Market ? (
-          tradeFormUi === 'Slider' ? (
+          tradeFormSizeUi === 'Slider' ? (
             <SpotSlider />
           ) : (
             <SpotButtonGroup />
           )
-        ) : tradeFormUi === 'Slider' ? (
+        ) : tradeFormSizeUi === 'Slider' ? (
           <PerpSlider />
         ) : (
           <PerpButtonGroup />

components/trade/PerpSlider.tsx

@@ -1,5 +1,5 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
-import LeverageSlider from '@components/swap/LeverageSlider'
+import LeverageSlider from '@components/shared/LeverageSlider'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useSelectedMarket from 'hooks/useSelectedMarket'

components/trade/SpotSlider.tsx

@@ -1,5 +1,5 @@
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
-import LeverageSlider from '@components/swap/LeverageSlider'
+import LeverageSlider from '@components/shared/LeverageSlider'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useSelectedMarket from 'hooks/useSelectedMarket'

pages/settings.tsx

@@ -10,7 +10,7 @@ import {
   NOTIFICATION_POSITION_KEY,
   ORDERBOOK_FLASH_KEY,
   PREFERRED_EXPLORER_KEY,
-  TRADE_FORM_UI_KEY,
+  SIZE_INPUT_UI_KEY,
 } from 'utils/constants'
 import Switch from '@components/forms/Switch'
 import { useCallback, useMemo } from 'react'
@@ -80,7 +80,7 @@ const Settings: NextPage = () => {
     EXPLORERS[0]
   )
   const [tradeFormUi, setTradeFormUi] = useLocalStorageState(
-    TRADE_FORM_UI_KEY,
+    SIZE_INPUT_UI_KEY,
     'Slider'
   )
   const themes = useMemo(() => {
@@ -141,7 +141,9 @@ const Settings: NextPage = () => {
             </div>
           </div>
           <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
-            <p className="mb-2 lg:mb-0">{t('settings:trade-size-ui')}</p>
+            <p className="mb-2 lg:mb-0">
+              {t('settings:swap-trade-size-selector')}
+            </p>
             <div className="w-full min-w-[160px] md:w-auto">
               <ButtonGroup
                 activeValue={tradeFormUi}

public/locales/en/settings.json

@@ -23,5 +23,5 @@
     "theme": "Theme",
     "top-left": "Top-Left",
     "top-right": "Top-Right",
-    "trade-size-ui": "Trade Size UI"
+    "swap-trade-size-selector": "Swap/Trade Size Selector"
 }

public/locales/es/settings.json

@@ -23,5 +23,5 @@
     "theme": "Theme",
     "top-left": "Top-Left",
     "top-right": "Top-Right",
-    "trade-size-ui": "Trade Size UI"
+    "swap-trade-size-selector": "Swap/Trade Size Selector"
 }

public/locales/ru/settings.json

@@ -23,5 +23,5 @@
     "theme": "Theme",
     "top-left": "Top-Left",
     "top-right": "Top-Right",
-    "trade-size-ui": "Trade Size UI"
+    "swap-trade-size-selector": "Swap/Trade Size Selector"
 }

public/locales/zh/settings.json

@@ -23,5 +23,5 @@
     "theme": "Theme",
     "top-left": "Top-Left",
     "top-right": "Top-Right",
-    "trade-size-ui": "Trade Size UI"
+    "swap-trade-size-selector": "Swap/Trade Size Selector"
 }

public/locales/zh_tw/settings.json

@@ -23,5 +23,5 @@
     "theme": "Theme",
     "top-left": "Top-Left",
     "top-right": "Top-Right",
-    "trade-size-ui": "Trade Size UI"
+    "swap-trade-size-selector": "Swap/Trade Size Selector"
 }

utils/constants.ts

@@ -19,7 +19,7 @@ export const ONBOARDING_TOUR_KEY = 'showOnboardingTour'
 
 export const PREFERRED_EXPLORER_KEY = 'preferredExplorer'
 
-export const TRADE_FORM_UI_KEY = 'tradeFormUi'
+export const SIZE_INPUT_UI_KEY = 'tradeFormUi'
 
 export const PROFILE_CATEGORIES = [
   'borrower',