Merge remote-tracking branch 'upstream/develop' into develop

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## Current Master
 
+- 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.
+- Fix support links to point to new support system (Zendesk)
+- Fix bug in migration #26 ( moving account nicknames to preferences )
+- Clears account nicknames on restore from seedPhrase
+
+## 4.7.1 Fri Jun 01 2018
+
+- Fix bug where errors were not returned to Dapps.
+
+## 4.7.0 Wed May 30 2018
+
+- Fix Brave support
 - Adds error messages when passwords don't match in onboarding flow.
 - Adds modal notification if a retry in the process of being confirmed is dropped.
 - New unlock screen design.

README.md

@@ -27,7 +27,9 @@ If you're a web dapp developer, we've got two types of guides for you:
 ## Building locally
 
  - Install [Node.js](https://nodejs.org/en/) version 6.3.1 or later.
- - Install local dependencies with `npm install`.
+ - Install dependencies:
+   - For node versions up to and including 9, install local dependencies with `npm install`.
+   - For node versions 10 and later, install [Yarn](https://yarnpkg.com/lang/en/docs/install/) and use `yarn install`.
  - Install gulp globally with `npm install -g gulp-cli`.
  - Build the project to the `./dist/` folder with `gulp build`.
  - Optionally, to rebuild on file changes, run `gulp dev`.

app/_locales/en/messages.json

@@ -523,6 +523,9 @@
   "networks": {
     "message": "Networks"
   },
+  "nevermind": {
+    "message": "Nevermind"
+  },
   "newAccount": {
     "message": "New Account"
   },
@@ -637,9 +640,15 @@
   "rejected": {
     "message": "Rejected"
   },
+  "reset": {
+    "message": "Reset"
+  },
   "resetAccount": {
     "message": "Reset Account"
   },
+  "resetAccountDescription": {
+    "message": "Resetting your account will clear your transaction history."
+  },
   "restoreFromSeed": {
     "message": "Restore account?"
   },
@@ -897,7 +906,7 @@
     "message": "Welcome to the New UI (Beta)"
   },
   "uiWelcomeMessage": {
-    "message": "You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, and let us know if you have any issues."
+    "message": "You are now using the new Metamask UI."
   },
   "unapproved": {
     "message": "Unapproved"

app/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_appName__",
   "short_name": "__MSG_appName__",
-  "version": "4.6.1",
+  "version": "4.7.2",
   "manifest_version": 2,
   "author": "https://metamask.io",
   "description": "__MSG_appDescription__",
@@ -68,6 +68,8 @@
     "matches": [
       "https://metamask.io/*"
     ],
-    "ids": ["*"]
+    "ids": [
+      "*"
+    ]
   }
 }

app/scripts/controllers/preferences.js

@@ -2,6 +2,7 @@ const ObservableStore = require('obs-store')
 const normalizeAddress = require('eth-sig-util').normalize
 const extend = require('xtend')
 
