depth.jsx

/** @jsx React.DOM */
var ReactWrapper = require('../../../shared/react-wrapper')
, uptodate = require('../../../../helpers/uptodate')
, Side = require('./side')

var Depth = React.createClass({
    getInitialState: function() {
        return {
            depth: api.depth[this.props.market]
        }
    },

    handleDepthUpdate: function(depth) {
        this.setState({ depth: depth })
    },

    componentWillMount: function() {
        api.on('depth:' + this.props.market, this.handleDepthUpdate)

        this.refresh = uptodate(api.depth.bind(api, this.props.market), null, {
            now: !api.depth[this.props.market]
        })
    },

    componentWillUnmount: function() {
        this.refresh.stop()
        api.off('depth:' + this.props.market, this.handleDepthUpdate)
    },

    render: function() {
        var bids = this.state.depth ? <Side market={this.props.market} levels={this.state.depth.bids} /> : 'Loading...'
        var asks = this.state.depth ? <Side market={this.props.market} levels={this.state.depth.asks} /> : 'Loading...'

        return <div className="row">
            <div className="col-lg-12">
                <table className="depth table table-bordered table-striped table-compact">
                    <thead>
                        <tr>
                            <th>{i18n('markets.market.depth.columns.bid volume')}</th>
                            <th>{i18n('markets.market.depth.columns.ask volume')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{bids}</td>
                            <td>{asks}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    }
})

module.exports = function(market) {
    return ReactWrapper(<Depth market={market} />)
}

level.jsx

/** @jsx React.DOM */
var Level = React.createClass({
    render: function() {
        return <tr className="level">
            <td className="price">{numbers(this.props.price, { trim: false })}</td>
            <td className="volume">{numbers(this.props.volume, { trim: false })}</td>
        </tr>
    }
})

module.exports = Level

side.jsx

/** @jsx React.DOM */
var Level = require('./level')

var Side = React.createClass({
    render: function() {
        var depth = this.props.levels.map(function(level) {
            return <Level key={level[0]} price={level[0]} volume={level[1]} />
        })

        return <table className="depth-side table table-bordered">
            <thead>
                <tr>
                    <th>
                        {i18n('markets.market.depth.columns.price')}
                        <span className="currency">{this.props.market.substr(3)}</span>
                    </th>
                    <th>
                        {i18n('amount')}
                        <span className="currency">{this.props.market.substr(0, 3)}</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                {depth}
            </tbody>
        </table>
    }
})

module.exports = Side