arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

POC of styled component

Browse Source
pull/1/head
Vladimír Volek 6 years ago
parent 3310a30a54
commit 52239f77b7
6 changed files with 140 additions and 9 deletions
Show Stats Download Patch File Download Diff File

3
.babelrc
Unescape View File

@ -17,7 +17,8 @@
["babel-plugin-root-import", {
"rootPathSuffix": "./src",
"rootPathPrefix": "~"
}]
}],
"babel-plugin-styled-components"
],
"env": {
"test": {

3
package.json
Unescape View File

@ -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",

40
src/js/components/common/Heading.js
Unescape View File

@ -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;

16
src/js/components/wallet/account/receive/Receive.js
Unescape View File

@ -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 = (<div className="confirm">Confirm address on TREZOR</div>)
ver = (<div className="confirm">Confirm address on TREZOR</div>);
button = (<div className="confirm">{ account.network } account #{ (account.index + 1) }</div>);
}
return (
<div>
<h2>Receive Ethereum or tokens</h2>
<Wrapper>
<H2>Receive Ethereum or tokens</H2>
<div className={className}>
{ ver }
<div className="value">
@ -87,7 +87,7 @@ const Receive = (props: Props) => {
{ button }
</div>
{ qrCode }
</div>
</Wrapper>
);
};

3
src/js/config/colors.js
Unescape View File

@ -0,0 +1,3 @@
export default {
BLACK: '#000000',
};

84
yarn.lock
Unescape View File

@ -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"

Write Preview
Loading…
Cancel
Save