Merge branch 'NewUI-flat' into cb-372

17 files changed, 360 insertions, 54 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index e79f4373e..ed0518184 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -149,6 +149,7 @@ var actions = {
   UPDATE_SEND_AMOUNT: 'UPDATE_SEND_AMOUNT',
   UPDATE_SEND_MEMO: 'UPDATE_SEND_MEMO',
   UPDATE_SEND_ERRORS: 'UPDATE_SEND_ERRORS',
+  UPDATE_MAX_MODE: 'UPDATE_MAX_MODE',
   UPDATE_SEND: 'UPDATE_SEND',
   CLEAR_SEND: 'CLEAR_SEND',
   updateGasLimit,
@@ -160,6 +161,7 @@ var actions = {
   updateSendAmount,
   updateSendMemo,
   updateSendErrors,
+  setMaxModeTo,
   updateSend,
   clearSend,
   setSelectedAddress,
@@ -237,6 +239,11 @@ var actions = {
 
   SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
   setUseBlockie,
+  
+  // Feature Flags
+  setFeatureFlag,
+  updateFeatureFlags,
+  UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
 }
 
 module.exports = actions
@@ -637,6 +644,13 @@ function updateSendErrors (error) {
   }
 }
 
+function setMaxModeTo (bool) {
+  return {
+    type: actions.UPDATE_MAX_MODE,
+    value: bool,
+  }
+}
+
 function updateSend (newSend) {
   return {
     type: actions.UPDATE_SEND,
@@ -988,9 +1002,10 @@ function showConfigPage (transitionForward = true) {
   }
 }
 
-function showAddTokenPage () {
+function showAddTokenPage (transitionForward = true) {
   return {
     type: actions.SHOW_ADD_TOKEN_PAGE,
+    value: transitionForward,
   }
 }
 
@@ -1272,7 +1287,8 @@ function exportAccount (password, address) {
             return reject(err)
           }
 
-          dispatch(self.exportAccountComplete())
+          // dispatch(self.exportAccountComplete())
+          dispatch(self.showPrivateKey(result))
 
           return resolve(result)
         })
@@ -1439,7 +1455,7 @@ function reshowQrCode (data, coin) {
     dispatch(actions.showLoadingIndication())
     shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
       if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
-
+        
       var message = [
         `Deposit your ${coin} to the address bellow:`,
         `Deposit Limit: ${mktResponse.limit}`,
@@ -1447,10 +1463,11 @@ function reshowQrCode (data, coin) {
       ]
 
       dispatch(actions.hideLoadingIndication())
-      return dispatch(actions.showModal({
-        name: 'SHAPESHIFT_DEPOSIT_TX',
-        Qr: { data, message },
-      }))
+      return dispatch(actions.showQrView(data, message))
+      // return dispatch(actions.showModal({
+      //   name: 'SHAPESHIFT_DEPOSIT_TX',
+      //   Qr: { data, message },
+      // }))
     })
   }
 }
@@ -1506,6 +1523,34 @@ function updateTokenExchangeRate (token = '') {
   }
 }
 
+function setFeatureFlag (feature, activated) {
+  const notificationType = activated
+    ? 'BETA_UI_NOTIFICATION_MODAL'
+    : 'OLD_UI_NOTIFICATION_MODAL'
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.setFeatureFlag(feature, activated, (err, updatedFeatureFlags) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+        dispatch(actions.updateFeatureFlags(updatedFeatureFlags))
+        dispatch(actions.showModal({ name: notificationType }))
+        resolve(updatedFeatureFlags)
+      })
+    })
+  }
+}
+
+function updateFeatureFlags (updatedFeatureFlags) {
+  return {
+    type: actions.UPDATE_FEATURE_FLAGS,
+    value: updatedFeatureFlags,
+  }
+}
+
 // Call Background Then Update
 //
 // A function generator for a common pattern wherein:
