WA-280 - Feature not allowing similar owners accounts (#14)

* WA-280 adding unique address form validator

* WA-280 Adding test when two owner addresses are the same form raises an error

* WA-280 Refactor - Create safe button, centering loader and improving response on welcome view

src/components/Loader/indes.stories.js

@@ -0,0 +1,15 @@
+// @flow
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+import styles from '~/components/layout/PageFrame/index.scss'
+import Component from './index'
+
+const FrameDecorator = story => (
+  <div className={styles.frame}>
+    { story() }
+  </div>
+)
+
+storiesOf('Components', module)
+  .addDecorator(FrameDecorator)
+  .add('Loader', () => <Component />)

src/components/Loader/index.jsx

@@ -1,7 +1,16 @@
 // @flow
 import * as React from 'react'
+import Page from '~/components/layout/Page'
 import { CircularProgress } from 'material-ui/Progress'
 
-const Loader = () => <CircularProgress size={50} />
+const centerStyle = {
+  margin: 'auto 0',
+}
+
+const Loader = () => (
+  <Page align="center">
+    <CircularProgress style={centerStyle} size={60} />
+  </Page>
+)
 
 export default Loader

src/components/NoSafe/index.jsx

@@ -1,18 +1,17 @@
 // @flow
 import * as React from 'react'
 import Bold from '~/components/layout/Bold'
-import Button from '~/components/layout/Button'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
-import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph/index'
-import { OPEN_ADDRESS } from '~/routes/routes'
+import { CreateSafe } from '~/routes/welcome/components/Layout'
 
 type Props = {
-  text: string
+  text: string,
+  provider: string,
 }
 
-const NoSafe = ({ text }: Props) => (
+const NoSafe = ({ text, provider }: Props) => (
   <Row>
     <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
       <Paragraph size="lg">
@@ -20,9 +19,7 @@ const NoSafe = ({ text }: Props) => (
       </Paragraph>
     </Col>
     <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
-      <Link to={OPEN_ADDRESS}>
+      <CreateSafe provider={provider} />
-        <Button variant="raised" size="small" color="primary">CREATE A NEW SAFE</Button>
-      </Link>
     </Col>
   </Row>
 )

src/components/forms/validator.js

@@ -1,23 +1,23 @@
 // @flow
 import { getWeb3 } from '~/wallets/getWeb3'
 
-type Field = boolean | number | string
+type Field = boolean | string
 
 export const required = (value: Field) => (value ? undefined : 'Required')
 
 export const mustBeNumber = (value: number) =>
   (Number.isNaN(Number(value)) ? 'Must be a number' : undefined)
 
-export const minValue = (min: number) => (value: number) => {
+export const minValue = (min: number) => (value: string) => {
-  if (Number.isNaN(Number(value)) || value >= min) {
+  if (Number.isNaN(Number(value)) || Number.parseInt(value, 10) >= Number(min)) {
     return undefined
   }
 
   return `Should be at least ${min}`
 }
 
-export const maxValue = (max: number) => (value: number) => {
+export const maxValue = (max: number) => (value: string) => {
-  if (Number.isNaN(Number(value)) || value <= max) {
+  if (Number.isNaN(Number(value)) || Number.parseInt(value, 10) <= Number(max)) {
     return undefined
   }
 
@@ -32,5 +32,10 @@ export const mustBeEthereumAddress = (address: Field) => {
   return isAddress ? undefined : 'Address should be a valid Ethereum address'
 }
 
+export const ADDRESS_REPEATED_ERROR = 'Address already introduced'
+
+export const uniqueAddress = (addresses: string[]) => (value: string) =>
+  (addresses.includes(value) ? ADDRESS_REPEATED_ERROR : undefined)
+
 export const composeValidators = (...validators: Function[]) => (value: Field) =>
   validators.reduce((error, validator) => error || validator(value), undefined)

src/components/layout/Link/index.jsx

@@ -11,14 +11,16 @@ type Props = {
   padding?: 'xs' | 'sm' | 'md',
   to: string,
   children: React$Node,
+  color?: 'regular' | 'white',
   className?: string,
 }
 
 const GnosisLink = ({
-  to, children, className, padding, ...props
+  to, children, color, className, padding, ...props
 }: Props) => {
   const classes = cx(
     styles.link,
+    color || 'regular',
     padding ? capitalize(padding, 'padding') : undefined,
     className,
   )

src/components/layout/Link/index.scss

@@ -1,8 +1,15 @@
 .link {
   text-decoration: none;
+}
+
+.regular {
   color: $secondary;
 }
 
+.white {
+  color: white;
+}
+
 .paddingXs {
   padding-right: $xs;
 }

src/routes/open/components/SafeForm/Confirmations/index.test.js

@@ -8,34 +8,41 @@ import { getProviderInfo } from '~/wallets/getWeb3'
 import Wrapper from '~/test/Wrapper'
 import { CONFIRMATIONS_ERROR } from '~/routes/open/components/SafeForm'
 
+const obSubmitMock = () => {}
+
 describe('React DOM TESTS > Create Safe form', () => {
+  let open
+  let fieldOwners
+  let fieldConfirmations
   beforeEach(async () => {
     // init app web3 instance
     await getProviderInfo()
-  })
 
-  it('should not allow to continue if confirmations are higher than owners', async () => {
+    open = TestUtils.renderIntoDocument((
-    // GIVEN
-    const open = TestUtils.renderIntoDocument((
       <Wrapper>
         <Layout
           provider="METAMASK"
           userAccount="foo"
           safeAddress=""
           safeTx=""
-          onCallSafeContractSubmit={() => { }}
+          onCallSafeContractSubmit={obSubmitMock}
         />
       </Wrapper>
     ))
 
     const inputs = TestUtils.scryRenderedDOMComponentsWithTag(open, 'input')
+    const indexOwners = 1
+    const indexConfirmations = 2
+    fieldOwners = inputs[indexOwners]
+    fieldConfirmations = inputs[indexConfirmations]
 
-    const fieldOwners = inputs[1]
     expect(fieldOwners.name).toEqual(FIELD_OWNERS)
-    TestUtils.Simulate.change(fieldOwners, { target: { value: '1' } })
-
-    const fieldConfirmations = inputs[2]
     expect(fieldConfirmations.name).toEqual(FIELD_CONFIRMATIONS)
+  })
+
+  it('should not allow to continue if confirmations are higher than owners', async () => {
+    // GIVEN
+    TestUtils.Simulate.change(fieldOwners, { target: { value: '1' } })
 
     // WHEN
     TestUtils.Simulate.change(fieldConfirmations, { target: { value: '2' } })
@@ -48,4 +55,19 @@ describe('React DOM TESTS > Create Safe form', () => {
     expect(confirmationsField.props.meta.valid).toBe(false)
     expect(confirmationsField.props.meta.error).toBe(CONFIRMATIONS_ERROR)
   })
+
+  it('should raise error when confirmations are 012 and number of owners are 2', async () => {
+    // GIVEN
+    TestUtils.Simulate.change(fieldOwners, { target: { value: '2' } })
+    // WHEN
+    TestUtils.Simulate.change(fieldConfirmations, { target: { value: '014' } })
+
+    // THEN
+    const muiFields = TestUtils.scryRenderedComponentsWithType(open, TextField)
+    expect(7).toEqual(muiFields.length)
+    const confirmationsField = muiFields[6]
+
+    expect(confirmationsField.props.meta.valid).toBe(false)
+    expect(confirmationsField.props.meta.error).toBe(CONFIRMATIONS_ERROR)
+  })
 })

src/routes/open/components/SafeForm/Owners/index.jsx

@@ -2,7 +2,15 @@
 import * as React from 'react'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
-import { composeValidators, minValue, maxValue, mustBeNumber, mustBeEthereumAddress, required } from '~/components/forms/validator'
+import {
+  composeValidators,
+  minValue,
+  maxValue,
+  mustBeNumber,
+  mustBeEthereumAddress,
+  required,
+  uniqueAddress,
+} from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Heading from '~/components/layout/Heading'
@@ -12,12 +20,20 @@ import { FIELD_OWNERS, getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/c
 
 type Props = {
   numOwners: number,
+  otherAccounts: string[],
 }
 
 const MAX_NUMBER_OWNERS = 50
 
+const getAddressValidators = (addresses: string[], position: number) => {
+  const copy = addresses.slice()
+  copy.splice(position, 1)
+
+  return composeValidators(required, mustBeEthereumAddress, uniqueAddress(copy))
+}
+
 const Owners = (props: Props) => {
-  const { numOwners } = props
+  const { numOwners, otherAccounts } = props
   const validNumber = numOwners && Number.isInteger(Number(numOwners))
   const renderOwners = validNumber && Number(numOwners) <= MAX_NUMBER_OWNERS
 
@@ -54,7 +70,7 @@ const Owners = (props: Props) => {
                   name={getOwnerAddressBy(index)}
                   component={TextField}
                   type="text"
-                  validate={composeValidators(required, mustBeEthereumAddress)}
+                  validate={getAddressValidators(otherAccounts, index)}
                   placeholder="Owner Address*"
                   text="Owner Address"
                 />

src/routes/open/components/SafeForm/Owners/index.test.js

@@ -0,0 +1,61 @@
+// @flow
+import TextField from '~/components/forms/TextField'
+import * as React from 'react'
+import * as TestUtils from 'react-dom/test-utils'
+import GnoForm from '~/components/forms/GnoForm'
+import { FIELD_OWNERS } from '~/routes/open/components/fields'
+import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
+import { getProviderInfo } from '~/wallets/getWeb3'
+import Wrapper from '~/test/Wrapper'
+import { ADDRESS_REPEATED_ERROR } from '~/components/forms/validator'
+import Owners from './index'
+
+const onSubmitMock = () => {}
+const childrenMock = () => {}
+
+describe('React DOM TESTS > Create Safe form', () => {
+  beforeEach(async () => {
+    // init app web3 instance
+    await getProviderInfo()
+  })
+
+  it('should not allow to continue if owners addresses are duplicated', async () => {
+    // GIVEN
+    const open = TestUtils.renderIntoDocument((
+      <Wrapper>
+        <GnoForm
+          onSubmit={onSubmitMock}
+          padding={15}
+          render={({ values }) => (
+            <Owners
+              numOwners={values.owners}
+              otherAccounts={getAccountsFrom(values)}
+            />
+          )}
+        >
+          {childrenMock}
+        </GnoForm>
+      </Wrapper>
+    ))
+
+    let inputs = TestUtils.scryRenderedDOMComponentsWithTag(open, 'input')
+    const fieldOwners = inputs[0]
+    expect(fieldOwners.name).toEqual(FIELD_OWNERS)
+    TestUtils.Simulate.change(fieldOwners, { target: { value: '2' } })
+
+    // WHEN
+    inputs = TestUtils.scryRenderedDOMComponentsWithTag(open, 'input')
+    const firstOwnerAddress = inputs[2]
+    TestUtils.Simulate.change(firstOwnerAddress, { target: { value: '0xC21aC257Db500a87c65Daa980432F216A719bA30' } })
+    const secondOwnerAddress = inputs[4]
+    TestUtils.Simulate.change(secondOwnerAddress, { target: { value: '0xC21aC257Db500a87c65Daa980432F216A719bA30' } })
+
+    // THEN
+    const muiFields = TestUtils.scryRenderedComponentsWithType(open, TextField)
+    expect(5).toEqual(muiFields.length)
+    const secondAddressField = muiFields[4]
+
+    expect(secondAddressField.props.meta.valid).toBe(false)
+    expect(secondAddressField.props.meta.error).toBe(ADDRESS_REPEATED_ERROR)
+  })
+})

src/routes/open/components/SafeForm/index.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
+import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
 import Name from './Name'
 import Owners from './Owners'
 import Confirmations from './Confirmations'
@@ -11,7 +12,7 @@ export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher th
 export const safeFieldsValidation = (values: Object) => {
   const errors = {}
 
-  if (values.owners < values.confirmations) {
+  if (Number.parseInt(values.owners, 10) < Number.parseInt(values.confirmations, 10)) {
     errors.confirmations = CONFIRMATIONS_ERROR
   }
 
@@ -22,7 +23,7 @@ export default () => ({ values }: Object) => (
   <Block margin="md">
     <Heading tag="h2" margin="lg">Deploy a new Safe</Heading>
     <Name />
-    <Owners numOwners={values.owners} />
+    <Owners numOwners={values.owners} otherAccounts={getAccountsFrom(values)} />
     <Confirmations />
   </Block>
 )

src/routes/safe/component/Layout.jsx

@@ -6,11 +6,11 @@ import GnoSafe from './Safe'
 
 type Props = SelectorProps
 
-const Layout = ({ safe }: Props) => (
+const Layout = ({ safe, provider }: Props) => (
   <React.Fragment>
     { safe
       ? <GnoSafe safe={safe} />
-      : <NoSafe text="Not found safe" />
+      : <NoSafe provider={provider} text="Not found safe" />
     }
   </React.Fragment>
 )

src/routes/safe/component/Layout.stories.js

@@ -14,11 +14,12 @@ const FrameDecorator = story => (
 
 storiesOf('Routes /safe:address', module)
   .addDecorator(FrameDecorator)
-  .add('Safe undefined', () => <Component safe={undefined} />)
+  .add('Safe undefined being connected', () => <Component safe={undefined} provider="METAMASK" />)
+  .add('Safe undefined NOT connected', () => <Component safe={undefined} provider="" />)
   .add('Safe with 2 owners', () => {
     const safe = SafeFactory.twoOwnersSafe
 
     return (
-      <Component safe={safe} />
+      <Component safe={safe} provider="METAMASK" />
     )
   })

src/routes/safe/container/index.jsx

@@ -9,11 +9,11 @@ type Props = SelectorProps
 
 class SafeView extends React.PureComponent<Props> {
   render() {
-    const { safe } = this.props
+    const { safe, provider } = this.props
 
     return (
       <Page>
-        <Layout safe={safe} />
+        <Layout provider={provider} safe={safe} />
       </Page>
     )
   }

src/routes/safe/container/selector.js

@@ -1,11 +1,14 @@
 // @flow
 import { createStructuredSelector } from 'reselect'
 import { safeSelector, type SafeSelectorProps } from '~/routes/safe/store/selectors'
+import { providerNameSelector } from '~/wallets/store/selectors/index'
 
 export type SelectorProps = {
   safe: SafeSelectorProps,
+  provider: string,
 }
 
 export default createStructuredSelector({
   safe: safeSelector,
+  provider: providerNameSelector,
 })

src/routes/safeList/components/Layout.jsx

@@ -6,17 +6,18 @@ import { type Safe } from '~/routes/safe/store/model/safe'
 import SafeTable from '~/routes/safeList/components/SafeTable'
 
 type Props = {
-  safes: List<Safe>
+  safes: List<Safe>,
+  provider: string,
 }
 
-const SafeList = ({ safes }: Props) => {
+const SafeList = ({ safes, provider }: Props) => {
   const safesAvailable = safes && safes.count() > 0
 
   return (
     <React.Fragment>
       { safesAvailable
         ? <SafeTable safes={safes} />
-        : <NoSafe text="No safes created, please create a new one" />
+        : <NoSafe provider={provider} text="No safes created, please create a new one" />
       }
     </React.Fragment>
   )

src/routes/safeList/components/Layout.stories.js

@@ -15,10 +15,15 @@ const FrameDecorator = story => (
 
 storiesOf('Routes /safes', module)
   .addDecorator(FrameDecorator)
-  .add('Safe List whithout safes', () => <Component safes={List([])} />)
+  .add('Safe List whithout safes and connected', () => (
+    <Component provider="METAMASK" safes={List([])} />
+  ))
+  .add('Safe List whithout safes and NOT connected', () => (
+    <Component provider="" safes={List([])} />
+  ))
   .add('Safe List whith 2 safes', () => {
     const safes = List([SafeFactory.oneOwnerSafe, SafeFactory.twoOwnersSafe])
     return (
-      <Component safes={safes} />
+      <Component provider="METAMASK" safes={safes} />
     )
   })

src/routes/safeList/container/index.jsx

@@ -8,12 +8,13 @@ import Layout from '../components/Layout'
 import selector from './selector'
 
 type Props = {
-  safes: List<Safe>
+  safes: List<Safe>,
+  provider: string,
 }
 
-const SafeList = ({ safes }: Props) => (
+const SafeList = ({ safes, provider }: Props) => (
   <Page>
-    <Layout safes={safes} />
+    <Layout safes={safes} provider={provider} />
   </Page>
 )
 

src/routes/safeList/container/selector.js

@@ -1,7 +1,9 @@
 // @flow
 import { createStructuredSelector } from 'reselect'
 import { safesListSelector } from '~/routes/safeList/store/selectors'
+import { providerNameSelector } from '~/wallets/store/selectors/index'
 
 export default createStructuredSelector({
   safes: safesListSelector,
+  provider: providerNameSelector,
 })

src/routes/welcome/components/Layout.jsx

@@ -1,10 +1,10 @@
 // @flow
-import React from 'react'
+import * as React from 'react'
 import Block from '~/components/layout/Block'
 import Img from '~/components/layout/Img'
 import Button from '~/components/layout/Button'
 import Link from '~/components/layout/Link'
-import { OPEN_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes'
+import { OPEN_ADDRESS } from '~/routes/routes'
 import styles from './Layout.scss'
 
 const vault = require('../assets/vault.svg')
@@ -14,27 +14,27 @@ type Props = {
 }
 
 type SafeProps = {
+  provider: string,
   size?: 'small' | 'medium',
 }
 
-export const CreateSafe = ({ size }: SafeProps) => (
+export const CreateSafe = ({ size, provider }: SafeProps) => (
-  <Link to={OPEN_ADDRESS}>
+  <Button
-    <Button variant="raised" size={size || 'medium'} color="primary">
+    variant="raised"
-      Create a new Safe
+    size={size || 'medium'}
+    color="primary"
+    disabled={!provider}
+  >
+    <Link to={OPEN_ADDRESS} color="white">Create a new Safe</Link>
   </Button>
-  </Link>
 )
 
+
 const Welcome = ({ provider }: Props) => (
   <Block className={styles.safe}>
     <Img alt="Safe Box" src={vault} height={330} />
     <Block className={styles.safeActions} margin="md">
-      { provider && <CreateSafe /> }
+      <CreateSafe provider={provider} />
-      <Link to={SAFELIST_ADDRESS}>
-        <Button variant="raised" color="primary">
-          See Safe list
-        </Button>
-      </Link>
     </Block>
   </Block>
 )