show if margin is enabled/disabled on swap form

components/swap/SwapForm.tsx

@@ -5,7 +5,6 @@ import {
   Cog8ToothIcon,
   ExclamationCircleIcon,
   LinkIcon,
-  PencilIcon,
 } from '@heroicons/react/20/solid'
 import NumberFormat, {
   NumberFormatValues,
@@ -20,7 +19,7 @@ import useDebounce from '../shared/useDebounce'
 import { useTranslation } from 'next-i18next'
 import SwapFormTokenList from './SwapFormTokenList'
 import { Transition } from '@headlessui/react'
-import Button, { IconButton } from '../shared/Button'
+import Button, { IconButton, LinkButton } from '../shared/Button'
 import Loading from '../shared/Loading'
 import { EnterBottomExitBottom } from '../shared/Transitions'
 import useQuoteRoutes from './useQuoteRoutes'
@@ -48,6 +47,7 @@ import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
 import SwapSettings from './SwapSettings'
 import InlineNotification from '@components/shared/InlineNotification'
 import useUnownedAccount from 'hooks/useUnownedAccount'
+import Tooltip from '@components/shared/Tooltip'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -486,19 +486,26 @@ const SwapForm = () => {
               <HealthImpact maintProjectedHealth={maintProjectedHealth} />
             </div>
             <div className="flex items-center justify-between">
-              <p className="text-sm text-th-fgd-3">{t('swap:max-slippage')}</p>
-              <div className="flex items-center space-x-1">
-                <p className="text-right font-mono text-sm text-th-fgd-2">
-                  {slippage}%
+              <Tooltip content={t('swap:tooltip-margin')}>
+                <p className="tooltip-underline text-sm text-th-fgd-3">
+                  {t('swap:margin')}
                 </p>
-                <IconButton
-                  className="text-th-fgd-3"
-                  hideBg
-                  onClick={() => setShowSettings(true)}
-                >
-                  <PencilIcon className="ml-2 h-4 w-4" />
-                </IconButton>
-              </div>
+              </Tooltip>
+              <LinkButton
+                className="text-right text-sm font-normal text-th-fgd-2 underline underline-offset-2 md:hover:no-underline"
+                onClick={() => setShowSettings(true)}
+              >
+                {useMargin ? t('swap:enabled') : t('swap:disabled')}
+              </LinkButton>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm text-th-fgd-3">{t('swap:max-slippage')}</p>
+              <LinkButton
+                className="text-right font-mono text-sm font-normal text-th-fgd-2 underline underline-offset-2 md:hover:no-underline"
+                onClick={() => setShowSettings(true)}
+              >
+                {slippage}%
+              </LinkButton>
             </div>
           </div>
         </div>

public/locales/en/swap.json

@@ -1,6 +1,8 @@
 {
     "confirm-swap": "Confirm Swap",
     "connect-swap": "Connect to view your swap history",
+    "disabled": "Disabled",
+    "enabled": "Enabled",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
@@ -9,6 +11,7 @@
     "input-reduce-only-warning": "{{symbol}} is in reduce only mode. You can swap your balance to another token",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
+    "margin": "Margin",
     "margin-swap": "Margin Swap",
     "max-slippage": "Max Slippage",
     "maximum-cost": "Maximum Cost",
@@ -34,6 +37,7 @@
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-margin": "When margin is enabled you can add leverage to your swaps. Borrows are opened automatically if a swap exceeds your balance.",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin",
     "no-swap-found": "No swap found"

public/locales/es/swap.json

@@ -1,6 +1,8 @@
 {
     "confirm-swap": "Confirm Swap",
     "connect-swap": "Connect to view your swap history",
+    "disabled": "Disabled",
+    "enabled": "Enabled",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
@@ -9,6 +11,7 @@
     "input-reduce-only-warning": "{{symbol}} is in reduce only mode. You can swap your balance to another token",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
+    "margin": "Margin",
     "margin-swap": "Margin Swap",
     "max-slippage": "Max Slippage",
     "maximum-cost": "Maximum Cost",
@@ -34,6 +37,7 @@
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-margin": "When margin is enabled you can add leverage to your swaps. Borrows are opened automatically if a swap exceeds your balance.",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin",
     "no-swap-found": "No swap found"

public/locales/ru/swap.json

@@ -1,6 +1,8 @@
 {
     "confirm-swap": "Confirm Swap",
     "connect-swap": "Connect to view your swap history",
+    "disabled": "Disabled",
+    "enabled": "Enabled",
     "est-liq-price": "Est. Liq Price",
     "fees-paid-to": "Fees Paid to {{route}}",
     "health-impact": "Health Impact",
@@ -9,6 +11,7 @@
     "input-reduce-only-warning": "{{symbol}} is in reduce only mode. You can swap your balance to another token",
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
+    "margin": "Margin",
     "margin-swap": "Margin Swap",
     "max-slippage": "Max Slippage",
     "maximum-cost": "Maximum Cost",
@@ -34,6 +37,7 @@
     "swap-route": "Swap Route",
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
+    "tooltip-margin": "When margin is enabled you can add leverage to your swaps. Borrows are opened automatically if a swap exceeds your balance.",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
     "use-margin": "Allow Margin",
     "no-swap-found": "No swap found"

public/locales/zh/swap.json

@@ -1,6 +1,8 @@
 {
     "confirm-swap": "确定换币",
     "connect-swap": "连接来查换币纪录",
+    "disabled": "Disabled",
+    "enabled": "Enabled",
     "est-liq-price": "预计清算价格",
     "fees-paid-to": "缴给{{route}}的费用",
     "health-impact": "健康影响",
@@ -9,6 +11,7 @@
     "input-reduce-only-warning": "{{symbol}}处于仅减少模式。您可以将余额换成另一个币种",
     "insufficient-balance": "{{symbol}}余额不够",
     "insufficient-collateral": "质押品不够",
+    "margin": "Margin",
     "margin-swap": "杠杆换币",
     "max-slippage": "最多下滑",
     "maximum-cost": "最大成本",
@@ -35,6 +38,7 @@
     "swap-route": "换币路线",
     "tooltip-borrow-balance": "您将使用您的 {{balance}} {{token}} 余额并借入 {{borrowAmount}} {{token}} 来执行此交换。当前的 {{token}} 可变借贷利率为 {{rate}}%",
     "tooltip-borrow-no-balance": "您将借入 {{borrowAmount}} {{token}} 来执行此交换。当前的 {{token}} 可变借贷利率为 {{rate}}%",
+    "tooltip-margin": "When margin is enabled you can add leverage to your swaps. Borrows are opened automatically if a swap exceeds your balance.",
     "tooltip-max-slippage": "如果价格下滑超过您的最大滑点，换币交易将不会被执行",
     "use-margin": "允许杠杆"
 }

public/locales/zh_tw/swap.json

@@ -1,6 +1,8 @@
 {
     "confirm-swap": "確定換幣",
     "connect-swap": "連接來查換幣紀錄",
+    "disabled": "Disabled",
+    "enabled": "Enabled",
     "est-liq-price": "預計清算價格",
     "fees-paid-to": "繳給{{route}}的費用",
     "health-impact": "健康影響",
@@ -9,6 +11,7 @@
     "input-reduce-only-warning": "{{symbol}}處於僅減少模式。您可以將餘額換成另一個幣種",
     "insufficient-balance": "{{symbol}}餘額不夠",
     "insufficient-collateral": "質押品不夠",
+    "margin": "Margin",
     "margin-swap": "槓桿換幣",
     "max-slippage": "最多下滑",
     "maximum-cost": "最大成本",
@@ -35,6 +38,7 @@
     "swap-route": "換幣路線",
     "tooltip-borrow-balance": "您將使用您的 {{balance}} {{token}} 餘額並借入 {{borrowAmount}} {{token}} 來執行此交換。當前的 {{token}} 可變借貸利率為 {{rate}}%",
     "tooltip-borrow-no-balance": "您將借入 {{borrowAmount}} {{token}} 來執行此交換。當前的 {{token}} 可變借貸利率為 {{rate}}%",
+    "tooltip-margin": "When margin is enabled you can add leverage to your swaps. Borrows are opened automatically if a swap exceeds your balance.",
     "tooltip-max-slippage": "如果價格下滑超過您的最大滑點，換幣交易將不會被執行",
     "use-margin": "允許槓桿"
 }