factor out containers for currency components (#8543)

package.json

@@ -196,6 +196,7 @@
     "@storybook/core": "^5.3.14",
     "@storybook/react": "^5.3.14",
     "@storybook/storybook-deployer": "^2.8.1",
+    "@testing-library/react-hooks": "^3.2.1",
     "addons-linter": "1.14.0",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",

ui/app/components/app/user-preferenced-currency-display/index.js

@@ -1 +1 @@
-export { default } from './user-preferenced-currency-display.container'
+export { default } from './user-preferenced-currency-display.component'

ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js

@@ -3,9 +3,17 @@ import assert from 'assert'
 import { shallow } from 'enzyme'
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display.component'
 import CurrencyDisplay from '../../../ui/currency-display'
+import * as currencyHook from '../../../../hooks/useCurrencyDisplay'
+import * as currencyPrefHook from '../../../../hooks/useUserPreferencedCurrency'
+import sinon from 'sinon'
+
 
 describe('UserPreferencedCurrencyDisplay Component', function () {
   describe('rendering', function () {
+    beforeEach(function () {
+      sinon.stub(currencyHook, 'useCurrencyDisplay').returns(['1', {}])
+      sinon.stub(currencyPrefHook, 'useUserPreferencedCurrency').returns({ currency: 'ETH', decimals: 6 })
+    })
     it('should render properly', function () {
       const wrapper = shallow(
         <UserPreferencedCurrencyDisplay />
@@ -30,5 +38,8 @@ describe('UserPreferencedCurrencyDisplay Component', function () {
       assert.equal(wrapper.find(CurrencyDisplay).props().prop2, 'test')
       assert.equal(wrapper.find(CurrencyDisplay).props().prop3, 1)
     })
+    afterEach(function () {
+      sinon.restore()
+    })
   })
 })

ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -1,47 +1,42 @@
-import React, { PureComponent } from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common'
 import CurrencyDisplay from '../../ui/currency-display'
+import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency'
 
-export default class UserPreferencedCurrencyDisplay extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    prefix: PropTypes.string,
-    value: PropTypes.string,
-    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    hideLabel: PropTypes.bool,
-    hideTitle: PropTypes.bool,
-    style: PropTypes.object,
-    showEthLogo: PropTypes.bool,
-    ethLogoHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    // Used in container
-    type: PropTypes.oneOf([PRIMARY, SECONDARY]),
-    ethNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    fiatNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    ethPrefix: PropTypes.string,
-    fiatPrefix: PropTypes.string,
-    // From container
-    currency: PropTypes.string,
-    nativeCurrency: PropTypes.string,
-  }
-
-  renderEthLogo () {
-    const { currency, showEthLogo, ethLogoHeight = 12 } = this.props
+export default function UserPreferencedCurrencyDisplay ({ type, showEthLogo, ethLogoHeight = 12, ethNumberOfDecimals, fiatNumberOfDecimals, numberOfDecimals: propsNumberOfDecimals, ...restProps }) {
+  const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, { ethNumberOfDecimals, fiatNumberOfDecimals, numberOfDecimals: propsNumberOfDecimals })
 
+  const prefixComponent = useMemo(() => {
     return currency === ETH && showEthLogo && (
       <img
         src="/images/eth.svg"
         height={ethLogoHeight}
       />
     )
-  }
+  }, [currency, showEthLogo, ethLogoHeight])
 
-  render () {
-    return (
-      <CurrencyDisplay
-        {...this.props}
-        prefixComponent={this.renderEthLogo()}
-      />
-    )
-  }
+  return (
+    <CurrencyDisplay
+      {...restProps}
+      currency={currency}
+      numberOfDecimals={numberOfDecimals}
+      prefixComponent={prefixComponent}
+    />
+  )
+}
+
+UserPreferencedCurrencyDisplay.propTypes = {
+  className: PropTypes.string,
+  prefix: PropTypes.string,
+  value: PropTypes.string,
+  numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hideLabel: PropTypes.bool,
+  hideTitle: PropTypes.bool,
+  style: PropTypes.object,
+  showEthLogo: PropTypes.bool,
+  ethLogoHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.oneOf([PRIMARY, SECONDARY]),
+  ethNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fiatNumberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }