diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index c7c6b2452f..1b25d25687 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -617,21 +617,6 @@ "use_api_key": "Use API key", "name_updated": "Accounts group name updated" }, - "summary": { - "title": "Summary", - "leo_level": "LEO level", - "avg_amount": "Avg.Amount", - "fees": { - "title": "Account Fees", - "sub_title": "Based on your trading volume", - "maker": "Maker Fees", - "taker_crypto": "Taker Fees Crypto", - "taker_fiat": "Taker Fees Fiat", - "taker_stables": "Taker Fees Stablecoins", - "deriv_maker": "Derivatives Maker Fees", - "deriv_taker": "Derivatives Taker Fees" - } - }, "symbols": { "title": "Get symbols", "clear_symbols": "Clear Symbols" diff --git a/src/components/AppSummary/AppSummary.container.js b/src/components/AppSummary/AppSummary.container.js deleted file mode 100644 index e24be1054d..0000000000 --- a/src/components/AppSummary/AppSummary.container.js +++ /dev/null @@ -1,35 +0,0 @@ -import { compose } from 'redux' -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { withTranslation } from 'react-i18next' - -import { - refresh, - fetchData, -} from 'state/accountSummary/actions' -import { - getData, - getPageLoading, - getDataReceived, -} from 'state/accountSummary/selectors' -import { getIsTurkishSite } from 'state/base/selectors' - -import AccountSummary from './AppSummary' - -const mapStateToProps = state => ({ - data: getData(state), - pageLoading: getPageLoading(state), - dataReceived: getDataReceived(state), - isTurkishSite: getIsTurkishSite(state), -}) - -const mapDispatchToProps = { - refresh, - fetchData, -} - -export default compose( - connect(mapStateToProps, mapDispatchToProps), - withTranslation('translations'), - withRouter, -)(AccountSummary) diff --git a/src/components/AppSummary/AppSummary.fees.js b/src/components/AppSummary/AppSummary.fees.js deleted file mode 100644 index 5f471e901a..0000000000 --- a/src/components/AppSummary/AppSummary.fees.js +++ /dev/null @@ -1,138 +0,0 @@ -import React, { memo } from 'react' -import PropTypes from 'prop-types' -import { Cell } from '@blueprintjs/table' - -import { formatFee } from 'ui/utils' -import CollapsedTable from 'ui/CollapsedTable' - -const getColumns = ({ - makerFee, - isTurkishSite, - derivTakerFee, - takerFeeToFiat, - takerFeeToStable, - takerFeeToCrypto, - derivMakerRebate, -}) => [ - { - id: 'makerFee', - name: 'summary.fees.maker', - width: 100, - renderer: () => ( - - {formatFee(makerFee)} - % - - ), - }, - { - id: 'takerFeeCrypto', - name: 'summary.fees.taker_crypto', - width: 140, - renderer: () => ( - - {formatFee(takerFeeToCrypto)} - % - - ), - }, - { - id: 'takerFeeFiat', - name: 'summary.fees.taker_fiat', - width: 140, - renderer: () => ( - - {formatFee(takerFeeToFiat)} - % - - ), - }, - { - id: 'takerFeeStable', - name: 'summary.fees.taker_stables', - width: 140, - renderer: () => ( - - {formatFee(takerFeeToStable)} - % - - ), - }, - ...(!isTurkishSite ? [{ - id: 'derivMakerRebate', - name: 'summary.fees.deriv_maker', - width: 140, - renderer: () => ( - - {formatFee(derivMakerRebate)} - % - - ), - }, - { - id: 'derivTakerFee', - name: 'summary.fees.deriv_taker', - width: 140, - renderer: () => ( - - {formatFee(derivTakerFee)} - % - - ), - }] : []), -] - -const AppSummaryFees = ({ - t, - data, - isTurkishSite, -}) => { - const { - makerFee = 0, - derivTakerFee = 0, - takerFeeToFiat = 0, - takerFeeToStable = 0, - takerFeeToCrypto = 0, - derivMakerRebate = 0, - } = data - - const columns = getColumns({ - makerFee, - isTurkishSite, - derivTakerFee, - takerFeeToFiat, - takerFeeToStable, - takerFeeToCrypto, - derivMakerRebate, - }) - - return ( -
-
- {t('summary.fees.title')} -
-
- {t('summary.fees.sub_title')} -
- -
- ) -} - -AppSummaryFees.propTypes = { - data: PropTypes.shape({ - derivMakerRebate: PropTypes.number, - derivTakerFee: PropTypes.number, - makerFee: PropTypes.number, - takerFeeToCrypto: PropTypes.number, - takerFeeToFiat: PropTypes.number, - takerFeeToStable: PropTypes.number, - }).isRequired, - t: PropTypes.func.isRequired, - isTurkishSite: PropTypes.bool.isRequired, -} - -export default memo(AppSummaryFees) diff --git a/src/components/AppSummary/AppSummary.js b/src/components/AppSummary/AppSummary.js deleted file mode 100644 index aa96930162..0000000000 --- a/src/components/AppSummary/AppSummary.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { memo, useEffect } from 'react' -import PropTypes from 'prop-types' -import _isEmpty from 'lodash/isEmpty' -import { Card, Elevation } from '@blueprintjs/core' - -import NoData from 'ui/NoData' -import Loading from 'ui/Loading' -import { SectionHeader, SectionHeaderTitle } from 'ui/SectionHeader' - -import Leo from './AppSummary.leo' -import Fees from './AppSummary.fees' - -const AppSummary = ({ - t, - data, - refresh, - fetchData, - pageLoading, - dataReceived, - isTurkishSite, -}) => { - useEffect(() => { - if (!dataReceived && !pageLoading) fetchData() - }, []) - - let showContent - if (!dataReceived && pageLoading) { - showContent = - } else if (_isEmpty(data)) { - showContent = - } else { - showContent = ( -
- -
- ) - } - return ( - -
- - -
-
- {t('summary.title')} -
-
- -
-
- - - {showContent} -
- - ) -} - -AppSummary.propTypes = { - data: PropTypes.shape({ - derivMakerRebate: PropTypes.number, - derivTakerFee: PropTypes.number, - leoAmountAvg: PropTypes.number, - leoLev: PropTypes.number, - makerFee: PropTypes.number, - takerFeeToCrypto: PropTypes.number, - takerFeeToFiat: PropTypes.number, - takerFeeToStable: PropTypes.number, - }), - dataReceived: PropTypes.bool.isRequired, - fetchData: PropTypes.func.isRequired, - isTurkishSite: PropTypes.bool.isRequired, - pageLoading: PropTypes.bool.isRequired, - refresh: PropTypes.func.isRequired, - t: PropTypes.func.isRequired, -} - -AppSummary.defaultProps = { - data: {}, -} - -export default memo(AppSummary) diff --git a/src/components/AppSummary/AppSummary.leo.js b/src/components/AppSummary/AppSummary.leo.js deleted file mode 100644 index d515c23316..0000000000 --- a/src/components/AppSummary/AppSummary.leo.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { memo } from 'react' -import { useTranslation } from 'react-i18next' -import PropTypes from 'prop-types' - -import Icon from 'icons' -import { fixedFloat } from 'ui/utils' - -const AccountSummaryLeo = ({ data, isLoading }) => { - const { t } = useTranslation() - const { leoLev = 0, leoAmountAvg = 0 } = data - const formattedLeoAmount = fixedFloat(leoAmountAvg) - - return ( - <> - {!isLoading && ( -
-
-
- - {`${t('summary.leo_level')} ${leoLev}`} -
-
-
- {`${t('summary.avg_amount')} ${formattedLeoAmount}`} -
-
- ) - } - - ) -} - -AccountSummaryLeo.propTypes = { - data: PropTypes.shape({ - leoLev: PropTypes.number, - leoAmountAvg: PropTypes.number, - }).isRequired, - isLoading: PropTypes.bool.isRequired, -} - -export default memo(AccountSummaryLeo) diff --git a/src/components/AppSummary/_AppSummary.scss b/src/components/AppSummary/_AppSummary.scss deleted file mode 100644 index 2841c36ebd..0000000000 --- a/src/components/AppSummary/_AppSummary.scss +++ /dev/null @@ -1,130 +0,0 @@ -.app-summary { - &-card { - padding-left: 32px; - padding-right: 32px; - } - - &-wrapper { - max-width: 1000px; - } - - &-data-row { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - } - - &-title-row { - display: flex; - align-items: center; - justify-content: space-between; - } - - &-item { - width: 48%; - max-width: 460px; - - &-title { - font-size: 18px; - color: var(--color); - } - - &-sub-title { - font-size: 14px; - color: var(--color2); - margin-bottom: 15px; - } - - .collapsed-table { - &-item { - padding: 0; - border: none; - border-radius: 0; - background-color: var(--bgColor2); - border-top: 1px solid var(--tableBorder); - border-bottom: 1px solid var(--tableBorder); - - & > div { - &:first-child { - border-top: 1px solid var(--tableBorder); - } - - &:last-child { - border-bottom: 1px solid var(--tableBorder); - } - - - &:nth-child(odd) { - background-color: var(--bgColor2); - } - - &:nth-child(even) { - background-color: var(--bgColor2); - } - - & > div { - display: table-cell; - min-height: 24px; - padding: 16px 8px; - vertical-align: middle; - border-bottom: 1px solid var(--tableBorder); - - &:first-child { - width: 45%; - } - - &:last-child { - padding: 4px 5px; - text-align: end; - word-break: break-word; - } - } - - &:last-child { - & > div { - border-bottom: none; - } - } - } - } - } - } -} - -.leo-level { - &--row { - display: flex; - align-items: center; - justify-content: flex-end; - } - - &--title { - font-size: 14px; - position: relative; - color: var(--leoLevelColor); - - .icon-leo { - margin-right: 4px; - margin-bottom: -2px; - } - } - - &--sub-title { - font-size: 13px; - color: var(--color2); - } -} - -@media screen and (max-width: 547px) { - .app-summary { - &-data-row { - display: flex; - flex-direction: column; - } - &-item { - width: 100%; - margin-bottom: 30px; - } - } -} diff --git a/src/components/AppSummary/index.js b/src/components/AppSummary/index.js deleted file mode 100644 index cf2935a6c3..0000000000 --- a/src/components/AppSummary/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './AppSummary.container' diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js index d5351b517c..93fd90d8f6 100644 --- a/src/components/Main/Main.js +++ b/src/components/Main/Main.js @@ -4,7 +4,6 @@ import { Route, Switch } from 'react-router-dom' import { Card } from '@blueprintjs/core' import AppDownload from 'components/AppDownload' -import AppSummary from 'components/AppSummary' import AccountBalance from 'components/AccountBalance' import AccountSummary from 'components/AccountSummary' import AffiliatesEarnings from 'components/AffiliatesEarnings' @@ -349,7 +348,7 @@ class Main extends PureComponent { + \ No newline at end of file diff --git a/src/icons/index.js b/src/icons/index.js index 8f38835781..ad723f6e48 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -31,7 +31,6 @@ import { ReactComponent as FILTER_CLEAR } from './filter-clear.svg' import { ReactComponent as GO_TO } from './go-to.svg' import { ReactComponent as HAMBURGER_MENU } from './hamburger-menu.svg' import { ReactComponent as INFO_CIRCLE } from './info-circle.svg' -import { ReactComponent as LEO } from './leo.svg' import { ReactComponent as LIGHT_THEME } from './light-theme.svg' import { ReactComponent as LIST_NUMBER } from './list-number.svg' import { ReactComponent as LOOP } from './loop.svg' @@ -91,7 +90,6 @@ export default { GO_TO, HAMBURGER_MENU, INFO_CIRCLE, - LEO, LIGHT_THEME, LIST_NUMBER, LOOP, diff --git a/src/icons/leo.svg b/src/icons/leo.svg deleted file mode 100644 index 7b1a70f257..0000000000 --- a/src/icons/leo.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/styles/index.scss b/src/styles/index.scss index b471d3b9b8..430f245d7b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -9,7 +9,6 @@ @import "components/Auth/_Auth.scss"; @import "components/AccountSummary/_AccountSummary.scss"; @import "components/AppDownload/_AppDownload.scss"; -@import "components/AppSummary/_AppSummary.scss"; @import "components/Candles/_Candles.scss"; @import "components/ConcentrationRisk/_ConcentrationRisk.scss"; @import "components/ErrorDialog/_ErrorDialog.scss"; diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss index 43eab62eb0..06198d44aa 100644 --- a/src/styles/themes/_dark.scss +++ b/src/styles/themes/_dark.scss @@ -8,7 +8,6 @@ --iconColor: #ffffff; --activeColor: #82baf6; --activeHoverColor: #4c88c8; - --leoLevelColor: #D3B25B; --authNoticeBg: #172d3e; diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss index f2604fc864..b8bb382e03 100644 --- a/src/styles/themes/_light.scss +++ b/src/styles/themes/_light.scss @@ -8,7 +8,6 @@ --iconColor: #102331; --activeColor: #518bc9; --activeHoverColor: #4c88c8; - --leoLevelColor: #D3B25B; --authNoticeBg: #ebf1f5; diff --git a/src/ui/SectionHeader/_SectionHeader.scss b/src/ui/SectionHeader/_SectionHeader.scss index 47bf6857ff..c08f4c65fb 100644 --- a/src/ui/SectionHeader/_SectionHeader.scss +++ b/src/ui/SectionHeader/_SectionHeader.scss @@ -2,14 +2,14 @@ margin-bottom: 20px; &-title { - font-size: 24px; + font-size: 30px; margin-bottom: 20px; color: var(--color); position: relative; .bp3-popover-wrapper { position: absolute; - margin-top: 5px; + margin-top: 8px; } &--main { diff --git a/src/ui/utils.js b/src/ui/utils.js index 02ffa45ef3..8be215b68f 100644 --- a/src/ui/utils.js +++ b/src/ui/utils.js @@ -94,8 +94,6 @@ export const formatAmount = (val, options = {}) => { ) } -export const formatFee = (fee) => formatAmount(fee * 100, { color: 'white', minDigits: 2 }) - export const formatColor = (value, color) => { const classes = classNames({ 'bitfinex-green-text': color === 'green', @@ -125,7 +123,6 @@ export default { fixedFloat, insertIf, formatAmount, - formatFee, formatColor, formatExecPrice, formatFraction,