WA-232 RemoveToken component

This commit is contained in:
apanizo 2018-07-26 13:23:03 +02:00
parent fdf32fcdbb
commit 441e06efaa
2 changed files with 96 additions and 4 deletions

View File

@ -0,0 +1,38 @@
// @flow
import * as React from 'react'
import CircularProgress from '@material-ui/core/CircularProgress'
import Block from '~/components/layout/Block'
import Bold from '~/components/layout/Bold'
import Heading from '~/components/layout/Heading'
import Paragraph from '~/components/layout/Paragraph'
type Props = {
name: string,
funds: string,
symbol: string,
}
type FormProps = {
submitting: boolean,
}
const spinnerStyle = {
minHeight: '50px',
}
const Review = ({ name, funds, symbol }: Props) => ({ submitting }: FormProps) => (
<Block>
<Heading tag="h2">Remove CUSTOM ERC 20 Token</Heading>
<Paragraph align="left">
<Bold>You are about to remove the custom token: </Bold> {name}
</Paragraph>
<Paragraph align="left">
<Bold>{`You have ${funds} ${symbol} in your wallet`}</Bold>
</Paragraph>
<Block style={spinnerStyle}>
{ submitting && <CircularProgress size={50} /> }
</Block>
</Block>
)
export default Review

View File

@ -1,19 +1,73 @@
// @flow
import * as React from 'react'
import { type Token } from '~/routes/tokens/store/model/token'
import Stepper from '~/components/Stepper'
import RemoveTokenAction from '~/routes/tokens/store/actions/removeToken'
import Review from '~/routes/tokens/component/RemoveToken/Review'
const getSteps = () => [
'Review remove token operation',
]
type Props = {
token: Token,
safeAddress: string,
removeTokenAction: typeof RemoveTokenAction,
}
class RemoveToken extends React.PureComponent<Props> {
type State = {
done: boolean,
}
export const REMOVE_TOKEN_RESET_BUTTON_TEXT = 'RESET'
export const removeToken = (safeAddress: string, token: Token, removeTokenAction: typeof RemoveTokenAction) => {
removeTokenAction(safeAddress, token)
}
class RemoveToken extends React.PureComponent<Props, State> {
state = {
done: false,
}
onReset = () => {
this.setState({ done: false })
}
executeRemoveOperation = async () => {
try {
const { token, safeAddress, removeTokenAction } = this.props
await removeToken(safeAddress, token, removeTokenAction)
this.setState({ done: true })
} catch (error) {
this.setState({ done: false })
// eslint-disable-next-line
console.log('Error while removing owner ' + error)
}
}
render() {
const { done } = this.state
const { token } = this.props
const finishedButton = <Stepper.FinishButton title={REMOVE_TOKEN_RESET_BUTTON_TEXT} />
const steps = getSteps()
return (
<React.Fragment>
<Stepper
finishedTransaction={done}
finishedButton={finishedButton}
onSubmit={this.executeRemoveOperation}
steps={steps}
onReset={this.onReset}
>
<Stepper.Page name={token.get('name')} symbol={token.get('symbol')} funds={token.get('funds')}>
{ Review }
</Stepper.Page>
</Stepper>
</React.Fragment>
)
}
}
}
export default RemoveToken