Now rendering information about the account summary

Fixed web3Provider

src/Components/AccountSummary/AccountSummary.js

@@ -17,6 +17,14 @@ export class AccountSummaryComponent extends Component {
       activatedCode: null,
       createdAt: null
     },
+    summary: {
+      bondedAmount: '',
+      fees: '',
+      lastClaimRound: '',
+      startRound: '',
+      status: 'Bonded',
+      withdrawRound: ''
+    },
     render: false,
     displayMsg: displayTexts.LOADING_USER_DATA
   }
@@ -31,19 +39,22 @@ export class AccountSummaryComponent extends Component {
   }
 
   componentDidMount = async () => {
-    console.log('[AccountSummaryComponent.js] componentDidMount, userData: ', this.props.userData)
+    console.log('[AccountSummaryComponent.js] componentDidMount')
     let response
     await this.initState()
     try {
       response = await axios.get('/address/' + this.state.userData.address)
       this.setState({
         userData: {
           ...this.state.userData,
+          ...this.props.userData,
           isSubscribed: true,
           activated: response.data.activated,
           id: response.data._id,
           activatedCode: response.data.activatedCode,
-          createdAt: response.data.createdAt
+          createdAt: response.data.createdAt,
+          email: response.data.email,
+          frequency: response.data.frequency
         },
         render: true,
         displayMsg: displayTexts.WELCOME_AGAIN + this.state.userData.email
@@ -89,6 +100,7 @@ export class AccountSummaryComponent extends Component {
       this.setState({
         userData: {
           ...this.state.userData,
+          ...this.props.userData,
           activated: response.data.activated,
           id: response.data._id,
           activatedCode: response.data.activated,
@@ -98,9 +110,9 @@ export class AccountSummaryComponent extends Component {
         render: true,
         displayMsg: displayTexts.WELCOME_NEW_SUBSCRIBER + this.state.userData.email
       })
-      console.log('Final state: ', this.state.userData)
     } catch (exception) {
       console.log('[AccountSummary.js] exception on postSubscription', exception)
+      /** TODO -- PARSE WHEN EMAIL ALREADY EXISTS **/
       this.setState({
         render: true,
         displayMsg: displayTexts.FAIL_NO_REASON
@@ -125,6 +137,7 @@ export class AccountSummaryComponent extends Component {
         displayMsg: displayTexts.WELCOME_NOT_SUBSCRIBED,
         userData: {
           ...this.state.userData,
+          ...this.props.userData,
           isSubscribed: false,
           activated: null,
           id: null,
@@ -160,29 +173,29 @@ export class AccountSummaryComponent extends Component {
     )
     if (this.state.render) {
       if (this.state.userData.isSubscribed) {
-        const userData = {
-          email: this.state.userData.email,
-          frequency: this.state.userData.frequency,
-          id: this.state.userData.id,
-          address: this.state.userData.address,
-          activated: this.state.userData.activated,
-          createdAt: this.state.userData.createdAt
-        }
         content = (
           <>
             <UserSubscribed
-              userData={userData}
               onUnSubscribeBtnHandler={this.onUnSubscribeBtnHandler}
               onSubscriptionChangeHandler={this.onSubscriptionChangeHandler}
+              web3={this.props.web3}
+              userData={this.state.userData}
             />
           </>
         )
-      } else {
+        /** If the user is not subscribed he can only subscribe if his status is bounded **/
+      } else if (this.state.summary.status === 'Bonded') {
         content = (
           <>
             <UserNotSubscribed onSubscribeBtnHandler={this.onSubscribeBtnHandler} />
           </>
         )
+      } /** Otherwise we notify the user about that  **/ else {
+        content = (
+          <>
+            <p>In order to subscribe you need to be on BOUNDED status</p>
+          </>
+        )
       }
     }
 

src/Components/AccountSummary/AccountSummaryData/AccountSummaryData.css

@@ -1,3 +1,3 @@
 .accountSummaryDataTable{
-    border: 1px solid white;
+
 }

src/Components/AccountSummary/AccountSummaryData/AccountSummaryData.js

@@ -15,10 +15,6 @@ const AccountSummaryData = props => {
             <td>BondedAmount</td>
             <td>{props.summary.bondedAmount} </td>
           </tr>
-          <tr>
-            <td>DelegateAddress</td>
-            <td>{props.summary.delegateAddress}</td>
-          </tr>
           <tr>
             <td>Fees</td>
             <td>{props.summary.fees}</td>

src/Components/AccountSummary/UserSubscribed/UserSubscribed.css

@@ -1,8 +1,7 @@
 .subscriptionBtn {
-  margin-top: 100px;
+
 }
 .subscriberInfoTable{
-  margin-bottom: 90px;
-  border: 1px solid white
+  margin-bottom: 30px;
 
 }

src/Components/AccountSummary/UserSubscribed/UserSubscribed.js

@@ -9,16 +9,7 @@ import AccountSummaryData from '../AccountSummaryData/AccountSummaryData'
 export class UserSubscribed extends Component {
   state = {
     render: false,
-    displayMsg: displayTexts.LOADING_SUBSCRIPTION_DATA,
-    summary: {
-      bondedAmount: '',
-      delegateAddress: '',
-      fees: '',
-      lastClaimRound: '',
-      startRound: '',
-      status: '',
-      withdrawRound: ''
-    }
+    displayMsg: displayTexts.LOADING_SUBSCRIPTION_DATA
   }
 
   componentDidMount = async () => {
@@ -29,8 +20,8 @@ export class UserSubscribed extends Component {
       this.setState({
         render: true,
         summary: {
+          ...this.props.summary,
           bondedAmount: response.data.bondedAmount,
-          delegateAddress: response.data.delegateAddress,
           fees: response.data.fees,
           lastClaimRound: response.data.lastClaimRound,
           startRound: response.data.startRound,
@@ -97,6 +88,10 @@ export class UserSubscribed extends Component {
                         <td>Subscription frequency</td>
                         <td>{this.props.userData.frequency}</td>
                       </tr>
+                      <tr>
+                        <td>ETH Balance</td>
+                        <td>{this.props.userData.ethBalance}</td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>

src/Components/Common/Hoc/Web3Provider/Web3Provider.js

@@ -74,37 +74,40 @@ const withWeb3Provider = WrappedComponent => {
       Promise.all([web3Instance.eth.getAccounts(), web3Instance.eth.net.getId()]).then(results => {
         userAddress = results[0]
         userNetwork = results[1]
-        this.setState({
-          web3: web3Instance,
-          userData: {
-            authenticated: true,
-            address: userAddress[0],
-            currentNetwork: userNetwork
-          },
-          render: true
-        })
-
-        /** We subscribe to the event that detects if the user has changed the account **/
-        window.ethereum.on('accountsChanged', accounts => {
-          console.log('ETHEREUM CHANGED')
-          console.log('ACCOUNTS ', accounts)
+        web3Instance.eth.getBalance(userAddress[0]).then(balance => {
           this.setState({
+            web3: web3Instance,
             userData: {
-              ...this.state.userData,
-              address: accounts[0]
-            }
+              authenticated: true,
+              address: userAddress[0],
+              currentNetwork: userNetwork,
+              ethBalance: balance
+            },
+            render: true
           })
-        })
 
-        /** We subscribe to the event that detects if the user has changed the network **/
-        window.ethereum.on('networkChanged', network => {
-          console.log('NETWORK CHANGED')
-          console.log('NETWORK ', network)
-          this.setState({
-            userData: {
-              ...this.state.userData,
-              currentNetwork: network
-            }
+          /** We subscribe to the event that detects if the user has changed the account **/
+          window.ethereum.on('accountsChanged', accounts => {
+            console.log('ETHEREUM CHANGED')
+            console.log('ACCOUNTS ', accounts)
+            this.setState({
+              userData: {
+                ...this.state.userData,
+                address: accounts[0]
+              }
+            })
+          })
+
+          /** We subscribe to the event that detects if the user has changed the network **/
+          window.ethereum.on('networkChanged', network => {
+            console.log('NETWORK CHANGED')
+            console.log('NETWORK ', network)
+            this.setState({
+              userData: {
+                ...this.state.userData,
+                currentNetwork: network
+              }
+            })
           })
         })
       })