WA-232 RemoveToken component
This commit is contained in:
parent
fdf32fcdbb
commit
441e06efaa
|
@ -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
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue