bug/PM-618: Display WETH for Dashboard/Header and fix profits display

config/environments/staging/interface.config.json

@@ -3,6 +3,11 @@
     "default": "METAMASK",
     "requireTOSAccept": true
   },
+  "collateralToken":  {
+    "address": "0xd19bce9f7693598a9fa1f94c548b20887a33f141",
+    "symbol": "WETH",
+    "icon": "/assets/img/icons/icon_etherTokens.svg"
+  },
   "footer": {
     "enabled": true,
     "content": {

src/components/Dashboard/Metrics/Layout.js

@@ -50,10 +50,12 @@ const Metrics = ({
 }) => (
   <Block className={cx('ol-db-container')} margin="md">
     <Metric img={tokenIcon} explanation={`${tokenSymbol} TOKENS`}>
-      <DecimalValue value={tokens} className={cx('ol-db-title')} />
+      <span className={cx('ol-db-title')}>
+        <DecimalValue value={tokens} /> {tokenSymbol}
+      </span>
     </Metric>
     <Metric img={outstandingPredictions} width={45} height={45} explanation="PREDICTED PROFITS">
-      <Block className={cx('ol-db-title')}>{predictedProfit}</Block>
+      <Block className={cx('ol-db-title')}>{predictedProfit} {tokenSymbol}</Block>
     </Metric>
     {tournamentEnabled && (
       <React.Fragment>

src/components/Dashboard/Metrics/index.js

@@ -32,6 +32,7 @@ class Metrics extends React.PureComponent {
     const {
       predictedProfit, tokens, tokenSymbol, tokenIcon, rank, badge,
     } = this.props
+
     return (
       <Layout
         tokens={tokens}
@@ -45,4 +46,4 @@ class Metrics extends React.PureComponent {
   }
 }
 
-export default connect(selector)(Metrics)
+export default Metrics

src/components/Dashboard/index.js

@@ -329,6 +329,7 @@ class Dashboard extends Component {
     const {
       hasWallet, collateralToken, accountPredictiveAssets,
     } = this.props
+
     let metricsSection = <div />
     let tradesHoldingsSection = <div className="dashboardWidgets dashboardWidgets--financial" />
     const predictedProfitFormatted = Decimal(accountPredictiveAssets).toDP(4, 1).toString()

src/containers/DashboardPage/index.js

@@ -23,7 +23,6 @@ const mapStateToProps = (state) => {
   const gnosisInitialized = isGnosisInitialized(state)
   const hasWallet = checkWalletConnection(state)
   const collateralToken = getCollateralTokenInfo(state)
-
   return {
     hasWallet,
     defaultAccount,

src/containers/HeaderContainer/store/actions.js

@@ -11,7 +11,7 @@ import { getCollateralToken } from 'utils/features'
  * Requests the configured tournaments collateralToken balance. If none is set, does nothing
  * @param {function} dispatch
  */
-const requestTournamentTokenBalance = dispatch => (account) => {
+const requestTournamentTokenBalance = account => (dispatch) => {
   const tournamentToken = getCollateralToken()
 
   if (!tournamentToken) {

src/selectors/blockchain.js

@@ -39,14 +39,14 @@ export const getCollateralTokenInfo = (state) => {
   if (!collateralToken) {
     return {
       symbol: 'ETH',
-      amount: weiToEth(getCurrentBalance(state)),
+      amount: getCurrentBalance(state),
       address: undefined,
       icon: ETH_TOKEN_ICON,
     }
   }
 
   return {
-    symbol: getTokenSymbol(state, collateralToken.address),
+    symbol: collateralToken.symbol || getTokenSymbol(state, collateralToken.address),
     amount: weiToEth(getTokenAmount(state, collateralToken.address)),
     address: collateralToken.address,
     icon: collateralToken.icon,