type(flow): upgrade flow-bin and add styled-components typedefs
This commit is contained in:
parent
98a1fc1a4a
commit
7e8e572f6a
|
@ -3,37 +3,33 @@
|
||||||
import React, { type ElementProps } from 'react';
|
import React, { type ElementProps } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
/* eslint-disable import/no-extraneous-dependencies */
|
|
||||||
/* eslint-disable max-len */
|
|
||||||
// $FlowFixMe
|
|
||||||
import { darken } from 'polished';
|
|
||||||
|
|
||||||
const DefaultButton = styled.button`
|
const DefaultButton = styled.button`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
font-size: ${props => `${props.theme.fontSize.regular}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular}em`};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
outline: none;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
transition: background-color 0.1s ${props => props.theme.colors.transitionEase};
|
transition: background-color 0.1s ${(props: PropsWithTheme<>) => props.theme.transitionEase};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Primary = styled(DefaultButton)`
|
const Primary = styled(DefaultButton)`
|
||||||
background-color: ${props => props.theme.colors.primary};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.primary};
|
||||||
color: ${props => props.theme.colors.secondary};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.secondary};
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${props => darken(0.1, props.theme.colors.primary(props))};
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: ${props => props.theme.colors.buttonBorderColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
@ -41,20 +37,20 @@ const Primary = styled(DefaultButton)`
|
||||||
|
|
||||||
const Secondary = styled(DefaultButton)`
|
const Secondary = styled(DefaultButton)`
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: ${props => props.theme.colors.secondary};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.secondary};
|
||||||
border: 2px solid ${props => props.theme.colors.buttonBorderColor};
|
border: 2px solid ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: ${props => props.theme.colors.primary};
|
border-color: ${(props: PropsWithTheme<>) => props.theme.colors.primary};
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: Transparent;
|
background-color: Transparent;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
color: ${props => props.theme.colors.buttonBorderColor};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: ${props => props.theme.colors.buttonBorderColor};
|
border-color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -101,18 +97,12 @@ export const Button = ({
|
||||||
const buttonLabel = isLoading ? 'Loading...' : label;
|
const buttonLabel = isLoading ? 'Loading...' : label;
|
||||||
|
|
||||||
const component = variant === 'primary' ? (
|
const component = variant === 'primary' ? (
|
||||||
<Primary
|
<Primary {...props} data-testid='PrimaryButton'>
|
||||||
{...props}
|
|
||||||
data-testid='PrimaryButton'
|
|
||||||
>
|
|
||||||
{icon ? <Icon src={icon} /> : null}
|
{icon ? <Icon src={icon} /> : null}
|
||||||
{buttonLabel}
|
{buttonLabel}
|
||||||
</Primary>
|
</Primary>
|
||||||
) : (
|
) : (
|
||||||
<Secondary
|
<Secondary {...props} data-testid='SecondaryButton'>
|
||||||
{...props}
|
|
||||||
data-testid='SecondaryButton'
|
|
||||||
>
|
|
||||||
{icon ? <Icon src={icon} /> : null}
|
{icon ? <Icon src={icon} /> : null}
|
||||||
{buttonLabel}
|
{buttonLabel}
|
||||||
</Secondary>
|
</Secondary>
|
||||||
|
|
|
@ -3,12 +3,19 @@
|
||||||
import React, { type Node, type ElementProps } from 'react';
|
import React, { type Node, type ElementProps } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
type FlexProps =
|
||||||
|
| {
|
||||||
|
alignItems: string,
|
||||||
|
justifyContent: string,
|
||||||
|
width: string,
|
||||||
|
}
|
||||||
|
| Object;
|
||||||
const Flex = styled.div`
|
const Flex = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: ${props => props.alignItems};
|
align-items: ${(props: FlexProps) => props.alignItems};
|
||||||
justify-content: ${props => props.justifyContent};
|
justify-content: ${(props: FlexProps) => props.justifyContent};
|
||||||
${props => props.width && `width: ${props.width};`}
|
${(props: FlexProps) => props.width && `width: ${props.width};`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -12,8 +12,8 @@ import CloseIcon from '../assets/images/close_icon.svg';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
width: ${props => `${props.width}px`};
|
width: ${(props: PropsWithTheme<{ width: number }>) => `${props.width}px`};
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
@ -83,16 +83,10 @@ export const ConfirmDialogComponent = ({
|
||||||
{toggle => (
|
{toggle => (
|
||||||
<Wrapper width={Number(width)}>
|
<Wrapper width={Number(width)}>
|
||||||
<CloseIconWrapper>
|
<CloseIconWrapper>
|
||||||
<CloseIconImg
|
<CloseIconImg src={CloseIcon} onClick={handleClose(toggle)} />
|
||||||
src={CloseIcon}
|
|
||||||
onClick={handleClose(toggle)}
|
|
||||||
/>
|
|
||||||
</CloseIconWrapper>
|
</CloseIconWrapper>
|
||||||
<TitleWrapper>
|
<TitleWrapper>
|
||||||
<TextComponent
|
<TextComponent value={title} align='center' />
|
||||||
value={title}
|
|
||||||
align='center'
|
|
||||||
/>
|
|
||||||
</TitleWrapper>
|
</TitleWrapper>
|
||||||
<Divider opacity={0.3} />
|
<Divider opacity={0.3} />
|
||||||
{children(handleClose(toggle))}
|
{children(handleClose(toggle))}
|
||||||
|
|
|
@ -2,11 +2,18 @@
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
type Props = PropsWithTheme<{
|
||||||
|
color: ?string,
|
||||||
|
opacity: number,
|
||||||
|
marginBottom: string,
|
||||||
|
marginTop: string,
|
||||||
|
}>;
|
||||||
|
|
||||||
export const Divider = styled.div`
|
export const Divider = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: ${props => props.color || props.theme.colors.text};
|
background-color: ${(props: Props) => props.color || props.theme.colors.text};
|
||||||
opacity: ${props => props.opacity || 1};
|
opacity: ${(props: Props) => String(props.opacity || 1)};
|
||||||
margin-bottom: ${props => props.marginBottom || 0};
|
margin-bottom: ${(props: Props) => props.marginBottom || '0'};
|
||||||
margin-top: ${props => props.marginTop || 0};
|
margin-top: ${(props: Props) => props.marginTop || '0'};
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -14,10 +14,10 @@ import { truncateAddress } from '../utils/truncate-address';
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
const MenuWrapper = styled.div`
|
const MenuWrapper = styled.div`
|
||||||
background-image: ${props => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${
|
background-image: ${(props: PropsWithTheme<>) => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${
|
||||||
props.theme.colors.activeItem
|
props.theme.colors.activeItem
|
||||||
})`};
|
})`};
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -28,7 +28,7 @@ const MenuItem = styled.button`
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
border-bottom-color: ${props => props.theme.colors.text};
|
border-bottom-color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -68,7 +68,7 @@ const Option = styled(TextComponent)`
|
||||||
|
|
||||||
const PopoverWithStyle = styled(Popover)`
|
const PopoverWithStyle = styled(Popover)`
|
||||||
& > .Popover-tip {
|
& > .Popover-tip {
|
||||||
fill: ${props => props.theme.colors.activeItem};
|
fill: ${(props: PropsWithTheme<>) => props.theme.colors.activeItem};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -100,30 +100,16 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const body = [
|
const body = [
|
||||||
<ClickOutside
|
<ClickOutside onClickOutside={() => this.setState(() => ({ isOpen: false }))}>
|
||||||
onClickOutside={() => this.setState(() => ({ isOpen: false }))}
|
|
||||||
>
|
|
||||||
<MenuWrapper>
|
<MenuWrapper>
|
||||||
{label && (
|
{label && (
|
||||||
<MenuItem
|
<MenuItem disabled isGroupLabel>
|
||||||
disabled
|
<TextComponent value={label} isBold />
|
||||||
isGroupLabel
|
|
||||||
>
|
|
||||||
<TextComponent
|
|
||||||
value={label}
|
|
||||||
isBold
|
|
||||||
/>
|
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
{options.map(({ label: optionLabel, onClick }) => (
|
{options.map(({ label: optionLabel, onClick }) => (
|
||||||
<OptionItem
|
<OptionItem onClick={onClick} key={optionLabel} data-testid='DropdownOption'>
|
||||||
onClick={onClick}
|
<Option value={truncate ? truncateAddress(optionLabel) : optionLabel} />
|
||||||
key={optionLabel}
|
|
||||||
data-testid='DropdownOption'
|
|
||||||
>
|
|
||||||
<Option
|
|
||||||
value={truncate ? truncateAddress(optionLabel) : optionLabel}
|
|
||||||
/>
|
|
||||||
</OptionItem>
|
</OptionItem>
|
||||||
))}
|
))}
|
||||||
</MenuWrapper>
|
</MenuWrapper>
|
||||||
|
@ -138,9 +124,12 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
tipSize={7}
|
tipSize={7}
|
||||||
body={body}
|
body={body}
|
||||||
>
|
>
|
||||||
{renderTrigger(() => this.setState(state => ({
|
{renderTrigger(
|
||||||
isOpen: !state.isOpen,
|
() => this.setState(state => ({
|
||||||
})), isOpen)}
|
isOpen: !state.isOpen,
|
||||||
|
})),
|
||||||
|
isOpen,
|
||||||
|
)}
|
||||||
</PopoverWithStyle>
|
</PopoverWithStyle>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,7 @@ const ModalWrapper = styled.div`
|
||||||
|
|
||||||
const ChildrenWrapper = styled.div`
|
const ChildrenWrapper = styled.div`
|
||||||
width: 350px;
|
width: 350px;
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -79,21 +79,17 @@ export class ErrorModalComponent extends PureComponent<Props> {
|
||||||
render() {
|
render() {
|
||||||
const { isVisible, message, onRequestClose } = this.props;
|
const { isVisible, message, onRequestClose } = this.props;
|
||||||
|
|
||||||
return !isVisible ? null : createPortal(
|
return !isVisible
|
||||||
<ModalWrapper id='error-modal-portal-wrapper'>
|
? null
|
||||||
<ChildrenWrapper>
|
: createPortal(
|
||||||
<ErrorImage
|
<ModalWrapper id='error-modal-portal-wrapper'>
|
||||||
src={ErrorIcon}
|
<ChildrenWrapper>
|
||||||
alt='Error Icon'
|
<ErrorImage src={ErrorIcon} alt='Error Icon' />
|
||||||
/>
|
<Message value={message} />
|
||||||
<Message value={message} />
|
<Button label='Ok!' onClick={onRequestClose} />
|
||||||
<Button
|
</ChildrenWrapper>
|
||||||
label='Ok!'
|
</ModalWrapper>,
|
||||||
onClick={onRequestClose}
|
this.element,
|
||||||
/>
|
);
|
||||||
</ChildrenWrapper>
|
|
||||||
</ModalWrapper>,
|
|
||||||
this.element,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,34 +12,34 @@ import { StatusPill } from './status-pill';
|
||||||
import { withSyncStatus } from '../../services/sync-status';
|
import { withSyncStatus } from '../../services/sync-status';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
height: ${props => props.theme.headerHeight};
|
height: ${(props: PropsWithTheme<>) => props.theme.headerHeight};
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const LogoWrapper = styled.div`
|
const LogoWrapper = styled.div`
|
||||||
height: ${props => props.theme.headerHeight};
|
height: ${(props: PropsWithTheme<>) => props.theme.headerHeight};
|
||||||
width: ${props => props.theme.sidebarWidth};
|
width: ${(props: PropsWithTheme<>) => props.theme.sidebarWidth};
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
to right,
|
to right,
|
||||||
${props => props.theme.colors.sidebarLogoGradientBegin},
|
${(props: PropsWithTheme<>) => props.theme.colors.sidebarLogoGradientBegin},
|
||||||
${props => props.theme.colors.sidebarLogoGradientEnd}
|
${(props: PropsWithTheme<>) => props.theme.colors.sidebarLogoGradientEnd}
|
||||||
);
|
);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TitleWrapper = styled.div`
|
const TitleWrapper = styled.div`
|
||||||
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
width: ${(props: PropsWithTheme<>) => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||||
height: ${props => props.theme.headerHeight};
|
height: ${(props: PropsWithTheme<>) => props.theme.headerHeight};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-left: ${props => props.theme.layoutPaddingLeft};
|
padding-left: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingLeft};
|
||||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
padding-right: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingRight};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TitleRow = styled(RowComponent)`
|
const TitleRow = styled(RowComponent)`
|
||||||
|
@ -49,12 +49,12 @@ const TitleRow = styled(RowComponent)`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Title = styled(TextComponent)`
|
const Title = styled(TextComponent)`
|
||||||
font-size: ${props => `${props.theme.fontSize.large}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.large}em`};
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
letter-spacing: 0.25px;
|
letter-spacing: 0.25px;
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -69,15 +69,9 @@ export const HeaderComponent = ({ title }: Props) => (
|
||||||
<ZcashLogo />
|
<ZcashLogo />
|
||||||
</LogoWrapper>
|
</LogoWrapper>
|
||||||
<TitleWrapper>
|
<TitleWrapper>
|
||||||
<TitleRow
|
<TitleRow alignItems='center' justifyContent='space-around'>
|
||||||
alignItems='center'
|
|
||||||
justifyContent='space-around'
|
|
||||||
>
|
|
||||||
<Title value={title} />
|
<Title value={title} />
|
||||||
<Status
|
<Status type='syncing' progress={0} />
|
||||||
type='syncing'
|
|
||||||
progress={0}
|
|
||||||
/>
|
|
||||||
</TitleRow>
|
</TitleRow>
|
||||||
<Divider opacity={0.1} />
|
<Divider opacity={0.1} />
|
||||||
</TitleWrapper>
|
</TitleWrapper>
|
||||||
|
|
|
@ -4,7 +4,11 @@ import styled from 'styled-components';
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
type Props = PropsWithTheme<{
|
||||||
|
marginTop: string,
|
||||||
|
}>;
|
||||||
|
|
||||||
export const InputLabelComponent = styled(TextComponent)`
|
export const InputLabelComponent = styled(TextComponent)`
|
||||||
margin: ${props => props.marginTop || '20px'} 0 8.5px 0;
|
margin: ${(props: Props) => props.marginTop || '20px'} 0 8.5px 0;
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: Props) => String(props.theme.fontWeight.bold)};
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -1,20 +1,40 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
/* eslint-disable max-len */
|
||||||
import React, { type Element } from 'react';
|
import React, { type Element } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import theme from '../theme';
|
import theme from '../theme';
|
||||||
|
|
||||||
const getDefaultStyles = t => styled[t]`
|
type Props = {
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
inputType?: 'input' | 'textarea',
|
||||||
|
value: string,
|
||||||
|
onChange?: string => void,
|
||||||
|
onFocus?: (SyntheticFocusEvent<HTMLInputElement>) => void,
|
||||||
|
rows?: number,
|
||||||
|
disabled?: boolean,
|
||||||
|
type?: string,
|
||||||
|
step?: number,
|
||||||
|
name?: string,
|
||||||
|
renderRight?: () => Element<*> | null,
|
||||||
|
bgColor?: string,
|
||||||
|
};
|
||||||
|
|
||||||
|
type DefaultStylesProps = PropsWithTheme<{
|
||||||
|
bgColor: ?string,
|
||||||
|
withRightElement: boolean,
|
||||||
|
}>;
|
||||||
|
|
||||||
|
// $FlowFixMe
|
||||||
|
const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t => styled[t]`
|
||||||
|
border-radius: ${(props: DefaultStylesProps) => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${props => props.bgColor || props.theme.colors.inputBackground};
|
background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBackground};
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${(props: DefaultStylesProps) => props.theme.colors.text};
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
padding-right: ${props => (props.withRightElement ? '85px' : '15px')};
|
padding-right: ${(props: DefaultStylesProps) => (props.withRightElement ? '85px' : '15px')};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${(props: DefaultStylesProps) => props.theme.fontFamily};
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
@ -34,20 +54,6 @@ const RightElement = styled.div`
|
||||||
const Input = getDefaultStyles('input');
|
const Input = getDefaultStyles('input');
|
||||||
const Textarea = getDefaultStyles('textarea');
|
const Textarea = getDefaultStyles('textarea');
|
||||||
|
|
||||||
type Props = {
|
|
||||||
inputType?: 'input' | 'textarea',
|
|
||||||
value: string,
|
|
||||||
onChange?: string => void,
|
|
||||||
onFocus?: (SyntheticFocusEvent<HTMLInputElement>) => void,
|
|
||||||
rows?: number,
|
|
||||||
disabled?: boolean,
|
|
||||||
type?: string,
|
|
||||||
step?: number,
|
|
||||||
name?: string,
|
|
||||||
renderRight?: () => Element<*> | null,
|
|
||||||
bgColor?: string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const InputComponent = ({
|
export const InputComponent = ({
|
||||||
inputType,
|
inputType,
|
||||||
bgColor,
|
bgColor,
|
||||||
|
@ -67,7 +73,12 @@ export const InputComponent = ({
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
textarea: () => (
|
textarea: () => (
|
||||||
<Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} data-testid='Textarea' {...props} />
|
<Textarea
|
||||||
|
onChange={evt => onChange(evt.target.value)}
|
||||||
|
bgColor={bgColor}
|
||||||
|
data-testid='Textarea'
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -8,11 +8,11 @@ import { ErrorModalComponent } from './error-modal';
|
||||||
const Layout = styled.div`
|
const Layout = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
width: ${(props: PropsWithTheme<>) => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
height: ${(props: PropsWithTheme<>) => `calc(100vh - ${props.theme.headerHeight})`};
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||||
padding-left: ${props => props.theme.layoutPaddingLeft};
|
padding-left: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingLeft};
|
||||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
padding-right: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingRight};
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@ const Wrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CircleWrapper = styled.div`
|
const CircleWrapper = styled.div`
|
||||||
|
@ -58,7 +58,7 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
this.setState(() => ({ start: true }));
|
this.setState(() => ({ start: true }));
|
||||||
}, TIME_DELAY_ANIM);
|
}, TIME_DELAY_ANIM);
|
||||||
|
|
||||||
ipcRenderer.on('zcashd-params-download', (event, message) => {
|
ipcRenderer.on('zcashd-params-download', (event: Object, message: string) => {
|
||||||
this.setState(() => ({ message }));
|
this.setState(() => ({ message }));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -85,7 +85,7 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{() => props => (
|
{() => (props: Object) => (
|
||||||
<animated.div
|
<animated.div
|
||||||
id='loading-screen'
|
id='loading-screen'
|
||||||
style={{
|
style={{
|
||||||
|
@ -97,10 +97,7 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CircleWrapper>
|
<CircleWrapper>
|
||||||
<Logo
|
<Logo src={zcashLogo} alt='Zcash Logo' />
|
||||||
src={zcashLogo}
|
|
||||||
alt='Zcash Logo'
|
|
||||||
/>
|
|
||||||
<CircleProgressComponent
|
<CircleProgressComponent
|
||||||
progress={progress}
|
progress={progress}
|
||||||
s // TODO: check if this has any effect
|
s // TODO: check if this has any effect
|
||||||
|
|
|
@ -4,11 +4,17 @@ import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import type { Node, ElementProps } from 'react';
|
import type { Node, ElementProps } from 'react';
|
||||||
|
|
||||||
|
type FlexProps =
|
||||||
|
| {
|
||||||
|
alignItems: string,
|
||||||
|
justifyContent: string,
|
||||||
|
}
|
||||||
|
| Object;
|
||||||
const Flex = styled.div`
|
const Flex = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: ${props => props.alignItems};
|
align-items: ${(props: FlexProps) => props.alignItems};
|
||||||
justify-content: ${props => props.justifyContent};
|
justify-content: ${(props: FlexProps) => props.justifyContent};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -20,7 +26,7 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const RowComponent = ({ children, ...props }: Props) => (
|
export const RowComponent = ({ children, ...props }: Props) => (
|
||||||
<Flex {...props}>{React.Children.map(children, ch => ch)}</Flex>
|
<Flex {...props}>{React.Children.map(children, (ch: Node) => ch)}</Flex>
|
||||||
);
|
);
|
||||||
|
|
||||||
RowComponent.defaultProps = {
|
RowComponent.defaultProps = {
|
||||||
|
|
|
@ -10,29 +10,36 @@ import ChevronDown from '../assets/images/chevron-down.svg';
|
||||||
import theme from '../theme';
|
import theme from '../theme';
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
type SelectWrapperProps = PropsWithTheme<{
|
||||||
|
bgColor: ?string,
|
||||||
|
isOpen: boolean,
|
||||||
|
placement: string,
|
||||||
|
}>;
|
||||||
|
|
||||||
const SelectWrapper = styled.div`
|
const SelectWrapper = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${props => props.bgColor || props.theme.colors.inputBackground};
|
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBackground};
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${(props: SelectWrapperProps) => props.theme.colors.text};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${(props: SelectWrapperProps) => props.theme.fontFamily};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
${props => props.isOpen
|
${(props: SelectWrapperProps) => (props.isOpen
|
||||||
&& `border-${props.placement}-left-radius: 0; border-${props.placement}-right-radius: 0;`}
|
? `border-${props.placement}-left-radius: 0; border-${props.placement}-right-radius: 0;`
|
||||||
|
: '')}
|
||||||
`;
|
`;
|
||||||
/* eslint-enable max-len */
|
/* eslint-enable max-len */
|
||||||
|
|
||||||
const ValueWrapper = styled.div`
|
const ValueWrapper = styled.div`
|
||||||
width: 95%;
|
width: 95%;
|
||||||
padding: 13px;
|
padding: 13px;
|
||||||
opacity: ${props => (props.hasValue ? '1' : '0.2')};
|
opacity: ${(props: PropsWithTheme<{ hasValue: boolean }>) => (props.hasValue ? '1' : '0.2')};
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -45,7 +52,7 @@ const SelectMenuButtonWrapper = styled.div`
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 13px;
|
padding: 13px;
|
||||||
border-left: ${props => `1px solid ${props.theme.colors.background}`};
|
border-left: ${(props: PropsWithTheme<>) => `1px solid ${props.theme.colors.background}`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
@ -53,10 +60,10 @@ const SelectMenuButton = styled.button`
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid ${props => (props.isOpen ? props.theme.colors.primary : '#29292D')};
|
border: 1px solid
|
||||||
|
${(props: PropsWithTheme<{ isOpen: boolean }>) => (props.isOpen ? props.theme.colors.primary : '#29292D')};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
`;
|
`;
|
||||||
/* eslint-enable max-len */
|
|
||||||
|
|
||||||
const Icon = styled.img`
|
const Icon = styled.img`
|
||||||
width: 10px;
|
width: 10px;
|
||||||
|
@ -68,7 +75,7 @@ const OptionsWrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
${props => `${props.placement}: ${`-${props.optionsAmount * 40}px`}`};
|
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${props.placement}: ${`-${props.optionsAmount * 40}px`}`};
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -84,7 +91,7 @@ const Option = styled.button`
|
||||||
border-bottom: 1px solid #4e4b4b;
|
border-bottom: 1px solid #4e4b4b;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
|
|
@ -9,21 +9,22 @@ import { MENU_OPTIONS } from '../constants/sidebar';
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: ${props => props.theme.sidebarWidth};
|
width: ${(props: PropsWithTheme<>) => props.theme.sidebarWidth};
|
||||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
height: ${(props: PropsWithTheme<>) => `calc(100vh - ${props.theme.headerHeight})`};
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||||
background-color: ${props => props.theme.colors.sidebarBg};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.sidebarBg};
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
|
||||||
const StyledLink = styled.a`
|
const StyledLink = styled.a`
|
||||||
color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
|
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
|
||||||
font-size: ${props => `${props.theme.fontSize.regular}em`};
|
font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
|
||||||
background-color: ${props => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
|
background-color: ${(props: StyledLinkProps) => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
|
||||||
letter-spacing: 0.25px;
|
letter-spacing: 0.25px;
|
||||||
padding: 25px 20px;
|
padding: 25px 20px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -31,13 +32,13 @@ const StyledLink = styled.a`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-right: ${props => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive}` : 'none')};
|
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive}` : 'none')};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.03s ${props => props.theme.colors.transitionEase};
|
transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
|
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
|
||||||
background-color: ${props => props.theme.colors.sidebarHoveredItem};
|
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -47,7 +48,7 @@ const Icon = styled.img`
|
||||||
margin-right: 13px;
|
margin-right: 13px;
|
||||||
|
|
||||||
${StyledLink}:hover & {
|
${StyledLink}:hover & {
|
||||||
filter: ${props => (props.isActive ? 'none' : 'brightness(300%)')};
|
filter: ${(props: StyledLinkProps) => (props.isActive ? 'none' : 'brightness(300%)')};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -74,11 +75,7 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||||
key={item.route}
|
key={item.route}
|
||||||
onClick={() => (isActive ? {} : history.push(item.route))}
|
onClick={() => (isActive ? {} : history.push(item.route))}
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon isActive={isActive} src={item.icon(isActive)} Alt={`${item.route}`} />
|
||||||
isActive={isActive}
|
|
||||||
src={item.icon(isActive)}
|
|
||||||
Alt={`${item.route}`}
|
|
||||||
/>
|
|
||||||
{item.label}
|
{item.label}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
);
|
);
|
||||||
|
|
|
@ -34,12 +34,14 @@ const Icon = styled.img`
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
animation: 2s linear infinite;
|
animation: 2s linear infinite;
|
||||||
animation-name: ${props => (props.animated ? rotate : 'none')};
|
|
||||||
|
animation-name: ${/** $FlowFixMe */
|
||||||
|
(props: PropsWithTheme<{ animated: boolean }>) => (props.animated ? rotate : 'none')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StatusPillLabel = styled(TextComponent)`
|
const StatusPillLabel = styled(TextComponent)`
|
||||||
color: ${props => props.theme.colors.statusPillLabel};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.statusPillLabel};
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
|
@ -106,7 +108,7 @@ export class StatusPill extends Component<Props, State> {
|
||||||
type, icon, progress, isSyncing,
|
type, icon, progress, isSyncing,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : '';
|
const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : '';
|
||||||
const typeText = (type === 'ready') ? 'Synced' : type;
|
const typeText = type === 'ready' ? 'Synced' : type;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper id='status-pill'>
|
<Wrapper id='status-pill'>
|
||||||
|
|
|
@ -7,16 +7,6 @@ import type { ElementProps } from 'react';
|
||||||
|
|
||||||
import theme from '../theme';
|
import theme from '../theme';
|
||||||
|
|
||||||
const Text = styled.p`
|
|
||||||
font-family: ${props => props.theme.fontFamily};
|
|
||||||
font-size: ${props => props.size};
|
|
||||||
color: ${props => props.color || props.theme.colors.text};
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-weight: ${props => (props.isBold ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
|
|
||||||
text-align: ${props => props.align};
|
|
||||||
`;
|
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
...ElementProps<'p'>,
|
...ElementProps<'p'>,
|
||||||
value: string,
|
value: string,
|
||||||
|
@ -27,6 +17,16 @@ export type Props = {
|
||||||
align?: string,
|
align?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const Text = styled.p`
|
||||||
|
font-family: ${(props: PropsWithTheme<Props>) => props.theme.fontFamily};
|
||||||
|
font-size: ${(props: PropsWithTheme<Props>) => String(props.size)};
|
||||||
|
color: ${(props: PropsWithTheme<Props>) => props.color || props.theme.colors.text};
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: ${(props: PropsWithTheme<Props>) => String(props.isBold ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
|
||||||
|
text-align: ${(props: PropsWithTheme<Props>) => props.align || 'left'};
|
||||||
|
`;
|
||||||
|
|
||||||
export const TextComponent = ({
|
export const TextComponent = ({
|
||||||
value, isBold, color, className, size, align, id,
|
value, isBold, color, className, size, align, id,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
|
|
|
@ -12,9 +12,9 @@ const Wrapper = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TransactionsWrapper = styled.div`
|
const TransactionsWrapper = styled.div`
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -23,9 +23,9 @@ const TransactionsWrapper = styled.div`
|
||||||
|
|
||||||
const Day = styled(TextComponent)`
|
const Day = styled(TextComponent)`
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: ${props => props.theme.colors.transactionsDate};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate};
|
||||||
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`};
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -35,31 +35,25 @@ type Props = {
|
||||||
zecPrice: number,
|
zecPrice: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TransactionDailyComponent = ({
|
export const TransactionDailyComponent = ({ transactionsDate, transactions, zecPrice }: Props) => (
|
||||||
transactionsDate,
|
|
||||||
transactions,
|
|
||||||
zecPrice,
|
|
||||||
}: Props) => (
|
|
||||||
<Wrapper data-testid='TransactionsDaily'>
|
<Wrapper data-testid='TransactionsDaily'>
|
||||||
<Day value={transactionsDate} />
|
<Day value={transactionsDate} />
|
||||||
<TransactionsWrapper>
|
<TransactionsWrapper>
|
||||||
{transactions.map(
|
{transactions.map(({
|
||||||
({
|
date, type, address, amount, transactionId,
|
||||||
date, type, address, amount, transactionId,
|
}, idx) => (
|
||||||
}, idx) => (
|
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
||||||
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
<TransactionItemComponent
|
||||||
<TransactionItemComponent
|
transactionId={transactionId}
|
||||||
transactionId={transactionId}
|
type={type}
|
||||||
type={type}
|
date={date}
|
||||||
date={date}
|
address={address || ''}
|
||||||
address={address || ''}
|
amount={amount}
|
||||||
amount={amount}
|
zecPrice={zecPrice}
|
||||||
zecPrice={zecPrice}
|
/>
|
||||||
/>
|
{idx < transactions.length - 1 && <Divider />}
|
||||||
{idx < transactions.length - 1 && <Divider />}
|
</Fragment>
|
||||||
</Fragment>
|
))}
|
||||||
),
|
|
||||||
)}
|
|
||||||
</TransactionsWrapper>
|
</TransactionsWrapper>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
|
@ -23,7 +23,7 @@ import { openExternal } from '../utils/open-external';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
width: 460px;
|
width: 460px;
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -91,8 +91,8 @@ const Divider = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Label = styled(TextComponent)`
|
const Label = styled(TextComponent)`
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDetailsLabel};
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
letter-spacing: 0.25px;
|
letter-spacing: 0.25px;
|
||||||
`;
|
`;
|
||||||
|
@ -106,7 +106,7 @@ const Ellipsis = styled(TextComponent)`
|
||||||
|
|
||||||
const TransactionId = styled.button`
|
const TransactionId = styled.button`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -144,22 +144,13 @@ export const TransactionDetailsComponent = ({
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<CloseIconWrapper>
|
<CloseIconWrapper>
|
||||||
<CloseIconImg
|
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
||||||
src={CloseIcon}
|
|
||||||
onClick={handleClose}
|
|
||||||
/>
|
|
||||||
</CloseIconWrapper>
|
</CloseIconWrapper>
|
||||||
<TitleWrapper>
|
<TitleWrapper>
|
||||||
<TextComponent
|
<TextComponent value='Transaction Details' align='center' />
|
||||||
value='Transaction Details'
|
|
||||||
align='center'
|
|
||||||
/>
|
|
||||||
</TitleWrapper>
|
</TitleWrapper>
|
||||||
<DetailsWrapper>
|
<DetailsWrapper>
|
||||||
<Icon
|
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||||
src={isReceived ? ReceivedIcon : SentIcon}
|
|
||||||
alt='Transaction Type Icon'
|
|
||||||
/>
|
|
||||||
<TextComponent
|
<TextComponent
|
||||||
isBold
|
isBold
|
||||||
size={2.625}
|
size={2.625}
|
||||||
|
@ -181,16 +172,10 @@ export const TransactionDetailsComponent = ({
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
<ColumnComponent>
|
<ColumnComponent>
|
||||||
<Label value='DATE' />
|
<Label value='DATE' />
|
||||||
<TextComponent
|
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||||
value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')}
|
|
||||||
/>
|
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
<ColumnComponent>
|
<ColumnComponent>
|
||||||
<TextComponent
|
<TextComponent value='FEES' isBold color={theme.colors.transactionsDetailsLabel} />
|
||||||
value='FEES'
|
|
||||||
isBold
|
|
||||||
color={theme.colors.transactionsDetailsLabel}
|
|
||||||
/>
|
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={formatNumber({
|
value={formatNumber({
|
||||||
value: new BigNumber(amount).times(0.1).toNumber(),
|
value: new BigNumber(amount).times(0.1).toNumber(),
|
||||||
|
@ -203,9 +188,7 @@ export const TransactionDetailsComponent = ({
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
<ColumnComponent width='100%'>
|
<ColumnComponent width='100%'>
|
||||||
<Label value='TRANSACTION ID' />
|
<Label value='TRANSACTION ID' />
|
||||||
<TransactionId
|
<TransactionId onClick={() => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)}>
|
||||||
onClick={() => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)}
|
|
||||||
>
|
|
||||||
<Ellipsis value={transactionId} />
|
<Ellipsis value={transactionId} />
|
||||||
</TransactionId>
|
</TransactionId>
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
|
|
|
@ -19,7 +19,7 @@ import { formatNumber } from '../utils/format-number';
|
||||||
import { truncateAddress } from '../utils/truncate-address';
|
import { truncateAddress } from '../utils/truncate-address';
|
||||||
|
|
||||||
const Wrapper = styled(RowComponent)`
|
const Wrapper = styled(RowComponent)`
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||||
padding: 15px 17px;
|
padding: 15px 17px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@ -35,7 +35,7 @@ const Icon = styled.img`
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
const TransactionTypeLabel = styled(TextComponent)`
|
const TransactionTypeLabel = styled(TextComponent)`
|
||||||
color: ${props => (props.isReceived ? props.theme.colors.transactionReceived : props.theme.colors.transactionSent)};
|
color: ${(props: PropsWithTheme<{ isReceived: boolean }>) => (props.isReceived ? props.theme.colors.transactionReceived : props.theme.colors.transactionSent)};
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
`;
|
`;
|
||||||
/* eslint-enable max-len */
|
/* eslint-enable max-len */
|
||||||
|
@ -43,13 +43,13 @@ const TransactionTypeLabel = styled(TextComponent)`
|
||||||
const TransactionAddress = styled(TextComponent)`
|
const TransactionAddress = styled(TextComponent)`
|
||||||
color: #a7a7a7;
|
color: #a7a7a7;
|
||||||
|
|
||||||
${Wrapper}:hover & {
|
${String(Wrapper)}:hover & {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TransactionTime = styled(TextComponent)`
|
const TransactionTime = styled(TextComponent)`
|
||||||
color: ${props => props.theme.colors.inactiveItem};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.inactiveItem};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TransactionColumn = styled(ColumnComponent)`
|
const TransactionColumn = styled(ColumnComponent)`
|
||||||
|
@ -98,16 +98,9 @@ export const TransactionItemComponent = ({
|
||||||
>
|
>
|
||||||
<RowComponent alignItems='center'>
|
<RowComponent alignItems='center'>
|
||||||
<RowComponent alignItems='center'>
|
<RowComponent alignItems='center'>
|
||||||
<Icon
|
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||||
src={isReceived ? ReceivedIcon : SentIcon}
|
|
||||||
alt='Transaction Type Icon'
|
|
||||||
/>
|
|
||||||
<TransactionColumn>
|
<TransactionColumn>
|
||||||
<TransactionTypeLabel
|
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
||||||
isReceived={isReceived}
|
|
||||||
value={type}
|
|
||||||
isBold
|
|
||||||
/>
|
|
||||||
<TransactionTime value={transactionTime} />
|
<TransactionTime value={transactionTime} />
|
||||||
</TransactionColumn>
|
</TransactionColumn>
|
||||||
</RowComponent>
|
</RowComponent>
|
||||||
|
@ -119,10 +112,7 @@ export const TransactionItemComponent = ({
|
||||||
value={transactionValueInZec}
|
value={transactionValueInZec}
|
||||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
||||||
/>
|
/>
|
||||||
<TextComponent
|
<TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
|
||||||
value={transactionValueInUsd}
|
|
||||||
color={theme.colors.inactiveItem}
|
|
||||||
/>
|
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -21,14 +21,14 @@ const AddressWrapper = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Input = styled.input`
|
const Input = styled.input`
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${props => props.theme.colors.inputBackground};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.inputBackground};
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
@ -72,7 +72,7 @@ export class WalletAddress extends Component<Props, State> {
|
||||||
<AddressWrapper>
|
<AddressWrapper>
|
||||||
<Input
|
<Input
|
||||||
value={isVisible ? address : truncateAddress(address)}
|
value={isVisible ? address : truncateAddress(address)}
|
||||||
onChange={() => { }}
|
onChange={() => {}}
|
||||||
onFocus={event => event.currentTarget.select()}
|
onFocus={event => event.currentTarget.select()}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -13,17 +13,17 @@ import theme from '../theme';
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
padding: 37px 45px;
|
padding: 37px 45px;
|
||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AllAddresses = styled(TextComponent)`
|
const AllAddresses = styled(TextComponent)`
|
||||||
margin-bottom: 2.5px;
|
margin-bottom: 2.5px;
|
||||||
font-size: ${props => `${props.theme.fontSize.small}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.small}em`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ValueBox = styled.div`
|
const ValueBox = styled.div`
|
||||||
|
@ -39,11 +39,11 @@ const Label = styled(TextComponent)`
|
||||||
|
|
||||||
const USDValue = styled(TextComponent)`
|
const USDValue = styled(TextComponent)`
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-weight: ${props => props.theme.fontWeight.light};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.light)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ShieldedValue = styled(Label)`
|
const ShieldedValue = styled(Label)`
|
||||||
color: ${props => props.theme.colors.activeItem};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.activeItem};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -71,34 +71,22 @@ export const WalletSummaryComponent = ({
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
<RowComponent>
|
<RowComponent>
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<ShieldedValue
|
<ShieldedValue value='● SHIELDED' isBold size={theme.fontSize.small} />
|
||||||
value='● SHIELDED'
|
|
||||||
isBold
|
|
||||||
size={theme.fontSize.small}
|
|
||||||
/>
|
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={`ZEC ${formatNumber({ value: shielded })}`}
|
value={`ZEC ${formatNumber({ value: shielded })}`}
|
||||||
isBold
|
isBold
|
||||||
size={theme.fontSize.medium}
|
size={theme.fontSize.medium}
|
||||||
/>
|
/>
|
||||||
<USDValue
|
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
|
||||||
value={`USD $${formatNumber({ value: shielded * zecPrice })}`}
|
|
||||||
/>
|
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<Label
|
<Label value='● TRANSPARENT' isBold size={theme.fontSize.small} />
|
||||||
value='● TRANSPARENT'
|
|
||||||
isBold
|
|
||||||
size={theme.fontSize.small}
|
|
||||||
/>
|
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={`ZEC ${formatNumber({ value: transparent })}`}
|
value={`ZEC ${formatNumber({ value: transparent })}`}
|
||||||
isBold
|
isBold
|
||||||
size={theme.fontSize.medium}
|
size={theme.fontSize.medium}
|
||||||
/>
|
/>
|
||||||
<USDValue
|
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
|
||||||
value={`USD $${formatNumber({ value: transparent * zecPrice })}`}
|
|
||||||
/>
|
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
</RowComponent>
|
</RowComponent>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
|
10
app/theme.js
10
app/theme.js
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Fragment } from 'react';
|
import React, { Fragment, type Node } from 'react';
|
||||||
import theme from 'styled-theming';
|
import theme from 'styled-theming';
|
||||||
import { ThemeProvider, createGlobalStyle } from 'styled-components';
|
import { ThemeProvider, createGlobalStyle } from 'styled-components';
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
|
@ -31,7 +31,7 @@ const selectButtonShadow = 'rgba(238,201,76,0.65)';
|
||||||
const statusPillLabel = '#727272';
|
const statusPillLabel = '#727272';
|
||||||
const transactionsDetailsLabel = transactionsDate;
|
const transactionsDetailsLabel = transactionsDate;
|
||||||
|
|
||||||
const appTheme = {
|
const appTheme: AppTheme = {
|
||||||
mode: DARK,
|
mode: DARK,
|
||||||
fontFamily: 'Roboto',
|
fontFamily: 'Roboto',
|
||||||
fontWeight: {
|
fontWeight: {
|
||||||
|
@ -46,10 +46,12 @@ const appTheme = {
|
||||||
small: 0.667,
|
small: 0.667,
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
|
// $FlowFixMe
|
||||||
primary: theme('mode', {
|
primary: theme('mode', {
|
||||||
light: lightOne,
|
light: lightOne,
|
||||||
dark: darkOne,
|
dark: darkOne,
|
||||||
}),
|
}),
|
||||||
|
// $FlowFixMe
|
||||||
secondary: theme('mode', {
|
secondary: theme('mode', {
|
||||||
light: darkOne,
|
light: darkOne,
|
||||||
dark: lightOne,
|
dark: lightOne,
|
||||||
|
@ -95,9 +97,7 @@ export const GlobalStyle = createGlobalStyle`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/* eslint-disable react/prop-types */
|
export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
|
||||||
// $FlowFixMe
|
|
||||||
export const DoczWrapper = ({ children }) => (
|
|
||||||
<ThemeProvider theme={appTheme}>
|
<ThemeProvider theme={appTheme}>
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<GlobalStyle />
|
<GlobalStyle />
|
||||||
|
|
|
@ -12,9 +12,9 @@ import ConsoleSymbol from '../assets/images/console_zcash.png';
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
padding: 38px 33.5px;
|
padding: 38px 33.5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@ export class ConsoleView extends Component<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
ipcRenderer.on('zcashd-log', (event, message) => {
|
ipcRenderer.on('zcashd-log', (event: empty, message: string) => {
|
||||||
this.setState(() => ({ log: initialLog + message }));
|
this.setState(() => ({ log: initialLog + message }));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -80,10 +80,7 @@ export class ConsoleView extends Component<Props, State> {
|
||||||
return (
|
return (
|
||||||
<Wrapper id='console-wrapper'>
|
<Wrapper id='console-wrapper'>
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<ConsoleImg
|
<ConsoleImg src={ConsoleSymbol} alt='Zcashd' />
|
||||||
src={ConsoleSymbol}
|
|
||||||
alt='Zcashd'
|
|
||||||
/>
|
|
||||||
{log.split('\n').map((item, idx) => (
|
{log.split('\n').map((item, idx) => (
|
||||||
<Fragment key={uuid()}>
|
<Fragment key={uuid()}>
|
||||||
<ConsoleText value={item} />
|
<ConsoleText value={item} />
|
||||||
|
|
|
@ -20,9 +20,9 @@ const Row = styled(RowComponent)`
|
||||||
|
|
||||||
const Label = styled(InputLabelComponent)`
|
const Label = styled(InputLabelComponent)`
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: ${props => props.theme.colors.transactionsDate};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate};
|
||||||
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`};
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@ const ActionButton = styled.button`
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
outline: none;
|
outline: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -46,7 +46,7 @@ const ActionButton = styled.button`
|
||||||
const ActionIcon = styled.img`
|
const ActionIcon = styled.img`
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border: 1px solid ${props => props.theme.colors.text};
|
border: 1px solid ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
margin-right: 11.5px;
|
margin-right: 11.5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
@ -107,33 +107,16 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
<WalletAddress key={addr} address={addr} />
|
<WalletAddress key={addr} address={addr} />
|
||||||
))}
|
))}
|
||||||
<Row>
|
<Row>
|
||||||
<ActionButton
|
<ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
||||||
onClick={this.toggleAdditionalOptions}
|
<ActionIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
|
||||||
isActive={showAdditionalOptions}
|
|
||||||
>
|
|
||||||
<ActionIcon
|
|
||||||
isActive={showAdditionalOptions}
|
|
||||||
src={MenuIcon}
|
|
||||||
alt='More Options'
|
|
||||||
/>
|
|
||||||
<TextComponent value={buttonText} />
|
<TextComponent value={buttonText} />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
<ActionButton
|
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
|
||||||
onClick={() => this.generateNewAddress('shielded')}
|
<ActionIcon src={PlusIcon} alt='New Shielded Address' />
|
||||||
>
|
|
||||||
<ActionIcon
|
|
||||||
src={PlusIcon}
|
|
||||||
alt='New Shielded Address'
|
|
||||||
/>
|
|
||||||
<TextComponent value='New Shielded Address' />
|
<TextComponent value='New Shielded Address' />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
<ActionButton
|
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
|
||||||
onClick={() => this.generateNewAddress('transparent')}
|
<ActionIcon src={PlusIcon} alt='New Transparent Address' />
|
||||||
>
|
|
||||||
<ActionIcon
|
|
||||||
src={PlusIcon}
|
|
||||||
alt='New Transparent Address'
|
|
||||||
/>
|
|
||||||
<TextComponent value='New Transparent Address' />
|
<TextComponent value='New Transparent Address' />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
</Row>
|
</Row>
|
||||||
|
@ -150,8 +133,8 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{show => show
|
{(show: boolean) => show
|
||||||
&& (props => (
|
&& ((props: Object) => (
|
||||||
<animated.div
|
<animated.div
|
||||||
style={{
|
style={{
|
||||||
...props,
|
...props,
|
||||||
|
@ -161,10 +144,7 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
>
|
>
|
||||||
<Label value='Transparent Address (not private)' />
|
<Label value='Transparent Address (not private)' />
|
||||||
{transparentAddresses.map(addr => (
|
{transparentAddresses.map(addr => (
|
||||||
<WalletAddress
|
<WalletAddress key={addr} address={addr} />
|
||||||
key={addr}
|
|
||||||
address={addr}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</animated.div>
|
</animated.div>
|
||||||
))
|
))
|
||||||
|
|
|
@ -49,7 +49,7 @@ const Loader = styled.img`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FormWrapper = styled.div`
|
const FormWrapper = styled.div`
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||||
width: 71%;
|
width: 71%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -58,26 +58,31 @@ const SendWrapper = styled(ColumnComponent)`
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
type AmountProps =
|
||||||
|
| {
|
||||||
|
isEmpty: boolean,
|
||||||
|
}
|
||||||
|
| Object;
|
||||||
const AmountWrapper = styled.div`
|
const AmountWrapper = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: 'ZEC';
|
content: 'ZEC';
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
display: block;
|
display: block;
|
||||||
transition: all 0.05s ease-in-out;
|
transition: all 0.05s ease-in-out;
|
||||||
opacity: ${props => (props.isEmpty ? '0' : '1')};
|
opacity: ${(props: AmountProps) => (props.isEmpty ? '0' : '1')};
|
||||||
color: #fff;
|
color: #fff;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AmountInput = styled(InputComponent)`
|
const AmountInput = styled(InputComponent)`
|
||||||
padding-left: ${props => (props.isEmpty ? '15' : '50')}px;
|
padding-left: ${(props: AmountProps) => (props.isEmpty ? '15' : '50')}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ShowFeeButton = styled.button`
|
const ShowFeeButton = styled.button`
|
||||||
|
@ -85,7 +90,7 @@ const ShowFeeButton = styled.button`
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
outline: none;
|
outline: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -100,7 +105,7 @@ const ShowFeeButton = styled.button`
|
||||||
const SeeMoreIcon = styled.img`
|
const SeeMoreIcon = styled.img`
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border: 1px solid ${props => props.theme.colors.text};
|
border: 1px solid ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
margin-right: 11.5px;
|
margin-right: 11.5px;
|
||||||
`;
|
`;
|
||||||
|
@ -114,8 +119,8 @@ const FeeWrapper = styled.div`
|
||||||
|
|
||||||
const InfoCard = styled.div`
|
const InfoCard = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InfoContent = styled.div`
|
const InfoContent = styled.div`
|
||||||
|
@ -152,23 +157,29 @@ const ConfirmItemWrapper = styled(RowComponent)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
type ItemLabelProps =
|
||||||
|
| {
|
||||||
|
color: string,
|
||||||
|
}
|
||||||
|
| Object;
|
||||||
|
/* eslint-disable max-len */
|
||||||
const ItemLabel = styled(TextComponent)`
|
const ItemLabel = styled(TextComponent)`
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<ItemLabelProps>) => String(props.theme.fontWeight.bold)};
|
||||||
font-size: ${props => props.theme.fontSize.small};
|
font-size: ${(props: PropsWithTheme<ItemLabelProps>) => String(props.theme.fontSize.small)};
|
||||||
color: ${props => props.color || props.theme.colors.modalItemLabel};
|
color: ${(props: PropsWithTheme<ItemLabelProps>) => props.color || props.theme.colors.modalItemLabel};
|
||||||
margin-bottom: 3.5px;
|
margin-bottom: 3.5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SendZECValue = styled(TextComponent)`
|
const SendZECValue = styled(TextComponent)`
|
||||||
color: ${props => props.theme.colors.transactionSent};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionSent};
|
||||||
font-size: ${props => `${props.theme.fontSize.large}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.large}em`};
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SendUSDValue = styled(TextComponent)`
|
const SendUSDValue = styled(TextComponent)`
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-weight: ${props => props.theme.fontWeight.light};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.light)};
|
||||||
font-size: ${props => `${props.theme.fontSize.medium}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.medium}em`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Icon = styled.img`
|
const Icon = styled.img`
|
||||||
|
@ -509,8 +520,8 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
height: 0,
|
height: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{show => show
|
{(show: boolean) => show
|
||||||
&& (props => (
|
&& ((props: Object) => (
|
||||||
<animated.div style={props}>
|
<animated.div style={props}>
|
||||||
<FeeWrapper id='send-fee-wrapper'>
|
<FeeWrapper id='send-fee-wrapper'>
|
||||||
<RowComponent alignItems='flex-end' justifyContent='space-between'>
|
<RowComponent alignItems='flex-end' justifyContent='space-between'>
|
||||||
|
|
|
@ -23,7 +23,7 @@ import rpc from '../../services/api';
|
||||||
const HOME_DIR = electron.remote.app.getPath('home');
|
const HOME_DIR = electron.remote.app.getPath('home');
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ModalContent = styled.div`
|
const ModalContent = styled.div`
|
||||||
|
@ -43,7 +43,7 @@ const Btn = styled(Button)`
|
||||||
|
|
||||||
const ClipboardButton = styled(Clipboard)`
|
const ClipboardButton = styled(Clipboard)`
|
||||||
width: 50px;
|
width: 50px;
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||||
height: 45px;
|
height: 45px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
`;
|
`;
|
||||||
|
@ -56,9 +56,9 @@ const SettingsWrapper = styled.div`
|
||||||
|
|
||||||
const SettingsTitle = styled(TextComponent)`
|
const SettingsTitle = styled(TextComponent)`
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: ${props => props.theme.colors.transactionsDate};
|
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate};
|
||||||
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`};
|
||||||
font-weight: ${props => props.theme.fontWeight.bold};
|
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -173,7 +173,7 @@ export class SettingsView extends PureComponent<Props, State> {
|
||||||
electron.remote.dialog.showSaveDialog(
|
electron.remote.dialog.showSaveDialog(
|
||||||
undefined,
|
undefined,
|
||||||
{ defaultPath: backupFileName },
|
{ defaultPath: backupFileName },
|
||||||
async (pathToSave) => {
|
async (pathToSave: string) => {
|
||||||
if (!pathToSave) return;
|
if (!pathToSave) return;
|
||||||
|
|
||||||
const zcashDir = isDev ? `${HOME_DIR}/.zcash/testnet3` : HOME_DIR;
|
const zcashDir = isDev ? `${HOME_DIR}/.zcash/testnet3` : HOME_DIR;
|
||||||
|
|
|
@ -1,419 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
declare module 'styled-components' {
|
|
||||||
declare export type Interpolation =
|
|
||||||
| (<P: {}>(executionContext: P) => string)
|
|
||||||
| CSSRules
|
|
||||||
| KeyFrames
|
|
||||||
| string
|
|
||||||
| number;
|
|
||||||
|
|
||||||
declare export type CSSRules = Interpolation[];
|
|
||||||
|
|
||||||
// This is not exported on purpose, since it's an implementation detail
|
|
||||||
declare type TaggedTemplateLiteral<R> = (
|
|
||||||
strings: string[],
|
|
||||||
...interpolations: Interpolation[]
|
|
||||||
) => R;
|
|
||||||
|
|
||||||
declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>;
|
|
||||||
declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>;
|
|
||||||
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>;
|
|
||||||
|
|
||||||
declare interface Tag<T> {
|
|
||||||
styleTag: HTMLStyleElement | null;
|
|
||||||
getIds(): string[];
|
|
||||||
hasNameForId(id: string, name: string): boolean;
|
|
||||||
insertMarker(id: string): T;
|
|
||||||
insertRules(id: string, cssRules: string[], name: ?string): void;
|
|
||||||
removeRules(id: string): void;
|
|
||||||
css(): string;
|
|
||||||
toHTML(additionalAttrs: ?string): string;
|
|
||||||
toElement(): React$Element<*>;
|
|
||||||
clone(): Tag<T>;
|
|
||||||
sealed: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
|
|
||||||
declare export class StyleSheet {
|
|
||||||
static get master(): StyleSheet;
|
|
||||||
static get instance(): StyleSheet;
|
|
||||||
static reset(forceServer?: boolean): void;
|
|
||||||
|
|
||||||
id: number;
|
|
||||||
forceServer: boolean;
|
|
||||||
target: ?HTMLElement;
|
|
||||||
tagMap: { [string]: Tag<any> }; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
deferred: { [string]: string[] | void };
|
|
||||||
rehydratedNames: { [string]: boolean };
|
|
||||||
ignoreRehydratedNames: { [string]: boolean };
|
|
||||||
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
capacity: number;
|
|
||||||
clones: StyleSheet[];
|
|
||||||
|
|
||||||
constructor(?HTMLElement): this;
|
|
||||||
rehydrate(): this;
|
|
||||||
clone(): StyleSheet;
|
|
||||||
sealAllTags(): void;
|
|
||||||
makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
hasId(id: string): boolean;
|
|
||||||
hasNameForId(id: string, name: string): boolean;
|
|
||||||
deferredInject(id: string, cssRules: string[]): void;
|
|
||||||
inject(id: string, cssRules: string[], name?: string): void;
|
|
||||||
remove(id: string): void;
|
|
||||||
toHtml(): string;
|
|
||||||
toReactElements(): React$ElementType[];
|
|
||||||
}
|
|
||||||
|
|
||||||
declare export class KeyFrames {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
rules: string[];
|
|
||||||
|
|
||||||
constructor(name: string, rules: string[]): this;
|
|
||||||
inject(StyleSheet): void;
|
|
||||||
toString(): string;
|
|
||||||
getName(): string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// I think any is appropriate here?
|
|
||||||
// eslint-disable-next-line flowtype/no-weak-types
|
|
||||||
declare export type Theme = { +[string]: any };
|
|
||||||
|
|
||||||
declare export var css: CSSConstructor;
|
|
||||||
declare export var keyframes: KeyFramesConstructor;
|
|
||||||
declare export var createGlobalStyle: CreateGlobalStyleConstructor;
|
|
||||||
declare export var ThemeProvider: React$ComponentType<{
|
|
||||||
children?: ?React$Node,
|
|
||||||
theme: Theme | (Theme => Theme),
|
|
||||||
}>;
|
|
||||||
|
|
||||||
// This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
|
|
||||||
declare type InjectedProps = { theme: Theme | void };
|
|
||||||
declare export function withTheme<Props: {}, Component: React$ComponentType<Props>>(
|
|
||||||
WrappedComponent: Component,
|
|
||||||
): React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
|
|
||||||
|
|
||||||
// @HACK This is a cheat to hide that the underlying type is "just a string"
|
|
||||||
// once we know of a better way, we should be able to update this accordingly.
|
|
||||||
// I don't think there _is_ a good way, currently.
|
|
||||||
// @NOTE Also not too sure about the naming of this...
|
|
||||||
declare export type StyledElementType<T> = T;
|
|
||||||
declare export type StyledComponentType<C> = {
|
|
||||||
[[call]]: TaggedTemplateLiteral<C>,
|
|
||||||
+attrs: <A: {}>(
|
|
||||||
attributes: A | ((props: React$ElementConfig<C>) => A),
|
|
||||||
) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>,
|
|
||||||
};
|
|
||||||
|
|
||||||
declare type StyledComponentList = {
|
|
||||||
a: StyledComponentType<StyledElementType<'a'>>,
|
|
||||||
abbr: StyledComponentType<StyledElementType<'abbr'>>,
|
|
||||||
address: StyledComponentType<StyledElementType<'address'>>,
|
|
||||||
area: StyledComponentType<StyledElementType<'area'>>,
|
|
||||||
article: StyledComponentType<StyledElementType<'article'>>,
|
|
||||||
aside: StyledComponentType<StyledElementType<'aside'>>,
|
|
||||||
audio: StyledComponentType<StyledElementType<'audio'>>,
|
|
||||||
b: StyledComponentType<StyledElementType<'b'>>,
|
|
||||||
base: StyledComponentType<StyledElementType<'base'>>,
|
|
||||||
bdi: StyledComponentType<StyledElementType<'bdi'>>,
|
|
||||||
bdo: StyledComponentType<StyledElementType<'bdo'>>,
|
|
||||||
big: StyledComponentType<StyledElementType<'big'>>,
|
|
||||||
blockquote: StyledComponentType<StyledElementType<'blockquote'>>,
|
|
||||||
body: StyledComponentType<StyledElementType<'body'>>,
|
|
||||||
br: StyledComponentType<StyledElementType<'br'>>,
|
|
||||||
button: StyledComponentType<StyledElementType<'button'>>,
|
|
||||||
canvas: StyledComponentType<StyledElementType<'canvas'>>,
|
|
||||||
caption: StyledComponentType<StyledElementType<'caption'>>,
|
|
||||||
cite: StyledComponentType<StyledElementType<'cite'>>,
|
|
||||||
code: StyledComponentType<StyledElementType<'code'>>,
|
|
||||||
col: StyledComponentType<StyledElementType<'col'>>,
|
|
||||||
colgroup: StyledComponentType<StyledElementType<'colgroup'>>,
|
|
||||||
data: StyledComponentType<StyledElementType<'data'>>,
|
|
||||||
datalist: StyledComponentType<StyledElementType<'datalist'>>,
|
|
||||||
dd: StyledComponentType<StyledElementType<'dd'>>,
|
|
||||||
del: StyledComponentType<StyledElementType<'del'>>,
|
|
||||||
details: StyledComponentType<StyledElementType<'details'>>,
|
|
||||||
dfn: StyledComponentType<StyledElementType<'dfn'>>,
|
|
||||||
dialog: StyledComponentType<StyledElementType<'dialog'>>,
|
|
||||||
div: StyledComponentType<StyledElementType<'div'>>,
|
|
||||||
dl: StyledComponentType<StyledElementType<'dl'>>,
|
|
||||||
dt: StyledComponentType<StyledElementType<'dt'>>,
|
|
||||||
em: StyledComponentType<StyledElementType<'em'>>,
|
|
||||||
embed: StyledComponentType<StyledElementType<'embed'>>,
|
|
||||||
fieldset: StyledComponentType<StyledElementType<'fieldset'>>,
|
|
||||||
figcaption: StyledComponentType<StyledElementType<'figcaption'>>,
|
|
||||||
figure: StyledComponentType<StyledElementType<'figure'>>,
|
|
||||||
footer: StyledComponentType<StyledElementType<'footer'>>,
|
|
||||||
form: StyledComponentType<StyledElementType<'form'>>,
|
|
||||||
h1: StyledComponentType<StyledElementType<'h1'>>,
|
|
||||||
h2: StyledComponentType<StyledElementType<'h2'>>,
|
|
||||||
h3: StyledComponentType<StyledElementType<'h3'>>,
|
|
||||||
h4: StyledComponentType<StyledElementType<'h4'>>,
|
|
||||||
h5: StyledComponentType<StyledElementType<'h5'>>,
|
|
||||||
h6: StyledComponentType<StyledElementType<'h6'>>,
|
|
||||||
head: StyledComponentType<StyledElementType<'head'>>,
|
|
||||||
header: StyledComponentType<StyledElementType<'header'>>,
|
|
||||||
hgroup: StyledComponentType<StyledElementType<'hgroup'>>,
|
|
||||||
hr: StyledComponentType<StyledElementType<'hr'>>,
|
|
||||||
html: StyledComponentType<StyledElementType<'html'>>,
|
|
||||||
i: StyledComponentType<StyledElementType<'i'>>,
|
|
||||||
iframe: StyledComponentType<StyledElementType<'iframe'>>,
|
|
||||||
img: StyledComponentType<StyledElementType<'img'>>,
|
|
||||||
input: StyledComponentType<StyledElementType<'input'>>,
|
|
||||||
ins: StyledComponentType<StyledElementType<'ins'>>,
|
|
||||||
kbd: StyledComponentType<StyledElementType<'kbd'>>,
|
|
||||||
keygen: StyledComponentType<StyledElementType<'keygen'>>,
|
|
||||||
label: StyledComponentType<StyledElementType<'label'>>,
|
|
||||||
legend: StyledComponentType<StyledElementType<'legend'>>,
|
|
||||||
li: StyledComponentType<StyledElementType<'li'>>,
|
|
||||||
link: StyledComponentType<StyledElementType<'link'>>,
|
|
||||||
main: StyledComponentType<StyledElementType<'main'>>,
|
|
||||||
map: StyledComponentType<StyledElementType<'map'>>,
|
|
||||||
mark: StyledComponentType<StyledElementType<'mark'>>,
|
|
||||||
menu: StyledComponentType<StyledElementType<'menu'>>,
|
|
||||||
menuitem: StyledComponentType<StyledElementType<'menuitem'>>,
|
|
||||||
meta: StyledComponentType<StyledElementType<'meta'>>,
|
|
||||||
meter: StyledComponentType<StyledElementType<'meter'>>,
|
|
||||||
nav: StyledComponentType<StyledElementType<'nav'>>,
|
|
||||||
noscript: StyledComponentType<StyledElementType<'noscript'>>,
|
|
||||||
object: StyledComponentType<StyledElementType<'object'>>,
|
|
||||||
ol: StyledComponentType<StyledElementType<'ol'>>,
|
|
||||||
optgroup: StyledComponentType<StyledElementType<'optgroup'>>,
|
|
||||||
option: StyledComponentType<StyledElementType<'option'>>,
|
|
||||||
output: StyledComponentType<StyledElementType<'output'>>,
|
|
||||||
p: StyledComponentType<StyledElementType<'p'>>,
|
|
||||||
param: StyledComponentType<StyledElementType<'param'>>,
|
|
||||||
picture: StyledComponentType<StyledElementType<'picture'>>,
|
|
||||||
pre: StyledComponentType<StyledElementType<'pre'>>,
|
|
||||||
progress: StyledComponentType<StyledElementType<'progress'>>,
|
|
||||||
q: StyledComponentType<StyledElementType<'q'>>,
|
|
||||||
rp: StyledComponentType<StyledElementType<'rp'>>,
|
|
||||||
rt: StyledComponentType<StyledElementType<'rt'>>,
|
|
||||||
ruby: StyledComponentType<StyledElementType<'ruby'>>,
|
|
||||||
s: StyledComponentType<StyledElementType<'s'>>,
|
|
||||||
samp: StyledComponentType<StyledElementType<'samp'>>,
|
|
||||||
script: StyledComponentType<StyledElementType<'script'>>,
|
|
||||||
section: StyledComponentType<StyledElementType<'section'>>,
|
|
||||||
select: StyledComponentType<StyledElementType<'select'>>,
|
|
||||||
small: StyledComponentType<StyledElementType<'small'>>,
|
|
||||||
source: StyledComponentType<StyledElementType<'source'>>,
|
|
||||||
span: StyledComponentType<StyledElementType<'span'>>,
|
|
||||||
strong: StyledComponentType<StyledElementType<'strong'>>,
|
|
||||||
style: StyledComponentType<StyledElementType<'style'>>,
|
|
||||||
sub: StyledComponentType<StyledElementType<'sub'>>,
|
|
||||||
summary: StyledComponentType<StyledElementType<'summary'>>,
|
|
||||||
sup: StyledComponentType<StyledElementType<'sup'>>,
|
|
||||||
table: StyledComponentType<StyledElementType<'table'>>,
|
|
||||||
tbody: StyledComponentType<StyledElementType<'tbody'>>,
|
|
||||||
td: StyledComponentType<StyledElementType<'td'>>,
|
|
||||||
textarea: StyledComponentType<StyledElementType<'textarea'>>,
|
|
||||||
tfoot: StyledComponentType<StyledElementType<'tfoot'>>,
|
|
||||||
th: StyledComponentType<StyledElementType<'th'>>,
|
|
||||||
thead: StyledComponentType<StyledElementType<'thead'>>,
|
|
||||||
time: StyledComponentType<StyledElementType<'time'>>,
|
|
||||||
title: StyledComponentType<StyledElementType<'title'>>,
|
|
||||||
tr: StyledComponentType<StyledElementType<'tr'>>,
|
|
||||||
track: StyledComponentType<StyledElementType<'track'>>,
|
|
||||||
u: StyledComponentType<StyledElementType<'u'>>,
|
|
||||||
ul: StyledComponentType<StyledElementType<'ul'>>,
|
|
||||||
var: StyledComponentType<StyledElementType<'var'>>,
|
|
||||||
video: StyledComponentType<StyledElementType<'video'>>,
|
|
||||||
wbr: StyledComponentType<StyledElementType<'wbr'>>,
|
|
||||||
|
|
||||||
// SVG
|
|
||||||
circle: StyledComponentType<StyledElementType<'circle'>>,
|
|
||||||
clipPath: StyledComponentType<StyledElementType<'clipPath'>>,
|
|
||||||
defs: StyledComponentType<StyledElementType<'defs'>>,
|
|
||||||
ellipse: StyledComponentType<StyledElementType<'ellipse'>>,
|
|
||||||
g: StyledComponentType<StyledElementType<'g'>>,
|
|
||||||
image: StyledComponentType<StyledElementType<'image'>>,
|
|
||||||
line: StyledComponentType<StyledElementType<'line'>>,
|
|
||||||
linearGradient: StyledComponentType<StyledElementType<'linearGradient'>>,
|
|
||||||
mask: StyledComponentType<StyledElementType<'mask'>>,
|
|
||||||
path: StyledComponentType<StyledElementType<'path'>>,
|
|
||||||
pattern: StyledComponentType<StyledElementType<'pattern'>>,
|
|
||||||
polygon: StyledComponentType<StyledElementType<'polygon'>>,
|
|
||||||
polyline: StyledComponentType<StyledElementType<'polyline'>>,
|
|
||||||
radialGradient: StyledComponentType<StyledElementType<'radialGradient'>>,
|
|
||||||
rect: StyledComponentType<StyledElementType<'rect'>>,
|
|
||||||
stop: StyledComponentType<StyledElementType<'stop'>>,
|
|
||||||
svg: StyledComponentType<StyledElementType<'svg'>>,
|
|
||||||
text: StyledComponentType<StyledElementType<'text'>>,
|
|
||||||
tspan: StyledComponentType<StyledElementType<'tspan'>>,
|
|
||||||
};
|
|
||||||
|
|
||||||
declare export default StyledComponentList & {
|
|
||||||
[[call]]: <S: string>(S) => $ElementType<StyledComponentList, S>,
|
|
||||||
[[call]]: <P: {}, C: React$ComponentType<P>>(C) => StyledComponentType<C>,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'styled-components/native' {
|
|
||||||
declare export type Interpolation =
|
|
||||||
| (<P: {}>(executionContext: P) => string)
|
|
||||||
| CSSRules
|
|
||||||
| KeyFrames
|
|
||||||
| string
|
|
||||||
| number;
|
|
||||||
|
|
||||||
declare export type CSSRules = Interpolation[];
|
|
||||||
|
|
||||||
// This is not exported on purpose, since it's an implementation detail
|
|
||||||
declare type TaggedTemplateLiteral<R> = (
|
|
||||||
strings: string[],
|
|
||||||
...interpolations: Interpolation[]
|
|
||||||
) => R;
|
|
||||||
|
|
||||||
declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>;
|
|
||||||
declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>;
|
|
||||||
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>;
|
|
||||||
|
|
||||||
declare interface Tag<T> {
|
|
||||||
styleTag: HTMLStyleElement | null;
|
|
||||||
getIds(): string[];
|
|
||||||
hasNameForId(id: string, name: string): boolean;
|
|
||||||
insertMarker(id: string): T;
|
|
||||||
insertRules(id: string, cssRules: string[], name: ?string): void;
|
|
||||||
removeRules(id: string): void;
|
|
||||||
css(): string;
|
|
||||||
toHTML(additionalAttrs: ?string): string;
|
|
||||||
toElement(): React$Element<*>;
|
|
||||||
clone(): Tag<T>;
|
|
||||||
sealed: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
|
|
||||||
declare export class StyleSheet {
|
|
||||||
static get master(): StyleSheet;
|
|
||||||
static get instance(): StyleSheet;
|
|
||||||
static reset(forceServer?: boolean): void;
|
|
||||||
|
|
||||||
id: number;
|
|
||||||
forceServer: boolean;
|
|
||||||
target: ?HTMLElement;
|
|
||||||
tagMap: { [string]: Tag<any> }; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
deferred: { [string]: string[] | void };
|
|
||||||
rehydratedNames: { [string]: boolean };
|
|
||||||
ignoreRehydratedNames: { [string]: boolean };
|
|
||||||
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
capacity: number;
|
|
||||||
clones: StyleSheet[];
|
|
||||||
|
|
||||||
constructor(?HTMLElement): this;
|
|
||||||
rehydrate(): this;
|
|
||||||
clone(): StyleSheet;
|
|
||||||
sealAllTags(): void;
|
|
||||||
makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
|
||||||
hasId(id: string): boolean;
|
|
||||||
hasNameForId(id: string, name: string): boolean;
|
|
||||||
deferredInject(id: string, cssRules: string[]): void;
|
|
||||||
inject(id: string, cssRules: string[], name?: string): void;
|
|
||||||
remove(id: string): void;
|
|
||||||
toHtml(): string;
|
|
||||||
toReactElements(): React$ElementType[];
|
|
||||||
}
|
|
||||||
|
|
||||||
declare export class KeyFrames {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
rules: string[];
|
|
||||||
|
|
||||||
constructor(name: string, rules: string[]): this;
|
|
||||||
inject(StyleSheet): void;
|
|
||||||
toString(): string;
|
|
||||||
getName(): string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// I think any is appropriate here?
|
|
||||||
// eslint-disable-next-line flowtype/no-weak-types
|
|
||||||
declare export type Theme = { +[string]: any };
|
|
||||||
|
|
||||||
declare export var css: CSSConstructor;
|
|
||||||
declare export var keyframes: KeyFramesConstructor;
|
|
||||||
declare export var createGlobalStyle: CreateGlobalStyleConstructor;
|
|
||||||
declare export var ThemeProvider: React$ComponentType<{
|
|
||||||
children?: ?React$Node,
|
|
||||||
theme: Theme | (Theme => Theme),
|
|
||||||
}>;
|
|
||||||
|
|
||||||
// This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
|
|
||||||
declare type InjectedProps = { theme: Theme | void };
|
|
||||||
declare export function withTheme<Props: {}, Component: React$ComponentType<Props>>(
|
|
||||||
WrappedComponent: Component,
|
|
||||||
): React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
|
|
||||||
|
|
||||||
// @HACK This is a cheat to hide that the underlying type is "just a string"
|
|
||||||
// once we know of a better way, we should be able to update this accordingly.
|
|
||||||
// I don't think there _is_ a good way, currently.
|
|
||||||
// @NOTE Also not too sure about the naming of this...
|
|
||||||
declare export type StyledElementType<T> = T;
|
|
||||||
declare export type StyledComponentType<C> = {
|
|
||||||
[[call]]: TaggedTemplateLiteral<C>,
|
|
||||||
+attrs: <A: {}>(
|
|
||||||
attributes: A,
|
|
||||||
) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>,
|
|
||||||
};
|
|
||||||
|
|
||||||
declare type StyledComponentList = {
|
|
||||||
ActivityIndicator: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ActivityIndicatorIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ART: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Button: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
DatePickerIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
DrawerLayoutAndroid: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Image: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ImageBackground: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ImageEditor: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ImageStore: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
KeyboardAvoidingView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ListView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
MapView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Modal: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
NavigatorIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Picker: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
PickerIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ProgressBarAndroid: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ProgressViewIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ScrollView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SegmentedControlIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Slider: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SliderIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SnapshotViewIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Switch: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
RecyclerViewBackedScrollView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
RefreshControl: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SafeAreaView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
StatusBar: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SwipeableListView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SwitchAndroid: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SwitchIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
TabBarIOS: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Text: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
TextInput: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ToastAndroid: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ToolbarAndroid: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
Touchable: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
TouchableHighlight: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
TouchableNativeFeedback: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
TouchableOpacity: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
TouchableWithoutFeedback: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
View: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
ViewPagerAndroid: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
WebView: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
FlatList: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
SectionList: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
VirtualizedList: StyledComponentType<React$ComponentType<{}>>,
|
|
||||||
};
|
|
||||||
|
|
||||||
declare export default StyledComponentList & {
|
|
||||||
[[call]]: <S: string>(S) => $ElementType<StyledComponentList, S>,
|
|
||||||
[[call]]: <P: {}, C: React$ComponentType<P>>(C) => StyledComponentType<C>,
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
type Colors = {
|
||||||
|
primary: string,
|
||||||
|
secondary: string,
|
||||||
|
sidebarBg: string,
|
||||||
|
sidebarItem: string,
|
||||||
|
sidebarItemActive: string,
|
||||||
|
sidebarHoveredItem: string,
|
||||||
|
sidebarHoveredItemLabel: string,
|
||||||
|
cardBackgroundColor: string,
|
||||||
|
text: string,
|
||||||
|
activeItem: string,
|
||||||
|
inactiveItem: string,
|
||||||
|
sidebarLogoGradientBegin: string,
|
||||||
|
sidebarLogoGradientEnd: string,
|
||||||
|
background: string,
|
||||||
|
transactionSent: string,
|
||||||
|
transactionReceived: string,
|
||||||
|
transactionsDate: string,
|
||||||
|
transactionsItemHovered: string,
|
||||||
|
inputBackground: string,
|
||||||
|
selectButtonShadow: string,
|
||||||
|
transactionsDetailsLabel: string,
|
||||||
|
statusPillLabel: string,
|
||||||
|
modalItemLabel: string,
|
||||||
|
blackTwo: string,
|
||||||
|
buttonBorderColor: string,
|
||||||
|
};
|
||||||
|
|
||||||
|
type FontSize = {
|
||||||
|
large: number,
|
||||||
|
medium: number,
|
||||||
|
regular: number,
|
||||||
|
small: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
type FontWeight = {
|
||||||
|
bold: number,
|
||||||
|
default: number,
|
||||||
|
light: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
type AppTheme = {
|
||||||
|
mode: string,
|
||||||
|
fontFamily: string,
|
||||||
|
fontWeight: FontWeight,
|
||||||
|
fontSize: FontSize,
|
||||||
|
colors: Colors,
|
||||||
|
sidebarWidth: string,
|
||||||
|
headerHeight: string,
|
||||||
|
layoutPaddingLeft: string,
|
||||||
|
layoutPaddingRight: string,
|
||||||
|
layoutContentPaddingTop: string,
|
||||||
|
boxBorderRadius: string,
|
||||||
|
transitionEase: string,
|
||||||
|
};
|
||||||
|
|
||||||
|
// =(
|
||||||
|
declare type PropsWithTheme<T = {}> =
|
||||||
|
| Object
|
||||||
|
| ({
|
||||||
|
theme: AppTheme,
|
||||||
|
} & (T | Object));
|
|
@ -66,7 +66,7 @@
|
||||||
"eslint-plugin-jsx-a11y": "^6.0.3",
|
"eslint-plugin-jsx-a11y": "^6.0.3",
|
||||||
"eslint-plugin-react": "^7.12.4",
|
"eslint-plugin-react": "^7.12.4",
|
||||||
"file-loader": "^2.0.0",
|
"file-loader": "^2.0.0",
|
||||||
"flow-bin": "^0.91.0",
|
"flow-bin": "^0.92.1",
|
||||||
"flow-coverage-report": "^0.6.1",
|
"flow-coverage-report": "^0.6.1",
|
||||||
"flow-typed": "^2.5.1",
|
"flow-typed": "^2.5.1",
|
||||||
"glow": "^1.2.2",
|
"glow": "^1.2.2",
|
||||||
|
|
|
@ -7294,10 +7294,10 @@ flow-annotation-check@1.8.1:
|
||||||
glob "7.1.1"
|
glob "7.1.1"
|
||||||
load-pkg "^3.0.1"
|
load-pkg "^3.0.1"
|
||||||
|
|
||||||
flow-bin@^0.91.0:
|
flow-bin@^0.92.1:
|
||||||
version "0.91.0"
|
version "0.92.1"
|
||||||
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.91.0.tgz#f5c89729f74b2ccbd47df6fbfadbdcc89cc1e478"
|
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.92.1.tgz#32c136c07235f30c42dc0549a0790f370fad4070"
|
||||||
integrity sha512-j+L+xNiUYnZZ27MjVI0y2c9474ZHOvdSQq0Tjwh56mEA7tfxYqp5Dcb6aZSwvs3tGMTjCrZow9aUlZf3OoRyDQ==
|
integrity sha512-F5kC5oQOR2FXROAeybJHFqgZP+moKV9fa/53QK4Q4WayTQHdA0KSl48KD1gP0A9mioRLiKUegTva/7I15cX3Iw==
|
||||||
|
|
||||||
flow-coverage-report@^0.6.1:
|
flow-coverage-report@^0.6.1:
|
||||||
version "0.6.1"
|
version "0.6.1"
|
||||||
|
|
Loading…
Reference in New Issue