refactor(syncing): use UI components in Syncing

app/components/Syncing/Syncing.js

@@ -1,23 +1,21 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Redirect } from 'react-router-dom'
-import QRCode from 'qrcode.react'
 import copy from 'copy-to-clipboard'
-import Copy from 'components/Icon/Copy'
-import ZapLogo from 'components/Icon/ZapLogo'
+import { Box, Flex } from 'rebass'
+import { Bar, Button, Heading, Header, Panel, QRCode, Text } from 'components/UI'
 import { showNotification } from 'lib/utils/notifications'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
-import styles from './Syncing.scss'
 
 class Syncing extends Component {
   static propTypes = {
     address: PropTypes.string.isRequired,
-    theme: PropTypes.object.isRequired,
     hasSynced: PropTypes.bool,
     syncStatus: PropTypes.string.isRequired,
     syncPercentage: PropTypes.number,
     blockHeight: PropTypes.number,
+    setIsWalletOpen: PropTypes.func.isRequired,
     lndBlockHeight: PropTypes.number,
     lndCfilterHeight: PropTypes.number,
     lightningGrpcActive: PropTypes.bool
@@ -29,8 +27,9 @@ class Syncing extends Component {
     syncMessageExtraDetail: null
   }
 
-  componentWillMount() {
-    const { syncStatus, intl } = this.props
+  componentDidMount() {
+    const { setIsWalletOpen, syncStatus, intl } = this.props
+    setIsWalletOpen(true)
 
     // If we are still waiting for peers after some time, advise te user it could take a wile.
     let timer = setTimeout(() => {
@@ -59,8 +58,7 @@ class Syncing extends Component {
       lndBlockHeight,
       lndCfilterHeight,
       lightningGrpcActive,
-      intl,
-      theme
+      intl
     } = this.props
     let { syncMessageDetail, syncMessageExtraDetail } = this.state
 
@@ -99,86 +97,61 @@ class Syncing extends Component {
     }
 
     return (
-      <div className={`${styles.container} ${theme.name}`}>
-        <div className={styles.content}>
-          <header>
-            <ZapLogo width="70px" height="32px" />
-          </header>
-
-          {hasSynced === true && (
-            <div className={styles.hasNotSynced}>
-              <div className={styles.title}>
-                <h1>
-                  <FormattedMessage {...messages.sync_title} />
-                </h1>
-                <p>
-                  <FormattedMessage {...messages.sync_description} />
-                </p>
-              </div>
-            </div>
+      <Panel width={1}>
+        <Panel.Header width={9 / 16} mx="auto">
+          {hasSynced ? (
+            <Header
+              title={<FormattedMessage {...messages.sync_title} />}
+              subtitle={<FormattedMessage {...messages.sync_description} />}
+            />
+          ) : (
+            <Header
+              title={<FormattedMessage {...messages.fund_title} />}
+              subtitle={<FormattedMessage {...messages.fund_description} />}
+            />
           )}
+          <Bar my={3} />
+        </Panel.Header>
 
-          {hasSynced === false && (
-            <div className={styles.hasSynced}>
-              <div className={styles.title}>
-                <h1>
-                  <FormattedMessage {...messages.fund_title} />
-                </h1>
-                <p>
-                  <FormattedMessage {...messages.fund_description} />
-                </p>
-              </div>
-              {address && address.length ? (
-                <div className={styles.address}>
-                  <div className={styles.qrConatiner}>
-                    <QRCode
-                      value={address}
-                      renderAs="svg"
-                      size={100}
-                      bgColor="white"
-                      fgColor="#252832"
-                      level="L"
-                      className={styles.qrcode}
-                    />
-                  </div>
-                  <section className={styles.textAddress}>
-                    <span className={styles.text}>{address}</span>
-                    <span className={styles.icon} onClick={copyClicked}>
-                      <Copy />
-                    </span>
-                  </section>
-                </div>
-              ) : (
-                <div className={styles.loading}>
-                  <div className={styles.spinner} />
-                </div>
-              )}
-            </div>
-          )}
+        <Panel.Body width={9 / 16} mx="auto">
+          {hasSynced === false &&
+            address &&
+            address.length && (
+              <Flex alignItems="center" flexDirection="column" justifyContent="center">
+                <QRCode value={address} mx="auto" />
+                <Text my={3}>{address}</Text>
+                <Button size="small" onClick={copyClicked} mx="auto">
+                  Copy address
+                </Button>
+              </Flex>
+            )}
+        </Panel.Body>
 
-          <section className={styles.progressContainer}>
-            <h3>
+        <Panel.Footer bg="secondaryColor" p={3}>
+          <Flex
+            alignItems="center"
+            flexDirection="column"
+            justifyContent="center"
+            width={9 / 16}
+            mx="auto"
+          >
+            <Text fontWeight="normal" mb={3}>
               <FormattedMessage {...messages.sync_caption} />
-            </h3>
-            <div className={styles.progressBar}>
-              <div
-                className={styles.progress}
-                style={{ width: syncPercentage ? `${syncPercentage}%` : 0 }}
+            </Text>
+            <Heading.h1 mb={2}>{syncMessage}</Heading.h1>
+            <Box width={1} css={{ height: '4px' }} bg="grey" mb={2}>
+              <Box
+                width={syncPercentage ? `${syncPercentage}%` : 0}
+                css={{ height: '100%' }}
+                bg="lightningOrange"
               />
-            </div>
-            <h4>{syncMessage}</h4>
-            {syncMessageDetail && (
-              <span className={styles.progressDetail}>{syncMessageDetail}</span>
-            )}
-            {syncMessageExtraDetail && (
-              <span className={styles.progressDetail}>
-                <br />
-                {syncMessageExtraDetail}
-              </span>
-            )}
-          </section>
-        </div>
-      </div>
+            </Box>
+
+            {syncMessageDetail && <Text>{syncMessageDetail}</Text>}
+            {syncMessageExtraDetail && <Text>{syncMessageExtraDetail}</Text>}
+          </Flex>
+        </Panel.Footer>
+      </Panel>
     )
   }
 }

app/components/Syncing/Syncing.scss

@@ -1,136 +0,0 @@
-@import 'styles/variables.scss';
-
-.container {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  background: var(--primaryColor);
-}
-
-.content {
-  color: var(--primaryText);
-  text-align: center;
-  background: var(--primaryColor);
-
-  header {
-    text-align: left;
-    padding: 20px 40px;
-  }
-
-  .title {
-    h1 {
-      font-size: 20px;
-      margin-bottom: 20px;
-    }
-
-    p {
-      font-size: 12px;
-    }
-  }
-
-  .hasNotSynced .title {
-    margin: 95px;
-  }
-
-  .hasSynced .title {
-    margin: 30px;
-  }
-
-  .address {
-    background: var(--primaryColor);
-
-    .textAddress {
-      margin-top: 20px;
-
-      span {
-        font-size: 12px;
-
-        &.text {
-          background: var(--tertiaryColor);
-          padding: 10px;
-        }
-
-        &.icon {
-          background: var(--secondaryColor);
-          padding: 10px;
-          cursor: pointer;
-          transition: all 0.25s;
-          color: var(--primaryText);
-
-          &:hover {
-            opacity: 0.25;
-          }
-        }
-
-        svg {
-          width: 12px;
-          height: 12px;
-        }
-      }
-    }
-  }
-
-  .qrcode {
-    border-style: solid;
-    border-color: var(--primaryText);
-    border-width: 2px;
-  }
-}
-
-.progressContainer {
-  color: var(--primaryText);
-  text-align: center;
-  padding: 40px 0;
-  background: var(--secondaryColor);
-  position: absolute;
-  height: 31vh;
-  width: 100%;
-  bottom: 0;
-
-  h3 {
-    margin-bottom: 20px;
-  }
-
-  .progressBar {
-    width: 75%;
-    max-width: 700px;
-    margin: 0 auto;
-    height: 10px;
-    border-radius: 5px;
-    background: var(--primaryColor);
-  }
-
-  .progress {
-    background: var(--lightningOrange);
-    height: 10px;
-    border-radius: 5px;
-    transition: all 0.25s;
-  }
-
-  h4 {
-    color: var(--lightningOrange);
-    margin-top: 10px;
-  }
-
-  .progressDetail {
-    color: var(--lightningOrange);
-    font-size: 12px;
-    margin-top: 10px;
-  }
-}
-
-.spinner {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-left-color: rgba(0, 0, 0, 0.4);
-  border-radius: 999px;
-  margin: 0 auto;
-  height: 75px;
-  width: 75px;
-  animation: animation-rotate 1000ms linear infinite;
-}
-
-@keyframes animation-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}

app/components/Syncing/index.js

@@ -1,3 +1 @@
-import Syncing from './Syncing'
-
-export default Syncing
+export Syncing from './Syncing'

app/containers/Syncing.js

@@ -2,9 +2,9 @@ import { connect } from 'react-redux'
 import { withTheme } from 'styled-components'
 import { infoSelectors } from 'reducers/info'
 import { lndSelectors } from 'reducers/lnd'
-import { onboardingSelectors } from 'reducers/onboarding'
+import { setIsWalletOpen } from 'reducers/wallet'
 
-import Syncing from 'components/Syncing'
+import { Syncing } from 'components/Syncing'
 import withLoading from 'components/withLoading'
 
 const mapStateToProps = state => ({
@@ -16,7 +16,19 @@ const mapStateToProps = state => ({
   lndBlockHeight: state.lnd.lndBlockHeight,
   lndCfilterHeight: state.lnd.lndCfilterHeight,
   lightningGrpcActive: state.lnd.lightningGrpcActive,
-  isLoading: infoSelectors.infoLoading(state) || onboardingSelectors.startingLnd(state)
+  isLoading:
+    infoSelectors.infoLoading(state) ||
+    state.lnd.syncStatus === 'pending' ||
+    !state.lnd.lightningGrpcActive ||
+    !state.lnd.blockHeight ||
+    !state.lnd.lndBlockHeight
 })
 
-export default connect(mapStateToProps)(withLoading(withTheme(Syncing)))
+const mapDispatchToProps = {
+  setIsWalletOpen
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withLoading(withTheme(Syncing)))

stories/containers/syncing.stories.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { linkTo } from '@storybook/addon-links'
+import { State, Store } from '@sambego/storybook-state'
+import { Modal, Page } from 'components/UI'
+import { Syncing } from 'components/Syncing'
+import { boolean } from '@storybook/addon-knobs'
+
+const store = new Store({
+  address: '2MxZ2z7AodL6gxEgwL5tkq2imDBhkBMq2Jc',
+  syncStatus: 'in-progress',
+  blockHeight: 123123,
+  lndBlockHeight: 1000,
+  lndCfilterHeight: 100,
+  isLoading: false,
+  syncPercentage: 30
+})
+
+const setIsWalletOpen = () => ({})
+
+storiesOf('Containers.Syncing', module)
+  .addParameters({
+    info: {
+      disable: true
+    }
+  })
+  .addDecorator(story => (
+    <Page css={{ height: 'calc(100vh - 40px)' }}>
+      <Modal withHeader onClose={linkTo('Containers.Home', 'Home')} pb={0} px={0}>
+        {story()}
+      </Modal>
+    </Page>
+  ))
+  .add('Syncing', () => {
+    const hasSynced = boolean('Has synced', false)
+    return (
+      <State store={store}>
+        <Syncing setIsWalletOpen={setIsWalletOpen} hasSynced={hasSynced} />
+      </State>
+    )
+  })