<commit_before>import React from 'react'
import Grid from 'react-bootstrap/lib/Grid'
import Panel from 'react-bootstrap/lib/Panel'
import Row from 'react-bootstrap/lib/Row'
import Col from 'react-bootstrap/lib/Col'
import {injectIntl} from 'react-intl'
import isEmpty from 'lodash/isEmpty'

import {decentralized, centralized} from '../data/exchanges'
import AccountLink from './shared/AccountLink'
import Logo from './shared/Logo'
import {titleWithJSONButton} from './shared/TitleWithJSONButton'

const METADATA_PATH =
  'https://raw.githubusercontent.com/chatch/stellarexplorer/master/src/data/exchanges.json'

const Exchange = ({accounts, home, name, logo, decentralized = false}) => {
  const homeLink = `https://${home}`
  return (
    <Row style={{marginTop: 30, marginBottom: 30}}>
      <Col md={4}>
        <a href={homeLink} target="_blank">
          <Logo name={name} src={logo} />
        </a>
      </Col>
      <Col md={5} style={{marginTop: 11}}>
        <a href={homeLink} target="_blank">
          {home}
        </a>
      </Col>
      <Col md={2} style={{marginTop: 11}}>
        {!isEmpty(accounts) &&
          accounts.map(account => (
            <span key={account}>
              <AccountLink account={account} hideKnown={true} />&nbsp;
            </span>
          ))}
        {isEmpty(accounts) && decentralized && <span>Decentralized</span>}
      </Col>
    </Row>
  )
}

const ExchangesList = () => (
  <div>
    <div>
      {Object.keys(decentralized).map(id => (
        <Exchange key={id} name={id} {...decentralized[id]} decentralized />
      ))}
    </div>
    <Row style={{marginTop: 30, marginBottom: 30}}>
      <Col md={12}>
        <hr />
      </Col>
    </Row>
    <div>
      {Object.keys(centralized).map(id => (
        <Exchange key={id} name={id} {...centralized[id]} />
      ))}
    </div>
  </div>
)

class Exchanges extends React.Component {
  render() {
    const {formatMessage} = this.props.intl
    const header = titleWithJSONButton(
      formatMessage({id: 'exchanges'}),
      METADATA_PATH
    )
    return (
      <Grid>
        <Row>
          <Panel header={header}>
            <ExchangesList />
          </Panel>
        </Row>
        <Row />
      </Grid>
    )
  }
}

export default injectIntl(Exchanges)<commit_msg>Split centralised and decentalised exchanges sections and put a heading on each change list to a table for visibility and consistency with anchors and assets views<commit_after>import React from 'react'
import Grid from 'react-bootstrap/lib/Grid'
import Panel from 'react-bootstrap/lib/Panel'
import Row from 'react-bootstrap/lib/Row'
import Table from 'react-bootstrap/lib/Table'
import {FormattedMessage, injectIntl} from 'react-intl'
import isEmpty from 'lodash/isEmpty'

import {decentralized, centralized} from '../data/exchanges'
import AccountLink from './shared/AccountLink'
import Logo from './shared/Logo'
import {titleWithJSONButton} from './shared/TitleWithJSONButton'

const METADATA_PATH =
  'https://raw.githubusercontent.com/chatch/stellarexplorer/master/src/data/exchanges.json'

const Exchange = ({accounts, home, name, logo, decentralized = false}) => {
  const homeLink = `https://${home}`
  return (
    <tr className="directoryRow">
      <td>
        <a href={homeLink} target="_blank">
          <Logo name={name} src={logo} />
        </a>
      </td>
      <td>
        <a href={homeLink} target="_blank">
          {home}
        </a>
      </td>
      <td>
        {!isEmpty(accounts) &&
          accounts.map(account => (
            <span key={account}>
              <AccountLink account={account} hideKnown={true} />&nbsp;
            </span>
          ))}
        {isEmpty(accounts) && decentralized && <span>Decentralized</span>}
      </td>
    </tr>
  )
}

const TableHeader = () => (
  <thead>
    <tr>
      <th />
      <th>
        <FormattedMessage id="home.domain" />
      </th>
      <th>
        <FormattedMessage id="account" />
      </th>
    </tr>
  </thead>
)

class Exchanges extends React.Component {
  render() {
    const {formatMessage} = this.props.intl
    const header = titleWithJSONButton(
      formatMessage({id: 'exchanges'}),
      METADATA_PATH
    )
    return (
      <Grid>
        <Row>
          <Panel header={header}>
            <h4 style={{textDecoration: 'underline'}}>Decentralized</h4>
            <Table>
              <TableHeader />
              <tbody>
                <tr>
                  <td />
                  <td />
                  <td />
                </tr>
                {Object.keys(decentralized).map(id => (
                  <Exchange
                    key={id}
                    name={id}
                    {...decentralized[id]}
                    decentralized
                  />
                ))}
              </tbody>
            </Table>

            <h4 style={{marginTop: 70, textDecoration: 'underline'}}>
              Centralized
            </h4>
            <Table>
              <TableHeader />
              <tbody>
                <tr>
                  <td />
                  <td />
                  <td />
                </tr>
                {Object.keys(centralized).map(id => (
                  <Exchange key={id} name={id} {...centralized[id]} />
                ))}
              </tbody>
            </Table>
          </Panel>
        </Row>
      </Grid>
    )
  }
}

export default injectIntl(Exchanges)
{'fraction_non_alphanumeric': 0.1485567199852914, 'fraction_numerical': 0.0042287185144328, 'mean_word_length': 1.9044313934863855, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 113, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4909895', 'n_tokens_mistral': 1692, 'n_tokens_neox': 1627, 'n_words': 358}