set up Toasts notifications

package.json

@@ -31,7 +31,7 @@
         "react-tooltip": "^3.11.1",
         "redux": "^4.0.4",
         "redux-form-validators": "^3.3.2",
-        "rimble-ui": "^0.9.8",
+        "rimble-ui": "^0.10.0",
         "styled-components": "^4.3.2",
         "styled-spinkit": "^0.7.4",
         "typescript": "3.5.2",

src/App.tsx

@@ -9,6 +9,12 @@ import MyLoan from './components/pages/myLoan'
 import { AppPath } from './constant/appPath'
 import { Provider } from 'react-redux'
 import { store } from './store'
+import { setToastProvider } from './store/toastProvider'
+import { ToastMessage } from 'rimble-ui'
+
+const dispatchToastProvider = node => {
+    store.dispatch(setToastProvider(node))
+}
 
 const App: React.FC = () => {
     return (
@@ -40,6 +46,7 @@ const App: React.FC = () => {
                     <Route component={ErrorNotFound} />
                 </Switch>
             </Router>
+            <ToastMessage.Provider ref={node => dispatchToastProvider(node)} />
         </Provider>
     )
 }

src/components/pages/faucet/component.tsx

@@ -2,12 +2,14 @@ import React from 'react'
 import { ChasingDots } from 'styled-spinkit'
 import walletIcon from '../../../images/icons/wallet.svg'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
+import { store } from '../../../store'
 import { Container } from '../../../styles/bases'
 import { Margin, Padding } from '../../../styles/utils'
 import { Row, Col, Button, Spinner } from '../../lib'
 import { FaucetActionMobile, FaucetBox, FaucetWrapper } from './styled'
 import RenderConnectWallet from '../renderConnectWallet'
 import contractAddresses from '../../../config/ines.fund.js'
+import { networksExplorer } from '../../../utils/getWeb3'
 import { connectToWallet, prepBigNumber } from '../../../utils/web3Utils'
 import { getDeployedFromConfig } from '../../../utils/getDeployed'
 import { request } from '../../../utils/tokenFaucet'
@@ -37,6 +39,31 @@ class Faucet extends React.Component<FaucetProps, FaucetState> {
         loaded: false,
     }
 
+    get txEvents() {
+        const { networkId, toastProvider } = store.getState()
+        return {
+            onTransactionHash: hash =>
+                toastProvider.addMessage('Processing request...', {
+                    secondaryMessage: 'Check progress on Etherscan',
+                    actionHref: `${networksExplorer[networkId]}/tx/${hash}`,
+                    actionText: 'Check',
+                    variant: 'processing',
+                }),
+            onReceipt: receipt =>
+                toastProvider.addMessage('Request successful...', {
+                    secondaryMessage: 'View transaction Etherscan',
+                    actionHref: `${networksExplorer[networkId]}/tx/${receipt.transactionHash}`,
+                    actionText: 'View',
+                    variant: 'success',
+                }),
+            onError: error =>
+                toastProvider.addMessage('Request failed...', {
+                    secondaryMessage: `${error.message || error}`,
+                    variant: 'failure',
+                }),
+        }
+    }
+
     onRequest = async () => {
         // const {history} = this.props;
         const {
@@ -52,7 +79,9 @@ class Faucet extends React.Component<FaucetProps, FaucetState> {
         try {
             this.setState({ transacting: true })
 
-            const tx = await request(faucetInstance, address)
+            const tx = await request(faucetInstance, address, {
+                txEvents: this.txEvents,
+            })
             console.log(tx)
 
             this.setState({ transacting: false })

src/components/pages/loanOffer/checkout/index.tsx

@@ -6,6 +6,7 @@ import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { AppPath } from '../../../../constant/appPath'
 import PatternImage from '../../../../images/pattern.png'
 import { connect } from 'react-redux'
+import { store } from '../../../../store'
 import {
     Spinner,
     Row,
@@ -53,6 +54,7 @@ import {
     getLoanPeriod,
 } from '../../../../utils/metadata'
 import contractAddresses from '../../../../config/ines.fund'
+import { networksExplorer } from '../../../../utils/getWeb3'
 import {
     BN,
     connectToWallet,
@@ -108,6 +110,55 @@ class Checkout extends React.Component<CheckoutProps, CheckoutState> {
         const { history, networkId } = this.props
         const { name, email } = values
         const { crowdloanInstance, investmentAmount } = this.state
+
+        const { toastProvider } = store.getState()
+
+        const localError = error =>
+            toastProvider.addMessage('Error occured', {
+                secondaryMessage: `${error.message || error}`,
+                variant: 'failure',
+            })
+
+        const logDetails = async tx => {
+            try {
+                const resp = await axios.post(INES_FUND_POST_URL, {
+                    sender: tx.from,
+                    transactionHash: tx.transactionHash,
+                    network: networkId.toString(),
+                    amount: tx.events.Fund.returnValues.amount,
+                    email: email,
+                    name: name,
+                    gasUsed: tx.gasUsed.toString(),
+                    cumulativeGasUsed: tx.cumulativeGasUsed.toString(),
+                })
+                console.log(resp)
+            } catch (error) {
+                localError(error)
+                console.error(error)
+            }
+        }
+
+        const txEvents = {
+            onTransactionHash: hash =>
+                toastProvider.addMessage('Processing investment...', {
+                    secondaryMessage: 'Check progress on Etherscan',
+                    actionHref: `${networksExplorer[networkId]}/tx/${hash}`,
+                    actionText: 'Check',
+                    variant: 'processing',
+                }),
+            onReceipt: receipt =>
+                toastProvider.addMessage('Investment completed...', {
+                    secondaryMessage: 'View transaction Etherscan',
+                    actionHref: `${networksExplorer[networkId]}/tx/${receipt.transactionHash}`,
+                    actionText: 'View',
+                    variant: 'success',
+                }),
+            onError: error =>
+                toastProvider.addMessage('Investment failed...', {
+                    secondaryMessage: `${error.message || error}`,
+                    variant: 'failure',
+                }),
+        }
         if (!+investmentAmount) {
             return console.error('Can not contribute Zero(0)')
         }
@@ -161,6 +212,7 @@ class Checkout extends React.Component<CheckoutProps, CheckoutState> {
                     transacting: false,
                     txError,
                 })
+                txEvents.onError(txError)
                 return console.error(txError)
             }
 
@@ -172,14 +224,16 @@ class Checkout extends React.Component<CheckoutProps, CheckoutState> {
 
             let tx
             if (BN(approvedBalance).lt(BN(valueInERC20))) {
-                tx = await approveAndFund(
+                tx = approveAndFund(
                     paymentTokenInstance,
                     crowdloanInstance,
-                    valueInERC20
+                    valueInERC20,
+                    { txEvents }
                 )
             } else {
-                tx = await fund(crowdloanInstance, valueInERC20)
+                tx = fund(crowdloanInstance, valueInERC20, { txEvents })
             }
+
             // console.log(tx)
 
             // console.log(`
@@ -197,27 +251,16 @@ class Checkout extends React.Component<CheckoutProps, CheckoutState> {
             // CumulativeGasUsed:      ${tx.cumulativeGasUsed}
             // `)
 
-            try {
-                const resp = await axios.post(INES_FUND_POST_URL, {
-                    sender: tx.from,
-                    transactionHash: tx.transactionHash,
-                    network: networkId.toString(),
-                    amount: tx.events.Fund.returnValues.amount,
-                    email: email,
-                    name: name,
-                    gasUsed: tx.gasUsed.toString(),
-                    cumulativeGasUsed: tx.cumulativeGasUsed.toString(),
-                })
-                console.log(resp)
-            } catch (error) {
-                console.error(error)
-            }
+            tx = await tx
+            console.log(tx)
+            await logDetails(tx)
 
             this.setState({ transacting: false })
 
             history.push(AppPath.LoanOfferThankYou)
             return
         } catch (e) {
+            txEvents.onError(e)
             this.setState({ transacting: false })
             return console.error(e)
         }

src/components/pages/myLoan/component.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { ChasingDots } from 'styled-spinkit'
+import { store } from '../../../store'
 import RenderBorrowerLoan from './renderBorrowerLoan'
 import RenderLenderLoan from './renderLenderLoan'
 import RenderConnectWallet from '../renderConnectWallet'
 import contractAddresses from '../../../config/ines.fund.js'
 import { LoanStatuses, MILLISECONDS, ZERO } from '../../../config/constants.js'
+import { networksExplorer } from '../../../utils/getWeb3'
 import {
     BN,
     connectToWallet,
@@ -92,6 +94,31 @@ class MyLoan extends React.Component<MyLoanProps, MyLoanState> {
         },
     }
 
+    get txEvents() {
+        const { networkId, toastProvider } = store.getState()
+        return {
+            onTransactionHash: hash =>
+                toastProvider.addMessage('Processing transaction...', {
+                    secondaryMessage: 'Check progress on Etherscan',
+                    actionHref: `${networksExplorer[networkId]}/tx/${hash}`,
+                    actionText: 'Check',
+                    variant: 'processing',
+                }),
+            onReceipt: receipt =>
+                toastProvider.addMessage('Transaction completed...', {
+                    secondaryMessage: 'View transaction Etherscan',
+                    actionHref: `${networksExplorer[networkId]}/tx/${receipt.transactionHash}`,
+                    actionText: 'View',
+                    variant: 'success',
+                }),
+            onError: error =>
+                toastProvider.addMessage('Transaction failed...', {
+                    secondaryMessage: `${error.message || error}`,
+                    variant: 'failure',
+                }),
+        }
+    }
+
     onWithdraw = async () => {
         // const {history} = this.props;
         const { releaseAllowance, crowdloanInstance } = this.state
@@ -102,7 +129,9 @@ class MyLoan extends React.Component<MyLoanProps, MyLoanState> {
         try {
             this.setState({ transacting: true })
 
-            const tx = await withdrawRepayment(crowdloanInstance)
+            const tx = await withdrawRepayment(crowdloanInstance, {
+                txEvents: this.txEvents,
+            })
             console.log(tx)
 
             this.setState({ transacting: false, loaded: false }, () =>
@@ -126,7 +155,9 @@ class MyLoan extends React.Component<MyLoanProps, MyLoanState> {
                 return console.error('Crowdfund already started')
             }
 
-            const tx = await startCrowdfund(crowdloanInstance)
+            const tx = await startCrowdfund(crowdloanInstance, {
+                txEvents: this.txEvents,
+            })
             console.log(tx)
 
             this.setState({ transacting: false, loaded: false }, () =>
@@ -152,7 +183,10 @@ class MyLoan extends React.Component<MyLoanProps, MyLoanState> {
 
             const tx = await withdrawPrincipal(
                 crowdloanInstance,
-                prepBigNumber(amount, paymentToken.decimals)
+                prepBigNumber(amount, paymentToken.decimals),
+                {
+                    txEvents: this.txEvents,
+                }
             )
             console.log(tx)
 
@@ -207,10 +241,15 @@ class MyLoan extends React.Component<MyLoanProps, MyLoanState> {
                 tx = await approveAndPay(
                     paymentTokenInstance,
                     crowdloanInstance,
-                    amountInERC20
+                    amountInERC20,
+                    {
+                        txEvents: this.txEvents,
+                    }
                 )
             } else {
-                tx = await repay(crowdloanInstance, amountInERC20)
+                tx = await repay(crowdloanInstance, amountInERC20, {
+                    txEvents: this.txEvents,
+                })
             }
 
             console.log(tx)

src/store/index.js

@@ -1,9 +1,11 @@
 import { combineReducers, createStore } from 'redux'
 import { composeWithDevTools } from 'redux-devtools-extension'
 import { networkId } from './networkId'
+import { toastProvider } from './toastProvider'
 
 const rootReducer = combineReducers({
     networkId,
+    toastProvider,
 })
 
 export const store = createStore(rootReducer, composeWithDevTools())

src/store/toastProvider.js

@@ -0,0 +1,20 @@
+// Actions
+export const SET_TOAST_PROVIDER = 'SET_TOAST_PROVIDER'
+
+// Action creator
+export const setToastProvider = provider => {
+    return {
+        type: SET_TOAST_PROVIDER,
+        provider,
+    }
+}
+
+// Reducer
+export const toastProvider = (state = '', action) => {
+    switch (action.type) {
+        case SET_TOAST_PROVIDER:
+            return (state = action.provider)
+        default:
+            return state
+    }
+}