Add `data-testid` to the `EthOverview` balances (#8951)

Both the primary and secondary balance components on `EthOverview` now
have `data-testid` props, so that they can be more easily referenced in
e2e tests.

This required the addition of a `data-testid` prop to the component
`UserPreferencedCurrencyDisplay`, which is passed through to the
underlying `CurrencyDisplay` component.

test/e2e/metamask-responsive-ui.spec.js

@@ -166,7 +166,7 @@ describe('MetaMask', function () {
     })
 
     it('balance renders', async function () {
-      const balance = await driver.findElement(By.css('.eth-overview__primary-balance'))
+      const balance = await driver.findElement(By.css('[data-testid="eth-overview__primary-currency"]'))
       await driver.wait(until.elementTextMatches(balance, /100\s*ETH/))
       await driver.delay(regularDelayMs)
     })

test/e2e/metamask-ui.spec.js

@@ -750,7 +750,7 @@ describe('MetaMask', function () {
     })
 
     it('renders the correct ETH balance', async function () {
-      const balance = await driver.findElement(By.css('.eth-overview__primary-balance'))
+      const balance = await driver.findElement(By.css('[data-testid="eth-overview__primary-currency"]'))
       await driver.delay(regularDelayMs)
       await driver.wait(until.elementTextMatches(balance, /^87.*\s*ETH.*$/), 10000)
       const tokenAmount = await balance.getText()

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

@@ -4,7 +4,16 @@ import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common'
 import CurrencyDisplay from '../../ui/currency-display'
 import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency'
 
-export default function UserPreferencedCurrencyDisplay ({ type, showEthLogo, ethLogoHeight = 12, ethNumberOfDecimals, fiatNumberOfDecimals, numberOfDecimals: propsNumberOfDecimals, ...restProps }) {
+export default function UserPreferencedCurrencyDisplay ({
+  'data-testid': dataTestId,
+  ethLogoHeight = 12,
+  ethNumberOfDecimals,
+  fiatNumberOfDecimals,
+  numberOfDecimals: propsNumberOfDecimals,
+  showEthLogo,
+  type,
+  ...restProps
+}) {
   const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, { ethNumberOfDecimals, fiatNumberOfDecimals, numberOfDecimals: propsNumberOfDecimals })
 
   const prefixComponent = useMemo(() => {
@@ -20,6 +29,7 @@ export default function UserPreferencedCurrencyDisplay ({ type, showEthLogo, eth
     <CurrencyDisplay
       {...restProps}
       currency={currency}
+      data-testid={dataTestId}
       numberOfDecimals={numberOfDecimals}
       prefixComponent={prefixComponent}
     />
@@ -28,6 +38,7 @@ export default function UserPreferencedCurrencyDisplay ({ type, showEthLogo, eth
 
 UserPreferencedCurrencyDisplay.propTypes = {
   className: PropTypes.string,
+  'data-testid': PropTypes.string,
   prefix: PropTypes.string,
   value: PropTypes.string,
   numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

ui/app/components/app/wallet-overview/eth-overview.js

@@ -50,6 +50,7 @@ const EthOverview = ({ className }) => {
                 className={classnames('eth-overview__primary-balance', {
                   'eth-overview__cached-balance': balanceIsCached,
                 })}
+                data-testid="eth-overview__primary-currency"
                 value={balance}
                 type={PRIMARY}
                 ethNumberOfDecimals={4}
@@ -66,6 +67,7 @@ const EthOverview = ({ className }) => {
                     'eth-overview__cached-secondary-balance': balanceIsCached,
                     'eth-overview__secondary-balance': !balanceIsCached,
                   })}
+                  data-testid="eth-overview__secondary-currency"
                   value={balance}
                   type={SECONDARY}
                   ethNumberOfDecimals={4}