mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Adding Token transaction detail screen
This commit is contained in:
parent
690ddf5ed7
commit
f1fb9e10a0
ui/app
@ -83,6 +83,8 @@ var actions = {
|
|||||||
hideWarning: hideWarning,
|
hideWarning: hideWarning,
|
||||||
// accounts screen
|
// accounts screen
|
||||||
SET_SELECTED_ACCOUNT: 'SET_SELECTED_ACCOUNT',
|
SET_SELECTED_ACCOUNT: 'SET_SELECTED_ACCOUNT',
|
||||||
|
SET_SELECTED_TOKEN: 'SET_SELECTED_TOKEN',
|
||||||
|
setSelectedToken,
|
||||||
SHOW_ACCOUNT_DETAIL: 'SHOW_ACCOUNT_DETAIL',
|
SHOW_ACCOUNT_DETAIL: 'SHOW_ACCOUNT_DETAIL',
|
||||||
SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
|
SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
|
||||||
SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
|
SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
|
||||||
@ -585,6 +587,13 @@ function setCurrentAccountTab (newTabName) {
|
|||||||
return callBackgroundThenUpdateNoSpinner(background.setCurrentAccountTab, newTabName)
|
return callBackgroundThenUpdateNoSpinner(background.setCurrentAccountTab, newTabName)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setSelectedToken (tokenAddress) {
|
||||||
|
return {
|
||||||
|
type: actions.SET_SELECTED_TOKEN,
|
||||||
|
value: tokenAddress || null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function showAccountDetail (address) {
|
function showAccountDetail (address) {
|
||||||
return (dispatch) => {
|
return (dispatch) => {
|
||||||
dispatch(actions.showLoadingIndication())
|
dispatch(actions.showLoadingIndication())
|
||||||
|
@ -2,13 +2,19 @@ const Component = require('react').Component
|
|||||||
const connect = require('react-redux').connect
|
const connect = require('react-redux').connect
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
|
const TokenBalance = require('./token-balance')
|
||||||
|
|
||||||
const { formatBalance, generateBalanceObject } = require('../util')
|
const { formatBalance, generateBalanceObject } = require('../util')
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(BalanceComponent)
|
module.exports = connect(mapStateToProps)(BalanceComponent)
|
||||||
|
|
||||||
function mapStateToProps (state) {
|
function mapStateToProps (state) {
|
||||||
|
const accounts = state.metamask.accounts
|
||||||
|
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
|
||||||
|
const account = accounts[selectedAddress]
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
account,
|
||||||
conversionRate: state.metamask.conversionRate,
|
conversionRate: state.metamask.conversionRate,
|
||||||
currentCurrency: state.metamask.currentCurrency,
|
currentCurrency: state.metamask.currentCurrency,
|
||||||
}
|
}
|
||||||
@ -21,9 +27,8 @@ function BalanceComponent () {
|
|||||||
|
|
||||||
BalanceComponent.prototype.render = function () {
|
BalanceComponent.prototype.render = function () {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
const { balanceValue } = props
|
// const { balanceValue } = props
|
||||||
const needsParse = 'needsParse' in props ? props.needsParse : true
|
const { token } = props
|
||||||
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
|
|
||||||
|
|
||||||
return h('div.balance-container', {}, [
|
return h('div.balance-container', {}, [
|
||||||
|
|
||||||
@ -33,13 +38,24 @@ BalanceComponent.prototype.render = function () {
|
|||||||
style: {},
|
style: {},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
this.renderBalance(formattedBalance),
|
token ? this.renderTokenBalance() : this.renderBalance(),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
BalanceComponent.prototype.renderBalance = function (formattedBalance) {
|
BalanceComponent.prototype.renderTokenBalance = function () {
|
||||||
|
const { token } = this.props
|
||||||
|
|
||||||
|
return h('div.flex-column.balance-display', [
|
||||||
|
h('div.token-amount', [ h(TokenBalance, { token }) ]),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
BalanceComponent.prototype.renderBalance = function () {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
const { shorten } = props
|
const { shorten, account } = props
|
||||||
|
const balanceValue = account && account.balance
|
||||||
|
const needsParse = 'needsParse' in props ? props.needsParse : true
|
||||||
|
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
|
||||||
const showFiat = 'showFiat' in props ? props.showFiat : true
|
const showFiat = 'showFiat' in props ? props.showFiat : true
|
||||||
|
|
||||||
if (formattedBalance === 'None' || formattedBalance === '...') {
|
if (formattedBalance === 'None' || formattedBalance === '...') {
|
||||||
|
104
ui/app/components/token-balance.js
Normal file
104
ui/app/components/token-balance.js
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
const Component = require('react').Component
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const inherits = require('util').inherits
|
||||||
|
const TokenTracker = require('eth-token-tracker')
|
||||||
|
const connect = require('react-redux').connect
|
||||||
|
const selectors = require('../selectors')
|
||||||
|
|
||||||
|
function mapStateToProps (state) {
|
||||||
|
return {
|
||||||
|
userAddress: selectors.getSelectedAddress(state),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps)(TokenBalance)
|
||||||
|
|
||||||
|
|
||||||
|
inherits(TokenBalance, Component)
|
||||||
|
function TokenBalance () {
|
||||||
|
this.state = {
|
||||||
|
balance: '',
|
||||||
|
isLoading: true,
|
||||||
|
error: null,
|
||||||
|
}
|
||||||
|
Component.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenBalance.prototype.render = function () {
|
||||||
|
const state = this.state
|
||||||
|
const { balance, isLoading } = state
|
||||||
|
|
||||||
|
return isLoading
|
||||||
|
? h('span', '')
|
||||||
|
: h('span', balance)
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenBalance.prototype.componentDidMount = function () {
|
||||||
|
this.createFreshTokenTracker()
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenBalance.prototype.createFreshTokenTracker = function () {
|
||||||
|
if (this.tracker) {
|
||||||
|
// Clean up old trackers when refreshing:
|
||||||
|
this.tracker.stop()
|
||||||
|
this.tracker.removeListener('update', this.balanceUpdater)
|
||||||
|
this.tracker.removeListener('error', this.showError)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!global.ethereumProvider) return
|
||||||
|
const { userAddress, token } = this.props
|
||||||
|
|
||||||
|
this.tracker = new TokenTracker({
|
||||||
|
userAddress,
|
||||||
|
provider: global.ethereumProvider,
|
||||||
|
tokens: [token],
|
||||||
|
pollingInterval: 8000,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// Set up listener instances for cleaning up
|
||||||
|
this.balanceUpdater = this.updateBalance.bind(this)
|
||||||
|
this.showError = error => {
|
||||||
|
this.setState({ error, isLoading: false })
|
||||||
|
}
|
||||||
|
this.tracker.on('update', this.balanceUpdater)
|
||||||
|
this.tracker.on('error', this.showError)
|
||||||
|
|
||||||
|
this.tracker.updateBalances()
|
||||||
|
.then(() => {
|
||||||
|
this.updateBalance(this.tracker.serialize())
|
||||||
|
})
|
||||||
|
.catch((reason) => {
|
||||||
|
log.error(`Problem updating balances`, reason)
|
||||||
|
this.setState({ isLoading: false })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenBalance.prototype.componentDidUpdate = function (nextProps) {
|
||||||
|
const {
|
||||||
|
userAddress: oldAddress,
|
||||||
|
} = this.props
|
||||||
|
const {
|
||||||
|
userAddress: newAddress,
|
||||||
|
} = nextProps
|
||||||
|
|
||||||
|
if (!oldAddress || !newAddress) return
|
||||||
|
if (oldAddress === newAddress) return
|
||||||
|
|
||||||
|
this.setState({ isLoading: true })
|
||||||
|
this.createFreshTokenTracker()
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenBalance.prototype.updateBalance = function (tokens = []) {
|
||||||
|
const [{ string }] = tokens
|
||||||
|
this.setState({
|
||||||
|
balance: string,
|
||||||
|
isLoading: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenBalance.prototype.componentWillUnmount = function () {
|
||||||
|
if (!this.tracker) return
|
||||||
|
this.tracker.stop()
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,27 @@
|
|||||||
const Component = require('react').Component
|
const Component = require('react').Component
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
|
const connect = require('react-redux').connect
|
||||||
const Identicon = require('./identicon')
|
const Identicon = require('./identicon')
|
||||||
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
|
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
|
||||||
|
const selectors = require('../selectors')
|
||||||
|
const actions = require('../actions')
|
||||||
|
|
||||||
module.exports = TokenCell
|
function mapStateToProps (state) {
|
||||||
|
return {
|
||||||
|
network: state.metamask.network,
|
||||||
|
selectedTokenAddress: state.metamask.selectedTokenAddress,
|
||||||
|
userAddress: selectors.getSelectedAddress(state),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps (dispatch) {
|
||||||
|
return {
|
||||||
|
setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
|
||||||
|
|
||||||
inherits(TokenCell, Component)
|
inherits(TokenCell, Component)
|
||||||
function TokenCell () {
|
function TokenCell () {
|
||||||
@ -18,13 +35,17 @@ TokenCell.prototype.render = function () {
|
|||||||
symbol,
|
symbol,
|
||||||
string,
|
string,
|
||||||
network,
|
network,
|
||||||
|
setSelectedToken,
|
||||||
|
selectedTokenAddress,
|
||||||
// userAddress,
|
// userAddress,
|
||||||
} = props
|
} = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('div.token-list-item', {
|
h('div.token-list-item', {
|
||||||
style: { cursor: network === '1' ? 'pointer' : 'default' },
|
className: `token-list-item ${selectedTokenAddress ? 'token-list-item--active' : ''}`,
|
||||||
|
// style: { cursor: network === '1' ? 'pointer' : 'default' },
|
||||||
// onClick: this.view.bind(this, address, userAddress, network),
|
// onClick: this.view.bind(this, address, userAddress, network),
|
||||||
|
onClick: () => setSelectedToken(address),
|
||||||
}, [
|
}, [
|
||||||
|
|
||||||
h(Identicon, {
|
h(Identicon, {
|
||||||
|
@ -8,7 +8,6 @@ const connect = require('react-redux').connect
|
|||||||
const selectors = require('../selectors')
|
const selectors = require('../selectors')
|
||||||
|
|
||||||
function mapStateToProps (state) {
|
function mapStateToProps (state) {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
network: state.metamask.network,
|
network: state.metamask.network,
|
||||||
tokens: state.metamask.tokens,
|
tokens: state.metamask.tokens,
|
||||||
@ -42,7 +41,6 @@ function TokenList () {
|
|||||||
TokenList.prototype.render = function () {
|
TokenList.prototype.render = function () {
|
||||||
const state = this.state
|
const state = this.state
|
||||||
const { tokens, isLoading, error } = state
|
const { tokens, isLoading, error } = state
|
||||||
const { userAddress, network } = this.props
|
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return this.message('Loading Tokens...')
|
return this.message('Loading Tokens...')
|
||||||
@ -53,13 +51,7 @@ TokenList.prototype.render = function () {
|
|||||||
return this.message('There was a problem loading your token balances.')
|
return this.message('There was a problem loading your token balances.')
|
||||||
}
|
}
|
||||||
|
|
||||||
const tokenViews = tokens.map((tokenData) => {
|
return h('div', tokens.map((tokenData) => h(TokenCell, tokenData)))
|
||||||
tokenData.network = network
|
|
||||||
tokenData.userAddress = userAddress
|
|
||||||
return h(TokenCell, tokenData)
|
|
||||||
})
|
|
||||||
|
|
||||||
return h('div', tokenViews)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
TokenList.prototype.message = function (body) {
|
TokenList.prototype.message = function (body) {
|
||||||
|
@ -4,10 +4,12 @@ const h = require('react-hyperscript')
|
|||||||
const ethUtil = require('ethereumjs-util')
|
const ethUtil = require('ethereumjs-util')
|
||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
const actions = require('../actions')
|
const actions = require('../actions')
|
||||||
|
const selectors = require('../selectors')
|
||||||
|
|
||||||
const BalanceComponent = require('./balance-component')
|
const BalanceComponent = require('./balance-component')
|
||||||
const TxList = require('./tx-list')
|
const TxList = require('./tx-list')
|
||||||
const Identicon = require('./identicon')
|
const Identicon = require('./identicon')
|
||||||
|
const TokenBalance = require('./token-balance')
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
|
||||||
|
|
||||||
@ -16,6 +18,7 @@ function mapStateToProps (state) {
|
|||||||
|
|
||||||
const identities = state.metamask.identities
|
const identities = state.metamask.identities
|
||||||
const accounts = state.metamask.accounts
|
const accounts = state.metamask.accounts
|
||||||
|
const selectedTokenAddress = state.metamask.selectedTokenAddress
|
||||||
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
|
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
|
||||||
const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
|
const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
|
||||||
const identity = identities[selectedAddress]
|
const identity = identities[selectedAddress]
|
||||||
@ -25,6 +28,8 @@ function mapStateToProps (state) {
|
|||||||
sidebarOpen,
|
sidebarOpen,
|
||||||
selectedAddress,
|
selectedAddress,
|
||||||
checksumAddress,
|
checksumAddress,
|
||||||
|
selectedTokenAddress,
|
||||||
|
selectedToken: selectors.getSelectedToken(state),
|
||||||
identity,
|
identity,
|
||||||
account,
|
account,
|
||||||
}
|
}
|
||||||
@ -44,9 +49,41 @@ function TxView () {
|
|||||||
Component.call(this)
|
Component.call(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TxView.prototype.renderHeroBalance = function () {
|
||||||
|
const {account, selectedToken, showModal, showSendPage } = this.props
|
||||||
|
|
||||||
|
return h('div.hero-balance', {}, [
|
||||||
|
|
||||||
|
h(BalanceComponent, {
|
||||||
|
balanceValue: account && account.balance,
|
||||||
|
token: selectedToken,
|
||||||
|
}),
|
||||||
|
|
||||||
|
h('div.flex-row.flex-center.hero-balance-buttons', {}, [
|
||||||
|
h('button.btn-clear', {
|
||||||
|
style: {
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
onClick: () => showModal({
|
||||||
|
name: 'BUY',
|
||||||
|
}),
|
||||||
|
}, 'BUY'),
|
||||||
|
|
||||||
|
h('button.btn-clear', {
|
||||||
|
style: {
|
||||||
|
textAlign: 'center',
|
||||||
|
marginLeft: '0.8em',
|
||||||
|
},
|
||||||
|
onClick: showSendPage,
|
||||||
|
}, 'SEND'),
|
||||||
|
|
||||||
|
]),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
TxView.prototype.render = function () {
|
TxView.prototype.render = function () {
|
||||||
|
|
||||||
const { selectedAddress, identity, account } = this.props
|
const { selectedAddress, identity } = this.props
|
||||||
|
|
||||||
return h('div.tx-view.flex-column', {
|
return h('div.tx-view.flex-column', {
|
||||||
style: {},
|
style: {},
|
||||||
@ -87,41 +124,7 @@ TxView.prototype.render = function () {
|
|||||||
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('div.hero-balance', {
|
this.renderHeroBalance(),
|
||||||
style: {},
|
|
||||||
}, [
|
|
||||||
|
|
||||||
h(BalanceComponent, {
|
|
||||||
balanceValue: account && account.balance,
|
|
||||||
style: {},
|
|
||||||
}),
|
|
||||||
|
|
||||||
h('div.flex-row.flex-center.hero-balance-buttons', {
|
|
||||||
style: {},
|
|
||||||
}, [
|
|
||||||
h('button.btn-clear', {
|
|
||||||
style: {
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
onClick: () => {
|
|
||||||
this.props.showModal({
|
|
||||||
name: 'BUY',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}, 'BUY'),
|
|
||||||
|
|
||||||
h('button.btn-clear', {
|
|
||||||
style: {
|
|
||||||
textAlign: 'center',
|
|
||||||
marginLeft: '0.8em',
|
|
||||||
},
|
|
||||||
onClick: () => {
|
|
||||||
this.props.showSendPage()
|
|
||||||
},
|
|
||||||
}, 'SEND'),
|
|
||||||
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h(TxList, {}),
|
h(TxList, {}),
|
||||||
|
|
||||||
|
@ -22,6 +22,7 @@ function mapStateToProps (state) {
|
|||||||
selectedAddress: selectors.getSelectedAddress(state),
|
selectedAddress: selectors.getSelectedAddress(state),
|
||||||
selectedIdentity: selectors.getSelectedIdentity(state),
|
selectedIdentity: selectors.getSelectedIdentity(state),
|
||||||
selectedAccount: selectors.getSelectedAccount(state),
|
selectedAccount: selectors.getSelectedAccount(state),
|
||||||
|
selectedTokenAddress: state.metamask.selectedTokenAddress,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,6 +30,7 @@ function mapDispatchToProps (dispatch) {
|
|||||||
return {
|
return {
|
||||||
showSendPage: () => { dispatch(actions.showSendPage()) },
|
showSendPage: () => { dispatch(actions.showSendPage()) },
|
||||||
hideSidebar: () => { dispatch(actions.hideSidebar()) },
|
hideSidebar: () => { dispatch(actions.hideSidebar()) },
|
||||||
|
unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -37,15 +39,26 @@ function WalletView () {
|
|||||||
Component.call(this)
|
Component.call(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
WalletView.prototype.renderTokenBalances = function () {
|
WalletView.prototype.renderWalletBalance = function () {
|
||||||
// const { tokens = [] } = this.props
|
const { selectedTokenAddress, selectedAccount, unsetSelectedToken } = this.props
|
||||||
// return tokens.map(({ address, decimals, symbol }) => (
|
const selectedClass = selectedTokenAddress
|
||||||
// h(BalanceComponent, {
|
? ''
|
||||||
// balanceValue: 0,
|
: 'wallet-balance-wrapper--active'
|
||||||
// style: {},
|
const className = `flex-column wallet-balance-wrapper ${selectedClass}`
|
||||||
// })
|
|
||||||
// ))
|
return h('div', { className }, [
|
||||||
return h(TokenList)
|
h('div.wallet-balance',
|
||||||
|
{
|
||||||
|
onClick: () => unsetSelectedToken(),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h(BalanceComponent, {
|
||||||
|
balanceValue: selectedAccount.balance,
|
||||||
|
style: {},
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
),
|
||||||
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
WalletView.prototype.render = function () {
|
WalletView.prototype.render = function () {
|
||||||
@ -139,22 +152,9 @@ WalletView.prototype.render = function () {
|
|||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Wallet Balances
|
this.renderWalletBalance(),
|
||||||
h('div.flex-column.wallet-balance-wrapper.wallet-balance-wrapper-active', {}, [
|
|
||||||
|
|
||||||
h('div.wallet-balance', {}, [
|
h(TokenList),
|
||||||
|
|
||||||
h(BalanceComponent, {
|
|
||||||
balanceValue: selectedAccount.balance,
|
|
||||||
style: {},
|
|
||||||
}),
|
|
||||||
|
|
||||||
]),
|
|
||||||
|
|
||||||
|
|
||||||
]),
|
|
||||||
|
|
||||||
this.renderTokenBalances(),
|
|
||||||
|
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,22 @@
|
|||||||
|
$wallet-balance-breakpoint: 890px;
|
||||||
|
$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
|
||||||
|
|
||||||
.token-list-item {
|
.token-list-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: linear 200ms;
|
||||||
|
background-color: rgba($wallet-balance-bg, 0);
|
||||||
|
|
||||||
|
@media #{$wallet-balance-breakpoint-range} {
|
||||||
|
padding: 10% 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: rgba($wallet-balance-bg, 1);
|
||||||
|
}
|
||||||
|
|
||||||
&__identicon {
|
&__identicon {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
@ -4,6 +4,12 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
|
|||||||
|
|
||||||
.wallet-balance-wrapper {
|
.wallet-balance-wrapper {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
transition: linear 200ms;
|
||||||
|
background: rgba($wallet-balance-bg, 0);
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background: rgba($wallet-balance-bg, 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-balance {
|
.wallet-balance {
|
||||||
@ -62,7 +68,3 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
|
|||||||
border: 1px solid $alto;
|
border: 1px solid $alto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-balance-wrapper-active {
|
|
||||||
background: $wallet-balance-bg;
|
|
||||||
}
|
|
||||||
|
@ -17,6 +17,7 @@ function reduceMetamask (state, action) {
|
|||||||
lastUnreadNotice: undefined,
|
lastUnreadNotice: undefined,
|
||||||
frequentRpcList: [],
|
frequentRpcList: [],
|
||||||
addressBook: [],
|
addressBook: [],
|
||||||
|
selectedTokenAddress: null,
|
||||||
}, state.metamask)
|
}, state.metamask)
|
||||||
|
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
@ -115,6 +116,11 @@ function reduceMetamask (state, action) {
|
|||||||
delete newState.seedWords
|
delete newState.seedWords
|
||||||
return newState
|
return newState
|
||||||
|
|
||||||
|
case actions.SET_SELECTED_TOKEN:
|
||||||
|
return extend(metamaskState, {
|
||||||
|
selectedTokenAddress: action.value,
|
||||||
|
})
|
||||||
|
|
||||||
case actions.SAVE_ACCOUNT_LABEL:
|
case actions.SAVE_ACCOUNT_LABEL:
|
||||||
const account = action.value.account
|
const account = action.value.account
|
||||||
const name = action.value.label
|
const name = action.value.label
|
||||||
|
@ -4,6 +4,7 @@ const selectors = {
|
|||||||
getSelectedAddress,
|
getSelectedAddress,
|
||||||
getSelectedIdentity,
|
getSelectedIdentity,
|
||||||
getSelectedAccount,
|
getSelectedAccount,
|
||||||
|
getSelectedToken,
|
||||||
conversionRateSelector,
|
conversionRateSelector,
|
||||||
transactionsSelector,
|
transactionsSelector,
|
||||||
}
|
}
|
||||||
@ -31,6 +32,14 @@ function getSelectedAccount (state) {
|
|||||||
return accounts[selectedAddress]
|
return accounts[selectedAddress]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSelectedToken (state) {
|
||||||
|
const tokens = state.metamask.tokens || []
|
||||||
|
const selectedTokenAddress = state.metamask.selectedTokenAddress
|
||||||
|
const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
|
||||||
|
|
||||||
|
return selectedToken || null
|
||||||
|
}
|
||||||
|
|
||||||
function conversionRateSelector (state) {
|
function conversionRateSelector (state) {
|
||||||
return state.metamask.conversionRate
|
return state.metamask.conversionRate
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user