arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +00:00
Code Issues Releases Wiki Activity

Added support for icons and styled components

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-13 12:19:10 +02:00
parent cd25b3f459
commit e226847ccc
14 changed files with 99 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.babelrc
View File

@ -17,14 +17,7 @@
}],
["babel-plugin-root-import", {
"rootPathSuffix": "./src",
"rootPathPrefix": "~",
"alias": {
"components": "./src/js/components",
"config": "./src/js/config",
"reducers": "./src/js/reducers",
"actions": "./src/js/actions",
"services": "./src/js/services"
}
"rootPathPrefix": "~"
}],
"babel-plugin-styled-components"
],

1
.eslintrc
View File

@ -10,6 +10,7 @@
"jest": true
},
"rules": {
"react/destructuring-assignment": 0,
"react/jsx-one-expression-per-line": 0,
"react/jsx-indent": [2, 4],
"react/jsx-indent-props": [2, 4],

6
src/js/components/common/Header.js
View File

@ -16,6 +16,8 @@ const Wrapper = styled.header`
}
`;
const LinkWrapper = styled.div``;
const LayoutWrapper = styled.div`
width: 100%;
height: 100%;
@ -57,12 +59,12 @@ const Header = (): React$Element<string> => (
<path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18 h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z" />
<polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " />
</svg>
<div>
<LinkWrapper>
<A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">TREZOR</A>
<A href="https://doc.satoshilabs.com/trezor-user/" target="_blank" rel="noreferrer noopener">Docs</A>
<A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
<A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>
</div>
</LinkWrapper>
</LayoutWrapper>
</Wrapper>
);

42
src/js/components/common/Icon.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const Icon = (props) => {
const styles = {
svg: {
display: 'inline-block',
verticalAlign: 'middle',
},
path: {
fill: props.color,
},
};
return (
<svg
style={styles.svg}
width={`${props.size}`}
height={`${props.size}`}
viewBox="0 0 16 16"
>
<path
style={styles.path}
d={props.icon}
/>
</svg>
);
};
Icon.propTypes = {
icon: PropTypes.string.isRequired,
size: PropTypes.number,
color: PropTypes.string,
};
Icon.defaultProps = {
size: 30,
color: 'black',
};
export default Icon;

3
src/js/components/common/LoaderCircle.js
View File

@ -1,6 +1,5 @@
/* @flow */
import React from 'react';
export default (props: { size: string, label?: string, className?: string }): React$Element<string> => {
@ -11,7 +10,7 @@ export default (props: { size: string, label?: string, className?: string }): Re
};
return (
<div className={ className } style={style}>
<div className={className} style={style}>
<p>{ props.label }</p>
<svg className="circular" viewBox="25 25 50 50">
<circle className="route" cx="50" cy="50" r="20" fill="none" stroke="" strokeWidth="1" strokeMiterlimit="10" />

11
src/js/components/landing/InstallBridge.js
View File

@ -1,6 +1,6 @@
/* @flow */
import installers from '~/js/constants/bridge';
import React, { Component } from 'react';
import Select from 'react-select';
import Preloader from './Preloader';
@ -17,15 +17,6 @@ type InstallTarget = {
label: string;
}
const installers: Array<InstallTarget> = [
{ id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
{ id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
{ id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
{ id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
{ id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
{ id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
];
// import type { Props } from './index';
type Props = {

42
src/js/components/wallet/pages/DeviceSettings.js
View File

@ -1,15 +1,45 @@
import React from 'react';
import styled from 'styled-components';
import { H2 } from '~/js/components/common/Heading';
import Icon from '~/js/components/common/Icon';
import colors from '~/js/config/colors';
import ICONS from '~/js/constants/icons';
import { connect } from 'react-redux';
const Section = styled.section`
`;
const P = styled.p`
padding: 12px 0px 24px 0px;
text-align: center;
`;
const StyledH2 = styled(H2)`
padding-top: 15px;
`;
const Row = styled.div`
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px 48px;
padding-bottom: 98px;
`;
export const DeviceSettings = () => (
<section className="device-settings">
<div className="row">
<H2>Device settings is under construction</H2>
<p>Please use Bitcoin wallet interface to change your device settings</p>
<Section>
<Row>
<Icon
color={colors.WARNING_PRIMARY}
icon={ICONS.WARNING}
/>
<StyledH2>Device settings is under construction</StyledH2>
<P>Please use Bitcoin wallet interface to change your device settings</P>
<a className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
</div>
</section>
</Row>
</Section>
);
export default connect(null, null)(DeviceSettings);

8
src/js/constants/bridge.js Normal file
View File

@ -0,0 +1,8 @@
export default [
{ id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
{ id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
{ id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
{ id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
{ id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
{ id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
];

3
src/js/constants/icons.js Normal file
View File

@ -0,0 +1,3 @@
export default {
WARNING: 'M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z',
};

4
src/js/utils/networkUtils.js
View File

@ -10,9 +10,9 @@ export const httpRequest = async (url: string, type: string = 'text'): any => {
const txt: string = await response.text();
return JSON.parse(txt);
} if (type === 'binary') {
return await response.arrayBuffer();
await response.arrayBuffer();
}
return await response.text();
await response.text();
}
throw new Error(`${url} ${response.statusText}`);

6
src/styles/content.less
View File

@ -59,12 +59,6 @@ article {
display: flex;
flex-direction: column;
background: @color_white;
h2 {
font-size: 16px;
font-weight: 600;
padding: 24px 48px;
}
p {
padding: 0px 48px;

32
src/styles/deviceSettings.less
View File

@ -1,32 +0,0 @@
.device-settings {
.row {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px 48px;
padding-bottom: 98px;
h2 {
padding: 0;
position: relative;
&:before {
.icomoon-warning;
position: absolute;
color: @color_warning_primary;
font-size: 48px;
top: -48px;
left: 0;
right: 0;
text-align: center;
}
}
p {
padding: 12px 0px 24px 0px;
text-align: center;
}
}
}

1
src/styles/index.less
View File

@ -14,7 +14,6 @@
@import './send.less';
@import './receive.less';
@import './summary.less';
@import './deviceSettings.less';
@import './landingPage.less';

5
src/styles/landingPage.less
View File

@ -169,11 +169,6 @@
main {
h2.claim {
font-size: 36px;
padding-bottom: 24px;
}
.row {
display: flex;
flex-direction: row;