+
 class PreferencesController {
 
   /**
@@ -28,7 +29,11 @@ class PreferencesController {
       featureFlags: {},
       currentLocale: opts.initLangCode,
       identities: {},
+      lostIdentities: {},
     }, opts.initState)
+
+    this.diagnostics = opts.diagnostics
+
     this.store = new ObservableStore(initState)
   }
 // PUBLIC METHODS
@@ -63,6 +68,13 @@ class PreferencesController {
     this.store.updateState({ currentLocale: key })
   }
 
+  /**
+   * Updates identities to only include specified addresses. Removes identities
+   * not included in addresses array
+   *
+   * @param {string[]} addresses An array of hex addresses
+   *
+   */
   setAddresses (addresses) {
     const oldIdentities = this.store.getState().identities
     const identities = addresses.reduce((ids, address, index) => {
@@ -73,6 +85,68 @@ class PreferencesController {
     this.store.updateState({ identities })
   }
 
+  /**
+   * Adds addresses to the identities object without removing identities
+   *
+   * @param {string[]} addresses An array of hex addresses
+   *
+   */
+  addAddresses (addresses) {
+    const identities = this.store.getState().identities
+    addresses.forEach((address) => {
+      // skip if already exists
+      if (identities[address]) return
+      // add missing identity
+      const identityCount = Object.keys(identities).length
+      identities[address] = { name: `Account ${identityCount + 1}`, address }
+    })
+    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:
+      if (this.diagnostics) this.diagnostics.reportOrphans(newlyLost)
+
+      // store lost accounts
+      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
    *
@@ -111,7 +185,7 @@ class PreferencesController {
   /**
    * Adds a new token to the token array, or updates the token if passed an address that already exists.
    * Modifies the existing tokens array from the store. All objects in the tokens array array AddedToken objects.
-   * @see AddedToken {@link AddedToken} 
+   * @see AddedToken {@link AddedToken}
    *
    * @param {string} rawAddress Hex address of the token contract. May or may not be a checksum address.
    * @param {string} symbol The symbol of the token
@@ -197,7 +271,7 @@ class PreferencesController {
   }
 
   /**
-   * Setter for the `currentAccountTab` property 
+   * Setter for the `currentAccountTab` property
    *
    * @param {string} currentAccountTab Specifies the new tab to be marked as current
    * @returns {Promise<void>} Promise resolves with undefined
@@ -215,7 +289,7 @@ class PreferencesController {
    * The returned list will have a max length of 2. If the _url currently exists it the list, it will be moved to the
    * end of the list. The current list is modified and returned as a promise.
    *
-   * @param {string} _url The rpc url to add to the frequentRpcList. 
+   * @param {string} _url The rpc url to add to the frequentRpcList.
    * @returns {Promise<array>} The updated frequentRpcList.
    *
    */

app/scripts/controllers/user-actions.js

@@ -0,0 +1,17 @@
+const MessageManager = require('./lib/message-manager')
+const PersonalMessageManager = require('./lib/personal-message-manager')
+const TypedMessageManager = require('./lib/typed-message-manager')
+
+class UserActionController {
+
+  constructor (opts = {}) {
+
+    this.messageManager = new MessageManager()
+    this.personalMessageManager = new PersonalMessageManager()
+    this.typedMessageManager = new TypedMessageManager()
+
+  }
+
+}
+
+module.exports = UserActionController

app/scripts/lib/createErrorMiddleware.js

@@ -59,6 +59,7 @@ function createErrorMiddleware ({ override = true } = {}) {
       if (!error) { return done() }
       sanitizeRPCError(error)
       log.error(`MetaMask - RPC Error: ${error.message}`, error)
+      done()
     })
   }
 }

app/scripts/lib/diagnostics-reporter.js

@@ -0,0 +1,71 @@
+class DiagnosticsReporter {
+
+  constructor ({ firstTimeInfo, version }) {
+    this.firstTimeInfo = firstTimeInfo
+    this.version = version
+  }
+
+  async reportOrphans(orphans) {
+    try {
+      return await this.submit({
+        accounts: Object.keys(orphans),
+        metadata: {
+          type: 'orphans',
+        },
+      })
+    } catch (err) {
+      console.error('DiagnosticsReporter - "reportOrphans" encountered an error:')
+      console.error(err)
+    }
+  }
+
+  async reportMultipleKeyrings(rawKeyrings) {
+    try {
+      const keyrings = await Promise.all(rawKeyrings.map(async (keyring, index) => {
+        return {
+          index,
+          type: keyring.type,
+          accounts: await keyring.getAccounts(),
+        }
+      }))
+      return await this.submit({
+        accounts: [],
+        metadata: {
+          type: 'keyrings',
+          keyrings,
+        },
+      })
+    } catch (err) {
+      console.error('DiagnosticsReporter - "reportMultipleKeyrings" encountered an error:')
+      console.error(err)
+    }
+  }
+
+  async submit (message) {
+    try {
+      // add metadata
+      message.metadata.version = this.version
+      message.metadata.firstTimeInfo = this.firstTimeInfo
+      return await postData(message)
+    } catch (err) {
+      console.error('DiagnosticsReporter - "submit" encountered an error:')
+      throw err
+    }
+  }
+
+}
+
+function postData(data) {
+  const uri = 'https://diagnostics.metamask.io/v1/orphanedAccounts'
+  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
+  })
+}
+
+module.exports = DiagnosticsReporter

app/scripts/lib/setupRaven.js

@@ -66,7 +66,7 @@ function simplifyErrorMessages(report) {
 
 function rewriteErrorMessages(report, rewriteFn) {
   // rewrite top level message
-  report.message = rewriteFn(report.message)
+  if (report.message) report.message = rewriteFn(report.message)
   // rewrite each exception message
   if (report.exception && report.exception.values) {
     report.exception.values.forEach(item => {

app/scripts/metamask-controller.js

@@ -46,6 +46,7 @@ const GWEI_BN = new BN('1000000000')
 const percentile = require('percentile')
 const seedPhraseVerifier = require('./lib/seed-phrase-verifier')
 const cleanErrorStack = require('./lib/cleanErrorStack')
+const DiagnosticsReporter = require('./lib/diagnostics-reporter')
 const log = require('loglevel')
 
 module.exports = class MetamaskController extends EventEmitter {
@@ -64,6 +65,12 @@ module.exports = class MetamaskController extends EventEmitter {
     const initState = opts.initState || {}
     this.recordFirstTimeInfo(initState)
 
+    // metamask diagnostics reporter
+    this.diagnostics = opts.diagnostics || new DiagnosticsReporter({
+      firstTimeInfo: initState.firstTimeInfo,
+      version,
+    })
+
     // platform-specific api
     this.platform = opts.platform
 
@@ -85,6 +92,7 @@ module.exports = class MetamaskController extends EventEmitter {
     this.preferencesController = new PreferencesController({
       initState: initState.PreferencesController,
       initLangCode: opts.initLangCode,
+      diagnostics: this.diagnostics,
     })
 
     // currency controller
@@ -139,6 +147,8 @@ module.exports = class MetamaskController extends EventEmitter {
         const address = addresses[0]
         this.preferencesController.setSelectedAddress(address)
       }
+      // ensure preferences + identities controller know about all addresses
+      this.preferencesController.addAddresses(addresses)
       this.accountTracker.syncWithAddresses(addresses)
     })
 
@@ -354,7 +364,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),
@@ -456,7 +466,11 @@ module.exports = class MetamaskController extends EventEmitter {
   async createNewVaultAndRestore (password, seed) {
     const release = await this.createVaultMutex.acquire()
     try {
+      // clear known identities
+      this.preferencesController.setAddresses([])
+      // create new vault
       const vault = await this.keyringController.createNewVaultAndRestore(password, seed)
+      // set new identities
       const accounts = await this.keyringController.getAccounts()
       this.preferencesController.setAddresses(accounts)
       this.selectFirstIdentity()
@@ -468,6 +482,28 @@ 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()
+
+    // verify keyrings
+    const nonSimpleKeyrings = this.keyringController.keyrings.filter(keyring => keyring.type !== 'Simple Key Pair')
+    if (nonSimpleKeyrings.length > 1 && this.diagnostics) {
+      await this.diagnostics.reportMultipleKeyrings(nonSimpleKeyrings)
+    }
+
+    await this.preferencesController.syncAddresses(accounts)
+    return this.keyringController.fullUpdate()
+  }
+
   /**
    * @type Identity
    * @property {string} name - The account nickname.

app/scripts/migrations/026.js

@@ -27,7 +27,7 @@ module.exports = {
 
 function transformState (state) {
   if (!state.KeyringController || !state.PreferencesController) {
-    return
+    return state
   }
 
   if (!state.KeyringController.walletNicknames) {

docs/publishing.md

@@ -2,18 +2,32 @@
 
 When publishing a new version of MetaMask, we follow this procedure:
 
+## Preparation
+
+We try to ensure certain criteria are met before deploying:
+
+- Deploy early in the week, to give time for emergency responses to unforeseen bugs.
+- Deploy early in the day, for the same reason.
+- Make sure at least one member of the support team is "on duty" to watch for new user issues coming through the support system.
+- Roll out incrementally when possible, to a small number of users first, and gradually to more users.
+
 ## Incrementing Version & Changelog
 
 Version can be automatically incremented [using our bump script](./bumping-version.md).
 
 npm run version:bump $BUMP_TYPE` where `$BUMP_TYPE` is one of `major`, `minor`, or `patch`.
 
+## Building
+
+While we develop on the main `develop` branch, our production version is maintained on the `master` branch.
+
+With each pull request, the @MetaMaskBot will comment with a build of that new pull request, so after bumping the version on `develop`, open a pull request against `master`, and once the pull request is reviewed and merged, you can download those builds for publication.
+
 ## Publishing
 
-1. `npm run dist` to generate the latest build.
-2. Publish to chrome store.
-  - Visit [the chrome developer dashboard](https://chrome.google.com/webstore/developer/dashboard?authuser=2).
-3. Publish to firefox addon marketplace.
-4. Post on Github releases page.
-5. `npm run announce`, post that announcement in our public places.
-
+1. Publish to chrome store.
+2. Visit [the chrome developer dashboard](https://chrome.google.com/webstore/developer/dashboard?authuser=2).
+3. Publish to [firefox addon marketplace](http://addons.mozilla.org/en-us/firefox/addon/ether-metamask).
+4. Publish to [Opera store](https://addons.opera.com/en/extensions/details/metamask/).
+5. Post on [Github releases](https://github.com/MetaMask/metamask-extension/releases) page.
+6. Run the `npm run announce` script, and post that announcement in our public places.

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 {

package-lock.json

@@ -8174,16 +8174,16 @@
       "integrity": "sha512-NNlVB/TBc8p9CblwECjPlUR+7MNQKiBa7tEFxIzZ9MjjNCEYPWDXTm0vJZzuDtVmFxYwIA53UD0QEn0QNxWNEQ==",
       "dev": true,
       "requires": {
-        "bip39": "^2.4.0",
-        "bluebird": "^3.5.0",
-        "browser-passworder": "^2.0.3",
-        "eth-hd-keyring": "^1.2.2",
-        "eth-sig-util": "^1.4.0",
-        "eth-simple-keyring": "^1.2.2",
-        "ethereumjs-util": "^5.1.2",
-        "loglevel": "^1.5.0",
-        "obs-store": "^2.4.1",
-        "promise-filter": "^1.1.0"
+        "bip39": "2.4.0",
+        "bluebird": "3.5.1",
+        "browser-passworder": "2.0.3",
+        "eth-hd-keyring": "1.2.2",
+        "eth-sig-util": "1.4.2",
+        "eth-simple-keyring": "1.2.2",
+        "ethereumjs-util": "5.2.0",
+        "loglevel": "1.6.0",
+        "obs-store": "2.4.1",
+        "promise-filter": "1.1.0"
       },
       "dependencies": {
         "babelify": {
@@ -8296,11 +8296,11 @@
       "integrity": "sha512-uQVBYshHUOaXVoat1BpLA/QNMCr4hgdFBgwIB7rRmQ+m3vQQAseUsOM+biPDYzq6end+6LjcccElLpQaIZe6dg==",
       "dev": true,
       "requires": {
-        "eth-sig-util": "^1.4.2",
-        "ethereumjs-util": "^5.1.1",
-        "ethereumjs-wallet": "^0.6.0",
-        "events": "^1.1.1",
-        "xtend": "^4.0.1"
+        "eth-sig-util": "1.4.2",
+        "ethereumjs-util": "5.2.0",
+        "ethereumjs-wallet": "0.6.0",
+        "events": "1.1.1",
+        "xtend": "4.0.1"
       },
       "dependencies": {
         "ethereumjs-util": {

test/integration/lib/add-token.js

@@ -43,7 +43,7 @@ async function runAddTokenFlowTest (assert, done) {
   assert.equal(addTokenTitle[0].textContent, 'Add Tokens', 'add token title is correct')
 
   // Cancel Add Token
-  const cancelAddTokenButton = await queryAsync($, 'button.btn-secondary--lg.page-container__footer-button')
+  const cancelAddTokenButton = await queryAsync($, 'button.btn-default.btn--large.page-container__footer-button')
   assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
   cancelAddTokenButton.click()
 
@@ -75,15 +75,15 @@ async function runAddTokenFlowTest (assert, done) {
   tokenWrapper[0].click()
 
   // Click Next button
-  let nextButton = await queryAsync($, 'button.btn-primary--lg')
+  let nextButton = await queryAsync($, 'button.btn-primary.btn--large')
   assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
   nextButton[0].click()
 
   // Confirm Add token
   const confirmAddToken = await queryAsync($, '.confirm-add-token')
   assert.ok(confirmAddToken[0], 'confirm add token rendered')
-  assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
-  $('button.btn-primary--lg')[0].click()
+  assert.ok($('button.btn-primary.btn--large')[0], 'confirm add token button found')
+  $('button.btn-primary.btn--large')[0].click()
 
   // Verify added token image
   let heroBalance = await queryAsync($, '.hero-balance')
@@ -120,7 +120,7 @@ async function runAddTokenFlowTest (assert, done) {
   const errorMessage = await queryAsync($, '#custom-symbol-helper-text')
   assert.ok(errorMessage[0], 'error rendered')
 
-  $('button.btn-secondary--lg')[0].click()
+  $('button.btn-default.btn--large')[0].click()
 
   // await timeout(100000)
 

test/integration/lib/confirm-sig-requests.js

@@ -38,7 +38,7 @@ async function runConfirmSigRequestsTest(assert, done) {
   let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
   assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
 
-  let confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
+  let confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
   confirmSigSignButton[0].click()
 
   confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@@ -47,7 +47,7 @@ async function runConfirmSigRequestsTest(assert, done) {
   confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
   assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
 
-  confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
+  confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
   confirmSigSignButton[0].click()
 
   confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@@ -57,7 +57,7 @@ async function runConfirmSigRequestsTest(assert, done) {
   assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
   assert.equal(confirmSigRowValue[1].textContent, '1337')
 
-  confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
+  confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
   confirmSigSignButton[0].click()
 
   const txView = await queryAsync($, '.tx-view')

test/integration/lib/send-new-ui.js

@@ -129,7 +129,7 @@ async function runSendFlowTest(assert, done) {
   await customizeGas(assert, 0, 21000, '0', '$0.00 USD')
   await customizeGas(assert, 500, 60000, '0.003', '$3.60 USD')
 
-  const sendButton = await queryAsync($, 'button.btn-primary--lg.page-container__footer-button')
+  const sendButton = await queryAsync($, 'button.btn-primary.btn--large.page-container__footer-button')
   assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
   sendButton[0].click()
   await timeout()
@@ -169,13 +169,13 @@ async function runSendFlowTest(assert, done) {
   sendAmountFieldInputInEdit.val('1.0')
   reactTriggerChange(sendAmountFieldInputInEdit[0])
 
-  const sendButtonInEdit = await queryAsync($, '.btn-primary--lg.page-container__footer-button')
+  const sendButtonInEdit = await queryAsync($, '.btn-primary.btn--large.page-container__footer-button')
   assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
 
   selectState.val('send new ui')
   reactTriggerChange(selectState[0])
 
-  const cancelButtonInEdit = await queryAsync($, '.btn-secondary--lg.page-container__footer-button')
+  const cancelButtonInEdit = await queryAsync($, '.btn-default.btn--large.page-container__footer-button')
   cancelButtonInEdit[0].click()
   // sendButtonInEdit[0].click()
 

test/screens/new-ui.js

@@ -163,7 +163,7 @@ async function captureAllScreens() {
   await delay(300)
   await captureLanguageScreenShots('metamask account detail export private key screen - password entered')
 
-  await driver.findElement(By.css('.btn-primary--lg.export-private-key__button')).click()
+  await driver.findElement(By.css('.btn-primary.btn--large.export-private-key__button')).click()
   await delay(300)
   await captureLanguageScreenShots('metamask account detail export private key screen - reveal key')
 

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,31 @@ 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])
+      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 () {
@@ -479,7 +504,7 @@ describe('MetaMaskController', function () {
     it('errors when signing a message', async function () {
       await metamaskController.signPersonalMessage(personalMessages[0].msgParams)
       assert.equal(metamaskPersonalMsgs[msgId].status, 'signed')
-      assert.equal(metamaskPersonalMsgs[msgId].rawSig, '0x6a1b65e2b8ed53cf398a769fad24738f9fbe29841fe6854e226953542c4b6a173473cb152b6b1ae5f06d601d45dd699a129b0a8ca84e78b423031db5baa734741b')      
+      assert.equal(metamaskPersonalMsgs[msgId].rawSig, '0x6a1b65e2b8ed53cf398a769fad24738f9fbe29841fe6854e226953542c4b6a173473cb152b6b1ae5f06d601d45dd699a129b0a8ca84e78b423031db5baa734741b')
     })
   })
 
@@ -513,7 +538,7 @@ describe('MetaMaskController', function () {
     })
 
     it('sets up controller dnode api for trusted communication', function (done) {
-      streamTest = createThoughStream((chunk, enc, cb) => { 
+      streamTest = createThoughStream((chunk, enc, cb) => {
         assert.equal(chunk.name, 'controller')
         cb()
         done()

ui/app/actions.js

@@ -503,17 +503,23 @@ function requestRevealSeedWords (password) {
 }
 
 function resetAccount () {
-    return (dispatch) => {
-        background.resetAccount((err, account) => {
-            dispatch(actions.hideLoadingIndication())
-            if (err) {
-                dispatch(actions.displayWarning(err.message))
-            }
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
 
-            log.info('Transaction history reset for ' + account)
-            dispatch(actions.showAccountsPage())
-        })
-    }
+    return new Promise((resolve, reject) => {
+      background.resetAccount((err, account) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.info('Transaction history reset for ' + account)
+        dispatch(actions.showAccountsPage())
+        resolve(account)
+      })
+    })
+  }
 }
 
 function addNewKeyring (type, opts) {

ui/app/components/button/button.component.js

@@ -2,20 +2,15 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-const SECONDARY = 'secondary'
+const CLASSNAME_DEFAULT = 'btn-default'
 const CLASSNAME_PRIMARY = 'btn-primary'
-const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
 const CLASSNAME_SECONDARY = 'btn-secondary'
-const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+const CLASSNAME_LARGE = 'btn--large'
 
-const getClassName = (type, large = false) => {
-  let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
-
-  if (large) {
-    output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
-  }
-
-  return output
+const typeHash = {
+  default: CLASSNAME_DEFAULT,
+  primary: CLASSNAME_PRIMARY,
+  secondary: CLASSNAME_SECONDARY,
 }
 
 class Button extends Component {
@@ -24,7 +19,11 @@ class Button extends Component {
 
     return (
       <button
-        className={classnames(getClassName(type, large), className)}
+        className={classnames(
+          typeHash[type],
+          large && CLASSNAME_LARGE,
+          className
+        )}
         { ...buttonProps }
       >
         { this.props.children }

ui/app/components/button/button.stories.js

@@ -13,13 +13,21 @@ storiesOf('Button', module)
       {text('text', 'Click me')}
     </Button>
   )
-  .add('secondary', () => (
+  .add('secondary', () =>
     <Button
       onClick={action('clicked')}
       type="secondary"
     >
       {text('text', 'Click me')}
     </Button>
+  )
+  .add('default', () => (
+    <Button
+      onClick={action('clicked')}
+      type="default"
+    >
+      {text('text', 'Click me')}
+    </Button>
   ))
   .add('large primary', () => (
     <Button
@@ -39,3 +47,12 @@ storiesOf('Button', module)
       {text('text', 'Click me')}
     </Button>
   ))
+  .add('large default', () => (
+    <Button
+      onClick={action('clicked')}
+      type="default"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))

ui/app/components/customize-gas-modal/index.js

@@ -308,7 +308,7 @@ CustomizeGasModal.prototype.render = function () {
         }, [this.context.t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
-          h('button.btn-secondary.send-v2__customize-gas__cancel', {
+          h('button.btn-default.send-v2__customize-gas__cancel', {
             onClick: this.props.hideModal,
             style: {
               marginRight: '10px',

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/confirm-reset-account/confirm-reset-account.component.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+class ConfirmResetAccount extends Component {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    resetAccount: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleReset () {
+    this.props.resetAccount()
+      .then(() => this.props.hideModal())
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="modal-container">
+        <div className="modal-container__content">
+          <div className="modal-container__title">
+            { `${t('resetAccount')}?` }
+          </div>
+          <div className="modal-container__description">
+            { t('resetAccountDescription') }
+          </div>
+        </div>
+        <div className="modal-container__footer">
+          <Button
+            type="default"
+            className="modal-container__footer-button"
+            onClick={() => this.props.hideModal()}
+          >
+            { t('nevermind') }
+          </Button>
+          <Button
+            type="secondary"
+            className="modal-container__footer-button"
+            onClick={() => this.handleReset()}
+          >
+            { t('reset') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ConfirmResetAccount

ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import ConfirmResetAccount from './confirm-reset-account.component'
+
+const { hideModal, resetAccount } = require('../../../actions')
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+    resetAccount: () => dispatch(resetAccount()),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(ConfirmResetAccount)

ui/app/components/modals/confirm-reset-account/index.js

@@ -0,0 +1,2 @@
+import ConfirmResetAccount from './confirm-reset-account.container'
+module.exports = ConfirmResetAccount

ui/app/components/modals/deposit-ether-modal.js

@@ -109,7 +109,7 @@ DepositEtherModal.prototype.renderRow = function ({
       ]),
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h('button.btn-primary--lg.deposit-ether-modal__deposit-button', {
+        h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
           onClick: onButtonClick,
         }, [buttonLabel]),
       ]),

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/export-private-key-modal.js

@@ -87,14 +87,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
     !privateKey && this.renderButton(
-      'btn-secondary--lg export-private-key__button export-private-key__button--cancel',
+      'btn-default btn--large export-private-key__button export-private-key__button--cancel',
       () => hideModal(),
       'Cancel'
     ),
 
     (privateKey
-      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.context.t('done'))
-      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+      ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done'))
+      : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
     ),
 
   ])

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/index.scss

@@ -1 +1,52 @@
-@import './transaction-confirmed/index';
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-flow: column;
+  border-radius: 8px;
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__content {
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 32px;
+
+    @media screen and (max-width: 575px) {
+      justify-content: center;
+      padding: 28px 20px;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid #d2d8dd;
+    padding: 16px;
+    flex: 0 0 auto;
+
+    &-button {
+      min-width: 0;
+      margin-right: 16px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}

ui/app/components/modals/modal.js

@@ -19,8 +19,30 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
-const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
+const ConfirmResetAccount = require('./confirm-reset-account')
 const TransactionConfirmed = require('./transaction-confirmed')
+const WelcomeBeta = require('./welcome-beta')
+const Notification = require('./notification')
+
+const modalContainerBaseStyle = {
+  transform: 'translate3d(-50%, 0, 0px)',
+  border: '1px solid #CCCFD1',
+  borderRadius: '8px',
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+}
+
+const modalContainerLaptopStyle = {
+  ...modalContainerBaseStyle,
+  width: '344px',
+  top: '15%',
+}
+
+const modalContainerMobileStyle = {
+  ...modalContainerBaseStyle,
+  width: '309px',
+  top: '12.5%',
+}
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -174,18 +196,18 @@ const MODALS = {
 
   BETA_UI_NOTIFICATION_MODAL: {
     contents: [
-      h(NotifcationModal, {
-        header: 'uiWelcome',
-        message: 'uiWelcomeMessage',
-      }),
+      h(Notification, [
+        h(WelcomeBeta),
+      ]),
     ],
     mobileModalStyle: {
-      width: '95%',
-      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+      ...modalContainerMobileStyle,
     },
     laptopModalStyle: {
-      width: '449px',
-      top: 'calc(33% + 45px)',
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
     },
   },
 
@@ -209,12 +231,13 @@ const MODALS = {
   CONFIRM_RESET_ACCOUNT: {
     contents: h(ConfirmResetAccount),
     mobileModalStyle: {
-      width: '95%',
-      top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+      ...modalContainerMobileStyle,
     },
     laptopModalStyle: {
-      width: '473px',
-      top: 'calc(33% + 45px)',
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
     },
   },
 
@@ -269,31 +292,18 @@ const MODALS = {
   TRANSACTION_CONFIRMED: {
     disableBackdropClick: true,
     contents: [
-      h(TransactionConfirmed, {}, []),
+      h(Notification, [
+        h(TransactionConfirmed),
+      ]),
     ],
     mobileModalStyle: {
-      width: '100%',
-      height: '100%',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
-      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
-      top: '0',
-      display: 'flex',
+      ...modalContainerMobileStyle,
     },
     laptopModalStyle: {
-      width: '344px',
-      transform: 'translate3d(-50%, 0, 0px)',
-      top: '15%',
-      border: '1px solid #CCCFD1',
-      borderRadius: '8px',
-      backgroundColor: '#FFFFFF',
-      boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+      ...modalContainerLaptopStyle,
     },
     contentStyle: {
       borderRadius: '8px',
-      height: '100%',
     },
   },
 

ui/app/components/modals/notification-modals/confirm-reset-account.js

@@ -1,46 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const NotifcationModal = require('../notification-modal')
-
-class ConfirmResetAccount extends Component {
-  render () {
-    const { resetAccount } = this.props
-
-    return h(NotifcationModal, {
-      header: 'Are you sure you want to reset account?',
-      message: h('div', [
-
-        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
-          which is used to calculate the current account nonce. `),
-
-        h('a.notification-modal__link', {
-          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
-          target: '_blank',
-          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
-        }, 'Read more.'),
-
-      ]),
-      showCancelButton: true,
-      showConfirmButton: true,
-      onConfirm: resetAccount,
-      
-    })
-  }
-}
-
-ConfirmResetAccount.propTypes = {
-  resetAccount: PropTypes.func,
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    resetAccount: () => {
-      dispatch(actions.resetAccount())
-    },
-  }
-}
-
-module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)

ui/app/components/modals/notification/index.js

@@ -0,0 +1,2 @@
+import Notification from './notification.container'
+module.exports = Notification

ui/app/components/modals/notification/notification.component.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+const Notification = (props, context) => {
+  return (
+    <div className="modal-container">
+      { props.children }
+      <div className="modal-container__footer">
+        <Button
+          type="primary"
+          onClick={() => props.onHide()}
+        >
+          { context.t('ok') }
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+Notification.propTypes = {
+  onHide: PropTypes.func.isRequired,
+  children: PropTypes.element,
+}
+
+Notification.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default Notification

ui/app/components/modals/notification/notification.container.js

@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import Notification from './notification.component'
+
+const { hideModal } = require('../../../actions')
+
+const mapStateToProps = state => {
+  const { appState: { modal: { modalState: { props } } } } = state
+  const { onHide } = props
+  return {
+    onHide,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { onHide, ...otherStateProps } = stateProps
+  const { hideModal, ...otherDispatchProps } = dispatchProps
+
+  return {
+    ...otherStateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    onHide: () => {
+      hideModal()
+
+      if (onHide && typeof onHide === 'function') {
+        onHide()
+      }
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification)

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/modals/transaction-confirmed/index.js

@@ -1,2 +1,2 @@
-import TransactionConfirmed from './transaction-confirmed.container'
+import TransactionConfirmed from './transaction-confirmed.component'
 module.exports = TransactionConfirmed

ui/app/components/modals/transaction-confirmed/index.scss

@@ -1,21 +0,0 @@
-.transaction-confirmed {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 32px;
-
-  &__title {
-    font-size: 2rem;
-    padding: 16px 0;
-  }
-
-  &__description {
-    text-align: center;
-    font-size: .875rem;
-    line-height: 1.5rem;
-  }
-
-  @media screen and (max-width: 575px) {
-    justify-content: center;
-  }
-}

ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js

@@ -1,42 +1,20 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import Button from '../../button'
 
-class TransactionConfirmed extends Component {
-  render () {
-    const { t } = this.context
+const TransactionConfirmed = (props, context) => {
+  const { t } = context
 
-    return (
-      <div className="page-container page-container--full-width page-container--full-height">
-        <div className="page-container__content transaction-confirmed">
-          <img src="images/check-icon.svg" />
-          <div className="transaction-confirmed__title">
-            { `${t('confirmed')}!` }
-          </div>
-          <div className="transaction-confirmed__description">
-            { t('initialTransactionConfirmed') }
-          </div>
-        </div>
-        <div className="page-container__footer">
-          <Button
-            type="primary"
-            className="page-container__footer-button"
-            onClick={() => {
-              this.props.hideModal()
-              this.props.onHide()
-            }}
-          >
-            { t('ok') }
-          </Button>
-        </div>
+  return (
+    <div className="modal-container__content">
+      <img src="images/check-icon.svg" />
+      <div className="modal-container__title">
+        { `${t('confirmed')}!` }
       </div>
-    )
-  }
-}
-
-TransactionConfirmed.propTypes = {
-  hideModal: PropTypes.func.isRequired,
-  onHide: PropTypes.func.isRequired,
+      <div className="modal-container__description">
+        { t('initialTransactionConfirmed') }
+      </div>
+    </div>
+  )
 }
 
 TransactionConfirmed.contextTypes = {

ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js

@@ -1,20 +0,0 @@
-import { connect } from 'react-redux'
-import TransactionConfirmed from './transaction-confirmed.component'
-
-const { hideModal } = require('../../../actions')
-
-const mapStateToProps = state => {
-  const { appState: { modal: { modalState: { props } } } } = state
-  const { onHide } = props
-  return {
-    onHide,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    hideModal: () => dispatch(hideModal()),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed)

ui/app/components/modals/welcome-beta/index.js

@@ -0,0 +1,2 @@
+import WelcomeBeta from './welcome-beta.component'
+module.exports = WelcomeBeta

ui/app/components/modals/welcome-beta/welcome-beta.component.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const TransactionConfirmed = (props, context) => {
+  const { t } = context
+
+  return (
+    <div className="modal-container__content">
+      <div className="modal-container__title">
+        { `${t('uiWelcome')}` }
+      </div>
+      <div className="modal-container__description">
+        { t('uiWelcomeMessage') }
+      </div>
+    </div>
+  )
+}
+
+TransactionConfirmed.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default TransactionConfirmed

ui/app/components/pages/add-token/add-token.component.js

@@ -323,7 +323,7 @@ class AddToken extends Component {
         </div>
         <div className="page-container__footer">
           <Button
-            type="secondary"
+            type="default"
             large
             className="page-container__footer-button"
             onClick={() => {

ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js

@@ -15,7 +15,7 @@ export default class TokenListPlaceholder extends Component {
         </div>
         <a
           className="token-list-placeholder__link"
-          href="http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens"
+          href="https://consensys.zendesk.com/hc/en-us/articles/360004135092"
           target="_blank"
           rel="noopener noreferrer"
         >

ui/app/components/pages/confirm-add-token/confirm-add-token.component.js

@@ -87,7 +87,7 @@ export default class ConfirmAddToken extends Component {
         </div>
         <div className="page-container__footer">
           <Button
-            type="secondary"
+            type="default"
             large
             className="page-container__footer-button"
             onClick={() => history.push(ADD_TOKEN_ROUTE)}

ui/app/components/pages/create-account/import-account/index.js

@@ -46,7 +46,7 @@ AccountImportSubview.prototype.render = function () {
           },
           onClick: () => {
             global.platform.openWindow({
-              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+              url: 'https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI',
             })
           },
         }, this.context.t('here')),

ui/app/components/pages/create-account/import-account/json.js

@@ -51,7 +51,7 @@ class JsonImportSubview extends Component {
 
         h('div.new-account-create-form__buttons', {}, [
 
-          h('button.btn-secondary.new-account-create-form__button', {
+          h('button.btn-default.new-account-create-form__button', {
             onClick: () => this.props.history.push(DEFAULT_ROUTE),
           }, [
             this.context.t('cancel'),
@@ -105,7 +105,7 @@ class JsonImportSubview extends Component {
     }
 
     this.props.importNewJsonAccount([ fileContents, password ])
-      // JS runtime requires caught rejections but failures are handled by Redux 
+      // JS runtime requires caught rejections but failures are handled by Redux
       .catch()
   }
 }

ui/app/components/pages/create-account/import-account/private-key.js

@@ -59,13 +59,13 @@ PrivateKeyImportView.prototype.render = function () {
 
       h('div.new-account-import-form__buttons', {}, [
 
-        h('button.btn-secondary--lg.new-account-create-form__button', {
+        h('button.btn-default.btn--large.new-account-create-form__button', {
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
           this.context.t('cancel'),
         ]),
 
-        h('button.btn-primary--lg.new-account-create-form__button', {
+        h('button.btn-primary.btn--large.new-account-create-form__button', {
           onClick: () => this.createNewKeychain(),
         }, [
           this.context.t('import'),
@@ -91,7 +91,7 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
   const { importNewAccount, history } = this.props
 
   importNewAccount('Private Key', [ privateKey ])
-    // JS runtime requires caught rejections but failures are handled by Redux 
+    // JS runtime requires caught rejections but failures are handled by Redux
     .catch()
     .then(() => history.push(DEFAULT_ROUTE))
 }

ui/app/components/pages/create-account/new-account.js

@@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__buttons', {}, [
 
-        h('button.btn-secondary--lg.new-account-create-form__button', {
+        h('button.btn-default.btn--large.new-account-create-form__button', {
           onClick: () => history.push(DEFAULT_ROUTE),
         }, [
           this.context.t('cancel'),
         ]),
 
-        h('button.btn-primary--lg.new-account-create-form__button', {
+        h('button.btn-primary.btn--large.new-account-create-form__button', {
           onClick: () => {
             createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))

ui/app/components/pages/keychains/reveal-seed.js

@@ -106,10 +106,10 @@ class RevealSeedPage extends Component {
   renderPasswordPromptFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-secondary--lg.page-container__footer-button', {
+        h('button.btn-default.btn--large.page-container__footer-button', {
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('cancel')),
-        h('button.btn-primary--lg.page-container__footer-button', {
+        h('button.btn-primary.btn--large.page-container__footer-button', {
           onClick: event => this.handleSubmit(event),
           disabled: this.state.password === '',
         }, this.context.t('next')),
@@ -120,7 +120,7 @@ class RevealSeedPage extends Component {
   renderRevealSeedFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-secondary--lg.page-container__footer-button', {
+        h('button.btn-default.btn--large.page-container__footer-button', {
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('close')),
       ])

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

@@ -217,7 +217,7 @@ class Settings extends Component {
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary--lg.settings__button', {
+            h('button.btn-primary.btn--large.settings__button', {
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
@@ -242,7 +242,7 @@ class Settings extends Component {
         h('div.settings__content-item', this.context.t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary--lg.settings__button--red', {
+            h('button.btn-primary.btn--large.settings__button--red', {
               onClick: event => {
                 event.preventDefault()
                 history.push(REVEAL_SEED_ROUTE)
@@ -262,7 +262,7 @@ class Settings extends Component {
         h('div.settings__content-item', this.context.t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary--lg.settings__button--orange', {
+            h('button.btn-primary.btn--large.settings__button--orange', {
               onClick (event) {
                 event.preventDefault()
                 setFeatureFlagToBeta()
@@ -281,7 +281,7 @@ class Settings extends Component {
       h('div.settings__content-item', this.context.t('resetAccount')),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
-          h('button.btn-primary--lg.settings__button--orange', {
+          h('button.btn-primary.btn--large.settings__button--orange', {
             onClick (event) {
               event.preventDefault()
               showResetAccountConfirmationModal()

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/shapeshift-form.js

@@ -242,7 +242,7 @@ ShapeshiftForm.prototype.render = function () {
 
       ]),
 
-      !depositAddress && h('button.btn-primary--lg.shapeshift-form__shapeshift-buy-btn', {
+      !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),

ui/app/components/signature-request.js

@@ -235,12 +235,12 @@ SignatureRequest.prototype.renderFooter = function () {
   }
 
   return h('div.request-signature__footer', [
-    h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
+    h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
       onClick: event => {
         cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE))
       },
     }, this.context.t('cancel')),
-    h('button.btn-primary--lg', {
+    h('button.btn-primary.btn--large', {
       onClick: event => {
         sign(event).then(() => this.props.history.push(DEFAULT_ROUTE))
       },

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/components/wallet-view.js

@@ -36,7 +36,6 @@ function mapStateToProps (state) {
     tokens: state.metamask.tokens,
     keyrings: state.metamask.keyrings,
     selectedAddress: selectors.getSelectedAddress(state),
-    selectedIdentity: selectors.getSelectedIdentity(state),
     selectedAccount: selectors.getSelectedAccount(state),
     selectedTokenAddress: state.metamask.selectedTokenAddress,
   }
@@ -99,21 +98,24 @@ WalletView.prototype.render = function () {
   const {
     responsiveDisplayClassname,
     selectedAddress,
-    selectedIdentity,
     keyrings,
     showAccountDetailModal,
     sidebarOpen,
     hideSidebar,
     history,
+    identities,
   } = this.props
   // temporary logs + fake extra wallets
   // console.log('walletview, selectedAccount:', selectedAccount)
 
   const checksummedAddress = checksumAddress(selectedAddress)
 
+  if (!selectedAddress) {
+    throw new Error('selectedAddress should not be ' + String(selectedAddress))
+  }
+
   const keyring = keyrings.find((kr) => {
-    return kr.accounts.includes(selectedAddress) ||
-      kr.accounts.includes(selectedIdentity.address)
+    return kr.accounts.includes(selectedAddress)
   })
 
   const type = keyring.type
@@ -145,7 +147,7 @@ WalletView.prototype.render = function () {
         h('span.account-name', {
           style: {},
         }, [
-          selectedIdentity.name,
+          identities[selectedAddress].name,
         ]),
 
         h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),

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/buttons.scss

@@ -2,10 +2,10 @@
   Buttons
  */
 
+.btn-default,
 .btn-primary,
-.btn-primary--lg,
-.btn-secondary,
-.btn-secondary--lg {
+.btn-secondary {
+  height: 44px;
   background: $white;
   display: flex;
   justify-content: center;
@@ -20,10 +20,16 @@
   width: 100%;
   text-transform: uppercase;
   outline: none;
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
 }
 
-.btn-primary,
-.btn-primary--lg {
+.btn-primary {
   color: $curious-blue;
   border: 2px solid $spindle;
 
@@ -35,17 +41,23 @@
   &:hover {
     border-color: $curious-blue;
   }
+}
 
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
+.btn-secondary {
+  color: $monzo;
+  border: 2px solid lighten($monzo, 40%);
+
+  &:active {
+    background: lighten($monzo, 55%);
+    border-color: $monzo;
+  }
+
+  &:hover {
+    border-color: $monzo;
   }
 }
 
-.btn-secondary,
-.btn-secondary--lg {
+.btn-default {
   color: $scorpion;
   border: 2px solid $dusty-gray;
 
@@ -57,20 +69,9 @@
   &:hover {
     border-color: $scorpion;
   }
-
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
-  }
 }
 
-.btn-primary, .btn-secondary {
-  height: 44px;
-}
-
-.btn-primary--lg, .btn-secondary--lg {
+.btn--large {
   height: 54px;
 }
 

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;
   }
 }

ui/app/send-v2.js

@@ -499,7 +499,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
 
   return h('div.page-container__footer', [
     h(Button, {
-      type: 'secondary',
+      type: 'default',
       large: true,
       className: 'page-container__footer-button',
       onClick: () => {