Release version to master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bfx-report-ui",
-  "version": "2.35.0",
+  "version": "2.36.0",
   "description": "Report page to overview the user actions in Bitfinex and download related csv files",
   "repository": {
     "type": "git",
@@ -23,13 +23,15 @@
     "@blueprintjs/select": "^3.8.0",
     "@blueprintjs/table": "3.5.0",
     "@blueprintjs/timezone": "3.10.1",
+    "axios": "1.6.7",
     "classnames": "2.2.6",
     "connected-react-router": "6.9.2",
     "flexboxgrid2": "7.2.1",
     "history": "^4.9.0",
     "i18next": "15.0.7",
     "i18next-browser-languagedetector": "3.0.1",
     "i18next-http-backend": "1.4.0",
+    "js-cookie": "2.2.1",
     "lightweight-charts": "^1.2.1",
     "lodash": "4.17.21",
     "memoize-one": "^5.0.2",

public/locales/en/translations.json

@@ -387,6 +387,13 @@
   "logins": {
     "title": "Logins"
   },
+  "maintenance": {
+    "title": "Maintenance Notice",
+    "message_1": "The platform is currently in maintenance mode.",
+    "message_2": "Please check the ",
+    "message_3": " for updates.",
+    "message_4": "We will be back soon."
+  },
   "movements": {
     "title": "Movements",
     "moreDetails": "More Details"
@@ -649,7 +656,12 @@
       "volume": "Volume",
       "total": "Total",
       "trading_fees": "Trading Fees",
-      "fund_earnings": "Funding Earnings"
+      "fund_earnings": "Funding Earnings",
+      "filter": {
+        "title": "Filter",
+        "min_balance_switch": "Minimum Balance",
+        "min_balance_input": "Set a minimum balance for assets to show up in the table."
+      }
     }
   },
   "symbols": {
@@ -679,6 +691,10 @@
     "message": {
       "canceled": "Canceled old Sync Watcher"
     },
+    "init-sync-info": {
+      "main": "Welcome to the Bitfinex Reports App. Your trading history is currently synchronizing, please wait until it's finished in order to view your reports.",
+      "additional": "Syncing is still in progress, this might take several minutes. Keep this window open until it's finished in case you have a large history."
+    },
     "estimated_time": {
       "started_at": "Sync started at: ",
       "spent_time": "Spent time: ",

src/components/AppSummary/AppSummary.byAsset.js

@@ -11,13 +11,16 @@ import { fetchData, refresh } from 'state/summaryByAsset/actions'
 import {
   getPageLoading,
   getDataReceived,
+  getUseMinBalance,
+  getMinimumBalance,
   getSummaryByAssetTotal,
   getSummaryByAssetEntries,
 } from 'state/summaryByAsset/selectors'
 import { getTimezone } from 'state/base/selectors'
 import { getIsSyncRequired } from 'state/sync/selectors'
 import { getTimeRange, getTimeFrame } from 'state/timeRange/selectors'
 
+import SummaryFilters from './AppSummary.filters'
 import { getAssetColumns } from './AppSummary.columns'
 import { prepareSummaryByAssetData } from './AppSummary.helpers'
 
@@ -32,6 +35,8 @@ const AppSummaryByAsset = () => {
   const entries = useSelector(getSummaryByAssetEntries)
   const isSyncRequired = useSelector(getIsSyncRequired)
   const { start, end } = useSelector(getTimeFrame)
+  const minimumBalance = useSelector(getMinimumBalance)
+  const useMinimumBalance = useSelector(getUseMinBalance)
 
   useEffect(() => {
     if (!dataReceived && !pageLoading && !isSyncRequired) {
@@ -44,8 +49,8 @@ const AppSummaryByAsset = () => {
   }, [timeRange])
 
   const preparedData = useMemo(
-    () => prepareSummaryByAssetData(entries, total, t),
-    [entries, total, t],
+    () => prepareSummaryByAssetData(entries, total, t, minimumBalance, useMinimumBalance),
+    [entries, total, t, minimumBalance, useMinimumBalance],
   )
 
   const columns = useMemo(
@@ -71,12 +76,17 @@ const AppSummaryByAsset = () => {
 
   return (
     <div className='app-summary-item full-width-item'>
-      <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')}
-        {`${formatDate(start, timezone)} - ${formatDate(end, timezone)}`}
+      <div className='app-summary-item-title--row'>
+        <div>
+          <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')}
+            {`${formatDate(start, timezone)} - ${formatDate(end, timezone)}`}
+          </div>
+        </div>
+        <SummaryFilters />
       </div>
       {showContent}
     </div>

src/components/AppSummary/AppSummary.filters.js

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import {
+  Switch,
+  Popover,
+  Position,
+  Alignment,
+} from '@blueprintjs/core'
+
+import Icon from 'icons'
+import { tracker } from 'utils/trackers'
+import InputKey from 'components/Auth/InputKey'
+import { getMinimumBalance, getUseMinBalance } from 'state/summaryByAsset/selectors'
+import { setMinimumBalance, toggleUseMinimumBalance } from 'state/summaryByAsset/actions'
+
+const SummaryFilters = () => {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const minimumBalance = useSelector(getMinimumBalance)
+  const useMinimumBalance = useSelector(getUseMinBalance)
+  const [isOpen, setIsOpen] = useState(false)
+  const [balanceValue, setBalanceValue] = useState(minimumBalance)
+
+  const togglePopover = (isPopoverOpen) => {
+    tracker.trackEvent('Filter')
+    setIsOpen(isPopoverOpen)
+  }
+
+  const onChange = (event) => {
+    const { value } = event.target
+    setBalanceValue(value)
+    dispatch(setMinimumBalance(value))
+  }
+
+  const toggleinimumBalance = () => {
+    tracker.trackEvent('Minimum Balance')
+    dispatch(toggleUseMinimumBalance())
+  }
+
+  const classes = classNames('summary-filters--menu', {
+    'summary-filters--menu-open': isOpen,
+  })
+
+  const switchClasses = classNames('switch-btn', {
+    active: useMinimumBalance,
+  })
+
+  return (
+    <div className={classes}>
+      <Popover
+        minimal
+        autoFocus={false}
+        usePortal={false}
+        position={Position.BOTTOM_RIGHT}
+        onOpening={() => togglePopover(true)}
+        onClosing={() => togglePopover(false)}
+        content={(
+          <div className='summary-filters--menu-content'>
+            <div className='switch-row'>
+              <div className='switch-title'>
+                {t('summary.by_asset.filter.min_balance_switch')}
+              </div>
+              <Switch
+                large
+                className={switchClasses}
+                checked={useMinimumBalance}
+                alignIndicator={Alignment.RIGHT}
+                onChange={toggleinimumBalance}
+              />
+            </div>
+            <div className='balance-input-label'>
+              {t('summary.by_asset.filter.min_balance_input')}
+            </div>
+            <div className='balance-input'>
+              <InputKey
+                type='number'
+                name='minimumBalance'
+                value={balanceValue}
+                onChange={onChange}
+                disabled={!useMinimumBalance}
+              />
+              <span className='balance-input-currency'>
+                USD
+              </span>
+            </div>
+          </div>
+          )}
+        targetTagName='div'
+        popoverClassName='summary-filters--menu-popover'
+      >
+        <div className='summary-filters--button'>
+          <Icon.FILTER_SUMMARY />
+          <span>{t('summary.by_asset.filter.title')}</span>
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default SummaryFilters

src/components/AppSummary/AppSummary.helpers.js

@@ -1,9 +1,14 @@
 import React from 'react'
 import { fixedFloat, formatThousands } from 'ui/utils'
 
-export const prepareSummaryByAssetData = (entries, total, t) => (
-  [...entries, { currency: t('summary.by_asset.total'), ...total }]
-)
+export const prepareSummaryByAssetData = (entries, total, t, minimumBalance, useMinimumBalance) => {
+  const mergedEntries = [...entries, { currency: t('summary.by_asset.total'), ...total }]
+  if (useMinimumBalance) {
+    return mergedEntries.filter(entry => fixedFloat(entry?.balanceUsd, 2) >= minimumBalance)
+  }
+  return mergedEntries
+}
+
 
 export const prepareNumericValue = (value) => {
   let val = +fixedFloat(value, 2)