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

Merge branch 'styled-components-refactor' of https://github.com/satoshilabs/trezor-wallet into styled-components-refactor

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-27 17:09:04 +02:00
commit 37f8a24ee2
16 changed files with 141 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/components/DeviceHeader/index.js
View File

@ -162,15 +162,15 @@ class DeviceHeader extends Component {
}
}
DeviceHeader.propTypes = {
deviceCount: PropTypes.number,
device: PropTypes.object,
devices: PropTypes.array,
transport: PropTypes.object,
icon: PropTypes.element,
isHoverable: PropTypes.bool,
disabled: PropTypes.bool,
isOpen: PropTypes.bool,
trezorModel: PropTypes.string.isRequired,
onClickWrapper: PropTypes.func.isRequired,
status: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
};
export default DeviceHeader;

3
src/js/components/Footer/index.js
View File

@ -6,16 +6,15 @@ import { getYear } from 'date-fns';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import colors from 'config/colors';
import * as LogActions from 'actions/LogActions';
const Wrapper = styled.div`
width: 100%;
font-size: 12px;
background: ${colors.LANDING};
color: ${colors.TEXT_SECONDARY};
padding: 22px 48px;
border-top: 1px solid ${colors.DIVIDER};
display: flex;
`;

9
src/js/config/icons.js
View File

