arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-03-01 17:02:07 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into feature/ripple

Browse Source
This commit is contained in:
Szymon Lesisz 2018-12-11 15:15:50 +01:00 committed by GitHub
commit b368447bcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1924 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -49,8 +49,8 @@
"raf": "^3.4.0",
"raven-js": "^3.22.3",
"rc-tooltip": "^3.7.0",
"react": "^16.4.2",
"react-dom": "^16.2.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-hot-loader": "^4.3.4",
"react-json-view": "^1.19.1",
"react-qr-svg": "^2.1.0",
@ -67,9 +67,9 @@
"redux-raven-middleware": "^1.2.0",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"styled-components": "^3.4.9",
"styled-components": "^4.1.2",
"styled-media-query": "^2.0.2",
"styled-normalize": "^8.0.0",
"styled-normalize": "^8.0.4",
"trezor-connect": "6.0.3-beta.4",
"web3": "1.0.0-beta.35",
"webpack": "^4.16.3",

13
src/components/Textarea/index.js
View File

@ -57,6 +57,11 @@ const StyledTextarea = styled(Textarea)`
opacity: 1;
}
&:read-only {
background: ${colors.GRAY_LIGHT};
color: ${colors.TEXT_SECONDARY};
}
&:disabled {
pointer-events: none;
background: ${colors.GRAY_LIGHT};
@ -94,7 +99,7 @@ const StyledTextarea = styled(Textarea)`
`;
const TopLabel = styled.span`
padding-bottom: 8px;
padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY};
`;
@ -150,11 +155,13 @@ const TextArea = ({
onFocus,
onBlur,
isDisabled,
readOnly,
name,
onChange,
topLabel,
rows,
maxRows,
maxLength,
autoSelect,
state = '',
bottomText = '',
@ -169,6 +176,7 @@ const TextArea = ({
autoCorrect="off"
autoCapitalize="off"
maxRows={maxRows}
maxLength={maxLength}
rows={rows}
className={className}
disabled={isDisabled}
@ -177,6 +185,7 @@ const TextArea = ({
onFocus={onFocus}
onBlur={onBlur}
value={value}
readOnly={readOnly}
onClick={autoSelect ? event => event.target.select() : null}
placeholder={placeholder}
onChange={onChange}
@ -202,7 +211,9 @@ TextArea.propTypes = {
customStyle: PropTypes.string,
placeholder: PropTypes.string,
value: PropTypes.string,
readOnly: PropTypes.bool,
maxRows: PropTypes.number,
maxLength: PropTypes.number,
rows: PropTypes.number,
name: PropTypes.string,
isDisabled: PropTypes.bool,

11
src/components/inputs/Input/index.js
View File

@ -29,7 +29,7 @@ const InputIconWrapper = styled.div`
`;
const TopLabel = styled.span`
padding-bottom: 8px;
padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY};
`;
@ -62,6 +62,11 @@ const StyledInput = styled.input`
color: ${colors.TEXT_SECONDARY};
}
&:read-only {
background: ${colors.GRAY_LIGHT};
color: ${colors.TEXT_SECONDARY};
}
${props => props.trezorAction && css`
z-index: 10001;
position: relative; /* bigger than modal container */
@ -95,7 +100,7 @@ const Overlay = styled.div`
height: 100%;
background-image: linear-gradient(to right,
rgba(0,0,0, 0) 0%,
rgba(255,255,255, 1) 220px
rgba(249,249,249, 1) 220px
);
`}
`;
@ -176,7 +181,7 @@ class Input extends PureComponent {
height={this.props.height}
trezorAction={this.props.trezorAction}
hasIcon={this.getIcon(this.props.state).length > 0}
innerRef={this.props.innerRef}
ref={this.props.innerRef}
hasAddon={!!this.props.sideAddons}
type={this.props.type}
color={this.getColor(this.props.state)}

13
src/index.js
View File

@ -1,13 +1,20 @@
/* @flow */
import React from 'react';
import { render } from 'react-dom';
import baseStyles from 'support/styles';
import { Normalize } from 'styled-normalize';
import BaseStyles from 'support/styles';
import App from 'views/index';
const root: ?HTMLElement = document.getElementById('trezor-wallet-root');
if (root) {
baseStyles();
render(<App />, root);
render(
<React.Fragment>
<Normalize />
<BaseStyles />
<App />
</React.Fragment>,
root,
);
}
window.onbeforeunload = () => {

7
src/support/styles/index.js
View File

@ -1,13 +1,10 @@
import { injectGlobal } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
import colors from 'config/colors';
import normalize from 'styled-normalize';
import tooltipStyles from './Tooltip';
import animationStyles from './Animations';
const baseStyles = () => injectGlobal`
${normalize};
const baseStyles = createGlobalStyle`
html, body {
width: 100%;
height: 100%;

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

@ -19,11 +19,8 @@ type State = {
footerFixed: boolean,
}
const AsideWrapper = styled.aside.attrs({
style: ({ minHeight }) => ({
minHeight,
}),
})`
const AsideWrapper = styled.aside`
min-height: ${props => props.minHeight}px;
position: relative;
top: 0px;
width: 320px;
@ -33,13 +30,10 @@ const AsideWrapper = styled.aside.attrs({
border-right: 1px solid ${colors.DIVIDER};
`;
const StickyContainerWrapper = styled.div.attrs({
style: ({ top, left, paddingBottom }) => ({
top,
left,
paddingBottom,
}),
})`
const StickyContainerWrapper = styled.div`
top: ${props => props.top}px;
left: ${props => props.left}px;
padding-bottom: ${props => props.paddingBottom}px;
position: fixed;
border-right: 1px solid ${colors.DIVIDER};
width: 320px;
@ -160,7 +154,7 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
<AsideWrapper
footerFixed={this.state.footerFixed}
minHeight={this.state.asideMinHeight}
innerRef={this.asideRefCallback}
ref={this.asideRefCallback}
onScroll={this.handleScroll}
onTouchStart={this.handleScroll}
onTouchMove={this.handleScroll}
@ -170,11 +164,11 @@ export default class StickyContainer extends React.PureComponent<Props, State> {
paddingBottom={this.state.wrapperBottomPadding}
top={this.state.wrapperTopOffset}
left={this.state.wrapperLeftOffset}
innerRef={this.wrapperRefCallback}
ref={this.wrapperRefCallback}
>
{React.Children.map(this.props.children, (child) => { // eslint-disable-line arrow-body-style
return child.key === 'sticky-footer' ? React.cloneElement(child, {
innerRef: this.footerRefCallback,
ref: this.footerRefCallback,
position: this.state.footerFixed ? 'fixed' : 'relative',
}) : child;
})}

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

@ -44,11 +44,8 @@ const TransitionContentWrapper = styled.div`
vertical-align: top;
`;
const Footer = styled.div.attrs({
style: ({ position }) => ({
position,
}),
})`
const Footer = styled.div`
position: ${props => props.position};
width: 320px;
bottom: 0;
background: ${colors.MAIN};

2
src/views/Wallet/components/TopNavigationAccount/index.js
View File

@ -61,7 +61,7 @@ class TopNavigationAccount extends React.PureComponent<Props> {
const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`;
return (
<Wrapper className="account-tabs" innerRef={this.wrapperRefCallback}>
<Wrapper className="account-tabs" ref={this.wrapperRefCallback}>
<StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
<StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
<StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>

84
src/views/Wallet/views/Account/Send/components/AdvancedForm/index.js
View File

@ -22,10 +22,6 @@ type Props = BaseProps & {
// same variable also in "AccountSend/index.js"
const SmallScreenWidth = '850px';
const InputRow = styled.div`
margin-bottom: 20px;
`;
const InputLabelWrapper = styled.div`
display: flex;
align-items: center;
@ -45,7 +41,7 @@ const AdvancedSettingsWrapper = styled.div`
border-top: 1px solid ${colors.DIVIDER};
`;
const GasInputRow = styled(InputRow)`
const GasInputRow = styled.div`
width: 100%;
display: flex;
@ -55,7 +51,8 @@ const GasInputRow = styled(InputRow)`
`;
const GasInput = styled(Input)`
min-height: 85px;
/* min-height: 85px; */
padding-bottom: 28px;
&:first-child {
padding-right: 20px;
}
@ -63,13 +60,12 @@ const GasInput = styled(Input)`
@media screen and (max-width: ${SmallScreenWidth}) {
&:first-child {
padding-right: 0;
margin-bottom: 2px;
}
}
`;
const StyledTextarea = styled(Textarea)`
margin-bottom: 20px;
padding-bottom: 28px;
min-height: 80px;
`;
@ -214,25 +210,27 @@ const AdvancedForm = (props: Props) => {
spellCheck="false"
topLabel={(
<InputLabelWrapper>
Gas price
<Tooltip
content={(
<React.Fragment>
Gas price refers to the amount of ether you are willing to pay for every
unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
</React.Fragment>
)}
maxWidth={400}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
<Left>
Gas price
<Tooltip
content={(
<React.Fragment>
Gas price refers to the amount of ether you are willing to pay for every
unit of gas, and is usually measured in “Gwei”. <GreenSpan>Transaction fee = gas limit * gas price</GreenSpan>. Increasing the gas price will get the transaction confirmed sooner but
makes it more expensive. The recommended gas price is <GreenSpan>{recommendedGasPrice} GWEI</GreenSpan>.
</React.Fragment>
)}
maxWidth={400}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
</Left>
</InputLabelWrapper>
)}
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
@ -244,21 +242,23 @@ const AdvancedForm = (props: Props) => {
<StyledTextarea
topLabel={(
<InputLabelWrapper>
Data
<Tooltip
content={(
<React.Fragment>
Data is usually used when you send transactions to contracts.
</React.Fragment>
)}
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
<Left>
Data
<Tooltip
content={(
<React.Fragment>
Data is usually used when you send transactions to contracts.
</React.Fragment>
)}
placement="top"
>
<Icon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
/>
</Tooltip>
</Left>
</InputLabelWrapper>
)}
state={getDataTextareaState(errors.data, warnings.data)}

2
src/views/Wallet/views/Account/Send/index.js
View File

@ -25,4 +25,4 @@ export default connect((state: State): BaseProps => ({
default:
return null;
}
});
});

15
src/views/Wallet/views/Account/SignVerify/index.js
View File

@ -13,13 +13,12 @@ import type { Props } from './Container';
const Wrapper = styled.div`
display: flex;
flex: 1;
margin-top: -5px;
flex-direction: row;
background: ${colors.WHITE};
`;
const Row = styled.div`
padding: 0 0 25px 0;
padding-bottom: 28px;
`;
const RowButtons = styled(Row)`
@ -87,7 +86,7 @@ class SignVerify extends Component <Props> {
type="text"
isSmallText
autoSelect
isDisabled
readOnly
/>
</Row>
<Row>
@ -98,7 +97,7 @@ class SignVerify extends Component <Props> {
onChange={this.handleInputChange}
rows={4}
maxRows={4}
maxLength="255"
maxLength={255}
/>
</Row>
<Row>
@ -109,8 +108,8 @@ class SignVerify extends Component <Props> {
rows={4}
autoSelect
maxRows={4}
maxLength="255"
isDisabled
maxLength={255}
readOnly
/>
</Row>
<RowButtons>
@ -147,7 +146,7 @@ class SignVerify extends Component <Props> {
onChange={this.handleInputChange}
rows={4}
maxRows={4}
maxLength="255"
maxLength={255}
/>
</Row>
<Row>
@ -159,7 +158,7 @@ class SignVerify extends Component <Props> {
onChange={this.handleInputChange}
rows={4}
maxRows={4}
maxLength="255"
maxLength={255}
/>
</Row>
<RowButtons>

2
src/views/Wallet/views/Account/Summary/components/Balance/index.js
View File

@ -21,7 +21,7 @@ type State = {
};
const Wrapper = styled.div`
padding: 10px 0 25px 0;
padding-bottom: 28px;
position: relative;
display: flex;

2
src/views/Wallet/views/Dashboard/index.js
View File

@ -33,7 +33,7 @@ const Dashboard = () => (
<H2>Dashboard</H2>
<Row>
<H2>Please select your coin</H2>
<P>You will gain access to recieving &amp; sending selected coin</P>
<P>You will gain access to receiving &amp; sending selected coin</P>
<img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
</Row>
</Wrapper>

1859
yarn.lock
View File

File diff suppressed because it is too large Load Diff