Refactor SendModal component

src/routes/safe/components/Balances/SendModal/index.jsx

@@ -8,6 +8,7 @@ import Modal from '~/components/Modal'
 import ChooseTxType from './screens/ChooseTxType'
 import SendFunds from './screens/SendFunds'
 import ReviewTx from './screens/ReviewTx'
+import SendCustomTx from './screens/SendCustomTx'
 
 type Props = {
   onClose: () => void,
@@ -20,14 +21,17 @@ type Props = {
   tokens: List<Token>,
   selectedToken: string,
   createTransaction: Function,
+  activeScreenType: string
 }
-type ActiveScreen = 'chooseTxType' | 'sendFunds' | 'reviewTx'
+
+type ActiveScreen = 'chooseTxType' | 'sendFunds' | 'reviewTx' | 'sendCustomTx' | 'reviewCustomTx'
 
 type TxStateType =
   | {
       token: Token,
       recipientAddress: string,
       amount: string,
+      data: string,
     }
   | Object
 
@@ -49,23 +53,24 @@ const Send = ({
   tokens,
   selectedToken,
   createTransaction,
+  activeScreenType,
 }: Props) => {
-  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('sendFunds')
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>(activeScreenType || 'chooseTxType')
   const [tx, setTx] = useState<TxStateType>({})
   const smallerModalSize = activeScreen === 'chooseTxType'
   const handleTxCreation = (txInfo) => {
     setActiveScreen('reviewTx')
     setTx(txInfo)
   }
-  const onClickBack = () => setActiveScreen('sendFunds')
+  const handleCustomTxCreation = (customTxInfo) => {
+    setActiveScreen('reviewCustomTx')
+    setTx(customTxInfo)
+  }
 
-  useEffect(
-    () => () => {
-      setActiveScreen('sendFunds')
-      setTx({})
-    },
-    [isOpen],
-  )
+  useEffect(() => {
+    setActiveScreen(activeScreenType || 'chooseTxType')
+    setTx({})
+  }, [isOpen])
 
   return (
     <Modal
@@ -95,14 +100,26 @@ const Send = ({
           <ReviewTx
             tx={tx}
             onClose={onClose}
+            setActiveScreen={setActiveScreen}
             safeAddress={safeAddress}
             etherScanLink={etherScanLink}
             safeName={safeName}
             ethBalance={ethBalance}
-            onClickBack={onClickBack}
             createTransaction={createTransaction}
           />
         )}
+        {activeScreen === 'sendCustomTx' && (
+          <SendCustomTx
+            onClose={onClose}
+            setActiveScreen={setActiveScreen}
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            safeName={safeName}
+            ethBalance={ethBalance}
+            onSubmit={handleCustomTxCreation}
+            initialValues={tx}
+          />
+        )}
       </React.Fragment>
     </Modal>
   )

src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx

@@ -27,11 +27,11 @@ import { styles } from './style'
 
 type Props = {
   onClose: () => void,
+  setActiveScreen: Function,
   classes: Object,
   safeAddress: string,
   etherScanLink: string,
   safeName: string,
-  onClickBack: Function,
   ethBalance: string,
   tx: Object,
   createTransaction: Function,
@@ -44,13 +44,13 @@ const openIconStyle = {
 
 const ReviewTx = ({
   onClose,
+  setActiveScreen,
   classes,
   safeAddress,
   etherScanLink,
   safeName,
   ethBalance,
   tx,
-  onClickBack,
   createTransaction,
 }: Props) => (
   <SharedSnackbarConsumer>
@@ -138,7 +138,7 @@ const ReviewTx = ({
           </Block>
           <Hairline style={{ position: 'absolute', bottom: 85 }} />
           <Row align="center" className={classes.buttonRow}>
-            <Button minWidth={140} minHeight={42} onClick={onClickBack}>
+            <Button minWidth={140} minHeight={42} onClick={() => setActiveScreen('sendFunds')}>
               Back
             </Button>
             <Button