aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorDan <danjm.com@gmail.com>2018-03-09 13:37:27 +0800
committerDan <danjm.com@gmail.com>2018-03-09 13:37:27 +0800
commit81e72147ef829acbbed85bced7f0eb4533f2fb17 (patch)
tree0e13f8ea4e6fb80fe57e437a466e3f7ae04c6c22 /ui
parent2d6b378bf8f8f0b23ef54b48118b61fb6c7deee1 (diff)
parentf28bbe5b0392a9ae45f7f17fbc979ef796b27d16 (diff)
downloadtangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.tar
tangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.tar.gz
tangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.tar.bz2
tangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.tar.lz
tangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.tar.xz
tangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.tar.zst
tangerine-wallet-browser-81e72147ef829acbbed85bced7f0eb4533f2fb17.zip
Merge branch 'master' into retry-tx-refractor
Diffstat (limited to 'ui')
-rw-r--r--ui/app/accounts/import/index.js15
-rw-r--r--ui/app/actions.js126
-rw-r--r--ui/app/components/dropdowns/components/account-dropdowns.js18
-rw-r--r--ui/app/components/dropdowns/network-dropdown.js8
-rw-r--r--ui/app/components/modals/deposit-ether-modal.js5
-rw-r--r--ui/app/components/modals/modal.js12
-rw-r--r--ui/app/components/shapeshift-form.js10
-rw-r--r--ui/app/css/itcss/components/account-menu.scss5
-rw-r--r--ui/app/css/itcss/components/modal.scss4
-rw-r--r--ui/app/css/itcss/components/new-account.scss10
-rw-r--r--ui/app/css/itcss/settings/variables.scss4
-rw-r--r--ui/app/keychains/hd/restore-vault.js23
-rw-r--r--ui/app/reducers/app.js14
-rw-r--r--ui/app/reducers/metamask.js2
-rw-r--r--ui/app/send-v2.js15
-rw-r--r--ui/app/unlock.js4
16 files changed, 182 insertions, 93 deletions
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index 71eb9ae23..adb52db74 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -35,6 +35,21 @@ AccountImportSubview.prototype.render = function () {
return (
h('div.new-account-import-form', [
+ h('.new-account-import-disclaimer', [
+ h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '),
+ h('span', {
+ style: {
+ cursor: 'pointer',
+ textDecoration: 'underline',
+ },
+ onClick: () => {
+ global.platform.openWindow({
+ url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+ })
+ },
+ }, 'here'),
+ ]),
+
h('div.new-account-import-form__select-section', [
h('div.new-account-import-form__select-label', 'Select Type'),
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 3e050c38c..200946753 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -284,20 +284,43 @@ function goHome () {
// async actions
function tryUnlockMetamask (password) {
- return (dispatch) => {
+ return dispatch => {
dispatch(actions.showLoadingIndication())
dispatch(actions.unlockInProgress())
log.debug(`background.submitPassword`)
- background.submitPassword(password, (err) => {
- dispatch(actions.hideLoadingIndication())
- if (err) {
- dispatch(actions.unlockFailed(err.message))
- } else {
+
+ return new Promise((resolve, reject) => {
+ background.submitPassword(password, error => {
+ if (error) {
+ return reject(error)
+ }
+
+ resolve()
+ })
+ })
+ .then(() => {
dispatch(actions.unlockSucceeded())
+ return forceUpdateMetamaskState(dispatch)
+ })
+ .then(() => {
+ return new Promise((resolve, reject) => {
+ background.verifySeedPhrase(err => {
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ }
+
+ resolve()
+ })
+ })
+ })
+ .then(() => {
dispatch(actions.transitionForward())
- forceUpdateMetamaskState(dispatch)
- }
- })
+ dispatch(actions.hideLoadingIndication())
+ })
+ .catch(err => {
+ dispatch(actions.unlockFailed(err.message))
+ dispatch(actions.hideLoadingIndication())
+ })
}
}
@@ -339,46 +362,53 @@ function createNewVaultAndRestore (password, seed) {
log.debug(`background.createNewVaultAndRestore`)
return new Promise((resolve, reject) => {
- background.createNewVaultAndRestore(password, seed, (err) => {
-
- dispatch(actions.hideLoadingIndication())
-
+ background.createNewVaultAndRestore(password, seed, err => {
if (err) {
- dispatch(actions.displayWarning(err.message))
return reject(err)
}
- dispatch(actions.showAccountsPage())
resolve()
})
})
+ .then(() => dispatch(actions.unMarkPasswordForgotten()))
+ .then(() => {
+ dispatch(actions.showAccountsPage())
+ dispatch(actions.hideLoadingIndication())
+ })
+ .catch(err => {
+ dispatch(actions.displayWarning(err.message))
+ dispatch(actions.hideLoadingIndication())
+ })
}
}
function createNewVaultAndKeychain (password) {
- return (dispatch) => {
+ return dispatch => {
dispatch(actions.showLoadingIndication())
log.debug(`background.createNewVaultAndKeychain`)
return new Promise((resolve, reject) => {
- background.createNewVaultAndKeychain(password, (err) => {
+ background.createNewVaultAndKeychain(password, err => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
+
log.debug(`background.placeSeedWords`)
+
background.placeSeedWords((err) => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
- dispatch(actions.hideLoadingIndication())
- forceUpdateMetamaskState(dispatch)
+
resolve()
})
})
})
-
+ .then(() => forceUpdateMetamaskState(dispatch))
+ .then(() => dispatch(actions.hideLoadingIndication()))
+ .catch(() => dispatch(actions.hideLoadingIndication()))
}
}
@@ -389,18 +419,27 @@ function revealSeedConfirmation () {
}
function requestRevealSeed (password) {
- return (dispatch) => {
+ return dispatch => {
dispatch(actions.showLoadingIndication())
log.debug(`background.submitPassword`)
- background.submitPassword(password, (err) => {
- if (err) {
- return dispatch(actions.displayWarning(err.message))
- }
- log.debug(`background.placeSeedWords`)
- background.placeSeedWords((err, result) => {
- if (err) return dispatch(actions.displayWarning(err.message))
- dispatch(actions.hideLoadingIndication())
- dispatch(actions.showNewVaultSeed(result))
+ return new Promise((resolve, reject) => {
+ background.submitPassword(password, err => {
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ return reject(err)
+ }
+
+ log.debug(`background.placeSeedWords`)
+ background.placeSeedWords((err, result) => {
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ return reject(err)
+ }
+
+ dispatch(actions.showNewVaultSeed(result))
+ dispatch(actions.hideLoadingIndication())
+ resolve()
+ })
})
})
}
@@ -851,11 +890,14 @@ function markPasswordForgotten () {
}
function unMarkPasswordForgotten () {
- return (dispatch) => {
- return background.unMarkPasswordForgotten(() => {
- dispatch(actions.forgotPassword(false))
- forceUpdateMetamaskState(dispatch)
+ return dispatch => {
+ return new Promise(resolve => {
+ background.unMarkPasswordForgotten(() => {
+ dispatch(actions.forgotPassword(false))
+ resolve()
+ })
})
+ .then(() => forceUpdateMetamaskState(dispatch))
}
}
@@ -1500,6 +1542,7 @@ function pairUpdate (coin) {
dispatch(actions.hideWarning())
shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
dispatch(actions.hideSubLoadingIndication())
+ if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
dispatch({
type: actions.PAIR_UPDATE,
value: {
@@ -1705,11 +1748,16 @@ function callBackgroundThenUpdate (method, ...args) {
function forceUpdateMetamaskState (dispatch) {
log.debug(`background.getState`)
- background.getState((err, newState) => {
- if (err) {
- return dispatch(actions.displayWarning(err.message))
- }
- dispatch(actions.updateMetamaskState(newState))
+ return new Promise((resolve, reject) => {
+ background.getState((err, newState) => {
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ return reject(err)
+ }
+
+ dispatch(actions.updateMetamaskState(newState))
+ resolve()
+ })
})
}
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index fa9ffc632..40918cc53 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -134,22 +134,6 @@ class AccountDropdowns extends Component {
]),
]),
-// =======
-// },
-// ),
-// this.indicateIfLoose(keyring),
-// h('span', {
-// style: {
-// marginLeft: '20px',
-// fontSize: '24px',
-// maxWidth: '145px',
-// whiteSpace: 'nowrap',
-// overflow: 'hidden',
-// textOverflow: 'ellipsis',
-// },
-// }, identity.name || ''),
-// h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-// >>>>>>> master:ui/app/components/account-dropdowns.js
]
)
})
@@ -159,7 +143,7 @@ class AccountDropdowns extends Component {
try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type
const isLoose = type !== 'HD Key Tree'
- return isLoose ? h('.keyring-label', 'LOOSE') : null
+ return isLoose ? h('.keyring-label', 'IMPORTED') : null
} catch (e) { return }
}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 9be5cc5d1..ff10c0758 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
- backgroundColor: '#038789', // $blue-lagoon
+ backgroundColor: '#29B6AF', // $java
isSelected: providerType === 'mainnet',
}),
h('span.network-name-item', {
@@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
- backgroundColor: '#e91550', // $crimson
+ backgroundColor: '#ff4a8d', // $wild-strawberry
isSelected: providerType === 'ropsten',
}),
h('span.network-name-item', {
@@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
- backgroundColor: '#690496', // $purple
+ backgroundColor: '#7057ff', // $cornflower-blue
isSelected: providerType === 'kovan',
}),
h('span.network-name-item', {
@@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
h(NetworkDropdownIcon, {
- backgroundColor: '#ebb33f', // $tulip-tree
+ backgroundColor: '#f6c343', // $saffron
isSelected: providerType === 'rinkeby',
}),
h('span.network-name-item', {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..7547dbcf5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) {
hideModal: () => {
dispatch(actions.hideModal())
},
+ hideWarning: () => {
+ dispatch(actions.hideWarning())
+ },
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
@@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () {
h('div.deposit-ether-modal__header__close', {
onClick: () => {
this.setState({ buyingWithShapeshift: false })
+ this.props.hideWarning()
this.props.hideModal()
},
}),
@@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () {
}
DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+ this.props.hideWarning()
this.props.hideModal()
this.props.showAccountDetailModal()
}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 97fe38292..8e9e58985 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -79,6 +79,7 @@ const MODALS = {
contents: [
h(DepositEtherModal, {}, []),
],
+ onHide: (props) => props.hideWarning(),
mobileModalStyle: {
width: '100%',
height: '100%',
@@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) {
hideModal: () => {
dispatch(actions.hideModal())
},
+ hideWarning: () => {
+ dispatch(actions.hideWarning())
+ },
+
}
}
@@ -308,7 +313,12 @@ Modal.prototype.render = function () {
{
className: 'modal',
keyboard: false,
- onHide: () => { this.onHide() },
+ onHide: () => {
+ if (modal.onHide) {
+ modal.onHide(this.props)
+ }
+ this.onHide()
+ },
ref: (ref) => {
this.modalRef = ref
},
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 648b05049..87eb1588a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -14,11 +14,13 @@ function mapStateToProps (state) {
tokenExchangeRates,
selectedAddress,
} = state.metamask
+ const { warning } = state.appState
return {
coinOptions,
tokenExchangeRates,
selectedAddress,
+ warning,
}
}
@@ -163,7 +165,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
ShapeshiftForm.prototype.render = function () {
- const { coinOptions, btnClass } = this.props
+ const { coinOptions, btnClass, warning } = this.props
const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
const coinPair = `${depositCoin}_eth`
const { tokenExchangeRates } = this.props
@@ -206,7 +208,9 @@ ShapeshiftForm.prototype.render = function () {
]),
- h('div', {
+ warning && h('div.shapeshift-form__address-input-label', warning),
+
+ !warning && h('div', {
className: classnames('shapeshift-form__address-input-wrapper', {
'shapeshift-form__address-input-wrapper--error': errorMessage,
}),
@@ -227,7 +231,7 @@ ShapeshiftForm.prototype.render = function () {
h('divshapeshift-form__address-input-error-message', [errorMessage]),
]),
- this.renderMarketInfo(),
+ !warning && this.renderMarketInfo(),
]),
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 8ad7481c7..4752741aa 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -66,8 +66,9 @@
.keyring-label {
margin-top: 5px;
- background-color: $black;
- color: $dusty-gray;
+ background-color: $dusty-gray;
+ color: $black;
+ font-weight: normal;
}
}
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 919e1793b..53e3bff00 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -787,6 +787,10 @@
width: auto;
flex: 1;
}
+
+ @media screen and (max-width: 575px) {
+ width: auto;
+ }
}
}
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 81f919df3..c6c254ede 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -54,6 +54,16 @@
}
+.new-account-import-disclaimer {
+ width: 120%;
+ background-color: #F4F9FC;
+ display: inline-block;
+ align-items: center;
+ padding: 20px 30px 20px;
+ font-size: 12px;
+ line-height: 1.5;
+}
+
.new-account-import-form {
display: flex;
flex-flow: column;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 1b5f1a491..640fd95b8 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -47,6 +47,10 @@ $spindle: #c7ddec;
$mid-gray: #5b5d67;
$cape-cod: #38393a;
$onahau: #d1edff;
+$java: #29b6af;
+$wild-strawberry: #ff4a8d;
+$cornflower-blue: #7057ff;
+$saffron: #f6c343;
/*
Z-Indicies
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index a4ed137f9..d1761f17d 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -107,12 +107,15 @@ RestoreVaultScreen.prototype.render = function () {
}
RestoreVaultScreen.prototype.showInitializeMenu = function () {
- this.props.dispatch(actions.unMarkPasswordForgotten())
- if (this.props.forgottenPassword) {
- this.props.dispatch(actions.backToUnlockView())
- } else {
- this.props.dispatch(actions.showInitializeMenu())
- }
+ const { dispatch, forgottenPassword } = this.props
+ dispatch(actions.unMarkPasswordForgotten())
+ .then(() => {
+ if (forgottenPassword) {
+ dispatch(actions.backToUnlockView())
+ } else {
+ dispatch(actions.showInitializeMenu())
+ }
+ })
}
RestoreVaultScreen.prototype.createOnEnter = function (event) {
@@ -150,11 +153,5 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
this.warning = null
this.props.dispatch(actions.displayWarning(this.warning))
this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
- .then(() => {
- this.props.dispatch(actions.unMarkPasswordForgotten())
- })
- .catch((err) => {
- log.error(err.message)
- })
-
+ .catch(err => log.error(err.message))
}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 4dda839a2..74a0f9299 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -138,14 +138,18 @@ function reduceApp (state, action) {
})
case actions.FORGOT_PASSWORD:
- return extend(appState, {
- currentView: {
- name: action.value ? 'restoreVault' : 'accountDetail',
- },
- transForward: false,
+ const newState = extend(appState, {
forgottenPassword: action.value,
})
+ if (action.value) {
+ newState.currentView = {
+ name: 'restoreVault',
+ }
+ }
+
+ return newState
+
case actions.SHOW_INIT_MENU:
return extend(appState, {
currentView: defaultView,
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 999939b89..b27e7140a 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -132,8 +132,6 @@ function reduceMetamask (state, action) {
case actions.SHOW_NEW_VAULT_SEED:
return extend(metamaskState, {
- isUnlocked: true,
- isInitialized: false,
isRevealingSeedWords: true,
seedWords: action.value,
})
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index edb6bc41d..697dfc517 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -361,8 +361,9 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
})
}
+ const verifyTokenBalance = selectedToken && tokenBalance !== null
let sufficientTokens
- if (selectedToken) {
+ if (verifyTokenBalance) {
sufficientTokens = isTokenBalanceSufficient({
tokenBalance,
amount,
@@ -377,7 +378,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
if (conversionRate && !sufficientBalance) {
amountError = 'Insufficient funds.'
- } else if (selectedToken && !sufficientTokens) {
+ } else if (verifyTokenBalance && !sufficientTokens) {
amountError = 'Insufficient tokens.'
} else if (amountLessThanZero) {
amountError = 'Can not send negative amounts of ETH.'
@@ -396,14 +397,15 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
amount,
setMaxModeTo,
maxModeOn,
+ gasTotal,
} = 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', {
+ !errors.amount && gasTotal && h('div.send-v2__amount-max', {
onClick: (event) => {
event.preventDefault()
setMaxModeTo(true)
@@ -491,9 +493,12 @@ SendTransactionScreen.prototype.renderFooter = function () {
goHome,
clearSend,
gasTotal,
+ tokenBalance,
+ selectedToken,
errors: { amount: amountError, to: toError },
} = this.props
+ const missingTokenBalance = selectedToken && !tokenBalance
const noErrors = !amountError && toError === null
return h('div.page-container__footer', [
@@ -504,7 +509,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
},
}, 'Cancel'),
h('button.btn-clear.page-container__footer-button', {
- disabled: !noErrors || !gasTotal,
+ disabled: !noErrors || !gasTotal || missingTokenBalance,
onClick: event => this.onSubmit(event),
}, 'Next'),
])
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 13c3f1274..cafe3a859 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -71,7 +71,7 @@ UnlockScreen.prototype.render = function () {
style: {
margin: 10,
},
- }, 'Unlock'),
+ }, 'Log In'),
]),
h('.flex-row.flex-center.flex-grow', [
@@ -104,7 +104,7 @@ UnlockScreen.prototype.render = function () {
},
}, 'Use classic interface'),
]),
-
+
])
)
}