Merge pull request #12 from juan-cortes/gre-live-common-refactoring-1

Preliminary warnings for HSM status

src/components/HSMStatusBanner.js

@@ -0,0 +1,171 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { warnings } from '@ledgerhq/live-common/lib/api/socket'
+import { translate } from 'react-i18next'
+import styled from 'styled-components'
+
+import { colors } from 'styles/theme'
+import uniqueId from 'lodash/uniqueId'
+import { openURL } from 'helpers/linking'
+import IconCross from 'icons/Cross'
+import IconExclamationCircle from 'icons/ExclamationCircle'
+import IconChevronRight from 'icons/ChevronRight'
+
+import Box from 'components/base/Box'
+import { SHOW_MOCK_HSMWARNINGS } from '../config/constants'
+import { urls } from '../config/urls'
+
+const CloseIconContainer = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-bottom-left-radius: 4px;
+`
+
+const CloseIcon = (props: *) => (
+  <CloseIconContainer {...props}>
+    <IconCross size={16} color="white" />
+  </CloseIconContainer>
+)
+
+type Props = {
+  t: *,
+}
+
+type State = {
+  pendingMessages: HSMStatus[],
+}
+
+type HSMStatus = {
+  id: string,
+  message: string,
+}
+
+class HSMStatusBanner extends PureComponent<Props, State> {
+  state = {
+    pendingMessages: SHOW_MOCK_HSMWARNINGS
+      ? [
+          {
+            id: 'mock1',
+            message: 'Lorem Ipsum dolor sit amet #1',
+          },
+        ]
+      : [],
+  }
+
+  componentDidMount() {
+    this.warningSub = warnings.subscribe({
+      next: message => {
+        this.setState(prevState => ({
+          pendingMessages: [...prevState.pendingMessages, { id: uniqueId(), message }],
+        }))
+      },
+    })
+  }
+
+  componentWillUnmount() {
+    if (this.warningSub) {
+      this.warningSub.unsubscribe()
+    }
+  }
+
+  warningSub = null
+
+  dismiss = dismissedItem =>
+    this.setState(prevState => ({
+      pendingMessages: prevState.pendingMessages.filter(item => item.id !== dismissedItem.id),
+    }))
+
+  render() {
+    const { t } = this.props
+    const { pendingMessages } = this.state
+
+    if (!pendingMessages.length) return null
+    const item = pendingMessages[0]
+
+    return (
+      <Box flow={2} style={styles.container}>
+        <BannerItem key={item.id} t={t} item={item} onItemDismiss={this.dismiss} />
+      </Box>
+    )
+  }
+}
+
+class BannerItem extends PureComponent<{
+  item: HSMStatus,
+  onItemDismiss: HSMStatus => void,
+  t: *,
+}> {
+  onLinkClick = () => openURL(urls.contactSupport)
+  dismiss = () => this.props.onItemDismiss(this.props.item)
+
+  render() {
+    const { item, t } = this.props
+    return (
+      <Box relative key={item.id} style={styles.banner}>
+        <CloseIcon onClick={this.dismiss} />
+        <Box horizontal flow={2}>
+          <IconExclamationCircle size={16} color="white" />
+          <Box shrink ff="Open Sans|SemiBold" style={styles.message}>
+            {item.message}
+          </Box>
+        </Box>
+        <BannerItemLink t={t} onClick={this.onLinkClick} />
+      </Box>
+    )
+  }
+}
+
+const UnderlinedLink = styled.span`
+  border-bottom: 1px solid transparent;
+  &:hover {
+    border-bottom-color: white;
+  }
+`
+
+const BannerItemLink = ({ t, onClick }: { t: *, onClick: void => * }) => (
+  <Box
+    mt={2}
+    ml={4}
+    flow={1}
+    horizontal
+    align="center"
+    cursor="pointer"
+    onClick={onClick}
+    color="white"
+  >
+    <IconChevronRight size={16} color="white" />
+    <UnderlinedLink>{t('common.learnMore')}</UnderlinedLink>
+  </Box>
+)
+
+const styles = {
+  container: {
+    position: 'fixed',
+    left: 32,
+    bottom: 32,
+    zIndex: 100,
+  },
+  banner: {
+    background: colors.orange,
+    overflow: 'hidden',
+    borderRadius: 4,
+    fontSize: 13,
+    paddingTop: 17,
+    padding: 15,
+    color: 'white',
+    fontWeight: 'bold',
+    paddingRight: 30,
+    width: 350,
+  },
+  message: {
+    marginTop: -3,
+  },
+}
+
+export default translate()(HSMStatusBanner)

src/components/TopBar/index.js

@@ -25,6 +25,7 @@ import CurrenciesStatusBanner from 'components/CurrenciesStatusBanner'
 
 import ActivityIndicator from './ActivityIndicator'
 import ItemContainer from './ItemContainer'
+import HSMStatusBanner from '../HSMStatusBanner'
 
 const Container = styled(Box).attrs({
   px: 6,

src/components/layout/Default.js

@@ -35,6 +35,7 @@ import SideBar from 'components/MainSideBar'
 import TopBar from 'components/TopBar'
 import SyncBackground from 'components/SyncBackground'
 import SyncContinuouslyPendingOperations from '../SyncContinouslyPendingOperations'
+import HSMStatusBanner from '../HSMStatusBanner'
 
 const Main = styled(GrowScroll).attrs({
   px: 6,
@@ -106,6 +107,7 @@ class Default extends Component<Props> {
               <SideBar />
 
               <Box shrink grow bg="lightGrey" color="grey" overflow="hidden" relative>
+                <HSMStatusBanner />
                 <TopBar />
                 <Main innerRef={n => (this._scrollContainer = n)} tabIndex={-1}>
                   <Route path="/" exact component={DashboardPage} />

src/config/constants.js

@@ -78,6 +78,7 @@ export const LEDGER_DEBUG_ALL_LANGS = boolFromEnv('LEDGER_DEBUG_ALL_LANGS')
 export const SKIP_GENUINE = boolFromEnv('SKIP_GENUINE')
 export const SKIP_ONBOARDING = boolFromEnv('SKIP_ONBOARDING')
 export const SHOW_LEGACY_NEW_ACCOUNT = boolFromEnv('SHOW_LEGACY_NEW_ACCOUNT')
+export const SHOW_MOCK_HSMWARNINGS = boolFromEnv('SHOW_MOCK_HSMWARNINGS')
 export const HIGHLIGHT_I18N = boolFromEnv('HIGHLIGHT_I18N')
 export const DISABLE_ACTIVITY_INDICATORS = boolFromEnv('DISABLE_ACTIVITY_INDICATORS')
 export const EXPERIMENTAL_CENTER_MODAL = boolFromEnv('EXPERIMENTAL_CENTER_MODAL')

src/styles/theme.js

@@ -77,6 +77,7 @@ export const colors = {
   lightFog: '#eeeeee',
   lightGraphite: '#fafafa',
   lightGrey: '#f9f9f9',
+  orange: '#ffa726',
   positiveGreen: '#66be54',
   smoke: '#666666',
   wallet: '#6490f1',