|
|
|
@ -2,21 +2,39 @@
|
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
|
import { Button, Link, Select, colors } from 'trezor-ui-components';
|
|
|
|
|
import Content from 'views/Wallet/components/Content';
|
|
|
|
|
|
|
|
|
|
import Content from 'views/Wallet/components/Content';
|
|
|
|
|
import {
|
|
|
|
|
Switch,
|
|
|
|
|
Select,
|
|
|
|
|
Link,
|
|
|
|
|
Button,
|
|
|
|
|
Tooltip,
|
|
|
|
|
Icon,
|
|
|
|
|
icons as ICONS,
|
|
|
|
|
colors,
|
|
|
|
|
} from 'trezor-ui-components';
|
|
|
|
|
import { FIAT_CURRENCIES } from 'config/app';
|
|
|
|
|
import { FONT_SIZE } from 'config/variables';
|
|
|
|
|
import l10nCommonMessages from 'views/common.messages';
|
|
|
|
|
import l10nMessages from './index.messages';
|
|
|
|
|
import type { Props } from './Container';
|
|
|
|
|
|
|
|
|
|
const StyledContent = styled(Content)`
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const CurrencySelect = styled(Select)`
|
|
|
|
|
min-width: 77px;
|
|
|
|
|
/* max-width: 200px; */
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const CurrencyLabel = styled.div`
|
|
|
|
|
const Label = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
color: ${colors.TEXT_SECONDARY};
|
|
|
|
|
align-items: center;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const LabelTop = styled.div`
|
|
|
|
|
color: ${colors.TEXT_SECONDARY};
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
`;
|
|
|
|
@ -25,8 +43,15 @@ const Section = styled.div`
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Row = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Actions = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Buttons = styled.div`
|
|
|
|
@ -41,16 +66,20 @@ const Info = styled.div`
|
|
|
|
|
align-self: center;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const TooltipIcon = styled(Icon)`
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const buildCurrencyOption = currency => {
|
|
|
|
|
return { value: currency, label: currency.toUpperCase() };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const WalletSettings = (props: Props) => (
|
|
|
|
|
<Content>
|
|
|
|
|
<StyledContent>
|
|
|
|
|
<Section>
|
|
|
|
|
<CurrencyLabel>
|
|
|
|
|
<LabelTop>
|
|
|
|
|
<FormattedMessage {...l10nMessages.TR_LOCAL_CURRENCY} />
|
|
|
|
|
</CurrencyLabel>
|
|
|
|
|
</LabelTop>
|
|
|
|
|
<CurrencySelect
|
|
|
|
|
isSearchable
|
|
|
|
|
isClearable={false}
|
|
|
|
@ -59,6 +88,26 @@ const WalletSettings = (props: Props) => (
|
|
|
|
|
options={FIAT_CURRENCIES.map(c => buildCurrencyOption(c))}
|
|
|
|
|
/>
|
|
|
|
|
</Section>
|
|
|
|
|
<Section>
|
|
|
|
|
<Row>
|
|
|
|
|
<Label>
|
|
|
|
|
<FormattedMessage {...l10nCommonMessages.TR_HIDE_BALANCE} />
|
|
|
|
|
<Tooltip
|
|
|
|
|
content={<FormattedMessage {...l10nMessages.TR_HIDE_BALANCE_EXPLAINED} />}
|
|
|
|
|
maxWidth={210}
|
|
|
|
|
placement="right"
|
|
|
|
|
>
|
|
|
|
|
<TooltipIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={24} />
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</Label>
|
|
|
|
|
<Switch
|
|
|
|
|
onChange={checked => {
|
|
|
|
|
props.setHideBalance(checked);
|
|
|
|
|
}}
|
|
|
|
|
checked={props.wallet.hideBalance}
|
|
|
|
|
/>
|
|
|
|
|
</Row>
|
|
|
|
|
</Section>
|
|
|
|
|
<Actions>
|
|
|
|
|
<Info>
|
|
|
|
|
<FormattedMessage {...l10nMessages.TR_THE_CHANGES_ARE_SAVED} />
|
|
|
|
@ -71,7 +120,7 @@ const WalletSettings = (props: Props) => (
|
|
|
|
|
</Link>
|
|
|
|
|
</Buttons>
|
|
|
|
|
</Actions>
|
|
|
|
|
</Content>
|
|
|
|
|
</StyledContent>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export default WalletSettings;
|
|
|
|
|