add slippage presets

components/Button.tsx

@@ -19,7 +19,7 @@ const Button: FunctionComponent<ButtonProps> = ({
       disabled={disabled}
       className={`${className} px-6 py-2 bg-th-bkg-4 rounded-full text-th-fgd-1
       hover:brightness-[1.15] focus:outline-none disabled:bg-th-bkg-4 
-      disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
+      disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:brightness-100`}
       {...props}
     >
       {children}

components/ButtonGroup.tsx

@@ -18,7 +18,7 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
   return (
     <div className="bg-th-bkg-3 rounded-md">
       <div className="flex relative">
-        {activeValue ? (
+        {activeValue && values.includes(activeValue) ? (
           <div
             className={`absolute bg-th-bkg-4 default-transition h-full left-0 top-0 rounded-md transform`}
             style={{

components/trade_form/AdvancedTradeForm.tsx

@@ -122,6 +122,8 @@ export default function AdvancedTradeForm({
     clamp(parseFloat(maxSlippage), 0, 1) * 100
   )
   const [editMaxSlippage, setEditMaxSlippage] = useState(false)
+  const [showCustomSlippageForm, setShowCustomSlippageForm] = useState(false)
+  const slippagePresets = ['1', '1.5', '2', '2.5', '3']
 
   const saveMaxSlippage = (slippage) => {
     setMaxSlippage(clamp(slippage / 100, 0, 1).toString())
@@ -1003,35 +1005,61 @@ export default function AdvancedTradeForm({
           {tradeType === 'Market' && priceImpact ? (
             <div className="col-span-12 md:col-span-10 md:col-start-3 mt-4">
               {editMaxSlippage ? (
-                <>
-                  <div className="mb-1 text-xs text-th-fgd-3">Max Slippage</div>
-                  <div className="flex">
-                    <Input
-                      type="number"
-                      min="0"
-                      max="100"
-                      onChange={(e) => setMaxSlippagePercentage(e.target.value)}
-                      suffix={
-                        <div className="font-bold text-base text-th-fgd-3">
-                          %
-                        </div>
-                      }
-                      value={maxSlippagePercentage}
-                    />
-                    <Button
-                      className="ml-2"
-                      onClick={() => saveMaxSlippage(maxSlippagePercentage)}
-                    >
-                      {t('save')}
-                    </Button>
+                <div className="flex items-end">
+                  <div className="w-full">
+                    <div className="flex justify-between mb-1">
+                      <div className="text-xs text-th-fgd-3">
+                        {t('max-slippage')}
+                      </div>
+                      {!isMobile ? (
+                        <LinkButton
+                          className="font-normal text-xs"
+                          onClick={() =>
+                            setShowCustomSlippageForm(!showCustomSlippageForm)
+                          }
+                        >
+                          {showCustomSlippageForm ? t('presets') : t('custom')}
+                        </LinkButton>
+                      ) : null}
+                    </div>
+                    {showCustomSlippageForm || isMobile ? (
+                      <Input
+                        type="number"
+                        min="0"
+                        max="100"
+                        onChange={(e) =>
+                          setMaxSlippagePercentage(e.target.value)
+                        }
+                        suffix={
+                          <div className="font-bold text-base text-th-fgd-3">
+                            %
+                          </div>
+                        }
+                        value={maxSlippagePercentage}
+                      />
+                    ) : (
+                      <ButtonGroup
+                        activeValue={maxSlippagePercentage.toString()}
+                        className="h-10"
+                        onChange={(p) => setMaxSlippagePercentage(p)}
+                        unit="%"
+                        values={slippagePresets}
+                      />
+                    )}
                   </div>
-                </>
+                  <Button
+                    className="h-10 ml-3"
+                    onClick={() => saveMaxSlippage(maxSlippagePercentage)}
+                  >
+                    {t('save')}
+                  </Button>
+                </div>
               ) : (
                 <>
                   {isPerpMarket ? (
                     <div className="flex justify-between mb-1 text-th-fgd-3 text-xs">
                       <div className="flex items-center">
-                        Max Slippage
+                        {t('max-slippage')}
                         <Tooltip content="If price slips more than your max slippage, your order will be partially filled up to that price.">
                           <div className="outline-none focus:outline-none">
                             <InformationCircleIcon className="h-4 w-4 ml-1.5 text-th-fgd-3" />

public/locales/en/common.json

@@ -55,8 +55,8 @@
   "close-and-long": "Close position and open long",
   "close-and-short": "Close position and open short",
   "close-confirm": "Are you sure you want to market close your {{config_name}} position?",
-  "close-open-long": "100% close position and Open {{size}} {{symbol}} long",
-  "close-open-short": "100% close position and Open {{size}} {{symbol}} short",
+  "close-open-long": "100% close position and open {{size}} {{symbol}} long",
+  "close-open-short": "100% close position and open {{size}} {{symbol}} short",
   "close-position": "Close Position",
   "collateral-available": "Collateral Available",
   "collateral-available-tip-desc": "The collateral value that can be used to take on leverage. Assets carry different collateral weights depending on the risk they present to the platform.",
@@ -178,6 +178,7 @@
   "max": "Max",
   "max-borrow": "Max Borrow Amount",
   "max-depth-bps": "Max Depth Bps",
+  "max-slippage": "Max Slippage",
   "max-with-borrow": "Max With Borrow",
   "minutes": "mins",
   "missing-price": "Missing price",
@@ -239,6 +240,7 @@
   "position-size": "Position Size",
   "positions": "Positions",
   "post": "Post",
+  "presets": "Presets",
   "price": "Price",
   "price-expect": "The price you receive may be worse than you expect and full execution is not guaranteed. Max slippage is 2.5% for your safety. The part of your position with slippage beyond 2.5% will not be closed.",
   "price-impact": "Est. Price Impact",

public/locales/es/common.json

@@ -176,6 +176,7 @@
   "max": "Maximo",
   "max-borrow": "Monto máximo del préstamo",
   "max-depth-bps": "Max Depth Bps",
+  "max-slippage": "Máximo deslizamiento",
   "max-with-borrow": "Máximo con préstamo",
   "minutes": "mins",
   "missing-price": "Falta el precio",
@@ -237,6 +238,7 @@
   "position-size": "Tamaño de la posición",
   "positions": "Posiciones",
   "post": "Correo",
+  "presets": "Preajustes",
   "price": "Precio",
   "price-expect": "El precio que reciba puede ser mayor o menor de lo esperado.",
   "price-impact": "Est. Impacto en el precio:",

public/locales/zh/common.json

@@ -176,6 +176,7 @@
     "max": "最多",
     "max-borrow": "最多借贷数量",
     "max-depth-bps": "最大深度Bps",
+    "max-slippage": "最多滑移",
     "max-with-borrow": "借用最大值",
     "minutes": "分钟",
     "missing-price": "没有价格",
@@ -237,6 +238,7 @@
     "position-size": "当前持仓数量",
     "positions": "当前持仓",
     "post": "Post",
+    "presets": "预设",
     "price": "价格",
     "price-expect": "成交前价格也许会有变化。",
     "price-impact": "预计价格影响",

public/locales/zh_tw/common.json

@@ -176,6 +176,7 @@
   "max": "最多",
   "max-borrow": "最多借貸數量",
   "max-depth-bps": "最大深度Bps",
+  "max-slippage": "最多滑移",
   "max-with-borrow": "借用最大值",
   "minutes": "分鐘",
   "missing-price": "沒有價格",
@@ -237,6 +238,7 @@
   "position-size": "當前持倉數量",
   "positions": "當前持倉",
   "post": "Post",
+  "presets": "預設",
   "price": "價格",
   "price-expect": "成交前價格也許會有變化。",
   "price-impact": "預計價格影響",