lbry-desktop/ui/js/page/transactionHistory/view.jsx

import React from "react";
import { BusyMessage } from "component/common";
import SubHeader from "component/subHeader";
import TransactionList from "component/transactionList";

class TransactionHistoryPage extends React.PureComponent {
  componentWillMount() {
    this.props.fetchTransactions();
  }

  render() {
    const { fetchingTransactions, transactions } = this.props;
    return (
      <main className="main--single-column">
        <SubHeader />
        <section className="card">
          <div className="card__title-primary">
            <h3>{__("Transaction History")}</h3>
          </div>
          <div className="card__content">
            {fetchingTransactions &&
              <BusyMessage message={__("Loading transactions")} />}
            {!fetchingTransactions &&
              <TransactionList transactions={transactions} />}
          </div>
        </section>
      </main>
    );
  }
}

export default TransactionHistoryPage;