Merge branch 'bugfix/overall-fixes' of github.com:andrerfneves/zec-react-wallet into bugfix/overall-fixes

app/components/sidebar.js

@@ -10,6 +10,7 @@ import { MENU_OPTIONS } from '../constants/sidebar';
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   width: ${props => props.theme.sidebarWidth};
   height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
   font-family: ${props => props.theme.fontFamily};
@@ -19,6 +20,46 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
+const InnerWrapperTop = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const InnerWrapperBottom = styled.div`
+  background-color: ${props => props.theme.colors.sidebarItemHoveredBg};
+`;
+
+const DetailsItemWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 10px 15px;
+  justify-content: space-between;
+  border-top: 2px solid ${props => props.theme.colors.sidebarBg};
+`;
+
+const DetailsItemLabel = styled.div`
+  color: ${props => props.theme.colors.sidebarItem};
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+
+  ${DetailsItemWrapper}:hover & {
+    color: ${props => props.theme.colors.sidebarItemHovered};
+  }
+`;
+
+const DetailsItemValue = styled.div`
+  color: ${props => props.theme.colors.sidebarItem};
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-weight: 700;
+
+  ${DetailsItemWrapper}:hover & {
+    color: ${props => props.theme.colors.sidebarItemHovered};
+  }
+`;
+
 /* eslint-disable max-len */
 type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
 const StyledLink = styled.a`
@@ -79,32 +120,54 @@ type Props = {
   options?: MenuItem[],
   location: Location,
   theme: AppTheme,
+  zcashNetwork: string,
+  embeddedDaemon: boolean,
 };
 
 export const Component = ({
-  options, location, history, theme,
+  options, location, history, theme, zcashNetwork, embeddedDaemon,
 }: Props) => (
   <Wrapper id='sidebar'>
-    {(options || []).map((item) => {
+    <InnerWrapperTop>
-      const isActive = item.route === '/'
+      {(options || []).map((item) => {
-        ? location.pathname === item.route
+        const isActive = item.route === '/'
-        : location.pathname.startsWith(item.route);
+          ? location.pathname === item.route
+          : location.pathname.startsWith(item.route);
 
-      return (
+        return (
-        <StyledLink
+          <StyledLink
-          isActive={isActive}
-          key={item.route}
-          onClick={() => (isActive ? {} : history.push(item.route))}
-        >
-          <Icon
             isActive={isActive}
-            src={item.icon(isActive, theme.mode)}
+            key={item.route}
-            alt={`${item.route}`}
+            onClick={() => (isActive ? {} : history.push(item.route))}
-          />
+          >
-          {item.label}
+            <Icon
-        </StyledLink>
+              isActive={isActive}
-      );
+              src={item.icon(isActive, theme.mode)}
-    })}
+              alt={`${item.route}`}
+            />
+            {item.label}
+          </StyledLink>
+        );
+      })}
+    </InnerWrapperTop>
+    <InnerWrapperBottom>
+      <DetailsItemWrapper>
+        <DetailsItemLabel>
+          Daemon
+        </DetailsItemLabel>
+        <DetailsItemValue>
+          {embeddedDaemon ? 'Built-in' : 'Custom'}
+        </DetailsItemValue>
+      </DetailsItemWrapper>
+      <DetailsItemWrapper>
+        <DetailsItemLabel>
+          Network
+        </DetailsItemLabel>
+        <DetailsItemValue>
+          {zcashNetwork}
+        </DetailsItemValue>
+      </DetailsItemWrapper>
+    </InnerWrapperBottom>
   </Wrapper>
 );
 

app/containers/app.js

@@ -1,8 +1,8 @@
 // @flow
 
 import { connect } from 'react-redux';
-import { closeErrorModal } from '../redux/modules/app';
 
+import { closeErrorModal } from '../redux/modules/app';
 import { LayoutComponent } from '../components/layout';
 
 import type { Dispatch } from '../types/redux';

app/containers/dashboard.js

