Merge branch 'NewUI-flat' into uat

feature/default_network_editable
Chi Kei Chan 7 years ago
commit 60f4e9c5f1
  1. 5
      ui/app/add-token.js
  2. 3
      ui/app/app.js
  3. 2
      ui/app/components/buy-button-subview.js
  4. 75
      ui/app/components/loading.js
  5. 4
      ui/app/components/pending-tx/confirm-deploy-contract.js
  6. 2
      ui/app/components/pending-tx/confirm-send-ether.js
  7. 14
      ui/app/components/pending-tx/confirm-send-token.js
  8. 12
      ui/app/components/send/currency-display.js
  9. 8
      ui/app/components/token-cell.js
  10. 4
      ui/app/conf-tx.js
  11. 7
      ui/app/send-v2.js

@ -7,7 +7,9 @@ const Fuse = require('fuse.js')
const contractMap = require('eth-contract-metadata')
const TokenBalance = require('./components/token-balance')
const Identicon = require('./components/identicon')
const contractList = Object.entries(contractMap).map(([ _, tokenData]) => tokenData)
const contractList = Object.entries(contractMap)
.map(([ _, tokenData]) => tokenData)
.filter(tokenData => Boolean(tokenData.erc20))
const fuse = new Fuse(contractList, {
shouldSort: true,
threshold: 0.45,
@ -105,6 +107,7 @@ AddTokenScreen.prototype.tokenAddressDidChange = function (e) {
}
AddTokenScreen.prototype.checkExistingAddresses = function (address) {
if (!address) return false
const tokensList = this.props.tokens
const matchesAddress = existingToken => {
return existingToken.address.toLowerCase() === address.toLowerCase()

@ -137,8 +137,7 @@ App.prototype.render = function () {
h(AccountMenu),
h(Loading, {
isLoading: isLoading || isLoadingNetwork,
(isLoading || isLoadingNetwork) && h(Loading, {
loadingMessage: loadMessage,
}),

@ -87,7 +87,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
left: '49vw',
},
}, [
h(Loading, { isLoading }),
isLoading && h(Loading),
]),
// account panel

@ -1,45 +1,38 @@
const inherits = require('util').inherits
const Component = require('react').Component
const { Component } = require('react')
const h = require('react-hyperscript')
inherits(LoadingIndicator, Component)
module.exports = LoadingIndicator
function LoadingIndicator () {
Component.call(this)
}
LoadingIndicator.prototype.render = function () {
const { isLoading, loadingMessage } = this.props
return (
isLoading ? h('.full-flex-height', {
style: {
left: '0px',
zIndex: 10,
position: 'absolute',
flexDirection: 'column',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
width: '100%',
background: 'rgba(255, 255, 255, 0.8)',
},
}, [
h('img', {
src: 'images/loading.svg',
}),
h('br'),
showMessageIfAny(loadingMessage),
]) : null
)
class LoadingIndicator extends Component {
renderMessage () {
const { loadingMessage } = this.props
return loadingMessage && h('span', loadingMessage)
}
render () {
return (
h('.full-flex-height', {
style: {
left: '0px',
zIndex: 50,
position: 'absolute',
flexDirection: 'column',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
width: '100%',
background: 'rgba(255, 255, 255, 0.8)',
},
}, [
h('img', {
src: 'images/loading.svg',
}),
h('br'),
this.renderMessage(),
])
)
}
}
function showMessageIfAny (loadingMessage) {
if (!loadingMessage) return null
return h('span', loadingMessage)
}
module.exports = LoadingIndicator

@ -195,14 +195,16 @@ ConfirmDeployContract.prototype.getGasFee = function () {
eth: Number(ETH),
}
}
ConfirmDeployContract.prototype.renderGasFee = function () {
const { currentCurrency } = this.props
const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
return (
h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${fiatGas} FIAT`),
h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
h(
'div.confirm-screen-row-detail',

@ -241,7 +241,7 @@ ConfirmSendEther.prototype.render = function () {
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
// ]),
h('h3.flex-center.confirm-screen-send-amount', [`$${amountInFIAT}`]),
h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
h('div.flex-center.confirm-memo-wrapper', [
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),

@ -36,6 +36,7 @@ function mapStateToProps (state, ownProps) {
const {
conversionRate,
identities,
currentCurrency,
} = state.metamask
const accounts = state.metamask.accounts
const selectedAddress = getSelectedAddress(state)
@ -47,6 +48,7 @@ function mapStateToProps (state, ownProps) {
selectedAddress,
tokenExchangeRate,
tokenData: tokenData || {},
currentCurrency: currentCurrency.toUpperCase(),
}
}
@ -83,7 +85,9 @@ ConfirmSendToken.prototype.getAmount = function () {
fiat: tokenExchangeRate
? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
: null,
token: +sendTokenAmount.toFixed(decimals),
token: typeof value === 'undefined'
? 'Unknown'
: +sendTokenAmount.toFixed(decimals),
}
}
@ -101,7 +105,7 @@ ConfirmSendToken.prototype.getGasFee = function () {
multiplierBase: 16,
})
const FIAT = conversionUtil(txFeeBn, {
const FIAT = conversionUtil(gasTotal, {
fromNumericBase: 'BN',
toNumericBase: 'dec',
fromDenomination: 'WEI',
@ -211,8 +215,6 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
const tokenTotal = addCurrencies(tokenAmount, tokenGas || '0')
return fiatAmount && fiatGas
? (
h('section.flex-row.flex-center.confirm-screen-total-box ', [
@ -223,7 +225,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`),
h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`),
h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`),
]),
])
)
@ -319,7 +321,7 @@ ConfirmSendToken.prototype.render = function () {
]),
]),
h('section.flex-row.flex-center.confirm-screen-row', [
toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
h('div.confirm-screen-section-column', [
h('div.confirm-screen-row-info', toName),

@ -36,6 +36,16 @@ function toHexWei (value) {
})
}
CurrencyDisplay.prototype.getAmount = function (value) {
const { selectedToken } = this.props
const { decimals } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
const sendAmount = '0x' + Number(value * multiplier).toString(16)
return selectedToken
? sendAmount
: toHexWei(value)
}
CurrencyDisplay.prototype.render = function () {
const {
className = 'currency-display',
@ -102,7 +112,7 @@ CurrencyDisplay.prototype.render = function () {
this.setState({ value: newValue })
}
},
onBlur: event => !readOnly && handleChange(toHexWei(event.target.value.split(' ')[0])),
onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value.split(' ')[0])),
onKeyUp: event => {
if (!readOnly) {
validate(toHexWei(value || initValueToRender))

@ -13,6 +13,7 @@ const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
function mapStateToProps (state) {
return {
network: state.metamask.network,
currentCurrency: state.metamask.currentCurrency,
selectedTokenAddress: state.metamask.selectedTokenAddress,
userAddress: selectors.getSelectedAddress(state),
tokenExchangeRates: state.metamask.tokenExchangeRates,
@ -63,18 +64,19 @@ TokenCell.prototype.render = function () {
ethToUSDRate,
hideSidebar,
sidebarOpen,
currentCurrency,
// userAddress,
} = props
const pair = `${symbol.toLowerCase()}_eth`;
let currentTokenToEthRate;
let currentTokenInUSD;
let currentTokenInFiat;
let formattedUSD = ''
if (tokenExchangeRates[pair]) {
currentTokenToEthRate = tokenExchangeRates[pair].rate;
currentTokenInUSD = conversionUtil(string, {
currentTokenInFiat = conversionUtil(string, {
fromNumericBase: 'dec',
fromCurrency: symbol,
toCurrency: 'USD',
@ -82,7 +84,7 @@ TokenCell.prototype.render = function () {
conversionRate: currentTokenToEthRate,
ethToUSDRate,
})
formattedUSD = `$${currentTokenInUSD} USD`;
formattedUSD = `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`;
}
return (

@ -84,7 +84,7 @@ ConfirmTxScreen.prototype.render = function () {
*/
log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
if (unconfTxList.length === 0) return h(Loading, { isLoading: true })
if (unconfTxList.length === 0) return h(Loading)
return currentTxView({
// Properties
@ -130,7 +130,7 @@ function currentTxView (opts) {
return h(PendingTypedMsg, opts)
}
}
return h(Loading, { isLoading: true })
return h(Loading)
}
ConfirmTxScreen.prototype.buyEth = function (address, event) {

@ -296,6 +296,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
inError: Boolean(errors.amount),
primaryCurrency,
convertedCurrency,
selectedToken,
value: amount,
conversionRate: amountConversionRate,
handleChange: this.handleAmountChange,
@ -326,14 +327,14 @@ SendTransactionScreen.prototype.renderGasRow = function () {
convertedCurrency,
onClick: showCustomizeGasModal,
}),
h('div.send-v2__sliders-icon-container', {
onClick: showCustomizeGasModal,
}, [
h('i.fa.fa-sliders.send-v2__sliders-icon'),
]),
]),
]),
])
}
@ -350,7 +351,7 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
h(MemoTextArea, {
memo,
onChange: (event) => updateSendMemo(event.target.value),
})
}),
]),
])

Loading…
Cancel
Save