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

Merge branch 'master' into sign-and-verify-readonly

Browse Source
This commit is contained in:
slowbackspace 2018-12-10 16:26:31 +01:00
commit a9d860f065
16 changed files with 1922 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
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,8 @@
"redux-raven-middleware": "^1.2.0",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"styled-components": "^3.4.9",
"styled-media-query": "^2.0.2",
"styled-normalize": "^8.0.0",
"styled-components": "^4.1.2",
"styled-normalize": "^8.0.4",
"trezor-connect": "6.0.2",
"web3": "1.0.0-beta.35",
"webpack": "^4.16.3",

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

@ -99,7 +99,7 @@ const StyledTextarea = styled(Textarea)`
`;
const TopLabel = styled.span`
padding-bottom: 8px;
padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY};
`;

4
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};
`;
@ -183,7 +183,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>

21
src/views/Wallet/views/Account/Receive/index.js
View File

@ -2,9 +2,8 @@
import React from 'react';
import { QRCode } from 'react-qr-svg';
import styled from 'styled-components';
import media from 'styled-media-query';
import { H2 } from 'components/Heading';
import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
@ -20,7 +19,7 @@ import VerifyAddressTooltip from './components/VerifyAddressTooltip';
import type { Props } from './Container';
const Label = styled.div`
padding: 25px 0 5px 0;
padding-bottom: 10px;
color: ${colors.TEXT_SECONDARY};
`;
@ -43,14 +42,17 @@ const ShowAddressButton = styled(Button)`
display: flex;
height: 40px;
align-items: center;
align-self: flex-end;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
margin-top: 10px;
`}
align-self: auto;
border-radius: 3px;
}
`;
const ShowAddressIcon = styled(Icon)`
@ -76,10 +78,11 @@ const EyeButton = styled(Button)`
const Row = styled.div`
display: flex;
width: 100%;
padding-bottom: 28px;
${media.lessThan('795px')`
@media screen and (max-width: 795px) {
flex-direction: column;
`}
}
`;
const QrWrapper = styled.div`
@ -114,15 +117,15 @@ const AccountReceive = (props: Props) => {
return (
<Content>
<React.Fragment>
<H2>Receive Ethereum or tokens</H2>
<Title>Receive Ethereum or tokens</Title>
<AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
<Label>Address</Label>
<Row>
<Input
type="text"
isReceiveAddress
readOnly
autoSelect
topLabel="Address"
value={address}
isPartiallyHidden={isAddressHidden}
trezorAction={isAddressVerifying ? (

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)}

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

@ -34,7 +34,7 @@ const AmountInputLabel = styled.span`
`;
const InputRow = styled.div`
padding: 0 0 15px 0;
padding-bottom: 28px;
`;
const SetMaxAmountButton = styled(Button)`
@ -88,7 +88,7 @@ const FeeOptionWrapper = styled.div`
const FeeLabelWrapper = styled.div`
display: flex;
align-items: center;
margin-bottom: 4px;
padding-bottom: 10px;
`;
const FeeLabel = styled.span`

3
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)`

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

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

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

@ -21,7 +21,7 @@ import AddTokenMessage from './components/AddTokenMessage';
import type { Props } from './Container';
const AccountHeading = styled.div`
padding: 0 0 30px 0;
padding-bottom: 35px;
display: flex;
justify-content: space-between;
align-items: center;

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>

1872
yarn.lock
View File

File diff suppressed because it is too large Load Diff