From 98204506347e887e616066b1bf785c725e26ab63 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:06:45 +0200 Subject: [PATCH 1/9] WA-238 Add Balance List component --- src/routes/safe/component/Safe/Balance.jsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/routes/safe/component/Safe/Balance.jsx diff --git a/src/routes/safe/component/Safe/Balance.jsx b/src/routes/safe/component/Safe/Balance.jsx new file mode 100644 index 00000000..95aeef3f --- /dev/null +++ b/src/routes/safe/component/Safe/Balance.jsx @@ -0,0 +1,20 @@ +// @flow +import * as React from 'react' +import { ListItem, ListItemText } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import AccountBalance from 'material-ui-icons/AccountBalance' + +type Props = { + balance: string, +} + +const Balance = ({ balance }: Props) => ( + + + + + + +) + +export default Balance From 9904e1b12e833e720e813e137c6a0bb232f886d0 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:07:16 +0200 Subject: [PATCH 2/9] WA-238 Add recompose library --- package.json | 3 ++- yarn.lock | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ee4c3729..8055814f 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,8 @@ "material-ui-icons": "^1.0.0-beta.35", "react-final-form": "^3.1.2", "react-loadable": "^5.3.1", - "react-router-dom": "^4.2.2" + "react-router-dom": "^4.2.2", + "recompose": "^0.27.0" }, "jest": { "verbose": true, diff --git a/yarn.lock b/yarn.lock index 0884500b..58b044c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9249,6 +9249,10 @@ react-lifecycles-compat@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850" +react-lifecycles-compat@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff" + react-loadable@^5.3.1: version "5.3.1" resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.3.1.tgz#9699e9a08fed49bacd69caaa282034b62a76bcdd" @@ -9559,6 +9563,17 @@ recompose@^0.26.0: hoist-non-react-statics "^2.3.1" symbol-observable "^1.0.4" +recompose@^0.27.0: + version "0.27.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.0.tgz#8230ebd651bf1159097006f79083fe224b1501cf" + dependencies: + babel-runtime "^6.26.0" + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^2.3.1" + react-lifecycles-compat "^3.0.2" + symbol-observable "^1.0.4" + recursive-readdir@2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99" From b7d4944b0102311ecbbe46078aef46c3d2ad9730 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:11:03 +0200 Subject: [PATCH 3/9] WA-238 Create openHoc component using withStateHandlers --- src/components/hoc/OpenHoc.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/hoc/OpenHoc.jsx diff --git a/src/components/hoc/OpenHoc.jsx b/src/components/hoc/OpenHoc.jsx new file mode 100644 index 00000000..1491c7bf --- /dev/null +++ b/src/components/hoc/OpenHoc.jsx @@ -0,0 +1,12 @@ +// @flow +import { withStateHandlers } from 'recompose' + +export type Open = { + open: boolean, + toggle: () => void, +} + +export default withStateHandlers( + () => ({ open: false }), + { toggle: ({ open }) => () => ({ open: !open }) }, +) From 64c03415398949bc49c3fa7f3fb0d29ca48c9086 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:17:21 +0200 Subject: [PATCH 4/9] WA-238 Adding WithStyles type in theme/mui.js --- src/theme/mui.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/theme/mui.js b/src/theme/mui.js index cd9d9ea3..486d3422 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -1,7 +1,12 @@ -import red from 'material-ui/colors/red'; +// @flow +import red from 'material-ui/colors/red' import { createMuiTheme } from 'material-ui/styles' import { primary, secondary } from './variables' +export type WithStyles = { + classes: Object, +} + const palette = { primary: { main: primary, @@ -18,7 +23,7 @@ const palette = { // see https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/createMuiTheme.js export default createMuiTheme({ typography: { - fontFamily: 'Montserrat,sans-serif' - }, + fontFamily: 'Montserrat,sans-serif', + }, palette, }) From ee23a77e0866a8b36d341894c1af7714d7197d6c Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:24:08 +0200 Subject: [PATCH 5/9] WA-238 Owners ListItem component of Safe --- src/routes/safe/component/Safe/Owners.jsx | 68 +++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/routes/safe/component/Safe/Owners.jsx diff --git a/src/routes/safe/component/Safe/Owners.jsx b/src/routes/safe/component/Safe/Owners.jsx new file mode 100644 index 00000000..f2a22946 --- /dev/null +++ b/src/routes/safe/component/Safe/Owners.jsx @@ -0,0 +1,68 @@ +// @flow +import * as React from 'react' +import openHoc, { type Open } from '~/components/hoc/OpenHoc' +import { withStyles } from 'material-ui/styles' +import Collapse from 'material-ui/transitions/Collapse' +import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import Group from 'material-ui-icons/Group' +import Person from 'material-ui-icons/Person' +import ExpandLess from 'material-ui-icons/ExpandLess' +import ExpandMore from 'material-ui-icons/ExpandMore' +import { type OwnerProps } from '~/routes/safe/store/model/owner' +import { type WithStyles } from '~/theme/mui' + +const styles = { + nested: { + paddingLeft: '40px', + }, + itemTextSecondary: { + textOverflow: 'ellipsis', + overflow: 'hidden', + }, +} + +type Props = Open & WithStyles & { + owners: List, +} + +const Owners = openHoc(({ + open, toggle, owners, classes, +}: Props) => { + const itemTextClasses = { + secondary: classes.itemTextSecondary, + } + + return ( + + + + + + + + {open ? : } + + + + + {owners.map(owner => ( + + + + + + + ))} + + + + ) +}) + +export default withStyles(styles)(Owners) From 0d7f52ace800df98dbe06416fd417c8accc100f3 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:31:25 +0200 Subject: [PATCH 6/9] WA-238 Confirmations ListItem component for Safe --- .../safe/component/Safe/Confirmations.jsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/routes/safe/component/Safe/Confirmations.jsx diff --git a/src/routes/safe/component/Safe/Confirmations.jsx b/src/routes/safe/component/Safe/Confirmations.jsx new file mode 100644 index 00000000..5838f6c0 --- /dev/null +++ b/src/routes/safe/component/Safe/Confirmations.jsx @@ -0,0 +1,20 @@ +// @flow +import * as React from 'react' +import { ListItem, ListItemText } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import DoneAll from 'material-ui-icons/DoneAll' + +type Props = { + confirmations: number, +} + +const Confirmations = ({ confirmations }: Props) => ( + + + + + + +) + +export default Confirmations From 35788d9bafc73d33083f5b921337897070c2f67d Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:36:05 +0200 Subject: [PATCH 7/9] WA-238 Address ListItem component for Safe --- src/routes/safe/component/Safe/Address.jsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/routes/safe/component/Safe/Address.jsx diff --git a/src/routes/safe/component/Safe/Address.jsx b/src/routes/safe/component/Safe/Address.jsx new file mode 100644 index 00000000..7bd3d890 --- /dev/null +++ b/src/routes/safe/component/Safe/Address.jsx @@ -0,0 +1,20 @@ +// @flow +import * as React from 'react' +import { ListItem, ListItemText } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import Mail from 'material-ui-icons/Mail' + +type Props = { + address: string, +} + +const Address = ({ address }: Props) => ( + + + + + + +) + +export default Address From 82c2522046e1c7d431f5b60494507facc9af7b56 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 15:51:44 +0200 Subject: [PATCH 8/9] WA-238 created GnoListItemText with cut ellipsis prop --- src/components/List/ListItemText/index.jsx | 38 ++++++++++ src/routes/safe/component/Safe/Address.jsx | 5 +- .../safe/component/Safe/Confirmations.jsx | 9 ++- src/routes/safe/component/Safe/Owners.jsx | 72 ++++++++----------- 4 files changed, 79 insertions(+), 45 deletions(-) create mode 100644 src/components/List/ListItemText/index.jsx diff --git a/src/components/List/ListItemText/index.jsx b/src/components/List/ListItemText/index.jsx new file mode 100644 index 00000000..0ee309ab --- /dev/null +++ b/src/components/List/ListItemText/index.jsx @@ -0,0 +1,38 @@ +// @flow +import * as React from 'react' +import { ListItemText } from 'material-ui/List' +import { withStyles } from 'material-ui/styles' +import { type WithStyles } from '~/theme/mui' + +type Props = WithStyles & { + primary: string, + secondary: string, + cut?: boolean, +} + +const styles = { + itemTextSecondary: { + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }, +} + +const GnoListItemText = ({ + primary, secondary, classes, cut = false, +}: Props) => { + const cutStyle = cut ? { + secondary: classes.itemTextSecondary, + } : undefined + + return ( + + ) +} + +export default withStyles(styles)(GnoListItemText) diff --git a/src/routes/safe/component/Safe/Address.jsx b/src/routes/safe/component/Safe/Address.jsx index 7bd3d890..3a21532e 100644 --- a/src/routes/safe/component/Safe/Address.jsx +++ b/src/routes/safe/component/Safe/Address.jsx @@ -1,8 +1,9 @@ // @flow import * as React from 'react' -import { ListItem, ListItemText } from 'material-ui/List' +import { ListItem } from 'material-ui/List' import Avatar from 'material-ui/Avatar' import Mail from 'material-ui-icons/Mail' +import ListItemText from '~/components/List/ListItemText' type Props = { address: string, @@ -13,7 +14,7 @@ const Address = ({ address }: Props) => ( - + ) diff --git a/src/routes/safe/component/Safe/Confirmations.jsx b/src/routes/safe/component/Safe/Confirmations.jsx index 5838f6c0..91c192d9 100644 --- a/src/routes/safe/component/Safe/Confirmations.jsx +++ b/src/routes/safe/component/Safe/Confirmations.jsx @@ -1,8 +1,9 @@ // @flow import * as React from 'react' -import { ListItem, ListItemText } from 'material-ui/List' +import { ListItem } from 'material-ui/List' import Avatar from 'material-ui/Avatar' import DoneAll from 'material-ui-icons/DoneAll' +import ListItemText from '~/components/List/ListItemText' type Props = { confirmations: number, @@ -13,7 +14,11 @@ const Confirmations = ({ confirmations }: Props) => ( - + ) diff --git a/src/routes/safe/component/Safe/Owners.jsx b/src/routes/safe/component/Safe/Owners.jsx index f2a22946..e552beb1 100644 --- a/src/routes/safe/component/Safe/Owners.jsx +++ b/src/routes/safe/component/Safe/Owners.jsx @@ -3,7 +3,8 @@ import * as React from 'react' import openHoc, { type Open } from '~/components/hoc/OpenHoc' import { withStyles } from 'material-ui/styles' import Collapse from 'material-ui/transitions/Collapse' -import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List' +import ListItemText from '~/components/List/ListItemText' +import List, { ListItem, ListItemIcon } from 'material-ui/List' import Avatar from 'material-ui/Avatar' import Group from 'material-ui-icons/Group' import Person from 'material-ui-icons/Person' @@ -16,10 +17,6 @@ const styles = { nested: { paddingLeft: '40px', }, - itemTextSecondary: { - textOverflow: 'ellipsis', - overflow: 'hidden', - }, } type Props = Open & WithStyles & { @@ -28,41 +25,34 @@ type Props = Open & WithStyles & { const Owners = openHoc(({ open, toggle, owners, classes, -}: Props) => { - const itemTextClasses = { - secondary: classes.itemTextSecondary, - } - - return ( - - - - - - - - {open ? : } - - - - - {owners.map(owner => ( - - - - - - - ))} - - - - ) -}) +}: Props) => ( + + + + + + + + {open ? : } + + + + + {owners.map(owner => ( + + + + + + + ))} + + + +)) export default withStyles(styles)(Owners) From 4b39ebf98778f455e8673a51f1be5a4e6f0cd33e Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 26 Apr 2018 17:52:39 +0200 Subject: [PATCH 9/9] WA-238 Refactor Safe component leaving space for user interaction --- src/components/layout/Block/index.jsx | 6 +- src/components/layout/Block/index.scss | 13 ++-- src/components/layout/Col/index.jsx | 4 +- src/components/layout/Col/index.scss | 20 ++++-- src/routes/safe/component/Safe.jsx | 86 ------------------------ src/routes/safe/component/Safe/index.jsx | 58 ++++++++++++++++ 6 files changed, 87 insertions(+), 100 deletions(-) delete mode 100644 src/routes/safe/component/Safe.jsx create mode 100644 src/routes/safe/component/Safe/index.jsx diff --git a/src/components/layout/Block/index.jsx b/src/components/layout/Block/index.jsx index 04e080c3..a92dd060 100644 --- a/src/components/layout/Block/index.jsx +++ b/src/components/layout/Block/index.jsx @@ -11,7 +11,7 @@ type Size = 'sm' | 'md' | 'lg' | 'xl' type Props = { margin?: Size, padding?: Size, - center?: boolean, + align?: 'center' | 'right', children: React$Node, className?: string, } @@ -19,12 +19,12 @@ type Props = { class Block extends PureComponent { render() { const { - margin, padding, center, children, className, ...props + margin, padding, align, children, className, ...props } = this.props const paddingStyle = padding ? capitalize(padding, 'padding') : undefined return ( -
+
{ children }
) diff --git a/src/components/layout/Block/index.scss b/src/components/layout/Block/index.scss index b8e523a0..62a278cb 100644 --- a/src/components/layout/Block/index.scss +++ b/src/components/layout/Block/index.scss @@ -1,5 +1,4 @@ .block { - display: inline-block; width: 100%; overflow: hidden; } @@ -37,7 +36,13 @@ } .center { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; +} + +.right { + display: flex; + align-items: center; + justify-content: flex-end; } \ No newline at end of file diff --git a/src/components/layout/Col/index.jsx b/src/components/layout/Col/index.jsx index 5260e678..1e8137c5 100644 --- a/src/components/layout/Col/index.jsx +++ b/src/components/layout/Col/index.jsx @@ -16,6 +16,7 @@ type Props = { around?: 'xs' | 'sm' | 'md' | 'lg', between?: 'xs' | 'sm' | 'md' | 'lg', margin?: 'sm' | 'md' | 'lg' | 'xl', + layout?: 'inherit' | 'block', xs?: number | boolean, sm?: number | boolean, md?: number | boolean, @@ -29,7 +30,7 @@ type Props = { } const Col = ({ - children, margin, + children, margin, layout = 'inherit', xs, sm, md, lg, start, center, end, top, middle, bottom, around, between, xsOffset, smOffset, mdOffset, lgOffset, @@ -54,6 +55,7 @@ const Col = ({ smOffset ? capitalize(smOffset, 'smOffset') : undefined, mdOffset ? capitalize(mdOffset, 'mdOffset') : undefined, lgOffset ? capitalize(lgOffset, 'lgOffset') : undefined, + layout, props.className, ) diff --git a/src/components/layout/Col/index.scss b/src/components/layout/Col/index.scss index dfe5e164..91fb43d6 100644 --- a/src/components/layout/Col/index.scss +++ b/src/components/layout/Col/index.scss @@ -1,7 +1,15 @@ .col { flex: 1 1 auto; - display: flex; align-items: center; + display: inherit; +} + +.inherit { + display: inherit; +} + +.block { + display: block; } .marginSm { @@ -128,11 +136,11 @@ @define-mixin autoWidth $size { .$(size) { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; } } diff --git a/src/routes/safe/component/Safe.jsx b/src/routes/safe/component/Safe.jsx deleted file mode 100644 index 69b86137..00000000 --- a/src/routes/safe/component/Safe.jsx +++ /dev/null @@ -1,86 +0,0 @@ -// @flow -import * as React from 'react' -import Block from '~/components/layout/Block' -import Bold from '~/components/layout/Bold' -import Col from '~/components/layout/Col' -import Paragraph from '~/components/layout/Paragraph' -import Row from '~/components/layout/Row' -import Table, { TableBody, TableCell, TableHead, TableRow } from '~/components/layout/Table' -import { type Safe } from '~/routes/safe/store/model/safe' - -type SafeProps = { - safe: Safe, - balance: string, -} - -const GnoSafe = ({ safe, balance }: SafeProps) => ( - - - - - {safe.name.toUpperCase()} - - - - - - Balance - - - - - - {balance} - ETH - - - - - - Address - - - - - - {safe.address} - - - - - - Number of required confirmations per transaction - - - - - {safe.get('confirmations')} - - - - - Owners - - - - - - - Name - Adress - - - - {safe.owners.map(owner => ( - - {owner.name} - {owner.address} - - ))} - -
-
- - -) - -export default GnoSafe diff --git a/src/routes/safe/component/Safe/index.jsx b/src/routes/safe/component/Safe/index.jsx new file mode 100644 index 00000000..40a1c9c6 --- /dev/null +++ b/src/routes/safe/component/Safe/index.jsx @@ -0,0 +1,58 @@ +// @flow +import * as React from 'react' +import Block from '~/components/layout/Block' +import Col from '~/components/layout/Col' +import Bold from '~/components/layout/Bold' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import { type Safe } from '~/routes/safe/store/model/safe' +import List from 'material-ui/List' + +import Address from './Address' +import Balance from './Balance' +import Owners from './Owners' +import Confirmations from './Confirmations' + +type SafeProps = { + safe: Safe, + balance: string, +} + +const listStyle = { + width: '100%', +} + +class GnoSafe extends React.PureComponent { + render() { + const { safe, balance } = this.props + + return ( + + + + + + +
+ + + + + + {safe.name.toUpperCase()} + + + + Extra info will be placed here + + + + ) + } +} + +/* + + {safe.name.toUpperCase()} +*/ +export default GnoSafe