(feature) App summary: profits section

public/locales/en/translations.json

@@ -665,6 +665,10 @@
       "title": "Account Balance",
       "sub_title": "Total Balance including Deposits/Withdrawals"
     },
+    "profits": {
+      "title": "Profits",
+      "sub_title": "End of day profits/losses excluding Deposits/Withdrawals"
+    },
     "by_asset":{
       "title": "Summary by Asset",
       "sub_title": "For period ",

src/components/AppSummary/AppSummary.container.js

@@ -12,6 +12,7 @@ import {
   refresh as refreshBalance,
 } from 'state/accountBalance/actions'
 import { refresh as refreshSummaryByAsset } from 'state/summaryByAsset/actions'
+import { refresh as refreshProfits } from 'state/profits/actions'
 import {
   getData,
   getPageLoading,
@@ -42,6 +43,7 @@ const mapDispatchToProps = {
   fetchData,
   setParams,
   refreshBalance,
+  refreshProfits,
   refreshSummaryByAsset,
 }
 

src/components/AppSummary/AppSummary.js

@@ -17,6 +17,7 @@ import UnrealizedProfitSelector from 'ui/UnrealizedProfitSelector'
 import Leo from './AppSummary.leo'
 import Fees from './AppSummary.fees'
 import Value from './AppSummary.value'
+import Profits from './AppSummary.profits'
 import ByAsset from './AppSummary.byAsset'
 
 const AppSummary = ({
@@ -31,6 +32,7 @@ const AppSummary = ({
   isTurkishSite,
   isSyncRequired,
   refreshBalance,
+  refreshProfits,
   currentTimeFrame,
   refreshSummaryByAsset,
   isUnrealizedProfitExcluded,
@@ -52,8 +54,9 @@ const AppSummary = ({
   const onRefresh = useCallback(() => {
     refresh()
     refreshBalance()
+    refreshProfits()
     refreshSummaryByAsset()
-  }, [refresh, refreshBalance, refreshSummaryByAsset])
+  }, [refresh, refreshBalance, refreshSummaryByAsset, refreshProfits])
 
   return (
     <Card
@@ -105,6 +108,9 @@ const AppSummary = ({
         </SectionHeader>
         <div className='app-summary-data-row'>
           <Value />
+          <Profits />
+        </div>
+        <div className='app-summary-data-row'>
           <Fees
             t={t}
             data={data}
@@ -144,6 +150,7 @@ AppSummary.propTypes = {
   currentTimeFrame: PropTypes.string.isRequired,
   isUnrealizedProfitExcluded: PropTypes.bool.isRequired,
   refreshSummaryByAsset: PropTypes.func.isRequired,
+  refreshProfits: PropTypes.func.isRequired,
 }
 
 AppSummary.defaultProps = {

src/components/AppSummary/AppSummary.profits.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
+import _sortBy from 'lodash/sortBy'
+import { isEmpty } from '@bitfinex/lib-js-util-base'
+
+import NoData from 'ui/NoData'
+import Chart from 'ui/Charts/Chart'
+import { parseChartData } from 'ui/Charts/Charts.helpers'
+import timeframeConstants from 'ui/TimeFrameSelector/constants'
+import {
+  getEntries,
+  getPageLoading,
+  getDataReceived,
+} from 'state/profits/selectors'
+import { fetchProfits } from 'state/profits/actions'
+import { getTimeRange } from 'state/timeRange/selectors'
+import { getIsSyncRequired } from 'state/sync/selectors'
+
+const AccountSummaryProfits = () => {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const entries = useSelector(getEntries)
+  const timeRange = useSelector(getTimeRange)
+  const pageLoading = useSelector(getPageLoading)
+  const dataReceived = useSelector(getDataReceived)
+  const isSyncRequired = useSelector(getIsSyncRequired)
+
+  useEffect(() => {
+    if (!dataReceived && !pageLoading && !isSyncRequired) {
+      dispatch(fetchProfits())
+    }
+  }, [timeRange, dataReceived, pageLoading, isSyncRequired])
+
+  const { chartData, presentCurrencies } = useMemo(
+    () => parseChartData({
+      data: _sortBy(entries, ['mts']),
+      timeframe: timeframeConstants.DAY,
+    }), [entries],
+  )
+
+  let showContent
+  if (dataReceived && isEmpty(entries)) {
+    showContent = <NoData title='summary.no_data' />
+  } else {
+    showContent = (
+      <div className='chart-wrapper'>
+        <Chart
+          height={375}
+          data={chartData}
+          showLegend={false}
+          dataKeys={presentCurrencies}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className='app-summary-item chart-item'>
+      <div className='app-summary-item-title'>
+        {t('summary.profits.title')}
+      </div>
+      <div className='app-summary-item-sub-title'>
+        {t('summary.profits.sub_title')}
+      </div>
+      {showContent}
+    </div>
+  )
+}
+
+export default AccountSummaryProfits

src/components/AppSummary/_AppSummary.scss

@@ -411,7 +411,7 @@
   }
 
   .line-chart {
-    width:115%;
+    width:114%;
   }
 
   .no-data {
@@ -463,7 +463,7 @@
   }
 }
 
-@media screen and (max-width: 1020px) {
+@media screen and (max-width: 1130px) {
   .app-summary {
     &-data-row {
       display: flex;
@@ -474,6 +474,10 @@
     &-item {
       width: 100%;
       margin-bottom: 30px;
+
+      .line-chart {
+        width:107%;
+      }
     }
 
     .chart-item {
@@ -483,22 +487,23 @@
   }
 }
 
-@media screen and (max-width: 855px) {
+@media screen and (max-width: 450px) {
   .app-summary {
     &-item {
       .line-chart {
-        width:107%;
+        width:115%;
       }
     }
   }
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (min-width: 1700px) {
   .app-summary {
     &-item {
       .line-chart {
-        width:115%;
+        width:110%;
       }
     }
   }
 }
+

src/state/profits/actions.js

@@ -0,0 +1,35 @@
+import types from './constants'
+
+export function fetchProfits(payload) {
+  return {
+    type: types.FETCH_PROFITS,
+    payload,
+  }
+}
+
+export function fetchFail(payload) {
+  return {
+    type: types.FETCH_FAIL,
+    payload,
+  }
+}
+
+export function refresh() {
+  return {
+    type: types.REFRESH,
+  }
+}
+
+export function updateProfits(payload) {
+  return {
+    type: types.UPDATE_PROFITS,
+    payload,
+  }
+}
+
+export default {
+  fetchFail,
+  fetchProfits,
+  refresh,
+  updateProfits,
+}

src/state/profits/constants.js

@@ -0,0 +1,6 @@
+export default {
+  FETCH_FAIL: 'BITFINEX/PROFITS/FETCH/FAIL',
+  FETCH_PROFITS: 'BITFINEX/PROFITS/FETCH',
+  REFRESH: 'BITFINEX/PROFITS/REFRESH',
+  UPDATE_PROFITS: 'BITFINEX/PROFITS/UPDATE',
+}

src/state/profits/reducer.js

@@ -0,0 +1,49 @@
+import authTypes from 'state/auth/constants'
+import timeRangeTypes from 'state/timeRange/constants'
+
+import { fetchFail } from 'state/reducers.helper'
+
+import types from './constants'
+
+export const initialState = {
+  entries: [],
+  pageLoading: false,
+  dataReceived: false,
+}
+
+export function profitsReducer(state = initialState, action) {
+  const { type: actionType, payload } = action
+  switch (actionType) {
+    case types.FETCH_PROFITS:
+      return {
+        ...initialState,
+        pageLoading: true,
+      }
+    case types.UPDATE_PROFITS: {
+      if (!payload) {
+        return {
+          ...state,
+          dataReceived: true,
+          pageLoading: false,
+        }
+      }
+      return {
+        ...state,
+        dataReceived: true,
+        pageLoading: false,
+        entries: payload,
+      }
+    }
+    case types.FETCH_FAIL:
+      return fetchFail(state)
+    case types.REFRESH:
+    case timeRangeTypes.SET_TIME_RANGE:
+    case authTypes.LOGOUT:
+      return initialState
+    default: {
+      return state
+    }
+  }
+}
+
+export default profitsReducer

src/state/profits/saga.js

@@ -0,0 +1,59 @@
+import {
+  call,
+  put,
+  select,
+  takeLatest,
+} from 'redux-saga/effects'
+
+import { makeFetchCall } from 'state/utils'
+import { updateErrorStatus } from 'state/status/actions'
+import { getTimeFrame } from 'state/timeRange/selectors'
+import timeframeConstants from 'ui/TimeFrameSelector/constants'
+import unrealizedProfitConstants from 'ui/UnrealizedProfitSelector/constants'
+
+import types from './constants'
+import actions from './actions'
+
+export const getReqWinLoss = params => makeFetchCall('getWinLoss', params)
+
+export function* fetchProfits() {
+  try {
+    const { start, end } = yield select(getTimeFrame)
+    const { result = [], error } = yield call(getReqWinLoss,
+      {
+        end,
+        start,
+        timeframe: timeframeConstants.DAY,
+        isUnrealizedProfitExcluded: unrealizedProfitConstants.FALSE,
+      })
+    yield put(actions.updateProfits(result))
+
+    if (error) {
+      yield put(actions.fetchFail({
+        id: 'status.fail',
+        topic: 'summary.profits.title',
+        detail: error?.message ?? JSON.stringify(error),
+      }))
+    }
+  } catch (fail) {
+    yield put(actions.fetchFail({
+      id: 'status.request.error',
+      topic: 'summary.profits.title',
+      detail: JSON.stringify(fail),
+    }))
+  }
+}
+
+function* refreshProfits() {
+  yield put(actions.fetchProfits())
+}
+
+function* fetchProfitsFail({ payload }) {
+  yield put(updateErrorStatus(payload))
+}
+
+export default function* profitsSaga() {
+  yield takeLatest(types.FETCH_PROFITS, fetchProfits)
+  yield takeLatest(types.REFRESH, refreshProfits)
+  yield takeLatest(types.FETCH_FAIL, fetchProfitsFail)
+}

src/state/profits/selectors.js

@@ -0,0 +1,12 @@
+export const getProfits = state => state.profits
+
+export const getEntries = state => getProfits(state)?.entries ?? []
+export const getPageLoading = state => getProfits(state)?.pageLoading ?? false
+export const getDataReceived = state => getProfits(state)?.dataReceived ?? false
+
+export default {
+  getProfits,
+  getEntries,
+  getPageLoading,
+  getDataReceived,
+}

src/state/reducers.js

@@ -34,6 +34,7 @@ import paginationReducer from './pagination/reducer'
 import positionsAuditReducer from './audit/reducer'
 import positionsActiveReducer from './positionsActive/reducer'
 import positionsReducer from './positions/reducer'
+import profitsReducer from './profits/reducer'
 import publicFundingReducer from './publicFunding/reducer'
 import publicTradesReducer from './publicTrades/reducer'
 import routingReducer from './routing/reducer'
@@ -96,6 +97,7 @@ const BASE_REDUCERS = {
   orderTrades: orderTradesReducer,
   pagination: paginationReducer,
   positions: positionsReducer,
+  profits: profitsReducer,
   publicFunding: publicFundingReducer,
   publicTrades: publicTradesReducer,
   router: connectRouter(history),

src/state/sagas.js

@@ -28,6 +28,7 @@ import paginationSaga from './pagination/saga'
 import positionsSaga from './positions/saga'
 import positionsActiveSaga from './positionsActive/saga'
 import positionsAuditSaga from './audit/saga'
+import profitsSaga from './profits/saga'
 import publicFundingSaga from './publicFunding/saga'
 import publicTradesSaga from './publicTrades/saga'
 import routingSaga from './routing/saga'
@@ -96,6 +97,7 @@ export default function* rootSaga() {
     yield fork(taxReportSaga)
     yield fork(tradedVolumeSaga)
     yield fork(winLossSaga)
+    yield fork(profitsSaga)
     yield fork(wsSaga)
   }
 }