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,10 +90,7 @@ class TransactionList extends React.PureComponent<Props> {
                 filters={['nout']}
                 defaultPath={__('lbry-transactions-history')}
               />
-            </div>
-          )}
               {!slim && (
-          <div className="card__actions-top-corner">
                 <FormField
                   type="select"
                   value={filterSetting || TRANSACTIONS.ALL}
@@ -115,6 +112,7 @@ class TransactionList extends React.PureComponent<Props> {
                     </option>
                   ))}
                 </FormField>
+              )}
             </div>
           )}
         {!!transactionList.length && (

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,36 +11,49 @@ 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 && (
+        {fetchingTransactions &&
+          !hasTransactions && (
             <div className="card__content">
               <BusyIndicator message={__('Loading transactions')} />
             </div>
           )}
-        {!fetchingTransactions && (
+        {hasTransactions && (
+          <Fragment>
             <TransactionList
               slim
               transactions={transactions}
               emptyMessage={__("Looks like you don't have any recent transactions.")}
             />
-        )}
-        {hasTransactions && (
             <div className="card__actions">
               <Button
                 button="primary"
@@ -49,6 +62,7 @@ class TransactionListRecent extends React.PureComponent<Props> {
                 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 {
+type Props = {
-  componentWillMount() {
+  fetchMyClaims: () => void,
-    this.props.fetchTransactions();
+  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
+          <div className="card__title card--space-between">
-            className={`card__title ${
+            {__('Transaction History')}
-              fetchingTransactions && transactions.length ? 'reloading' : ''
+            <div className="card__actions-top-corner">
-            }`}
+              <Button
-          >
+                button="inverse"
-            <h3>{__('Transaction History')}</h3>
+                label={__('Refresh')}
+                onClick={fetchTransactions}
+                disabled={fetchingTransactions}
+              />
+            </div>
           </div>
           {fetchingTransactions && !transactions.length ? (
             <div className="card__content">