diff --git a/src/routes/open/components/ReviewInformation/index.jsx b/src/routes/open/components/ReviewInformation/index.jsx
index 343a5575..ccf71ebd 100644
--- a/src/routes/open/components/ReviewInformation/index.jsx
+++ b/src/routes/open/components/ReviewInformation/index.jsx
@@ -2,47 +2,123 @@
import * as React from 'react'
import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
import Block from '~/components/layout/Block'
-import Bold from '~/components/layout/Bold'
+import { withStyles } from '@material-ui/core/styles'
+import Identicon from '~/components/Identicon'
import OpenPaper from '~/components/Stepper/OpenPaper'
import Col from '~/components/layout/Col'
-import Heading from '~/components/layout/Heading'
import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph'
-import { FIELD_NAME, FIELD_CONFIRMATIONS, FIELD_DAILY_LIMIT } from '../fields'
+import { md, lg, border, background } from '~/theme/variables'
+import Hairline from '~/components/layout/Hairline'
+import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields'
-const ReviewInformation = () => (controls: React$Node, { values }: Object) => {
+const styles = () => ({
+ root: {
+ minHeight: '300px',
+ },
+ details: {
+ padding: lg,
+ borderRight: `solid 1px ${border}`,
+ height: '100%',
+ },
+ info: {
+ backgroundColor: background,
+ padding: lg,
+ justifyContent: 'center',
+ },
+ owners: {
+ padding: lg,
+ },
+ owner: {
+ padding: md,
+ alignItems: 'center',
+ },
+})
+
+type Props = {
+ values: Object,
+ classes: Object,
+}
+
+const ReviewComponent = ({ values, classes }: Props) => {
const names = getNamesFrom(values)
const addresses = getAccountsFrom(values)
+ const numOwners = getNumOwnersFrom(values)
return (
-
- Review the Safe information
-
- Safe Name: {values[FIELD_NAME]}
-
-
- Required confirmations: {values[FIELD_CONFIRMATIONS]}
-
-
- Daily limit: {values[FIELD_DAILY_LIMIT]} ETH
-
- Owners
- { names.map((name, index) => (
-
-
-
- {name}
+
+
+
+
+
+
+ Details
+
-
-
-
- {addresses[index]}
+
+
+ Name of new Safe
+
+
+ {values[FIELD_NAME]}
+
-
-
- ))}
-
+
+
+ Any transaction over the daily limit requires the confirmation of
+
+
+ {`${values[FIELD_CONFIRMATIONS]} out of ${numOwners} owners`}
+
+
+
+
+
+
+
+ {`${numOwners} Safe owners`}
+
+
+
+ { names.map((name, index) => (
+
+
+
+
+
+
+
+ {name}
+ {addresses[index]}
+
+
+
+
+
+ ))}
+
+
+
+
+ {'You\'re about to create a new Safe.'}
+
+
+ Make sure you have enough ETH in your wallet client to fund this transaction.
+
+
+
)
}
-export default ReviewInformation
+const ReviewPage = withStyles(styles)(ReviewComponent)
+
+const Review = () => (controls: React$Node, { values }: Object) => (
+
+
+
+
+
+)
+
+
+export default Review