diff --git a/.babelrc b/.babelrc
index e69226b0..16b8d93a 100644
--- a/.babelrc
+++ b/.babelrc
@@ -17,7 +17,8 @@
["babel-plugin-root-import", {
"rootPathSuffix": "./src",
"rootPathPrefix": "~"
- }]
+ }],
+ "babel-plugin-styled-components"
],
"env": {
"test": {
diff --git a/package.json b/package.json
index cd1c6c0a..12fdc04e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
"hdkey": "^0.8.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
+ "prop-types": "^15.6.2",
"raf": "^3.4.0",
"raven-js": "^3.22.3",
"rc-tooltip": "^3.7.0",
@@ -51,6 +52,7 @@
"redux-logger": "^3.0.6",
"redux-raven-middleware": "^1.2.0",
"redux-thunk": "^2.2.0",
+ "styled-components": "^3.3.3",
"trezor-connect": "5.0.13",
"web3": "^0.19.0",
"webpack": "^4.16.3",
@@ -62,6 +64,7 @@
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-root-import": "^6.1.0",
+ "babel-plugin-styled-components": "^1.5.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
diff --git a/src/js/components/common/Heading.js b/src/js/components/common/Heading.js
new file mode 100644
index 00000000..9db6fb9f
--- /dev/null
+++ b/src/js/components/common/Heading.js
@@ -0,0 +1,40 @@
+// @flow
+
+import styled, { css } from 'styled-components';
+import colors from '~/js/config/colors';
+
+const baseStyles = css`
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ color: ${colors.black};
+ font-weight: bold;
+`;
+
+const H1 = styled.h1`
+ ${baseStyles}
+ font-size: 16px;
+`;
+
+const H2 = styled.h2`
+ ${baseStyles};
+ font-size: 14px;
+`;
+
+const H3 = styled.h3`
+ ${baseStyles};
+ font-size: 12px;
+`;
+
+const H4 = styled.h4`
+ ${baseStyles};
+ font-size: 10px;
+`;
+
+const Heading = {
+ H1,
+ H2,
+ H3,
+ H4,
+};
+
+module.exports = Heading;
\ No newline at end of file
diff --git a/src/js/components/wallet/account/receive/Receive.js b/src/js/components/wallet/account/receive/Receive.js
index e5960a2e..2dc4e007 100644
--- a/src/js/components/wallet/account/receive/Receive.js
+++ b/src/js/components/wallet/account/receive/Receive.js
@@ -1,7 +1,7 @@
/* @flow */
-
-
import React, { Component } from 'react';
+import styled from 'styled-components';
+import { H2 } from '~/js/components/common/Heading';
import Tooltip from 'rc-tooltip';
import { QRCode } from 'react-qr-svg';
@@ -11,6 +11,7 @@ import { Notification } from '~/js/components/common/Notification';
import type { Props } from './index';
+const Wrapper = styled.div``;
const Receive = (props: Props) => {
const device = props.wallet.selectedDevice;
@@ -67,18 +68,17 @@ const Receive = (props: Props) => {
);
}
- const ver = null;
+ let ver = null;
if (props.modal.opened && props.modal.windowType === 'ButtonRequest_Address') {
className = 'address verifying';
address = account.address;
- // ver = (
Confirm address on TREZOR
)
+ ver = (Confirm address on TREZOR
);
button = ({ account.network } account #{ (account.index + 1) }
);
}
return (
-
-
Receive Ethereum or tokens
-
+
+ Receive Ethereum or tokens
{ ver }
@@ -87,7 +87,7 @@ const Receive = (props: Props) => {
{ button }
{ qrCode }
-
+
);
};
diff --git a/src/js/config/colors.js b/src/js/config/colors.js
new file mode 100644
index 00000000..ce72470b
--- /dev/null
+++ b/src/js/config/colors.js
@@ -0,0 +1,3 @@
+export default {
+ BLACK: '#000000',
+};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a6b833a1..a2694ede 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,6 +24,12 @@
source-map "^0.5.0"
trim-right "^1.0.1"
+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+ version "7.0.0-beta.55"
+ resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.55.tgz#3c3e4c00e14e7dea917938e35ed5d9156cdd35ce"
+ dependencies:
+ "@babel/types" "7.0.0-beta.55"
+
"@babel/helper-function-name@7.0.0-beta.44":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
@@ -92,6 +98,14 @@
lodash "^4.2.0"
to-fast-properties "^2.0.0"
+"@babel/types@7.0.0-beta.55":
+ version "7.0.0-beta.55"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.55.tgz#7755c9d2e58315a64f05d8cf3322379be16d9199"
+ dependencies:
+ esutils "^2.0.2"
+ lodash "^4.17.10"
+ to-fast-properties "^2.0.0"
+
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -928,6 +942,14 @@ babel-plugin-root-import@^6.1.0:
dependencies:
slash "^1.0.0"
+babel-plugin-styled-components@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz#31dbeb696d1354d1585e60d66c7905f5e474afcd"
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
+ babel-types "^6.26.0"
+ stylis "^3.0.0"
+
babel-plugin-syntax-async-functions@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -1727,6 +1749,13 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"
+buffer@^5.0.3:
+ version "5.2.0"
+ resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.0.tgz#53cf98241100099e9eeae20ee6d51d21b16e541e"
+ dependencies:
+ base64-js "^1.0.2"
+ ieee754 "^1.1.4"
+
builtin-modules@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -2443,6 +2472,10 @@ css-animation@^1.3.2:
babel-runtime "6.x"
component-classes "^1.2.5"
+css-color-keywords@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+
css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2483,6 +2516,14 @@ css-selector-tokenizer@^0.7.0:
fastparse "^1.1.1"
regexpu-core "^1.0.0"
+css-to-react-native@^2.0.3:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e"
+ dependencies:
+ css-color-keywords "^1.0.0"
+ fbjs "^0.8.5"
+ postcss-value-parser "^3.3.0"
+
css-what@2.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -3548,6 +3589,18 @@ fbjs@^0.8.16, fbjs@^0.8.9:
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
+fbjs@^0.8.5:
+ version "0.8.17"
+ resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+ dependencies:
+ core-js "^1.0.0"
+ isomorphic-fetch "^2.1.1"
+ loose-envify "^1.0.0"
+ object-assign "^4.1.0"
+ promise "^7.1.1"
+ setimmediate "^1.0.5"
+ ua-parser-js "^0.7.18"
+
figures@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -7275,6 +7328,10 @@ react-input-autosize@^2.1.2:
dependencies:
prop-types "^15.5.8"
+react-is@^16.3.1:
+ version "16.4.1"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
+
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -8476,6 +8533,29 @@ strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+styled-components@^3.3.3:
+ version "3.3.3"
+ resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.3.3.tgz#09e702055ab11f7a8eab8229b1c0d0b855095686"
+ dependencies:
+ buffer "^5.0.3"
+ css-to-react-native "^2.0.3"
+ fbjs "^0.8.16"
+ hoist-non-react-statics "^2.5.0"
+ is-plain-object "^2.0.1"
+ prop-types "^15.5.4"
+ react-is "^16.3.1"
+ stylis "^3.5.0"
+ stylis-rule-sheet "^0.0.10"
+ supports-color "^3.2.3"
+
+stylis-rule-sheet@^0.0.10:
+ version "0.0.10"
+ resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+
+stylis@^3.0.0, stylis@^3.5.0:
+ version "3.5.3"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546"
+
supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -8761,6 +8841,10 @@ typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+ua-parser-js@^0.7.18:
+ version "0.7.18"
+ resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
+
ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"