chore: solve merge conflicts

.flowconfig

@@ -1,5 +1,6 @@
 [ignore]
 .*/node_modules/polished/.*
+./__tests__
 
 [include]
 

LICENSE.md

@@ -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

app/components/button.js

@@ -10,23 +10,14 @@ import { darken } from 'polished';
 
 const DefaultButton = styled.button`
   padding: 10px 30px;
-  font-family: ${
+  font-family: ${props => props.theme.fontFamily};
-  // $FlowFixMe
+  font-weight: ${props => props.theme.fontWeight.bold};
-  props => props.theme.fontFamily
+  font-size: ${props => `${props.theme.fontSize.regular}em`};
-};
-  font-weight: ${
-  // $FlowFixMe
-  props => props.theme.fontWeight.bold
-};
-  font-size: ${
-  // $FlowFixMe
-  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%;
 `;
 

app/components/dropdown.js

@@ -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,30 +79,32 @@ export class DropdownComponent extends Component<Props, State> {
     const { isOpen } = this.state;
     const { label, options, renderTrigger } = this.props;
 
+    const body = [
+      <ClickOutside
+        onClickOutside={() => this.setState(() => ({ isOpen: false }))}
+      >
+        <MenuWrapper>
+          {label && (
+            <MenuItem disabled isGroupLabel>
+              <TextComponent value={label} isBold />
+            </MenuItem>
+          )}
+          {options.map(({ label: optionLabel, onClick }) => (
+            <MenuItem onClick={onClick} key={optionLabel}>
+              <TextComponent value={optionLabel} />
+            </MenuItem>
+          ))}
+        </MenuWrapper>
+      </ClickOutside>,
+    ];
+
     return (
       <PopoverWithStyle
         isOpen={isOpen}
         preferPlace='below'
         enterExitTransitionDurationMs={0}
-        body={[
-          <ClickOutside
-            onClickOutside={() => this.setState(() => ({ isOpen: false }))}
-          >
-            <MenuWrapper>
-              {label && (
-                <MenuItem disabled>
-                  <TextComponent value={label} isBold />
-                </MenuItem>
-              )}
-              {options.map(({ label: optionLabel, onClick }) => (
-                <MenuItem onClick={onClick} key={optionLabel}>
-                  <TextComponent value={optionLabel} />
-                </MenuItem>
-              ))}
-            </MenuWrapper>
-          </ClickOutside>,
-        ]}
         tipSize={7}
+        body={body}
       >
         {renderTrigger(
           () => this.setState(state => ({ isOpen: !state.isOpen })),

app/components/header.js

@@ -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 = {

app/components/sidebar.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
   width: ${props => props.theme.sidebarWidth};
   height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
   font-family: ${props => props.theme.fontFamily}
-  background-color: ${props => props.theme.colors.sidebarBg}; 
+  background-color: ${props => props.theme.colors.sidebarBg};
   padding-top: 15px;
   position: relative;
 `;
@@ -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
+  font-weight: ${props => props.theme.fontWeight.bold};
-    ? props.theme.fontWeight.bold
+  background-color: ${props => (props.isActive
-    : props.theme.fontWeight.default)};
+    ? `${props.theme.colors.sidebarHoveredItem}`
-  padding: 0 20px;
+    : '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;
+  width: 17px;
-  height: 20px;
+  height: 17px;
-  margin-right: 15px;
+  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}>
+        <StyledLink
-          <Icon src={item.icon(isActive)} alt={`Sidebar Icon ${item.route}`} />
+          isActive={isActive}
+          key={item.route}
+          to={item.route}
+        >
+          <Icon
+            isActive={isActive}
+            src={item.icon(isActive)}
+            alt={`Sidebar Icon ${item.route}`}
+          />
           {item.label}
         </StyledLink>
       );

app/components/transaction-details.js

@@ -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;
+  width: 16px;
-  height: 12.5px;
+  height: 16px;
-  margin-top: 10px;
+  margin-top: 12px;
-  margin-right: 10px;
+  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,39 +121,48 @@ 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>
-      <Icon
+      <DetailsWrapper>
-        src={isReceived ? ReceivedIcon : SentIcon}
+        <Icon
-        alt='Transaction Type Icon'
+          src={isReceived ? ReceivedIcon : SentIcon}
-      />
+          alt='Transaction Type Icon'
-      <TextComponent
+        />
-        value={formatNumber({
+        <TextComponent
-          append: `${isReceived ? '+' : '-'}ZEC `,
+          isBold
-          value: amount,
+          size={2.625}
-        })}
+          value={formatNumber({
-        color={
+            append: `${isReceived ? '+' : '-'}ZEC `,
-          isReceived
+            value: amount,
-            ? theme.colors.transactionReceived
+          })}
-            : theme.colors.transactionSent
+          color={
-        }
+            isReceived
-        isBold
+              ? theme.colors.transactionReceived
-        size={2.625}
+              : theme.colors.transactionSent
-      />
+          }
-      <TextComponent
+        />
-        value={formatNumber({
+        <TextComponent
-          append: `${isReceived ? '+' : '-'}USD `,
+          value={formatNumber({
-          value: amount * zecPrice,
+            append: `${isReceived ? '+' : '-'}USD `,
-        })}
+            value: amount * zecPrice,
-        size={1.5}
+          })}
-        color={theme.colors.transactionsDetailsLabel}
+          size={1.5}
-      />
+          color={theme.colors.transactionsDetailsLabel}
+        />
+      </DetailsWrapper>
       <InfoRow>
         <ColumnComponent>
           <Label value='DATE' />

app/components/transaction-item.js

@@ -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

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',
+  layoutPaddingLeft: '35px',
-  layoutPaddingRight: '45px',
+  layoutPaddingRight: '35px',
   layoutContentPaddingTop: '20px',
-  boxBorderRadius: '6px',
+  boxBorderRadius: '3px',
+  transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
 };
 
 export const GlobalStyle = createGlobalStyle`

app/views/receive.js

@@ -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

app/views/send.js

@@ -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) => {
-    this.setState(() => ({
+    if (field === 'amount') {
-      [field]: value,
+      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'
             />

config/daemon/zcashd-child-process.js

@@ -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'])

package.json

@@ -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",

services/api.js

@@ -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'),
 };