Merge branch 'add-volume30d-acc-fees' into summary-by-asset-updates

public/locales/en/translations.json

@@ -624,7 +624,8 @@
     "no_data": "No related data for this period is available or data should be synced.",
     "fees": {
       "title": "Account Fees",
-      "sub_title": "Based on your trading volume",
+      "sub_title": "Based on your 30 days eligible trading volume",
+      "fee_tier_volume": "Eligible Trading Volume",
       "maker": "Maker Fees",
       "taker_crypto": "Taker Fees Crypto",
       "taker_fiat": "Taker Fees Fiat",

src/components/AppSummary/AppSummary.columns.js

@@ -13,13 +13,25 @@ import {
 
 export const getFeesColumns = ({
   makerFee,
+  feeTierVolume,
   isTurkishSite,
   derivTakerFee,
   takerFeeToFiat,
   takerFeeToStable,
   takerFeeToCrypto,
   derivMakerRebate,
 }) => [
+  {
+    id: 'feeTierVolume',
+    name: 'summary.fees.fee_tier_volume',
+    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

@@ -35,3 +35,5 @@ export const shouldShowPercentCheck = (balance, balanceChange) => {
 }
 
 export const getIsTotal = (currency, t) => currency === t('summary.by_asset.total')
+
+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.455}
           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 {

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>
               )