show margin switch on swap form

components/borrow/AssetsBorrowsTable.tsx

@@ -68,7 +68,9 @@ const AssetsBorrowsTable = () => {
               }
               const borrows = bank.uiBorrows()
 
-              const available = group ? getAvailableToBorrow(b, group) : 0
+              const available = group
+                ? getAvailableToBorrow(b, group).toNumber()
+                : 0
 
               return (
                 <TrBody key={bank.name}>
@@ -136,7 +138,9 @@ const AssetsBorrowsTable = () => {
               )?.logoURI
             }
 
-            const available = group ? getAvailableToBorrow(b, group) : 0
+            const available = group
+              ? getAvailableToBorrow(b, group).toNumber()
+              : 0
 
             return (
               <Disclosure key={bank.name}>

components/swap/SwapForm.tsx

@@ -49,6 +49,7 @@ import InlineNotification from '@components/shared/InlineNotification'
 import useUnownedAccount from 'hooks/useUnownedAccount'
 import Tooltip from '@components/shared/Tooltip'
 import { formatCurrencyValue } from 'utils/numbers'
+import Switch from '@components/forms/Switch'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -275,6 +276,12 @@ const SwapForm = () => {
     )
   }, [amountInAsDecimal, amountOutAsDecimal, connected, selectedRoute])
 
+  const handleSetMargin = () => {
+    set((s) => {
+      s.swap.margin = !s.swap.margin
+    })
+  }
+
   return (
     <ContentBox
       hidePadding
@@ -507,12 +514,11 @@ const SwapForm = () => {
                   {t('swap:margin')}
                 </p>
               </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>
+              <Switch
+                className="text-th-fgd-3"
+                checked={useMargin}
+                onChange={handleSetMargin}
+              />
             </div>
             <div className="flex items-center justify-between">
               <p className="text-sm text-th-fgd-3">{t('swap:max-slippage')}</p>