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

Merge branch 'master' into feature/ripple

Browse Source
pull/260/head
Szymon Lesisz 6 years ago committed by GitHub
parent 1ac33b05ee c33b56bfcf
commit b368447bcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1922 additions and 123 deletions
Show Stats Download Patch File Download Diff File

8
package.json
Unescape View File

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

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

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

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

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

13
src/index.js
Unescape View File

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

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

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

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

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

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

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

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

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

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

@ -22,10 +22,6 @@ type Props = BaseProps & {
// same variable also in "AccountSend/index.js" // same variable also in "AccountSend/index.js"
const SmallScreenWidth = '850px'; const SmallScreenWidth = '850px';
const InputRow = styled.div`
margin-bottom: 20px;
`;
const InputLabelWrapper = styled.div` const InputLabelWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
@ -45,7 +41,7 @@ const AdvancedSettingsWrapper = styled.div`
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
`; `;
const GasInputRow = styled(InputRow)` const GasInputRow = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
@ -55,7 +51,8 @@ const GasInputRow = styled(InputRow)`
`; `;
const GasInput = styled(Input)` const GasInput = styled(Input)`
min-height: 85px; /* min-height: 85px; */
padding-bottom: 28px;
&:first-child { &:first-child {
padding-right: 20px; padding-right: 20px;
} }
@ -63,13 +60,12 @@ const GasInput = styled(Input)`
@media screen and (max-width: ${SmallScreenWidth}) { @media screen and (max-width: ${SmallScreenWidth}) {
&:first-child { &:first-child {
padding-right: 0; padding-right: 0;
margin-bottom: 2px;
} }
} }
`; `;
const StyledTextarea = styled(Textarea)` const StyledTextarea = styled(Textarea)`
margin-bottom: 20px; padding-bottom: 28px;
min-height: 80px; min-height: 80px;
`; `;
@ -214,17 +210,46 @@ const AdvancedForm = (props: Props) => {
spellCheck="false" spellCheck="false"
topLabel={( topLabel={(
<InputLabelWrapper> <InputLabelWrapper>
Gas price <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}
value={gasPrice}
onChange={event => onGasPriceChange(event.target.value)}
/>
</GasInputRow>
<StyledTextarea
topLabel={(
<InputLabelWrapper>
<Left>
Data
<Tooltip <Tooltip
content={( content={(
<React.Fragment> <React.Fragment>
Gas price refers to the amount of ether you are willing to pay for every Data is usually used when you send transactions to contracts.
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> </React.Fragment>
)} )}
maxWidth={400}
readMoreLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
placement="top" placement="top"
> >
<Icon <Icon
@ -233,32 +258,7 @@ const AdvancedForm = (props: Props) => {
size={24} size={24}
/> />
</Tooltip> </Tooltip>
</InputLabelWrapper> </Left>
)}
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
value={gasPrice}
onChange={event => onGasPriceChange(event.target.value)}
/>
</GasInputRow>
<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>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
state={getDataTextareaState(errors.data, warnings.data)} state={getDataTextareaState(errors.data, warnings.data)}

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

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

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

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

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

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

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

@ -33,7 +33,7 @@ const Dashboard = () => (
<H2>Dashboard</H2> <H2>Dashboard</H2>
<Row> <Row>
<H2>Please select your coin</H2> <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" /> <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
</Row> </Row>
</Wrapper> </Wrapper>

1859
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save