(feature) Summary by asset: configurable balances representation

public/locales/en/translations.json

@@ -649,7 +649,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": {

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,95 @@
+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 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) => {
+    setIsOpen(isPopoverOpen)
+  }
+
+  const onChange = (event) => {
+    const { value } = event.target
+    setBalanceValue(value)
+    dispatch(setMinimumBalance(value))
+  }
+
+  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={() => dispatch(toggleUseMinimumBalance())}
+              />
+            </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)

src/components/AppSummary/_AppSummary.scss

@@ -20,7 +20,7 @@
     display: flex;
     flex-wrap: wrap;
     max-width: 1000px;
-    min-height: 390px;
+    min-height: 441px;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 35px;
@@ -112,7 +112,7 @@
       .loading-container {
         display: flex;
         margin-top: -4px;
-        min-height: 320px;
+        min-height: 387px;
 
         .loading {
           margin: auto;
@@ -137,6 +137,134 @@
   max-width: 100%;
   min-height: 300px;
 
+  .app-summary-item-title--row {
+    display: flex;
+    max-width: 1000px;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+
+    .summary-filters {
+      &--button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 84px;
+        min-height: 34px;
+        border-radius: 4px;
+        color:  var(--color2);
+        border: 1px solid  var(--borderColor);
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        svg {
+          margin-top: -2px;
+          margin-right: 5px;
+        }
+
+        &.bp3-active {
+          color:  var(--thColor);
+          border-color: var(--thColor);
+
+          svg {
+            path {
+              stroke: var(--thColor);
+            }
+          }
+        }
+      }
+
+      &--menu-popover {
+        min-width: 314px;
+        min-height: 150px;
+        padding: 26px 24px;
+        border-radius: 4px;
+        background-color: var(--bgColor2);
+        border: 1px solid var(--borderColor);
+
+        .bp3-popover-content {
+          background-color: var(--bgColor2);
+
+          .switch {
+            &-row {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin-bottom: 10px;
+
+              .switch-btn{
+                margin-bottom: 0;
+
+                .bp3-control-indicator {
+                  background: var(--bgColor);
+                  &::before  {
+                    background: var(--switchBtnColor);
+                  }
+                }
+
+                &.active {
+                  .bp3-control-indicator {
+                    background: var(--thColor);
+                    &::before  {
+                      background: var(--color);
+                    }
+                  }
+                }
+              }
+            }
+
+            &-title {
+              font-size: 14px;
+            }
+          }
+
+          .balance-input {
+            display: flex;
+            max-width: 140px;
+            position: relative;
+
+            &-label {
+              font-size: 14px;
+              max-width: 266px;
+              color:  var(--color2);
+            }
+
+            .bp3-form-group {
+              margin-bottom: 8px;
+            }
+
+            .bp3-input-group {
+              margin-bottom: 0;
+
+              .bp3-input {
+                height: 31px;
+                max-width: 140px;
+                padding: 0 40px 0 10px ;
+                font-size: 13px;
+              }
+            }
+
+            .bp3-disabled,
+            .bp3-input:disabled {
+              border-radius: 4px;
+              background: var(--multiBg);
+            }
+
+            &-currency {
+              right: 8px;
+              top: 16px;
+              font-size: 13px;
+              position: absolute;
+              color:  var(--color2);;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .bp3-table-container {
     box-shadow: none;
   }
@@ -261,7 +389,7 @@
 
   .loading-container {
     display: flex;
-    min-height: 320px;
+    min-height: 387px;
 
     .loading {
       margin: auto;

src/components/Auth/InputKey/InputKey.js

@@ -12,13 +12,14 @@ export const InputKey = ({
   label,
   value,
   onChange,
+  disabled,
   placeholder,
 }) => {
   const { t } = useTranslation()
   return (
     <div className='bitfinex-auth-form-input'>
       <FormGroup
-        label={t(label)}
+        label={label ? t(label) : ''}
         labelFor={name}
       />
       <InputGroup
@@ -27,6 +28,7 @@ export const InputKey = ({
         type={type}
         value={value}
         onChange={onChange}
+        disabled={disabled}
         placeholder={placeholder && t(placeholder)}
       />
     </div>
@@ -35,18 +37,20 @@ export const InputKey = ({
 
 InputKey.propTypes = {
   name: PropTypes.string,
+  type: PropTypes.string,
   label: PropTypes.string,
-  value: PropTypes.string,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
-  type: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
 InputKey.defaultProps = {
   name: '',
   value: '',
   label: '',
   placeholder: '',
+  disabled: false,
   type: 'password',
   onChange: () => {},
 }