From bc12b046012a1d278f07f46aec2d5d263439b4e3 Mon Sep 17 00:00:00 2001 From: Andre Neves Date: Wed, 20 Mar 2019 09:03:34 -0400 Subject: [PATCH 1/3] feature: sidebar additional daemon and network details --- app/components/sidebar.js | 101 +++++++++++++++++++++++++++++++------- app/containers/sidebar.js | 19 ++++++- 2 files changed, 100 insertions(+), 20 deletions(-) diff --git a/app/components/sidebar.js b/app/components/sidebar.js index 6b3d1a6..c331565 100644 --- a/app/components/sidebar.js +++ b/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) => ( - {(options || []).map((item) => { - const isActive = item.route === '/' - ? location.pathname === item.route - : location.pathname.startsWith(item.route); + + {(options || []).map((item) => { + const isActive = item.route === '/' + ? location.pathname === item.route + : location.pathname.startsWith(item.route); - return ( - (isActive ? {} : history.push(item.route))} - > - - {item.label} - - ); - })} + key={item.route} + onClick={() => (isActive ? {} : history.push(item.route))} + > + + {item.label} + + ); + })} + + + + + Daemon + + + {embeddedDaemon ? 'Built-in' : 'Custom'} + + + + + Network + + + {zcashNetwork} + + + ); diff --git a/app/containers/sidebar.js b/app/containers/sidebar.js index 7fdd70b..352e21d 100644 --- a/app/containers/sidebar.js +++ b/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); From 21d716c1b0c5d9c664df661e0d58d73436364fad Mon Sep 17 00:00:00 2001 From: Andre Neves Date: Wed, 20 Mar 2019 09:04:34 -0400 Subject: [PATCH 2/3] chore: general code cleanup --- app/containers/app.js | 2 +- app/containers/dashboard.js | 7 +++++-- app/containers/receive.js | 6 +++--- app/containers/send.js | 6 +++--- app/containers/settings.js | 1 + 5 files changed, 13 insertions(+), 9 deletions(-) diff --git a/app/containers/app.js b/app/containers/app.js index 0c4a1d9..4bf62cf 100644 --- a/app/containers/app.js +++ b/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'; diff --git a/app/containers/dashboard.js b/app/containers/dashboard.js index dbfd5c3..8754818 100644 --- a/app/containers/dashboard.js +++ b/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'; diff --git a/app/containers/receive.js b/app/containers/receive.js index 707f2a3..8f75e89 100644 --- a/app/containers/receive.js +++ b/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), }), ); }, diff --git a/app/containers/send.js b/app/containers/send.js index 1fa1bd1..9495854 100644 --- a/app/containers/send.js +++ b/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), }), ); }, diff --git a/app/containers/settings.js b/app/containers/settings.js index 81242b0..75a586a 100644 --- a/app/containers/settings.js +++ b/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 From 5231b55ad068d70b2371f1e91554e473ceddc89e Mon Sep 17 00:00:00 2001 From: Andre Neves Date: Wed, 20 Mar 2019 09:05:16 -0400 Subject: [PATCH 3/3] chore: change copy on settings view --- app/views/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/settings.js b/app/views/settings.js index 8dea055..bd277b8 100644 --- a/app/views/settings.js +++ b/app/views/settings.js @@ -364,7 +364,7 @@ export class SettingsView extends PureComponent { showButtons={embeddedDaemon} renderTrigger={toggleVisibility => ( - + (zcashNetwork !== value ? toggleVisibility() : undefined)} value={zcashNetwork}