createTransaction action

src/components/Header/index.jsx

@@ -12,7 +12,8 @@ import Layout from './component/Layout'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
 
-type Props = Actions & SelectorProps & {
+type Props = Actions &
+  SelectorProps & {
     openSnackbar: (message: string, variant: Variant) => void,
   }
 
@@ -67,13 +68,15 @@ class HeaderComponent extends React.PureComponent<Props, State> {
       return <ConnectDetails onConnect={this.onConnect} />
     }
 
-    return (<UserDetails
+    return (
+      <UserDetails
         provider={provider}
         network={network}
         userAddress={userAddress}
         connected={available}
         onDisconnect={this.onDisconnect}
-    />)
+      />
+    )
   }
 
   render() {
@@ -84,14 +87,13 @@ class HeaderComponent extends React.PureComponent<Props, State> {
   }
 }
 
-const Header = connect(selector, actions)(HeaderComponent)
+const Header = connect(
+  selector,
+  actions,
+)(HeaderComponent)
 
 const HeaderSnack = () => (
-  <SharedSnackbarConsumer>
-    {({ openSnackbar }) => (
-      <Header openSnackbar={openSnackbar} />
-    )}
-  </SharedSnackbarConsumer>
+  <SharedSnackbarConsumer>{({ openSnackbar }) => <Header openSnackbar={openSnackbar} />}</SharedSnackbarConsumer>
 )
 
 export default HeaderSnack

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

@@ -19,6 +19,7 @@ type Props = {
   ethBalance: string,
   tokens: List<Token>,
   selectedToken: string,
+  createTransaction: Function,
 }
 type ActiveScreen = 'chooseTxType' | 'sendFunds' | 'reviewTx'
 
