+
+ DEBUG UPDATE
+ ------------
+
+
status: {status}
+
+ {statusToDebug.map(s => (
+
+ ))}
+
+
+ simulate update
+
+
+
+
+
+ )
+ }
+}
+
+const styles = {
+ root: {
+ position: 'fixed',
+ bottom: 0,
+ right: 0,
+ padding: 10,
+ fontSize: 10,
+ background: 'black',
+ color: 'white',
+ fontFamily: 'monospace',
+ zIndex: 1000,
+ maxWidth: 250,
+ },
+ btn: {
+ cursor: 'pointer',
+ background: 'lightgreen',
+ color: 'black',
+ border: 'none',
+ marginRight: 10,
+ marginTop: 10,
+ padding: '0px 10px',
+ },
+}
+
+export default withUpdaterContext(DebugUpdater)
diff --git a/src/components/Updater/UpdateDot.js b/src/components/Updater/UpdateDot.js
new file mode 100644
index 00000000..65a81a98
--- /dev/null
+++ b/src/components/Updater/UpdateDot.js
@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import { colors } from 'styles/theme'
+
+import { withUpdaterContext } from './UpdaterContext'
+import { VISIBLE_STATUS } from './Banner'
+import type { UpdaterContextType, UpdateStatus } from './UpdaterContext'
+
+type Props = {
+ context: UpdaterContextType,
+}
+
+const getColor = ({ status }: { status: UpdateStatus }) =>
+ status === 'error' ? colors.alertRed : colors.wallet
+
+const getOpacity = ({ status }: { status: UpdateStatus }) =>
+ status === 'download-progress' || status === 'checking' ? 0.5 : 1
+
+const Dot = styled.div`
+ opacity: ${getOpacity};
+ width: 8px;
+ height: 8px;
+ background-color: ${getColor};
+ border-radius: 50%;
+`
+
+function UpdateDot(props: Props) {
+ const { context } = props
+ const { status } = context
+ if (!VISIBLE_STATUS.includes(status)) return null
+ return