swap settings modal

components/SideNav.tsx

@@ -65,34 +65,34 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
           <MenuItem
             active={pathname === '/'}
             collapsed={collapsed}
-            icon={<HomeIcon className="h-6 w-6" />}
+            icon={<HomeIcon className="h-5 w-5" />}
             title={t('portfolio')}
             pagePath="/"
           />
           <MenuItem
             active={pathname === '/trade'}
             collapsed={collapsed}
-            icon={<TradeIcon className="h-6 w-6" />}
+            icon={<TradeIcon className="h-5 w-5" />}
             title={t('trade')}
             pagePath="/trade"
           />
           <MenuItem
             active={pathname === '/stats'}
             collapsed={collapsed}
-            icon={<ChartBarIcon className="h-6 w-6" />}
+            icon={<ChartBarIcon className="h-5 w-5" />}
             title={t('stats')}
             pagePath="/stats"
           />
           <MenuItem
             active={pathname === '/settings'}
             collapsed={collapsed}
-            icon={<CogIcon className="h-6 w-6" />}
+            icon={<CogIcon className="h-5 w-5" />}
             title={t('settings')}
             pagePath="/settings"
           />
           <ExpandableMenuItem
             collapsed={collapsed}
-            icon={<DotsHorizontalIcon className="h-6 w-6" />}
+            icon={<DotsHorizontalIcon className="h-5 w-5" />}
             title={t('more')}
           >
             <MenuItem
