createTransaction action

2019-05-24 18:43:06 +04:00 · 2019-05-24 18:43:06 +04:00 · c3fba307c2
parent ad183dfabb
commit c3fba307c2
9 changed files with 141 additions and 99 deletions
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@ -12,9 +12,10 @@ import Layout from './component/Layout'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'

-type Props = Actions & SelectorProps & {
-  openSnackbar: (message: string, variant: Variant) => void,
-}
+type Props = Actions &
+  SelectorProps & {
+    openSnackbar: (message: string, variant: Variant) => void,
+  }

 type State = {
  hasError: boolean,
@ -67,13 +68,15 @@ class HeaderComponent extends React.PureComponent<Props, State> {
      return <ConnectDetails onConnect={this.onConnect} />
    }

-    return (<UserDetails
-      provider={provider}
-      network={network}
-      userAddress={userAddress}
-      connected={available}
-      onDisconnect={this.onDisconnect}
-    />)
+    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
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
+++ b/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,81 +39,98 @@ const openIconStyle = {
 }

 const ReviewTx = ({
-  onClose, classes, safeAddress, etherScanLink, safeName, ethBalance, tx, onClickBack,
+  onClose,
+  classes,
+  safeAddress,
+  etherScanLink,
+  safeName,
+  ethBalance,
+  tx,
+  onClickBack,
+  createTransaction,
 }: Props) => (
-  <React.Fragment>
-    <Row align="center" grow className={classes.heading}>
-      <Paragraph weight="bolder" className={classes.headingText} noMargin>
-        Send Funds
-      </Paragraph>
-      <Paragraph className={classes.annotation}>2 of 2</Paragraph>
-      <IconButton onClick={onClose} disableRipple>
-        <Close className={classes.closeIcon} />
-      </IconButton>
-    </Row>
-    <Hairline />
-    <Block className={classes.container}>
-      <SafeInfo safeAddress={safeAddress} etherScanLink={etherScanLink} safeName={safeName} ethBalance={ethBalance} />
-      <Row margin="md">
-        <Col xs={1}>
-          <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
-        </Col>
-        <Col xs={11} center="xs" layout="column">
-          <Hairline />
-        </Col>
-      </Row>
-      <Row margin="xs">
-        <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
-          Recipient
-        </Paragraph>
-      </Row>
-      <Row margin="md" align="center">
-        <Col xs={1}>
-          <Identicon address={tx.recipientAddress} diameter={32} />
-        </Col>
-        <Col xs={11} layout="column">
-          <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
-            {tx.recipientAddress}
-            <Link to={etherScanLink} target="_blank">
-              <OpenInNew style={openIconStyle} />
-            </Link>
+  <SharedSnackbarConsumer>
+    {({ openSnackbar }) => (
+      <React.Fragment>
+        <Row align="center" grow className={classes.heading}>
+          <Paragraph weight="bolder" className={classes.headingText} noMargin>
+            Send Funds
          </Paragraph>
-        </Col>
-      </Row>
-      <Row margin="xs">
-        <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
-          Amount
-        </Paragraph>
-      </Row>
-      <Row margin="md" align="center">
-        <Img src={tx.token.logoUri} height={28} alt={tx.token.name} onError={setImageToPlaceholder} />
-        <Paragraph size="md" noMargin>
-          {tx.amount}
-          {' '}
-          {tx.token.symbol}
-        </Paragraph>
-      </Row>
-    </Block>
-    <Hairline style={{ position: 'absolute', bottom: 85 }} />
-    <Row align="center" className={classes.buttonRow}>
-      <Button className={classes.button} minWidth={140} onClick={onClickBack}>
-        Back
-      </Button>
-      <Button
-        type="submit"
-        className={classes.button}
-        onClick={async () => {
-          await createTransaction(safeAddress, tx.recipientAddress, tx.amount, tx.token)
-          onClose()
-        }}
-        variant="contained"
-        minWidth={140}
-        color="primary"
-      >
-        SUBMIT
-      </Button>
-    </Row>
-  </React.Fragment>
+          <Paragraph className={classes.annotation}>2 of 2</Paragraph>
+          <IconButton onClick={onClose} disableRipple>
+            <Close className={classes.closeIcon} />
+          </IconButton>
+        </Row>
+        <Hairline />
+        <Block className={classes.container}>
+          <SafeInfo
+            safeAddress={safeAddress}
+            etherScanLink={etherScanLink}
+            safeName={safeName}
+            ethBalance={ethBalance}
+          />
+          <Row margin="md">
+            <Col xs={1}>
+              <img src={ArrowDown} alt="Arrow Down" style={{ marginLeft: '8px' }} />
+            </Col>
+            <Col xs={11} center="xs" layout="column">
+              <Hairline />
+            </Col>
+          </Row>
+          <Row margin="xs">
+            <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
+              Recipient
+            </Paragraph>
+          </Row>
+          <Row margin="md" align="center">
+            <Col xs={1}>
+              <Identicon address={tx.recipientAddress} diameter={32} />
+            </Col>
+            <Col xs={11} layout="column">
+              <Paragraph weight="bolder" onClick={copyToClipboard} noMargin>
+                {tx.recipientAddress}
+                <Link to={etherScanLink} target="_blank">
+                  <OpenInNew style={openIconStyle} />
+                </Link>
+              </Paragraph>
+            </Col>
+          </Row>
+          <Row margin="xs">
+            <Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
+              Amount
+            </Paragraph>
+          </Row>
+          <Row margin="md" align="center">
+            <Img src={tx.token.logoUri} height={28} alt={tx.token.name} onError={setImageToPlaceholder} />
+            <Paragraph size="md" noMargin>
+              {tx.amount}
+              {' '}
+              {tx.token.symbol}
+            </Paragraph>
+          </Row>
+        </Block>
+        <Hairline style={{ position: 'absolute', bottom: 85 }} />
+        <Row align="center" className={classes.buttonRow}>
+          <Button className={classes.button} minWidth={140} onClick={onClickBack}>
+            Back
+          </Button>
+          <Button
+            type="submit"
+            className={classes.button}
+            onClick={() => {
+              createTransaction(safeAddress, tx.recipientAddress, tx.amount, tx.token, openSnackbar)
+              onClose()
+            }}
+            variant="contained"
+            minWidth={140}
+            color="primary"
+          >
+            SUBMIT
+          </Button>
+        </Row>
+      </React.Fragment>
+    )}
+  </SharedSnackbarConsumer>
 )

 export default withStyles(styles)(ReviewTx)
--- a/src/routes/safe/components/Balances/index.jsx
+++ b/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"
--- a/src/routes/safe/components/Layout.jsx
+++ b/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>
--- a/src/routes/safe/components/SendToken/ReviewTx/index.jsx
+++ b/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>
 )

--- a/src/routes/safe/container/actions.js
+++ b/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,
 }
--- a/src/routes/safe/container/index.jsx
+++ b/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>
    )
--- a/src/routes/safe/store/actions/createTransaction.js
+++ b/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