Merge branch 'feature/welcome' of github.com:andrerfneves/zec-react-wallet into feature/welcome

CONTRIBUTING.md

@@ -4,13 +4,12 @@ When contributing to this repository, please first discuss the change you wish t
 
 ## Pull Request Process
 
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a
-   build.
+1. Ensure any extraneous install or build dependencies are removed before doing a build.
 2. Update the README.md with details of changes to the interface, this includes new environment
    variables, exposed ports, useful file locations and container parameters.
 3. Increase the version numbers in any examples files and the README.md to the new version that this
    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
+4. You may merge the Pull Request in once you have the sign-off of at least two other developers, or if you
    do not have permission to do that, you may request the second reviewer to merge it for you.
 
 Learn more about this project's [development workflow](https://github.com/ZcashFoundation/zepio/blob/master/DEVELOPMENT_WORKFLOW.md).

README.md

@@ -122,4 +122,4 @@ In order to contribute and submit PRs to improve the **Zepio** codebase, please
 
 ## License
 
-MIT © Zcash Foundation 2019 zfnd.org
+MIT © Zcash Foundation 2019 [zfnd.org](zfnd.org)

app/app.js

@@ -20,10 +20,21 @@ type State = {
 
 const getInitialTheme = () => {
   const themeInStore = String(electronStore.get(THEME_MODE));
+
   if (themeInStore === DARK || themeInStore === LIGHT) return themeInStore;
   return DARK;
 };
 
+const getWelcomeModal = () => {
+  const welcomeModalInStore = electronStore.get('DISPLAY_WELCOME_MODAL');
+
+  if (welcomeModalInStore !== null || welcomeModalInStore !== undefined) {
+    return welcomeModalInStore || false;
+  }
+
+  return true;
+};
+
 export class App extends Component<Props, State> {
   state = {
     themeMode: getInitialTheme(),
@@ -31,6 +42,7 @@ export class App extends Component<Props, State> {
 
   componentDidMount() {
     electronStore.set(THEME_MODE, getInitialTheme());
+    electronStore.set(THEME_MODE, getWelcomeModal());
 
     electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
   }

app/components/confirm-dialog.js

@@ -69,8 +69,11 @@ type Props = {
   onConfirm: () => void,
   onClose?: () => void,
   showButtons?: boolean,
+  showSingleConfirmButton?: boolean,
+  singleConfirmButtonText?: string,
   width?: number,
   isLoading?: boolean,
+  isVisible?: boolean,
   children: (() => void) => Element<*>,
 };
 
@@ -81,7 +84,10 @@ export const ConfirmDialogComponent = ({
   onClose,
   renderTrigger,
   showButtons,
+  showSingleConfirmButton,
+  singleConfirmButtonText,
   isLoading,
+  isVisible,
   width,
 }: Props) => {
   const handleClose = toggle => () => {
@@ -95,6 +101,7 @@ export const ConfirmDialogComponent = ({
       renderTrigger={renderTrigger}
       closeOnBackdropClick={false}
       closeOnEsc={false}
+      isVisible={isVisible}
     >
       {toggle => (
         <Wrapper width={Number(width)}>
@@ -122,6 +129,16 @@ export const ConfirmDialogComponent = ({
               />
             </ButtonWrapper>
           )}
+          {showSingleConfirmButton && (
+            <ButtonWrapper>
+              <Btn
+                id='confirm-modal-button'
+                label={String(singleConfirmButtonText)}
+                onClick={onConfirm}
+                isLoading={isLoading}
+              />
+            </ButtonWrapper>
+          )}
         </Wrapper>
       )}
     </ModalComponent>
@@ -130,7 +147,10 @@ export const ConfirmDialogComponent = ({
 
 ConfirmDialogComponent.defaultProps = {
   showButtons: true,
+  showSingleConfirmButton: false,
+  singleConfirmButtonText: 'Ok!',
   width: 460,
   isLoading: false,
+  isVisible: false,
   onClose: () => {},
 };

app/components/modal.js

@@ -3,6 +3,7 @@
 import React, { PureComponent, Fragment, type Element } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
+import { tsImportEqualsDeclaration } from '@babel/types';
 
 const ModalWrapper = styled.div`
   width: 100vw;
@@ -26,6 +27,7 @@ type Props = {
   children: (() => void) => Element<*>,
   closeOnBackdropClick?: boolean,
   closeOnEsc?: boolean,
+  isVisible?: boolean,
 };
 
 type State = {
@@ -40,14 +42,24 @@ export class ModalComponent extends PureComponent<Props, State> {
   static defaultProps = {
     closeOnBackdropClick: true,
     closeOnEsc: true,
-  };
-
-  state = {
     isVisible: false,
   };
 
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isVisible: props.isVisible || false,
+    };
+  }
+
   componentDidMount() {
     const { closeOnEsc } = this.props;
+    const { isVisible } = this.state;
+
+    if (isVisible) {
+      if (modalRoot) modalRoot.appendChild(this.element);
+    }
 
     if (closeOnEsc) {
       window.addEventListener('keydown', this.handleEscPress);

app/menu.js

@@ -32,12 +32,12 @@ const helpMenu = {
   role: 'help',
   submenu: [
     {
-      label: `v${packageJson.version}`,
+      label: `Zepio Version v${packageJson.version}`,
       enabled: false,
     },
     { type: 'separator' },
     {
-      label: 'Help & FAQ',
+      label: 'Help / FAQ',
       click() {
         openExternal(DOCS_URL);
       },

app/views/dashboard.js

@@ -1,14 +1,29 @@
 // @flow
 
 import React, { PureComponent, Fragment } from 'react';
+import styled from 'styled-components';
 
 import { WalletSummaryComponent } from '../components/wallet-summary';
 import { TransactionDailyComponent } from '../components/transaction-daily';
 import { TextComponent } from '../components/text';
 import { EmptyTransactionsComponent } from '../components/empty-transactions';
+import { ConfirmDialogComponent } from '../components/confirm-dialog';
+import { ColumnComponent } from '../components/column';
+
+import store from '../../config/electron-store';
 
 import type { TransactionsList } from '../redux/modules/transactions';
 
+const ModalContent = styled(ColumnComponent)`
+  min-height: 400px;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    word-break: break-word;
+  }
+`;
+
 type Props = {
   getSummary: () => void,
   total: number,
@@ -35,6 +50,10 @@ export class DashboardView extends PureComponent<Props> {
     if (isDaemonReady) {
       this.interval = setInterval(() => getSummary(), UPDATE_INTERVAL);
     }
+
+    if (store.get('DISPLAY_WELCOME_MODAL')) {
+      // SHOW MODAL
+    }
   }
 
   componentWillUnmount() {
@@ -79,6 +98,21 @@ export class DashboardView extends PureComponent<Props> {
             />
           ))
         )}
+        <ConfirmDialogComponent
+          title='Ok. Let me in!'
+          onConfirm={() => store.set('DISPLAY_WELCOME_MODAL', false)}
+          showButtons
+          isVisible={store.get('DISPLAY_WELCOME_MODAL')}
+          renderTrigger={toggleVisibility => (
+            <div onClick={toggleVisibility}>hey</div>
+          )}
+        >
+          {() => (
+            <ModalContent>
+              <TextComponent value='hey there' />
+            </ModalContent>
+          )}
+        </ConfirmDialogComponent>
       </Fragment>
     );
   }

config/electron.js

@@ -65,7 +65,7 @@ const createWindow = () => {
     frame: true,
     resizable: true,
     webPreferences: {
-      devTools: false,
+      devTools: true,
       webSecurity: true,
     },
   });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zepio",
   "productName": "Zepio",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Zepio | Cross-platform sapling-enabled full-node Zcash wallet",
   "main": "config/main.js",
   "homepage": "https://zepiowallet.com",