incremental commit

.gitignore

@@ -6,6 +6,8 @@ app/bower_components
 test/bower_components
 package
 
+.idea
+
 temp
 .tmp
 .sass-cache

app/scripts/controllers/preferences.js

@@ -14,6 +14,14 @@ class PreferencesController {
   }
 // PUBLIC METHODS
 
+  toggleUseBlockie () {
+    this.store.updateState({ useBlockie: !this.useBlockie() })
+  }
+
+  getUseBlockie () {
+    return this.store.getState().useBlockie
+  }
+
   setSelectedAddress (_address) {
     return new Promise((resolve, reject) => {
       const address = normalizeAddress(_address)

package.json

@@ -58,6 +58,7 @@
     "babel-runtime": "^6.23.0",
     "bignumber.js": "^4.0.4",
     "bip39": "^2.2.0",
+    "blockies": "0.0.2",
     "bluebird": "^3.5.0",
     "bn.js": "^4.11.7",
     "boron": "^0.2.3",
@@ -77,8 +78,8 @@
     "eslint-plugin-react": "^7.4.0",
     "eth-bin-to-ops": "^1.0.1",
     "eth-block-tracker": "^2.2.0",
-    "eth-hd-keyring": "^1.2.1",
     "eth-contract-metadata": "^1.1.5",
+    "eth-hd-keyring": "^1.2.1",
     "eth-json-rpc-filters": "^1.2.4",
     "eth-keyring-controller": "^2.1.2",
     "eth-phishing-detect": "^1.1.4",
@@ -101,7 +102,6 @@
     "fast-json-patch": "^2.0.4",
     "fast-levenshtein": "^2.0.6",
     "fuse.js": "^3.1.0",
-    "gulp": "github:gulpjs/gulp#4.0",
     "gulp-autoprefixer": "^4.0.0",
     "gulp-eslint": "^4.0.0",
     "gulp-sass": "^3.1.0",
@@ -144,12 +144,14 @@
     "react-hyperscript": "^3.0.0",
     "react-markdown": "^2.3.0",
     "react-redux": "^5.0.5",
-    "react-select": "^1.0.0-rc.2",
+    "react-select": "^1.0.0",
     "react-simple-file-input": "^2.0.0",
+    "react-toggle": "^4.0.2",
+    "react-toggle-switch": "^3.0.3",
     "react-tooltip-component": "^0.3.0",
     "react-transition-group": "^2.2.0",
-    "reactify": "^1.1.1",
     "react-trigger-change": "^1.0.2",
+    "reactify": "^1.1.1",
     "readable-stream": "^2.3.3",
     "recompose": "^0.25.0",
     "redux": "^3.0.5",

ui/app/actions.js

@@ -234,6 +234,9 @@ var actions = {
   toggleAccountMenu,
 
   useEtherscanProvider,
+
+  TOGGLE_USE_BLOCKIE: 'TOGGLE_USE_BLOCKIE',
+  toggleUseBlockie,
 }
 
 module.exports = actions
@@ -1550,3 +1553,9 @@ function toggleAccountMenu () {
     type: actions.TOGGLE_ACCOUNT_MENU,
   }
 }
+
+function toggleUseBlockie () {
+  return {
+    type: actions.TOGGLE_USE_BLOCKIE,
+  }
+}

ui/app/components/identicon.js

@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
+const blockies = require('blockies')
 const iconFactoryGen = require('../../lib/icon-factory')
 const iconFactory = iconFactoryGen(jazzicon)
 
@@ -18,7 +19,7 @@ function IdenticonComponent () {
 
 IdenticonComponent.prototype.render = function () {
   var props = this.props
-  const { className = '', address } = props
+  const { className = '', address, useBlockie } = props
   var diameter = props.diameter || this.defaultDiameter
 
   return address

ui/app/reducers/metamask.js

@@ -36,6 +36,7 @@ function reduceMetamask (state, action) {
       editingTransactionId: null,
     },
     coinOptions: {},
+    useBlockie: false,
   }, state.metamask)
 
   switch (action.type) {
@@ -314,6 +315,11 @@ function reduceMetamask (state, action) {
         coinOptions,
       })
 
+    case actions.TOGGLE_USE_BLOCKIE:
+      return extend(metamaskState, {
+        useBlockie: !metamaskState.useBlockie,
+      })
+
     default:
       return metamaskState
 

ui/app/settings.js

@@ -8,6 +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 getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -51,6 +52,26 @@ class Settings extends Component {
     ])
   }
 
+  renderBlockieOptIn () {
+    const { metamask: { useBlockie }, toggleUseBlockie } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Use Blockie Identicon'),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+
+          h(Switch, {
+            on: useBlockie,
+            onClick: event => toggleUseBlockie(),
+          }),
+
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentConversion () {
     const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
 
@@ -214,6 +235,7 @@ class Settings extends Component {
     return (
       h('div.settings__content', [
         warning && h('div.settings__error', warning),
+        this.renderBlockieOptIn(),
         this.renderCurrentConversion(),
         // this.renderCurrentProvider(),
         this.renderNewRpcUrl(),
@@ -335,6 +357,7 @@ class Settings extends Component {
 Settings.propTypes = {
   tab: PropTypes.string,
   metamask: PropTypes.object,
+  useBlockie: PropTypes.bool,
   setCurrentCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
@@ -347,6 +370,7 @@ const mapStateToProps = state => {
   return {
     metamask: state.metamask,
     warning: state.appState.warning,
+    useBlockie: state.useBlockie,
   }
 }
 
@@ -357,6 +381,7 @@ const mapDispatchToProps = dispatch => {
     setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
+    toggleUseBlockie: () => dispatch(actions.toggleUseBlockie()),
   }
 }