- added en locale translation

- dropdown css will now adjust to shorter heights (max-height: 220px)
- added option to select primary currency in settings (issue MetaMask#4510)

app/_locales/en/messages.json

@@ -910,6 +910,12 @@
   "orderOneHere": {
     "message": "Order a Trezor or Ledger and keep your funds in cold storage"
   },
+  "primaryCurrency":{
+    "message": "Primary Currency"
+  },
+  "primaryCurrencyDescription":{
+    "message": "Primary Currency for Confirmation Screen"
+  },
   "searchTokens": {
     "message": "Search Tokens"
   },

app/scripts/controllers/preferences.js

@@ -18,6 +18,7 @@ class PreferencesController {
    * @property {object} store.featureFlags A key-boolean map, where keys refer to features and booleans to whether the
    * user wishes to see that feature
    * @property {string} store.currentLocale The preferred language locale key
+   * @property {string} store.primaryCurrency The preferred currency for the confirmation screen
    * @property {string} store.selectedAddress A hex string that matches the currently selected address in the app
    *
    */
@@ -30,6 +31,7 @@ class PreferencesController {
       useBlockie: false,
       featureFlags: {},
       currentLocale: opts.initLangCode,
+      primaryCurrency: "eth",
       identities: {},
       lostIdentities: {},
     }, opts.initState)
@@ -71,6 +73,16 @@ class PreferencesController {
     this.store.updateState({ currentLocale: key })
   }
 
+  /**
+   * Setter for the `primaryCurrency` property
+   *
+   * @param {string} key - preferred currency key
+   *
+   */
+  setPrimaryCurrency (key) {
+    this.store.updateState({ primaryCurrency: key })
+  }
+
   /**
    * Updates identities to only include specified addresses. Removes identities
    * not included in addresses array

app/scripts/metamask-controller.js

@@ -350,6 +350,7 @@ module.exports = class MetamaskController extends EventEmitter {
       setCurrentCurrency: this.setCurrentCurrency.bind(this),
       setUseBlockie: this.setUseBlockie.bind(this),
       setCurrentLocale: this.setCurrentLocale.bind(this),
+      setPrimaryCurrency: this.setPrimaryCurrency.bind(this),
       markAccountsFound: this.markAccountsFound.bind(this),
       markPasswordForgotten: this.markPasswordForgotten.bind(this),
       unMarkPasswordForgotten: this.unMarkPasswordForgotten.bind(this),
@@ -1446,6 +1447,20 @@ module.exports = class MetamaskController extends EventEmitter {
     }
   }
 
+  /**
+   * A method for setting a user's preferred currency, affecting the confirmation screen.
+   * @param {string} key - Currency identifier.
+   * @param {Function} cb - A callback function called when complete.
+   */
+  setPrimaryCurrency (key, cb) {
+    try {
+      this.preferencesController.setPrimaryCurrency(key)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
   /**
    * A method for initializing storage the first time.
    * @param {Object} initState - The default state to initialize with.

ui/app/actions.js

@@ -295,6 +295,10 @@ var actions = {
   updateCurrentLocale,
   setLocaleMessages,
   //
+  // primary currency
+  //
+  SET_PRIMARY_CURRENCY: 'SET_PRIMARY_CURRENCY',
+  setPrimaryCurrency,
   // Feature Flags
   setFeatureFlag,
   updateFeatureFlags,
@@ -773,6 +777,26 @@ function setCurrentCurrency (currencyCode) {
   }
 }
 
+function setPrimaryCurrency (primaryCurrency) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setPrimaryCurrency`)
+    background.setPrimaryCurrency(primaryCurrency, (err, data) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        log.error(err.stack)
+        return dispatch(actions.displayWarning(err.message))
+      }
+      dispatch({
+        type: actions.SET_PRIMARY_CURRENCY,
+        value: {
+          primaryCurrency: primaryCurrency
+        }
+      })
+    })
+  }
+}
+
 function signMsg (msgData) {
   log.debug('action - signMsg')
   return (dispatch, getState) => {

ui/app/app.js

@@ -359,6 +359,7 @@ function mapStateToProps (state) {
     lostAccounts,
     frequentRpcList: state.metamask.frequentRpcList || [],
     currentCurrency: state.metamask.currentCurrency,
+    primaryCurrency: state.metamask.primaryCurrency,
     isMouseUser: state.appState.isMouseUser,
     betaUI: state.metamask.featureFlags.betaUI,
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,

ui/app/components/pages/settings/info.js

@@ -104,6 +104,7 @@ Info.propTypes = {
   tab: PropTypes.string,
   metamask: PropTypes.object,
   setCurrentCurrency: PropTypes.func,
+  setPrimaryCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,

ui/app/components/pages/settings/settings.js

@@ -66,6 +66,30 @@ class Settings extends Component {
     ])
   }
 
+  renderPrimaryCurrency () {
+    const { metamask: { primaryCurrency }, setPrimaryCurrency } = this.props
+    const primaryCurrencyOptions = [
+      {displayValue: "ETH", key: "eth", value: "eth"},
+      {displayValue: "Converted Fiat", key: "converted", value: "converted"}
+    ]
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', this.context.t('primaryCurrency')),
+        h('span.settings__content-description', this.context.t('primaryCurrencyDescription')),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(SimpleDropdown, {
+            placeholder: 'Select Primary Currency',
+            options: primaryCurrencyOptions,
+            selectedOption: primaryCurrency || "eth",
+            onSelect: newPrimaryCurrency => setPrimaryCurrency(newPrimaryCurrency)
+          }),
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentConversion () {
     const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
 
@@ -299,6 +323,7 @@ class Settings extends Component {
       h('div.settings__content', [
         warning && h('div.settings__error', warning),
         this.renderCurrentConversion(),
+        this.renderPrimaryCurrency(),
         this.renderCurrentLocale(),
         // this.renderCurrentProvider(),
         this.renderNewRpcUrl(),
@@ -316,6 +341,7 @@ Settings.propTypes = {
   metamask: PropTypes.object,
   setUseBlockie: PropTypes.func,
   setCurrentCurrency: PropTypes.func,
+  setPrimaryCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
@@ -340,6 +366,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    setPrimaryCurrency: primaryCurrency => dispatch(actions.setPrimaryCurrency(primaryCurrency)),
     setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
     setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
     displayWarning: warning => dispatch(actions.displayWarning(warning)),

ui/app/css/itcss/components/simple-dropdown.scss

@@ -25,7 +25,7 @@
 .simple-dropdown__options {
   z-index: 1050;
   position: absolute;
-  height: 220px;
+  max-height: 220px;
   width: 100%;
   border: 1px solid #d2d8dd;
   border-radius: 4px;

ui/app/reducers/metamask.js

@@ -24,6 +24,7 @@ function reduceMetamask (state, action) {
     nextUnreadNotice: undefined,
     frequentRpcList: [],
     addressBook: [],
+    primaryCurrency: "eth",
     selectedTokenAddress: null,
     contractExchangeRates: {},
     tokenExchangeRates: {},
@@ -179,6 +180,11 @@ function reduceMetamask (state, action) {
         conversionDate: action.value.conversionDate,
       })
 
+    case actions.SET_PRIMARY_CURRENCY:
+      return extend(metamaskState, {
+        primaryCurrency: action.value.primaryCurrency
+      })  
+
     case actions.UPDATE_TOKENS:
       return extend(metamaskState, {
         tokens: action.newTokens,