add market fees to trade form box

components/MarketFee.tsx

@@ -0,0 +1,39 @@
+import {
+  getMarketIndexBySymbol,
+  PerpMarket,
+} from '@blockworks-foundation/mango-client'
+import useSrmAccount from '../hooks/useSrmAccount'
+import useMangoStore from '../stores/useMangoStore'
+
+export default function MarketFee() {
+  const { rates } = useSrmAccount()
+  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
+  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const market = useMangoStore((s) => s.selectedMarket.current)
+  const marketIndex = getMarketIndexBySymbol(
+    mangoGroupConfig,
+    marketConfig.baseSymbol
+  )
+
+  let takerFee, makerFee
+  if (market instanceof PerpMarket) {
+    takerFee =
+      parseFloat(mangoGroup.perpMarkets[marketIndex].takerFee.toFixed()) * 100
+    makerFee =
+      parseFloat(mangoGroup.perpMarkets[marketIndex].makerFee.toFixed()) * 100
+  } else {
+    takerFee = rates.taker * 100
+    makerFee = rates.maker * 100
+  }
+
+  return (
+    <div className="flex mx-auto">
+      <>
+        <div>Maker Fee: {makerFee}%</div>
+        <div className="px-2">|</div>
+        <div>Taker Fee: {takerFee}%</div>
+      </>
+    </div>
+  )
+}

components/TradeForm.tsx

@@ -16,6 +16,7 @@ import Input from './Input'
 import Switch from './Switch'
 import { Market } from '@project-serum/serum'
 import Big from 'big.js'
+import MarketFee from './MarketFee'
 
 const StyledRightInput = styled(Input)`
   border-left: 1px solid transparent;
@@ -277,7 +278,7 @@ export default function TradeForm() {
 
   return (
     <FloatingElement showConnect>
-      <div className={!connected ? 'filter blur-sm' : undefined}>
+      <div className={!connected ? 'filter blur-sm' : 'flex flex-col h-full'}>
         <div>
           <div className={`flex text-base text-th-fgd-4`}>
             <button
@@ -356,7 +357,7 @@ export default function TradeForm() {
             />
           </Input.Group>
           {tradeType !== 'Market' ? (
-            <div className="flex items-center mt-4">
+            <div className="flex mt-4">
               <Switch checked={postOnly} onChange={postOnChange}>
                 POST
               </Switch>
@@ -409,6 +410,9 @@ export default function TradeForm() {
             </Button>
           )}
         </div>
+        <div className="flex text-xs text-th-fgd-4 px-6 mt-6">
+          <MarketFee />
+        </div>
       </div>
     </FloatingElement>
   )

components/UserInfo.tsx

@@ -10,7 +10,7 @@ const TABS = [
   'Balances',
   'Open Orders',
   'Perp Positions',
-  'Fee Discounts',
+  'Fees',
   'Trade History',
 ]
 
@@ -73,7 +73,7 @@ const TabContent = ({ activeTab }) => {
       return <TradeHistoryTable />
     case 'Perp Positions':
       return <PositionsTable />
-    case 'Fee Discounts':
+    case 'Fees':
       return <FeeDiscountsTable />
     default:
       return <BalancesTable />

hooks/useSrmAccount.tsx

@@ -12,14 +12,16 @@ const useSrmAccount = () => {
   // const [msrmAccount, setMsrmAccount] = useState(null)
 
   useEffect(() => {
-    const srmPk = mangoGroup.srmVault
-    const fetchAccounts = async () => {
-      const srmAccountInfo = await DEFAULT_CONNECTION.getAccountInfo(srmPk)
+    if (mangoGroup) {
+      const srmPk = mangoGroup.srmVault
+      const fetchAccounts = async () => {
+        const srmAccountInfo = await DEFAULT_CONNECTION.getAccountInfo(srmPk)
 
-      setSrmAccount(srmAccountInfo)
+        setSrmAccount(srmAccountInfo)
+      }
+
+      fetchAccounts()
     }
-
-    fetchAccounts()
   }, [mangoGroup])
 
   const accountData = srmAccount