diff --git a/ui/app/app.js b/ui/app/app.js
index e90c3e98e..88a5c8458 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -116,40 +116,41 @@ App.prototype.render = function () {
   log.debug('Main ui render function')
 
   return (
+    h('.new-ui', [
+      h('.flex-column.full-height', {
+        style: {
+          overflowX: 'hidden',
+          position: 'relative',
+          alignItems: 'center',
+        },
+      }, [
 
-    h('.flex-column.full-height', {
-      style: {
-        overflowX: 'hidden',
-        position: 'relative',
-        alignItems: 'center',
-      },
-    }, [
-
-      // global modal
-      h(Modal, {}, []),
+        // global modal
+        h(Modal, {}, []),
 
-      // app bar
-      this.renderAppBar(),
+        // app bar
+        this.renderAppBar(),
 
-      // sidebar
-      this.renderSidebar(),
+        // sidebar
+        this.renderSidebar(),
 
-      // network dropdown
-      h(NetworkDropdown, {
-        provider: this.props.provider,
-        frequentRpcList: this.props.frequentRpcList,
-      }, []),
+        // network dropdown
+        h(NetworkDropdown, {
+          provider: this.props.provider,
+          frequentRpcList: this.props.frequentRpcList,
+        }, []),
 
-      h(AccountMenu),
+        h(AccountMenu),
 
-      (isLoading || isLoadingNetwork) && h(Loading, {
-        loadingMessage: loadMessage,
-      }),
+        (isLoading || isLoadingNetwork) && h(Loading, {
+          loadingMessage: loadMessage,
+        }),
 
-      // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
+        // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
 
-      // content
-      this.renderPrimary(),
+        // content
+        this.renderPrimary(),
+      ]),
     ])
   )
 }
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 485dacf90..826d2cd4b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -5,6 +5,8 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
 
+const ethUtil = require('ethereumjs-util')
+
 const {
   MIN_GAS_PRICE_DEC,
   MIN_GAS_LIMIT_DEC,
@@ -19,6 +21,7 @@ const {
   conversionUtil,
   multiplyCurrencies,
   conversionGreaterThan,
+  subtractCurrencies,
 } = require('../../conversion-util')
 
 const {
@@ -30,6 +33,7 @@ const {
   getSendFrom,
   getCurrentAccountWithSendEtherInfo,
   getSelectedTokenToFiatRate,
+  getSendMaxModeState,
 } = require('../../selectors')
 
 function mapStateToProps (state) {
@@ -42,6 +46,7 @@ function mapStateToProps (state) {
     gasLimit: getGasLimit(state),
     conversionRate,
     amount: getSendAmount(state),
+    maxModeOn: getSendMaxModeState(state),
     balance: currentAccount.balance,
     primaryCurrency: selectedToken && selectedToken.symbol,
     selectedToken,
@@ -55,6 +60,7 @@ function mapDispatchToProps (dispatch) {
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
   }
 }
 
@@ -93,8 +99,21 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
     updateGasLimit,
     hideModal,
     updateGasTotal,
+    maxModeOn,
+    selectedToken,
+    balance,
+    updateSendAmount,
   } = this.props
 
+  if (maxModeOn && !selectedToken) {
+    const maxAmount = subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+    updateSendAmount(maxAmount)
+  }
+
   updateGasPrice(gasPrice)
   updateGasLimit(gasLimit)
   updateGasTotal(gasTotal)
@@ -112,12 +131,13 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
     selectedToken,
     amountConversionRate,
     conversionRate,
+    maxModeOn,
   } = this.props
 
   let error = null
 
   const balanceIsSufficient = isBalanceSufficient({
-    amount: selectedToken ? '0' : amount,
+    amount: selectedToken || maxModeOn ? '0' : amount,
     gasTotal,
     balance,
     selectedToken,
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index f2909f3c3..2ff6accaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal')
 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 accountModalStyle = {
   mobileModalStyle: {
@@ -133,6 +134,42 @@ const MODALS = {
     },
   },
 
+  BETA_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Welcome to the New UI (Beta)',
+        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.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  OLD_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Old UI',
+        message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
+        right dropdown menu.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
new file mode 100644
index 000000000..239144b0c
--- /dev/null
+++ b/ui/app/components/modals/notification-modal.js
@@ -0,0 +1,51 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NotificationModal extends Component {
+  render () {
+    const {
+      header,
+      message,
+    } = this.props
+
+    return h('div', [
+      h('div.notification-modal-wrapper', {
+      }, [
+
+        h('div.notification-modal-header', {}, [
+          header,
+        ]),
+
+        h('div.notification-modal-message-wrapper', {}, [
+          h('div.notification-modal-message', {}, [
+            message,
+          ]),
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: this.props.hideModal,
+        }),
+
+      ]),
+    ])
+  }
+}
+
+NotificationModal.propTypes = {
+  hideModal: PropTypes.func,
+  header: PropTypes.string,
+  message: PropTypes.string,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(NotificationModal)
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 4451a6113..655de8897 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -78,5 +78,6 @@ function mapDispatchToProps (dispatch) {
     goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
     backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })),
+    setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
   }
 }
diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
index 01899ccad..445c819ff 100644
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@@ -4,6 +4,7 @@
   http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
   https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
  */
+
 @import './itcss/settings/index.scss';
 @import './itcss/tools/index.scss';
 @import './itcss/generic/index.scss';
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 7953834ee..eb92a1b70 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -11,8 +11,8 @@
     flex-flow: row nowrap;
     align-items: center;
     position: relative;
-    z-index: 200;
     font-weight: 300;
+    z-index: 201;
 
     @media screen and (max-width: 575px) {
       padding: 14px;
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index b69bd5c7e..9b64564d6 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -563,3 +563,39 @@
     }
   }
 }
+
+//Notification Modal
+
+.notification-modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  border: 1px solid $alto;
+  box-shadow: 0 0 2px 2px $alto;
+  font-family: Roboto;
+}
+
+.notification-modal-header {
+  background: $wild-sand;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+  font-size: 22px;
+  color: $nile-blue;
+  height: 79px;
+}
+
+.notification-modal-message {
+  padding: 20px;
+}
+
+.notification-modal-message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 17px;
+  color: $nile-blue;
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index 2f29d8017..d60ebd934 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -145,6 +145,11 @@
   color: $monzo;
 }
 
