diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx
index abd535f1..8ffae44a 100644
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@@ -9,6 +9,7 @@ import ChooseTxType from './screens/ChooseTxType'
import SendFunds from './screens/SendFunds'
import ReviewTx from './screens/ReviewTx'
import SendCustomTx from './screens/SendCustomTx'
+import ReviewCustomTx from './screens/ReviewCustomTx'
type Props = {
onClose: () => void,
@@ -38,6 +39,9 @@ type TxStateType =
const styles = () => ({
scalableModalWindow: {
height: 'auto',
+ },
+ scalableStaticModalWindow: {
+ height: 'auto',
position: 'static',
},
})
@@ -63,7 +67,8 @@ const Send = ({
setTx({})
}, [isOpen])
- const scalableModalSize = activeScreen === 'chooseTxType' || activeScreen === 'sendCustomTx'
+ const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx'
+ const scalableStaticModalSize = activeScreen === 'chooseTxType'
const handleTxCreation = (txInfo) => {
setActiveScreen('reviewTx')
@@ -81,7 +86,10 @@ const Send = ({
description="Send Tokens Form"
handleClose={onClose}
open={isOpen}
- paperClassName={cn(scalableModalSize && classes.scalableModalWindow)}
+ paperClassName={cn(
+ scalableStaticModalSize && classes.scalableStaticModalWindow,
+ scalableModalSize && classes.scalableModalWindow,
+ )}
>
<>
{activeScreen === 'chooseTxType' && }
@@ -121,6 +129,18 @@ const Send = ({
initialValues={tx}
/>
)}
+ {activeScreen === 'reviewCustomTx' && (
+
+ )}
>
)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
new file mode 100644
index 00000000..e7767ce1
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
@@ -0,0 +1,144 @@
+// @flow
+import React from 'react'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import { withStyles } from '@material-ui/core/styles'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import Link from '~/components/layout/Link'
+import Col from '~/components/layout/Col'
+import Button from '~/components/layout/Button'
+import Img from '~/components/layout/Img'
+import Block from '~/components/layout/Block'
+import Identicon from '~/components/Identicon'
+import { copyToClipboard } from '~/utils/clipboard'
+import Hairline from '~/components/layout/Hairline'
+import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
+import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import ArrowDown from '../assets/arrow-down.svg'
+import { secondary } from '~/theme/variables'
+import { styles } from './style'
+
+type Props = {
+ onClose: () => void,
+ setActiveScreen: Function,
+ classes: Object,
+ safeAddress: string,
+ etherScanLink: string,
+ safeName: string,
+ ethBalance: string,
+ tx: Object,
+}
+
+const openIconStyle = {
+ height: '16px',
+ color: secondary,
+}
+
+const ReviewCustomTx = ({
+ onClose,
+ setActiveScreen,
+ classes,
+ safeAddress,
+ etherScanLink,
+ safeName,
+ ethBalance,
+ tx,
+}: Props) => (
+
+ {() => {
+ const submitTx = async () => {
+
+ }
+
+ return (
+ <>
+
+
+ Send Funds
+
+ 2 of 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recipient
+
+
+
+
+
+
+
+
+ {tx.recipientAddress}
+
+
+
+
+
+
+
+
+ Value
+
+
+
+
+
+ {tx.value}
+ {'ETH'}
+
+
+
+
+
+ {tx.data}
+
+
+
+
+
+
+
+
+
+ >
+ )
+ }}
+
+)
+
+export default withStyles(styles)(ReviewCustomTx)
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js
new file mode 100644
index 00000000..cfb0904b
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js
@@ -0,0 +1,51 @@
+// @flow
+import {
+ lg, md, sm, secondaryText, border,
+} from '~/theme/variables'
+
+export const styles = () => ({
+ heading: {
+ padding: `${sm} ${lg}`,
+ justifyContent: 'flex-start',
+ boxSizing: 'border-box',
+ maxHeight: '75px',
+ },
+ annotation: {
+ letterSpacing: '-1px',
+ color: secondaryText,
+ marginRight: 'auto',
+ marginLeft: '20px',
+ },
+ headingText: {
+ fontSize: '24px',
+ },
+ closeIcon: {
+ height: '35px',
+ width: '35px',
+ },
+ container: {
+ padding: `${md} ${lg}`,
+ },
+ value: {
+ marginLeft: sm,
+ },
+ outerData: {
+ borderRadius: '5px',
+ border: `1px solid ${border}`,
+ padding: '11px',
+ },
+ data: {
+ wordBreak: 'break-all',
+ overflow: 'auto',
+ fontSize: '14px',
+ fontFamily: 'Averta',
+ maxHeight: '100px',
+ letterSpacing: 'normal',
+ fontStretch: 'normal',
+ lineHeight: '1.43',
+ },
+ buttonRow: {
+ height: '84px',
+ justifyContent: 'center',
+ },
+})