arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-22 14:00:58 +00:00
Code Issues Releases Wiki Activity

moar trezor-ui-components

Browse Source
This commit is contained in:
slowbackspace 2019-03-18 13:25:09 +01:00
parent 5efba574e3
commit 1c6383ff50
8 changed files with 43 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/Wallet/views/Account/Receive/ethereum/index.js
View File

@ -3,17 +3,13 @@ import React from 'react';
import { QRCode } from 'react-qr-svg'; import { QRCode } from 'react-qr-svg';
import styled from 'styled-components'; import styled from 'styled-components';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button, Icon, Tooltip, Input, icons as ICONS } from 'trezor-ui-components'; import { Button, Icon, Tooltip, Input, colors, icons as ICONS } from 'trezor-ui-components';
import Title from 'views/Wallet/components/Title'; import Title from 'views/Wallet/components/Title';
import DeviceIcon from 'components/images/DeviceIcon'; import DeviceIcon from 'components/images/DeviceIcon';
import colors from 'config/colors';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import { CONTEXT_DEVICE } from 'actions/constants/modal';
import l10nCommonMessages from 'views/common.messages'; import l10nCommonMessages from 'views/common.messages';
import VerifyAddressTooltip from '../components/VerifyAddressTooltip'; import VerifyAddressTooltip from '../components/VerifyAddressTooltip';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
import l10nReceiveMessages from '../common.messages'; import l10nReceiveMessages from '../common.messages';

9
src/views/Wallet/views/Account/Receive/ripple/index.js
View File

@ -4,15 +4,10 @@ import { QRCode } from 'react-qr-svg';
import styled from 'styled-components'; import styled from 'styled-components';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button, Icon, Tooltip, Input, colors, icons as ICONS } from 'trezor-ui-components';
import Title from 'views/Wallet/components/Title'; import Title from 'views/Wallet/components/Title';
import Button from 'components/Button';
import Icon from 'components/Icon';
import Tooltip from 'components/Tooltip';
import Input from 'components/inputs/Input';
import DeviceIcon from 'components/images/DeviceIcon'; import DeviceIcon from 'components/images/DeviceIcon';
import ICONS from 'config/icons';
import colors from 'config/colors';
import { CONTEXT_DEVICE } from 'actions/constants/modal'; import { CONTEXT_DEVICE } from 'actions/constants/modal';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
@ -179,8 +174,8 @@ const AccountReceive = (props: Props) => {
<ShowAddressButton <ShowAddressButton
onClick={() => props.showAddress(account.accountPath)} onClick={() => props.showAddress(account.accountPath)}
isDisabled={device.connected && !discovery.completed} isDisabled={device.connected && !discovery.completed}
icon={ICONS.EYE}
> >
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />
<FormattedMessage {...l10nReceiveMessages.TR_SHOW_FULL_ADDRESS} /> <FormattedMessage {...l10nReceiveMessages.TR_SHOW_FULL_ADDRESS} />
</ShowAddressButton> </ShowAddressButton>
)} )}

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

