From 9f1f1df834beb04f696d6b3230b1432d0211d0b6 Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Fri, 26 Oct 2018 11:50:31 +0200 Subject: [PATCH 01/17] Makefile: added "sync-" prefix and default goal with usage description --- Makefile | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index e40ce5de..c7a2cc4d 100644 --- a/Makefile +++ b/Makefile @@ -10,19 +10,34 @@ build-%: # usage: # make stage-beta # make stage-stable -stage-%: +sync-stage-%: ./scripts/s3sync.sh stage $* # s3sync with beta.mytrezor.com # Upload build/beta only # usage: # make beta -beta: +sync-beta: ./scripts/s3sync.sh beta beta # s3sync with wallet.mytrezor.com # Upload build/stable only # usage: # make stable -stable: - ./scripts/s3sync.sh stable stable \ No newline at end of file +sync-stable: + ./scripts/s3sync.sh stable stable + +.DEFAULT_GOAL:= default +default: + @echo "Build:" + @echo "git checkout to desired branch (beta|stable)" + @echo " make build-beta" + @echo " make build-stable" + @echo "Sync:" + @echo "s3 sync desired build to server (beta.mytrezor.com|wallet.mytrezor.com)" + @echo " make sync-beta" + @echo " make sync-stable" + @echo "Staging:" + @echo "s3 sync desired build to stage server (stage.mytrezor.com)" + @echo " make sync-stage-beta" + @echo " make sync-stage-stable" \ No newline at end of file From cc8a21947f3149ea484d78b3e9103c66c4bff10b Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 26 Oct 2018 16:48:12 +0200 Subject: [PATCH 02/17] Add loading state for notification button --- .../components/NotificationButton/index.js | 71 ++++++++----------- src/components/Notification/index.js | 34 ++------- .../components/Group/index.js | 4 +- .../components/NotificationsGroups/index.js | 1 - src/utils/notification.js | 27 ++++++- 5 files changed, 62 insertions(+), 75 deletions(-) diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index bd9a4d4f..eca4d26c 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/src/components/Notification/components/NotificationButton/index.js @@ -5,6 +5,8 @@ import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; import colors from 'config/colors'; +import { getPrimaryColor, getSecondaryColor } from 'utils/notification'; +import Loader from 'components/Loader'; import { TRANSITION } from 'config/variables'; type Props = { @@ -18,56 +20,35 @@ type Props = { children: React.Node; }; +const LoaderContent = styled.div` + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + cursor: default; + background: ${props => getSecondaryColor(props.type)}; +`; + const Wrapper = styled.button` padding: 12px 58px; border-radius: 3px; background: transparent; font-size: 14px; + position: relative; font-weight: 300; cursor: pointer; - color: ${colors.WHITE}; - border: 0; + color: ${props => getPrimaryColor(props.type)}; + border: 1px solid ${props => getPrimaryColor(props.type)}; transition: ${TRANSITION.HOVER}; - ${props => props.type === 'info' && css` - border: 1px solid ${colors.INFO_PRIMARY}; - color: ${colors.INFO_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.INFO_PRIMARY}; - } - `} - - ${props => props.type === 'success' && css` - border: 1px solid ${colors.SUCCESS_PRIMARY}; - color: ${colors.SUCCESS_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.SUCCESS_PRIMARY}; - } - `} - - ${props => props.type === 'error' && css` - border: 1px solid ${colors.ERROR_PRIMARY}; - color: ${colors.ERROR_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.ERROR_PRIMARY}; - } - `} - - ${props => props.type === 'warning' && css` - border: 1px solid ${colors.WARNING_PRIMARY}; - color: ${colors.WARNING_PRIMARY}; - - &:hover { - color: ${colors.WHITE}; - background: ${colors.WARNING_PRIMARY}; - } - `} + &:hover { + color: ${colors.WHITE}; + background: ${props => getPrimaryColor(props.type)}; + } `; const IconWrapper = styled.span` @@ -75,13 +56,18 @@ const IconWrapper = styled.span` `; const NotificationButton = ({ - type, icon, onClick, children, + type, icon, onClick, children, isLoading, }: Props) => ( + {isLoading && ( + + + + )} {icon && ( props.type === 'info' && css` - color: ${colors.INFO_PRIMARY}; - background: ${colors.INFO_SECONDARY}; - `} - - ${props => props.type === 'success' && css` - color: ${colors.SUCCESS_PRIMARY}; - background: ${colors.SUCCESS_SECONDARY}; - `} - - ${props => props.type === 'warning' && css` - color: ${colors.WARNING_PRIMARY}; - background: ${colors.WARNING_SECONDARY}; - `} - - ${props => props.type === 'error' && css` - color: ${colors.ERROR_PRIMARY}; - background: ${colors.ERROR_SECONDARY}; - `} + color: ${props => getPrimaryColor(props.type)}; + background: ${props => getSecondaryColor(props.type)}; `; const Body = styled.div` @@ -119,7 +97,7 @@ const Notification = (props: Props): React$Element => { {props.cancelable && ( close()}> @@ -128,7 +106,7 @@ const Notification = (props: Props): React$Element => { diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js index 993cd420..9a0cb07f 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js @@ -5,7 +5,7 @@ import Icon from 'components/Icon'; import ICONS from 'config/icons'; import colors from 'config/colors'; import Notification from 'components/Notification'; -import { getIcon, getColor } from 'utils/notification'; +import { getIcon, getPrimaryColor } from 'utils/notification'; const Wrapper = styled.div``; @@ -65,7 +65,7 @@ class Group extends PureComponent { render() { const { type, groupNotifications, close } = this.props; - const color = getColor(type); + const color = getPrimaryColor(type); return ( {groupNotifications.length > 1 && ( diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js index e21a8762..91af9700 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js @@ -54,7 +54,6 @@ class NotificationsGroup extends PureComponent { // key: 5, // title: 'this is a title of warning notification as', // type: 'success', - // message: See transaction detail, // }, // { // key: 6, diff --git a/src/utils/notification.js b/src/utils/notification.js index 7567a542..26e4864f 100644 --- a/src/utils/notification.js +++ b/src/utils/notification.js @@ -1,7 +1,7 @@ import colors from 'config/colors'; import icons from 'config/icons'; -const getColor = (type) => { +const getPrimaryColor = (type) => { let color; switch (type) { case 'info': @@ -23,9 +23,32 @@ const getColor = (type) => { return color; }; +const getSecondaryColor = (type) => { + let color; + switch (type) { + case 'info': + color = colors.INFO_SECONDARY; + break; + case 'error': + color = colors.ERROR_SECONDARY; + break; + case 'warning': + color = colors.WARNING_SECONDARY; + break; + case 'success': + color = colors.SUCCESS_SECONDARY; + break; + default: + color = null; + } + + return color; +}; + const getIcon = type => icons[type.toUpperCase()]; export { - getColor, + getPrimaryColor, + getSecondaryColor, getIcon, }; \ No newline at end of file From 2b5c932d89db235f28b2fcad2bd41bb4614c003b Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 30 Oct 2018 13:26:00 +0100 Subject: [PATCH 03/17] root -> trezor-wallet-root --- src/index.html | 4 ++-- src/index.js | 2 +- src/support/styles/index.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index fc560aef..d4763335 100644 --- a/src/index.html +++ b/src/index.html @@ -17,7 +17,7 @@ -
+
diff --git a/src/index.js b/src/index.js index b3c6abc8..70f51986 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import { render } from 'react-dom'; import baseStyles from 'support/styles'; import App from 'views/index'; -const root: ?HTMLElement = document.getElementById('root'); +const root: ?HTMLElement = document.getElementById('trezor-wallet-root'); if (root) { baseStyles(); render(, root); diff --git a/src/support/styles/index.js b/src/support/styles/index.js index 500794c7..6f631b09 100644 --- a/src/support/styles/index.js +++ b/src/support/styles/index.js @@ -44,7 +44,7 @@ const baseStyles = () => injectGlobal` outline: 0; } - #root { + #trezor-wallet-root { height: 100%; } From 7fca2241598022757f526bbf44498b4670b032d9 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 30 Oct 2018 17:00:42 +0100 Subject: [PATCH 04/17] better log format --- package.json | 1 + src/components/Log/index.js | 12 +++++- yarn.lock | 77 +++++++++++++++++++++++++++++++------ 3 files changed, 77 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 80a26712..7dcd4df5 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "react": "^16.4.2", "react-dom": "^16.2.0", "react-hot-loader": "^4.3.4", + "react-json-view": "^1.19.1", "react-qr-svg": "^2.1.0", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", diff --git a/src/components/Log/index.js b/src/components/Log/index.js index bfeaaa01..1b19b256 100644 --- a/src/components/Log/index.js +++ b/src/components/Log/index.js @@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import colors from 'config/colors'; import { H2 } from 'components/Heading'; +import ReactJson from 'react-json-view'; import Icon from 'components/Icon'; import P from 'components/Paragraph'; @@ -60,6 +61,13 @@ const StyledParagraph = styled(P)` margin: 10px 0; `; +const LogWrapper = styled.div` + background: white; + padding: 25px; + height: 500px; + overflow: scroll; +`; + const Log = (props: Props): ?React$Element => { if (!props.log.opened) return null; return ( @@ -69,7 +77,9 @@ const Log = (props: Props): ?React$Element => {

Log

Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history. -