Merge pull request #615 from MetaMask/ModularFiatBalance
Add fiat conversion to tx confirmation viewfeature/default_network_editable
Kevin Serrano
8 years ago
committed by
GitHub
commit
80847739b2
File diff suppressed because one or more lines are too long
@ -1 +1,93 @@ |
||||
{"metamask":{"isInitialized":true,"isUnlocked":true,"currentDomain":"example.com","rpcTarget":"https://rawtestrpc.metamask.io/","identities":{"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825":{"name":"Wallet 1","address":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825","mayBeFauceting":false},"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb":{"name":"Wallet 2","address":"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb","mayBeFauceting":false},"0x2f8d4a878cfa04a6e60d46362f5644deab66572d":{"name":"Wallet 3","address":"0x2f8d4a878cfa04a6e60d46362f5644deab66572d","mayBeFauceting":false}},"unconfTxs":{"1467868023090690":{"id":1467868023090690,"txParams":{"data":"0xa9059cbb0000000000000000000000008deb4d106090c3eb8f1950f727e87c4f884fb06f0000000000000000000000000000000000000000000000000000000000000064","from":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825","value":"0x16345785d8a0000","to":"0xbeb0ed3034c4155f3d16a64a5c5e7c8d4ea9e9c9","origin":"MetaMask","metamaskId":1467868023090690,"metamaskNetworkId":"2"},"time":1467868023090,"status":"unconfirmed","containsDelegateCall":false}},"accounts":{"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825":{"code":"0x","balance":"0x38326dc32cf80800","nonce":"0x10000c","address":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"},"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb":{"code":"0x","balance":"0x15e578bd8e9c8000","nonce":"0x100000","address":"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb"},"0x2f8d4a878cfa04a6e60d46362f5644deab66572d":{"code":"0x","nonce":"0x100000","balance":"0x2386f26fc10000","address":"0x2f8d4a878cfa04a6e60d46362f5644deab66572d"}},"transactions":[],"selectedAddress":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825","network":"2","seedWords":null,"isConfirmed":true,"unconfMsgs":{},"messages":[],"provider":{"type":"testnet"},"selectedAccount":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"},"appState":{"menuOpen":false,"currentView":{"name":"confTx","context":0},"accountDetail":{"subview":"transactions"},"currentDomain":"extensions","transForward":true,"isLoading":false,"warning":null},"identities":{}} |
||||
{ |
||||
"metamask": { |
||||
"currentFiat": "USD", |
||||
"conversionRate": 11.06608791, |
||||
"conversionDate": 1470421024, |
||||
"isInitialized": true, |
||||
"isInitialized": true, |
||||
"isUnlocked": true, |
||||
"isEthConfirmed": false, |
||||
"currentDomain": "example.com", |
||||
"rpcTarget": "https://rawtestrpc.metamask.io/", |
||||
"identities": { |
||||
"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": { |
||||
"name": "Wallet 1", |
||||
"address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", |
||||
"mayBeFauceting": false |
||||
}, |
||||
"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": { |
||||
"name": "Wallet 2", |
||||
"address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb", |
||||
"mayBeFauceting": false |
||||
}, |
||||
"0x2f8d4a878cfa04a6e60d46362f5644deab66572d": { |
||||
"name": "Wallet 3", |
||||
"address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d", |
||||
"mayBeFauceting": false |
||||
} |
||||
}, |
||||
"unconfTxs": { |
||||
"1473207765149885": { |
||||
"id": 1473207765149885, |
||||
"txParams": { |
||||
"from": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", |
||||
"value": "0x16345785d8a0000", |
||||
"to": "0xC5b8dBAc4c1d3F152cDeb400E2313F309c410aCb", |
||||
"origin": "MetaMask", |
||||
"metamaskId": 1473207765149885, |
||||
"metamaskNetworkId": "1473186153102" |
||||
}, |
||||
"time": 1473207765149, |
||||
"status": "unconfirmed", |
||||
"containsDelegateCall": false, |
||||
"estimatedGas": "0x5208" |
||||
} |
||||
}, |
||||
"accounts": { |
||||
"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825": { |
||||
"code": "0x", |
||||
"balance": "0x38326dc32cf80800", |
||||
"nonce": "0x10000c", |
||||
"address": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825" |
||||
}, |
||||
"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb": { |
||||
"code": "0x", |
||||
"balance": "0x15e578bd8e9c8000", |
||||
"nonce": "0x100000", |
||||
"address": "0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb" |
||||
}, |
||||
"0x2f8d4a878cfa04a6e60d46362f5644deab66572d": { |
||||
"code": "0x", |
||||
"nonce": "0x100000", |
||||
"balance": "0x2386f26fc10000", |
||||
"address": "0x2f8d4a878cfa04a6e60d46362f5644deab66572d" |
||||
} |
||||
}, |
||||
"transactions": [], |
||||
"selectedAddress": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825", |
||||
"network": "2", |
||||
"seedWords": null, |
||||
"isConfirmed": true, |
||||
"unconfMsgs": {}, |
||||
"messages": [], |
||||
"provider": { |
||||
"type": "testnet" |
||||
}, |
||||
"selectedAccount": "0xfdea65c8e26263f6d9a1b5de9555d2931a33b825" |
||||
}, |
||||
"appState": { |
||||
"menuOpen": false, |
||||
"currentView": { |
||||
"name": "confTx", |
||||
"context": 0 |
||||
}, |
||||
"accountDetail": { |
||||
"subview": "transactions" |
||||
}, |
||||
"currentDomain": "extensions", |
||||
"transForward": true, |
||||
"isLoading": false, |
||||
"warning": null |
||||
}, |
||||
"identities": {} |
||||
} |
||||
|
||||
@ -1,140 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const connect = require('react-redux').connect |
||||
const formatBalance = require('../util').formatBalance |
||||
const generateBalanceObject = require('../util').generateBalanceObject |
||||
const Tooltip = require('./tooltip.js') |
||||
|
||||
module.exports = connect(mapStateToProps)(EthBalanceComponent) |
||||
|
||||
function mapStateToProps (state) { |
||||
return { |
||||
conversionRate: state.metamask.conversionRate, |
||||
conversionDate: state.metamask.conversionDate, |
||||
currentFiat: state.metamask.currentFiat, |
||||
} |
||||
} |
||||
|
||||
inherits(EthBalanceComponent, Component) |
||||
function EthBalanceComponent () { |
||||
Component.call(this) |
||||
} |
||||
|
||||
EthBalanceComponent.prototype.render = function () { |
||||
var state = this.props |
||||
var style = state.style |
||||
|
||||
const value = formatBalance(state.value, 6) |
||||
var width = state.width |
||||
|
||||
return ( |
||||
|
||||
h('.ether-balance', { |
||||
style: style, |
||||
}, [ |
||||
h('.ether-balance-amount', { |
||||
style: { |
||||
display: 'inline', |
||||
width: width, |
||||
}, |
||||
}, this.renderBalance(value, state)), |
||||
]) |
||||
|
||||
) |
||||
} |
||||
EthBalanceComponent.prototype.renderBalance = function (value, state) { |
||||
if (value === 'None') return value |
||||
var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) |
||||
var balance, fiatDisplayNumber, fiatTooltipNumber |
||||
var splitBalance = value.split(' ') |
||||
var ethNumber = splitBalance[0] |
||||
var ethSuffix = splitBalance[1] |
||||
|
||||
|
||||
if (state.conversionRate !== 0) { |
||||
fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate |
||||
fiatDisplayNumber = fiatTooltipNumber.toFixed(2) |
||||
} else { |
||||
fiatDisplayNumber = 'N/A' |
||||
} |
||||
|
||||
var fiatSuffix = state.currentFiat |
||||
|
||||
if (state.shorten) { |
||||
balance = balanceObj.shortBalance |
||||
} else { |
||||
balance = balanceObj.balance |
||||
} |
||||
|
||||
var label = balanceObj.label |
||||
|
||||
return ( |
||||
h('.flex-column', [ |
||||
h(Tooltip, { |
||||
position: 'bottom', |
||||
title: `${ethNumber} ${ethSuffix}`, |
||||
}, [ |
||||
h('.flex-row', { |
||||
style: { |
||||
alignItems: 'flex-end', |
||||
lineHeight: '13px', |
||||
fontFamily: 'Montserrat Light', |
||||
textRendering: 'geometricPrecision', |
||||
marginBottom: '5px', |
||||
}, |
||||
}, [ |
||||
h('div', { |
||||
style: { |
||||
width: '100%', |
||||
textAlign: 'right', |
||||
}, |
||||
}, balance), |
||||
h('div', { |
||||
style: { |
||||
color: '#AEAEAE', |
||||
marginLeft: '5px', |
||||
}, |
||||
}, label), |
||||
]), |
||||
]), |
||||
h(Tooltip, { |
||||
position: 'bottom', |
||||
title: `${fiatTooltipNumber} ${fiatSuffix}`, |
||||
}, [ |
||||
fiatDisplay(fiatDisplayNumber, fiatSuffix), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
function fiatDisplay (fiatDisplayNumber, fiatSuffix) { |
||||
if (fiatDisplayNumber !== 'N/A') { |
||||
return h('.flex-row', { |
||||
style: { |
||||
alignItems: 'flex-end', |
||||
lineHeight: '13px', |
||||
fontFamily: 'Montserrat Light', |
||||
textRendering: 'geometricPrecision', |
||||
}, |
||||
}, [ |
||||
h('div', { |
||||
style: { |
||||
width: '100%', |
||||
textAlign: 'right', |
||||
fontSize: '12px', |
||||
color: '#333333', |
||||
}, |
||||
}, fiatDisplayNumber), |
||||
h('div', { |
||||
style: { |
||||
color: '#AEAEAE', |
||||
marginLeft: '5px', |
||||
fontSize: '12px', |
||||
}, |
||||
}, fiatSuffix), |
||||
]) |
||||
} else { |
||||
return h('div') |
||||
} |
||||
} |
||||
@ -0,0 +1,71 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const connect = require('react-redux').connect |
||||
const formatBalance = require('../util').formatBalance |
||||
|
||||
module.exports = connect(mapStateToProps)(FiatValue) |
||||
|
||||
function mapStateToProps (state) { |
||||
return { |
||||
conversionRate: state.metamask.conversionRate, |
||||
currentFiat: state.metamask.currentFiat, |
||||
} |
||||
} |
||||
|
||||
inherits(FiatValue, Component) |
||||
function FiatValue () { |
||||
Component.call(this) |
||||
} |
||||
|
||||
FiatValue.prototype.render = function () { |
||||
const props = this.props |
||||
const value = formatBalance(props.value, 6) |
||||
|
||||
if (value === 'None') return value |
||||
var fiatDisplayNumber, fiatTooltipNumber |
||||
var splitBalance = value.split(' ') |
||||
|
||||
if (props.conversionRate !== 0) { |
||||
fiatTooltipNumber = Number(splitBalance[0]) * props.conversionRate |
||||
fiatDisplayNumber = fiatTooltipNumber.toFixed(2) |
||||
} else { |
||||
fiatDisplayNumber = 'N/A' |
||||
fiatTooltipNumber = 'Unknown' |
||||
} |
||||
|
||||
var fiatSuffix = props.currentFiat |
||||
|
||||
return fiatDisplay(fiatDisplayNumber, fiatSuffix) |
||||
} |
||||
|
||||
function fiatDisplay (fiatDisplayNumber, fiatSuffix) { |
||||
if (fiatDisplayNumber !== 'N/A') { |
||||
return h('.flex-row', { |
||||
style: { |
||||
alignItems: 'flex-end', |
||||
lineHeight: '13px', |
||||
fontFamily: 'Montserrat Light', |
||||
textRendering: 'geometricPrecision', |
||||
}, |
||||
}, [ |
||||
h('div', { |
||||
style: { |
||||
width: '100%', |
||||
textAlign: 'right', |
||||
fontSize: '12px', |
||||
color: '#333333', |
||||
}, |
||||
}, fiatDisplayNumber), |
||||
h('div', { |
||||
style: { |
||||
color: '#AEAEAE', |
||||
marginLeft: '5px', |
||||
fontSize: '12px', |
||||
}, |
||||
}, fiatSuffix), |
||||
]) |
||||
} else { |
||||
return h('div') |
||||
} |
||||
} |
||||
Loading…
Reference in new issue