Skip to content

Commit

Permalink
Merge pull request #171 from enabledao/fix/#87_2
Browse files Browse the repository at this point in the history 
set up Toasts notifications
  • Loading branch information
@adibas03
adibas03 authored Nov 11, 2019
2 parents ac02f2f + a5a9fa6 commit 5489088
Show file tree
Hide file tree
Showing 11 changed files with 324 additions and 145 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 7 additions & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -40,6 +46,7 @@ const App: React.FC = () => {
<Route component={ErrorNotFound} />
</Switch>
</Router>
<ToastMessage.Provider ref={node => dispatchToastProvider(node)} />
</Provider>
)
}
Expand Down
31 changes: 30 additions & 1 deletion src/components/pages/faucet/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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 {
Expand All @@ -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 })
Expand Down
79 changes: 61 additions & 18 deletions src/components/pages/loanOffer/checkout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -53,6 +54,7 @@ import {
getLoanPeriod,
} from '../../../../utils/metadata'
import contractAddresses from '../../../../config/ines.fund'
import { networksExplorer } from '../../../../utils/getWeb3'
import {
BN,
connectToWallet,
Expand Down Expand Up @@ -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)')
}
Expand Down Expand Up @@ -161,6 +212,7 @@ class Checkout extends React.Component<CheckoutProps, CheckoutState> {
transacting: false,
txError,
})
txEvents.onError(txError)
return console.error(txError)
}

Expand All @@ -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(`
Expand All @@ -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)
}
Expand Down
49 changes: 44 additions & 5 deletions src/components/pages/myLoan/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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 }, () =>
Expand All @@ -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 }, () =>
Expand All @@ -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)

Expand Down Expand Up @@ -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)
Expand Down
2 changes: 2 additions & 0 deletions src/store/index.js
View file
Original file line number Diff line number Diff line change
@@ -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())
20 changes: 20 additions & 0 deletions src/store/toastProvider.js
View file
Original file line number Diff line number Diff line change
@@ -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
}
}
Loading

0 comments on commit 5489088

Please sign in to comment.