mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 00:18:07 +00:00
Added content for padding
This commit is contained in:
parent
4ea99f4dcd
commit
7e752ace44
@ -1,54 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import colors from 'config/colors';
|
|
||||||
import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
padding:
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Textarea = ({
|
|
||||||
className,
|
|
||||||
placeholder = '',
|
|
||||||
value,
|
|
||||||
customStyle = {},
|
|
||||||
onFocus,
|
|
||||||
onBlur,
|
|
||||||
isDisabled,
|
|
||||||
onChange,
|
|
||||||
isError,
|
|
||||||
topLabel,
|
|
||||||
}) => (
|
|
||||||
<Wrapper>
|
|
||||||
{topLabel && (
|
|
||||||
<TopLabel>{topLabel}</TopLabel>
|
|
||||||
)}
|
|
||||||
<StyledTextarea
|
|
||||||
className={className}
|
|
||||||
disabled={isDisabled}
|
|
||||||
style={customStyle}
|
|
||||||
onFocus={onFocus}
|
|
||||||
onBlur={onBlur}
|
|
||||||
value={value}
|
|
||||||
placeholder={placeholder}
|
|
||||||
onChange={onChange}
|
|
||||||
isError={isError}
|
|
||||||
/>
|
|
||||||
</Wrapper>
|
|
||||||
);
|
|
||||||
|
|
||||||
Textarea.propTypes = {
|
|
||||||
className: PropTypes.string,
|
|
||||||
isError: PropTypes.bool,
|
|
||||||
onFocus: PropTypes.func,
|
|
||||||
onBlur: PropTypes.func,
|
|
||||||
onChange: PropTypes.func,
|
|
||||||
customStyle: PropTypes.string,
|
|
||||||
placeholder: PropTypes.string,
|
|
||||||
value: PropTypes.string,
|
|
||||||
isDisabled: PropTypes.bool,
|
|
||||||
topLabel: PropTypes.node,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Textarea;
|
|
24
src/views/Wallet/components/Content/index.js
Normal file
24
src/views/Wallet/components/Content/index.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40px 35px 40px 35px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Content = ({
|
||||||
|
children,
|
||||||
|
}) => (
|
||||||
|
<Wrapper>
|
||||||
|
{children}
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
|
||||||
|
Content.propTypes = {
|
||||||
|
children: PropTypes.element,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Content;
|
@ -77,7 +77,6 @@ const Body = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 40px 35px 40px 35px;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Wallet = (props: WalletContainerProps) => (
|
const Wallet = (props: WalletContainerProps) => (
|
||||||
|
@ -5,6 +5,7 @@ import { H2 } from 'components/Heading';
|
|||||||
import Button from 'components/Button';
|
import Button from 'components/Button';
|
||||||
import Icon from 'components/Icon';
|
import Icon from 'components/Icon';
|
||||||
import ICONS from 'config/icons';
|
import ICONS from 'config/icons';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
|
|
||||||
import Tooltip from 'components/Tooltip';
|
import Tooltip from 'components/Tooltip';
|
||||||
@ -142,79 +143,81 @@ const AccountReceive = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SelectedAccount {...props}>
|
<SelectedAccount {...props}>
|
||||||
<Wrapper>
|
<Content>
|
||||||
<H2>Receive Ethereum or tokens</H2>
|
<Wrapper>
|
||||||
<AddressWrapper
|
<H2>Receive Ethereum or tokens</H2>
|
||||||
isShowingQrCode={addressVerified || addressUnverified}
|
<AddressWrapper
|
||||||
>
|
isShowingQrCode={addressVerified || addressUnverified}
|
||||||
{isAddressVerifying && (
|
|
||||||
<AddressInfoText>Confirm address on TREZOR</AddressInfoText>
|
|
||||||
)}
|
|
||||||
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
|
||||||
<Tooltip
|
|
||||||
placement="bottomRight"
|
|
||||||
content={(
|
|
||||||
<React.Fragment>
|
|
||||||
{addressUnverified ? (
|
|
||||||
<React.Fragment>
|
|
||||||
Unverified address.
|
|
||||||
<br />
|
|
||||||
{device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
|
|
||||||
</React.Fragment>
|
|
||||||
) : (
|
|
||||||
<React.Fragment>
|
|
||||||
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<EyeButton
|
|
||||||
isTransparent
|
|
||||||
onClick={() => props.showAddress(account.addressPath)}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
|
||||||
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
|
||||||
/>
|
|
||||||
</EyeButton>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<ValueWrapper
|
|
||||||
isHidden={isAddressHidden}
|
|
||||||
isVerifying={isAddressVerifying}
|
|
||||||
>
|
>
|
||||||
{address}
|
{isAddressVerifying && (
|
||||||
</ValueWrapper>
|
<AddressInfoText>Confirm address on TREZOR</AddressInfoText>
|
||||||
{isAddressVerifying && (
|
)}
|
||||||
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
|
{((addressVerified || addressUnverified) && !isAddressVerifying) && (
|
||||||
)}
|
<Tooltip
|
||||||
{(addressVerified || addressUnverified) && (
|
placement="bottomRight"
|
||||||
<React.Fragment>
|
content={(
|
||||||
<Label>QR code</Label>
|
<React.Fragment>
|
||||||
<StyledQRCode
|
{addressUnverified ? (
|
||||||
bgColor="#FFFFFF"
|
<React.Fragment>
|
||||||
fgColor="#000000"
|
Unverified address.
|
||||||
level="Q"
|
<br />
|
||||||
style={{ width: 150 }}
|
{device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
|
||||||
value={account.address}
|
</React.Fragment>
|
||||||
/>
|
) : (
|
||||||
</React.Fragment>
|
<React.Fragment>
|
||||||
)}
|
{device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
|
||||||
{!(addressVerified || addressUnverified) && (
|
</React.Fragment>
|
||||||
<ShowAddressButton
|
)}
|
||||||
onClick={() => props.showAddress(account.addressPath)}
|
</React.Fragment>
|
||||||
isDisabled={device.connected && !discovery.completed}
|
)}
|
||||||
|
>
|
||||||
|
<EyeButton
|
||||||
|
isTransparent
|
||||||
|
onClick={() => props.showAddress(account.addressPath)}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
|
||||||
|
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
|
||||||
|
/>
|
||||||
|
</EyeButton>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<ValueWrapper
|
||||||
|
isHidden={isAddressHidden}
|
||||||
|
isVerifying={isAddressVerifying}
|
||||||
>
|
>
|
||||||
<ShowAddressIcon
|
{address}
|
||||||
icon={ICONS.EYE}
|
</ValueWrapper>
|
||||||
color={colors.WHITE}
|
{isAddressVerifying && (
|
||||||
/>
|
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
|
||||||
|
)}
|
||||||
|
{(addressVerified || addressUnverified) && (
|
||||||
|
<React.Fragment>
|
||||||
|
<Label>QR code</Label>
|
||||||
|
<StyledQRCode
|
||||||
|
bgColor="#FFFFFF"
|
||||||
|
fgColor="#000000"
|
||||||
|
level="Q"
|
||||||
|
style={{ width: 150 }}
|
||||||
|
value={account.address}
|
||||||
|
/>
|
||||||
|
</React.Fragment>
|
||||||
|
)}
|
||||||
|
{!(addressVerified || addressUnverified) && (
|
||||||
|
<ShowAddressButton
|
||||||
|
onClick={() => props.showAddress(account.addressPath)}
|
||||||
|
isDisabled={device.connected && !discovery.completed}
|
||||||
|
>
|
||||||
|
<ShowAddressIcon
|
||||||
|
icon={ICONS.EYE}
|
||||||
|
color={colors.WHITE}
|
||||||
|
/>
|
||||||
Show full address
|
Show full address
|
||||||
</ShowAddressButton>
|
</ShowAddressButton>
|
||||||
)}
|
)}
|
||||||
</AddressWrapper>
|
</AddressWrapper>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
</Content>
|
||||||
</SelectedAccount>
|
</SelectedAccount>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -12,6 +12,7 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
|||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
||||||
import type { Token } from 'flowtype';
|
import type { Token } from 'flowtype';
|
||||||
import AdvancedForm from './components/AdvancedForm';
|
import AdvancedForm from './components/AdvancedForm';
|
||||||
@ -230,148 +231,150 @@ const AccountSend = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SelectedAccount {...props}>
|
<SelectedAccount {...props}>
|
||||||
<Wrapper>
|
<Content>
|
||||||
<H2>Send Ethereum or tokens</H2>
|
<Wrapper>
|
||||||
<InputRow>
|
<H2>Send Ethereum or tokens</H2>
|
||||||
<Input
|
<InputRow>
|
||||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
<Input
|
||||||
autoComplete="off"
|
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||||
autoCorrect="off"
|
autoComplete="off"
|
||||||
autoCapitalize="off"
|
autoCorrect="off"
|
||||||
spellCheck="false"
|
autoCapitalize="off"
|
||||||
topLabel="Address"
|
spellCheck="false"
|
||||||
bottomText={errors.address || warnings.address || infos.address}
|
topLabel="Address"
|
||||||
value={address}
|
bottomText={errors.address || warnings.address || infos.address}
|
||||||
onChange={event => onAddressChange(event.target.value)}
|
value={address}
|
||||||
/>
|
onChange={event => onAddressChange(event.target.value)}
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<InputRow>
|
|
||||||
<Input
|
|
||||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
|
||||||
autoComplete="off"
|
|
||||||
autoCorrect="off"
|
|
||||||
autoCapitalize="off"
|
|
||||||
spellCheck="false"
|
|
||||||
topLabel="Amount"
|
|
||||||
value={amount}
|
|
||||||
onChange={event => onAmountChange(event.target.value)}
|
|
||||||
bottomText={errors.amount || warnings.amount || infos.amount}
|
|
||||||
sideAddons={[
|
|
||||||
(
|
|
||||||
<SetMaxAmountButton
|
|
||||||
key="icon"
|
|
||||||
onClick={() => onSetMax()}
|
|
||||||
isActive={setMax}
|
|
||||||
>
|
|
||||||
{!setMax && (
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.TOP}
|
|
||||||
size={25}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{setMax && (
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.CHECKED}
|
|
||||||
size={25}
|
|
||||||
color={colors.WHITE}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
Set max
|
|
||||||
</SetMaxAmountButton>
|
|
||||||
),
|
|
||||||
(
|
|
||||||
<CurrencySelect
|
|
||||||
key="currency"
|
|
||||||
isSearchable={false}
|
|
||||||
isClearable={false}
|
|
||||||
defaultValue={tokensSelectData[0]}
|
|
||||||
isDisabled={tokensSelectData.length < 2}
|
|
||||||
onChange={onCurrencyChange}
|
|
||||||
options={tokensSelectData}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<InputRow>
|
|
||||||
<FeeLabelWrapper>
|
|
||||||
<FeeLabel>Fee</FeeLabel>
|
|
||||||
{gasPriceNeedsUpdate && (
|
|
||||||
<UpdateFeeWrapper>
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.WARNING}
|
|
||||||
color={colors.WARNING_PRIMARY}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
|
|
||||||
</UpdateFeeWrapper>
|
|
||||||
)}
|
|
||||||
</FeeLabelWrapper>
|
|
||||||
<Select
|
|
||||||
isSearchable={false}
|
|
||||||
isClearable={false}
|
|
||||||
value={selectedFeeLevel}
|
|
||||||
onChange={onFeeLevelChange}
|
|
||||||
options={feeLevels}
|
|
||||||
formatOptionLabel={option => (
|
|
||||||
<FeeOptionWrapper>
|
|
||||||
<P>{option.value}</P>
|
|
||||||
<P>{option.label}</P>
|
|
||||||
</FeeOptionWrapper>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<ToggleAdvancedSettingsWrapper
|
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
|
||||||
>
|
|
||||||
<ToggleAdvancedSettingsButton
|
|
||||||
isTransparent
|
|
||||||
onClick={toggleAdvanced}
|
|
||||||
>
|
|
||||||
Advanced settings
|
|
||||||
<AdvancedSettingsIcon
|
|
||||||
icon={ICONS.ARROW_DOWN}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
size={24}
|
|
||||||
isActive={advanced}
|
|
||||||
canAnimate
|
|
||||||
/>
|
/>
|
||||||
</ToggleAdvancedSettingsButton>
|
</InputRow>
|
||||||
|
|
||||||
{isAdvancedSettingsHidden && (
|
<InputRow>
|
||||||
<SendButton
|
<Input
|
||||||
isDisabled={isSendButtonDisabled}
|
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
autoComplete="off"
|
||||||
onClick={() => onSend()}
|
autoCorrect="off"
|
||||||
|
autoCapitalize="off"
|
||||||
|
spellCheck="false"
|
||||||
|
topLabel="Amount"
|
||||||
|
value={amount}
|
||||||
|
onChange={event => onAmountChange(event.target.value)}
|
||||||
|
bottomText={errors.amount || warnings.amount || infos.amount}
|
||||||
|
sideAddons={[
|
||||||
|
(
|
||||||
|
<SetMaxAmountButton
|
||||||
|
key="icon"
|
||||||
|
onClick={() => onSetMax()}
|
||||||
|
isActive={setMax}
|
||||||
|
>
|
||||||
|
{!setMax && (
|
||||||
|
<Icon
|
||||||
|
icon={ICONS.TOP}
|
||||||
|
size={25}
|
||||||
|
color={colors.TEXT_SECONDARY}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{setMax && (
|
||||||
|
<Icon
|
||||||
|
icon={ICONS.CHECKED}
|
||||||
|
size={25}
|
||||||
|
color={colors.WHITE}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
Set max
|
||||||
|
</SetMaxAmountButton>
|
||||||
|
),
|
||||||
|
(
|
||||||
|
<CurrencySelect
|
||||||
|
key="currency"
|
||||||
|
isSearchable={false}
|
||||||
|
isClearable={false}
|
||||||
|
defaultValue={tokensSelectData[0]}
|
||||||
|
isDisabled={tokensSelectData.length < 2}
|
||||||
|
onChange={onCurrencyChange}
|
||||||
|
options={tokensSelectData}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</InputRow>
|
||||||
|
|
||||||
|
<InputRow>
|
||||||
|
<FeeLabelWrapper>
|
||||||
|
<FeeLabel>Fee</FeeLabel>
|
||||||
|
{gasPriceNeedsUpdate && (
|
||||||
|
<UpdateFeeWrapper>
|
||||||
|
<Icon
|
||||||
|
icon={ICONS.WARNING}
|
||||||
|
color={colors.WARNING_PRIMARY}
|
||||||
|
size={20}
|
||||||
|
/>
|
||||||
|
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
|
||||||
|
</UpdateFeeWrapper>
|
||||||
|
)}
|
||||||
|
</FeeLabelWrapper>
|
||||||
|
<Select
|
||||||
|
isSearchable={false}
|
||||||
|
isClearable={false}
|
||||||
|
value={selectedFeeLevel}
|
||||||
|
onChange={onFeeLevelChange}
|
||||||
|
options={feeLevels}
|
||||||
|
formatOptionLabel={option => (
|
||||||
|
<FeeOptionWrapper>
|
||||||
|
<P>{option.value}</P>
|
||||||
|
<P>{option.label}</P>
|
||||||
|
</FeeOptionWrapper>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</InputRow>
|
||||||
|
|
||||||
|
<ToggleAdvancedSettingsWrapper
|
||||||
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
|
>
|
||||||
|
<ToggleAdvancedSettingsButton
|
||||||
|
isTransparent
|
||||||
|
onClick={toggleAdvanced}
|
||||||
>
|
>
|
||||||
{sendButtonText}
|
Advanced settings
|
||||||
</SendButton>
|
<AdvancedSettingsIcon
|
||||||
|
icon={ICONS.ARROW_DOWN}
|
||||||
|
color={colors.TEXT_SECONDARY}
|
||||||
|
size={24}
|
||||||
|
isActive={advanced}
|
||||||
|
canAnimate
|
||||||
|
/>
|
||||||
|
</ToggleAdvancedSettingsButton>
|
||||||
|
|
||||||
|
{isAdvancedSettingsHidden && (
|
||||||
|
<SendButton
|
||||||
|
isDisabled={isSendButtonDisabled}
|
||||||
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
|
onClick={() => onSend()}
|
||||||
|
>
|
||||||
|
{sendButtonText}
|
||||||
|
</SendButton>
|
||||||
|
)}
|
||||||
|
</ToggleAdvancedSettingsWrapper>
|
||||||
|
|
||||||
|
{advanced && (
|
||||||
|
<AdvancedForm {...props}>
|
||||||
|
<SendButton
|
||||||
|
isDisabled={isSendButtonDisabled}
|
||||||
|
onClick={() => onSend()}
|
||||||
|
>
|
||||||
|
{sendButtonText}
|
||||||
|
</SendButton>
|
||||||
|
</AdvancedForm>
|
||||||
)}
|
)}
|
||||||
</ToggleAdvancedSettingsWrapper>
|
|
||||||
|
|
||||||
{advanced && (
|
{props.selectedAccount.pending.length > 0 && (
|
||||||
<AdvancedForm {...props}>
|
<PendingTransactions
|
||||||
<SendButton
|
pending={props.selectedAccount.pending}
|
||||||
isDisabled={isSendButtonDisabled}
|
tokens={props.selectedAccount.tokens}
|
||||||
onClick={() => onSend()}
|
network={network}
|
||||||
>
|
/>
|
||||||
{sendButtonText}
|
)}
|
||||||
</SendButton>
|
</Wrapper>
|
||||||
</AdvancedForm>
|
</Content>
|
||||||
)}
|
|
||||||
|
|
||||||
{props.selectedAccount.pending.length > 0 && (
|
|
||||||
<PendingTransactions
|
|
||||||
pending={props.selectedAccount.pending}
|
|
||||||
tokens={props.selectedAccount.tokens}
|
|
||||||
network={network}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Wrapper>
|
|
||||||
</SelectedAccount>
|
</SelectedAccount>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Input from 'components/inputs/Input';
|
import Input from 'components/inputs/Input';
|
||||||
import Textarea from 'components/Textarea';
|
import Textarea from 'components/Textarea';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
|
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
@ -35,26 +36,28 @@ const Label = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const AccountSignVerify = () => (
|
const AccountSignVerify = () => (
|
||||||
<Wrapper>
|
<Content>
|
||||||
<Sign>
|
<Wrapper>
|
||||||
<StyledH2>Sign message</StyledH2>
|
<Sign>
|
||||||
<Label>Message</Label>
|
<StyledH2>Sign message</StyledH2>
|
||||||
<Textarea rows="4" maxLength="255" />
|
<Label>Message</Label>
|
||||||
<Label>Address</Label>
|
<Textarea rows="4" maxLength="255" />
|
||||||
<Input type="text" />
|
<Label>Address</Label>
|
||||||
<Label>Signature</Label>
|
<Input type="text" />
|
||||||
<Textarea rows="4" maxLength="255" readOnly="readonly" />
|
<Label>Signature</Label>
|
||||||
</Sign>
|
<Textarea rows="4" maxLength="255" readOnly="readonly" />
|
||||||
<Verify>
|
</Sign>
|
||||||
<StyledH2>Verify message</StyledH2>
|
<Verify>
|
||||||
<Label>Message</Label>
|
<StyledH2>Verify message</StyledH2>
|
||||||
<Textarea rows="4" maxLength="255" />
|
<Label>Message</Label>
|
||||||
<Label>Address</Label>
|
<Textarea rows="4" maxLength="255" />
|
||||||
<Input type="text" />
|
<Label>Address</Label>
|
||||||
<Label>Signature</Label>
|
<Input type="text" />
|
||||||
<Textarea rows="4" maxLength="255" />
|
<Label>Signature</Label>
|
||||||
</Verify>
|
<Textarea rows="4" maxLength="255" />
|
||||||
</Wrapper>
|
</Verify>
|
||||||
|
</Wrapper>
|
||||||
|
</Content>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default AccountSignVerify;
|
export default AccountSignVerify;
|
@ -8,6 +8,7 @@ import { AsyncSelect } from 'components/Select';
|
|||||||
import ICONS from 'config/icons';
|
import ICONS from 'config/icons';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import Tooltip from 'components/Tooltip';
|
import Tooltip from 'components/Tooltip';
|
||||||
|
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 * as stateUtils from 'reducers/utils';
|
||||||
@ -77,84 +78,86 @@ const AccountSummary = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SelectedAccount {...props}>
|
<SelectedAccount {...props}>
|
||||||
<AccountHeading>
|
<Content>
|
||||||
<AccountName>
|
<AccountHeading>
|
||||||
<StyledCoinLogo coinNetwork={account.network} />
|
<AccountName>
|
||||||
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
|
<StyledCoinLogo coinNetwork={account.network} />
|
||||||
</AccountName>
|
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
|
||||||
<Link
|
</AccountName>
|
||||||
target="_blank"
|
<Link
|
||||||
rel="noreferrer noopener"
|
target="_blank"
|
||||||
href={explorerLink}
|
rel="noreferrer noopener"
|
||||||
isGray
|
href={explorerLink}
|
||||||
>See full transaction history
|
isGray
|
||||||
</Link>
|
>See full transaction history
|
||||||
</AccountHeading>
|
</Link>
|
||||||
<AccountBalance
|
</AccountHeading>
|
||||||
coin={network}
|
<AccountBalance
|
||||||
summary={props.summary}
|
coin={network}
|
||||||
balance={balance}
|
summary={props.summary}
|
||||||
network={network.network}
|
balance={balance}
|
||||||
fiat={props.fiat}
|
network={network.network}
|
||||||
localStorage={props.localStorage}
|
fiat={props.fiat}
|
||||||
/>
|
localStorage={props.localStorage}
|
||||||
<H2Wrapper>
|
|
||||||
<H2>Tokens</H2>
|
|
||||||
<StyledTooltip
|
|
||||||
maxWidth={200}
|
|
||||||
placement="top"
|
|
||||||
content="Insert token name, symbol or address to be able to send it."
|
|
||||||
>
|
|
||||||
<StyledIcon
|
|
||||||
icon={ICONS.HELP}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
size={24}
|
|
||||||
/>
|
|
||||||
</StyledTooltip>
|
|
||||||
</H2Wrapper>
|
|
||||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
|
||||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
|
||||||
|
|
||||||
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
|
|
||||||
{/* TODO: Input's box-shadow */}
|
|
||||||
<AsyncSelectWrapper>
|
|
||||||
<AsyncSelect
|
|
||||||
isSearchable
|
|
||||||
defaultOptions
|
|
||||||
value={null}
|
|
||||||
isMulti={false}
|
|
||||||
placeholder="Search for the token"
|
|
||||||
loadingMessage={() => 'Loading...'}
|
|
||||||
noOptionsMessage={() => 'Token not found'}
|
|
||||||
onChange={(token) => {
|
|
||||||
const isAdded = tokens.find(t => t.symbol === token.symbol);
|
|
||||||
if (!isAdded) {
|
|
||||||
props.addToken(token, account);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
loadOptions={input => props.loadTokens(input, account.network)}
|
|
||||||
formatOptionLabel={(option) => {
|
|
||||||
const isAdded = tokens.find(t => t.symbol === option.symbol);
|
|
||||||
if (isAdded) {
|
|
||||||
return `${option.name} (Already added)`;
|
|
||||||
}
|
|
||||||
return option.name;
|
|
||||||
}}
|
|
||||||
getOptionLabel={option => option.name}
|
|
||||||
getOptionValue={option => option.symbol}
|
|
||||||
/>
|
/>
|
||||||
</AsyncSelectWrapper>
|
<H2Wrapper>
|
||||||
|
<H2>Tokens</H2>
|
||||||
|
<StyledTooltip
|
||||||
|
maxWidth={200}
|
||||||
|
placement="top"
|
||||||
|
content="Insert token name, symbol or address to be able to send it."
|
||||||
|
>
|
||||||
|
<StyledIcon
|
||||||
|
icon={ICONS.HELP}
|
||||||
|
color={colors.TEXT_SECONDARY}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
</StyledTooltip>
|
||||||
|
</H2Wrapper>
|
||||||
|
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
||||||
|
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
||||||
|
|
||||||
<AddedTokensWrapper>
|
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
|
||||||
{tokens.map(token => (
|
{/* TODO: Input's box-shadow */}
|
||||||
<AddedToken
|
<AsyncSelectWrapper>
|
||||||
key={token.symbol}
|
<AsyncSelect
|
||||||
token={token}
|
isSearchable
|
||||||
pending={pending}
|
defaultOptions
|
||||||
removeToken={props.removeToken}
|
value={null}
|
||||||
|
isMulti={false}
|
||||||
|
placeholder="Search for the token"
|
||||||
|
loadingMessage={() => 'Loading...'}
|
||||||
|
noOptionsMessage={() => 'Token not found'}
|
||||||
|
onChange={(token) => {
|
||||||
|
const isAdded = tokens.find(t => t.symbol === token.symbol);
|
||||||
|
if (!isAdded) {
|
||||||
|
props.addToken(token, account);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
loadOptions={input => props.loadTokens(input, account.network)}
|
||||||
|
formatOptionLabel={(option) => {
|
||||||
|
const isAdded = tokens.find(t => t.symbol === option.symbol);
|
||||||
|
if (isAdded) {
|
||||||
|
return `${option.name} (Already added)`;
|
||||||
|
}
|
||||||
|
return option.name;
|
||||||
|
}}
|
||||||
|
getOptionLabel={option => option.name}
|
||||||
|
getOptionValue={option => option.symbol}
|
||||||
/>
|
/>
|
||||||
))}
|
</AsyncSelectWrapper>
|
||||||
</AddedTokensWrapper>
|
|
||||||
|
<AddedTokensWrapper>
|
||||||
|
{tokens.map(token => (
|
||||||
|
<AddedToken
|
||||||
|
key={token.symbol}
|
||||||
|
token={token}
|
||||||
|
pending={pending}
|
||||||
|
removeToken={props.removeToken}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</AddedTokensWrapper>
|
||||||
|
</Content>
|
||||||
</SelectedAccount>
|
</SelectedAccount>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
|
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import DashboardImg from 'images/dashboard.png';
|
import DashboardImg from 'images/dashboard.png';
|
||||||
@ -27,14 +28,16 @@ const P = styled.p`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const Dashboard = () => (
|
const Dashboard = () => (
|
||||||
<Wrapper>
|
<Content>
|
||||||
<H2>Dashboard</H2>
|
<Wrapper>
|
||||||
<Row>
|
<H2>Dashboard</H2>
|
||||||
<H2>Please select your coin</H2>
|
<Row>
|
||||||
<P>You will gain access to recieving & sending selected coin</P>
|
<H2>Please select your coin</H2>
|
||||||
<img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
|
<P>You will gain access to recieving & sending selected coin</P>
|
||||||
</Row>
|
<img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
|
||||||
</Wrapper>
|
</Row>
|
||||||
|
</Wrapper>
|
||||||
|
</Content>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default connect(null, null)(Dashboard);
|
export default connect(null, null)(Dashboard);
|
||||||
|
@ -7,6 +7,7 @@ import Button from 'components/Button';
|
|||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import Link from 'components/Link';
|
import Link from 'components/Link';
|
||||||
import ICONS from 'config/icons';
|
import ICONS from 'config/icons';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
const Section = styled.section`
|
const Section = styled.section`
|
||||||
@ -30,20 +31,22 @@ const StyledP = styled(P)`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const DeviceSettings = () => (
|
const DeviceSettings = () => (
|
||||||
<Section>
|
<Content>
|
||||||
<Row>
|
<Section>
|
||||||
<Icon
|
<Row>
|
||||||
size={60}
|
<Icon
|
||||||
color={colors.WARNING_PRIMARY}
|
size={60}
|
||||||
icon={ICONS.WARNING}
|
color={colors.WARNING_PRIMARY}
|
||||||
/>
|
icon={ICONS.WARNING}
|
||||||
<H2>Device settings is under construction</H2>
|
/>
|
||||||
<StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
|
<H2>Device settings is under construction</H2>
|
||||||
<Link href="https://wallet.trezor.io/">
|
<StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
|
||||||
<Button>Take me to the Bitcoin wallet</Button>
|
<Link href="https://wallet.trezor.io/">
|
||||||
</Link>
|
<Button>Take me to the Bitcoin wallet</Button>
|
||||||
</Row>
|
</Link>
|
||||||
</Section>
|
</Row>
|
||||||
|
</Section>
|
||||||
|
</Content>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default connect(null, null)(DeviceSettings);
|
export default connect(null, null)(DeviceSettings);
|
||||||
|
@ -1,13 +1,16 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import Content from 'views/Wallet/components/Content';
|
||||||
|
|
||||||
const Wrapper = styled.div``;
|
const Wrapper = styled.div``;
|
||||||
|
|
||||||
const WalletSettings = () => (
|
const WalletSettings = () => (
|
||||||
<Wrapper>
|
<Content>
|
||||||
Wallet settings
|
<Wrapper>
|
||||||
</Wrapper>
|
Wallet settings
|
||||||
|
</Wrapper>
|
||||||
|
</Content>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default connect(null, null)(WalletSettings);
|
export default connect(null, null)(WalletSettings);
|
||||||
|
@ -65,7 +65,7 @@ module.exports = {
|
|||||||
plugins: [
|
plugins: [
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env.BUILD': JSON.stringify(process.env.BUILD),
|
'process.env.BUILD': JSON.stringify(process.env.BUILD),
|
||||||
COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash())
|
COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
chunks: ['index'],
|
chunks: ['index'],
|
||||||
|
Loading…
Reference in New Issue
Block a user