Merge pull request #4490 from MetaMask/v4.7.3

Version 4.7.3

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Current Master
 
+## 4.7.3 Mon Jun 04 2018
+
+- Hide token now uses new modal
+- Indicate the current selected account on the popup account view
+- Reduce height of notice container in onboarding
+- Fixes issue where old nicknames were kept around causing errors
+
 ## 4.7.2 Sun Jun 03 2018
 
 - Fix bug preventing users from logging in. Internally accounts and identities were out of sync.

app/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_appName__",
   "short_name": "__MSG_appName__",
-  "version": "4.7.2",
+  "version": "4.7.3",
   "manifest_version": 2,
   "author": "https://metamask.io",
   "description": "__MSG_appDescription__",

app/scripts/controllers/preferences.js

@@ -1,6 +1,9 @@
 const ObservableStore = require('obs-store')
 const normalizeAddress = require('eth-sig-util').normalize
 const extend = require('xtend')
+const notifier = require('../lib/bug-notifier')
+const log = require('loglevel')
+const { version } = require('../../manifest.json')
 
 class PreferencesController {
 
@@ -28,7 +31,12 @@ class PreferencesController {
       featureFlags: {},
       currentLocale: opts.initLangCode,
       identities: {},
+      lostIdentities: {},
     }, opts.initState)
+
+    this.getFirstTimeInfo = opts.getFirstTimeInfo || null
+    this.notifier = opts.notifier || notifier
+
     this.store = new ObservableStore(initState)
   }
 // PUBLIC METHODS
@@ -98,6 +106,58 @@ class PreferencesController {
     this.store.updateState({ identities })
   }
 
