Recent payments update on each new tip (dexlab-io#78)

The recent payments component was updated to handle new tips by
filtering out transactions that didn't happen in the current
session, and also by updating itself on the go on each tip received.

src/pages/Dashboard/components/RecentPayments/index.js

@@ -30,23 +30,40 @@ class RecentPayments extends React.Component {
     isLoading: true
   };
 
-  componentDidMount() {
+  loadTxs(props) {
     store.fetch.pos().subscribe(async result => {
       // eslint-disable-next-line new-cap
       this.wallet = new xDAIHDWallet(null, result.data.pos.address);
       await this.wallet.setWeb3();
       await this.wallet.fetchEthTransactions();
+      let filteredTxs = [];
+      if(props.txHashes) {
+        filteredTxs = this.wallet.transactions.filter(tx => {
+          return props.txHashes.includes(tx.transactionHash);
+        });
+      }
+      else {
+        filteredTxs = this.wallet.transactions;
+      }
       this.setState({
         // eslint-disable-next-line react/no-unused-state
-        transactions: this.wallet.transactions,
+        transactions: filteredTxs,
         isLoading: false
       });
     });
+  }
+
+  componentDidMount() {
+    this.loadTxs(this.props);
     if(this.props.type) {
       this.setState({ type: this.props.type });
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.loadTxs(nextProps);
+  }
+
   render() {
     const { transactions, isLoading } = this.state;
     return (

src/pages/Dashboard/components/Tip.js

@@ -31,23 +31,16 @@ class Tip extends Component {
     this.state = {
       posAddress: null,
       txState: null,
-      txHashes: [],
     };
   }
 
   startWatcher() {
     this.setState({ txState: WatcherTx.STATES.PENDING });
     this.tipWatcher = new WatcherTx(WatcherTx.NETWORKS.XDAI);
     this.tipWatcher.xdaiTransfer(this.state.posAddress, null, data => {
-      this.setState(prevState => {
-        //console.log(prevState);
-        return {
-          txState: data.state,
-          //txHashes: prevState.txHashes.push(data.txHash),
-        };
-      });
+      this.setState({ txState: data.state});
       if (data.state === WatcherTx.STATES.CONFIRMED) {
-        this.props.onPaymentReceived();
+        this.props.onTipReceived(data.txHash);
       }
     });
   }
@@ -64,7 +57,6 @@ class Tip extends Component {
       const posAddress = result.data.pos.address;
       this.setState({ posAddress });
     });
-    this.startWatcher();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -73,7 +65,6 @@ class Tip extends Component {
     }
     else {
       this.stopWatcher();
-      console.log(this.state);
     }
   }
 

src/pages/Dashboard/desktop.view.js

@@ -62,7 +62,12 @@ export default function() {
                   }
                 />
               )}
-              {activeTab === 'tip' && <RecentPayments type="tips" />}
+              {activeTab === 'tip' && (
+                <RecentPayments
+                  type="tips"
+                  txHashes={this.state.tipHashes}
+                />
+              )}
             </RightSide>
             <LeftSide>
               {activeTab !== 'tip' && (

src/pages/Dashboard/index.js

@@ -20,7 +20,8 @@ class Dashboard extends Component {
       totalAmount: '0',
       paymentModalOpen: false,
       setupModalOpen: false,
-      pos: { address: null }
+      pos: { address: null },
+      tipHashes: [],
     };
   }
 
@@ -63,8 +64,10 @@ class Dashboard extends Component {
     }, 5000);
   };
 
-  onTipReceived = () => {
-
+  onTipReceived = (txHash) => {
+    const { tipHashes } = this.state;
+    tipHashes.push(txHash);
+    this.setState({ tipHashes });
   }
 
   handleNavItemChange = activeTab => {