From c3fba307c2651703b33235a1d6a26aa0744dabcd Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Fri, 24 May 2019 18:43:06 +0400 Subject: [PATCH] createTransaction action --- src/components/Header/index.jsx | 34 ++-- .../components/Balances/SendModal/index.jsx | 3 + .../SendModal/screens/ReviewTx/index.jsx | 166 ++++++++++-------- src/routes/safe/components/Balances/index.jsx | 12 +- src/routes/safe/components/Layout.jsx | 4 +- .../components/SendToken/ReviewTx/index.jsx | 10 +- src/routes/safe/container/actions.js | 3 + src/routes/safe/container/index.jsx | 3 +- .../safe/store/actions/createTransaction.js | 5 +- 9 files changed, 141 insertions(+), 99 deletions(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 12345328..1ea89441 100644 --- 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 { return } - return () + return ( + + ) } render() { @@ -84,14 +87,13 @@ class HeaderComponent extends React.PureComponent { } } -const Header = connect(selector, actions)(HeaderComponent) +const Header = connect( + selector, + actions, +)(HeaderComponent) const HeaderSnack = () => ( - - {({ openSnackbar }) => ( -
- )} - + {({ openSnackbar }) =>
} ) export default HeaderSnack diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx index 8282b1cd..f8e20a50 100644 --- 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, selectedToken: string, + createTransaction: Function, } type ActiveScreen = 'chooseTxType' | 'sendFunds' | 'reviewTx' @@ -47,6 +48,7 @@ const Send = ({ ethBalance, tokens, selectedToken, + createTransaction, }: Props) => { const [activeScreen, setActiveScreen] = useState('sendFunds') const [tx, setTx] = useState({}) @@ -98,6 +100,7 @@ const Send = ({ safeName={safeName} ethBalance={ethBalance} onClickBack={onClickBack} + createTransaction={createTransaction} /> )} diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx index 447985c8..2f5a0449 100644 --- 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) => ( - - - - Send Funds - - 2 of 2 - - - - - - - - - - Arrow Down - - - - - - - - Recipient - - - - - - - - - {tx.recipientAddress} - - - + + {({ openSnackbar }) => ( + + + + Send Funds - - - - - Amount - - - - {tx.token.name} - - {tx.amount} - {' '} - {tx.token.symbol} - - - - - - - - - + 2 of 2 + + + + + + + + + + Arrow Down + + + + + + + + Recipient + + + + + + + + + {tx.recipientAddress} + + + + + + + + + Amount + + + + {tx.token.name} + + {tx.amount} + {' '} + {tx.token.symbol} + + + + + + + + + + )} + ) export default withStyles(styles)(ReviewTx) diff --git a/src/routes/safe/components/Balances/index.jsx b/src/routes/safe/components/Balances/index.jsx index f89f5289..1280e801 100644 --- 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 { 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 { ethBalance={ethBalance} tokens={activeTokens} selectedToken={sendFunds.selectedToken} + createTransaction={createTransaction} /> { 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 { safeAddress={address} safeName={name} etherScanLink={etherScanLink} + createTransaction={createTransaction} /> )} diff --git a/src/routes/safe/components/SendToken/ReviewTx/index.jsx b/src/routes/safe/components/SendToken/ReviewTx/index.jsx index 7f9ef2bd..15f3ef92 100644 --- 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 Review the move token funds - Destination: {values[TKN_DESTINATION_PARAM]} + Destination: + {' '} + {values[TKN_DESTINATION_PARAM]} {`Amount to transfer: ${values[TKN_VALUE_PARAM]} ${symbol}`} - - { submitting && } - + {submitting && } ) diff --git a/src/routes/safe/container/actions.js b/src/routes/safe/container/actions.js index cd193daa..41636c2a 100644 --- 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, } diff --git a/src/routes/safe/container/index.jsx b/src/routes/safe/container/index.jsx index 57a131e7..bd0a7b68 100644 --- a/src/routes/safe/container/index.jsx +++ b/src/routes/safe/container/index.jsx @@ -52,7 +52,7 @@ class SafeView extends React.Component { 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 { userAddress={userAddress} network={network} granted={granted} + createTransaction={createTransaction} /> ) diff --git a/src/routes/safe/store/actions/createTransaction.js b/src/routes/safe/store/actions/createTransaction.js index dc041599..23176161 100644 --- 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(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, ) => { 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