From ec52bca8548f4c7d2358babefa120db73b877402 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 23 Aug 2018 13:43:01 +0200 Subject: [PATCH 01/97] Adding safe logo --- .../Header/assets/gnosis-safe-logo.svg | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/Header/assets/gnosis-safe-logo.svg diff --git a/src/components/Header/assets/gnosis-safe-logo.svg b/src/components/Header/assets/gnosis-safe-logo.svg new file mode 100644 index 00000000..e3ac3a27 --- /dev/null +++ b/src/components/Header/assets/gnosis-safe-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + TEAM EDITIO N + + + + + + + + + + + + From 076fcfb5438d6bd2619a64a9d348e088bf74f58c Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 23 Aug 2018 13:43:28 +0200 Subject: [PATCH 02/97] Ading Spacer layout component --- src/components/Spacer/index.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/components/Spacer/index.jsx diff --git a/src/components/Spacer/index.jsx b/src/components/Spacer/index.jsx new file mode 100644 index 00000000..114a94f1 --- /dev/null +++ b/src/components/Spacer/index.jsx @@ -0,0 +1,8 @@ +// @flow +import * as React from 'react' + +const style = { + flexGrow: 1, +} + +export default () =>
From 7fc519801852b1a124b064bae1e027d263df17a1 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 23 Aug 2018 13:44:00 +0200 Subject: [PATCH 03/97] Adding text-transform property to Paragraph layout component --- src/components/layout/Paragraph/index.js | 5 +++-- src/components/layout/Paragraph/index.scss | 12 ++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index 5de1372f..af994e37 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -11,17 +11,18 @@ type Props = { bold?: boolean, size?: 'sm' | 'md' | 'lg' | 'xl', color?: 'soft' | 'medium' | 'dark' | 'primary', + transform?: 'capitalize' | 'lowercase' | 'uppercase', children: React$Node } class Paragraph extends React.PureComponent { render() { const { - bold, children, color, align, size, noMargin, ...props + bold, children, color, align, size, transform, noMargin, ...props } = this.props return ( -

+

{ children }

) diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 3ddb5960..9b1bc7a1 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -19,6 +19,18 @@ color: #00a6c4; } +.capitalize { + text-transform: capitalize +} + +.lowercase { + text-transform: lowercase +} + +.uppercase { + text-transform: uppercase +} + .noMargin{ margin: 0; } From e71d4ccfff2bfb634039db0c1206f5281b0b048f Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 23 Aug 2018 13:44:48 +0200 Subject: [PATCH 04/97] Modify UI layout according to design's wireframes --- src/components/layout/Page/index.scss | 1 + src/components/layout/PageFrame/index.scss | 5 +++-- src/index.scss | 6 +----- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/layout/Page/index.scss b/src/components/layout/Page/index.scss index 845e9468..7e8f0f39 100644 --- a/src/components/layout/Page/index.scss +++ b/src/components/layout/Page/index.scss @@ -2,6 +2,7 @@ display: flex; flex-direction: column; flex: 1 0 auto; + padding: 0 $xl; } .center { diff --git a/src/components/layout/PageFrame/index.scss b/src/components/layout/PageFrame/index.scss index 70e667f9..477bb2d8 100644 --- a/src/components/layout/PageFrame/index.scss +++ b/src/components/layout/PageFrame/index.scss @@ -1,7 +1,8 @@ .frame { display: flex; flex-direction: column; - flex: 1 0 auto; + flex: 1 1 auto; background-color: white; - padding: $xl; + padding-bottom: $xl; + max-width: 100%; } diff --git a/src/index.scss b/src/index.scss index 5b54a6b7..50d00c9e 100644 --- a/src/index.scss +++ b/src/index.scss @@ -18,11 +18,7 @@ body { body>div:first-child { display: flex; - flex: 1 1 auto; - flex-direction: column; - min-height: calc(100% - (2 * $xl)); - padding: $xl; - background-image: linear-gradient(to bottom, $primary, #1a829d, #1a829d, #1f5f76); + min-height: 100%; } h1, h2, h3 { From 78a88b29dcdd33c67273cb14d2036c063318ae2c Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 23 Aug 2018 13:47:59 +0200 Subject: [PATCH 05/97] Inject provider in lowercase --- src/components/layout/Col/index.jsx | 2 +- src/logic/wallets/store/selectors/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layout/Col/index.jsx b/src/components/layout/Col/index.jsx index f9ae8d87..bdb36df5 100644 --- a/src/components/layout/Col/index.jsx +++ b/src/components/layout/Col/index.jsx @@ -39,8 +39,8 @@ const Col = ({ }: Props) => { const colClassNames = cx( 'col', - start ? capitalize(start, 'start') : undefined, center ? capitalize(center, 'center') : undefined, + start ? capitalize(start, 'start') : undefined, end ? capitalize(end, 'end') : undefined, top ? capitalize(top, 'top') : undefined, middle ? capitalize(middle, 'middle') : undefined, diff --git a/src/logic/wallets/store/selectors/index.js b/src/logic/wallets/store/selectors/index.js index 208acf3a..380546b0 100644 --- a/src/logic/wallets/store/selectors/index.js +++ b/src/logic/wallets/store/selectors/index.js @@ -21,6 +21,6 @@ export const providerNameSelector = createSelector( const loaded = provider.get('loaded') const available = provider.get('available') - return loaded && available ? name : undefined + return loaded && available ? name.toLowerCase() : undefined }, ) From 18c6d5a5aeac4b0e9fad5d8b5cd1f1db8b002c22 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 23 Aug 2018 14:08:06 +0200 Subject: [PATCH 06/97] First iteration changes on Header component focused on Provider section --- src/components/Header/component/Layout.jsx | 108 +++++++++++++++--- .../Header/component/NotConnected/index.jsx | 5 - 2 files changed, 92 insertions(+), 21 deletions(-) delete mode 100644 src/components/Header/component/NotConnected/index.jsx diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index 7afbb088..d253bb7e 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -1,30 +1,106 @@ // @flow -import React from 'react' +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import ExpansionPanel from '@material-ui/core/ExpansionPanel' +import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' +import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' +import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions' +import ExpandMoreIcon from '@material-ui/icons/ExpandMore' +import Divider from '@material-ui/core/Divider' +import Paragraph from '~/components/layout/Paragraph' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' +import Button from '~/components/layout/Button' import Refresh from '~/components/Refresh' import Row from '~/components/layout/Row' - +import Spacer from '~/components/Spacer' import Connected from './Connected' -import NotConnected from './NotConnected' -const logo = require('../assets/gnosis_logo.svg') +const logo = require('../assets/gnosis-safe-logo.svg') type Props = { provider: string, reloadWallet: Function, + classes: Object, } -const Header = ({ provider, reloadWallet }: Props) => ( - - - Gnosis Safe - - - { provider ? : } - - - -) +const styles = theme => ({ + root: { + width: '100%', + }, + logo: { + flexBasis: '125px', + }, + provider: { + flexBasis: '130px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + heading: { + fontSize: theme.typography.pxToRem(15), + }, + secondaryHeading: { + fontSize: theme.typography.pxToRem(15), + color: theme.palette.text.secondary, + }, + icon: { + verticalAlign: 'bottom', + height: 20, + width: 20, + }, + details: { + alignItems: 'center', + }, + column: { + flexBasis: '33.33%', + }, + helper: { + borderLeft: `2px solid ${theme.palette.divider}`, + padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + }, + link: { + color: theme.palette.primary.main, + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, + }, +}) -export default Header +const Header = ({ provider, reloadWallet, classes }: Props) => { + const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected' + + return ( + + + }> + + + Gnosis Safe + + + + {providerText} + 0x873faa....d30aaa + + + + { provider && + + + + + + + + + + } + + + + ) +} + +export default withStyles(styles)(Header) diff --git a/src/components/Header/component/NotConnected/index.jsx b/src/components/Header/component/NotConnected/index.jsx deleted file mode 100644 index f2c75156..00000000 --- a/src/components/Header/component/NotConnected/index.jsx +++ /dev/null @@ -1,5 +0,0 @@ -// @flow -import React from 'react' -import Span from '~/components/layout/Span' - -export default () => Not Connected From f17b7de174852534ace7f46dbcea569d7a30b74f Mon Sep 17 00:00:00 2001 From: apanizo Date: Mon, 27 Aug 2018 18:07:01 +0200 Subject: [PATCH 07/97] Update flow --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index dd55ec56..1ee9c78b 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "ethereumjs-abi": "^0.6.5", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^1.1.11", - "flow-bin": "^0.66.0", + "flow-bin": "^0.79.1", "fs-extra": "^5.0.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.0.4", diff --git a/yarn.lock b/yarn.lock index 9264d541..7f538323 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5519,9 +5519,9 @@ flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" -flow-bin@^0.66.0: - version "0.66.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.66.0.tgz#a96dde7015dc3343fd552a7b4963c02be705ca26" +flow-bin@^0.79.1: + version "0.79.1" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.79.1.tgz#01c9f427baa6556753fa878c192d42e1ecb764b6" flow-parser@^0.*: version "0.74.0" From a044a028616823027a25a860ed482be18585fd4a Mon Sep 17 00:00:00 2001 From: apanizo Date: Mon, 27 Aug 2018 18:07:34 +0200 Subject: [PATCH 08/97] Added Identicon react component --- src/components/Identicon/blockies.js | 366 +++++++++++++++++++++++++++ src/components/Identicon/index.jsx | 67 +++++ 2 files changed, 433 insertions(+) create mode 100644 src/components/Identicon/blockies.js create mode 100644 src/components/Identicon/index.jsx diff --git a/src/components/Identicon/blockies.js b/src/components/Identicon/blockies.js new file mode 100644 index 00000000..1123ab5e --- /dev/null +++ b/src/components/Identicon/blockies.js @@ -0,0 +1,366 @@ +/* eslint-disable */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (factory((global.blockies = {}))); +}(this, (function (exports) { + 'use strict'; + + /** + * A handy class to calculate color values. + * + * @version 1.0 + * @author Robert Eisele + * @copyright Copyright (c) 2010, Robert Eisele + * @link http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/ + * @license http://www.opensource.org/licenses/bsd-license.php BSD License + * + */ + + + // helper functions for that ctx + function write(buffer, offs) { + for (var i = 2; i < arguments.length; i++) { + for (var j = 0; j < arguments[i].length; j++) { + buffer[offs++] = arguments[i].charAt(j); + } + } + } + + function byte2(w) { + return String.fromCharCode((w >> 8) & 255, w & 255); + } + + function byte4(w) { + return String.fromCharCode((w >> 24) & 255, (w >> 16) & 255, (w >> 8) & 255, w & 255); + } + + function byte2lsb(w) { + return String.fromCharCode(w & 255, (w >> 8) & 255); + } + + var PNG = function (width, height, depth) { + + this.width = width; + this.height = height; + this.depth = depth; + + // pixel data and row filter identifier size + this.pix_size = height * (width + 1); + + // deflate header, pix_size, block headers, adler32 checksum + this.data_size = 2 + this.pix_size + 5 * Math.floor((0xfffe + this.pix_size) / 0xffff) + 4; + + // offsets and sizes of Png chunks + this.ihdr_offs = 0; // IHDR offset and size + this.ihdr_size = 4 + 4 + 13 + 4; + this.plte_offs = this.ihdr_offs + this.ihdr_size; // PLTE offset and size + this.plte_size = 4 + 4 + 3 * depth + 4; + this.trns_offs = this.plte_offs + this.plte_size; // tRNS offset and size + this.trns_size = 4 + 4 + depth + 4; + this.idat_offs = this.trns_offs + this.trns_size; // IDAT offset and size + this.idat_size = 4 + 4 + this.data_size + 4; + this.iend_offs = this.idat_offs + this.idat_size; // IEND offset and size + this.iend_size = 4 + 4 + 4; + this.buffer_size = this.iend_offs + this.iend_size; // total PNG size + + this.buffer = new Array(); + this.palette = new Object(); + this.pindex = 0; + + var _crc32 = new Array(); + + // initialize buffer with zero bytes + for (var i = 0; i < this.buffer_size; i++) { + this.buffer[i] = "\x00"; + } + + // initialize non-zero elements + write(this.buffer, this.ihdr_offs, byte4(this.ihdr_size - 12), 'IHDR', byte4(width), byte4(height), "\x08\x03"); + write(this.buffer, this.plte_offs, byte4(this.plte_size - 12), 'PLTE'); + write(this.buffer, this.trns_offs, byte4(this.trns_size - 12), 'tRNS'); + write(this.buffer, this.idat_offs, byte4(this.idat_size - 12), 'IDAT'); + write(this.buffer, this.iend_offs, byte4(this.iend_size - 12), 'IEND'); + + // initialize deflate header + var header = ((8 + (7 << 4)) << 8) | (3 << 6); + header += 31 - (header % 31); + + write(this.buffer, this.idat_offs + 8, byte2(header)); + + // initialize deflate block headers + for (var i = 0; (i << 16) - 1 < this.pix_size; i++) { + var size, bits; + if (i + 0xffff < this.pix_size) { + size = 0xffff; + bits = "\x00"; + } else { + size = this.pix_size - (i << 16) - i; + bits = "\x01"; + } + write(this.buffer, this.idat_offs + 8 + 2 + (i << 16) + (i << 2), bits, byte2lsb(size), byte2lsb(~size)); + } + + /* Create crc32 lookup table */ + for (var i = 0; i < 256; i++) { + var c = i; + for (var j = 0; j < 8; j++) { + if (c & 1) { + c = -306674912 ^ ((c >> 1) & 0x7fffffff); + } else { + c = (c >> 1) & 0x7fffffff; + } + } + _crc32[i] = c; + } + + // compute the index into a png for a given pixel + this.index = function (x, y) { + var i = y * (this.width + 1) + x + 1; + var j = this.idat_offs + 8 + 2 + 5 * Math.floor((i / 0xffff) + 1) + i; + return j; + }; + + // convert a color and build up the palette + this.color = function (red, green, blue, alpha) { + + alpha = alpha >= 0 ? alpha : 255; + var color = (((((alpha << 8) | red) << 8) | green) << 8) | blue; + + if (typeof this.palette[color] == "undefined") { + if (this.pindex == this.depth) return "\x00"; + + var ndx = this.plte_offs + 8 + 3 * this.pindex; + + this.buffer[ndx + 0] = String.fromCharCode(red); + this.buffer[ndx + 1] = String.fromCharCode(green); + this.buffer[ndx + 2] = String.fromCharCode(blue); + this.buffer[this.trns_offs + 8 + this.pindex] = String.fromCharCode(alpha); + + this.palette[color] = String.fromCharCode(this.pindex++); + } + return this.palette[color]; + }; + + // output a PNG string, Base64 encoded + this.getBase64 = function () { + + var s = this.getDump(); + + var ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; + var c1, c2, c3, e1, e2, e3, e4; + var l = s.length; + var i = 0; + var r = ""; + + do { + c1 = s.charCodeAt(i); + e1 = c1 >> 2; + c2 = s.charCodeAt(i + 1); + e2 = ((c1 & 3) << 4) | (c2 >> 4); + c3 = s.charCodeAt(i + 2); + if (l < i + 2) { e3 = 64; } else { e3 = ((c2 & 0xf) << 2) | (c3 >> 6); } + if (l < i + 3) { e4 = 64; } else { e4 = c3 & 0x3f; } + r += ch.charAt(e1) + ch.charAt(e2) + ch.charAt(e3) + ch.charAt(e4); + } while ((i += 3) < l); + return r; + }; + + // output a PNG string + this.getDump = function () { + + // compute adler32 of output pixels + row filter bytes + var BASE = 65521; /* largest prime smaller than 65536 */ + var NMAX = 5552; /* NMAX is the largest n such that 255n(n+1)/2 + (n+1)(BASE-1) <= 2^32-1 */ + var s1 = 1; + var s2 = 0; + var n = NMAX; + + for (var y = 0; y < this.height; y++) { + for (var x = -1; x < this.width; x++) { + s1 += this.buffer[this.index(x, y)].charCodeAt(0); + s2 += s1; + if ((n -= 1) == 0) { + s1 %= BASE; + s2 %= BASE; + n = NMAX; + } + } + } + s1 %= BASE; + s2 %= BASE; + write(this.buffer, this.idat_offs + this.idat_size - 8, byte4((s2 << 16) | s1)); + + // compute crc32 of the PNG chunks + function crc32(png, offs, size) { + var crc = -1; + for (var i = 4; i < size - 4; i += 1) { + crc = _crc32[(crc ^ png[offs + i].charCodeAt(0)) & 0xff] ^ ((crc >> 8) & 0x00ffffff); + } + write(png, offs + size - 4, byte4(crc ^ -1)); + } + + crc32(this.buffer, this.ihdr_offs, this.ihdr_size); + crc32(this.buffer, this.plte_offs, this.plte_size); + crc32(this.buffer, this.trns_offs, this.trns_size); + crc32(this.buffer, this.idat_offs, this.idat_size); + crc32(this.buffer, this.iend_offs, this.iend_size); + + // convert PNG to string + return "\x89PNG\r\n\x1A\n" + this.buffer.join(''); + }; + + this.fillRect = function (x, y, w, h, color) { + for (var i = 0; i < w; i++) { + for (var j = 0; j < h; j++) { + this.buffer[this.index(x + i, y + j)] = color; + } + } + }; + }; + + // https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion + /** + * Converts an HSL color value to RGB. Conversion formula + * adapted from http://en.wikipedia.org/wiki/HSL_color_space. + * Assumes h, s, and l are contained in the set [0, 1] and + * returns r, g, and b in the set [0, 255]. + * + * @param {number} h The hue + * @param {number} s The saturation + * @param {number} l The lightness + * @return {Array} The RGB representation + */ + + function hue2rgb(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + } + + function hsl2rgb(h, s, l) { + var r, g, b; + + if (s == 0) { + r = g = b = l; // achromatic + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + + return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), 255]; + } + + // The random number is a js implementation of the Xorshift PRNG + var randseed = new Array(4); // Xorshift: [x, y, z, w] 32 bit values + + function seedrand(seed) { + for (var i = 0; i < randseed.length; i++) { + randseed[i] = 0; + } + for (var i = 0; i < seed.length; i++) { + randseed[i % 4] = (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i); + } + } + + function rand() { + // based on Java's String.hashCode(), expanded to 4 32bit values + var t = randseed[0] ^ (randseed[0] << 11); + + randseed[0] = randseed[1]; + randseed[1] = randseed[2]; + randseed[2] = randseed[3]; + randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8); + + return (randseed[3] >>> 0) / (1 << 31 >>> 0); + } + + function createColor() { + //saturation is the whole color spectrum + var h = Math.floor(rand() * 360); + //saturation goes from 40 to 100, it avoids greyish colors + var s = rand() * 60 + 40; + //lightness can be anything from 0 to 100, but probabilities are a bell curve around 50% + var l = (rand() + rand() + rand() + rand()) * 25; + + return [h / 360, s / 100, l / 100]; + } + + function createImageData(size) { + var width = size; // Only support square icons for now + var height = size; + + var dataWidth = Math.ceil(width / 2); + var mirrorWidth = width - dataWidth; + + var data = []; + for (var y = 0; y < height; y++) { + var row = []; + for (var x = 0; x < dataWidth; x++) { + // this makes foreground and background color to have a 43% (1/2.3) probability + // spot color has 13% chance + row[x] = Math.floor(rand() * 2.3); + } + var r = row.slice(0, mirrorWidth); + r.reverse(); + row = row.concat(r); + + for (var i = 0; i < row.length; i++) { + data.push(row[i]); + } + } + + return data; + } + + function buildOpts(opts) { + if (!opts.seed) { + throw 'No seed provided' + } + + seedrand(opts.seed); + + return Object.assign({ + size: 8, + scale: 16, + color: createColor(), + bgcolor: createColor(), + spotcolor: createColor(), + }, opts) + } + + function toDataUrl(address) { + const opts = buildOpts({ seed: address.toLowerCase() }); + + const imageData = createImageData(opts.size); + const width = Math.sqrt(imageData.length); + + const p = new PNG(opts.size * opts.scale, opts.size * opts.scale, 3); + const bgcolor = p.color(...hsl2rgb(...opts.bgcolor)); + const color = p.color(...hsl2rgb(...opts.color)); + const spotcolor = p.color(...hsl2rgb(...opts.spotcolor)); + + for (var i = 0; i < imageData.length; i++) { + var row = Math.floor(i / width); + var col = i % width; + // if data is 0, leave the background + if (imageData[i]) { + // if data is 2, choose spot color, if 1 choose foreground + const pngColor = imageData[i] == 1 ? color : spotcolor; + p.fillRect(col * opts.scale, row * opts.scale, opts.scale, opts.scale, pngColor); + } + } + return `data:image/png;base64,${p.getBase64()}`; + } + + exports.toDataUrl = toDataUrl; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); diff --git a/src/components/Identicon/index.jsx b/src/components/Identicon/index.jsx new file mode 100644 index 00000000..a6b3fecd --- /dev/null +++ b/src/components/Identicon/index.jsx @@ -0,0 +1,67 @@ +// @flow +import * as React from 'react' +import { toDataUrl } from './blockies' + +type Props = { + address: string, + diameter: number, +} + +type IdenticonRef = { current: null | HTMLDivElement } + +export default class Identicon extends React.PureComponent { + constructor(props: Props) { + super(props) + + this.identicon = React.createRef() + } + + componentDidMount = () => { + const { address, diameter } = this.props + const image = this.generateBlockieIdenticon(address, diameter) + if (this.identicon.current) { + this.identicon.current.appendChild(image) + } + } + + componentDidUpdate = () => { + const { address, diameter } = this.props + const image = this.generateBlockieIdenticon(address, diameter) + + if (!this.identicon.current) { + return + } + + const { children } = this.identicon.current + for (let i = 0; i < children.length; i += 1) { + this.identicon.current.removeChild(children[i]) + } + + this.identicon.current.appendChild(image) + } + + getStyleFrom = (diameter: number) => ({ + width: diameter, + height: diameter, + }) + + generateBlockieIdenticon = (address: string, diameter: number) => { + const image = new window.Image() + image.src = toDataUrl(address) + image.height = diameter + image.width = diameter + image.style.borderRadius = `${diameter / 2}px` + + return image + } + + identicon: IdenticonRef + + render() { + const style = this.getStyleFrom(this.props.diameter) + + return ( +
+ ) + } +} From d60b9a7af66e7cc600a34c1d4466a0faac40266e Mon Sep 17 00:00:00 2001 From: apanizo Date: Mon, 27 Aug 2018 18:07:56 +0200 Subject: [PATCH 09/97] Improved Paragraph layout component --- src/components/layout/Paragraph/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index af994e37..7792e774 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -12,17 +12,18 @@ type Props = { size?: 'sm' | 'md' | 'lg' | 'xl', color?: 'soft' | 'medium' | 'dark' | 'primary', transform?: 'capitalize' | 'lowercase' | 'uppercase', - children: React$Node + children: React$Node, + className?: string, } class Paragraph extends React.PureComponent { render() { const { - bold, children, color, align, size, transform, noMargin, ...props + bold, children, color, align, size, transform, noMargin, className, ...props } = this.props return ( -

+

{ children }

) From 67e07c8387ce9422d60b8c80a774243ece40126b Mon Sep 17 00:00:00 2001 From: apanizo Date: Mon, 27 Aug 2018 18:09:05 +0200 Subject: [PATCH 10/97] Fixed flow problem with openHoc in Transaction component --- src/routes/safe/component/Transactions/Transaction/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/safe/component/Transactions/Transaction/index.jsx b/src/routes/safe/component/Transactions/Transaction/index.jsx index de6c03ae..e294dafa 100644 --- a/src/routes/safe/component/Transactions/Transaction/index.jsx +++ b/src/routes/safe/component/Transactions/Transaction/index.jsx @@ -32,7 +32,7 @@ type Props = Open & SelectorProps & { export const PROCESS_TXS = 'PROCESS TRANSACTION' -class GnoTransaction extends React.PureComponent { +class GnoTransaction extends React.PureComponent { onProccesClick = () => this.props.onProcessTx(this.props.transaction, this.props.confirmed) hasConfirmed = (userAddress: string, confirmations: List): boolean => @@ -108,4 +108,4 @@ class GnoTransaction extends React.PureComponent { } } -export default connect(selector)(openHoc(GnoTransaction)) +export default openHoc(connect(selector)(GnoTransaction)) From ff79ca958a1bf7846a4341a85d50b6d25db852e0 Mon Sep 17 00:00:00 2001 From: apanizo Date: Mon, 27 Aug 2018 18:10:47 +0200 Subject: [PATCH 11/97] Updated the connected component --- .../Header/component/Connected/index.jsx | 50 ++++++++----------- 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/src/components/Header/component/Connected/index.jsx b/src/components/Header/component/Connected/index.jsx index 73c7b09e..f806086a 100644 --- a/src/components/Header/component/Connected/index.jsx +++ b/src/components/Header/component/Connected/index.jsx @@ -1,40 +1,34 @@ // @flow import * as React from 'react' -import Img from '~/components/layout/Img' -import Span from '~/components/layout/Span' -import { upperFirst } from '~/utils/css' - -const IconParity = require('~/components/Header/assets/icon_parity.svg') -const IconMetamask = require('~/components/Header/assets/icon_metamask.svg') +import Col from '~/components/layout/Col' +import Bold from '~/components/layout/Bold' +import Paragraph from '~/components/layout/Paragraph' type Props = { provider: string, } -const PROVIDER_METAMASK = 'METAMASK' -const PROVIDER_PARITY = 'PARITY' - -const PROVIDER_ICONS = { - [PROVIDER_METAMASK]: IconMetamask, - [PROVIDER_PARITY]: IconParity, +const leftColumnStyle = { + maxWidth: '80px', } -const Connected = ({ provider }: Props) => { - const msg = `You are using ${upperFirst(provider.toLowerCase())} to connect to your Safe` - - return ( - - { PROVIDER_ICONS[provider] && - {msg} - } - Connected - - ) +const paragraphStyle = { + margin: '2px', } +const Connected = ({ provider }: Props) => ( + + + Status: + Client: + Network: + + + Connected + {provider} + Rinkeby + + +) + export default Connected From 7d795011675f945ed00217035370e1e430953257 Mon Sep 17 00:00:00 2001 From: apanizo Date: Mon, 27 Aug 2018 18:11:23 +0200 Subject: [PATCH 12/97] Added more UI changes to Header --- src/components/Header/component/Layout.jsx | 40 +++++++++++++++------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index d253bb7e..961bb318 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -4,15 +4,14 @@ import { withStyles } from '@material-ui/core/styles' import ExpansionPanel from '@material-ui/core/ExpansionPanel' import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions' import ExpandMoreIcon from '@material-ui/icons/ExpandMore' -import Divider from '@material-ui/core/Divider' +import OpenInNew from '@material-ui/icons/OpenInNew' import Paragraph from '~/components/layout/Paragraph' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Button from '~/components/layout/Button' -import Refresh from '~/components/Refresh' import Row from '~/components/layout/Row' +import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' import Connected from './Connected' @@ -20,7 +19,6 @@ const logo = require('../assets/gnosis-safe-logo.svg') type Props = { provider: string, - reloadWallet: Function, classes: Object, } @@ -37,6 +35,13 @@ const styles = theme => ({ flexDirection: 'column', justifyContent: 'center', }, + user: { + alignItems: 'center', + }, + address: { + flexGrow: 1, + textAlign: 'center', + }, heading: { fontSize: theme.typography.pxToRem(15), }, @@ -51,6 +56,11 @@ const styles = theme => ({ }, details: { alignItems: 'center', + width: '350px', + border: '1px solid grey', + display: 'block', + padding: '12px 4px 4px', + marginLeft: 'auto', }, column: { flexBasis: '33.33%', @@ -68,12 +78,12 @@ const styles = theme => ({ }, }) -const Header = ({ provider, reloadWallet, classes }: Props) => { +const Header = ({ provider, classes }: Props) => { const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected' return ( - + }> @@ -89,16 +99,22 @@ const Header = ({ provider, reloadWallet, classes }: Props) => { { provider && - - + + + + + + + 0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b + + + + + - - - } - ) } From f069ca82a691cd39d0e52db4a38215014e11988e Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 09:13:23 +0200 Subject: [PATCH 13/97] Adding margin, background and more space to user address --- src/components/Header/component/Layout.jsx | 24 ++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index 961bb318..911b6789 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -4,9 +4,10 @@ import { withStyles } from '@material-ui/core/styles' import ExpansionPanel from '@material-ui/core/ExpansionPanel' import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' -import ExpandMoreIcon from '@material-ui/icons/ExpandMore' +import ExpandMoreIcon from '@material-ui/icons/ArrowDropDown' import OpenInNew from '@material-ui/icons/OpenInNew' import Paragraph from '~/components/layout/Paragraph' +import Block from '~/components/layout/Block' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Button from '~/components/layout/Button' @@ -26,6 +27,10 @@ const styles = theme => ({ root: { width: '100%', }, + summary: { + backgroundColor: '#f1f1f1', + border: 'solid 0.5px #979797', + }, logo: { flexBasis: '125px', }, @@ -37,6 +42,9 @@ const styles = theme => ({ }, user: { alignItems: 'center', + border: '1px solid grey', + padding: '10px', + backgroundColor: '#f1f1f1', }, address: { flexGrow: 1, @@ -56,11 +64,11 @@ const styles = theme => ({ }, details: { alignItems: 'center', - width: '350px', + width: '375px', border: '1px solid grey', display: 'block', - padding: '12px 4px 4px', - marginLeft: 'auto', + padding: '12px 8px 4px', + margin: '0 0 16px auto', }, column: { flexBasis: '33.33%', @@ -82,9 +90,9 @@ const Header = ({ provider, classes }: Props) => { const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected' return ( - - - }> + + + }> Gnosis Safe @@ -115,7 +123,7 @@ const Header = ({ provider, classes }: Props) => { } - + ) } From bb7b7ff42117df2029b67046eb018b8680854196 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 11:17:45 +0200 Subject: [PATCH 14/97] Sent information to Details component --- .../Header/component/Connected/index.jsx | 34 ---------------- .../Header/component/Details/index.jsx | 40 +++++++++++++++++++ src/components/Header/component/Layout.jsx | 28 ++++++++----- 3 files changed, 59 insertions(+), 43 deletions(-) delete mode 100644 src/components/Header/component/Connected/index.jsx create mode 100644 src/components/Header/component/Details/index.jsx diff --git a/src/components/Header/component/Connected/index.jsx b/src/components/Header/component/Connected/index.jsx deleted file mode 100644 index f806086a..00000000 --- a/src/components/Header/component/Connected/index.jsx +++ /dev/null @@ -1,34 +0,0 @@ -// @flow -import * as React from 'react' -import Col from '~/components/layout/Col' -import Bold from '~/components/layout/Bold' -import Paragraph from '~/components/layout/Paragraph' - -type Props = { - provider: string, -} - -const leftColumnStyle = { - maxWidth: '80px', -} - -const paragraphStyle = { - margin: '2px', -} - -const Connected = ({ provider }: Props) => ( - - - Status: - Client: - Network: - - - Connected - {provider} - Rinkeby - - -) - -export default Connected diff --git a/src/components/Header/component/Details/index.jsx b/src/components/Header/component/Details/index.jsx new file mode 100644 index 00000000..b8bc3932 --- /dev/null +++ b/src/components/Header/component/Details/index.jsx @@ -0,0 +1,40 @@ +// @flow +import * as React from 'react' +import Col from '~/components/layout/Col' +import Bold from '~/components/layout/Bold' +import Paragraph from '~/components/layout/Paragraph' + +type Props = { + provider: string, + network: string, + connected: boolean, +} + +const leftColumnStyle = { + maxWidth: '80px', +} + +const paragraphStyle = { + margin: '2px', +} + +const Details = ({ provider, network, connected }: Props) => { + const status = connected ? 'Connected' : 'Not connected' + + return ( + + + Status: + Client: + Network: + + + {status} + {provider} + {network} + + + ) +} + +export default Details diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index 911b6789..da4f3d94 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -14,13 +14,16 @@ import Button from '~/components/layout/Button' import Row from '~/components/layout/Row' import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' -import Connected from './Connected' +import Details from './Details' const logo = require('../assets/gnosis-safe-logo.svg') type Props = { provider: string, classes: Object, + network: string, + userAddress: string, + connected: boolean, } const styles = theme => ({ @@ -86,8 +89,15 @@ const styles = theme => ({ }, }) -const Header = ({ provider, classes }: Props) => { - const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected' +const openIconStyle = { + height: '14px', +} + +const Header = ({ + provider, network, connected, classes, userAddress, +}: Props) => { + const providerText = connected ? `${provider} [${network}]` : 'Not connected' + const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' return ( @@ -100,21 +110,21 @@ const Header = ({ provider, classes }: Props) => { {providerText} - 0x873faa....d30aaa + {cutAddress} - { provider && + { connected && - +
- - 0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b - + + {userAddress} + From 1b2504a6e210185fa23b1fe382525dd9737f1bc5 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 14:10:14 +0200 Subject: [PATCH 15/97] Improve upperFirst method --- src/utils/css.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/css.js b/src/utils/css.js index 3c556b23..34dddbe7 100644 --- a/src/utils/css.js +++ b/src/utils/css.js @@ -1,5 +1,5 @@ // @flow -export const upperFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1) +export const upperFirst = (value: string) => value.charAt(0).toUpperCase() + value.toLowerCase().slice(1) type Value = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'center' | 'end' | 'start' | number | boolean From 58a84c1d6a60d966d82f740cffbf72dd1ba40f30 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 14:13:00 +0200 Subject: [PATCH 16/97] Fix DOM error with boolean prop --- src/components/Header/component/Layout.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index da4f3d94..93e5910d 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -126,7 +126,7 @@ const Header = ({ {userAddress} - + From b1244a22fd7ad35d21791e8afbee7897bbff95f4 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 14:13:42 +0200 Subject: [PATCH 17/97] Add network prop to provider entity --- .../wallets/store/actions/fetchProvider.js | 4 ++-- src/logic/wallets/store/model/provider.js | 2 ++ src/logic/wallets/store/selectors/index.js | 17 +++++++++++++++++ .../wallets/store/test/provider.reducer.js | 6 +++--- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js index 2fdb2962..3d523e46 100644 --- a/src/logic/wallets/store/actions/fetchProvider.js +++ b/src/logic/wallets/store/actions/fetchProvider.js @@ -7,11 +7,11 @@ import addProvider from './addProvider' export const processProviderResponse = (dispatch: ReduxDispatch<*>, response: ProviderProps) => { const { - name, available, loaded, account, + name, available, loaded, account, network, } = response const walletRecord = makeProvider({ - name, available, loaded, account, + name, available, loaded, account, network, }) dispatch(addProvider(walletRecord)) diff --git a/src/logic/wallets/store/model/provider.js b/src/logic/wallets/store/model/provider.js index 753cb974..a62e4082 100644 --- a/src/logic/wallets/store/model/provider.js +++ b/src/logic/wallets/store/model/provider.js @@ -7,6 +7,7 @@ export type ProviderProps = { loaded: boolean, available: boolean, account: string, + network: number, } export const makeProvider: RecordFactory = Record({ @@ -14,6 +15,7 @@ export const makeProvider: RecordFactory = Record({ loaded: false, available: false, account: '', + network: 0, }) export type Provider = RecordOf diff --git a/src/logic/wallets/store/selectors/index.js b/src/logic/wallets/store/selectors/index.js index 380546b0..484b926b 100644 --- a/src/logic/wallets/store/selectors/index.js +++ b/src/logic/wallets/store/selectors/index.js @@ -2,6 +2,8 @@ import { createSelector } from 'reselect' import type { Provider } from '~/logic/wallets/store/model/provider' import { PROVIDER_REDUCER_ID } from '~/logic/wallets/store/reducer/provider' +import { upperFirst } from '~/utils/css' +import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3' const providerSelector = (state: any): Provider => state[PROVIDER_REDUCER_ID] @@ -24,3 +26,18 @@ export const providerNameSelector = createSelector( return loaded && available ? name.toLowerCase() : undefined }, ) + +export const networkSelector = createSelector( + providerSelector, + (provider: Provider) => { + const networkId = provider.get('network') + const network = ETHEREUM_NETWORK_IDS[networkId] || ETHEREUM_NETWORK.UNKNOWN + + return upperFirst(network) + }, +) + +export const connectedSelector = createSelector( + providerSelector, + (provider: Provider) => provider.get('loaded') && provider.get('available'), +) diff --git a/src/logic/wallets/store/test/provider.reducer.js b/src/logic/wallets/store/test/provider.reducer.js index e9791bb3..1d3a9e38 100644 --- a/src/logic/wallets/store/test/provider.reducer.js +++ b/src/logic/wallets/store/test/provider.reducer.js @@ -25,7 +25,7 @@ const providerReducerTests = () => { it('reducer should return default Provider record when no Metamask is loaded', () => { // GIVEN const emptyResponse: ProviderProps = { - name: '', loaded: false, available: false, account: '', + name: '', loaded: false, available: false, account: '', network: 0, } // WHEN @@ -39,7 +39,7 @@ const providerReducerTests = () => { it('reducer should return avaiable with its default value when is loaded but not available', () => { // GIVEN const metamaskLoaded: ProviderProps = { - name: 'METAMASK', loaded: true, available: false, account: '', + name: 'METAMASK', loaded: true, available: false, account: '', network: 0, } // WHEN @@ -53,7 +53,7 @@ const providerReducerTests = () => { it('reducer should return metamask provider when it is loaded and available', () => { // GIVEN const metamask: ProviderProps = { - name: 'METAMASK', loaded: true, available: true, account: '', + name: 'METAMASK', loaded: true, available: true, account: '', network: 0, } // WHEN From 66792477bb85eb4122f2b973fa71972ef2d1b4ec Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 14:22:13 +0200 Subject: [PATCH 18/97] Injecting provider selectors in Header's layout --- src/components/Header/index.jsx | 16 ++++++++++-- src/components/Header/selector.js | 5 +++- src/logic/wallets/getWeb3.js | 43 +++++++++++++++++++++++++++++-- 3 files changed, 59 insertions(+), 5 deletions(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 83cefe88..d69651ad 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -8,6 +8,9 @@ import selector from './selector' type Props = { provider: string, fetchProvider: Function, + userAddress: string, + network: string, + connected: boolean, } class Header extends React.PureComponent { @@ -20,9 +23,18 @@ class Header extends React.PureComponent { } render() { - const { provider } = this.props + const { + provider, userAddress, network, connected, + } = this.props + return ( - + ) } } diff --git a/src/components/Header/selector.js b/src/components/Header/selector.js index 11b9dd34..2148b817 100644 --- a/src/components/Header/selector.js +++ b/src/components/Header/selector.js @@ -1,7 +1,10 @@ // @flow import { createStructuredSelector } from 'reselect' -import { providerNameSelector } from '~/logic/wallets/store/selectors' +import { providerNameSelector, userAccountSelector, networkSelector, connectedSelector } from '~/logic/wallets/store/selectors' export default createStructuredSelector({ provider: providerNameSelector, + userAddress: userAccountSelector, + network: networkSelector, + connected: connectedSelector, }) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index 9ffdcba1..87738771 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -4,6 +4,36 @@ import Web3 from 'web3' import type { ProviderProps } from '~/logic/wallets/store/model/provider' import { promisify } from '~/utils/promisify' +export const ETHEREUM_NETWORK = { + MAIN: 'MAIN', + MORDEN: 'MORDEN', + ROPSTEN: 'ROPSTEN', + RINKEBY: 'RINKEBY', + KOVAN: 'KOVAN', + UNKNOWN: 'UNKNOWN', +} + +export const WALLET_PROVIDER = { + METAMASK: 'METAMASK', + PARITY: 'PARITY', + REMOTE: 'REMOTE', + UPORT: 'UPORT', +} + +export const ETHEREUM_NETWORK_IDS = { + // $FlowFixMe + 1: ETHEREUM_NETWORK.MAIN, + // $FlowFixMe + 2: ETHEREUM_NETWORK.MORDEN, + // $FlowFixMe + 3: ETHEREUM_NETWORK.ROPSTEN, + // $FlowFixMe + 4: ETHEREUM_NETWORK.RINKEBY, + // $FlowFixMe + 42: ETHEREUM_NETWORK.KOVAN, +} + + let web3 export const getWeb3 = () => web3 || new Web3(window.web3.currentProvider) @@ -19,10 +49,16 @@ const getAccountFrom: Function = async (web3Provider): Promise => return accounts && accounts.length > 0 ? accounts[0] : null } +const getNetworkIdFrom = async (web3Provider) => { + const networkId = await web3Provider.version.network + + return networkId +} + export const getProviderInfo: Function = async (): Promise => { if (typeof window.web3 === 'undefined') { return { - name: '', available: false, loaded: false, account: '', + name: '', available: false, loaded: false, account: '', network: 0, } } @@ -34,8 +70,10 @@ export const getProviderInfo: Function = async (): Promise => { console.log('Injected web3 detected.') } - const name = isMetamask(web3) ? 'METAMASK' : 'UNKNOWN' + const name = isMetamask(web3) ? WALLET_PROVIDER.METAMASK : 'UNKNOWN' const account = await getAccountFrom(web3) + const network = await getNetworkIdFrom(web3) + const available = account !== null return { @@ -43,6 +81,7 @@ export const getProviderInfo: Function = async (): Promise => { available, loaded: true, account, + network, } } From 818cdfdba74a4443750a18fc108eb2cf2698ae7d Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 28 Aug 2018 14:30:09 +0200 Subject: [PATCH 19/97] Fix Metamask test provider --- src/logic/wallets/store/test/name.selector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/logic/wallets/store/test/name.selector.js b/src/logic/wallets/store/test/name.selector.js index 212242a6..457f78e4 100644 --- a/src/logic/wallets/store/test/name.selector.js +++ b/src/logic/wallets/store/test/name.selector.js @@ -35,7 +35,7 @@ const providerReducerTests = () => { const providerName = providerNameSelector(reduxStore) // THEN - expect(providerName).toEqual('METAMASK') + expect(providerName).toEqual('metamask') }) }) } From 2e860d7a65500c1e69f009cc5dd479e3cbfe83ff Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 29 Aug 2018 09:19:40 +0200 Subject: [PATCH 20/97] Fetching network version using callback --- src/logic/wallets/getWeb3.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index 87738771..10c98616 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -50,7 +50,7 @@ const getAccountFrom: Function = async (web3Provider): Promise => } const getNetworkIdFrom = async (web3Provider) => { - const networkId = await web3Provider.version.network + const networkId = await promisify(cb => web3Provider.version.getNetwork(cb)) return networkId } From 8ecf5180222d1698b09eec63b31b513915c6f8d1 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 29 Aug 2018 09:20:20 +0200 Subject: [PATCH 21/97] Executing DailyLimit operation in a controlled try/catch way --- src/logic/safe/safeBlockchainOperations.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/logic/safe/safeBlockchainOperations.js b/src/logic/safe/safeBlockchainOperations.js index efa2d531..d71be6c7 100644 --- a/src/logic/safe/safeBlockchainOperations.js +++ b/src/logic/safe/safeBlockchainOperations.js @@ -118,8 +118,14 @@ export const executeDailyLimit = async ( const gas = await calculateGasOf(dailyLimitData, sender, dailyLimitModule.address) const gasPrice = await calculateGasPrice() - const txReceipt = await dailyLimitModule.executeDailyLimit(0, to, valueInWei, { from: sender, gas, gasPrice }) - checkReceiptStatus(txReceipt.tx) + try { + const txReceipt = await dailyLimitModule.executeDailyLimit(0, to, valueInWei, { from: sender, gas, gasPrice }) + await checkReceiptStatus(txReceipt.tx) + + return Promise.resolve(txReceipt.tx) + } catch (err) { + return Promise.reject(new Error(err)) + } /* // Temporarily disabled for daily limit operations @@ -128,5 +134,4 @@ export const executeDailyLimit = async ( await submitOperation(safeAddress, to, Number(valueInWei), data, operation, nonce, txReceipt.tx, sender, 'execution') */ - return txReceipt.tx } From 3003805763b9b8d808d242a46143c4dc56f72390 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 29 Aug 2018 09:21:11 +0200 Subject: [PATCH 22/97] Returning Promise.reject(new Error(....)) when checking receipt status and gas calculation --- src/logic/wallets/ethTransactions.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/logic/wallets/ethTransactions.js b/src/logic/wallets/ethTransactions.js index a16dc121..d7fecb2e 100644 --- a/src/logic/wallets/ethTransactions.js +++ b/src/logic/wallets/ethTransactions.js @@ -9,7 +9,7 @@ export const EMPTY_DATA = '0x' export const checkReceiptStatus = async (hash: string) => { if (!hash) { - throw new Error('No valid Tx hash to get receipt from') + return Promise.reject(new Error('No valid Tx hash to get receipt from')) } const web3 = getWeb3() @@ -17,13 +17,15 @@ export const checkReceiptStatus = async (hash: string) => { const { status } = txReceipt if (!status) { - throw new Error('No status found on this transaction receipt') + return Promise.reject(new Error('No status found on this transaction receipt')) } const hasError = status === '0x0' if (hasError) { - throw new Error('Obtained a transaction failure in the receipt') + return Promise.reject(new Error('Obtained a transaction failure in the receipt')) } + + return Promise.resolve() } export const calculateGasPrice = async () => { @@ -50,7 +52,11 @@ export const calculateGasPrice = async () => { export const calculateGasOf = async (data: Object, from: string, to: string) => { const web3 = getWeb3() - const gas = await promisify(cb => web3.eth.estimateGas({ data, from, to }, cb)) + try { + const gas = await promisify(cb => web3.eth.estimateGas({ data, from, to }, cb)) - return gas * 2 + return gas * 2 + } catch (err) { + return Promise.reject(new Error(err)) + } } From 6b130deb57c7f18b44c0dc3217c541d7cda5eedb Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 29 Aug 2018 09:33:00 +0200 Subject: [PATCH 23/97] Updating Daily limit error msg when daily limit is reached --- src/test/dailyLimit.blockchain.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/dailyLimit.blockchain.test.js b/src/test/dailyLimit.blockchain.test.js index fcb2bc9e..a4e8082a 100644 --- a/src/test/dailyLimit.blockchain.test.js +++ b/src/test/dailyLimit.blockchain.test.js @@ -28,6 +28,6 @@ describe('Safe Blockchain Test', () => { await executeWithdrawOn(safe, value) // THEN - expect(executeWithdrawOn(safe, value)).rejects.toThrow('VM Exception while processing transaction: revert') + expect(executeWithdrawOn(safe, value)).rejects.toThrow('VM Exception while processing transaction: revert Daily limit has been reached') }) }) From 2f19ceb0248cb087b8dcc22e639e3e1fa1ddb464 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 10:44:35 +0200 Subject: [PATCH 24/97] Added border prop in variables.js --- src/theme/variables.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/theme/variables.js b/src/theme/variables.js index 52c9a40d..666b5e6f 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -1,4 +1,5 @@ // @flow +const border = '#E7EAF1' const primary = '#1798cc' const secondary = '#13222b' const tertiary = '#f6f9fc' @@ -17,6 +18,7 @@ module.exports = Object.assign({}, { md, lg, xl, + border, fontSizeHeadingXs: 16, fontSizeHeadingSm: 18, fontSizeHeadingMd: 21, From fa9412033c5e97f5dc8fb3375a1a73b881896e09 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 10:45:14 +0200 Subject: [PATCH 25/97] Improved footer's layout --- src/components/Footer/index.jsx | 2 +- src/components/Footer/index.scss | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx index eb1e52ed..92c158da 100644 --- a/src/components/Footer/index.jsx +++ b/src/components/Footer/index.jsx @@ -7,7 +7,7 @@ import styles from './index.scss' const Footer = () => ( - + Welcome diff --git a/src/components/Footer/index.scss b/src/components/Footer/index.scss index c5036983..e07e4e71 100644 --- a/src/components/Footer/index.scss +++ b/src/components/Footer/index.scss @@ -1,7 +1,10 @@ .footer { display: grid; - grid-template-columns: 1fr auto auto; - justify-items: end; + grid-template-columns: 100px 100px 1fr; + grid-template-rows: 40px; + justify-items: center; + align-items: center; + border: solid 0.5px $border; } @media only screen and (max-width: $(screenXs)px) { From 24ee0ec1d1cbe7ffcebe4252a1e5a5450113a9a5 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 10:45:43 +0200 Subject: [PATCH 26/97] Adapting layout to new design --- src/components/Header/component/Layout.jsx | 71 +++++++++++----------- src/components/layout/Page/index.scss | 6 +- src/components/layout/PageFrame/index.scss | 1 - 3 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index 93e5910d..fc16ef61 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -7,13 +7,13 @@ import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' import ExpandMoreIcon from '@material-ui/icons/ArrowDropDown' import OpenInNew from '@material-ui/icons/OpenInNew' import Paragraph from '~/components/layout/Paragraph' -import Block from '~/components/layout/Block' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Button from '~/components/layout/Button' import Row from '~/components/layout/Row' import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' +import { border } from '~/theme/variables' import Details from './Details' const logo = require('../assets/gnosis-safe-logo.svg') @@ -31,8 +31,7 @@ const styles = theme => ({ width: '100%', }, summary: { - backgroundColor: '#f1f1f1', - border: 'solid 0.5px #979797', + border: `solid 0.5px ${border}`, }, logo: { flexBasis: '125px', @@ -71,7 +70,7 @@ const styles = theme => ({ border: '1px solid grey', display: 'block', padding: '12px 8px 4px', - margin: '0 0 16px auto', + margin: '0 0 0 auto', }, column: { flexBasis: '33.33%', @@ -100,40 +99,38 @@ const Header = ({ const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' return ( - - - }> - - - Gnosis Safe + + }> + + + Gnosis Safe + + + + {providerText} + {cutAddress} + + + + { connected && + + + +
+ + + + + {userAddress} + + + + - - - {providerText} - {cutAddress} - - - - { connected && - - - -
- - - - - {userAddress} - - - - - - - - } - - + + + } + ) } diff --git a/src/components/layout/Page/index.scss b/src/components/layout/Page/index.scss index 7e8f0f39..c08a62cd 100644 --- a/src/components/layout/Page/index.scss +++ b/src/components/layout/Page/index.scss @@ -1,8 +1,10 @@ .page { display: flex; - flex-direction: column; flex: 1 0 auto; - padding: 0 $xl; + width: 100%; + flex-direction: column; + padding: $xl; + background-color: #f1f1f1; } .center { diff --git a/src/components/layout/PageFrame/index.scss b/src/components/layout/PageFrame/index.scss index 477bb2d8..630ddc5c 100644 --- a/src/components/layout/PageFrame/index.scss +++ b/src/components/layout/PageFrame/index.scss @@ -3,6 +3,5 @@ flex-direction: column; flex: 1 1 auto; background-color: white; - padding-bottom: $xl; max-width: 100%; } From 78ef44f84011cf50e243e5f7a3f9fe4de1225fe7 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 13:14:07 +0200 Subject: [PATCH 27/97] Created Divider layout component --- src/components/layout/Divider/index.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/layout/Divider/index.js diff --git a/src/components/layout/Divider/index.js b/src/components/layout/Divider/index.js new file mode 100644 index 00000000..7962d569 --- /dev/null +++ b/src/components/layout/Divider/index.js @@ -0,0 +1,14 @@ +// @flow +import * as React from 'react' +import { border } from '~/theme/variables' + +const style = { + height: '100%', + border: `solid 1px ${border}`, +} + +const Divider = () => ( +
+) + +export default Divider From cd29569287bcf761e26a40af0cf3b302bf14830b Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 13:15:53 +0200 Subject: [PATCH 28/97] Using variable in Hairline --- src/components/layout/Hairline/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Hairline/index.js b/src/components/layout/Hairline/index.js index 99c4912d..cf47e673 100644 --- a/src/components/layout/Hairline/index.js +++ b/src/components/layout/Hairline/index.js @@ -1,10 +1,11 @@ // @flow import * as React from 'react' +import { border } from '~/theme/variables' const hairlineStyle = { width: '100%', height: '2px', - backgroundColor: '#d5d4d6', + backgroundColor: border, margin: '20px 0px', } From e382be763aefa19b1b9ea6ea9a005925e99c7dc9 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 13:16:15 +0200 Subject: [PATCH 29/97] Replacing Gnosis Safe Team Edition logo --- .../Header/assets/gnosis-safe-logo.svg | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Header/assets/gnosis-safe-logo.svg b/src/components/Header/assets/gnosis-safe-logo.svg index e3ac3a27..f125e106 100644 --- a/src/components/Header/assets/gnosis-safe-logo.svg +++ b/src/components/Header/assets/gnosis-safe-logo.svg @@ -1,22 +1,22 @@ - + - + - - - - - TEAM EDITIO N - - - + + - + - - + + + + + + + TEAM EDITIO N + From e75dae5182594599ff9a73cf9879527ef9abb6bc Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 13:16:50 +0200 Subject: [PATCH 30/97] Updating border and main background color --- src/components/layout/Page/index.scss | 2 +- src/theme/variables.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layout/Page/index.scss b/src/components/layout/Page/index.scss index c08a62cd..66af964a 100644 --- a/src/components/layout/Page/index.scss +++ b/src/components/layout/Page/index.scss @@ -4,7 +4,7 @@ width: 100%; flex-direction: column; padding: $xl; - background-color: #f1f1f1; + background-color: #F2F2F8; } .center { diff --git a/src/theme/variables.js b/src/theme/variables.js index 666b5e6f..764dc8e1 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -1,5 +1,5 @@ // @flow -const border = '#E7EAF1' +const border = '#e4e8f1' const primary = '#1798cc' const secondary = '#13222b' const tertiary = '#f6f9fc' From 70f875ba2961aecabe6b1d094af048367151c13b Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 14:02:47 +0200 Subject: [PATCH 31/97] Wrapping Provider data in one component & Adding Identicon --- src/components/Header/component/Layout.jsx | 69 ++++++++++++++-------- src/logic/wallets/store/selectors/index.js | 3 +- 2 files changed, 45 insertions(+), 27 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index fc16ef61..5f7f27c7 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -1,24 +1,26 @@ // @flow import * as React from 'react' import { withStyles } from '@material-ui/core/styles' -import ExpansionPanel from '@material-ui/core/ExpansionPanel' import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' -import ExpandMoreIcon from '@material-ui/icons/ArrowDropDown' import OpenInNew from '@material-ui/icons/OpenInNew' +import IconButton from '@material-ui/core/IconButton' +import ExpandLess from '@material-ui/icons/ExpandLess' +import ExpandMore from '@material-ui/icons/ExpandMore' +import Divider from '~/components/layout/Divider' import Paragraph from '~/components/layout/Paragraph' +import openHoc, { type Open } from '~/components/hoc/OpenHoc' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Button from '~/components/layout/Button' import Row from '~/components/layout/Row' import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' -import { border } from '~/theme/variables' +import { border, sm, md } from '~/theme/variables' import Details from './Details' const logo = require('../assets/gnosis-safe-logo.svg') -type Props = { +type Props = Open & { provider: string, classes: Object, network: string, @@ -27,21 +29,32 @@ type Props = { } const styles = theme => ({ - root: { - width: '100%', - }, summary: { - border: `solid 0.5px ${border}`, + border: `solid 2px ${border}`, + alignItems: 'center', + height: '52px', }, logo: { - flexBasis: '125px', + padding: `${sm} ${md}`, + flexBasis: '95px', }, provider: { - flexBasis: '130px', + padding: `${sm} ${md}`, + alignItems: 'center', + flex: '0 1 auto', + display: 'flex', + cursor: 'pointer', + }, + account: { + padding: `0 ${md} 0 ${sm}`, display: 'flex', flexDirection: 'column', justifyContent: 'center', }, + expand: { + width: '20px', + height: '20px', + }, user: { alignItems: 'center', border: '1px solid grey', @@ -92,26 +105,32 @@ const openIconStyle = { height: '14px', } -const Header = ({ - provider, network, connected, classes, userAddress, +const Header = openHoc(({ + open, toggle, provider, network, connected, classes, userAddress, }: Props) => { const providerText = connected ? `${provider} [${network}]` : 'Not connected' const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' return ( - - }> - - - Gnosis Safe - - - + + + + Gnosis Team Safe + + + + + + { connected && } + {providerText} {cutAddress} - - + + { open ? : } + + + { connected && @@ -130,8 +149,8 @@ const Header = ({ } - + ) -} +}) export default withStyles(styles)(Header) diff --git a/src/logic/wallets/store/selectors/index.js b/src/logic/wallets/store/selectors/index.js index 484b926b..e479c125 100644 --- a/src/logic/wallets/store/selectors/index.js +++ b/src/logic/wallets/store/selectors/index.js @@ -2,7 +2,6 @@ import { createSelector } from 'reselect' import type { Provider } from '~/logic/wallets/store/model/provider' import { PROVIDER_REDUCER_ID } from '~/logic/wallets/store/reducer/provider' -import { upperFirst } from '~/utils/css' import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3' const providerSelector = (state: any): Provider => state[PROVIDER_REDUCER_ID] @@ -33,7 +32,7 @@ export const networkSelector = createSelector( const networkId = provider.get('network') const network = ETHEREUM_NETWORK_IDS[networkId] || ETHEREUM_NETWORK.UNKNOWN - return upperFirst(network) + return network }, ) From caa2fdee1995d42bcafa54fd3fabc1e44b2e18a9 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 17:01:51 +0200 Subject: [PATCH 32/97] Updating material-ui --- package.json | 4 +- yarn.lock | 105 +++++++++++++++++++++------------------------------ 2 files changed, 46 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 1ee9c78b..c3c4d732 100644 --- a/package.json +++ b/package.json @@ -102,8 +102,8 @@ }, "dependencies": { "@gnosis.pm/util-contracts": "^0.2.14", - "@material-ui/core": "^1.2.1", - "@material-ui/icons": "^1.1.0", + "@material-ui/core": "^3.0.1", + "@material-ui/icons": "^3.0.1", "final-form": "^4.2.1", "history": "^4.7.2", "react-final-form": "^3.1.2", diff --git a/yarn.lock b/yarn.lock index 7f538323..af0f8771 100644 --- a/yarn.lock +++ b/yarn.lock @@ -860,12 +860,17 @@ "@babel/plugin-syntax-dynamic-import" "7.0.0-beta.51" "@babel/plugin-syntax-import-meta" "7.0.0-beta.51" -"@babel/runtime@^7.0.0-beta.42": - version "7.0.0-beta.51" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.51.tgz#48b8ed18307034c6620f643514650ca2ccc0165a" +"@babel/runtime@7.0.0", "@babel/runtime@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c" dependencies: - core-js "^2.5.7" - regenerator-runtime "^0.11.1" + regenerator-runtime "^0.12.0" + +"@babel/runtime@7.0.0-rc.1": + version "7.0.0-rc.1" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-rc.1.tgz#42f36fc5817911c89ea75da2b874054922967616" + dependencies: + regenerator-runtime "^0.12.0" "@babel/template@7.0.0-beta.44": version "7.0.0-beta.44" @@ -935,11 +940,11 @@ version "0.2.14" resolved "https://registry.yarnpkg.com/@gnosis.pm/util-contracts/-/util-contracts-0.2.14.tgz#587cd6268a7d08dbc0d08b1c7bd375e19549d833" -"@material-ui/core@^1.2.1": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-1.2.2.tgz#b074bdaa679d68af235b4d3f108f828ddcf6c1bc" +"@material-ui/core@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.0.1.tgz#e8476394a42d89ae404355ddbc093db4d044b225" dependencies: - "@babel/runtime" "^7.0.0-beta.42" + "@babel/runtime" "7.0.0" "@types/jss" "^9.5.3" "@types/react-transition-group" "^2.0.8" brcast "^3.0.1" @@ -949,6 +954,7 @@ deepmerge "^2.0.1" dom-helpers "^3.2.1" hoist-non-react-statics "^2.5.0" + is-plain-object "^2.0.4" jss "^9.3.3" jss-camel-case "^6.0.0" jss-default-unit "^8.0.2" @@ -958,20 +964,20 @@ jss-vendor-prefixer "^7.0.0" keycode "^2.1.9" normalize-scroll-left "^0.1.2" + popper.js "^1.14.1" prop-types "^15.6.0" - react-event-listener "^0.6.0" + react-event-listener "^0.6.2" react-jss "^8.1.0" - react-popper "^1.0.0" react-transition-group "^2.2.1" - recompose "^0.27.0" - scroll "^2.0.3" + recompose "^0.29.0" warning "^4.0.1" -"@material-ui/icons@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-1.1.0.tgz#4d025df7b0ba6ace8d6710079ed76013a4d26595" +"@material-ui/icons@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-3.0.1.tgz#671fb3d04dcaf9351dbbd2bf82ae2ae72e3d93cd" dependencies: - recompose "^0.26.0 || ^0.27.0" + "@babel/runtime" "7.0.0" + recompose "^0.29.0" "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" @@ -3963,13 +3969,6 @@ create-react-class@^15.5.2, create-react-class@^15.6.0, create-react-class@^15.6 loose-envify "^1.3.1" object-assign "^4.1.1" -create-react-context@^0.2.1: - version "0.2.2" - resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca" - dependencies: - fbjs "^0.8.0" - gud "^1.0.0" - cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -5370,7 +5369,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9: +fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -5968,10 +5967,6 @@ growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" -gud@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" - gzip-size@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520" @@ -9670,12 +9665,6 @@ radium@^0.19.0, radium@^0.19.4: inline-style-prefixer "^2.0.5" prop-types "^15.5.8" -rafl@~1.2.1: - version "1.2.2" - resolved "https://registry.yarnpkg.com/rafl/-/rafl-1.2.2.tgz#fe930f758211020d47e38815f5196a8be4150740" - dependencies: - global "~4.3.0" - ramda@^0.24.1: version "0.24.1" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857" @@ -9790,11 +9779,11 @@ react-error-overlay@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4" -react-event-listener@^0.6.0: - version "0.6.1" - resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.1.tgz#41c7a80a66b398c27dd511e22712b02f3d4eccca" +react-event-listener@^0.6.2: + version "0.6.3" + resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.3.tgz#8eab88129a76e095ed8aa684c29679eded1e843d" dependencies: - "@babel/runtime" "^7.0.0-beta.42" + "@babel/runtime" "7.0.0-rc.1" prop-types "^15.6.0" warning "^4.0.1" @@ -9867,17 +9856,6 @@ react-onclickoutside@^6.5.0: version "6.7.1" resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93" -react-popper@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.0.0.tgz#b99452144e8fe4acc77fa3d959a8c79e07a65084" - dependencies: - babel-runtime "6.x.x" - create-react-context "^0.2.1" - popper.js "^1.14.1" - prop-types "^15.6.1" - typed-styles "^0.0.5" - warning "^3.0.0" - react-redux@^5.0.7: version "5.0.7" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8" @@ -10132,7 +10110,7 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" -"recompose@^0.26.0 || ^0.27.0", recompose@^0.27.0, recompose@^0.27.1: +recompose@^0.27.1: version "0.27.1" resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.1.tgz#1a49e931f183634516633bbb4f4edbfd3f38a7ba" dependencies: @@ -10143,6 +10121,17 @@ rechoir@^0.6.2: react-lifecycles-compat "^3.0.2" symbol-observable "^1.0.4" +recompose@^0.29.0: + version "0.29.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.29.0.tgz#f1a4e20d5f24d6ef1440f83924e821de0b1bccef" + dependencies: + "@babel/runtime" "^7.0.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" @@ -10214,6 +10203,10 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" +regenerator-runtime@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" + regenerator-transform@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd" @@ -10655,12 +10648,6 @@ scoped-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8" -scroll@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/scroll/-/scroll-2.0.3.tgz#0951b785544205fd17753bc3d294738ba16fc2ab" - dependencies: - rafl "~1.2.1" - scrypt.js@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/scrypt.js/-/scrypt.js-0.2.0.tgz#af8d1465b71e9990110bedfc593b9479e03a8ada" @@ -11820,10 +11807,6 @@ type-is@~1.6.15, type-is@~1.6.16: media-typer "0.3.0" mime-types "~2.1.18" -typed-styles@^0.0.5: - version "0.0.5" - resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.5.tgz#a60df245d482a9b1adf9c06c078d0f06085ed1cf" - typedarray@^0.0.6, typedarray@~0.0.5: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" From 1943100f7f3d87bc264362069158031c02304df7 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 17:02:26 +0200 Subject: [PATCH 33/97] Creating Provider Component with its owen React Portal refence --- .../Header/component/Provider/index.jsx | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/components/Header/component/Provider/index.jsx diff --git a/src/components/Header/component/Provider/index.jsx b/src/components/Header/component/Provider/index.jsx new file mode 100644 index 00000000..9a444ecc --- /dev/null +++ b/src/components/Header/component/Provider/index.jsx @@ -0,0 +1,90 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import IconButton from '@material-ui/core/IconButton' +import ExpandLess from '@material-ui/icons/ExpandLess' +import ExpandMore from '@material-ui/icons/ExpandMore' +import Paragraph from '~/components/layout/Paragraph' +import Col from '~/components/layout/Col' +import { type Open } from '~/components/hoc/OpenHoc' +import { sm, md } from '~/theme/variables' + +import Identicon from '~/components/Identicon' + +type Props = Open & { + provider: string, + network: string, + classes: Object, + userAddress: string, + connected: boolean, + children: Function, +} + +const styles = () => ({ + root: { + height: '100%', + display: 'center', + }, + provider: { + padding: `${sm} ${md}`, + alignItems: 'center', + flex: '0 1 auto', + display: 'flex', + cursor: 'pointer', + }, + account: { + padding: `0 ${md} 0 ${sm}`, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + expand: { + width: '30px', + height: '30px', + }, +}) + +type ProviderRef = { current: null | HTMLDivElement } + +class Provider extends React.Component { + constructor(props: Props) { + super(props) + + this.myRef = React.createRef() + } + + myRef: ProviderRef + + render() { + const { + open, toggle, provider, network, userAddress, connected, children, classes, + } = this.props + + const providerText = connected ? `${provider} [${network}]` : 'Not connected' + const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' + + return ( + +
+ + { connected && } + + {providerText} + {cutAddress} + + + { open ? : } + + +
+ { children(this.myRef) } + + ) + } +} + +export default withStyles(styles)(Provider) From c00af455dec8d1435cc0deb3d267bed7e9b43fc6 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 17:03:20 +0200 Subject: [PATCH 34/97] Refactor Header component using Provider and Popover --- src/components/Header/component/Layout.jsx | 125 +++++++++------------ 1 file changed, 55 insertions(+), 70 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index 5f7f27c7..bea1190c 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -1,11 +1,10 @@ // @flow import * as React from 'react' import { withStyles } from '@material-ui/core/styles' -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' +import ClickAwayListener from '@material-ui/core/ClickAwayListener' import OpenInNew from '@material-ui/icons/OpenInNew' -import IconButton from '@material-ui/core/IconButton' -import ExpandLess from '@material-ui/icons/ExpandLess' -import ExpandMore from '@material-ui/icons/ExpandMore' +import Grow from '@material-ui/core/Grow' +import Popper from '@material-ui/core/Popper' import Divider from '~/components/layout/Divider' import Paragraph from '~/components/layout/Paragraph' import openHoc, { type Open } from '~/components/hoc/OpenHoc' @@ -17,6 +16,7 @@ import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' import { border, sm, md } from '~/theme/variables' import Details from './Details' +import Provider from './Provider' const logo = require('../assets/gnosis-safe-logo.svg') @@ -30,7 +30,7 @@ type Props = Open & { const styles = theme => ({ summary: { - border: `solid 2px ${border}`, + borderBottom: `solid 2px ${border}`, alignItems: 'center', height: '52px', }, @@ -38,23 +38,6 @@ const styles = theme => ({ padding: `${sm} ${md}`, flexBasis: '95px', }, - provider: { - padding: `${sm} ${md}`, - alignItems: 'center', - flex: '0 1 auto', - display: 'flex', - cursor: 'pointer', - }, - account: { - padding: `0 ${md} 0 ${sm}`, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - }, - expand: { - width: '20px', - height: '20px', - }, user: { alignItems: 'center', border: '1px solid grey', @@ -74,8 +57,8 @@ const styles = theme => ({ }, icon: { verticalAlign: 'bottom', - height: 20, - width: 20, + height: 30, + width: 30, }, details: { alignItems: 'center', @@ -107,50 +90,52 @@ const openIconStyle = { const Header = openHoc(({ open, toggle, provider, network, connected, classes, userAddress, -}: Props) => { - const providerText = connected ? `${provider} [${network}]` : 'Not connected' - const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' +}: Props) => ( + + + + Gnosis Team Safe + + + + + + {myRef => ( + + {({ TransitionProps }) => ( + + + + +
+ + + + + {userAddress} + + + + + + + + + )} + + )} + + + +)) - return ( - - - - Gnosis Team Safe - - - - - - { connected && } - - {providerText} - {cutAddress} - - - { open ? : } - - - - { connected && - - - -
- - - - - {userAddress} - - - - - - - - } - - ) -}) - -export default withStyles(styles)(Header) +export default withStyles(styles)(openHoc(Header)) From 620b977e9c561d7c59343c2a4fc1c97412275c42 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 17:16:52 +0200 Subject: [PATCH 35/97] Refactor of User Details Popup --- src/components/Header/component/Layout.jsx | 30 +++------- .../index.jsx => UserDetails/Details.jsx} | 0 .../Header/component/UserDetails/index.jsx | 57 +++++++++++++++++++ 3 files changed, 64 insertions(+), 23 deletions(-) rename src/components/Header/component/{Details/index.jsx => UserDetails/Details.jsx} (100%) create mode 100644 src/components/Header/component/UserDetails/index.jsx diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index bea1190c..ebe844b6 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -2,21 +2,17 @@ import * as React from 'react' import { withStyles } from '@material-ui/core/styles' import ClickAwayListener from '@material-ui/core/ClickAwayListener' -import OpenInNew from '@material-ui/icons/OpenInNew' import Grow from '@material-ui/core/Grow' import Popper from '@material-ui/core/Popper' import Divider from '~/components/layout/Divider' -import Paragraph from '~/components/layout/Paragraph' import openHoc, { type Open } from '~/components/hoc/OpenHoc' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' -import Button from '~/components/layout/Button' import Row from '~/components/layout/Row' -import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' import { border, sm, md } from '~/theme/variables' -import Details from './Details' import Provider from './Provider' +import UserDetails from './UserDetails' const logo = require('../assets/gnosis-safe-logo.svg') @@ -84,10 +80,6 @@ const styles = theme => ({ }, }) -const openIconStyle = { - height: '14px', -} - const Header = openHoc(({ open, toggle, provider, network, connected, classes, userAddress, }: Props) => ( @@ -114,20 +106,12 @@ const Header = openHoc(({ {...TransitionProps} > - - -
- - - - - {userAddress} - - - - - - + )} diff --git a/src/components/Header/component/Details/index.jsx b/src/components/Header/component/UserDetails/Details.jsx similarity index 100% rename from src/components/Header/component/Details/index.jsx rename to src/components/Header/component/UserDetails/Details.jsx diff --git a/src/components/Header/component/UserDetails/index.jsx b/src/components/Header/component/UserDetails/index.jsx new file mode 100644 index 00000000..fb612713 --- /dev/null +++ b/src/components/Header/component/UserDetails/index.jsx @@ -0,0 +1,57 @@ +// @flow +import * as React from 'react' +import OpenInNew from '@material-ui/icons/OpenInNew' +import { withStyles } from '@material-ui/core/styles' +import Paragraph from '~/components/layout/Paragraph' +import Button from '~/components/layout/Button' +import Identicon from '~/components/Identicon' +import Col from '~/components/layout/Col' +import Row from '~/components/layout/Row' +import Spacer from '~/components/Spacer' +import Details from './Details' + +type Props = { + provider: string, + connected: boolean, + network: string, + userAddress: string, + classes: Object, +} + +const openIconStyle = { + height: '14px', +} + +const styles = () => ({ + user: { + alignItems: 'center', + border: '1px solid grey', + padding: '10px', + backgroundColor: '#f1f1f1', + }, + address: { + flexGrow: 1, + textAlign: 'center', + }, +}) + +const UserDetails = ({ + provider, connected, network, userAddress, classes, +}: Props) => ( + + +
+ + + + + {userAddress} + + + + + + +) + +export default withStyles(styles)(UserDetails) From daa5b22c84e2ce0e234b2acafd12dec1457890c1 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 17:54:26 +0200 Subject: [PATCH 36/97] Fix Popup padding overflow in Provider's UserDetails --- src/components/Header/component/Layout.jsx | 6 +++--- src/components/Header/component/UserDetails/index.jsx | 9 +++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index ebe844b6..4c4466bc 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -99,13 +99,13 @@ const Header = openHoc(({ open={open} toggle={toggle} > - {myRef => ( - + {providerRef => ( + {({ TransitionProps }) => ( - + ({ + root: { + backgroundColor: 'white', + padding: md, + }, user: { alignItems: 'center', border: '1px solid grey', @@ -38,7 +43,7 @@ const styles = () => ({ const UserDetails = ({ provider, connected, network, userAddress, classes, }: Props) => ( - +
@@ -51,7 +56,7 @@ const UserDetails = ({ - +
) export default withStyles(styles)(UserDetails) From df4c7439dff77261f3b38de6740c200a28951431 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 30 Aug 2018 18:06:04 +0200 Subject: [PATCH 37/97] Fix alignment in Header's components --- src/components/Header/component/Provider/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Header/component/Provider/index.jsx b/src/components/Header/component/Provider/index.jsx index 9a444ecc..9a23d7d6 100644 --- a/src/components/Header/component/Provider/index.jsx +++ b/src/components/Header/component/Provider/index.jsx @@ -23,7 +23,8 @@ type Props = Open & { const styles = () => ({ root: { height: '100%', - display: 'center', + display: 'flex', + alignItems: 'center', }, provider: { padding: `${sm} ${md}`, From f7c0a13ee2014dbf78656ca562dce2a7e09c1c6f Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 12:22:38 +0200 Subject: [PATCH 38/97] Creating util Size class --- src/theme/size.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/theme/size.js diff --git a/src/theme/size.js b/src/theme/size.js new file mode 100644 index 00000000..13e11797 --- /dev/null +++ b/src/theme/size.js @@ -0,0 +1,21 @@ +// @flow +import { xs, sm, md, lg, xl } from '~/theme/variables' + +export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' + +export const getSize = (size: Size) => { + switch (size) { + case 'xs': + return xs + case 'sm': + return sm + case 'md': + return md + case 'lg': + return lg + case 'xl': + return xl + default: + return md + } +} From e54c95bf748ea38b1edb6ea355f9e422e50bfe14 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 12:22:54 +0200 Subject: [PATCH 39/97] Adding background variable --- src/theme/variables.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/theme/variables.js b/src/theme/variables.js index 764dc8e1..d1cab272 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -1,6 +1,7 @@ // @flow const border = '#e4e8f1' -const primary = '#1798cc' +const background = '#f4f4f9' +const primary = '#467ee5' // '#1798cc' const secondary = '#13222b' const tertiary = '#f6f9fc' const xs = '4px' @@ -13,6 +14,7 @@ module.exports = Object.assign({}, { primary, secondary, tertiary, + background, xs, sm, md, From 8406a3d156676604db41f9278ec346f18f90e40c Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 12:23:31 +0200 Subject: [PATCH 40/97] Adding size xs on Block --- src/components/layout/Block/index.jsx | 3 +-- src/components/layout/Block/index.scss | 7 +++++++ src/components/layout/Hairline/index.js | 17 ++++++++++++----- .../Transactions/Transaction/index.jsx | 2 +- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/layout/Block/index.jsx b/src/components/layout/Block/index.jsx index a92dd060..d399bb82 100644 --- a/src/components/layout/Block/index.jsx +++ b/src/components/layout/Block/index.jsx @@ -2,12 +2,11 @@ import classNames from 'classnames/bind' import React, { PureComponent } from 'react' import { capitalize } from '~/utils/css' +import { type Size } from '~/theme/size' import styles from './index.scss' const cx = classNames.bind(styles) -type Size = 'sm' | 'md' | 'lg' | 'xl' - type Props = { margin?: Size, padding?: Size, diff --git a/src/components/layout/Block/index.scss b/src/components/layout/Block/index.scss index 62a278cb..a52a9e4b 100644 --- a/src/components/layout/Block/index.scss +++ b/src/components/layout/Block/index.scss @@ -2,6 +2,9 @@ width: 100%; overflow: hidden; } +.xs { + margin-bottom: $xs; +} .sm { margin-bottom: $sm; @@ -19,6 +22,10 @@ margin-bottom: $xl; } +.paddingXs { + padding-top: $xs; +} + .paddingSm { padding-top: $sm; } diff --git a/src/components/layout/Hairline/index.js b/src/components/layout/Hairline/index.js index cf47e673..7da19fb6 100644 --- a/src/components/layout/Hairline/index.js +++ b/src/components/layout/Hairline/index.js @@ -1,16 +1,23 @@ // @flow import * as React from 'react' +import { type Size, getSize } from '~/theme/size' import { border } from '~/theme/variables' -const hairlineStyle = { +const calculateStyleFrom = (margin: Size) => ({ width: '100%', height: '2px', backgroundColor: border, - margin: '20px 0px', + margin: `${getSize(margin)} 0px`, +}) + +type Props = { + margin?: Size, } -const Hairline = () => ( -
-) +const Hairline = ({ margin = 'md' }: Props) => { + const style = calculateStyleFrom(margin) + + return
+} export default Hairline diff --git a/src/routes/safe/component/Transactions/Transaction/index.jsx b/src/routes/safe/component/Transactions/Transaction/index.jsx index e294dafa..18a0e317 100644 --- a/src/routes/safe/component/Transactions/Transaction/index.jsx +++ b/src/routes/safe/component/Transactions/Transaction/index.jsx @@ -102,7 +102,7 @@ class GnoTransaction extends React.PureComponent { destination={transaction.get('destination')} threshold={threshold} /> } - + ) } From 8707ba91042ffec221a69db19fd678c5d70e58b3 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 12:23:51 +0200 Subject: [PATCH 41/97] Making no round button as default --- src/components/layout/Button/index.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Button/index.jsx b/src/components/layout/Button/index.jsx index f0ee9a37..240257bb 100644 --- a/src/components/layout/Button/index.jsx +++ b/src/components/layout/Button/index.jsx @@ -1,4 +1,11 @@ // @flow import Button from '@material-ui/core/Button' +import { withStyles } from '@material-ui/core/styles' -export default Button +const styles = { + root: { + borderRadius: 0, + }, +} + +export default withStyles(styles)(Button) From 5f66a6cd64ccb33b6c9914341f2d4fcb44bc0eda Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 12:24:11 +0200 Subject: [PATCH 42/97] Styles for Provider Popup --- .../Header/component/UserDetails/index.jsx | 106 ++++++++++++++---- 1 file changed, 82 insertions(+), 24 deletions(-) diff --git a/src/components/Header/component/UserDetails/index.jsx b/src/components/Header/component/UserDetails/index.jsx index 5ffc5fcb..f334abe3 100644 --- a/src/components/Header/component/UserDetails/index.jsx +++ b/src/components/Header/component/UserDetails/index.jsx @@ -4,12 +4,14 @@ import OpenInNew from '@material-ui/icons/OpenInNew' import { withStyles } from '@material-ui/core/styles' import Paragraph from '~/components/layout/Paragraph' import Button from '~/components/layout/Button' +import List from '@material-ui/core/List' import Identicon from '~/components/Identicon' -import Col from '~/components/layout/Col' +import Bold from '~/components/layout/Bold' +import Hairline from '~/components/layout/Hairline' import Row from '~/components/layout/Row' import Spacer from '~/components/Spacer' -import { md } from '~/theme/variables' -import Details from './Details' +import { md, lg, background } from '~/theme/variables' +import { upperFirst } from '~/utils/css' type Props = { provider: string, @@ -20,43 +22,99 @@ type Props = { } const openIconStyle = { - height: '14px', + height: '16px', + color: '#467ee5', } const styles = () => ({ root: { backgroundColor: 'white', - padding: md, + padding: 0, + boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)', + }, + container: { + padding: `${md} 12px`, + }, + identicon: { + justifyContent: 'center', + padding: `0 ${md}`, }, user: { alignItems: 'center', - border: '1px solid grey', - padding: '10px', - backgroundColor: '#f1f1f1', + backgroundColor: background, + padding: md, + }, + details: { + padding: `0 ${lg}`, + height: '20px', + alignItems: 'center', }, address: { flexGrow: 1, textAlign: 'center', }, + disconnect: { + padding: `${md} 32px`, + }, }) const UserDetails = ({ provider, connected, network, userAddress, classes, -}: Props) => ( -
- -
- - - - - {userAddress} - - - - - -
-) +}: Props) => { + const status = connected ? 'Connected' : 'Not connected' + + return ( + +
+ + + + + {userAddress} + + +
+ + + Status + + + + {status} + + + + + + Client + + + + {upperFirst(provider)} + + + + + + Netowrk + + + {upperFirst(network)} + + + + + + + + ) +} export default withStyles(styles)(UserDetails) From ac86d3ec2100a92f9c346d1bd4fdbef1a7e2eb71 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 12:36:37 +0200 Subject: [PATCH 43/97] Added Icons to user's account information --- src/components/Header/assets/connected.svg | 6 ++ src/components/Header/assets/dotRinkeby.svg | 3 + src/components/Header/assets/gnosis_logo.svg | 49 ------------- .../Header/assets/icon_metamask.svg | 20 ------ src/components/Header/assets/icon_parity.svg | 72 ------------------- src/components/Header/assets/metamask.svg | 3 + .../Header/component/UserDetails/Details.jsx | 40 ----------- .../Header/component/UserDetails/index.jsx | 15 +++- 8 files changed, 25 insertions(+), 183 deletions(-) create mode 100644 src/components/Header/assets/connected.svg create mode 100644 src/components/Header/assets/dotRinkeby.svg delete mode 100644 src/components/Header/assets/gnosis_logo.svg delete mode 100644 src/components/Header/assets/icon_metamask.svg delete mode 100644 src/components/Header/assets/icon_parity.svg create mode 100644 src/components/Header/assets/metamask.svg delete mode 100644 src/components/Header/component/UserDetails/Details.jsx diff --git a/src/components/Header/assets/connected.svg b/src/components/Header/assets/connected.svg new file mode 100644 index 00000000..1309cf1c --- /dev/null +++ b/src/components/Header/assets/connected.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Header/assets/dotRinkeby.svg b/src/components/Header/assets/dotRinkeby.svg new file mode 100644 index 00000000..8b415e70 --- /dev/null +++ b/src/components/Header/assets/dotRinkeby.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/assets/gnosis_logo.svg b/src/components/Header/assets/gnosis_logo.svg deleted file mode 100644 index 32b13cfd..00000000 --- a/src/components/Header/assets/gnosis_logo.svg +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/Header/assets/icon_metamask.svg b/src/components/Header/assets/icon_metamask.svg deleted file mode 100644 index 7a96204f..00000000 --- a/src/components/Header/assets/icon_metamask.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/components/Header/assets/icon_parity.svg b/src/components/Header/assets/icon_parity.svg deleted file mode 100644 index 63da56db..00000000 --- a/src/components/Header/assets/icon_parity.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - diff --git a/src/components/Header/assets/metamask.svg b/src/components/Header/assets/metamask.svg new file mode 100644 index 00000000..5c45d278 --- /dev/null +++ b/src/components/Header/assets/metamask.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/component/UserDetails/Details.jsx b/src/components/Header/component/UserDetails/Details.jsx deleted file mode 100644 index b8bc3932..00000000 --- a/src/components/Header/component/UserDetails/Details.jsx +++ /dev/null @@ -1,40 +0,0 @@ -// @flow -import * as React from 'react' -import Col from '~/components/layout/Col' -import Bold from '~/components/layout/Bold' -import Paragraph from '~/components/layout/Paragraph' - -type Props = { - provider: string, - network: string, - connected: boolean, -} - -const leftColumnStyle = { - maxWidth: '80px', -} - -const paragraphStyle = { - margin: '2px', -} - -const Details = ({ provider, network, connected }: Props) => { - const status = connected ? 'Connected' : 'Not connected' - - return ( - - - Status: - Client: - Network: - - - {status} - {provider} - {network} - - - ) -} - -export default Details diff --git a/src/components/Header/component/UserDetails/index.jsx b/src/components/Header/component/UserDetails/index.jsx index f334abe3..f9d77270 100644 --- a/src/components/Header/component/UserDetails/index.jsx +++ b/src/components/Header/component/UserDetails/index.jsx @@ -8,11 +8,16 @@ import List from '@material-ui/core/List' import Identicon from '~/components/Identicon' import Bold from '~/components/layout/Bold' import Hairline from '~/components/layout/Hairline' +import Img from '~/components/layout/Img' import Row from '~/components/layout/Row' import Spacer from '~/components/Spacer' -import { md, lg, background } from '~/theme/variables' +import { sm, md, lg, background } from '~/theme/variables' import { upperFirst } from '~/utils/css' +const metamask = require('../../assets/metamask.svg') +const connectedLogo = require('../../assets/connected.svg') +const dot = require('../../assets/dotRinkeby.svg') + type Props = { provider: string, connected: boolean, @@ -42,7 +47,7 @@ const styles = () => ({ user: { alignItems: 'center', backgroundColor: background, - padding: md, + padding: sm, }, details: { padding: `0 ${lg}`, @@ -56,6 +61,9 @@ const styles = () => ({ disconnect: { padding: `${md} 32px`, }, + logo: { + margin: '0px 2px', + }, }) const UserDetails = ({ @@ -78,6 +86,7 @@ const UserDetails = ({ Status + Status connected {status} @@ -88,6 +97,7 @@ const UserDetails = ({ Client + Metamask client {upperFirst(provider)} @@ -98,6 +108,7 @@ const UserDetails = ({ Netowrk + Network {upperFirst(network)} From d3e72b4c878b82c22fa321aa3b14b24e6f4aa762 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 13:59:59 +0200 Subject: [PATCH 44/97] Adding Roboto Font --- public/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 832dad97..5d742ea2 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,8 @@ - + + Multisig Safe From 83a4983808372a2740259bef8699da3babf270a6 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 14:00:53 +0200 Subject: [PATCH 45/97] Welcome Route changes --- src/components/layout/Heading/index.scss | 13 +++- src/index.scss | 2 +- src/routes/welcome/assets/new.svg | 3 + src/routes/welcome/assets/safe.svg | 3 + src/routes/welcome/assets/vault.svg | 86 ----------------------- src/routes/welcome/components/Layout.jsx | 48 +++++++++++-- src/routes/welcome/components/Layout.scss | 15 ++-- src/theme/variables.js | 10 +-- 8 files changed, 72 insertions(+), 108 deletions(-) create mode 100644 src/routes/welcome/assets/new.svg create mode 100644 src/routes/welcome/assets/safe.svg delete mode 100644 src/routes/welcome/assets/vault.svg diff --git a/src/components/layout/Heading/index.scss b/src/components/layout/Heading/index.scss index 32a232c4..e4f156eb 100644 --- a/src/components/layout/Heading/index.scss +++ b/src/components/layout/Heading/index.scss @@ -1,19 +1,26 @@ .heading { - font-weight: $boldFontWeight; + font-weight: normal; line-height: normal; margin: 0; } .h1 { + line-height: 36px; + font-weight: 500; + letter-spacing: -1px; font-size: $(fontSizeHeadingLg)px; } .h2 { - font-size: $(fontSizeHeadingMd)px; + line-height: 28px; + font-size: $largeFontSize; } .h3 { - font-size: $(fontSizeHeadingSm)px; + line-height: 21px; + font-size: $mediumFontSize; + font-weight: bold; + font-family: 'Roboto Mono', monospace; } .h4 { diff --git a/src/index.scss b/src/index.scss index 50d00c9e..a453a219 100644 --- a/src/index.scss +++ b/src/index.scss @@ -10,7 +10,7 @@ body { left: 0; right: 0; overflow-x: hidden; - color: #1f5f76; + color: $fontColor; font-family: 'Montserrat', sans-serif; font-size: $mediumFontSize; margin: 0; diff --git a/src/routes/welcome/assets/new.svg b/src/routes/welcome/assets/new.svg new file mode 100644 index 00000000..f308edc1 --- /dev/null +++ b/src/routes/welcome/assets/new.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/welcome/assets/safe.svg b/src/routes/welcome/assets/safe.svg new file mode 100644 index 00000000..43ec9182 --- /dev/null +++ b/src/routes/welcome/assets/safe.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/welcome/assets/vault.svg b/src/routes/welcome/assets/vault.svg deleted file mode 100644 index 46b00a87..00000000 --- a/src/routes/welcome/assets/vault.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx index fa42d03d..95cd669b 100644 --- a/src/routes/welcome/components/Layout.jsx +++ b/src/routes/welcome/components/Layout.jsx @@ -1,13 +1,16 @@ // @flow import * as React from 'react' import Block from '~/components/layout/Block' +import Heading from '~/components/layout/Heading' import Img from '~/components/layout/Img' import Button from '~/components/layout/Button' import Link from '~/components/layout/Link' import { OPEN_ADDRESS } from '~/routes/routes' +import { sm } from '~/theme/variables' import styles from './Layout.scss' -const vault = require('../assets/vault.svg') +const safe = require('../assets/safe.svg') +const plus = require('../assets/new.svg') type Props = { provider: string @@ -15,26 +18,61 @@ type Props = { type SafeProps = { provider: string, - size?: 'small' | 'medium', + size?: 'small' | 'medium' | 'large', +} + +const buttonStyle = { + marginLeft: sm, } export const CreateSafe = ({ size, provider }: SafeProps) => ( +) + +export const LoadSafe = ({ size, provider }: SafeProps) => ( + ) const Welcome = ({ provider }: Props) => ( - Safe Box + + Welcome to the Gnosis + + + Safe Team Edition + + + The Gnosis Safe Team Edition is geared towards teams managing
+ shared crypto funds. It is an improvement of the existing Gnosis
+ MultiSig wallet with redesigned smart contracts, cheaper setup and
+ transaction costs as well as an enhanced user experience. + - + + + + ) diff --git a/src/routes/welcome/components/Layout.scss b/src/routes/welcome/components/Layout.scss index 681515f7..aeb5a001 100644 --- a/src/routes/welcome/components/Layout.scss +++ b/src/routes/welcome/components/Layout.scss @@ -1,18 +1,15 @@ .safe { - display: grid; justify-content: center; - grid-row-gap: $xl; + justify-items: center; + margin-top: $xl; } -.safeActions { +.summary { display: flex; justify-content: space-around; } -@media(max-width: $(screenXsMax)px) { - .safeActions { - grid-row-gap: $md; - display: grid; - justify-items: center; - } +.safeActions { + display: flex; + justify-content: center; } diff --git a/src/theme/variables.js b/src/theme/variables.js index d1cab272..379cbc2b 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -1,9 +1,10 @@ // @flow const border = '#e4e8f1' const background = '#f4f4f9' -const primary = '#467ee5' // '#1798cc' +const primary = '#4a5579' // '#467ee5' // '#1798cc' const secondary = '#13222b' const tertiary = '#f6f9fc' +const fontColor = '#4a5579' const xs = '4px' const sm = '8px' const md = '16px' @@ -15,6 +16,7 @@ module.exports = Object.assign({}, { secondary, tertiary, background, + fontColor, xs, sm, md, @@ -24,11 +26,11 @@ module.exports = Object.assign({}, { fontSizeHeadingXs: 16, fontSizeHeadingSm: 18, fontSizeHeadingMd: 21, - fontSizeHeadingLg: 28, + fontSizeHeadingLg: 32, regularFontWeight: 400, boldFontWeight: 700, - smallFontSize: '12px', - mediumFontSize: '14px', + smallFontSize: '11x', + mediumFontSize: '13px', largeFontSize: '18px', extraLargeFontSize: '24px', screenXs: 480, From 725a2b27ee3367e767e63df82bbdbe8bee43a62d Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 14:16:44 +0200 Subject: [PATCH 46/97] Overrided contained primary styles on MuiButton --- src/theme/mui.js | 7 +++++++ src/theme/variables.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/theme/mui.js b/src/theme/mui.js index 325d2da9..88886b8c 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -25,5 +25,12 @@ export default createMuiTheme({ typography: { fontFamily: 'Montserrat,sans-serif', }, + overrides: { + MuiButton: { + containedPrimary: { + backgroundColor: '#467ee5', + }, + }, + }, palette, }) diff --git a/src/theme/variables.js b/src/theme/variables.js index 379cbc2b..c90b6efd 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -1,7 +1,7 @@ // @flow const border = '#e4e8f1' const background = '#f4f4f9' -const primary = '#4a5579' // '#467ee5' // '#1798cc' +const primary = '#4a5579' const secondary = '#13222b' const tertiary = '#f6f9fc' const fontColor = '#4a5579' From 8d01fdb75baf0940fbf00092803949fc1506a708 Mon Sep 17 00:00:00 2001 From: apanizo Date: Fri, 31 Aug 2018 14:21:59 +0200 Subject: [PATCH 47/97] Hardcoding size large in MuiButton --- src/components/Header/component/UserDetails/index.jsx | 2 +- src/theme/mui.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Header/component/UserDetails/index.jsx b/src/components/Header/component/UserDetails/index.jsx index f9d77270..fcb7566b 100644 --- a/src/components/Header/component/UserDetails/index.jsx +++ b/src/components/Header/component/UserDetails/index.jsx @@ -116,7 +116,7 @@ const UserDetails = ({ - - - ) -} - -export default withStyles(styles)(UserDetails) From 89a8951247dd0f4b7807212631e1a701a27444d4 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 16:59:37 +0200 Subject: [PATCH 59/97] Refactoring Header component injecting provider details and info as a prop --- src/components/Header/index.jsx | 63 ++++++++++++++++++++------------- 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index e73377ac..13ad649f 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -2,7 +2,10 @@ import * as React from 'react' import { connect } from 'react-redux' import { logComponentStack, type Info } from '~/utils/logBoundaries' -import Provider from './component/Provider' +import ProviderInfo from './component/ProviderInfo' +import ProviderDetails from './component/ProviderInfo/UserDetails' +import ProviderDisconnected from './component/ProviderDisconnected' +import ConnectDetails from './component/ProviderDisconnected/ConnectDetails' import Layout from './component/Layout' import actions from './actions' import selector from './selector' @@ -34,36 +37,48 @@ class Header extends React.PureComponent { logComponentStack(error, info) } - reloadWallet = () => { - this.props.fetchProvider() + getProviderInfoBased = (hasError, disconnected) => { + if (hasError) { + // return + } + + if (disconnected) { + return + } + + const { + provider, network, userAddress, connected, + } = this.props + + return + } + + getProviderDetailsBased = (hasError, disconnected) => { + if (hasError) { + // return + } + + if (disconnected) { + return + } + + const { + provider, network, userAddress, connected, + } = this.props + + return } render() { - const { - provider, userAddress, network, connected, - } = this.props + const { connected } = this.props const { hasError } = this.state + const providerDisconnected = !hasError && !connected - // const providerDisconnected = !hasError && !connected - const providerConnected = !hasError && connected + const info = this.getProviderInfoBased(hasError, providerDisconnected) + const details = this.getProviderDetailsBased(hasError, providerDisconnected) - return ( - - {/* hasError && */} - {/* providerDisconnected && */} - { providerConnected && - - } - - ) + return } } From 425a0db9853e5e32dc310cf37f4a0e06770c3947 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 17:00:12 +0200 Subject: [PATCH 60/97] Moving Popper into Header's Layout and reusing openHoc attrs from there --- src/components/Header/component/Layout.jsx | 29 ++++++++++++++++--- .../Header/component/Layout.stories.js | 25 ++++++++++++---- 2 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index 6500a31a..bb708467 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -6,14 +6,19 @@ import openHoc, { type Open } from '~/components/hoc/OpenHoc' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Row from '~/components/layout/Row' +import Grow from '@material-ui/core/Grow' +import ClickAwayListener from '@material-ui/core/ClickAwayListener' +import Popper from '@material-ui/core/Popper' import Spacer from '~/components/Spacer' import { border, sm, md } from '~/theme/variables' +import Provider from './Provider' const logo = require('../assets/gnosis-safe-logo.svg') type Props = Open & { classes: Object, - children: React$Node, + providerDetails: React$Node, + providerInfo: React$Node, } const styles = () => ({ @@ -29,7 +34,9 @@ const styles = () => ({ }, }) -const Header = openHoc(({ classes, children }: Props) => ( +const Layout = openHoc(({ + open, toggle, classes, providerInfo, providerDetails, +}: Props) => ( @@ -38,9 +45,23 @@ const Header = openHoc(({ classes, children }: Props) => ( - { children } + + {providerRef => ( + + {({ TransitionProps }) => ( + + + {providerDetails} + + + )} + + )} + )) -export default withStyles(styles)(Header) +export default withStyles(styles)(Layout) diff --git a/src/components/Header/component/Layout.stories.js b/src/components/Header/component/Layout.stories.js index 778744d4..b3196d93 100644 --- a/src/components/Header/component/Layout.stories.js +++ b/src/components/Header/component/Layout.stories.js @@ -1,9 +1,12 @@ // @flow -import { select } from '@storybook/addon-knobs' import { storiesOf } from '@storybook/react' import * as React from 'react' import styles from '~/components/layout/PageFrame/index.scss' -import Component from './Layout' +import Layout from './Layout' +import ProviderInfo from './ProviderInfo' +import ProviderDetails from './ProviderInfo/UserDetails' +import ProviderDisconnected from './ProviderDisconnected' +import ConnectDetails from './ProviderDisconnected/ConnectDetails' const FrameDecorator = story => (
@@ -13,8 +16,18 @@ const FrameDecorator = story => ( storiesOf('Components', module) .addDecorator(FrameDecorator) - .add('Header', () => { - // https://github.com/storybooks/storybook/tree/master/addons/knobs#select - const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], 'METAMASK') - return {}} /> + .add('Connected Header', () => { + const provider = 'METAMASK' + const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe' + const network = 'RINKEBY' + const info = + const details = + + return + }) + .add('Disconnected Header', () => { + const info = + const details = + + return }) From dc879a449b41d744c4f036ac03c0dca5ef4fe743 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 17:00:58 +0200 Subject: [PATCH 61/97] Extracting general Provider info layout into a common shared local component --- src/components/Header/component/Provider.jsx | 73 +++++++++++++++++++ .../Header/component/Provider/index.jsx | 49 ------------- 2 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 src/components/Header/component/Provider.jsx delete mode 100644 src/components/Header/component/Provider/index.jsx diff --git a/src/components/Header/component/Provider.jsx b/src/components/Header/component/Provider.jsx new file mode 100644 index 00000000..9abad16b --- /dev/null +++ b/src/components/Header/component/Provider.jsx @@ -0,0 +1,73 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import IconButton from '@material-ui/core/IconButton' +import ExpandLess from '@material-ui/icons/ExpandLess' +import ExpandMore from '@material-ui/icons/ExpandMore' +import Col from '~/components/layout/Col' +import { type Open } from '~/components/hoc/OpenHoc' +import { sm, md } from '~/theme/variables' + +type Props = Open & { + classes: Object, + popupDetails: React$Node, + info: React$Node, + children: Function, +} + +const styles = () => ({ + root: { + height: '100%', + display: 'flex', + alignItems: 'center', + }, + provider: { + padding: `${sm} ${md}`, + alignItems: 'center', + flex: '0 1 auto', + display: 'flex', + cursor: 'pointer', + }, + expand: { + width: '30px', + height: '30px', + }, +}) + +type ProviderRef = { current: null | HTMLDivElement } + +class Provider extends React.Component { + constructor(props: Props) { + super(props) + + this.myRef = React.createRef() + } + + myRef: ProviderRef + + render() { + const { + open, toggle, children, classes, info, + } = this.props + + return ( + +
+ + { info } + + { open ? : } + + +
+ { children(this.myRef) } + + ) + } +} + +export default withStyles(styles)(Provider) diff --git a/src/components/Header/component/Provider/index.jsx b/src/components/Header/component/Provider/index.jsx deleted file mode 100644 index 9153f3bf..00000000 --- a/src/components/Header/component/Provider/index.jsx +++ /dev/null @@ -1,49 +0,0 @@ -// @flow -import * as React from 'react' -import openHoc, { type Open } from '~/components/hoc/OpenHoc' -import ClickAwayListener from '@material-ui/core/ClickAwayListener' -import Grow from '@material-ui/core/Grow' -import Popper from '@material-ui/core/Popper' -import Connected from './Connected' -import UserDetails from './UserDetails' - -type Props = Open & { - provider: string, - network: string, - userAddress: string, - connected: boolean, -} - -const Provider = ({ - open, toggle, provider, network, userAddress, connected, -}: Props) => ( - - {providerRef => ( - - {({ TransitionProps }) => ( - - - - - - )} - - )} - -) - -export default openHoc(Provider) From 31cf7ced951713879697faa0e222b40f787742c1 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 17:02:29 +0200 Subject: [PATCH 62/97] Simplification of ProviderInfo component --- .../component/ProviderInfo/UserDetails.jsx | 131 ++++++++++++++++++ .../Header/component/ProviderInfo/index.jsx | 58 ++++++++ 2 files changed, 189 insertions(+) create mode 100644 src/components/Header/component/ProviderInfo/UserDetails.jsx create mode 100644 src/components/Header/component/ProviderInfo/index.jsx diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx new file mode 100644 index 00000000..fcb7566b --- /dev/null +++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx @@ -0,0 +1,131 @@ +// @flow +import * as React from 'react' +import OpenInNew from '@material-ui/icons/OpenInNew' +import { withStyles } from '@material-ui/core/styles' +import Paragraph from '~/components/layout/Paragraph' +import Button from '~/components/layout/Button' +import List from '@material-ui/core/List' +import Identicon from '~/components/Identicon' +import Bold from '~/components/layout/Bold' +import Hairline from '~/components/layout/Hairline' +import Img from '~/components/layout/Img' +import Row from '~/components/layout/Row' +import Spacer from '~/components/Spacer' +import { sm, md, lg, background } from '~/theme/variables' +import { upperFirst } from '~/utils/css' + +const metamask = require('../../assets/metamask.svg') +const connectedLogo = require('../../assets/connected.svg') +const dot = require('../../assets/dotRinkeby.svg') + +type Props = { + provider: string, + connected: boolean, + network: string, + userAddress: string, + classes: Object, +} + +const openIconStyle = { + height: '16px', + color: '#467ee5', +} + +const styles = () => ({ + root: { + backgroundColor: 'white', + padding: 0, + boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)', + }, + container: { + padding: `${md} 12px`, + }, + identicon: { + justifyContent: 'center', + padding: `0 ${md}`, + }, + user: { + alignItems: 'center', + backgroundColor: background, + padding: sm, + }, + details: { + padding: `0 ${lg}`, + height: '20px', + alignItems: 'center', + }, + address: { + flexGrow: 1, + textAlign: 'center', + }, + disconnect: { + padding: `${md} 32px`, + }, + logo: { + margin: '0px 2px', + }, +}) + +const UserDetails = ({ + provider, connected, network, userAddress, classes, +}: Props) => { + const status = connected ? 'Connected' : 'Not connected' + + return ( + +
+ + + + + {userAddress} + + +
+ + + Status + + Status connected + + + {status} + + + + + + Client + + Metamask client + + + {upperFirst(provider)} + + + + + + Netowrk + + Network + + {upperFirst(network)} + + + + + + + + ) +} + +export default withStyles(styles)(UserDetails) diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx new file mode 100644 index 00000000..52dbebe5 --- /dev/null +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -0,0 +1,58 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import Paragraph from '~/components/layout/Paragraph' +import Col from '~/components/layout/Col' +import Img from '~/components/layout/Img' +import { sm } from '~/theme/variables' +import Identicon from '~/components/Identicon' + +const connectedLogo = require('../../assets/connected.svg') + +type Props = { + provider: string, + network: string, + classes: Object, + userAddress: string, + connected: boolean, +} + +const styles = () => ({ + network: { + fontFamily: 'Montserrat, sans-serif', + }, + logo: { + top: '10px', + position: 'relative', + right: '13px', + }, + account: { + paddingRight: sm, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + address: { + letterSpacing: '-0.5px', + }, +}) + +const ProviderInfo = ({ + provider, network, userAddress, connected, classes, +}: Props) => { + const providerText = connected ? `${provider} [${network}]` : 'Not connected' + const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' + + return ( + + + Status connected + + {providerText} + {cutAddress} + + + ) +} + +export default withStyles(styles)(ProviderInfo) From f8d73a5025dd995faa2bcbe0a54e6fe3f87c2031 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 17:11:29 +0200 Subject: [PATCH 63/97] Adding fancy variable color --- src/theme/variables.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/theme/variables.js b/src/theme/variables.js index 22d1250b..53953062 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -5,6 +5,7 @@ const primary = '#4a5579' const secondary = '#13222b' const tertiary = '#f6f9fc' const fontColor = '#4a5579' +const fancyColor = '#fd7890' const xs = '4px' const sm = '8px' const md = '16px' @@ -17,6 +18,7 @@ module.exports = Object.assign({}, { tertiary, background, fontColor, + fancy: fancyColor, xs, sm, md, From 0c1325627ec70808f0cf5660d76f7c241c6ba4cb Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 17:11:49 +0200 Subject: [PATCH 64/97] Using Paragraph's color attr in layout component --- src/components/layout/Paragraph/index.js | 4 ++-- src/components/layout/Paragraph/index.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index 7792e774..fadde8ea 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -10,7 +10,7 @@ type Props = { noMargin?: boolean, bold?: boolean, size?: 'sm' | 'md' | 'lg' | 'xl', - color?: 'soft' | 'medium' | 'dark' | 'primary', + color?: 'soft' | 'medium' | 'dark' | 'primary' | 'fancy', transform?: 'capitalize' | 'lowercase' | 'uppercase', children: React$Node, className?: string, @@ -23,7 +23,7 @@ class Paragraph extends React.PureComponent { } = this.props return ( -

+

{ children }

) diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 9b1bc7a1..274848d8 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -19,6 +19,10 @@ color: #00a6c4; } +.fancy { + color: $fancy; +} + .capitalize { text-transform: capitalize } From e73c5b36e42d469fc4bcaf2a165cfc66d3177261 Mon Sep 17 00:00:00 2001 From: apanizo Date: Tue, 4 Sep 2018 17:12:20 +0200 Subject: [PATCH 65/97] Styles when provider is disconnected --- .../component/ProviderDisconnected/index.jsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/components/Header/component/ProviderDisconnected/index.jsx diff --git a/src/components/Header/component/ProviderDisconnected/index.jsx b/src/components/Header/component/ProviderDisconnected/index.jsx new file mode 100644 index 00000000..4ccce09b --- /dev/null +++ b/src/components/Header/component/ProviderDisconnected/index.jsx @@ -0,0 +1,43 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import Paragraph from '~/components/layout/Paragraph' +import Col from '~/components/layout/Col' +import Img from '~/components/layout/Img' +import { type Open } from '~/components/hoc/OpenHoc' +import { sm, md } from '~/theme/variables' + +const connectWallet = require('../../assets/connect-wallet.svg') + +type Props = Open & { + classes: Object, + children: Function, +} + +const styles = () => ({ + network: { + fontFamily: 'Montserrat, sans-serif', + }, + account: { + paddingRight: md, + paddingLeft: sm, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + connect: { + letterSpacing: '-0.5px', + }, +}) + +const ProviderDesconnected = ({ classes }: Props) => ( + + Status connected + + Not Connected + Connect Wallet + + +) + +export default withStyles(styles)(ProviderDesconnected) From b97a7220681dedb6f61ae0d70097407aa00cc0cf Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 10:36:48 +0200 Subject: [PATCH 66/97] Moving List wrapper to Provider --- src/components/Header/component/Layout.jsx | 18 +++-- .../ProviderDisconnected/ConnectDetails.jsx | 67 +++++++++++++++++++ .../component/ProviderInfo/UserDetails.jsx | 10 +-- 3 files changed, 83 insertions(+), 12 deletions(-) create mode 100644 src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index bb708467..224a62cc 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -1,14 +1,15 @@ // @flow import * as React from 'react' import { withStyles } from '@material-ui/core/styles' +import Grow from '@material-ui/core/Grow' +import ClickAwayListener from '@material-ui/core/ClickAwayListener' +import Popper from '@material-ui/core/Popper' +import List from '@material-ui/core/List' import Divider from '~/components/layout/Divider' import openHoc, { type Open } from '~/components/hoc/OpenHoc' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Row from '~/components/layout/Row' -import Grow from '@material-ui/core/Grow' -import ClickAwayListener from '@material-ui/core/ClickAwayListener' -import Popper from '@material-ui/core/Popper' import Spacer from '~/components/Spacer' import { border, sm, md } from '~/theme/variables' import Provider from './Provider' @@ -22,6 +23,13 @@ type Props = Open & { } const styles = () => ({ + root: { + backgroundColor: 'white', + padding: 0, + boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)', + minWidth: '280px', + left: '4px', + }, summary: { borderBottom: `solid 2px ${border}`, alignItems: 'center', @@ -53,7 +61,9 @@ const Layout = openHoc(({ {...TransitionProps} > - {providerDetails} + + {providerDetails} + )} diff --git a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx new file mode 100644 index 00000000..907369ab --- /dev/null +++ b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx @@ -0,0 +1,67 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import Paragraph from '~/components/layout/Paragraph' +import Button from '~/components/layout/Button' +import Hairline from '~/components/layout/Hairline' +import Img from '~/components/layout/Img' +import Row from '~/components/layout/Row' +import { sm, md, lg, background } from '~/theme/variables' + +const connectedLogo = require('../../assets/connect-wallet.svg') + +type Props = { + classes: Object, +} + +const styles = () => ({ + container: { + padding: `${md} 12px`, + }, + user: { + alignItems: 'center', + backgroundColor: background, + padding: sm, + }, + details: { + padding: `0 ${lg}`, + height: '20px', + alignItems: 'center', + }, + address: { + flexGrow: 1, + textAlign: 'center', + }, + disconnect: { + padding: `${md} 32px`, + }, + logo: { + margin: '0px 2px', + }, +}) + +const ConnectDetails = ({ classes }: Props) => ( + +
+ + Connect a Wallet + +
+ + Status connected + + + + + + +) + +export default withStyles(styles)(ConnectDetails) diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx index fcb7566b..82ce6ae3 100644 --- a/src/components/Header/component/ProviderInfo/UserDetails.jsx +++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx @@ -4,7 +4,6 @@ import OpenInNew from '@material-ui/icons/OpenInNew' import { withStyles } from '@material-ui/core/styles' import Paragraph from '~/components/layout/Paragraph' import Button from '~/components/layout/Button' -import List from '@material-ui/core/List' import Identicon from '~/components/Identicon' import Bold from '~/components/layout/Bold' import Hairline from '~/components/layout/Hairline' @@ -32,11 +31,6 @@ const openIconStyle = { } const styles = () => ({ - root: { - backgroundColor: 'white', - padding: 0, - boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)', - }, container: { padding: `${md} 12px`, }, @@ -72,7 +66,7 @@ const UserDetails = ({ const status = connected ? 'Connected' : 'Not connected' return ( - +
@@ -124,7 +118,7 @@ const UserDetails = ({ DISCONNECT - + ) } From ac84770605788912311d0d447ecd921f288d08b7 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 11:34:36 +0200 Subject: [PATCH 67/97] Normalizing weight fonts to 300, 400 and 700 --- src/components/layout/Heading/index.scss | 6 ++++-- src/components/layout/Paragraph/index.js | 9 ++++++--- src/components/layout/Paragraph/index.scss | 12 ++++++++++-- src/routes/open/components/SafeForm/Owners/index.jsx | 2 +- src/theme/variables.js | 9 +++++---- 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/layout/Heading/index.scss b/src/components/layout/Heading/index.scss index e4f156eb..34bed43f 100644 --- a/src/components/layout/Heading/index.scss +++ b/src/components/layout/Heading/index.scss @@ -13,17 +13,19 @@ .h2 { line-height: 28px; - font-size: $largeFontSize; + font-size: $(fontSizeHeadingMd)px; } .h3 { line-height: 21px; - font-size: $mediumFontSize; font-weight: bold; font-family: 'Roboto Mono', monospace; + font-size: $(fontSizeHeadingSm)px; } .h4 { + line-height: 21px; + font-family: 'Roboto Mono', monospace; font-size: $(fontSizeHeadingXs)px; } diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index fadde8ea..1fef6fcf 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -8,7 +8,7 @@ const cx = classNames.bind(styles) type Props = { align?: 'right' | 'center' | 'left', noMargin?: boolean, - bold?: boolean, + weight?: 'light' | 'regular' | 'bold', size?: 'sm' | 'md' | 'lg' | 'xl', color?: 'soft' | 'medium' | 'dark' | 'primary' | 'fancy', transform?: 'capitalize' | 'lowercase' | 'uppercase', @@ -19,11 +19,14 @@ type Props = { class Paragraph extends React.PureComponent { render() { const { - bold, children, color, align, size, transform, noMargin, className, ...props + weight, children, color, align, size, transform, noMargin, className, ...props } = this.props return ( -

+

{ children }

) diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 274848d8..db63986b 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -63,10 +63,18 @@ font-size: $largeFontSize; } -.lg { +.xl { font-size: $extraLargeFontSize; } +.light { + font-weight: $lightFont; +} + +.regular { + font-weight: $regularFont; +} + .bold { - font-weight: bold; + font-weight: $boldFont; } \ No newline at end of file diff --git a/src/routes/open/components/SafeForm/Owners/index.jsx b/src/routes/open/components/SafeForm/Owners/index.jsx index fa51f1b3..edf69afd 100644 --- a/src/routes/open/components/SafeForm/Owners/index.jsx +++ b/src/routes/open/components/SafeForm/Owners/index.jsx @@ -54,7 +54,7 @@ const Owners = (props: Props) => { - Owner Nº {index + 1} + Owner Nº {index + 1} Date: Wed, 5 Sep 2018 11:37:35 +0200 Subject: [PATCH 68/97] Adding RobotoMono font to Storybook --- .storybook/preview-head.html | 1 + src/components/Header/component/ProviderDisconnected/index.jsx | 2 +- src/components/Header/component/ProviderInfo/index.jsx | 2 +- src/routes/welcome/components/Layout.jsx | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 9e769352..a7ad661a 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1,3 @@ + \ No newline at end of file diff --git a/src/components/Header/component/ProviderDisconnected/index.jsx b/src/components/Header/component/ProviderDisconnected/index.jsx index 4ccce09b..afa81d48 100644 --- a/src/components/Header/component/ProviderDisconnected/index.jsx +++ b/src/components/Header/component/ProviderDisconnected/index.jsx @@ -34,7 +34,7 @@ const ProviderDesconnected = ({ classes }: Props) => ( Status connected - Not Connected + Not Connected Connect Wallet diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx index 52dbebe5..34a48150 100644 --- a/src/components/Header/component/ProviderInfo/index.jsx +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -48,7 +48,7 @@ const ProviderInfo = ({ Status connected - {providerText} + {providerText} {cutAddress} diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx index 9aab2dcb..c9cb10a7 100644 --- a/src/routes/welcome/components/Layout.jsx +++ b/src/routes/welcome/components/Layout.jsx @@ -64,7 +64,7 @@ const Welcome = ({ provider }: Props) => ( Safe Team Edition - + The Gnosis Safe Team Edition is geared towards teams managing
shared crypto funds. It is an improvement of the existing Gnosis
MultiSig wallet with redesigned smart contracts, cheaper setup and
From 1cb4f09ca338476bb19a80ae4f172dce5a58d3fe Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 11:47:49 +0200 Subject: [PATCH 69/97] Adding Roboto Mono 400 and 700 fonts --- public/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 5d742ea2..e34ea631 100644 --- a/public/index.html +++ b/public/index.html @@ -4,8 +4,8 @@ - - + + Multisig Safe From 9f2fa2e9a2b75f7cae593b19c690d6f28c136a98 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 12:26:10 +0200 Subject: [PATCH 70/97] More adjustments on the welcome route --- src/routes/welcome/components/Layout.jsx | 6 +++--- src/theme/mui.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/routes/welcome/components/Layout.jsx b/src/routes/welcome/components/Layout.jsx index c9cb10a7..2fec8321 100644 --- a/src/routes/welcome/components/Layout.jsx +++ b/src/routes/welcome/components/Layout.jsx @@ -33,10 +33,10 @@ export const CreateSafe = ({ size, provider }: SafeProps) => ( size={size || 'medium'} color="primary" disabled={!provider} - minWidth={275} + minWidth={240} > Safe -
Create a new Safe
+
Create new Safe
) @@ -48,7 +48,7 @@ export const LoadSafe = ({ size, provider }: SafeProps) => ( size={size || 'medium'} color="primary" disabled={!provider} - minWidth={275} + minWidth={240} > Safe
Load existing Safe
diff --git a/src/theme/mui.js b/src/theme/mui.js index fb3a0d90..300cf447 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -1,7 +1,7 @@ // @flow import red from '@material-ui/core/colors/red' import { createMuiTheme } from '@material-ui/core/styles' -import { mediumFontSize, primary, secondary, md, xl } from './variables' +import { mediumFontSize, primary, secondary, md, lg } from './variables' export type WithStyles = { classes: Object, @@ -35,7 +35,7 @@ export default createMuiTheme({ backgroundColor: '#467ee5', }, sizeLarge: { - padding: `${md} ${xl}`, + padding: `${md} ${lg}`, minHeight: '52px', fontSize: mediumFontSize, }, From 9c4d9f97afefe821097d862e179e5c18ba94d664 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 12:42:59 +0200 Subject: [PATCH 71/97] Adding RobotoMono 500 as darkness font in Roboto family --- .storybook/preview-head.html | 2 +- public/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index a7ad661a..52da7032 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/public/index.html b/public/index.html index e34ea631..9e3064f4 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ - + Multisig Safe From 22f32d77ccb3791ef6b9d438964e1f4679461f88 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 12:43:20 +0200 Subject: [PATCH 72/97] Added bolder weight semantic style in paragraph --- src/components/layout/Paragraph/index.js | 2 +- src/components/layout/Paragraph/index.scss | 4 ++++ src/theme/variables.js | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index 1fef6fcf..6afd47e0 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -8,7 +8,7 @@ const cx = classNames.bind(styles) type Props = { align?: 'right' | 'center' | 'left', noMargin?: boolean, - weight?: 'light' | 'regular' | 'bold', + weight?: 'light' | 'regular' | 'bolder' | 'bold', size?: 'sm' | 'md' | 'lg' | 'xl', color?: 'soft' | 'medium' | 'dark' | 'primary' | 'fancy', transform?: 'capitalize' | 'lowercase' | 'uppercase', diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index db63986b..486ed979 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -75,6 +75,10 @@ font-weight: $regularFont; } +.bolder { + font-weight: $bolderFont; +} + .bold { font-weight: $boldFont; } \ No newline at end of file diff --git a/src/theme/variables.js b/src/theme/variables.js index 965b0d7c..66be6df2 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -31,6 +31,7 @@ module.exports = Object.assign({}, { fontSizeHeadingLg: 32, lightFont: 300, regularFont: 400, + bolderFont: 500, boldFont: 700, smallFontSize: '11px', mediumFontSize: '13px', From 1ca39dff58803fd942f0563a2d58254b0cdfeb73 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 12:43:35 +0200 Subject: [PATCH 73/97] Fix margin lg in row --- src/components/layout/Row/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Row/index.scss b/src/components/layout/Row/index.scss index de411935..519162c3 100644 --- a/src/components/layout/Row/index.scss +++ b/src/components/layout/Row/index.scss @@ -16,7 +16,7 @@ } .marginLg { - margin-bottom: $xl; + margin-bottom: $lg; } .marginXl { From bcc0ea71c6b2f5286ee2fb29cea48b7e85ef35aa Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 12:44:07 +0200 Subject: [PATCH 74/97] Styles when provider is not connected --- .../ProviderDisconnected/ConnectDetails.jsx | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx index 907369ab..d8975bdb 100644 --- a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx +++ b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx @@ -3,10 +3,9 @@ import * as React from 'react' import { withStyles } from '@material-ui/core/styles' import Paragraph from '~/components/layout/Paragraph' import Button from '~/components/layout/Button' -import Hairline from '~/components/layout/Hairline' import Img from '~/components/layout/Img' import Row from '~/components/layout/Row' -import { sm, md, lg, background } from '~/theme/variables' +import { md } from '~/theme/variables' const connectedLogo = require('../../assets/connect-wallet.svg') @@ -18,24 +17,18 @@ const styles = () => ({ container: { padding: `${md} 12px`, }, - user: { - alignItems: 'center', - backgroundColor: background, - padding: sm, + logo: { + justifyContent: 'center', }, - details: { - padding: `0 ${lg}`, - height: '20px', - alignItems: 'center', - }, - address: { + text: { + letterSpacing: '-0.6px', flexGrow: 1, textAlign: 'center', }, - disconnect: { + connect: { padding: `${md} 32px`, }, - logo: { + img: { margin: '0px 2px', }, }) @@ -43,15 +36,14 @@ const styles = () => ({ const ConnectDetails = ({ classes }: Props) => (
- - Connect a Wallet + + Connect a Wallet
- - Status connected + + Connect a Wallet - - + diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx index 34a48150..2961bfb9 100644 --- a/src/components/Header/component/ProviderInfo/index.jsx +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -6,6 +6,7 @@ import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import { sm } from '~/theme/variables' import Identicon from '~/components/Identicon' +import { shortVersionOf } from '~/logic/wallets/ethAddresses' const connectedLogo = require('../../assets/connected.svg') @@ -41,7 +42,7 @@ const ProviderInfo = ({ provider, network, userAddress, connected, classes, }: Props) => { const providerText = connected ? `${provider} [${network}]` : 'Not connected' - const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' + const cutAddress = connected ? shortVersionOf(userAddress, 6) : '' return ( From 50bdc27491b5adbdf820763edbb8d65530a1f8db Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 16:04:41 +0200 Subject: [PATCH 80/97] Updated Footer and made Paragraph more robust --- src/components/Footer/index.jsx | 5 +++-- src/components/layout/Paragraph/index.js | 2 +- src/components/layout/Paragraph/index.scss | 7 ++----- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx index 92c158da..744e298a 100644 --- a/src/components/Footer/index.jsx +++ b/src/components/Footer/index.jsx @@ -2,16 +2,17 @@ import React from 'react' import Block from '~/components/layout/Block' import Link from '~/components/layout/Link' +import Paragraph from '~/components/layout/Paragraph' import { WELCOME_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes' import styles from './index.scss' const Footer = () => ( - Welcome + Welcome - Safe List + Safe List ) diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index 6afd47e0..d50b9e4f 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -10,7 +10,7 @@ type Props = { noMargin?: boolean, weight?: 'light' | 'regular' | 'bolder' | 'bold', size?: 'sm' | 'md' | 'lg' | 'xl', - color?: 'soft' | 'medium' | 'dark' | 'primary' | 'fancy', + color?: 'soft' | 'medium' | 'dark' | 'fancy', transform?: 'capitalize' | 'lowercase' | 'uppercase', children: React$Node, className?: string, diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 486ed979..107d09da 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -1,6 +1,7 @@ .paragraph { text-overflow: ellipsis; - overflow-x: inherit; + overflow-x: inherit; + color: $fontColor; } .soft { @@ -15,10 +16,6 @@ color: black; } -.primary { - color: #00a6c4; -} - .fancy { color: $fancy; } From 2133d1315340157ce0ea13164921e1f7b078f2d6 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 16:34:50 +0200 Subject: [PATCH 81/97] Updating styles of NotConnected provider component --- src/components/Footer/index.jsx | 4 ++-- .../component/ProviderDisconnected/ConnectDetails.jsx | 9 ++++++--- .../Header/component/ProviderInfo/UserDetails.jsx | 2 +- src/components/layout/Paragraph/index.js | 2 +- src/components/layout/Paragraph/index.scss | 9 ++++++++- 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx index 744e298a..2c5882c5 100644 --- a/src/components/Footer/index.jsx +++ b/src/components/Footer/index.jsx @@ -9,10 +9,10 @@ import styles from './index.scss' const Footer = () => ( - Welcome + Welcome - Safe List + Safe List ) diff --git a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx index d8975bdb..ba159f75 100644 --- a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx +++ b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx @@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph' import Button from '~/components/layout/Button' import Img from '~/components/layout/Img' import Row from '~/components/layout/Row' -import { md } from '~/theme/variables' +import { md, lg } from '~/theme/variables' const connectedLogo = require('../../assets/connect-wallet.svg') @@ -26,7 +26,10 @@ const styles = () => ({ textAlign: 'center', }, connect: { - padding: `${md} 32px`, + padding: `${md} ${lg}`, + }, + connectText: { + letterSpacing: '1px', }, img: { margin: '0px 2px', @@ -50,7 +53,7 @@ const ConnectDetails = ({ classes }: Props) => ( color="primary" fullWidth > - CONNECT + CONNECT diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx index 8d7202bb..a21f1a07 100644 --- a/src/components/Header/component/ProviderInfo/UserDetails.jsx +++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx @@ -129,7 +129,7 @@ const UserDetails = ({ color="primary" fullWidth > - DISCONNECT + DISCONNECT diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index d50b9e4f..ceb13185 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -10,7 +10,7 @@ type Props = { noMargin?: boolean, weight?: 'light' | 'regular' | 'bolder' | 'bold', size?: 'sm' | 'md' | 'lg' | 'xl', - color?: 'soft' | 'medium' | 'dark' | 'fancy', + color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary', transform?: 'capitalize' | 'lowercase' | 'uppercase', children: React$Node, className?: string, diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 107d09da..56c13001 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -1,7 +1,6 @@ .paragraph { text-overflow: ellipsis; overflow-x: inherit; - color: $fontColor; } .soft { @@ -20,6 +19,14 @@ color: $fancy; } +.primary { + color: $fontColor, +} + +.white { + color: white; +} + .capitalize { text-transform: capitalize } From 2ec8b3ec60acb453b89a2175ad34c37f4badf9ed Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 5 Sep 2018 17:10:06 +0200 Subject: [PATCH 82/97] Adding flex basis to Header's provider --- src/components/Header/component/Layout.stories.js | 8 ++++---- src/components/Header/component/Provider.jsx | 3 ++- .../Header/component/ProviderDisconnected/index.jsx | 6 +++--- src/components/Header/component/ProviderInfo/index.jsx | 1 + 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/Header/component/Layout.stories.js b/src/components/Header/component/Layout.stories.js index b3196d93..f4772e30 100644 --- a/src/components/Header/component/Layout.stories.js +++ b/src/components/Header/component/Layout.stories.js @@ -14,10 +14,10 @@ const FrameDecorator = story => (
) -storiesOf('Components', module) +storiesOf('Components /Header', module) .addDecorator(FrameDecorator) - .add('Connected Header', () => { - const provider = 'METAMASK' + .add('Connected', () => { + const provider = 'Metamask' const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe' const network = 'RINKEBY' const info = @@ -25,7 +25,7 @@ storiesOf('Components', module) return }) - .add('Disconnected Header', () => { + .add('Disconnected', () => { const info = const details = diff --git a/src/components/Header/component/Provider.jsx b/src/components/Header/component/Provider.jsx index 9abad16b..ca18ae35 100644 --- a/src/components/Header/component/Provider.jsx +++ b/src/components/Header/component/Provider.jsx @@ -20,11 +20,12 @@ const styles = () => ({ height: '100%', display: 'flex', alignItems: 'center', + flexBasis: '250px', }, provider: { padding: `${sm} ${md}`, alignItems: 'center', - flex: '0 1 auto', + flex: '1 1 auto', display: 'flex', cursor: 'pointer', }, diff --git a/src/components/Header/component/ProviderDisconnected/index.jsx b/src/components/Header/component/ProviderDisconnected/index.jsx index afa81d48..9c3bc715 100644 --- a/src/components/Header/component/ProviderDisconnected/index.jsx +++ b/src/components/Header/component/ProviderDisconnected/index.jsx @@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import { type Open } from '~/components/hoc/OpenHoc' -import { sm, md } from '~/theme/variables' +import { md } from '~/theme/variables' const connectWallet = require('../../assets/connect-wallet.svg') @@ -19,11 +19,11 @@ const styles = () => ({ fontFamily: 'Montserrat, sans-serif', }, account: { - paddingRight: md, - paddingLeft: sm, + padding: `0 ${md}`, display: 'flex', flexDirection: 'column', justifyContent: 'center', + flexGrow: 1, }, connect: { letterSpacing: '-0.5px', diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx index 2961bfb9..42504f7d 100644 --- a/src/components/Header/component/ProviderInfo/index.jsx +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -32,6 +32,7 @@ const styles = () => ({ display: 'flex', flexDirection: 'column', justifyContent: 'center', + flexGrow: 1, }, address: { letterSpacing: '-0.5px', From 77ae14e98f18927b3e4f8ce4195053b4227b36dc Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 10:53:40 +0200 Subject: [PATCH 83/97] Added warning color to theme variables --- src/components/Footer/index.stories.js | 4 ++-- src/theme/variables.js | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Footer/index.stories.js b/src/components/Footer/index.stories.js index 57711930..1af60805 100644 --- a/src/components/Footer/index.stories.js +++ b/src/components/Footer/index.stories.js @@ -11,6 +11,6 @@ const FrameDecorator = story => (
) -storiesOf('Components', module) +storiesOf('Components /Footer', module) .addDecorator(FrameDecorator) - .add('Footer', () => ) + .add('Loaded', () => ) diff --git a/src/theme/variables.js b/src/theme/variables.js index b1721dec..94185584 100644 --- a/src/theme/variables.js +++ b/src/theme/variables.js @@ -6,6 +6,7 @@ const secondary = '#13222b' const tertiary = '#f6f9fc' const fontColor = '#4a5579' const fancyColor = '#fd7890' +const warningColor = '#c97c05' const xs = '4px' const sm = '8px' const md = '16px' @@ -20,6 +21,7 @@ module.exports = Object.assign({}, { background, fontColor, fancy: fancyColor, + warning: warningColor, xs, sm, md, From d0ab6f4581ca3e3028be1574a62c6e587826f34f Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 10:54:48 +0200 Subject: [PATCH 84/97] Adding warning color to Paragrpah layout component --- src/components/layout/Paragraph/index.js | 2 +- src/components/layout/Paragraph/index.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index ceb13185..a9f08efc 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -10,7 +10,7 @@ type Props = { noMargin?: boolean, weight?: 'light' | 'regular' | 'bolder' | 'bold', size?: 'sm' | 'md' | 'lg' | 'xl', - color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary', + color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'warning', transform?: 'capitalize' | 'lowercase' | 'uppercase', children: React$Node, className?: string, diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 56c13001..3152a73f 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -19,6 +19,9 @@ color: $fancy; } +.warning { + color: $warning; +} .primary { color: $fontColor, } From 00caa6e9512f4bc7f91008cb994c60bab67815e3 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 10:55:31 +0200 Subject: [PATCH 85/97] Added loaded and avaialble provider selector. Updated Header component --- src/components/Header/index.jsx | 61 ++++++++-------------- src/components/Header/selector.js | 5 +- src/logic/wallets/store/selectors/index.js | 9 +++- 3 files changed, 33 insertions(+), 42 deletions(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 13ad649f..d8d8ec81 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -15,13 +15,30 @@ type Props = { fetchProvider: Function, userAddress: string, network: string, - connected: boolean, + loaded: boolean, + available: boolean, } type State = { hasError: boolean, } +const getProviderInfoBased = (hasError, loaded, available, provider, network, userAddress) => { + if (hasError || !loaded) { + return + } + + return +} + +const getProviderDetailsBased = (hasError, loaded, available, provider, network, userAddress) => { + if (hasError || !loaded) { + return + } + + return +} + class Header extends React.PureComponent { state = { hasError: false, @@ -37,46 +54,14 @@ class Header extends React.PureComponent { logComponentStack(error, info) } - getProviderInfoBased = (hasError, disconnected) => { - if (hasError) { - // return - } - - if (disconnected) { - return - } - - const { - provider, network, userAddress, connected, - } = this.props - - return - } - - getProviderDetailsBased = (hasError, disconnected) => { - if (hasError) { - // return - } - - if (disconnected) { - return - } - - const { - provider, network, userAddress, connected, - } = this.props - - return - } - render() { - const { connected } = this.props - const { hasError } = this.state - const providerDisconnected = !hasError && !connected + const { + loaded, available, provider, network, userAddress, + } = this.props - const info = this.getProviderInfoBased(hasError, providerDisconnected) - const details = this.getProviderDetailsBased(hasError, providerDisconnected) + const info = getProviderInfoBased(hasError, loaded, available, provider, network, userAddress) + const details = getProviderDetailsBased(hasError, loaded, available, provider, network, userAddress) return } diff --git a/src/components/Header/selector.js b/src/components/Header/selector.js index 2148b817..5cef6116 100644 --- a/src/components/Header/selector.js +++ b/src/components/Header/selector.js @@ -1,10 +1,11 @@ // @flow import { createStructuredSelector } from 'reselect' -import { providerNameSelector, userAccountSelector, networkSelector, connectedSelector } from '~/logic/wallets/store/selectors' +import { providerNameSelector, userAccountSelector, networkSelector, availableSelector, loadedSelector } from '~/logic/wallets/store/selectors' export default createStructuredSelector({ provider: providerNameSelector, userAddress: userAccountSelector, network: networkSelector, - connected: connectedSelector, + loaded: loadedSelector, + available: availableSelector, }) diff --git a/src/logic/wallets/store/selectors/index.js b/src/logic/wallets/store/selectors/index.js index e479c125..91f4a8a4 100644 --- a/src/logic/wallets/store/selectors/index.js +++ b/src/logic/wallets/store/selectors/index.js @@ -36,7 +36,12 @@ export const networkSelector = createSelector( }, ) -export const connectedSelector = createSelector( +export const loadedSelector = createSelector( providerSelector, - (provider: Provider) => provider.get('loaded') && provider.get('available'), + (provider: Provider) => provider.get('loaded'), +) + +export const availableSelector = createSelector( + providerSelector, + (provider: Provider) => provider.get('available'), ) From 3040c6d6ea16326eb7c030cc17e2a470f310141f Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 10:55:47 +0200 Subject: [PATCH 86/97] Added connection warning icon --- src/components/Header/assets/connected-error.svg | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/components/Header/assets/connected-error.svg diff --git a/src/components/Header/assets/connected-error.svg b/src/components/Header/assets/connected-error.svg new file mode 100644 index 00000000..8c351246 --- /dev/null +++ b/src/components/Header/assets/connected-error.svg @@ -0,0 +1,6 @@ + + + + + + From 4029f23c90280697b0c794706a6129d5a5c8465e Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 10:56:44 +0200 Subject: [PATCH 87/97] Logic extension to ProviderConnected component to support not available proivder --- .../Header/component/ProviderInfo/UserDetails.jsx | 7 +++++-- .../Header/component/ProviderInfo/index.jsx | 11 +++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx index a21f1a07..fa17806a 100644 --- a/src/components/Header/component/ProviderInfo/UserDetails.jsx +++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx @@ -17,6 +17,7 @@ import { shortVersionOf } from '~/logic/wallets/ethAddresses' const metamask = require('../../assets/metamask.svg') const connectedLogo = require('../../assets/connected.svg') +const connectedWarning = require('../../assets/connected-error.svg') const dot = require('../../assets/dotRinkeby.svg') type Props = { @@ -78,6 +79,8 @@ const UserDetails = ({ }: Props) => { const status = connected ? 'Connected' : 'Not connected' const address = shortVersionOf(userAddress, 6) + const connectionLogo = connected ? connectedLogo : connectedWarning + const color = connected ? 'primary' : 'warning' return ( @@ -94,8 +97,8 @@ const UserDetails = ({ Status - Status connected - + Conection Status + {status} diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx index 42504f7d..7e880b17 100644 --- a/src/components/Header/component/ProviderInfo/index.jsx +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -9,6 +9,7 @@ import Identicon from '~/components/Identicon' import { shortVersionOf } from '~/logic/wallets/ethAddresses' const connectedLogo = require('../../assets/connected.svg') +const connectedWarning = require('../../assets/connected-error.svg') type Props = { provider: string, @@ -42,16 +43,18 @@ const styles = () => ({ const ProviderInfo = ({ provider, network, userAddress, connected, classes, }: Props) => { - const providerText = connected ? `${provider} [${network}]` : 'Not connected' - const cutAddress = connected ? shortVersionOf(userAddress, 6) : '' + const providerText = `${provider} [${network}]` + const cutAddress = connected ? shortVersionOf(userAddress, 6) : 'Connection Error' + const color = connected ? 'primary' : 'warning' + const logo = connected ? connectedLogo : connectedWarning return ( - Status connected + Connection status {providerText} - {cutAddress} + {cutAddress} ) From 41b951c3fd598bda0209b72584d6bf3933d6c6f5 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 10:57:09 +0200 Subject: [PATCH 88/97] Included Connection problems story --- src/components/Header/component/Layout.stories.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/Header/component/Layout.stories.js b/src/components/Header/component/Layout.stories.js index f4772e30..354ee223 100644 --- a/src/components/Header/component/Layout.stories.js +++ b/src/components/Header/component/Layout.stories.js @@ -31,3 +31,17 @@ storiesOf('Components /Header', module) return }) + .add('Connection Error', () => { + const provider = 'Metamask' + const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe' + const network = 'RINKEBY' + const info = + const details = () + + return + }) From a6ea8348743d0cd409efd3c9acd93757b57c26ca Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 12:32:05 +0200 Subject: [PATCH 89/97] Added removeProvider redux action --- .../wallets/store/actions/removeProvider.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/logic/wallets/store/actions/removeProvider.js diff --git a/src/logic/wallets/store/actions/removeProvider.js b/src/logic/wallets/store/actions/removeProvider.js new file mode 100644 index 00000000..c721cd32 --- /dev/null +++ b/src/logic/wallets/store/actions/removeProvider.js @@ -0,0 +1,17 @@ +// @flow +import type { Dispatch as ReduxDispatch } from 'redux' +import { makeProvider, type ProviderProps, type Provider } from '~/logic/wallets/store/model/provider' +import addProvider from './addProvider' + +export default () => async (dispatch: ReduxDispatch<*>) => { + const providerProps: ProviderProps = { + name: '', + available: false, + loaded: false, + account: '', + network: 0, + } + + const provider: Provider = makeProvider(providerProps) + dispatch(addProvider(provider)) +} From f61208d9147fb3f6ae93c9b4b6725b25790be336 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 12:32:37 +0200 Subject: [PATCH 90/97] Updated providerName selector to retrieve the name even if provider is not available --- src/logic/wallets/store/selectors/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/logic/wallets/store/selectors/index.js b/src/logic/wallets/store/selectors/index.js index 91f4a8a4..17fdf1f3 100644 --- a/src/logic/wallets/store/selectors/index.js +++ b/src/logic/wallets/store/selectors/index.js @@ -19,10 +19,8 @@ export const providerNameSelector = createSelector( providerSelector, (provider: Provider) => { const name = provider.get('name') - const loaded = provider.get('loaded') - const available = provider.get('available') - return loaded && available ? name.toLowerCase() : undefined + return name ? name.toLowerCase() : undefined }, ) From 2d443dc4b2d94acc2e0d0344fa33f28050dd0208 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 12:33:06 +0200 Subject: [PATCH 91/97] Fix typo on css and exporting outside removeProvider action --- src/components/layout/Paragraph/index.scss | 2 +- src/logic/wallets/store/actions/index.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 3152a73f..fcbadac8 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -23,7 +23,7 @@ color: $warning; } .primary { - color: $fontColor, + color: $fontColor; } .white { diff --git a/src/logic/wallets/store/actions/index.js b/src/logic/wallets/store/actions/index.js index db7cb3e2..b4493b0c 100644 --- a/src/logic/wallets/store/actions/index.js +++ b/src/logic/wallets/store/actions/index.js @@ -3,3 +3,4 @@ export * from './addProvider' export * from './fetchProvider' export { default as addProvider } from './addProvider' export { default as fetchProvider } from './fetchProvider' +export { default as removeProvider } from './removeProvider' From befddc3b48465e690ed9778e194c9ce3b9a757b1 Mon Sep 17 00:00:00 2001 From: apanizo Date: Thu, 6 Sep 2018 12:33:38 +0200 Subject: [PATCH 92/97] Adding onConnect and onDisconnect to Header provider's components --- src/components/Header/actions.js | 8 ++- .../ProviderDisconnected/ConnectDetails.jsx | 4 +- .../component/ProviderInfo/UserDetails.jsx | 11 +-- .../Header/component/ProviderInfo/index.jsx | 3 +- src/components/Header/index.jsx | 70 +++++++++++-------- src/components/Header/selector.js | 8 +++ 6 files changed, 68 insertions(+), 36 deletions(-) diff --git a/src/components/Header/actions.js b/src/components/Header/actions.js index 32069043..e96a2379 100644 --- a/src/components/Header/actions.js +++ b/src/components/Header/actions.js @@ -1,6 +1,12 @@ // @flow -import { fetchProvider } from '~/logic/wallets/store/actions' +import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions' + +export type Actions = { + fetchProvider: typeof fetchProvider, + removeProvider: typeof removeProvider, +} export default { fetchProvider, + removeProvider, } diff --git a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx index ba159f75..f885f162 100644 --- a/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx +++ b/src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx @@ -11,6 +11,7 @@ const connectedLogo = require('../../assets/connect-wallet.svg') type Props = { classes: Object, + onConnect: Function, } const styles = () => ({ @@ -36,7 +37,7 @@ const styles = () => ({ }, }) -const ConnectDetails = ({ classes }: Props) => ( +const ConnectDetails = ({ classes, onConnect }: Props) => (
@@ -48,6 +49,7 @@ const ConnectDetails = ({ classes }: Props) => (