mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 16:38:08 +00:00
POC of styled component
This commit is contained in:
Vladimír Volek
parent
3310a30a54
commit
52239f77b7
3
.babelrc
3
.babelrc
@ -17,7 +17,8 @@
|
||||
["babel-plugin-root-import", {
|
||||
"rootPathSuffix": "./src",
|
||||
"rootPathPrefix": "~"
|
||||
}]
|
||||
}],
|
||||
"babel-plugin-styled-components"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
|
||||
@ -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
Normal file
40
src/js/components/common/Heading.js
Normal 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;
|
||||
@ -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
Normal file
3
src/js/config/colors.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
BLACK: '#000000',
|
||||
};
|
||||
84
yarn.lock
84
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user