+.settings__clear-button--orange {
+  border: 1px solid rgba(247, 134, 28, 1);
+  color: rgba(247, 134, 28, 1);
+}
+
 .settings__info-logo-wrapper {
   height: 80px;
   margin-bottom: 20px;
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index cc7c51bd3..b4587f1ee 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -8,6 +8,8 @@ const actions = require('../actions')
 const Tooltip = require('../components/tooltip')
 const getCaretCoordinates = require('textarea-caret')
 
+let isSubmitting = false
+
 module.exports = connect(mapStateToProps)(InitializeMenuScreen)
 
 inherits(InitializeMenuScreen, Component)
@@ -164,7 +166,10 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
     return
   }
 
-  this.props.dispatch(actions.createNewVaultAndKeychain(password))
+  if (!isSubmitting) {
+    isSubmitting = true
+    this.props.dispatch(actions.createNewVaultAndKeychain(password))
+  }
 }
 
 InitializeMenuScreen.prototype.inputChanged = function (event) {
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index fb53bbaef..95b41e5f3 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -33,10 +33,12 @@ function reduceMetamask (state, action) {
       amount: '0x0',
       memo: '',
       errors: {},
+      maxModeOn: false,
       editingTransactionId: null,
     },
     coinOptions: {},
     useBlockie: false,
+    featureFlags: {},
   }, state.metamask)
 
   switch (action.type) {
@@ -258,6 +260,14 @@ function reduceMetamask (state, action) {
         },
       })
 
