ui: useMultiChain option added to toggle multichain in the dropdown-menu

app/_locales/en/messages.json

@@ -1147,6 +1147,10 @@
   "usedByClients": {
     "message": "Used by a variety of different clients"
   },
+  "useMultiChainMenu": {
+    "message": "Use MultiChain menu",
+    "description": "show available MultiChains in the dropdown menu"
+  },
   "useOldUI": {
     "message": "Use old UI"
   },

app/scripts/controllers/preferences.js

@@ -61,6 +61,27 @@ class PreferencesController {
     return this.store.getState().useBlockie
   }
 
+  /**
+   * Setter for the `useMultiChain` property
+   *
+   * @param {boolean} val Whether or not the user prefers multichain menu
+   *
+   */
+  setUseMultiChain (val) {
+    this.store.updateState({ useMultiChain: val })
+  }
+
+  /**
+   * Getter for the `useMultiChain` property
+   *
+   * @returns {boolean} this.store.useMultiChain
+   *
+   */
+  getUseMultiChain () {
+    return this.store.getState().useMultiChain
+  }
+
+
   /**
    * Setter for the `currentLocale` property
    *

app/scripts/metamask-controller.js

@@ -351,6 +351,7 @@ module.exports = class MetamaskController extends EventEmitter {
       getState: (cb) => cb(null, this.getState()),
       setCurrentCurrency: this.setCurrentCurrency.bind(this),
       setUseBlockie: this.setUseBlockie.bind(this),
+      setUseMultiChain: this.setUseMultiChain.bind(this),
       setCurrentLocale: this.setCurrentLocale.bind(this),
       markAccountsFound: this.markAccountsFound.bind(this),
       markPasswordForgotten: this.markPasswordForgotten.bind(this),
@@ -1438,6 +1439,20 @@ module.exports = class MetamaskController extends EventEmitter {
     }
   }
 
+  /**
+   * Sets whether or not to use the multichain dropdown-menu.
+   * @param {boolean} val - True to show multichains, false to disable multichain menu.
+   * @param {Function} cb - A callback function called when complete.
+   */
+  setUseMultiChain (val, cb) {
+    try {
+      this.preferencesController.setUseMultiChain(val)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
   /**
    * A method for setting a user's current locale, affecting the language rendered.
    * @param {string} key - Locale identifier.

old-ui/app/components/app-bar.js

@@ -26,6 +26,7 @@ module.exports = class AppBar extends Component {
     network: PropTypes.any.isRequired,
     keyrings: PropTypes.any.isRequired,
     provider: PropTypes.any.isRequired,
+    useMultiChain: PropTypes.bool.isRequired,
   }
 
   static renderSpace () {
@@ -206,7 +207,7 @@ module.exports = class AppBar extends Component {
     } = provider
     const isOpen = this.state.isNetworkMenuOpen
 
-    const showMultiChain = useMultiChain ? 'flex' : 'none';
+    const showMultiChain = useMultiChain ? 'flex' : 'none'
 
     return h(Dropdown, {
       useCssTransition: true,

ui/app/actions.js

@@ -288,6 +288,9 @@ var actions = {
   SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
   setUseBlockie,
 
+  SET_USE_MULTICHAIN: 'SET_USE_MULTICHAIN',
+  setUseMultiChain,
+
   // locale
   SET_CURRENT_LOCALE: 'SET_CURRENT_LOCALE',
   SET_LOCALE_MESSAGES: 'SET_LOCALE_MESSAGES',
@@ -2268,6 +2271,23 @@ function setUseBlockie (val) {
   }
 }
 
+function setUseMultiChain (val) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setUseMultiChain`)
+    background.setUseMultiChain(val, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+    dispatch({
+      type: actions.SET_USE_MULTICHAIN,
+      value: val,
+    })
+  }
+}
+
 function updateCurrentLocale (key) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())

ui/app/components/dropdowns/network-dropdown.js

@@ -24,6 +24,7 @@ const notToggleElementClassnames = [
 function mapStateToProps (state) {
   return {
     provider: state.metamask.provider,
+    multichain: state.metamask.useMultiChain,
     frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     networkDropdownOpen: state.appState.networkDropdownOpen,
     network: state.metamask.network,
@@ -77,6 +78,13 @@ NetworkDropdown.prototype.render = function () {
     padding: '12px 0',
   }
 
+  const dropdownMenuItemMultiChainStyle = {
+    fontSize: '16px',
+    lineHeight: '20px',
+    padding: '12px 0',
+    display: props.multichain ? 'flex' : 'none',
+  }
+
   return h(Dropdown, {
     isOpen,
     onClickOutside: (event) => {
@@ -206,7 +214,7 @@ NetworkDropdown.prototype.render = function () {
         key: 'classic',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('classic'),
-        style: dropdownMenuItemStyle,
+        style: dropdownMenuItemMultiChainStyle,
       },
       [
         providerType === 'classic' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),

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

@@ -66,6 +66,26 @@ class Settings extends Component {
     ])
   }
 
+  renderMultiChainOptIn () {
+    const { metamask: { useMultiChain }, setUseMultiChain } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', this.context.t('useMultiChainMenu')),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(ToggleButton, {
+            value: useMultiChain,
+            onToggle: (value) => setUseMultiChain(!value),
+            activeLabel: '',
+            inactiveLabel: '',
+          }),
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentConversion () {
     const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
 
@@ -320,6 +340,7 @@ class Settings extends Component {
         this.renderCurrentConversion(),
         this.renderCurrentLocale(),
         // this.renderCurrentProvider(),
+        this.renderMultiChainOptIn(),
         this.renderNewRpcUrl(),
         this.renderStateLogs(),
         this.renderSeedWords(),
@@ -336,6 +357,7 @@ Settings.propTypes = {
   setUseBlockie: PropTypes.func,
   setCurrentCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
+  setUseMultiChain: PropTypes.func,
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
   setFeatureFlagToBeta: PropTypes.func,
@@ -364,6 +386,7 @@ const mapDispatchToProps = dispatch => {
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
     setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+    setUseMultiChain: value => dispatch(actions.setUseMultiChain(value)),
     updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
     setFeatureFlagToBeta: () => {
       return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))

ui/app/reducers/metamask.js

@@ -46,6 +46,7 @@ function reduceMetamask (state, action) {
     },
     coinOptions: {},
     useBlockie: false,
+    useMultiChain: false,
     featureFlags: {},
     networkEndpointType: OLD_UI_NETWORK_TYPE,
     isRevealingSeedWords: false,
@@ -334,6 +335,11 @@ function reduceMetamask (state, action) {
             useBlockie: action.value,
           })
 
+    case actions.SET_USE_MULTICHAIN:
+      return extend(metamaskState, {
+        useMultiChain: action.value,
+      })
+
     case actions.UPDATE_FEATURE_FLAGS:
       return extend(metamaskState, {
         featureFlags: action.value,