chore: solve merge conflicts
This commit is contained in:
commit
74ec77501a
|
@ -1,5 +1,6 @@
|
|||
[ignore]
|
||||
.*/node_modules/polished/.*
|
||||
./__tests__
|
||||
|
||||
[include]
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2018 Zcash Foundation
|
||||
Copyright (c) 2019 Zcash Foundation
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
@ -10,23 +10,14 @@ import { darken } from 'polished';
|
|||
|
||||
const DefaultButton = styled.button`
|
||||
padding: 10px 30px;
|
||||
font-family: ${
|
||||
// $FlowFixMe
|
||||
props => props.theme.fontFamily
|
||||
};
|
||||
font-weight: ${
|
||||
// $FlowFixMe
|
||||
props => props.theme.fontWeight.bold
|
||||
};
|
||||
font-size: ${
|
||||
// $FlowFixMe
|
||||
props => `${props.theme.fontSize.regular}em`
|
||||
};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
font-weight: ${props => props.theme.fontWeight.bold};
|
||||
font-size: ${props => `${props.theme.fontSize.regular}em`};
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
min-width: 100px;
|
||||
border-radius: 100px;
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
transition: background-color 0.1s ${props => props.theme.colors.transitionEase};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
|
|
|
@ -15,9 +15,9 @@ const MenuWrapper = styled.div`
|
|||
0.05,
|
||||
props.theme.colors.activeItem,
|
||||
)}, ${props.theme.colors.activeItem})`};
|
||||
padding: 10px 20px;
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
margin-left: -10px;
|
||||
max-width: 400px;
|
||||
`;
|
||||
|
||||
const MenuItem = styled.button`
|
||||
|
@ -27,13 +27,14 @@ const MenuItem = styled.button`
|
|||
border-bottom-style: solid;
|
||||
border-bottom-color: ${props => props.theme.colors.text};
|
||||
border-bottom-width: 1px;
|
||||
padding: 15px 10px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
@ -43,6 +44,10 @@ const MenuItem = styled.button`
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const PopoverWithStyle = styled(Popover)`
|
||||
|
@ -74,18 +79,13 @@ export class DropdownComponent extends Component<Props, State> {
|
|||
const { isOpen } = this.state;
|
||||
const { label, options, renderTrigger } = this.props;
|
||||
|
||||
return (
|
||||
<PopoverWithStyle
|
||||
isOpen={isOpen}
|
||||
preferPlace='below'
|
||||
enterExitTransitionDurationMs={0}
|
||||
body={[
|
||||
const body = [
|
||||
<ClickOutside
|
||||
onClickOutside={() => this.setState(() => ({ isOpen: false }))}
|
||||
>
|
||||
<MenuWrapper>
|
||||
{label && (
|
||||
<MenuItem disabled>
|
||||
<MenuItem disabled isGroupLabel>
|
||||
<TextComponent value={label} isBold />
|
||||
</MenuItem>
|
||||
)}
|
||||
|
@ -96,8 +96,15 @@ export class DropdownComponent extends Component<Props, State> {
|
|||
))}
|
||||
</MenuWrapper>
|
||||
</ClickOutside>,
|
||||
]}
|
||||
];
|
||||
|
||||
return (
|
||||
<PopoverWithStyle
|
||||
isOpen={isOpen}
|
||||
preferPlace='below'
|
||||
enterExitTransitionDurationMs={0}
|
||||
tipSize={7}
|
||||
body={body}
|
||||
>
|
||||
{renderTrigger(
|
||||
() => this.setState(state => ({ isOpen: !state.isOpen })),
|
||||
|
|
|
@ -43,6 +43,8 @@ const Title = styled(TextComponent)`
|
|||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.25px;
|
||||
font-weight: ${props => props.theme.fontWeight.bold};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
|
@ -22,20 +22,22 @@ const StyledLink = styled(Link)`
|
|||
: props.theme.colors.sidebarItem)};
|
||||
font-size: ${props => `${props.theme.fontSize.regular}em`};
|
||||
text-decoration: none;
|
||||
font-weight: ${props => (props.isActive
|
||||
? props.theme.fontWeight.bold
|
||||
: props.theme.fontWeight.default)};
|
||||
padding: 0 20px;
|
||||
font-weight: ${props => props.theme.fontWeight.bold};
|
||||
background-color: ${props => (props.isActive
|
||||
? `${props.theme.colors.sidebarHoveredItem}`
|
||||
: 'transparent')};
|
||||
letter-spacing: 0.25px;
|
||||
padding: 25px 20px;
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
margin: 12.5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
border-right: ${props => (props.isActive
|
||||
? `1px solid ${props.theme.colors.sidebarItemActive}`
|
||||
? `3px solid ${props.theme.colors.sidebarItemActive}`
|
||||
: 'none')};
|
||||
cursor: pointer;
|
||||
transition: all 0.03s ${props => props.theme.colors.transitionEase};
|
||||
|
||||
&:hover {
|
||||
color: ${/* eslint-disable-next-line max-len */
|
||||
|
@ -47,9 +49,13 @@ const StyledLink = styled(Link)`
|
|||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 15px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-right: 13px;
|
||||
|
||||
${StyledLink}:hover & {
|
||||
filter: ${props => (props.isActive ? 'none' : 'brightness(200%)')};
|
||||
}
|
||||
`;
|
||||
|
||||
type MenuItem = {
|
||||
|
@ -67,9 +73,18 @@ export const SidebarComponent = ({ options, location }: Props) => (
|
|||
<Wrapper>
|
||||
{(options || []).map((item) => {
|
||||
const isActive = location.pathname === item.route;
|
||||
|
||||
return (
|
||||
<StyledLink isActive={isActive} key={item.route} to={item.route}>
|
||||
<Icon src={item.icon(isActive)} alt={`Sidebar Icon ${item.route}`} />
|
||||
<StyledLink
|
||||
isActive={isActive}
|
||||
key={item.route}
|
||||
to={item.route}
|
||||
>
|
||||
<Icon
|
||||
isActive={isActive}
|
||||
src={item.icon(isActive)}
|
||||
alt={`Sidebar Icon ${item.route}`}
|
||||
/>
|
||||
{item.label}
|
||||
</StyledLink>
|
||||
);
|
||||
|
|
|
@ -17,17 +17,19 @@ import formatNumber from '../utils/formatNumber';
|
|||
import truncateAddress from '../utils/truncateAddress';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 30vw;
|
||||
width: 460px;
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const TitleWrapper = styled.div`
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
|
@ -41,13 +43,14 @@ const CloseIconWrapper = styled.div`
|
|||
width: 100%;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
const CloseIconImg = styled.img`
|
||||
width: 12.5px;
|
||||
height: 12.5px;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 12px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
|
@ -57,11 +60,27 @@ const InfoRow = styled(RowComponent)`
|
|||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 30px;
|
||||
|
||||
&first-child {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #1d1d1d;
|
||||
}
|
||||
`;
|
||||
|
||||
const DetailsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
`;
|
||||
|
||||
const Divider = styled.div`
|
||||
width: 100%;
|
||||
background-color: ${props => props.theme.colors.transactionsDetailsLabel};
|
||||
background-color: #3a3a3a;
|
||||
height: 1px;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
@ -70,6 +89,7 @@ const Label = styled(TextComponent)`
|
|||
font-weight: ${props => props.theme.fontWeight.bold};
|
||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 0.25px;
|
||||
`;
|
||||
|
||||
const Ellipsis = styled(TextComponent)`
|
||||
|
@ -101,19 +121,29 @@ export const TransactionDetailsComponent = ({
|
|||
handleClose,
|
||||
}: Props) => {
|
||||
const isReceived = type === 'receive';
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<CloseIconWrapper>
|
||||
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
||||
<CloseIconImg
|
||||
src={CloseIcon}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
</CloseIconWrapper>
|
||||
<TitleWrapper>
|
||||
<TextComponent value='Transaction Details' align='center' />
|
||||
<TextComponent
|
||||
value='Transaction Details'
|
||||
align='center'
|
||||
/>
|
||||
</TitleWrapper>
|
||||
<DetailsWrapper>
|
||||
<Icon
|
||||
src={isReceived ? ReceivedIcon : SentIcon}
|
||||
alt='Transaction Type Icon'
|
||||
/>
|
||||
<TextComponent
|
||||
isBold
|
||||
size={2.625}
|
||||
value={formatNumber({
|
||||
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||
value: amount,
|
||||
|
@ -123,8 +153,6 @@ export const TransactionDetailsComponent = ({
|
|||
? theme.colors.transactionReceived
|
||||
: theme.colors.transactionSent
|
||||
}
|
||||
isBold
|
||||
size={2.625}
|
||||
/>
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
|
@ -134,6 +162,7 @@ export const TransactionDetailsComponent = ({
|
|||
size={1.5}
|
||||
color={theme.colors.transactionsDetailsLabel}
|
||||
/>
|
||||
</DetailsWrapper>
|
||||
<InfoRow>
|
||||
<ColumnComponent>
|
||||
<Label value='DATE' />
|
||||
|
|
|
@ -23,7 +23,7 @@ const Wrapper = styled(RowComponent)`
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: ${props => props.theme.colors.transactionsItemHovered};
|
||||
background-color: #101010;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -93,7 +93,11 @@ export const TransactionItemComponent = ({
|
|||
alt='Transaction Type Icon'
|
||||
/>
|
||||
<TransactionColumn>
|
||||
<TransactionTypeLabel isReceived={isReceived} value={type} />
|
||||
<TransactionTypeLabel
|
||||
isReceived={isReceived}
|
||||
value={type}
|
||||
isBold
|
||||
/>
|
||||
<TransactionTime value={transactionTime} />
|
||||
</TransactionColumn>
|
||||
</RowComponent>
|
||||
|
@ -101,6 +105,7 @@ export const TransactionItemComponent = ({
|
|||
</RowComponent>
|
||||
<ColumnComponent alignItems='flex-end'>
|
||||
<TextComponent
|
||||
isBold
|
||||
value={transactionValueInZec}
|
||||
color={
|
||||
isReceived
|
||||
|
|
13
app/theme.js
13
app/theme.js
|
@ -17,7 +17,7 @@ const cardBackgroundColor = '#000';
|
|||
const sidebarLogoGradientBegin = '#F4B728';
|
||||
const sidebarLogoGradientEnd = '#FFE240';
|
||||
const sidebarHoveredItem = '#1C1C1C';
|
||||
const sidebarHoveredItemLabel = '#969696';
|
||||
const sidebarHoveredItemLabel = '#76767e';
|
||||
const background = '#212124';
|
||||
const transactionSent = '#FF6C6C';
|
||||
const transactionReceived = '#6AEAC0';
|
||||
|
@ -30,7 +30,7 @@ const appTheme = {
|
|||
mode: DARK,
|
||||
fontFamily: 'Roboto',
|
||||
fontWeight: {
|
||||
bold: 900,
|
||||
bold: 700,
|
||||
default: 400,
|
||||
light: 300,
|
||||
},
|
||||
|
@ -69,12 +69,13 @@ const appTheme = {
|
|||
selectButtonShadow,
|
||||
transactionsDetailsLabel,
|
||||
},
|
||||
sidebarWidth: '200px',
|
||||
sidebarWidth: '180px',
|
||||
headerHeight: '60px',
|
||||
layoutPaddingLeft: '50px',
|
||||
layoutPaddingRight: '45px',
|
||||
layoutPaddingLeft: '35px',
|
||||
layoutPaddingRight: '35px',
|
||||
layoutContentPaddingTop: '20px',
|
||||
boxBorderRadius: '6px',
|
||||
boxBorderRadius: '3px',
|
||||
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
};
|
||||
|
||||
export const GlobalStyle = createGlobalStyle`
|
||||
|
|
|
@ -28,7 +28,11 @@ const Label = styled(InputLabelComponent)`
|
|||
export const ReceiveView = ({ addresses }: Props) => (
|
||||
<Wrapper>
|
||||
{(addresses || []).map(address => (
|
||||
<Row alignItems='center' justifyContent='space-between'>
|
||||
<Row
|
||||
key={address}
|
||||
alignItems='center'
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<ColumnComponent width='85%'>
|
||||
<Label value='Your Address: ' />
|
||||
<InputComponent
|
||||
|
|
|
@ -21,12 +21,12 @@ import type { State as SendState } from '../redux/modules/send';
|
|||
|
||||
const FormWrapper = styled.div`
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
width: 65%;
|
||||
width: 71%;
|
||||
`;
|
||||
|
||||
const SendWrapper = styled(ColumnComponent)`
|
||||
margin-top: 60px;
|
||||
width: 30%;
|
||||
width: 25%;
|
||||
`;
|
||||
|
||||
const ShowFeeButton = styled.button`
|
||||
|
@ -121,9 +121,15 @@ export class SendView extends PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
handleChange = (field: string) => (value: string) => {
|
||||
if (field === 'amount') {
|
||||
if (value !== '') {
|
||||
this.setState(() => ({
|
||||
[field]: value,
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
this.setState(() => ({ [field]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
handleChangeFeeType = (value: string) => {
|
||||
|
@ -179,12 +185,18 @@ export class SendView extends PureComponent<Props, State> {
|
|||
operationId,
|
||||
} = this.props;
|
||||
const {
|
||||
showFee, from, amount, to, memo, fee, feeType,
|
||||
showFee,
|
||||
from,
|
||||
amount,
|
||||
to,
|
||||
memo,
|
||||
fee,
|
||||
feeType,
|
||||
} = this.state;
|
||||
|
||||
const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
|
||||
const zecBalanceInUsd = formatNumber({
|
||||
value: new BigNumber(balance).multipliedBy(zecPrice).toNumber(),
|
||||
value: new BigNumber(balance).times(zecPrice).toNumber(),
|
||||
append: 'USD $',
|
||||
});
|
||||
const valueSent = formatNumber({
|
||||
|
@ -192,7 +204,7 @@ export class SendView extends PureComponent<Props, State> {
|
|||
append: 'ZEC ',
|
||||
});
|
||||
const valueSentInUsd = formatNumber({
|
||||
value: new BigNumber(amount).multipliedBy(zecPrice).toNumber(),
|
||||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||
append: 'USD $',
|
||||
});
|
||||
|
||||
|
@ -243,6 +255,7 @@ export class SendView extends PureComponent<Props, State> {
|
|||
}
|
||||
>
|
||||
<TextComponent
|
||||
paddingTop='10px'
|
||||
value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
|
||||
align='right'
|
||||
/>
|
||||
|
|
|
@ -34,6 +34,9 @@ const getDaemonOptions = ({ username, password }) => {
|
|||
'-metricsrefreshtime=1',
|
||||
`-rpcuser=${username}`,
|
||||
`-rpcpassword=${password}`,
|
||||
// TODO: For test purposes only
|
||||
'-testnet',
|
||||
'-addnode=testnet.z.cash',
|
||||
];
|
||||
return isDev
|
||||
? defaultOptions.concat(['-testnet', '-addnode=testnet.z.cash'])
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "zec-react-wallet",
|
||||
"version": "0.1.1",
|
||||
"version": "0.2.0",
|
||||
"description": "Zcash Reference Wallet",
|
||||
"main": "config/main.js",
|
||||
"license": "MIT",
|
||||
|
|
|
@ -8,7 +8,8 @@ import store from '../config/electron-store';
|
|||
|
||||
const RPC = {
|
||||
host: '127.0.0.1',
|
||||
port: isDev ? 18232 : 8232,
|
||||
// port: isDev ? 18232 : 8232,
|
||||
port: 18232, // TODO: Test purposes only
|
||||
user: store.get('rpcuser'),
|
||||
password: store.get('rpcpassword'),
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue