aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/token-balance.js
blob: 99ca7335c45d3dcb2f8d809a9bccc2381ffea8e4 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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')
const log = require('loglevel')

function mapStateToProps (state) {
  return {
    userAddress: selectors.getSelectedAddress(state),
  }
}

module.exports = connect(mapStateToProps)(TokenBalance)


inherits(TokenBalance, Component)
function TokenBalance () {
  this.state = {
    string: '',
    symbol: '',
    isLoading: true,
    error: null,
  }
  Component.call(this)
}

TokenBalance.prototype.render = function () {
  const state = this.state
  const { symbol, string, isLoading } = state
  const { balanceOnly } = this.props

  return isLoading
    ? h('span', '')
    : h('span.token-balance', [
      h('span.hide-text-overflow.token-balance__amount', string),
      !balanceOnly && h('span.token-balance__symbol', symbol),
    ])
}

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,
    token: { address: oldTokenAddress },
  } = this.props
  const {
    userAddress: newAddress,
    token: { address: newTokenAddress },
  } = nextProps

  if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return
  if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return

  this.setState({ isLoading: true })
  this.createFreshTokenTracker()
}

TokenBalance.prototype.updateBalance = function (tokens = []) {
  if (!this.tracker.running) {
    return
  }

  const [{ string, symbol }] = tokens

  this.setState({
    string,
    symbol,
    isLoading: false,
  })
}

TokenBalance.prototype.componentWillUnmount = function () {
  if (!this.tracker) return
  this.tracker.stop()
  this.tracker.removeListener('update', this.balanceUpdater)
  this.tracker.removeListener('error', this.showError)
}