WA-232 RemoveToken component

src/routes/tokens/component/RemoveToken/Review.jsx

@@ -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

src/routes/tokens/component/RemoveToken/index.jsx

@@ -1,16 +1,70 @@
 // @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>
     )
   }