@@ -47,6 +48,7 @@ const Send = ({
   ethBalance,
   tokens,
   selectedToken,
+  createTransaction,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('sendFunds')
   const [tx, setTx] = useState<TxStateType>({})
@@ -98,6 +100,7 @@ const Send = ({
             safeName={safeName}
             ethBalance={ethBalance}
             onClickBack={onClickBack}
+            createTransaction={createTransaction}
           />
         )}
       </React.Fragment>

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

@@ -2,6 +2,7 @@
 import React from 'react'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import { withStyles } from '@material-ui/core/styles'
+import { SharedSnackbarConsumer } from '~/components/SharedSnackBar/Context'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
 import Paragraph from '~/components/layout/Paragraph'
@@ -19,7 +20,6 @@ import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
 import ArrowDown from '../assets/arrow-down.svg'
 import { secondary } from '~/theme/variables'
 import { styles } from './style'
-import { createTransaction } from '~/logic/safe/transactions'
 
 type Props = {
   onClose: () => void,
@@ -30,6 +30,7 @@ type Props = {
   onClickBack: Function,
   ethBalance: string,
   tx: Object,
+  createTransaction: Function,
 }
 
 const openIconStyle = {
@@ -38,8 +39,18 @@ const openIconStyle = {
 }
 
 const ReviewTx = ({
-  onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx, onClickBack,
+  onClose,
+  classes,
+  safeAddress,
+  etherScanLink,
+  safeName,
+  ethBalance,
+  tx,
+  onClickBack,
+  createTransaction,
 }: Props) => (
+  <SharedSnackbarConsumer>
+    {({ openSnackbar }) => (
       <React.Fragment>
         <Row align="center" grow className={classes.heading}>
           <Paragraph weight="bolder" className={classes.headingText} noMargin>
@@ -52,7 +63,12 @@ const ReviewTx = ({
         </Row>
         <Hairline />
         <Block className={classes.container}>
-      <SafeInfo safeAddress={safeAddress} etherScanLink={etherScanLink} safeName={safeName} ethBalance={ethBalance} />
+          <SafeInfo
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            safeName={safeName}
+            ethBalance={ethBalance}
+          />
           <Row margin="md">
             <Col xs={1}>
               <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
@@ -101,8 +117,8 @@ const ReviewTx = ({
           <Button
             type="submit"
             className={classes.button}
-        onClick={async () => {
-          await createTransaction(safeAddress, tx.recipientAddress, tx.amount, tx.token)
+            onClick={() => {
+              createTransaction(safeAddress, tx.recipientAddress, tx.amount, tx.token, openSnackbar)
               onClose()
             }}
             variant="contained"
@@ -113,6 +129,8 @@ const ReviewTx = ({
           </Button>
         </Row>
       </React.Fragment>
+    )}
+  </SharedSnackbarConsumer>
 )
 
 export default withStyles(styles)(ReviewTx)

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

@@ -41,6 +41,7 @@ type Props = {
   safeName: string,
   etherScanLink: string,
   ethBalance: string,
+  createTransaction: Function,
 }
 
 type Action = 'Token' | 'Send' | 'Receive'
@@ -93,7 +94,15 @@ class Balances extends React.Component<Props, State> {
       hideZero, showToken, showReceive, sendFunds,
     } = this.state
     const {
-      classes, granted, tokens, safeAddress, activeTokens, safeName, etherScanLink, ethBalance,
+      classes,
+      granted,
+      tokens,
+      safeAddress,
+      activeTokens,
+      safeName,
+      etherScanLink,
+      ethBalance,
+      createTransaction,
     } = this.props
 
     const columns = generateColumns()
@@ -190,6 +199,7 @@ class Balances extends React.Component<Props, State> {
           ethBalance={ethBalance}
           tokens={activeTokens}
           selectedToken={sendFunds.selectedToken}
+          createTransaction={createTransaction}
         />
         <Modal
           title="Receive Tokens"

src/routes/safe/components/Layout.jsx

@@ -23,6 +23,7 @@ import Balances from './Balances'
 type Props = SelectorProps & {
   classes: Object,
   granted: boolean,
+  createTransaction: Function,
 }
 
 type State = {
@@ -88,7 +89,7 @@ class Layout extends React.Component<Props, State> {
 
   render() {
     const {
-      safe, provider, network, classes, granted, tokens, activeTokens,
+      safe, provider, network, classes, granted, tokens, activeTokens, createTransaction,
     } = this.props
     const { tabIndex } = this.state
 
@@ -137,6 +138,7 @@ class Layout extends React.Component<Props, State> {
             safeAddress={address}
             safeName={name}
             etherScanLink={etherScanLink}
+            createTransaction={createTransaction}
           />
         )}
       </React.Fragment>

src/routes/safe/components/SendToken/ReviewTx/index.jsx

@@ -14,7 +14,7 @@ type FormProps = {
 }
 
 type Props = {
-  symbol: string
+  symbol: string,
 }
 
 const spinnerStyle = {
@@ -25,14 +25,14 @@ const ReviewTx = ({ symbol }: Props) => (controls: React$Node, { values, submitt
   <OpenPaper controls={controls}>
     <Heading tag="h2">Review the move token funds</Heading>
     <Paragraph align="left">
-      <Bold>Destination: </Bold> {values[TKN_DESTINATION_PARAM]}
+      <Bold>Destination: </Bold>
+      {' '}
+      {values[TKN_DESTINATION_PARAM]}
     </Paragraph>
     <Paragraph align="left">
       <Bold>{`Amount to transfer: ${values[TKN_VALUE_PARAM]} ${symbol}`}</Bold>
     </Paragraph>
-    <Block style={spinnerStyle}>
-      { submitting && <CircularProgress size={50} /> }
-    </Block>
+    <Block style={spinnerStyle}>{submitting && <CircularProgress size={50} />}</Block>
   </OpenPaper>
 )
 

src/routes/safe/container/actions.js

@@ -1,13 +1,16 @@
 // @flow
 import fetchSafe from '~/routes/safe/store/actions/fetchSafe'
 import fetchTokenBalances from '~/routes/safe/store/actions/fetchTokenBalances'
+import createTransaction from '~/routes/safe/store/actions/createTransaction'
 
 export type Actions = {
   fetchSafe: typeof fetchSafe,
   fetchTokenBalances: typeof fetchTokenBalances,
+  createTransaction: typeof createTransaction,
 }
 
 export default {
   fetchSafe,
   fetchTokenBalances,
+  createTransaction,
 }

src/routes/safe/container/index.jsx

@@ -52,7 +52,7 @@ class SafeView extends React.Component<Props> {
 
   render() {
     const {
-      safe, provider, activeTokens, granted, userAddress, network, tokens,
+      safe, provider, activeTokens, granted, userAddress, network, tokens, createTransaction,
     } = this.props
 
     return (
@@ -65,6 +65,7 @@ class SafeView extends React.Component<Props> {
           userAddress={userAddress}
           network={network}
           granted={granted}
+          createTransaction={createTransaction}
         />
       </Page>
     )

src/routes/safe/store/actions/createTransaction.js

@@ -13,7 +13,7 @@ import { getStandardTokenContract } from '~/logic/tokens/store/actions/fetchToke
 export const ADD_TRANSACTIONS = 'ADD_TRANSACTIONS'
 export const addTransactions = createAction<string, *>(ADD_TRANSACTIONS)
 
-export const createTransaction = async (safeAddress: string, to: string, valueInEth: string, token: Token) => async (
+const createTransaction = (safeAddress: string, to: string, valueInEth: string, token: Token, openSnackbar: Function) => async (
   dispatch: ReduxDispatch<GlobalState>,
 ) => {
   const safeInstance = await getSafeEthereumInstance(safeAddress)
@@ -35,6 +35,7 @@ export const createTransaction = async (safeAddress: string, to: string, valueIn
   let txHash
   if (isExecution) {
     txHash = await executeTransaction(safeInstance, to, valueInWei, txData, CALL, nonce, from)
+    openSnackbar('Transaction has been submitted', 'success')
   } else {
     // txHash = await approveTransaction(safeAddress, to, valueInWei, txData, CALL, nonce)
   }
@@ -42,3 +43,5 @@ export const createTransaction = async (safeAddress: string, to: string, valueIn
 
   return txHash
 }
+
+export default createTransaction