add RefreshTransactionList button

src/renderer/component/transactionListRecent/view.jsx

@@ -1,10 +1,11 @@
 // @flow
+import type { Transaction } from 'component/transactionList/view';
 import React, { Fragment } from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import Button from 'component/button';
 import TransactionList from 'component/transactionList';
 import * as icons from 'constants/icons';
-import type { Transaction } from 'component/transactionList/view';
+import RefreshTransactionButton from 'component/transactionRefreshButton';
 
 type Props = {
   fetchTransactions: () => void,
@@ -23,19 +24,12 @@ class TransactionListRecent extends React.PureComponent<Props> {
   }
 
   render() {
-    const { fetchingTransactions, hasTransactions, transactions, fetchTransactions } = this.props;
+    const { fetchingTransactions, hasTransactions, transactions } = this.props;
     return (
       <section className="card card--section">
         <div className="card__title card--space-between">
           {__('Recent Transactions')}
-          <div className="card__actions-top-corner">
+          <RefreshTransactionButton />
-            <Button
-              button="inverse"
-              label={__('Refresh')}
-              onClick={fetchTransactions}
-              disabled={fetchingTransactions}
-            />
-          </div>
         </div>
         <div className="card__subtitle">
           {__('To view all of your transactions, navigate to the')}{' '}

src/renderer/component/transactionRefreshButton/index.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import { doFetchTransactions, selectIsFetchingTransactions } from 'lbry-redux';
+import RefreshTransactionButton from './view';
+
+const select = state => ({
+  fetchingTransactions: selectIsFetchingTransactions(state),
+});
+
+const perform = dispatch => ({
+  fetchTransactions: () => dispatch(doFetchTransactions()),
+});
+
+export default connect(
+  select,
+  perform
+)(RefreshTransactionButton);

src/renderer/component/transactionRefreshButton/view.jsx

@@ -0,0 +1,51 @@
+// @flow
+import React, { PureComponent } from 'react';
+import Button from 'component/button';
+
+type Props = {
+  fetchTransactions: () => void,
+  fetchingTransactions: boolean,
+};
+
+type State = {
+  label: string,
+  disabled: boolean,
+};
+
+class TransactionListRecent extends PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = { label: __('Refresh'), disabled: false };
+
+    (this: any).handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const { fetchTransactions } = this.props;
+
+    // The fetchTransactions call will be super fast most of the time.
+    // Instead of showing a loading spinner for 100ms, change the label and show as "Refreshed!"
+    fetchTransactions();
+    this.setState({ label: __('Refreshed!'), disabled: true });
+
+    setTimeout(() => {
+      this.setState({ label: __('Refresh'), disabled: false });
+    }, 2000);
+  }
+
+  render() {
+    const { fetchingTransactions } = this.props;
+    const { label, disabled } = this.state;
+    return (
+      <Button
+        button="inverse"
+        label={label}
+        onClick={this.handleClick}
+        disabled={disabled || fetchingTransactions}
+      />
+    );
+  }
+}
+
+export default TransactionListRecent;

src/renderer/page/transactionHistory/view.jsx

@@ -3,7 +3,7 @@ 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';
+import RefreshTransactionButton from 'component/transactionRefreshButton';
 
 type Props = {
   fetchMyClaims: () => void,
@@ -21,21 +21,14 @@ class TransactionHistoryPage extends React.PureComponent<Props> {
   }
 
   render() {
-    const { fetchingTransactions, transactions, fetchTransactions } = this.props;
+    const { fetchingTransactions, transactions } = this.props;
 
     return (
       <Page>
         <section className="card card--section">
           <div className="card__title card--space-between">
             {__('Transaction History')}
-            <div className="card__actions-top-corner">
+            <RefreshTransactionButton />
-              <Button
-                button="inverse"
-                label={__('Refresh')}
-                onClick={fetchTransactions}
-                disabled={fetchingTransactions}
-              />
-            </div>
           </div>
           {fetchingTransactions && !transactions.length ? (
             <div className="card__content">