Improve error handling in frontend (#60)

Closes #36

blockchain/.eslintignore

@@ -0,0 +1 @@
+coverage

frontend/src/PoBA.js

@@ -46,30 +46,41 @@ class PoBA extends Component {
 
     PobaContract.setProvider(web3.currentProvider)
 
-    this.pobaContract = await PobaContract.deployed()
+    try {
+      this.pobaContract = await PobaContract.deployed()
 
-    const registeredAcountsCount = await this.pobaContract.accountsLength.call(account)
+      const registeredAccountsCount = await this.pobaContract.accountsLength.call(account)
 
-    const whenAccounts = []
-    for (let i = 0; i < registeredAcountsCount; i++) {
-      whenAccounts.push(this.pobaContract.accounts(account, i))
-    }
+      const whenAccounts = []
+      for (let i = 0; i < registeredAccountsCount; i++) {
+        whenAccounts.push(this.pobaContract.accounts(account, i))
+      }
 
-    const registeredAccounts = await Promise.all(whenAccounts)
+      const registeredAccounts = await Promise.all(whenAccounts)
 
-    this.setState({ registeredAccounts })
+      this.setState({ registeredAccounts })
+    } catch (e) {
+      console.error('Contract is not deployed on this network', e)
+      errorAlert('Contract is not deployed on this network')
+    }
   }
 
   fetchBankAccounts = async token => {
     this.setState({ loading: true })
 
     return getBankAccounts(token)
-      .then(bankAccounts => {
-        this.setState({
-          token,
-          bankAccounts
-        })
-      })
+      .then(
+        bankAccounts => {
+          this.setState({
+            token,
+            bankAccounts
+          })
+        },
+        e => {
+          console.error('There was a problem getting the bank accounts', e)
+          errorAlert('There was a problem getting the bank accounts')
+        }
+      )
       .finally(() => this.setState({ loading: false }))
   }
 

frontend/src/alerts.js

@@ -1,16 +1,16 @@
 import sweetAlert2 from 'sweetalert2'
 
-export function successAlert() {
+export function successAlert(msg = 'Your bank account was successfully registered') {
   sweetAlert2({
-    title: 'Bank account registration',
-    html: 'Your bank account was successfully registered',
+    title: 'Proof of Bank Account',
+    html: msg,
     type: 'success'
   })
 }
 
 export function errorAlert(msg = 'There was a problem registering your bank account') {
   sweetAlert2({
-    title: 'Bank account registration',
+    title: 'Proof of Bank Account',
     html: msg,
     type: 'error'
   })