WA-234 Include warning message when removing owner if there are pending transactions

src/routes/safe/component/RemoveOwner/RemoveOwnerForm/index.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import Field from '~/components/forms/Field'
+import SnackbarContent from '~/components/SnackbarContent'
 import Checkbox from '~/components/forms/Checkbox'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
@@ -12,10 +13,11 @@ type Props = {
   threshold: number,
   name: string,
   disabled: boolean,
+  pendingTransactions: boolean,
 }
 
 const RemoveOwnerForm = ({
-  numOwners, threshold, name, disabled,
+  numOwners, threshold, name, disabled, pendingTransactions,
 }: Props) => () => (
   <Block margin="md">
     <Heading tag="h2" margin="lg">
@@ -24,6 +26,12 @@ const RemoveOwnerForm = ({
     <Heading tag="h4" margin="lg">
       {`Actual number of owners: ${numOwners}, threhsold of safe: ${threshold}`}
     </Heading>
+    { pendingTransactions &&
+      <SnackbarContent
+        variant="warning"
+        message="Be careful removing and owner might incur in some of the pending transactions could never be executed"
+      />
+    }
     <Block margin="md">
       <Field
         name={DECREASE_PARAM}

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

@@ -70,7 +70,7 @@ class RemoveOwner extends React.Component<Props, State> {
   }
 
   render() {
-    const { safe, name } = this.props
+    const { safe, name, pendingTransactions } = this.props
     const { done } = this.state
     const steps = getSteps()
     const numOwners = safe.get('owners').count()
@@ -90,7 +90,13 @@ class RemoveOwner extends React.Component<Props, State> {
           onReset={this.onReset}
           initialValues={initialValues}
         >
-          <Stepper.Page numOwners={numOwners} threshold={threshold} name={name} disabled={disabled}>
+          <Stepper.Page
+            numOwners={numOwners}
+            threshold={threshold}
+            name={name}
+            disabled={disabled}
+            pendingTransactions={pendingTransactions}
+          >
             { RemoveOwnerForm }
           </Stepper.Page>
           <Stepper.Page name={name}>

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

@@ -78,7 +78,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   onRemoveOwner = (name: string, address: string) => {
     const { safe } = this.props
 
-    this.setState({ component: <RemoveOwner threshold={safe.get('threshold')} safe={safe} name={name} userToRemove={address} /> })
+    this.setState({ component: <RemoveOwner safeAddress={safe.get('address')} threshold={safe.get('threshold')} safe={safe} name={name} userToRemove={address} /> })
   }
 
   render() {