WA-234 Adding remove owner button

src/routes/safe/component/Layout.jsx

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

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

@@ -16,6 +16,7 @@ storiesOf('Routes /safe:address', module)
   .addDecorator(FrameDecorator)
   .add('Safe undefined being connected', () => (
     <Component
+      userAddress="foo"
       safe={undefined}
       provider="METAMASK"
       balance="0"
@@ -24,6 +25,7 @@ storiesOf('Routes /safe:address', module)
   ))
   .add('Safe undefined NOT connected', () => (
     <Component
+      userAddress="foo"
       safe={undefined}
       provider=""
       balance="0"
@@ -35,6 +37,7 @@ storiesOf('Routes /safe:address', module)
 
     return (
       <Component
+        userAddress="foo"
         safe={safe}
         provider="METAMASK"
         balance="2"
@@ -47,6 +50,7 @@ storiesOf('Routes /safe:address', module)
 
     return (
       <Component
+        userAddress="foo"
         safe={safe}
         provider="METAMASK"
         balance="2"

src/routes/safe/component/Safe/Owners.jsx

@@ -8,11 +8,13 @@ import List, { ListItem, ListItemIcon } from 'material-ui/List'
 import Avatar from 'material-ui/Avatar'
 import Button from '~/components/layout/Button'
 import Group from 'material-ui-icons/Group'
+import Delete from 'material-ui-icons/Delete'
 import Person from 'material-ui-icons/Person'
 import ExpandLess from 'material-ui-icons/ExpandLess'
 import ExpandMore from 'material-ui-icons/ExpandMore'
 import { type OwnerProps } from '~/routes/safe/store/model/owner'
 import { type WithStyles } from '~/theme/mui'
+import { sameAddress } from '~/wallets/ethAddresses'
 
 const styles = {
   nested: {
@@ -22,13 +24,15 @@ const styles = {
 
 type Props = Open & WithStyles & {
   owners: List<OwnerProps>,
+  userAddress: string,
   onAddOwner: () => void,
 }
 
 export const ADD_OWNER_BUTTON_TEXT = 'Add'
+export const REMOVE_OWNER_BUTTON_TEXT = 'Delete'
 
 const Owners = openHoc(({
-  open, toggle, owners, classes, onAddOwner,
+  open, toggle, owners, classes, onAddOwner, userAddress,
 }: Props) => (
   <React.Fragment>
     <ListItem onClick={toggle}>
@@ -59,6 +63,15 @@ const Owners = openHoc(({
               primary={owner.name}
               secondary={owner.address}
             />
+            { !sameAddress(userAddress, owner.address) &&
+              <Button
+                variant="raised"
+                color="secondary"
+                onClick={() => {}}
+              >
+                <Delete />
+              </Button>
+            }
           </ListItem>
         ))}
       </List>

src/routes/safe/component/Safe/index.jsx

@@ -27,6 +27,7 @@ const safeIcon = require('./assets/gnosis_safe.svg')
 type SafeProps = {
   safe: Safe,
   balance: string,
+  userAddress: string,
 }
 
 type State = {
@@ -74,7 +75,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   }
 
   render() {
-    const { safe, balance } = this.props
+    const { safe, balance, userAddress } = this.props
     const { component } = this.state
 
     return (
@@ -82,7 +83,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
         <Col sm={12} top="xs" md={5} margin="xl" overflow>
           <List style={listStyle}>
             <Balance balance={balance} />
-            <Owners owners={safe.owners} onAddOwner={this.onAddOwner} />
+            <Owners owners={safe.owners} onAddOwner={this.onAddOwner} userAddress={userAddress} />
             <Confirmations confirmations={safe.get('threshold')} onEditThreshold={this.onEditThreshold} />
             <Address address={safe.get('address')} />
             <DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />

src/routes/safe/container/index.jsx

@@ -30,13 +30,13 @@ class SafeView extends React.PureComponent<Props> {
 
   render() {
     const {
-      safe, provider, balance, granted,
+      safe, provider, balance, granted, userAddress,
     } = this.props
 
     return (
       <Page>
         { granted
-          ? <Layout balance={balance} provider={provider} safe={safe} />
+          ? <Layout balance={balance} provider={provider} safe={safe} userAddress={userAddress} />
           : <NoRights />
         }
       </Page>

src/routes/safe/container/selector.js

@@ -12,6 +12,7 @@ export type SelectorProps = {
   safe: SafeSelectorProps,
   provider: string,
   balance: string,
+  userAddress: string,
 }
 
 export const grantedSelector: Selector<GlobalState, RouterProps, boolean> = createSelector(
@@ -40,4 +41,5 @@ export default createStructuredSelector({
   provider: providerNameSelector,
   balance: balanceSelector,
   granted: grantedSelector,
+  userAddress: userAccountSelector,
 })

src/wallets/ethAddresses.js

@@ -1,3 +1,12 @@
 // @flow
-export const sameAddress = (firstAddress: string, secondAddress: string): boolean =>
-  firstAddress.toLowerCase() === secondAddress.toLowerCase()
+export const sameAddress = (firstAddress: string, secondAddress: string): boolean => {
+  if (!firstAddress) {
+    return false
+  }
+
+  if (!secondAddress) {
+    return false
+  }
+
+  return firstAddress.toLowerCase() === secondAddress.toLowerCase()
+}