@@ -6,16 +6,19 @@ import flow from 'lodash.flow';
 import groupBy from 'lodash.groupby';
 import dateFns from 'date-fns';
 import { BigNumber } from 'bignumber.js';
+
 import { DashboardView } from '../views/dashboard';
+
 import rpc from '../../services/api';
-import { listShieldedTransactions } from '../../services/shielded-transactions';
 import store from '../../config/electron-store';
+import { listShieldedTransactions } from '../../services/shielded-transactions';
+import { sortByDescend } from '../utils/sort-by-descend';
+
 import {
   loadWalletSummary,
   loadWalletSummarySuccess,
   loadWalletSummaryError,
 } from '../redux/modules/wallet';
-import { sortByDescend } from '../utils/sort-by-descend';
 
 import type { AppState } from '../types/app-state';
 import type { Dispatch } from '../types/redux';

app/containers/receive.js

@@ -42,13 +42,13 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
 
     if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
 
-    const latestzAddress = zAddresses[0]
+    const latestZAddress = zAddresses[0]
       ? {
         address: zAddresses[0],
         balance: await rpc.z_getbalance(zAddresses[0]),
       }
       : null;
-    const latesttAddress = transparentAddresses[0]
+    const latestTAddress = transparentAddresses[0]
       ? {
         address: transparentAddresses[0],
         balance: await rpc.z_getbalance(transparentAddresses[0]),
@@ -68,7 +68,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
 
     dispatch(
       loadAddressesSuccess({
-        addresses: [latestzAddress, latesttAddress, ...allAddresses].filter(Boolean),
+        addresses: [latestZAddress, latestTAddress, ...allAddresses].filter(Boolean),
       }),
     );
   },

app/containers/send.js

@@ -163,14 +163,14 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
 
     if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
 
-    const latestzAddress = zAddresses[0]
+    const latestZAddress = zAddresses[0]
       ? {
         address: zAddresses[0],
         balance: await rpc.z_getbalance(zAddresses[0]),
       }
       : null;
 
-    const latesttAddress = transparentAddresses[0]
+    const latestTAddress = transparentAddresses[0]
       ? {
         address: transparentAddresses[0],
         balance: await rpc.z_getbalance(transparentAddresses[0]),
@@ -190,7 +190,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
 
     return dispatch(
       loadAddressesSuccess({
-        addresses: [latesttAddress, latestzAddress, ...allAddresses].filter(Boolean),
+        addresses: [latestTAddress, latestZAddress, ...allAddresses].filter(Boolean),
       }),
     );
   },

app/containers/settings.js

@@ -1,4 +1,5 @@
 // @flow
+
 import eres from 'eres';
 import { connect } from 'react-redux';
 import electron from 'electron'; // eslint-disable-line

app/containers/sidebar.js

@@ -1,5 +1,22 @@
 // @flow
 
+import { connect } from 'react-redux';
+
 import { SidebarComponent } from '../components/sidebar';
 
-export const SidebarContainer = SidebarComponent;
+import type { AppState } from '../types/app-state';
+
+export type MapStateToProps = {|
+  zcashNetwork: string,
+  embeddedDaemon: boolean,
+|};
+
+const mapStateToProps = ({ app }: AppState): MapStateToProps => ({
+  zcashNetwork: app.zcashNetwork,
+  embeddedDaemon: app.embeddedDaemon,
+});
+
+// $FlowFixMe
+export const SidebarContainer = connect(
+  mapStateToProps,
+)(SidebarComponent);

app/views/settings.js

@@ -364,7 +364,7 @@ export class SettingsView extends PureComponent<Props, State> {
           showButtons={embeddedDaemon}
           renderTrigger={toggleVisibility => (
             <ThemeSelectWrapper>
-              <SettingsTitle value='Zcash net' />
+              <SettingsTitle value='Zcash Network' />
               <SelectComponent
                 onChange={value => (zcashNetwork !== value ? toggleVisibility() : undefined)}
                 value={zcashNetwork}