v0.7.3 (#150)

v0.7.3
ZcashFoundation · Jun 7, 2019 · 7f3fda9 · 7f3fda9
2 parents b3d2e76 + 1eecdc4
commit 7f3fda9
Show file tree

Hide file tree

Showing 29 changed files with 369 additions and 99 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,32 @@
+---
+name: Bug Report 🐞
+about: Something isn't working as expected? Here is the right place to report.
+---
+
+## Description
+
+Describe the issue that you're seeing.
+
+### Steps to reproduce
+
+Clear steps describing how to reproduce the issue. This makes your issue _much_ easier to diagnose (seriously).
+
+### Expected result
+
+What should happen?
+
+### Actual result
+
+What happened.
+
+### Environment
+
+- What version of Zepio are you using?
+- Which Operating System are you using (macOS/Linux/Windows)? What version?
+- Are you using an external `zcashd` daemon or the one built inside Zepio?
+
+### Logs
+
+- `%APPDATA%/zepio/main-process-logs.txt` on Windows
+- `$XDG_CONFIG_HOME/zepio/main-process-logs.txt` or `~/.config/zepio/main-process-logs.txt` on Linux
+- `~/Library/Application Support/zepio/main-process-logs.txt` on macOS
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,16 @@
+---
+name: Feature Request 💡
+about: Suggest a new idea for the project.
+---
+
+## Summary
+
+Brief explanation of the feature.
+
+### Basic example
+
+If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
+
+### Motivation
+
+Why are we doing this? What use cases does it support? What is the expected outcome?
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -0,0 +1,20 @@
+---
+name: Question 🤔
+about: Usage question or discussion about Gatsby.
+---
+
+## Summary
+
+## Relevant information
+
+### Environment (if relevant)
+
+- What version of Zepio are you using?
+- Which Operating System are you using (macOS/Linux/Windows)? What version?
+- Are you using an external `zcashd` daemon or the one built inside Zepio?
+
+### Logs (if relevant)
+
+- `%APPDATA%/zepio/main-process-logs.txt` on Windows
+- `$XDG_CONFIG_HOME/zepio/main-process-logs.txt` or `~/.config/zepio/main-process-logs.txt` on Linux
+- `~/Library/Application Support/zepio/main-process-logs.txt` on macOS
diff --git a/__tests__/components/status-pill.test.js b/__tests__/components/status-pill.test.js
@@ -18,6 +18,7 @@ describe('<StatusPill />', () => {
           getBlockchainStatus={() => Promise.resolve()}
           nodeSyncProgress={56.0}
           nodeSyncType='syncing'
+          isRefetching={false}
         />
       </ThemeProvider>,
     );
@@ -32,6 +33,7 @@ describe('<StatusPill />', () => {
           getBlockchainStatus={() => Promise.resolve()}
           nodeSyncProgress={100.0}
           nodeSyncType='ready'
+          isRefetching={false}
         />
       </ThemeProvider>,
     );
@@ -46,6 +48,7 @@ describe('<StatusPill />', () => {
           getBlockchainStatus={() => Promise.resolve()}
           nodeSyncProgress={0.0}
           nodeSyncType='error'
+          isRefetching={false}
         />
       </ThemeProvider>,
     );

diff --git a/app/components/loader.js b/app/components/loader.js
@@ -0,0 +1,20 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+import { TextComponent } from './text';
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+
+export const LoaderComponent = () => (
+  <Wrapper>
+    <TextComponent value='Loading...' />
+  </Wrapper>
+);
diff --git a/app/components/status-pill.js b/app/components/status-pill.js
@@ -27,6 +27,14 @@ const rotate = keyframes`
 `;
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100%;
+`;
+
+const StatusWrapper = styled.div`
   align-items: center;
   display: flex;
   background: ${props => props.theme.colors.statusPillBg};
@@ -90,6 +98,15 @@ const TooltipText = styled(TextComponent)`
   font-weight: 700;
 `;
 
+const RefetchingLabel = styled.p`
+  color: ${props => props.theme.colors.sidebarItem};
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-family: ${props => props.theme.fontFamily};
+  margin-right: 10px;
+`;
+
 type Props = {
   theme: AppTheme,
 } & MapStateToProps &
@@ -219,26 +236,31 @@ class Component extends PureComponent<Props, State> {
 
   render() {
     const icon = this.getIcon();
-    const { nodeSyncType, nodeSyncProgress } = this.props;
+    const { nodeSyncType, nodeSyncProgress, isRefetching } = this.props;
     const { showTooltip } = this.state;
     const percent = nodeSyncType && nodeSyncType === NODE_SYNC_TYPES.SYNCING
       ? `(${nodeSyncProgress.toFixed(2)}%)`
       : '';
 
     return (
-      // eslint-disable-next-line
-      <Wrapper
-        onMouseOver={() => this.setState({ showTooltip: true })}
-        onMouseOut={() => this.setState({ showTooltip: false })}
-        id='status-pill'
-      >
-        {showTooltip && (
-          <Tooltip>
-            <TooltipText value={this.getStatusText()} />
-          </Tooltip>
-        )}
-        {icon && <Icon src={icon} animated={this.isSyncing()} />}
-        <StatusPillLabel value={`${this.getLabel()} ${percent}`} />
+      <Wrapper>
+        {isRefetching && <RefetchingLabel>Refetching...</RefetchingLabel>}
+        {
+          // eslint-disable-next-line
+          <StatusWrapper
+            onMouseOver={() => this.setState({ showTooltip: true })}
+            onMouseOut={() => this.setState({ showTooltip: false })}
+            id='status-pill'
+          >
+            {showTooltip && (
+              <Tooltip>
+                <TooltipText value={this.getStatusText()} />
+              </Tooltip>
+            )}
+            {icon && <Icon src={icon} animated={this.isSyncing()} />}
+            <StatusPillLabel value={`${this.getLabel()} ${percent}`} />
+          </StatusWrapper>
+        }
       </Wrapper>
     );
   }

diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js
@@ -9,6 +9,8 @@ import { formatNumber } from '../utils/format-number';
 import { getCoinName } from '../utils/get-coin-name';
 import { DARK } from '../constants/themes';
 
+import { media } from '../theme';
+
 import ShieldDarkImage from '../assets/images/shield_dark.png';
 import ShieldLightImage from '../assets/images/shield_light.png';
 
@@ -18,12 +20,17 @@ const OutsideWrapper = styled.div`
 
 const Wrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   background-color: ${props => props.theme.colors.walletSummaryBg};
   border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
   border-radius: ${props => props.theme.boxBorderRadius};
   padding: 30px 30px;
   position: relative;
+
+  ${media.main`
+    margin-top: 0;
+    flex-direction: row;
+  `}
 `;
 
 const OutsideLabel = styled(TextComponent)`
@@ -86,6 +93,15 @@ const UnconfirmedValue = styled(MiddleLabel)`
   color: ${props => props.theme.colors.walletSummaryUnconfirmed};
 `;
 
+const DetailMainContainer = styled.div`
+  display: flex;
+  margin-top: 1rem;
+
+  ${media.main`
+    margin-top: 0;
+  `}
+`;
+
 type Props = {
   total: number,
   shielded: number,
@@ -120,33 +136,35 @@ export const Component = ({
             size={theme.fontSize.medium * 2}
           />
         </TotalContainer>
-        <DetailContainer>
-          <ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} />
-          <MiddleLabel
-            value={`${coinName} ${formatNumber({ value: shielded })}`}
-            isBold
-            size='16px'
-          />
-          <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
-        </DetailContainer>
-        <DetailContainer>
-          <DefaultLabel value='TRANSPARENT' isBold size={theme.fontSize.small} />
-          <MiddleLabel
-            value={`${coinName} ${formatNumber({ value: transparent })}`}
-            isBold
-            size='16px'
-          />
-          <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
-        </DetailContainer>
-        <DetailContainer>
-          <UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} />
-          <UnconfirmedValue
-            value={`${coinName} ${formatNumber({ value: transparent })}`}
-            isBold
-            size='16px'
-          />
-          <USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} />
-        </DetailContainer>
+        <DetailMainContainer>
+          <DetailContainer>
+            <ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} />
+            <MiddleLabel
+              value={`${coinName} ${formatNumber({ value: shielded })}`}
+              isBold
+              size='16px'
+            />
+            <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
+          </DetailContainer>
+          <DetailContainer>
+            <DefaultLabel value='TRANSPARENT' isBold size={theme.fontSize.small} />
+            <MiddleLabel
+              value={`${coinName} ${formatNumber({ value: transparent })}`}
+              isBold
+              size='16px'
+            />
+            <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
+          </DetailContainer>
+          <DetailContainer>
+            <UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} />
+            <UnconfirmedValue
+              value={`${coinName} ${formatNumber({ value: transparent })}`}
+              isBold
+              size='16px'
+            />
+            <USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} />
+          </DetailContainer>
+        </DetailMainContainer>
       </Wrapper>
     </OutsideWrapper>
   );

diff --git a/app/constants/fetch-states.js b/app/constants/fetch-states.js
@@ -0,0 +1,7 @@
+// @flow
+export const FETCH_STATE = {
+  INITIALIZING: 'INITIALIZING',
+  REFETCHING: 'REFETCHING',
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR',
+};
diff --git a/app/containers/dashboard.js b/app/containers/dashboard.js
@@ -21,24 +21,42 @@ import {
   loadWalletSummarySuccess,
   loadWalletSummaryError,
 } from '../redux/modules/wallet';
+import type { TransactionsList } from '../redux/modules/transactions';
 
 import type { AppState } from '../types/app-state';
-import type { Dispatch } from '../types/redux';
-
-const mapStateToProps = ({ walletSummary, app }: AppState) => ({
+import type { Dispatch, FetchState } from '../types/redux';
+
+export type MapStateToProps = {|
+  total: number,
+  shielded: number,
+  transparent: number,
+  unconfirmed: number,
+  error: null | string,
+  fetchState: FetchState,
+  zecPrice: number,
+  addresses: string[],
+  transactions: TransactionsList,
+  isDaemonReady: boolean,
+|};
+
+const mapStateToProps: AppState => MapStateToProps = ({ walletSummary, app }) => ({
   total: walletSummary.total,
   shielded: walletSummary.shielded,
   transparent: walletSummary.transparent,
   unconfirmed: walletSummary.unconfirmed,
   error: walletSummary.error,
-  isLoading: walletSummary.isLoading,
+  fetchState: walletSummary.fetchState,
   zecPrice: walletSummary.zecPrice,
   addresses: walletSummary.addresses,
   transactions: walletSummary.transactions,
   isDaemonReady: app.nodeSyncType === NODE_SYNC_TYPES.READY,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
+export type MapDispatchToProps = {|
+  getSummary: () => Promise<void>,
+|};
+
+const mapDispatchToProps: (dispatch: Dispatch) => MapDispatchToProps = (dispatch: Dispatch) => ({
   getSummary: async () => {
     dispatch(loadWalletSummary());
 

diff --git a/app/containers/receive.js b/app/containers/receive.js
@@ -8,6 +8,7 @@ import { ReceiveView } from '../views/receive';
 import { SAPLING } from '../constants/zcash-network';
 
 import {
+  loadAddresses,
   loadAddressesSuccess,
   loadAddressesError,
   getNewAddressSuccess,
@@ -22,14 +23,16 @@ import rpc from '../../services/api';
 import electronStore from '../../config/electron-store';
 
 import type { AppState } from '../types/app-state';
-import type { Dispatch } from '../types/redux';
+import type { Dispatch, FetchState } from '../types/redux';
 
 export type MapStateToProps = {|
+  fetchState: FetchState,
   addresses: { address: string, balance: number }[],
 |};
 
 const mapStateToProps = ({ receive }: AppState): MapStateToProps => ({
   addresses: receive.addresses,
+  fetchState: receive.fetchState,
 });
 
 export type MapDispatchToProps = {|
@@ -39,6 +42,8 @@ export type MapDispatchToProps = {|
 
 const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
   loadAddresses: async () => {
+    dispatch(loadAddresses());
+
     const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
 
     const [tAddressesErr, transparentAddresses] = await eres(rpc.getaddressesbyaccount(''));