@ -2,7 +2,6 @@
import * as React from 'react'; import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
import { import {
Link, Link,
@ -10,6 +9,7 @@ import {
TextArea as Textarea, TextArea as Textarea,
Tooltip, Tooltip,
Icon, Icon,
colors,
icons as ICONS, icons as ICONS,
} from 'trezor-ui-components'; } from 'trezor-ui-components';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';

13
src/views/Wallet/views/Account/Send/ethereum/index.js
View File

@ -3,13 +3,10 @@
import React from 'react'; import React from 'react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { Select, Button, Input, Link, Icon } from 'trezor-ui-components'; import { Select, Button, Input, Link, Icon, P, colors, icons as ICONS } from 'trezor-ui-components';
import ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION, SCREEN_SIZE } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, TRANSITION, SCREEN_SIZE } from 'config/variables';
import { FIAT_CURRENCIES } from 'config/app'; import { FIAT_CURRENCIES } from 'config/app';
import colors from 'config/colors';
import Title from 'views/Wallet/components/Title'; import Title from 'views/Wallet/components/Title';
import P from 'components/Paragraph';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import * as stateUtils from 'reducers/utils'; import * as stateUtils from 'reducers/utils';
import type { Token } from 'flowtype'; import type { Token } from 'flowtype';
@ -22,10 +19,6 @@ import l10nMessages from './index.messages';
import l10nSendMessages from '../../common.messages'; import l10nSendMessages from '../../common.messages';
import type { Props } from './Container'; import type { Props } from './Container';
// TODO: Decide on a small screen width for the whole app
// and put it inside config/variables.js
const SmallScreenWidth = '850px';
const AmountInputLabelWrapper = styled.div` const AmountInputLabelWrapper = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -172,7 +165,7 @@ const ToggleAdvancedSettingsWrapper = styled.div`
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@media screen and (max-width: ${SmallScreenWidth}) { @media screen and (max-width: ${SCREEN_SIZE.MD}) {
${props => ${props =>
props.isAdvancedSettingsHidden && props.isAdvancedSettingsHidden &&
css` css`
@ -194,7 +187,7 @@ const FormButtons = styled.div`
display: flex; display: flex;
flex: 1 1; flex: 1 1;
@media screen and (max-width: ${SmallScreenWidth}) { @media screen and (max-width: ${SCREEN_SIZE.MD}) {
margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)}; margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
} }

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

@ -3,13 +3,9 @@
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import { Input, Tooltip, Icon, colors, icons as ICONS } from 'trezor-ui-components';
import l10nSendMessages from 'views/Wallet/views/Account/common.messages'; import l10nSendMessages from 'views/Wallet/views/Account/common.messages';
import Input from 'components/inputs/Input';
import Tooltip from 'components/Tooltip';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
import type { Props as BaseProps } from '../../Container'; import type { Props as BaseProps } from '../../Container';

18
src/views/Wallet/views/Account/Send/ripple/index.js
View File

@ -2,18 +2,12 @@
import React from 'react'; import React from 'react';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { Select } from 'components/Select';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Button from 'components/Button';
import Input from 'components/inputs/Input'; import { Button, Select, Input, Icon, Link, P, colors, icons as ICONS } from 'trezor-ui-components';
import Icon from 'components/Icon';
import Link from 'components/Link';
import ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT, TRANSITION, SCREEN_SIZE } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, TRANSITION, SCREEN_SIZE } from 'config/variables';
import { FIAT_CURRENCIES } from 'config/app'; import { FIAT_CURRENCIES } from 'config/app';
import colors from 'config/colors';
import Title from 'views/Wallet/components/Title'; import Title from 'views/Wallet/components/Title';
import P from 'components/Paragraph';
import l10nCommonMessages from 'views/common.messages'; import l10nCommonMessages from 'views/common.messages';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import PendingTransactions from '../components/PendingTransactions'; import PendingTransactions from '../components/PendingTransactions';
@ -24,10 +18,6 @@ import l10nSendMessages from '../../common.messages';
import type { Props } from './Container'; import type { Props } from './Container';
// TODO: Decide on a small screen width for the whole app
// and put it inside config/variables.js
const SmallScreenWidth = '850px';
const AmountInputLabelWrapper = styled.div` const AmountInputLabelWrapper = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -136,7 +126,7 @@ const ToggleAdvancedSettingsWrapper = styled.div`
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@media screen and (max-width: ${SmallScreenWidth}) { @media screen and (max-width: ${SCREEN_SIZE.MD}) {
${props => ${props =>
props.isAdvancedSettingsHidden && props.isAdvancedSettingsHidden &&
css` css`
@ -158,7 +148,7 @@ const FormButtons = styled.div`
display: flex; display: flex;
flex: 1 1; flex: 1 1;
@media screen and (max-width: ${SmallScreenWidth}) { @media screen and (max-width: ${SCREEN_SIZE.MD}) {
margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)}; margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
} }

43
src/views/Wallet/views/Account/Summary/ethereum/index.js
View File

@ -1,21 +1,15 @@
/* @flow */ /* @flow */
import styled from 'styled-components';
import React from 'react'; import React from 'react';
import { H2 } from 'components/Heading'; import styled from 'styled-components';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import Icon from 'components/Icon'; import * as stateUtils from 'reducers/utils';
import { AsyncSelect } from 'components/Select';
import ICONS from 'config/icons';
import colors from 'config/colors';
import Tooltip from 'components/Tooltip';
import Content from 'views/Wallet/components/Content';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages'; import { H5, Icon, Link, AsyncSelect, Tooltip, colors, icons as ICONS } from 'trezor-ui-components';
import Content from 'views/Wallet/components/Content';
import CoinLogo from 'components/images/CoinLogo'; import CoinLogo from 'components/images/CoinLogo';
import * as stateUtils from 'reducers/utils';
import Link from 'components/Link';
import { FONT_WEIGHT, FONT_SIZE } from 'config/variables'; import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
import l10nCommonMessages from 'views/common.messages';
import l10nSummaryMessages from '../common.messages'; import l10nSummaryMessages from '../common.messages';
import AccountBalance from '../components/Balance'; import AccountBalance from '../components/Balance';
import AddedToken from '../components/Token'; import AddedToken from '../components/Token';
@ -30,17 +24,12 @@ const AccountHeading = styled.div`
align-items: center; align-items: center;
`; `;
const H2Wrapper = styled.div` const TokensHeadingWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
`; `;
const StyledTooltip = styled(Tooltip)`
position: relative;
top: 2px;
`;
const AccountName = styled.div` const AccountName = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -62,6 +51,10 @@ const StyledIcon = styled(Icon)`
} }
`; `;
const StyledLink = styled(Link)`
font-size: ${FONT_SIZE.SMALL};
`;
const AsyncSelectWrapper = styled.div` const AsyncSelectWrapper = styled.div`
padding-bottom: 32px; padding-bottom: 32px;
`; `;
@ -94,11 +87,11 @@ const AccountSummary = (props: Props) => {
/> />
</AccountTitle> </AccountTitle>
</AccountName> </AccountName>
<Link href={explorerLink} isGray> <StyledLink href={explorerLink} isGray>
<FormattedMessage <FormattedMessage
{...l10nSummaryMessages.TR_SEE_FULL_TRANSACTION_HISTORY} {...l10nSummaryMessages.TR_SEE_FULL_TRANSACTION_HISTORY}
/> />
</Link> </StyledLink>
</AccountHeading> </AccountHeading>
<AccountBalance <AccountBalance
network={network} network={network}
@ -106,18 +99,18 @@ const AccountSummary = (props: Props) => {
fiat={props.fiat} fiat={props.fiat}
localCurrency={props.wallet.localCurrency} localCurrency={props.wallet.localCurrency}
/> />
<H2Wrapper> <TokensHeadingWrapper>
<H2> <H5>
<FormattedMessage {...l10nSummaryMessages.TR_TOKENS} /> <FormattedMessage {...l10nSummaryMessages.TR_TOKENS} />
</H2> </H5>
<StyledTooltip <Tooltip
maxWidth={200} maxWidth={200}
placement="top" placement="top"
content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)} content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)}
> >
<StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={24} /> <StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={24} />
</StyledTooltip> </Tooltip>
</H2Wrapper> </TokensHeadingWrapper>
<AsyncSelectWrapper> <AsyncSelectWrapper>
<AsyncSelect <AsyncSelect
isSearchable isSearchable