@@ -180,7 +180,7 @@ const MenuItem = ({
               className={
                 hideIconBg
                   ? ''
-                  : 'flex h-10 w-10 items-center justify-center rounded-full bg-th-bkg-3'
+                  : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
               }
             >
               {icon}
@@ -261,7 +261,7 @@ const ExpandableMenuItem = ({
             className={` ${
               hideIconBg
                 ? ''
-                : 'flex h-10 w-10 items-center justify-center rounded-full bg-th-bkg-3'
+                : 'flex h-9 w-9 items-center justify-center rounded-full bg-th-bkg-3'
             } ${
               alignBottom
                 ? 'flex h-[72px] w-[72px] items-center justify-center hover:bg-th-bkg-2'
@@ -310,7 +310,7 @@ const ExpandableMenuItem = ({
               className={
                 hideIconBg
                   ? ''
-                  : 'flex h-10 w-10 items-center justify-center rounded-full bg-th-bkg-3'
+                  : 'flex h-9 w-9 items-center justify-center rounded-full bg-th-bkg-3'
               }
             >
               {icon}

components/swap/Swap.tsx

@@ -1,6 +1,6 @@
 import { useState, ChangeEvent, useCallback, useEffect, useMemo } from 'react'
 import { TransactionInstruction } from '@solana/web3.js'
-import { ArrowDownIcon } from '@heroicons/react/solid'
+import { ArrowDownIcon, CogIcon } from '@heroicons/react/solid'
 import mangoStore from '../../store/state'
 import { RouteInfo } from '@jup-ag/core'
 import { Token } from '../../types/jupiter'
@@ -26,6 +26,7 @@ import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 import Loading from '../shared/Loading'
 import { EnterBottomExitBottom } from '../shared/Transitions'
 import useJupiter from './useJupiter'
+import SwapSettings from './SwapSettings'
 
 const getBestRoute = (routesInfos: RouteInfo[]) => {
   return routesInfos[0]
@@ -72,6 +73,7 @@ const Swap = () => {
   const [submitting, setSubmitting] = useState(false)
   const [animateSwitchArrow, setAnimateSwitchArrow] = useState(0)
   const [showTokenSelect, setShowTokenSelect] = useState('')
+  const [showSettings, setShowSettings] = useState(false)
   const [useMargin, setUseMargin] = useState(true)
   const [sizePercentage, setSizePercentage] = useState('')
   const [showConfirm, setShowConfirm] = useState(false)
@@ -82,7 +84,7 @@ const Swap = () => {
   const outputToken = mangoStore((s) => s.swap.outputToken)
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const connected = mangoStore((s) => s.connected)
-  const debouncedAmountIn = useDebounce(amountIn, 400)
+  const debouncedAmountIn = useDebounce(amountIn, 300)
 
   const { amountOut, jupiter, outputTokenInfo, routes } = useJupiter({
     inputTokenSymbol: inputToken,
@@ -235,14 +237,19 @@ const Swap = () => {
       </EnterBottomExitBottom>
       <div className="mb-4 flex items-center justify-between">
         <h3>{t('trade')}</h3>
-        <Switch
-          className="text-th-fgd-3"
-          checked={useMargin}
-          onChange={() => setUseMargin(!useMargin)}
+        <div
+          className="hover:cursor-pointer"
+          onClick={() => setShowSettings(true)}
         >
-          {t('margin')}
-        </Switch>
+          <CogIcon className="h-6 w-6" />
+        </div>
       </div>
+      <EnterBottomExitBottom
+        className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
+        show={showSettings}
+      >
+        <SwapSettings onClose={() => setShowSettings(false)} />
+      </EnterBottomExitBottom>
       <div className="mb-2 flex items-center justify-between">
         <p className="text-th-fgd-3">{t('sell')}</p>
         <MaxWalletBalance inputToken={inputToken} setAmountIn={setAmountIn} />

components/swap/SwapSettings.tsx

@@ -0,0 +1,75 @@
+import { XIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
+import { useState } from 'react'
+import mangoStore from '../../store/state'
+import ButtonGroup from '../forms/ButtonGroup'
+import Input from '../forms/Input'
+import Switch from '../forms/Switch'
+import { IconButton } from '../shared/Button'
+
+const slippagePresets = ['0.1', '0.5', '1', '2']
+
+const SwapSettings = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation('common')
+  const margin = mangoStore((s) => s.swap.margin)
+  const slippage = mangoStore((s) => s.swap.slippage)
+  const set = mangoStore((s) => s.set)
+
+  const [showCustomSlippageForm, setShowCustomSlippageForm] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+
+  const handleSetMargin = () => {
+    set((s) => {
+      s.swap.margin = !s.swap.margin
+    })
+  }
+
+  const handleSetSlippage = (slippage: string) => {
+    set((s) => {
+      s.swap.slippage = parseFloat(slippage)
+    })
+  }
+
+  console.log('slippage', slippage)
+
+  return (
+    <>
+      <h3 className="mb-3">{t('settings')}</h3>
+      <IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
+        <XIcon className="h-5 w-5" />
+      </IconButton>
+
+      <div className="mt-4">
+        <div className="my-2">Slippage</div>
+        {showCustomSlippageForm ? (
+          <Input
+            type="text"
+            placeholder="0.00"
+            value={inputValue}
+            onChange={(e: any) => setInputValue(e.target.value)}
+            suffix="%"
+          />
+        ) : (
+          <ButtonGroup
+            activeValue={slippage.toString()}
+            className="h-10"
+            onChange={(v) => handleSetSlippage(v)}
+            unit="%"
+            values={slippagePresets}
+          />
+        )}
+      </div>
+      <div className="mt-8">
+        <Switch
+          className="text-th-fgd-3"
+          checked={margin}
+          onChange={handleSetMargin}
+        >
+          {t('margin')}
+        </Switch>
+      </div>
+    </>
+  )
+}
+
+export default SwapSettings

store/state.ts

@@ -73,6 +73,8 @@ export type MangoStore = {
     outputToken: string
     inputTokenInfo: Token | undefined
     outputTokenInfo: Token | undefined
+    margin: boolean
+    slippage: number
   }
   set: (x: (x: MangoStore) => void) => void
   wallet: {
@@ -126,6 +128,8 @@ const mangoStore = create<MangoStore>(
         outputToken: 'USDC',
         inputTokenInfo: undefined,
         outputTokenInfo: undefined,
+        margin: true,
+        slippage: 0.1,
       },
       wallet: {
         loadProfilePic: true,