WA-232 Add custom token logic

src/routes/tokens/component/AddToken/FirstPage.jsx

@@ -10,7 +10,7 @@ type Props = {
   addresses: string[],
 }
 
-export const TOKEN_PARAM = 'tokenAddress'
+export const TOKEN_ADRESS_PARAM = 'tokenAddress'
 
 const FirstPage = ({ addresses }: Props) => () => (
   <Block margin="md">
@@ -19,7 +19,7 @@ const FirstPage = ({ addresses }: Props) => () => (
     </Heading>
     <Block margin="md">
       <Field
-        name={TOKEN_PARAM}
+        name={TOKEN_ADRESS_PARAM}
         component={TextField}
         type="text"
         validate={composeValidators(required, mustBeEthereumAddress, uniqueAddress(addresses))}

src/routes/tokens/component/AddToken/SecondPage.jsx

@@ -6,10 +6,10 @@ import { composeValidators, required, mustBeInteger, mustBeUrl } from '~/compone
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
 
-export const NAME_PARAM = 'tokenName'
+export const TOKEN_NAME_PARAM = 'tokenName'
-export const SYMBOL_PARAM = 'tokenSymbol'
+export const TOKEN_SYMBOL_PARAM = 'tokenSymbol'
-export const DECIMALS_PARAM = 'tokenDecimals'
+export const TOKEN_DECIMALS_PARAM = 'tokenDecimals'
-export const LOGO_URL_PARAM = 'tokenLogo'
+export const TOKEN_LOGO_URL_PARAM = 'tokenLogo'
 
 const SecondPage = () => () => (
   <Block margin="md">
@@ -18,7 +18,7 @@ const SecondPage = () => () => (
     </Heading>
     <Block margin="md">
       <Field
-        name={NAME_PARAM}
+        name={TOKEN_NAME_PARAM}
         component={TextField}
         type="text"
         validate={required}
@@ -28,7 +28,7 @@ const SecondPage = () => () => (
     </Block>
     <Block margin="md">
       <Field
-        name={SYMBOL_PARAM}
+        name={TOKEN_SYMBOL_PARAM}
         component={TextField}
         type="text"
         validate={required}
@@ -38,7 +38,7 @@ const SecondPage = () => () => (
     </Block>
     <Block margin="md">
       <Field
-        name={DECIMALS_PARAM}
+        name={TOKEN_DECIMALS_PARAM}
         component={TextField}
         type="text"
         validate={composeValidators(required, mustBeInteger)}
@@ -48,7 +48,7 @@ const SecondPage = () => () => (
     </Block>
     <Block margin="md">
       <Field
-        name={LOGO_URL_PARAM}
+        name={TOKEN_LOGO_URL_PARAM}
         component={TextField}
         type="text"
         validate={composeValidators(required, mustBeUrl)}

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

@@ -1,11 +1,12 @@
 // @flow
 import * as React from 'react'
 import Stepper from '~/components/Stepper'
-import SecondPage, { SYMBOL_PARAM, DECIMALS_PARAM, NAME_PARAM } from '~/routes/tokens/component/AddToken/SecondPage'
 import { getHumanFriendlyToken } from '~/routes/tokens/store/actions/fetchTokens'
-import { TOKEN_PARAM } from '~/routes/tokens/component/AddToken/FirstPage'
+import FirstPage, { TOKEN_ADDRESS_PARAM } from '~/routes/tokens/component/AddToken/FirstPage'
+import SecondPage, { TOKEN_SYMBOL_PARAM, TOKEN_DECIMALS_PARAM, TOKEN_LOGO_URL_PARAM, TOKEN_NAME_PARAM } from '~/routes/tokens/component/AddToken/SecondPage'
+import { makeToken, type Token } from '~/routes/tokens/store/model/token'
+import addTokenAction from '~/routes/tokens/store/actions/addTokens'
 import Review from './Review'
-import FirstPage from './FirstPage'
 
 export const getSteps = () => [
   'Fill Add Token Form', 'Check optional attributes', 'Review Information',
@@ -14,6 +15,7 @@ export const getSteps = () => [
 type Props = {
   tokens: string[],
   safeAddress: string,
+  addToken: typeof addTokenAction
 }
 
 type State = {
@@ -22,7 +24,25 @@ type State = {
 
 export const ADD_TOKEN_RESET_BUTTON_TEXT = 'RESET'
 
-export const addToken = async (values: Object) => Promise.reject(values)
+export const addTokenFnc = async (values: Object, addToken, safeAddress: string) => {
+  const address = values[TOKEN_ADDRESS_PARAM]
+  const name = values[TOKEN_NAME_PARAM]
+  const symbol = values[TOKEN_SYMBOL_PARAM]
+  const decimals = values[TOKEN_DECIMALS_PARAM]
+  const logo = values[TOKEN_LOGO_URL_PARAM]
+
+  const token: Token = makeToken({
+    address,
+    name,
+    symbol,
+    decimals: Number(decimals),
+    logoUrl: logo,
+    status: true,
+    removable: true,
+  })
+
+  return addToken(safeAddress, token)
+}
 
 class AddToken extends React.Component<Props, State> {
   state = {
@@ -30,10 +50,9 @@ class AddToken extends React.Component<Props, State> {
   }
 
   onAddToken = async (values: Object) => {
-    // eslint-disable-next-line
+    const { addToken, safeAddress } = this.props
-    console.log("onAddToken...")
+
-    // eslint-disable-next-line
+    return addTokenFnc(values, addToken, safeAddress)
-    console.log(values)
   }
 
   onReset = () => {
@@ -41,7 +60,7 @@ class AddToken extends React.Component<Props, State> {
   }
 
   fetchInitialPropsSecondPage = async (values: Object) => {
-    const tokenAddress = values[TOKEN_PARAM]
+    const tokenAddress = values[TOKEN_ADDRESS_PARAM]
     const erc20Token = await getHumanFriendlyToken()
     const instance = await erc20Token.at(tokenAddress)
 
@@ -50,9 +69,9 @@ class AddToken extends React.Component<Props, State> {
     const decimals = await instance.decimals()
 
     return ({
-      [SYMBOL_PARAM]: symbol,
+      [TOKEN_SYMBOL_PARAM]: symbol,
-      [DECIMALS_PARAM]: `${decimals}`,
+      [TOKEN_DECIMALS_PARAM]: `${decimals}`,
-      [NAME_PARAM]: name,
+      [TOKEN_NAME_PARAM]: name,
     })
   }
 

src/routes/tokens/component/Layout.jsx

@@ -37,9 +37,12 @@ class TokenLayout extends React.PureComponent<TokenProps, State> {
     component: undefined,
   }
 
-  onAddToken = () => () => {
+  onAddToken = () => {
-    const { addresses, safeAddress } = this.props
+    const { addresses, safeAddress, addToken } = this.props
-    this.setState({ component: <AddToken tokens={addresses.toArray()} safeAddress={safeAddress} /> })
+
+    this.setState({
+      component: <AddToken addToken={addToken} tokens={addresses.toArray()} safeAddress={safeAddress} />,
+    })
   }
 
   /*

src/routes/tokens/container/actions.js

@@ -1,4 +1,5 @@
 // @flow
+import addToken from '~/routes/tokens/store/actions/addTokens'
 import enableToken from '~/routes/tokens/store/actions/enableToken'
 import disableToken from '~/routes/tokens/store/actions/disableToken'
 import { fetchTokens } from '~/routes/tokens/store/actions/fetchTokens'
@@ -6,9 +7,11 @@ import { fetchTokens } from '~/routes/tokens/store/actions/fetchTokens'
 export type Actions = {
   enableToken: typeof enableToken,
   disableToken: typeof disableToken,
+  addToken: typeof addToken,
 }
 
 export default {
+  addToken,
   enableToken,
   disableToken,
   fetchTokens,

src/routes/tokens/container/index.jsx

@@ -22,7 +22,7 @@ class TokensView extends React.PureComponent<Props> {
 
   render() {
     const {
-      tokens, addresses, safe, safeAddress, disableToken, enableToken,
+      tokens, addresses, safe, safeAddress, disableToken, enableToken, addToken,
     } = this.props
 
     return (
@@ -34,6 +34,7 @@ class TokensView extends React.PureComponent<Props> {
           safeAddress={safeAddress}
           disableToken={disableToken}
           enableToken={enableToken}
+          addToken={addToken}
         />
       </Page>
     )