toggle wired up to preferences property store

app/scripts/controllers/preferences.js

@@ -14,8 +14,8 @@ class PreferencesController {
   }
 // PUBLIC METHODS
 
-  toggleUseBlockie () {
-    this.store.updateState({ useBlockie: !this.useBlockie() })
+  setUseBlockie (val) {
+    this.store.updateState({ useBlockie: val })
   }
 
   getUseBlockie () {

app/scripts/metamask-controller.js

@@ -315,6 +315,7 @@ module.exports = class MetamaskController extends EventEmitter {
       // etc
       getState: (cb) => cb(null, this.getState()),
       setCurrentCurrency: this.setCurrentCurrency.bind(this),
+      setUseBlockie: this.setUseBlockie.bind(this),
       markAccountsFound: this.markAccountsFound.bind(this),
 
       // coinbase
@@ -774,4 +775,13 @@ module.exports = class MetamaskController extends EventEmitter {
     return rpcTarget
   }
 
+  setUseBlockie(val, cb) {
+    try {
+      this.preferencesController.setUseBlockie(val)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
 }

package.json

@@ -52,11 +52,11 @@
     ]
   },
   "dependencies": {
-    "abi-decoder": "^1.0.8",
+    "abi-decoder": "^1.0.9",
     "async": "^2.5.0",
     "await-semaphore": "^0.1.1",
     "babel-runtime": "^6.23.0",
-    "bignumber.js": "^4.0.4",
+    "bignumber.js": "^4.1.0",
     "bip39": "^2.2.0",
     "blockies": "0.0.2",
     "bluebird": "^3.5.0",
@@ -101,7 +101,7 @@
     "extensionizer": "^1.0.0",
     "fast-json-patch": "^2.0.4",
     "fast-levenshtein": "^2.0.6",
-    "fuse.js": "^3.1.0",
+    "fuse.js": "^3.2.0",
     "gulp-autoprefixer": "^4.0.0",
     "gulp-eslint": "^4.0.0",
     "gulp-sass": "^3.1.0",
@@ -147,9 +147,10 @@
     "react-select": "^1.0.0",
     "react-simple-file-input": "^2.0.0",
     "react-toggle": "^4.0.2",
+    "react-toggle-button": "^2.2.0",
     "react-toggle-switch": "^3.0.3",
     "react-tooltip-component": "^0.3.0",
-    "react-transition-group": "^2.2.0",
+    "react-transition-group": "^2.2.1",
     "react-trigger-change": "^1.0.2",
     "reactify": "^1.1.1",
     "readable-stream": "^2.3.3",

ui/app/actions.js

@@ -235,8 +235,8 @@ var actions = {
 
   useEtherscanProvider,
 
-  TOGGLE_USE_BLOCKIE: 'TOGGLE_USE_BLOCKIE',
-  toggleUseBlockie,
+  SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
+  setUseBlockie,
 }
 
 module.exports = actions
@@ -1554,8 +1554,19 @@ function toggleAccountMenu () {
   }
 }
 
-function toggleUseBlockie () {
-  return {
-    type: actions.TOGGLE_USE_BLOCKIE,
+function setUseBlockie (val) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setUseBlockie`)
+    background.setUseBlockie(val, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+    dispatch({
+      type: actions.SET_USE_BLOCKIE,
+      value: val
+    })
   }
 }

ui/app/reducers/metamask.js

@@ -315,10 +315,10 @@ function reduceMetamask (state, action) {
         coinOptions,
       })
 
-    case actions.TOGGLE_USE_BLOCKIE:
-      return extend(metamaskState, {
-        useBlockie: !metamaskState.useBlockie,
-      })
+    case actions.SET_USE_BLOCKIE:
+          return extend(metamaskState, {
+            useBlockie: action.value
+          })
 
     default:
       return metamaskState

ui/app/settings.js

@@ -8,7 +8,7 @@ const validUrl = require('valid-url')
 const { exportAsFile } = require('./util')
 const TabBar = require('./components/tab-bar')
 const SimpleDropdown = require('./components/dropdowns/simple-dropdown')
-import Switch from 'react-toggle-switch'
+const ToggleButton = require('react-toggle-button')
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -53,7 +53,7 @@ class Settings extends Component {
   }
 
   renderBlockieOptIn () {
-    const { metamask: { useBlockie }, toggleUseBlockie } = this.props
+    const { metamask: { useBlockie }, setUseBlockie } = this.props
 
     return h('div.settings__content-row', [
       h('div.settings__content-item', [
@@ -61,12 +61,12 @@ class Settings extends Component {
       ]),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
-
-          h(Switch, {
-            on: useBlockie,
-            onClick: event => toggleUseBlockie(),
+          h(ToggleButton, {
+            value: useBlockie,
+            onToggle: (value) => setUseBlockie(!value),
+            activeLabel: '',
+            inactiveLabel: '',
           }),
-
         ]),
       ]),
     ])
@@ -357,7 +357,7 @@ class Settings extends Component {
 Settings.propTypes = {
   tab: PropTypes.string,
   metamask: PropTypes.object,
-  useBlockie: PropTypes.bool,
+  setUseBlockie: PropTypes.func,
   setCurrentCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
@@ -370,7 +370,6 @@ const mapStateToProps = state => {
   return {
     metamask: state.metamask,
     warning: state.appState.warning,
-    useBlockie: state.useBlockie,
   }
 }
 
@@ -381,7 +380,7 @@ const mapDispatchToProps = dispatch => {
     setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
-    toggleUseBlockie: () => dispatch(actions.toggleUseBlockie()),
+    setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
   }
 }