fix trade fee display

components/account/ActivityFeedTable.tsx

@@ -31,40 +31,28 @@ const formatFee = (value: number) => {
   })
 }
 
-const ActivityFeedTable = ({
-  activityFeed,
-  handleShowActivityDetails,
-}: {
-  activityFeed: any
-  handleShowActivityDetails: (x: LiquidationFeedItem) => void
-}) => {
-  const { t } = useTranslation(['common', 'activity'])
-  const { mangoAccountAddress } = useMangoAccount()
-  const actions = mangoStore((s) => s.actions)
-  const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
-  const queryParams = mangoStore((s) => s.activityFeed.queryParams)
-  const [offset, setOffset] = useState(0)
-  const { connected } = useWallet()
-  const [preferredExplorer] = useLocalStorageState(
-    PREFERRED_EXPLORER_KEY,
-    EXPLORERS[0]
-  )
-  const { width } = useViewport()
-  const showTableView = width ? width > breakpoints.md : false
-
-  const handleShowMore = useCallback(() => {
-    const set = mangoStore.getState().set
-    set((s) => {
-      s.activityFeed.loading = true
-    })
-    if (!mangoAccountAddress) return
-    setOffset(offset + PAGINATION_PAGE_LENGTH)
-    actions.fetchActivityFeed(
-      mangoAccountAddress,
-      offset + PAGINATION_PAGE_LENGTH,
-      queryParams
-    )
-  }, [actions, offset, queryParams, mangoAccountAddress])
+const getFee = (activity: any, mangoAccountAddress: string) => {
+  const { activity_type } = activity
+  let fee = { value: '0', symbol: '' }
+  if (activity_type === 'swap') {
+    const { loan_origination_fee, swap_in_symbol } = activity.activity_details
+    fee = loan_origination_fee
+      ? { value: formatFee(loan_origination_fee), symbol: swap_in_symbol }
+      : { value: '0', symbol: '' }
+  }
+  if (activity_type === 'perp_trade') {
+    const { maker_fee, taker_fee, maker } = activity.activity_details
+    fee = {
+      value: formatFee(mangoAccountAddress === maker ? maker_fee : taker_fee),
+      symbol: 'USDC',
+    }
+  }
+  if (activity_type === 'openbook_trade') {
+    const { fee_cost, quote_symbol } = activity.activity_details
+    fee = { value: formatFee(fee_cost), symbol: quote_symbol }
+  }
+  return fee
+}
 
 const getCreditAndDebit = (activity: any) => {
   const { activity_type } = activity
@@ -98,12 +86,8 @@ const ActivityFeedTable = ({
     debit = { value: formatNumericValue(quantity * -1), symbol }
   }
   if (activity_type === 'swap') {
-      const {
-        swap_in_amount,
-        swap_in_symbol,
-        swap_out_amount,
-        swap_out_symbol,
-      } = activity.activity_details
+    const { swap_in_amount, swap_in_symbol, swap_out_amount, swap_out_symbol } =
+      activity.activity_details
     credit = {
       value: formatNumericValue(swap_out_amount),
       symbol: swap_out_symbol,
@@ -153,17 +137,15 @@ const ActivityFeedTable = ({
   }
   if (activity_type === 'deposit' || activity_type === 'withdraw') {
     const { usd_equivalent } = activity.activity_details
-      value =
-        activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent
+    value = activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent
   }
   if (activity_type === 'swap') {
     const { swap_out_amount, swap_out_price_usd } = activity.activity_details
     value = swap_out_amount * swap_out_price_usd
   }
   if (activity_type === 'perp_trade') {
-      const { maker_fee, price, quantity, taker_fee } =
-        activity.activity_details
-      value = quantity * price + maker_fee + taker_fee
+    const { price, quantity } = activity.activity_details
+    value = quantity * price
   }
   if (activity_type === 'openbook_trade') {
     const { price, size } = activity.activity_details
@@ -172,25 +154,40 @@ const ActivityFeedTable = ({
   return value
 }
 
-  const getFee = (activity: any) => {
-    const { activity_type } = activity
-    let fee = { value: '0', symbol: '' }
-    if (activity_type === 'swap') {
-      const { loan_origination_fee, swap_in_symbol } = activity.activity_details
-      fee = loan_origination_fee
-        ? { value: formatFee(loan_origination_fee), symbol: swap_in_symbol }
-        : { value: '0', symbol: '' }
-    }
-    if (activity_type === 'perp_trade') {
-      const { maker_fee, taker_fee } = activity.activity_details
-      fee = { value: formatFee(maker_fee + taker_fee), symbol: 'USDC' }
-    }
-    if (activity_type === 'openbook_trade') {
-      const { fee_cost, quote_symbol } = activity.activity_details
-      fee = { value: formatFee(fee_cost), symbol: quote_symbol }
-    }
-    return fee
-  }
+const ActivityFeedTable = ({
+  activityFeed,
+  handleShowActivityDetails,
+}: {
+  activityFeed: any
+  handleShowActivityDetails: (x: LiquidationFeedItem) => void
+}) => {
+  const { t } = useTranslation(['common', 'activity'])
+  const { mangoAccountAddress } = useMangoAccount()
+  const actions = mangoStore((s) => s.actions)
+  const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
+  const queryParams = mangoStore((s) => s.activityFeed.queryParams)
+  const [offset, setOffset] = useState(0)
+  const { connected } = useWallet()
+  const [preferredExplorer] = useLocalStorageState(
+    PREFERRED_EXPLORER_KEY,
+    EXPLORERS[0]
+  )
+  const { width } = useViewport()
+  const showTableView = width ? width > breakpoints.md : false
+
+  const handleShowMore = useCallback(() => {
+    const set = mangoStore.getState().set
+    set((s) => {
+      s.activityFeed.loading = true
+    })
+    if (!mangoAccountAddress) return
+    setOffset(offset + PAGINATION_PAGE_LENGTH)
+    actions.fetchActivityFeed(
+      mangoAccountAddress,
+      offset + PAGINATION_PAGE_LENGTH,
+      queryParams
+    )
+  }, [actions, offset, queryParams, mangoAccountAddress])
 
   return mangoAccountAddress && (activityFeed.length || loadActivityFeed) ? (
     <>
@@ -222,7 +219,7 @@ const ActivityFeedTable = ({
               const isOpenbook = activity_type === 'openbook_trade'
               const amounts = getCreditAndDebit(activity)
               const value = getValue(activity)
-              const fee = getFee(activity)
+              const fee = getFee(activity, mangoAccountAddress)
               return (
                 <TrBody
                   key={signature + index}
@@ -259,7 +256,7 @@ const ActivityFeedTable = ({
                     </span>
                   </Td>
                   <Td className="text-right font-mono">
-                    {fee.value}{' '}
+                    {(Number(fee.value) * value).toFixed(5)}{' '}
                     <span className="font-body text-th-fgd-3">
                       {fee.symbol}
                     </span>

components/trade/TradeHistory.tsx

@@ -59,7 +59,7 @@ const parsePerpEvent = (mangoAccountAddress: string, event: PerpFillEvent) => {
     size: event.quantity,
     price: event.price,
     value,
-    feeCost: (feeRate * value).toFixed(4),
+    feeCost: feeRate * value,
     side,
   }
 }
@@ -126,8 +126,9 @@ const parseApiTradeHistory = (
     }
     side = sideObj
     size = trade.quantity
-    feeCost =
+    const feeRate =
       trade.maker === mangoAccountAddress ? trade.maker_fee : trade.taker_fee
+    feeCost = (trade.price * trade.quantity * feeRate).toFixed(5)
   }
 
   return {