@ -1,4 +1,13 @@
export default {
REFRESH: [
'M347.392 473.312c17.28-82.24 90.4-142.336 173.92-142.336 31.648 0 61.92 8.704 88.576 24.416 6.656 3.936 12.8 8.672 18.944 13.504l-68.832 68.736 192 33.056-32-198.272-38.4 42.016c-5.92-5.024-12.064-9.728-18.336-14.144-40.928-28.672-89.92-44.288-141.92-44.288-121.664 0-225.12 89.312-245.984 210.368l-3.36 20.896h72.672l2.72-13.952zM676.608 550.688c-17.28 82.24-90.4 142.336-173.92 142.336-31.648 0-61.92-8.704-88.576-24.416-6.624-3.936-12.8-8.672-18.944-13.504l68.832-68.736-192-33.056 32 198.272 38.4-42.016c5.92 5.024 12.032 9.696 18.336 14.144 40.928 28.672 89.92 44.288 141.952 44.288 121.664 0 225.12-89.312 245.984-210.368l3.328-20.864h-72.672l-2.72 13.92z',
],
T1: [
'M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.232-31.447 29.027-69.173 29.12-109.413v-232.987c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-0.073 0-0.159 0.001-0.246 0.001-14.427 0-27.041-7.762-33.894-19.338l-0.1-0.183-34.88-59.84c-16.656-28.155-26.515-62.042-26.56-98.227v-235.853c0.133-19.025 13.742-34.833 31.751-38.359l0.249-0.041h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.258 3.568 31.867 19.375 32 38.386v0.014zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4z',
],
COG: [
'M739.552 462.144h-71.328c-4.256-13.664-10.208-26.56-17.472-38.56l47.264-47.424c11.2-11.008 11.2-29.056 0-40.192l-20.064-20.032c-11.136-11.104-29.152-11.040-40.192 0l-48.128 48.032c-12.992-7.392-27.072-13.152-42.080-16.992v-62.496c0-15.68-12.672-28.48-28.448-28.48h-28.448c-15.68 0-28.416 12.8-28.416 28.48v62.464c-16.352 4.128-31.68 10.656-45.728 19.2l-40.288-40.224c-11.072-11.040-29.184-11.104-40.288 0l-20.096 20.096c-11.104 11.072-10.976 29.152 0.064 40.288l40.992 40.992c-8.672 15.136-15.168 31.648-18.88 49.152h-53.504c-15.776 0-28.544 12.736-28.544 28.48v28.416c0 15.68 12.768 28.416 28.544 28.416h57.152c5.184 17.152 12.992 32.928 23.008 47.328l-38.656 38.656c-11.136 11.136-11.136 29.216-0.064 40.288l20.064 20.096c11.2 11.040 29.248 11.040 40.32-0.032l43.232-43.2c14.528 7.232 30.336 12.48 46.944 15.2v59.488c0 15.68 12.736 28.448 28.448 28.48h28.448c15.68-0.032 28.448-12.8 28.448-28.48v-66.816c14.336-5.088 27.904-11.872 40.224-20.544l45.76 45.888c11.104 11.072 29.12 11.072 40.224 0l20.096-20.128c11.168-11.072 11.168-29.056-0.096-40.288l-50.144-50.24c6.144-12.512 10.944-25.792 13.92-39.904h67.776c15.744 0 28.448-12.672 28.48-28.448v-28.448c-0.096-15.68-12.8-28.512-28.544-28.512zM504.928 583.072c-39.264 0-71.072-31.776-71.072-71.104 0-39.264 31.808-71.040 71.072-71.040 39.296 0 71.136 31.776 71.136 71.040 0 39.328-31.84 71.104-71.136 71.104z',
],
EJECT: [
'M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z',
],

13
src/js/store/index.js
View File

@ -39,19 +39,8 @@ if (process.env.NODE_ENV === 'development') {
return pass.length === 0;
};
const logger = createLogger({
level: 'info',
predicate: excludeLogger,
collapsed: true,
});
const devToolsExtension: ?Function = window.devToolsExtension;
if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension());
}
composedEnhancers = compose(
applyMiddleware(...middleware, logger, ...services),
applyMiddleware(...middleware, ...services),
...enhancers,
);
} else {

0
src/js/views/Settings/index.js
View File

3
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js
View File

@ -15,8 +15,7 @@ class DeviceList extends Component {
}
render() {
const { devices, selectedDevice } = this.props;
console.warn('devices', devices);
const { devices, selectedDevice, onSelectDevice } = this.props;
return (
<Wrapper>
{devices

94
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js Normal file
View File

@ -0,0 +1,94 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Icon from 'components/Icon';
import icons from 'config/icons';
import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div`
padding: 0px 24px 8px 19px;
border-bottom: 1px solid ${colors.DIVIDER};
background: ${colors.WHITE};
`;
const Item = styled.div`
padding: 4px 2px;
display: flex;
align-items: center;
font-size: ${FONT_SIZE.SMALL};
line-height: 24px;
cursor: pointer;
color: ${colors.TEXT_SECONDARY};
`;
const Label = styled.div`
padding-left: 15px;
`;
class MenuItems extends Component {
// makeAction(action, device) {
// switch (action) {
// case 'reload': this.props.acquireDevice();
// break;
// case 'forget': this.props.forgetDevice();
// break;
// case 'clone': this.props.duplicateDevice();
// break;
// case 'settings': {
// this.props.toggleDeviceDropdown(false);
// this.props.gotoDeviceSettings(device);
// break;
// }
// default: console.log('no action');
// break;
// }
// }
showClone() {
return this.props.selectedDevice && this.props.selectedDevice.features.passphrase_protection && this.props.selectedDevice.connected && this.props.selectedDevice.available;
}
showRenewSession() {
return this.props.selectedDevice && this.props.selectedDevice.status !== 'available';
}
render() {
return (
<Wrapper>
<Item>
<Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
<Label>Device settings</Label>
</Item>
<Item>
<Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} />
<Label>Forget</Label>
</Item>
{this.showClone() && (
<Item>
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
<Label>Create hidden wallet</Label>
</Item>
)}
{this.showRenewSession() && (
<Item>
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
<Label>Renew session</Label>
</Item>
)}
</Wrapper>
);
}
}
MenuItems.propTypes = {
selectedDevice: PropTypes.object.isRequired,
acquireDevice: PropTypes.func.isRequired,
forgetDevice: PropTypes.func.isRequired,
duplicateDevice: PropTypes.func.isRequired,
toggleDeviceDropdown: PropTypes.func.isRequired,
gotoDeviceSettings: PropTypes.func.isRequired,
};
export default MenuItems;

38
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -6,6 +6,7 @@ import type { TrezorDevice } from 'flowtype';
import DeviceHeader from 'components/DeviceHeader';
import Button from 'components/Button';
import { isWebUSB } from 'utils/device';
import MenuItems from './components/MenuItems';
import DeviceList from './components/DeviceList';
import type { Props } from '../common';
@ -13,6 +14,7 @@ import type { Props } from '../common';
import AsideDivider from '../Divider';
const Wrapper = styled.div``;
const ButtonWrapper = styled.div``;
export const DeviceSelect = (props: Props) => {
const handleOpen = () => {
@ -24,7 +26,7 @@ export const DeviceSelect = (props: Props) => {
onClickWrapper={handleOpen}
device={props.wallet.selectedDevice}
transport={props.connect.transport}
devices={props.devices.length}
devices={props.devices}
isOpen={props.deviceDropdownOpened}
/>
);
@ -79,11 +81,6 @@ export class DeviceDropdown extends Component<Props> {
if (transport && transport.version.indexOf('webusb') >= 0) TrezorConnect.renderWebUSBButton();
}
componentWillUnmount(): void {
window.removeEventListener('mousedown', this.mouseDownHandler, false);
// window.removeEventListener('blur', this.blurHandler, false);
}
onDeviceMenuClick(item: DeviceMenuItem, device: TrezorDevice): void {
if (item.type === 'reload') {
this.props.acquireDevice();
@ -97,12 +94,17 @@ export class DeviceDropdown extends Component<Props> {
}
}
componentWillUnmount(): void {
window.removeEventListener('mousedown', this.mouseDownHandler, false);
// window.removeEventListener('blur', this.blurHandler, false);
}
showDivider() {
return this.props.devices.length > 1;
}
render() {
const { devices } = this.props;
const { devices, onSelectDevice } = this.props;
const { transport } = this.props.connect;
const { selectedDevice } = this.props.wallet;
@ -115,7 +117,7 @@ export class DeviceDropdown extends Component<Props> {
}
deviceMenuItems.push({ type: 'settings', label: 'Device settings' });
if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selected.available) {
if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selectedDevice.available) {
deviceMenuItems.push({ type: 'clone', label: 'Create hidden wallet' });
}
//if (selected.remember) {
@ -124,7 +126,7 @@ export class DeviceDropdown extends Component<Props> {
const deviceMenuButtons = deviceMenuItems.map((item, index) => (
<div key={item.type} className={item.type} onClick={event => this.onDeviceMenuClick(item, selected)}>{item.label}</div>
<div key={item.type} className={item.type} onClick={event => this.onDeviceMenuClick(item, selectedDevice)}>{item.label}</div>
));
currentDeviceMenu = deviceMenuButtons.length < 1 ? null : (
<div className="device-menu">
@ -136,18 +138,22 @@ export class DeviceDropdown extends Component<Props> {
return (
<Wrapper>
{currentDeviceMenu}
{/* {selectedDevice && selectedDevice.features && <MenuItems {...this.props} />} */}
{this.showDivider() && <AsideDivider textLeft="Other devices" />}
<DeviceList
devices={devices}
selectedDevice={selectedDevice}
onSelectDevice={onSelectDevice}
/>
{isWebUSB(transport) && (
<Button
className="trezor-webusb-button"
text="Check for devices"
isWebUsb
/>
)}
<ButtonWrapper>
{isWebUSB(transport) && (
<Button
className="trezor-webusb-button"
text="Check for devices"
isWebUsb
/>
)}
</ButtonWrapper>
</Wrapper>
);
}

6
src/js/views/Wallet/components/LeftNavigation/components/Divider/index.js
View File

@ -11,7 +11,7 @@ const Wrapper = styled.div`
padding: 8px 28px 8px 24px;
font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT};
background: ${colors.LANDING};
${props => props.borderTop && css`
border-top: 1px solid ${colors.DIVIDER};
`}
@ -35,8 +35,8 @@ const Divider = ({
Divider.propTypes = {
textLeft: PropTypes.string,
textRight: PropTypes.string,
borderTop: PropTypes.bool.isRequired,
borderBottom: PropTypes.bool.isRequired,
borderTop: PropTypes.bool,
borderBottom: PropTypes.bool,
};
export default Divider;

1
src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
View File

@ -19,7 +19,6 @@ const AsideWrapper = styled.aside`
position: relative;
width: 320px;
min-width: 320px;
border-right: 1px solid ${colors.DIVIDER};
overflow-x: hidden;
background: ${colors.MAIN};
`;

1
src/js/views/Wallet/components/LeftNavigation/index.js
View File

@ -24,7 +24,6 @@ const StickyBottom = styled.div`
position: fixed;
bottom: 0;
background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
`;
const MenuWrapper = styled.div`

1
src/js/views/Wallet/views/DeviceSettings/index.js
View File

@ -33,6 +33,7 @@ const DeviceSettings = () => (
<Section>
<Row>
<Icon
size={60}
color={colors.WARNING_PRIMARY}
icon={ICONS.WARNING}
/>

5
src/js/views/Wallet/views/Initialize/index.js
View File

@ -16,14 +16,15 @@ const Row = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-items: center;
`;
const A = styled.a``;
const StyledParagraph = styled(Paragraph)`
margin: 20px 50px;
margin: 10px 50px;
display: block;
text-align: center;
`;
const Initialize = () => (

1
src/styles/aside.less
View File

@ -2,7 +2,6 @@ aside {
position: relative;
width: 320px;
min-width: 320px;
border-right: 1px solid @color_divider;
overflow-x: hidden;
.sticky-container {

3
src/styles/index.less
View File

@ -14,5 +14,4 @@
@import './notification.less';
@import './inputs.less';
@import './loader.less';
@import './inputs.less';

88
src/styles/loader.less
View File

@ -1,88 +0,0 @@
.loader-circle {
position: relative;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
p {
position: absolute;
//margin: auto;
//line-height: 100%;
color: @color_text_secondary;
}
.circular {
width: 100%;
height: 100%;
animation: rotate 2s linear infinite;
transform-origin: center center;
position: absolute;
.route {
stroke: @color_gray_light;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
}
&.info {
.path {
animation: dash 1.5s ease-in-out infinite, colorInfo 6s ease-in-out infinite;
}
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@keyframes color {
100%, 0% {
stroke: @color_green_primary;
}
40% {
stroke: @color_green_primary;
}
66% {
stroke: @color_green_secondary;
}
80%, 90% {
stroke: @color_green_tertiary;
}
}
@keyframes colorInfo {
100%, 0% {
stroke: @color_info_primary;
}
40% {
stroke: @color_info_primary;
}
66% {
stroke: @color_info_primary;
}
80%, 90% {
stroke: @color_info_primary;
}
}