diff --git a/src/components/HSMStatusBanner.js b/src/components/HSMStatusBanner.js
new file mode 100644
index 00000000..251dd30c
--- /dev/null
+++ b/src/components/HSMStatusBanner.js
@@ -0,0 +1,180 @@
+// @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 { from } from 'rxjs'
+import { SHOW_MOCK_HSMWARNINGS } from "../config/constants";
+
+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: *) => (
+
+
+
+)
+
+type Props = {
+ t: *,
+}
+
+type State = {
+ pendingMessages: HSMStatus[],
+ dismissedMessages: string[],
+}
+
+type HSMStatus = {
+ id: string,
+ message: string,
+}
+
+class HSMStatusBanner extends PureComponent {
+ state = {
+ pendingMessages: [],
+ dismissedMessages: [],
+ }
+
+ componentWillMount() {
+ if(SHOW_MOCK_HSMWARNINGS){
+ this.setState({
+ pendingMessages: [
+ {
+ id: "mock1",
+ message: "Lorem Ipsum dolor sit amet #1"
+ },
+ {
+ id: "mock2",
+ message: "Lorem Ipsum dolor sit amet #2"
+ }
+ ]
+ })
+ }
+
+ 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 = item =>
+ this.setState(prevState => ({
+ dismissedMessages: [...prevState.dismissedMessages, item.id],
+ }))
+
+ render() {
+ const { t } = this.props
+ const { pendingMessages, dismissedMessages } = this.state
+
+ const filtered = pendingMessages.filter(item => dismissedMessages.indexOf(item.id) === -1)
+
+ if (!filtered.length) return null
+ return (
+
+ {filtered.map(r => )}
+
+ )
+ }
+}
+
+class BannerItem extends PureComponent<{
+ item: HSMStatus,
+ onItemDismiss: HSMStatus => void,
+ t: *,
+}> {
+ onLinkClick = () => openURL('#')
+ dismiss = () => this.props.onItemDismiss(this.props.item)
+
+ render() {
+ const { item, t } = this.props
+ return (
+
+
+
+
+
+ {item.message}
+
+
+
+
+ )
+ }
+}
+
+const UnderlinedLink = styled.span`
+ border-bottom: 1px solid transparent;
+ &:hover {
+ border-bottom-color: white;
+ }
+`
+
+const BannerItemLink = ({ t, onClick }: { t: *, onClick: void => * }) => (
+
+
+ {t('common.learnMore')}
+
+)
+
+const styles = {
+ container: {
+ position: 'fixed',
+ left: 32,
+ bottom: 32,
+ },
+ 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)
diff --git a/src/components/TopBar/index.js b/src/components/TopBar/index.js
index b18914c5..966df10b 100644
--- a/src/components/TopBar/index.js
+++ b/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,
@@ -103,6 +104,7 @@ class TopBar extends PureComponent {
+
{hasAccounts && (
diff --git a/src/config/constants.js b/src/config/constants.js
index 76f8af9c..8194e649 100644
--- a/src/config/constants.js
+++ b/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')
diff --git a/src/styles/theme.js b/src/styles/theme.js
index ff165f59..f726919e 100644
--- a/src/styles/theme.js
+++ b/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',