Payments processing (dexlab-io#78)

The tip page has a new layout. On the right side, it watches for any incoming payments and registers them on the left side, which uses the component RecentPayments, with a few modifications.

src/class/WatcherTx.js

@@ -75,7 +75,7 @@ export default class WatcherTx {
     if (!toValid) return false;
 
     const walletToValid = trx.to.toLowerCase() === recipient.toLowerCase();
-    const amountValid =
+    const amountValid = total === null ||
       web3Http.utils.toWei(total.toString(), 'ether') === trx.value;
 
     return toValid && amountValid && walletToValid;

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

@@ -25,6 +25,7 @@ const LeftSide = styled.div`
 
 class RecentPayments extends React.Component {
   state = {
+    type: "transactions",
     transactions: [],
     isLoading: true
   };
@@ -41,15 +42,18 @@ class RecentPayments extends React.Component {
         isLoading: false
       });
     });
+    if(this.props.type) {
+      this.setState({ type: this.props.type });
+    }
   }
 
   render() {
     const { transactions, isLoading } = this.state;
     return (
       <Container>
-        {isLoading && <p>Loading recent transactions.</p>}
+        {isLoading && <p>Loading recent {this.state.type}.</p>}
         {transactions.length === 0 && !isLoading && (
-          <p>No recent transactions found.</p>
+          <p>No recent {this.state.type} found.</p>
         )}
         {transactions.map(item => (
           <PaymentItem key={item.transactionHash} payment={item} />

src/pages/Dashboard/components/Tip.js

@@ -1,13 +1,118 @@
 import React, { Component } from 'react';
-import Modal from 'react-responsive-modal';
+import styled from 'styled-components';
+import CryptoAmount from '../../Payment/components/CryptoAmount';
 import QrCode from '../../Payment/components/QrCode';
+import WatcherTx from '../../../class/WatcherTx';
+import { Query } from 'react-apollo';
+import { store } from '../../../store';
+import AddressClipboard from '../../Payment/components/AddressClipboard';
+import NetworkStatus from '../../Payment/components/NetworkStatus';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const FiatContainer = styled.div`
+  padding: 10px 75px 0px 75px;
+  border-bottom: ${props => `1px solid ${props.theme.borderColor}`};
+  text-align: center;
+`;
+
+const Title = styled.span``;
+
+const PaymentInfo = styled.div`
+  padding: 12px 75px;
+`;
 
 class Tip extends Component {
+  constructor(props) {
+    super(props);
+    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),
+        };
+      });
+      if (data.state === WatcherTx.STATES.CONFIRMED) {
+        this.props.onPaymentReceived();
+      }
+    });
+  }
+
+  stopWatcher() {
+    if(this.tipWatcher) {
+      this.tipWatcher.pollingOn = false;
+      this.setState({ txState: null });
+    }
+  }
+
+  componentDidMount() {
+    store.fetch.pos().subscribe(async result => {
+      const posAddress = result.data.pos.address;
+      this.setState({ posAddress });
+    });
+    this.startWatcher();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(nextProps.active) {
+      this.startWatcher();
+    }
+    else {
+      this.stopWatcher();
+      console.log(this.state);
+    }
+  }
+
   render() {
-    return (
-      <Modal open={true} onClose={this.props.onClose}>
-        <QrCode valueCrypto="0" />
-      </Modal>
+    const { txState } = this.state;
+    let title = '';
+    if (txState === WatcherTx.STATES.PENDING) {
+      title = `1 / 3 Awaiting Payment`;
+    } else if (txState === WatcherTx.STATES.DETECTED) {
+      title = `2 / 3 Pending Payment`;
+    } else if (txState === WatcherTx.STATES.CONFIRMED) {
+      title = `3 / 3 Payment Successful`;
+    }
+
+    return this.props.active && (
+      <Container>
+        <CryptoAmount cryptoValue={{dai: ''}} />
+        <FiatContainer>
+          <Title className="is-family-secondary">{title}</Title>
+        </FiatContainer>
+        <QrCode valueCrypto="" noValue={true} />
+        <Query query={store.queries.pos} fetchPolicy="cache">
+          {({ data }) => (
+            <PaymentInfo>
+              <AddressClipboard
+                address={data.pos.address ? data.pos.address : data.pos.error}
+              />
+              {this.tipWatcher ? (
+                <NetworkStatus
+                  label={this.tipWatcher.conf.label}
+                  status={
+                    this.tipWatcher.isConnected() ? 'connected' : 'not connected'
+                  }
+                />
+              ) : null}
+            </PaymentInfo>
+          )}
+        </Query>
+      </Container>
     );
   };
 };

src/pages/Dashboard/desktop.view.js

@@ -62,15 +62,21 @@ export default function() {
                   }
                 />
               )}
-              {activeTab === 'tip' && (
-                <Tip onClose={this.onCloseTip} />
-              )}
+              {activeTab === 'tip' && <RecentPayments type="tips" />}
             </RightSide>
             <LeftSide>
+              {activeTab !== 'tip' && (
               <NumberWrapper>
                 <NumberInput value={totalAmount} />
               </NumberWrapper>
+              )}
+              {activeTab !== 'tip' && (
               <GenerateBillBtn handlePay={this.handlePay} />
+              )}
+              <Tip
+                active={activeTab === 'tip'}
+                onTipReceived={this.onTipReceived}
+              />
             </LeftSide>
           </React.Fragment>
         ) : (

src/pages/Dashboard/index.js

@@ -63,6 +63,10 @@ class Dashboard extends Component {
     }, 5000);
   };
 
+  onTipReceived = () => {
+
+  }
+
   handleNavItemChange = activeTab => {
     // eslint-disable-next-line
     const currentTab = this.state.activeTab;

src/pages/Payment/components/QrCode.js

@@ -14,17 +14,24 @@ const Container = styled.div`
 
 class QrCode extends React.Component {
   state = {
-    address: null
+    address: null,
+    noValue: false,
   };
 
   componentDidMount() {
     store.fetch.pos().subscribe(res => {
       this.setState({ address: res.data.pos.address });
     });
+    if(this.props.noValue) {
+      this.setState({ noValue: this.props.noValue });
+    }
   }
 
   getQrData(value) {
     const { address } = this.state;
+    if(this.state.noValue) {
+      return `ethereum:${address}@100`;
+    }
     return `ethereum:${address}@100?value=${value}e18`;
   }
 
@@ -45,7 +52,8 @@ QrCode.propTypes = {
 };
 
 QrCode.propTypes = {
-  valueCrypto: PropTypes.string.isRequired
+  valueCrypto: PropTypes.string.isRequired,
+  noValue: PropTypes.bool,
 };
 
 export default QrCode;