(improvement) Display eligible volume for tier calculation in the account fees

public/locales/en/translations.json

@@ -625,6 +625,8 @@
     "fees": {
       "title": "Account Fees",
       "sub_title": "Based on your trading volume",
+      "fee_tier_volume_main": "Volume in the last 30 days",
+      "fee_tier_volume_secondary": "(Eligible for fee tier calculation)",
       "maker": "Maker Fees",
       "taker_crypto": "Taker Fees Crypto",
       "taker_fiat": "Taker Fees Fiat",
@@ -638,7 +640,6 @@
     },
     "by_asset":{
       "title": "Summary by Asset",
-      "sub_title":  "For the last 30 days",
       "currency": "Currency",
       "amount": "Amount",
       "balance": "Balance",

src/components/AppSummary/AppSummary.byAsset.js

@@ -6,13 +6,14 @@ import { isEmpty } from '@bitfinex/lib-js-util-base'
 import NoData from 'ui/NoData'
 import Loading from 'ui/Loading'
 import DataTable from 'ui/DataTable'
-import { fetchData } from 'state/summaryByAsset/actions'
+import { fetchData, refresh } from 'state/summaryByAsset/actions'
 import {
   getPageLoading,
   getDataReceived,
   getSummaryByAssetTotal,
   getSummaryByAssetEntries,
 } from 'state/summaryByAsset/selectors'
+import { getTimeRange } from 'state/timeRange/selectors'
 import { getIsSyncRequired } from 'state/sync/selectors'
 
 import { getAssetColumns } from './AppSummary.columns'
@@ -21,6 +22,7 @@ import { prepareSummaryByAssetData } from './AppSummary.helpers'
 const AppSummaryByAsset = () => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
+  const timeRange = useSelector(getTimeRange)
   const pageLoading = useSelector(getPageLoading)
   const dataReceived = useSelector(getDataReceived)
   const total = useSelector(getSummaryByAssetTotal)
@@ -33,6 +35,10 @@ const AppSummaryByAsset = () => {
     }
   }, [dataReceived, pageLoading, isSyncRequired])
 
+  useEffect(() => {
+    dispatch(refresh())
+  }, [timeRange])
+
   const preparedData = useMemo(
     () => prepareSummaryByAssetData(entries, total, t),
     [entries, total, t],
@@ -64,9 +70,6 @@ const AppSummaryByAsset = () => {
       <div className='app-summary-item-title'>
         {t('summary.by_asset.title')}
       </div>
-      <div className='app-summary-item-sub-title'>
-        {t('summary.by_asset.sub_title')}
-      </div>
       {showContent}
     </div>
   )

src/components/AppSummary/AppSummary.columns.js

@@ -13,13 +13,26 @@ import {
 
 export const getFeesColumns = ({
   makerFee,
+  feeTierVolume,
   isTurkishSite,
   derivTakerFee,
   takerFeeToFiat,
   takerFeeToStable,
   takerFeeToCrypto,
   derivMakerRebate,
 }) => [
+  {
+    id: 'feeTierVolume',
+    name: 'summary.fees.fee_tier_volume_main',
+    description: 'summary.fees.fee_tier_volume_secondary',
+    width: 100,
+    renderer: () => (
+      <Cell>
+        $
+        {formatUsdValue(feeTierVolume)}
+      </Cell>
+    ),
+  },
   {
     id: 'makerFee',
     name: 'summary.fees.maker',

src/components/AppSummary/AppSummary.fees.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from '@bitfinex/lib-js-util-base'
 
@@ -7,6 +7,7 @@ import Loading from 'ui/Loading'
 import CollapsedTable from 'ui/CollapsedTable'
 
 import { getFeesColumns } from './AppSummary.columns'
+import { getFeeTierVolume } from './AppSummary.helpers'
 
 const AppSummaryFees = ({
   t,
@@ -24,8 +25,14 @@ const AppSummaryFees = ({
     derivMakerRebate = 0,
   } = data
 
+  const feeTierVolume = useMemo(
+    () => getFeeTierVolume(data),
+    [data],
+  )
+
   const columns = getFeesColumns({
     makerFee,
+    feeTierVolume,
     isTurkishSite,
     derivTakerFee,
     takerFeeToFiat,

src/components/AppSummary/AppSummary.helpers.js

@@ -33,3 +33,5 @@ export const shouldShowPercentCheck = (balance, balanceChange) => {
   if (bal === balChange) return false
   return true
 }
+
+export const getFeeTierVolume = (data) => data?.trade_vol_30d?.at(-1)?.vol_safe ?? 0

src/components/AppSummary/AppSummary.value.js

@@ -71,7 +71,7 @@ const AccountSummaryValue = () => {
           {formattedPercValue}
         </div>
         <Chart
-          aspect={1.675}
+          aspect={1.39}
           data={chartData}
           showLegend={false}
           dataKeys={presentCurrencies}

src/components/AppSummary/_AppSummary.scss

@@ -86,14 +86,18 @@
               border-bottom: 1px solid var(--tableBorder);
 
               &:first-child {
-                width: 45%;
+                width: 50%;
               }
 
               &:last-child {
                 padding: 4px 5px;
                 text-align: end;
                 word-break: break-word;
               }
+
+              .cell-description {
+                font-size: 14px;
+              }
             }
 
             &:last-child {
@@ -131,7 +135,7 @@
 .full-width-item {
   width: 100%;
   max-width: 100%;
-  min-height: 320px;
+  min-height: 300px;
 
   .bp3-table-container {
     box-shadow: none;
@@ -186,7 +190,7 @@
 
   .loading-container {
     display: flex;
-    min-height: 320px;
+    min-height: 300px;
     max-width: 1000px;
 
     .loading {
@@ -196,7 +200,7 @@
 
   .no-data {
     max-width: 1000px;
-    min-height: 320px;
+    min-height: 300px;
 
     &-wrapper {
       margin: 150px auto;

src/state/summaryByAsset/saga.js

@@ -8,15 +8,18 @@ import {
 import { makeFetchCall } from 'state/utils'
 import { updateErrorStatus } from 'state/status/actions'
 import { getIsSyncRequired } from 'state/sync/selectors'
+import { getTimeFrame } from 'state/timeRange/selectors'
 
 import types from './constants'
 import actions from './actions'
 
-export const getReqSummaryByAsset = () => makeFetchCall('getSummaryByAsset')
+export const getReqSummaryByAsset = (params) => makeFetchCall('getSummaryByAsset', params)
 
 export function* fetchSummaryByAsset() {
   try {
-    const { result = {}, error } = yield call(getReqSummaryByAsset)
+    const { start, end } = yield select(getTimeFrame)
+    const params = { start, end }
+    const { result = {}, error } = yield call(getReqSummaryByAsset, params)
     yield put(actions.updateData(result))
 
     if (error) {

src/ui/CollapsedTable/CollapsedTable.js

@@ -13,13 +13,20 @@ class CollapsedTable extends PureComponent {
           <div className='collapsed-table-item' key={rowIndex}>
             {tableColumns.map((column) => {
               const {
-                id, name, nameStr, renderer,
+                id, name, nameStr, renderer, description,
               } = column
               const cell = renderer(rowIndex)
-
               return (
                 <div key={id}>
-                  <div>{nameStr || t(name)}</div>
+                  <div>
+                    {nameStr || t(name)}
+                    <br />
+                    {description && (
+                      <span className='cell-description'>
+                        {t(description)}
+                      </span>
+                    )}
+                  </div>
                   <div>{cell.props.children}</div>
                 </div>
               )