Merge pull request #135 from blockworks-foundation/max/disable-spot-margin

disable spot margin by default

components/SettingsModal.tsx

@@ -29,6 +29,7 @@ const CUSTOM_NODE = NODE_URLS.find((n) => n.label === 'Custom')
 export const NODE_URL_KEY = 'node-url-key-0.5'
 export const DEFAULT_MARKET_KEY = 'defaultMarket'
 export const ORDERBOOK_FLASH_KEY = 'showOrderbookFlash'
+export const DEFAULT_SPOT_MARGIN_KEY = 'defaultSpotMargin'
 export const initialMarket = {
   base: 'BTC',
   kind: 'perp',
@@ -43,6 +44,7 @@ const SettingsModal = ({ isOpen, onClose }) => {
     NODE_URL_KEY,
     NODE_URLS[0].value
   )
+
   const [defaultMarket] = useLocalStorageState(
     DEFAULT_MARKET_KEY,
     initialMarket
@@ -51,6 +53,12 @@ const SettingsModal = ({ isOpen, onClose }) => {
     ORDERBOOK_FLASH_KEY,
     true
   )
+
+  const [defaultSpotMargin, setDefaultSpotMargin] = useLocalStorageState(
+    DEFAULT_SPOT_MARGIN_KEY,
+    false
+  )
+
   const rpcEndpoint =
     NODE_URLS.find((node) => node.value === rpcEndpointUrl) || CUSTOM_NODE
   return (
@@ -96,6 +104,14 @@ const SettingsModal = ({ isOpen, onClose }) => {
               onChange={(checked) => setShowOrderbookFlash(checked)}
             />
           </div>
+
+          <div className="border-t border-th-bkg-4 flex items-center justify-between py-3 text-th-fgd-1">
+            <span>{t('default-spot-margin')}</span>
+            <Switch
+              checked={defaultSpotMargin}
+              onChange={(checked) => setDefaultSpotMargin(checked)}
+            />
+          </div>
         </div>
       ) : null}
       <SettingsContent

components/trade_form/AdvancedTradeForm.tsx

@@ -33,8 +33,11 @@ import EstPriceImpact from './EstPriceImpact'
 import useFees from '../../hooks/useFees'
 import { useTranslation } from 'next-i18next'
 import useSrmAccount from '../../hooks/useSrmAccount'
-import { useLocalStorageStringState } from '../../hooks/useLocalStorageState'
+import useLocalStorageState, {
+  useLocalStorageStringState,
+} from '../../hooks/useLocalStorageState'
 import InlineNotification from '../InlineNotification'
+import { DEFAULT_SPOT_MARGIN_KEY } from '../SettingsModal'
 
 const MAX_SLIPPAGE_KEY = 'maxSlippage'
 
@@ -64,7 +67,11 @@ export default function AdvancedTradeForm({
   const market = useMangoStore((s) => s.selectedMarket.current)
   const isPerpMarket = market instanceof PerpMarket
   const [reduceOnly, setReduceOnly] = useState(false)
-  const [spotMargin, setSpotMargin] = useState(true)
+  const [defaultSpotMargin] = useLocalStorageState(
+    DEFAULT_SPOT_MARGIN_KEY,
+    false
+  )
+  const [spotMargin, setSpotMargin] = useState(defaultSpotMargin)
   const [positionSizePercent, setPositionSizePercent] = useState('')
   const [insufficientSol, setInsufficientSol] = useState(false)
   const { takerFee, makerFee } = useFees()

public/locales/en/common.json

@@ -99,6 +99,7 @@
   "data-refresh-tip-title": "Manual Data Refresh",
   "date": "Date",
   "default-market": "Default Market",
+  "default-spot-margin": "Trade with margin by default",
   "delay-displaying-recent": "There may be a delay in displaying the latest activity.",
   "deposit": "Deposit",
   "deposit-before": "You need more {{tokenSymbol}} in your wallet to fully repay your borrow",