+    case actions.UPDATE_MAX_MODE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          maxModeOn: action.value,
+        },
+      })
+
     case actions.UPDATE_SEND:
       return extend(metamaskState, {
         send: {
@@ -310,7 +320,7 @@ function reduceMetamask (state, action) {
       return extend(metamaskState, {
         tokenExchangeRates: {
           ...metamaskState.tokenExchangeRates,
-          [marketinfo.pair]: ssMarketInfo,
+          [ssMarketInfo.pair]: ssMarketInfo,
         },
         coinOptions,
       })
@@ -320,6 +330,11 @@ function reduceMetamask (state, action) {
             useBlockie: action.value,
           })
 
+    case actions.UPDATE_FEATURE_FLAGS:
+      return extend(metamaskState, {
+        featureFlags: action.value,
+      })
+
     default:
       return metamaskState
 
diff --git a/ui/app/root.js b/ui/app/root.js
index 9e7314b20..21d6d1829 100644
--- a/ui/app/root.js
+++ b/ui/app/root.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const Provider = require('react-redux').Provider
 const h = require('react-hyperscript')
-const App = require('./app')
+const SelectedApp = require('./select-app')
 
 module.exports = Root
 
@@ -15,7 +15,7 @@ Root.prototype.render = function () {
     h(Provider, {
       store: this.props.store,
     }, [
-      h(App),
+      h(SelectedApp),
     ])
 
   )
diff --git a/ui/app/select-app.js b/ui/app/select-app.js
new file mode 100644
index 000000000..ffa31b767
--- /dev/null
+++ b/ui/app/select-app.js
@@ -0,0 +1,47 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const App = require('./app')
+const OldApp = require('../../old-ui/app/app')
+const { autoAddToBetaUI } = require('./selectors')
+const { setFeatureFlag } = require('./actions')
+
+function mapStateToProps (state) {
+	return {
+		betaUI: state.metamask.featureFlags.betaUI,
+		autoAdd: autoAddToBetaUI(state),
+		isUnlocked: state.metamask.isUnlocked,
+	}
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setFeatureFlagToBeta: () => dispatch(setFeatureFlag('betaUI', true)),
+  }
+}
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp)
+
+inherits(SelectedApp, Component)
+function SelectedApp () {
+	this.state = {
+		autoAdd: false,
+	}
+	Component.call(this)
+}
+
+SelectedApp.prototype.componentWillReceiveProps = function (nextProps) {
+	const { isUnlocked, setFeatureFlagToBeta } = this.props
+
+	if (!isUnlocked && nextProps.isUnlocked && nextProps.autoAdd) {
+		this.setState({ autoAdd: nextProps.autoAdd })
+		setFeatureFlagToBeta()
+	}
+}
+
+SelectedApp.prototype.render = function () {
+  const { betaUI } = this.props
+  const { autoAdd } = this.state 
+  const Selected = betaUI ? App : OldApp
+  return h(Selected)
+}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index a5f9a75d8..22ef439c4 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -24,6 +24,8 @@ const selectors = {
   getSendAmount,
   getSelectedTokenToFiatRate,
   getSelectedTokenContract,
+  autoAddToBetaUI,
+  getSendMaxModeState,
 }
 
 module.exports = selectors
@@ -135,6 +137,10 @@ function getSendAmount (state) {
   return state.metamask.send.amount
 }
 
+function getSendMaxModeState (state) {
+  return state.metamask.send.maxModeOn
+}
+
 function getCurrentCurrency (state) {
   return state.metamask.currentCurrency
 }
@@ -158,3 +164,20 @@ function getSelectedTokenContract (state) {
     ? global.eth.contract(abi).at(selectedToken.address)
     : null
 }
+
+function autoAddToBetaUI (state) {
+  const autoAddTransactionThreshold = 12
+  const autoAddAccountsThreshold = 2
+  const autoAddTokensThreshold = 1
+
+  const numberOfTransactions = state.metamask.selectedAddressTxList.length
+  const numberOfAccounts = Object.keys(state.metamask.accounts).length
+  const numberOfTokensAdded = state.metamask.tokens.length
+
+  const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
+    (numberOfAccounts > autoAddAccountsThreshold) &&
+    (numberOfTokensAdded > autoAddTokensThreshold)
+  const userIsNotInBeta = !state.metamask.featureFlags.betaUI
+  
+  return userIsNotInBeta && userPassesThreshold
+}
\ No newline at end of file
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 788ae87b4..e1b88f0db 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -13,8 +13,6 @@ const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
 
 const {
   MIN_GAS_TOTAL,
-  MIN_GAS_PRICE_HEX,
-  MIN_GAS_LIMIT_HEX,
 } = require('./components/send/send-constants')
 
 const {
@@ -313,8 +311,9 @@ SendTransactionScreen.prototype.renderToRow = function () {
 
 SendTransactionScreen.prototype.handleAmountChange = function (value) {
   const amount = value
-  const { updateSendAmount } = this.props
+  const { updateSendAmount, setMaxModeTo } = this.props
 
+  setMaxModeTo(false)
   this.validateAmount(amount)
   updateSendAmount(amount)
 }
@@ -324,11 +323,9 @@ SendTransactionScreen.prototype.setAmountToMax = function () {
     from: { balance },
     updateSendAmount,
     updateSendErrors,
-    updateGasPrice,
-    updateGasLimit,
-    updateGasTotal,
     tokenBalance,
     selectedToken,
+    gasTotal,
   } = this.props
   const { decimals } = selectedToken || {}
   const multiplier = Math.pow(10, Number(decimals || 0))
@@ -337,16 +334,12 @@ SendTransactionScreen.prototype.setAmountToMax = function () {
     ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'})
     : subtractCurrencies(
       ethUtil.addHexPrefix(balance),
-      ethUtil.addHexPrefix(MIN_GAS_TOTAL),
+      ethUtil.addHexPrefix(gasTotal),
       { toNumericBase: 'hex' }
     )
 
   updateSendErrors({ amount: null })
-  if (!selectedToken) {
-    updateGasPrice(MIN_GAS_PRICE_HEX)
-    updateGasLimit(MIN_GAS_LIMIT_HEX)
-    updateGasTotal(MIN_GAS_TOTAL)
-  }
+
   updateSendAmount(maxAmount)
 }
 
@@ -407,19 +400,22 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
     amountConversionRate,
     errors,
     amount,
+    setMaxModeTo,
+    maxModeOn,
   } = this.props
 
   return h('div.send-v2__form-row', [
 
-    h('div.send-v2__form-label', [
+     h('div.send-v2__form-label', [
       'Amount:',
       this.renderErrorMessage('amount'),
       !errors.amount && h('div.send-v2__amount-max', {
         onClick: (event) => {
           event.preventDefault()
+          setMaxModeTo(true)
           this.setAmountToMax()
         },
-      }, [ 'Max' ]),
+      }, [ !maxModeOn ? 'Max' : '' ]),
     ]),
 
     h('div.send-v2__form-field', [
diff --git a/ui/app/settings.js b/ui/app/settings.js
index caa36d2b8..ca7535d26 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -228,6 +228,26 @@ class Settings extends Component {
       ])
     )
   }
+  
+  renderOldUI () {
+    const { setFeatureFlagToBeta } = this.props
+
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', 'Use old UI'),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.settings__clear-button.settings__clear-button--orange', {
+              onClick (event) {
+                event.preventDefault()
+                setFeatureFlagToBeta()
+              },
+            }, 'Use old UI'),
+          ]),
+        ]),
+      ])
+    )
+  }
 
   renderSettingsContent () {
     const { warning } = this.props
@@ -241,10 +261,11 @@ class Settings extends Component {
         this.renderNewRpcUrl(),
         this.renderStateLogs(),
         this.renderSeedWords(),
+        this.renderOldUI(),
       ])
     )
   }
-
+  
   renderLogo () {
     return (
       h('div.settings__info-logo-wrapper', [
@@ -362,6 +383,7 @@ Settings.propTypes = {
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
+  setFeatureFlagToBeta: PropTypes.func,
   warning: PropTypes.string,
   goHome: PropTypes.func,
 }
@@ -381,6 +403,7 @@ const mapDispatchToProps = dispatch => {
     displayWarning: warning => dispatch(actions.displayWarning(warning)),
     revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
     setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+    setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false)),
   }
 }