+  /*
+   * Synchronizes identity entries with known accounts.
+   * Removes any unknown identities, and returns the resulting selected address.
+   *
+   * @param {Array<string>} addresses known to the vault.
+   * @returns {Promise<string>} selectedAddress the selected address.
+   */
+  syncAddresses (addresses) {
+    let { identities, lostIdentities } = this.store.getState()
+
+    let newlyLost = {}
+    Object.keys(identities).forEach((identity) => {
+      if (!addresses.includes(identity)) {
+        newlyLost[identity] = identities[identity]
+        delete identities[identity]
+      }
+    })
+
+    // Identities are no longer present.
+    if (Object.keys(newlyLost).length > 0) {
+
+      // Notify our servers:
+      const uri = 'https://diagnostics.metamask.io/v1/orphanedAccounts'
+      const firstTimeInfo = this.getFirstTimeInfo ? this.getFirstTimeInfo() : {}
+      this.notifier.notify(uri, {
+        accounts: Object.keys(newlyLost),
+        metadata: {
+          version,
+          firstTimeInfo,
+        },
+      })
+      .catch(log.error)
+
+      for (let key in newlyLost) {
+        lostIdentities[key] = newlyLost[key]
+      }
+    }
+
+    this.store.updateState({ identities, lostIdentities })
+    this.addAddresses(addresses)
+
+    // If the selected account is no longer valid,
+    // select an arbitrary other account:
+    let selected = this.getSelectedAddress()
+    if (!addresses.includes(selected)) {
+      selected = addresses[0]
+      this.setSelectedAddress(selected)
+    }
+
+    return selected
+  }
+
   /**
    * Setter for the `selectedAddress` property
    *

app/scripts/lib/bug-notifier.js

@@ -0,0 +1,22 @@
+class BugNotifier {
+  notify (uri, message) {
+    return postData(uri, message)
+  }
+}
+
+function postData(uri, data) {
+  return fetch(uri, {
+    body: JSON.stringify(data), // must match 'Content-Type' header
+    credentials: 'same-origin', // include, same-origin, *omit
+    headers: {
+      'content-type': 'application/json',
+    },
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, cors, *same-origin
+  })
+}
+
+const notifier = new BugNotifier()
+
+module.exports = notifier
+

app/scripts/metamask-controller.js

@@ -85,6 +85,7 @@ module.exports = class MetamaskController extends EventEmitter {
     this.preferencesController = new PreferencesController({
       initState: initState.PreferencesController,
       initLangCode: opts.initLangCode,
+      getFirstTimeInfo: () => initState.firstTimeInfo,
     })
 
     // currency controller
@@ -356,7 +357,7 @@ module.exports = class MetamaskController extends EventEmitter {
       importAccountWithStrategy: nodeify(this.importAccountWithStrategy, this),
 
       // vault management
-      submitPassword: nodeify(keyringController.submitPassword, keyringController),
+      submitPassword: nodeify(this.submitPassword, this),
 
       // network management
       setProviderType: nodeify(networkController.setProviderType, networkController),
@@ -474,6 +475,22 @@ module.exports = class MetamaskController extends EventEmitter {
     }
   }
 
+  /*
+   * Submits the user's password and attempts to unlock the vault.
+   * Also synchronizes the preferencesController, to ensure its schema
+   * is up to date with known accounts once the vault is decrypted.
+   *
+   * @param {string} password - The user's password
+   * @returns {Promise<object>} - The keyringController update.
+   */
+  async submitPassword (password) {
+    await this.keyringController.submitPassword(password)
+    const accounts = await this.keyringController.getAccounts()
+
+    await this.preferencesController.syncAddresses(accounts)
+    return this.keyringController.fullUpdate()
+  }
+
   /**
    * @type Identity
    * @property {string} name - The account nickname.

mascara/src/app/first-time/index.css

@@ -123,10 +123,6 @@
     width: calc(100vw - 80px);
   }
 
-  .unique-image {
-    width: auto;
-  }
-
   .create-password__title,
   .unique-image__title,
   .tou__title,
@@ -148,7 +144,7 @@
     height: 100%;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: flex-start;
     margin-top: 12px;
   }
 
@@ -181,7 +177,6 @@
     margin: 0 !important;
     padding: 16px 20px !important;
     height: 30vh !important;
-    width: calc(100% - 48px) !important;
   }
 
   .backup-phrase__content-wrapper {
@@ -280,6 +275,12 @@
   width: 335px;
 }
 
+@media only screen and (max-width: 575px) {
+  .unique-image__body-text {
+    width: initial;
+  }
+}
+
 .unique-image__body-text +
 .unique-image__body-text,
 .backup-phrase__body-text +
@@ -294,7 +295,7 @@
   border-radius: 8px;
   background-color: #FFFFFF;
   margin: 0 142px 0 0;
-  height: 334px;
+  height: 200px;
   overflow-y: auto;
   color: #757575;
   font-family: Roboto;
@@ -679,7 +680,7 @@ button.backup-phrase__confirm-seed-option:hover {
 }
 
 .first-time-flow__input {
-  width: 350px;
+  max-width: 350px;
 }
 
 .first-time-flow__button {

test/unit/app/controllers/metamask-controller-test.js

@@ -45,7 +45,7 @@ describe('MetaMaskController', function () {
       encryptor: {
         encrypt: function (password, object) {
           this.object = object
-          return Promise.resolve()
+          return Promise.resolve('mock-encrypted')
         },
         decrypt: function () {
           return Promise.resolve(this.object)
@@ -62,6 +62,36 @@ describe('MetaMaskController', function () {
     sandbox.restore()
   })
 
+  describe('submitPassword', function () {
+    const password = 'password'
+
+    beforeEach(async function () {
+      await metamaskController.createNewVaultAndKeychain(password)
+    })
+
+    it('removes any identities that do not correspond to known accounts.', async function () {
+      const fakeAddress = '0xbad0'
+      metamaskController.preferencesController.addAddresses([fakeAddress])
+      metamaskController.preferencesController.notifier = {
+        notify: async () => {
+          return true
+        },
+      }
+      await metamaskController.submitPassword(password)
+
+      const identities = Object.keys(metamaskController.preferencesController.store.getState().identities)
+      const addresses = await metamaskController.keyringController.getAccounts()
+
+      identities.forEach((identity) => {
+        assert.ok(addresses.includes(identity), `addresses should include all IDs: ${identity}`)
+      })
+
+      addresses.forEach((address) => {
+        assert.ok(identities.includes(address), `identities should include all Addresses: ${address}`)
+      })
+    })
+  })
+
   describe('#getGasPrice', function () {
 
     it('gives the 50th percentile lowest accepted gas price from recentBlocksController', async function () {

ui/app/components/index.scss

@@ -1,5 +1,7 @@
 @import './export-text-container/index';
 
+@import './selected-account/index';
+
 @import './info-box/index';
 
 @import './pages/index';

ui/app/components/modals/edit-account-name-modal.js

@@ -9,7 +9,7 @@ const { getSelectedAccount } = require('../../selectors')
 function mapStateToProps (state) {
   return {
     selectedAccount: getSelectedAccount(state),
-    identity: state.appState.modal.modalState.identity,
+    identity: state.appState.modal.modalState.props.identity,
   }
 }
 

ui/app/components/modals/hide-token-confirmation-modal.js

@@ -9,7 +9,7 @@ const Identicon = require('../identicon')
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
-    token: state.appState.modal.modalState.token,
+    token: state.appState.modal.modalState.props.token,
   }
 }
 

ui/app/components/modals/shapeshift-deposit-tx-modal.js

@@ -8,7 +8,7 @@ const AccountModalContainer = require('./account-modal-container')
 
 function mapStateToProps (state) {
   return {
-    Qr: state.appState.modal.modalState.Qr,
+    Qr: state.appState.modal.modalState.props.Qr,
   }
 }
 

ui/app/components/selected-account/index.js

@@ -0,0 +1,2 @@
+import SelectedAccount from './selected-account.container'
+module.exports = SelectedAccount

ui/app/components/selected-account/index.scss

@@ -0,0 +1,38 @@
+.selected-account {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+
+  &__name {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  &__address {
+    font-size: .75rem;
+    color: $silver-chalice;
+  }
+
+  &__clickable {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 15px;
+    border-radius: 10px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #e8e6e8;
+    }
+
+    &:active {
+      background-color: #d9d7da;
+    }
+  }
+}

ui/app/components/selected-account/selected-account.component.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import copyToClipboard from 'copy-to-clipboard'
+
+const Tooltip = require('../tooltip-v2.js')
+
+const addressStripper = (address = '') => {
+  if (address.length < 4) {
+    return address
+  }
+
+  return `${address.slice(0, 4)}...${address.slice(-4)}`
+}
+
+class SelectedAccount extends Component {
+  state = {
+    copied: false,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    selectedAddress: PropTypes.string,
+    selectedIdentity: PropTypes.object,
+  }
+
+  render () {
+    const { t } = this.context
+    const { selectedAddress, selectedIdentity } = this.props
+
+    return (
+      <div className="selected-account">
+        <Tooltip
+          position="bottom"
+          title={this.state.copied ? t('copiedExclamation') : t('copyToClipboard')}
+        >
+          <div
+            className="selected-account__clickable"
+            onClick={() => {
+              this.setState({ copied: true })
+              setTimeout(() => this.setState({ copied: false }), 3000)
+              copyToClipboard(selectedAddress)
+            }}
+          >
+            <div className="selected-account__name">
+              { selectedIdentity.name }
+            </div>
+            <div className="selected-account__address">
+              { addressStripper(selectedAddress) }
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+}
+
+export default SelectedAccount

ui/app/components/selected-account/selected-account.container.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import SelectedAccount from './selected-account.component'
+
+const selectors = require('../../selectors')
+
+const mapStateToProps = state => {
+  return {
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+  }
+}
+
+export default connect(mapStateToProps)(SelectedAccount)

ui/app/components/token-cell.js

@@ -101,8 +101,8 @@ TokenCell.prototype.render = function () {
 
       h('div.token-list-item__balance-ellipsis', null, [
         h('div.token-list-item__balance-wrapper', null, [
-          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
-
+          h('div.token-list-item__token-balance', `${string || 0}`),
+          h('div.token-list-item__token-symbol', symbol),
           showFiat && h('div.token-list-item__fiat-amount', {
             style: {},
           }, formattedFiat),

ui/app/components/tx-view.js

@@ -12,7 +12,7 @@ const { checksumAddress: toChecksumAddress } = require('../util')
 
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
-const Identicon = require('./identicon')
+const SelectedAccount = require('./selected-account')
 
 module.exports = compose(
   withRouter,
@@ -103,7 +103,7 @@ TxView.prototype.renderButtons = function () {
 }
 
 TxView.prototype.render = function () {
-  const { selectedAddress, identity, network, isMascara } = this.props
+  const { isMascara } = this.props
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -111,10 +111,12 @@ TxView.prototype.render = function () {
 
     h('div.flex-row.phone-visible', {
       style: {
-        justifyContent: 'space-between',
+        justifyContent: 'center',
         alignItems: 'center',
         flex: '0 0 auto',
-        margin: '10px',
+        marginBottom: '16px',
+        padding: '5px',
+        borderBottom: '1px solid #e5e5e5',
       },
     }, [
 
@@ -127,23 +129,7 @@ TxView.prototype.render = function () {
         onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
       }),
 
-      h('.identicon-wrapper.select-none', {
-        style: {
-          marginLeft: '0.9em',
-        },
-      }, [
-        h(Identicon, {
-          diameter: 24,
-          address: selectedAddress,
-          network,
-        }),
-      ]),
-
-      h('span.account-name', {
-        style: {},
-      }, [
-        identity.name,
-      ]),
+      h(SelectedAccount),
 
       !isMascara && h('div.open-in-browser', {
         onClick: () => global.platform.openExtensionInBrowser(),

ui/app/css/itcss/components/account-menu.scss

@@ -116,6 +116,10 @@
   &__name {
     color: $white;
     font-size: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 200px;
   }
 
   &__balance {

ui/app/css/itcss/components/hero-balance.scss

@@ -6,6 +6,7 @@
     justify-content: flex-start;
     align-items: center;
     flex: 0 0 auto;
+    padding-top: 16px;
   }
 
   @media screen and (min-width: $break-large) {

ui/app/css/itcss/components/token-list.scss

@@ -14,10 +14,17 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   min-width: 0;
 
   &__token-balance {
-    font-size: 1.5rem;
+    margin-right: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &__token-balance, &__token-symbol {
+    font-size: 1.5rem;
+    flex: 0 0 auto;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
@@ -66,7 +73,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   }
 
   &__balance-wrapper {
-    flex: 1 1 auto;
+    flex: 1;
+    flex-flow: row wrap;
+    display: flex;
     min-width: 0;
   }
 }