WA-232 Partial commit removing custom tokens

src/routes/tokens/component/Layout.jsx

@@ -16,8 +16,8 @@ import { type SelectorProps } from '~/routes/tokens/container/selector'
 import { type Actions } from '~/routes/tokens/container/actions'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
 import AddToken from '~/routes/tokens/component/AddToken'
+import RemoveToken from '~/routes/tokens/component/RemoveToken'
 import TokenComponent from './Token'
-// import RemoveToken from '~/routes/tokens/component/RemoveToken'
 
 const safeIcon = require('~/routes/safe/component/Safe/assets/gnosis_safe.svg')
 
@@ -49,11 +49,10 @@ class TokenLayout extends React.PureComponent<TokenProps, State> {
     })
   }
 
-  /*
-    onRemoveToken = () => {
-      this.setState({ component: <RemoveToken /> })
-    }
-  */
+  onRemoveToken = () => {
+    this.setState({ component: <RemoveToken /> })
+  }
+
   onEnableToken = (token: Token) => {
     const { enableToken, safe } = this.props
     const safeAddress = safe.get('address')
@@ -83,6 +82,7 @@ class TokenLayout extends React.PureComponent<TokenProps, State> {
                 token={token}
                 onDisableToken={this.onDisableToken}
                 onEnableToken={this.onEnableToken}
+                onRemovetoken={this.onRemoveToken}
               />
             ))}
           </MuiList>

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

@@ -0,0 +1,19 @@
+// @flow
+import * as React from 'react'
+
+type Props = {
+
+}
+
+class RemoveToken extends React.PureComponent<Props> {
+
+  render() {
+    return (
+      <React.Fragment>
+
+      </React.Fragment>
+    )
+  } 
+}
+
+export default RemoveToken

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

@@ -9,8 +9,8 @@ import CardContent from '@material-ui/core/CardContent'
 import CardMedia from '@material-ui/core/CardMedia'
 import Typography from '@material-ui/core/Typography'
 import { isEther } from '~/utils/tokens'
-// import Delete from '@material-ui/icons/Delete'
-// import IconButton from '@material-ui/core/IconButton'
+import Delete from '@material-ui/icons/Delete'
+import IconButton from '@material-ui/core/IconButton'
 import { type WithStyles } from '~/theme/mui'
 
 type Props = WithStyles & {
@@ -47,7 +47,7 @@ class TokenComponent extends React.Component<Props, State> {
     checked: this.props.token.get('status'),
   }
 
-  // onRemoveClick = () => this.props.onRemoveToken(this.props.token)
+  onRemoveClick = () => this.props.onRemoveToken(this.props.token)
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     const { checked } = e.target
@@ -78,13 +78,13 @@ class TokenComponent extends React.Component<Props, State> {
             </Typography>
           </CardContent>
         </Block>
-        {/*
+        { token.get('removable') &&
           <Block className={classes.controls}>
             <IconButton aria-label="Delete" onClick={this.onRemoveClick}>
               <Delete />
             </IconButton>
           </Block>
-        */}
+        }
         <CardMedia
           className={classes.cover}
           image={token.get('logoUrl')}

src/test/tokens.dom.removing.test.js

@@ -0,0 +1,71 @@
+// @flow
+import * as TestUtils from 'react-dom/test-utils'
+import { getWeb3 } from '~/wallets/getWeb3'
+import { promisify } from '~/utils/promisify'
+import { getFirstTokenContract, getSecondTokenContract } from '~/test/utils/tokenMovements'
+import { aNewStore } from '~/store'
+import { aMinedSafe } from '~/test/builder/safe.redux.builder'
+import { travelToTokens } from '~/test/builder/safe.dom.utils'
+import * as fetchTokensModule from '~/routes/tokens/store/actions/fetchTokens'
+import * as enhancedFetchModule from '~/utils/fetch'
+import { TOKEN_ADRESS_PARAM } from '~/routes/tokens/component/AddToken/FirstPage'
+import { TOKEN_NAME_PARAM, TOKEN_SYMBOL_PARAM, TOKEN_DECIMALS_PARAM, TOKEN_LOGO_URL_PARAM } from '~/routes/tokens/component/AddToken/SecondPage'
+import addToken from '~/routes/tokens/store/actions/addToken'
+import { addTokenFnc } from '~/routes/tokens/component/AddToken'
+
+describe('DOM > Feature > Add new ERC 20 Tokens', () => {
+  let web3
+  let accounts
+  let firstErc20Token
+  let secondErc20Token
+
+  beforeAll(async () => {
+    web3 = getWeb3()
+    accounts = await promisify(cb => web3.eth.getAccounts(cb))
+    firstErc20Token = await getFirstTokenContract(web3, accounts[0])
+    secondErc20Token = await getSecondTokenContract(web3, accounts[0])
+
+    // $FlowFixMe
+    enhancedFetchModule.enhancedFetch = jest.fn()
+    enhancedFetchModule.enhancedFetch.mockImplementation(() => Promise.resolve([
+      {
+        address: firstErc20Token.address,
+        name: 'First Token Example',
+        symbol: 'FTE',
+        decimals: 18,
+        logoUrl: 'https://upload.wikimedia.org/wikipedia/commons/c/c0/Earth_simple_icon.png',
+      },
+    ]))
+  })
+
+  it('persist added custom ERC 20 tokens as active when reloading the page', async () => {
+    // GIVEN
+    const store = aNewStore()
+    const safeAddress = await aMinedSafe(store)
+    await store.dispatch(fetchTokensModule.fetchTokens(safeAddress))
+
+    const values = {
+      [TOKEN_ADRESS_PARAM]: secondErc20Token.address,
+      [TOKEN_NAME_PARAM]: 'Custom ERC20 Token',
+      [TOKEN_SYMBOL_PARAM]: 'CTS',
+      [TOKEN_DECIMALS_PARAM]: '10',
+      [TOKEN_LOGO_URL_PARAM]: 'https://example.com',
+    }
+
+    const customAddTokensFn: any = (...args) => store.dispatch(addToken(...args))
+    await addTokenFnc(values, customAddTokensFn, safeAddress)
+    const TokensDom = travelToTokens(store, safeAddress)
+
+    // WHEN
+    const buttons = TestUtils.scryRenderedDOMComponentsWithTag(TokensDom, 'button')
+    expect(buttons.length).toBe(1)
+    const removeUserButton = buttons[0]
+    expect(removeUserButton.getAttribute('aria-label')).toBe('Delete')
+    // click on remove Button
+    // sleep 400 msContentScript
+
+    // Click on the form for acepting
+
+    // Then list of tokens is updated correctly
+  })
+})