call claim_list_mine on page entry and add refresh button

src/renderer/component/transactionList/view.jsx

@@ -82,7 +82,7 @@ class TransactionList extends React.PureComponent<Props> {
         )}
         {!slim &&
           !!transactionList.length && (
-            <div className="card__actions">
+            <div className="card__actions card__actions--between">
               <FileExporter
                 data={transactionList}
                 label={__('Export')}
@@ -90,33 +90,31 @@ class TransactionList extends React.PureComponent<Props> {
                 filters={['nout']}
                 defaultPath={__('lbry-transactions-history')}
               />
+              {!slim && (
+                <FormField
+                  type="select"
+                  value={filterSetting || TRANSACTIONS.ALL}
+                  onChange={this.handleFilterChanged}
+                  affixClass="form-field--align-center"
+                  prefix={__('Show')}
+                  postfix={
+                    <Button
+                      button="link"
+                      icon={icons.HELP}
+                      href="https://lbry.io/faq/transaction-types"
+                      title={__('Help')}
+                    />
+                  }
+                >
+                  {transactionTypes.map(tt => (
+                    <option key={tt} value={tt}>
+                      {__(`${this.capitalize(tt)}`)}
+                    </option>
+                  ))}
+                </FormField>
+              )}
             </div>
           )}
-        {!slim && (
-          <div className="card__actions-top-corner">
-            <FormField
-              type="select"
-              value={filterSetting || TRANSACTIONS.ALL}
-              onChange={this.handleFilterChanged}
-              affixClass="form-field--align-center"
-              prefix={__('Show')}
-              postfix={
-                <Button
-                  button="link"
-                  icon={icons.HELP}
-                  href="https://lbry.io/faq/transaction-types"
-                  title={__('Help')}
-                />
-              }
-            >
-              {transactionTypes.map(tt => (
-                <option key={tt} value={tt}>
-                  {__(`${this.capitalize(tt)}`)}
-                </option>
-              ))}
-            </FormField>
-          </div>
-        )}
         {!!transactionList.length && (
           <table className="card__content table table--transactions table--stretch">
             <thead>

src/renderer/component/transactionListRecent/index.js

@@ -4,6 +4,7 @@ import {
   selectRecentTransactions,
   selectHasTransactions,
   selectIsFetchingTransactions,
+  doFetchClaimListMine,
 } from 'lbry-redux';
 import TransactionListRecent from './view';
 
@@ -15,6 +16,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchTransactions: () => dispatch(doFetchTransactions()),
+  fetchMyClaims: () => dispatch(doFetchClaimListMine()),
 });
 
 export default connect(

src/renderer/component/transactionListRecent/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { Fragment } from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import Button from 'component/button';
 import TransactionList from 'component/transactionList';
@@ -11,44 +11,58 @@ type Props = {
   fetchingTransactions: boolean,
   hasTransactions: boolean,
   transactions: Array<Transaction>,
+  fetchMyClaims: () => void,
 };
 
 class TransactionListRecent extends React.PureComponent<Props> {
   componentDidMount() {
-    this.props.fetchTransactions();
+    const { fetchMyClaims, fetchTransactions } = this.props;
+
+    fetchMyClaims();
+    fetchTransactions();
   }
 
   render() {
-    const { fetchingTransactions, hasTransactions, transactions } = this.props;
-
+    const { fetchingTransactions, hasTransactions, transactions, fetchTransactions } = this.props;
     return (
       <section className="card card--section">
-        <div className="card__title">{__('Recent Transactions')}</div>
+        <div className="card__title card--space-between">
+          {__('Recent Transactions')}
+          <div className="card__actions-top-corner">
+            <Button
+              button="inverse"
+              label={__('Refresh')}
+              onClick={fetchTransactions}
+              disabled={fetchingTransactions}
+            />
+          </div>
+        </div>
         <div className="card__subtitle">
           {__('To view all of your transactions, navigate to the')}{' '}
           <Button button="link" navigate="/history" label={__('transactions page')} />.
         </div>
-        {fetchingTransactions && (
-          <div className="card__content">
-            <BusyIndicator message={__('Loading transactions')} />
-          </div>
-        )}
-        {!fetchingTransactions && (
-          <TransactionList
-            slim
-            transactions={transactions}
-            emptyMessage={__("Looks like you don't have any recent transactions.")}
-          />
-        )}
+        {fetchingTransactions &&
+          !hasTransactions && (
+            <div className="card__content">
+              <BusyIndicator message={__('Loading transactions')} />
+            </div>
+          )}
         {hasTransactions && (
-          <div className="card__actions">
-            <Button
-              button="primary"
-              navigate="/history"
-              label={__('Full History')}
-              icon={icons.CLOCK}
+          <Fragment>
+            <TransactionList
+              slim
+              transactions={transactions}
+              emptyMessage={__("Looks like you don't have any recent transactions.")}
             />
-          </div>
+            <div className="card__actions">
+              <Button
+                button="primary"
+                navigate="/history"
+                label={__('Full History')}
+                icon={icons.CLOCK}
+              />
+            </div>
+          </Fragment>
         )}
       </section>
     );

src/renderer/page/transactionHistory/index.js

@@ -3,6 +3,7 @@ import {
   doFetchTransactions,
   selectTransactionItems,
   selectIsFetchingTransactions,
+  doFetchClaimListMine,
 } from 'lbry-redux';
 import TransactionHistoryPage from './view';
 
@@ -13,6 +14,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchTransactions: () => dispatch(doFetchTransactions()),
+  fetchMyClaims: () => dispatch(doFetchClaimListMine()),
 });
 
 export default connect(

src/renderer/page/transactionHistory/view.jsx

@@ -1,25 +1,41 @@
+// @flow
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import TransactionList from 'component/transactionList';
 import Page from 'component/page';
+import Button from 'component/button';
 
-class TransactionHistoryPage extends React.PureComponent {
-  componentWillMount() {
-    this.props.fetchTransactions();
+type Props = {
+  fetchMyClaims: () => void,
+  fetchTransactions: () => void,
+  fetchingTransactions: boolean,
+  transactions: Array<{}>,
+};
+
+class TransactionHistoryPage extends React.PureComponent<Props> {
+  componentDidMount() {
+    const { fetchMyClaims, fetchTransactions } = this.props;
+
+    fetchMyClaims();
+    fetchTransactions();
   }
 
   render() {
-    const { fetchingTransactions, transactions } = this.props;
+    const { fetchingTransactions, transactions, fetchTransactions } = this.props;
 
     return (
       <Page>
         <section className="card card--section">
-          <div
-            className={`card__title ${
-              fetchingTransactions && transactions.length ? 'reloading' : ''
-            }`}
-          >
-            <h3>{__('Transaction History')}</h3>
+          <div className="card__title card--space-between">
+            {__('Transaction History')}
+            <div className="card__actions-top-corner">
+              <Button
+                button="inverse"
+                label={__('Refresh')}
+                onClick={fetchTransactions}
+                disabled={fetchingTransactions}
+              />
+            </div>
           </div>
           {fetchingTransactions && !transactions.length ? (
             <div className="card__content">