25
src/views/Wallet/views/Account/Summary/ripple/index.js
View File

@ -1,17 +1,16 @@
/* @flow */ /* @flow */
import styled from 'styled-components';
import React from 'react'; import React from 'react';
import { H2 } from 'components/Heading'; import styled from 'styled-components';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import colors from 'config/colors';
import Content from 'views/Wallet/components/Content';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages';
import CoinLogo from 'components/images/CoinLogo';
import * as stateUtils from 'reducers/utils'; import * as stateUtils from 'reducers/utils';
import Link from 'components/Link';
import { H5, Link, colors } from 'trezor-ui-components';
import CoinLogo from 'components/images/CoinLogo';
import Content from 'views/Wallet/components/Content';
import { FONT_WEIGHT, FONT_SIZE } from 'config/variables'; import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
import l10nCommonMessages from 'views/common.messages';
import l10nSummaryMessages from '../common.messages'; import l10nSummaryMessages from '../common.messages';
import AccountBalance from './components/Balance'; import AccountBalance from './components/Balance';
@ -24,7 +23,7 @@ const AccountHeading = styled.div`
align-items: center; align-items: center;
`; `;
const H2Wrapper = styled.div` const HeadingWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
@ -88,11 +87,11 @@ const AccountSummary = (props: Props) => {
localCurrency={props.wallet.localCurrency} localCurrency={props.wallet.localCurrency}
/> />
{TMP_SHOW_HISTORY && ( {TMP_SHOW_HISTORY && (
<H2Wrapper> <HeadingWrapper>
<H2> <H5>
<FormattedMessage {...l10nSummaryMessages.TR_HISTORY} /> <FormattedMessage {...l10nSummaryMessages.TR_HISTORY} />
</H2> </H5>
</H2Wrapper> </HeadingWrapper>
)} )}
</React.Fragment> </React.Fragment>
</Content> </Content>