diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx
index 3f642fdfe77e8d3fded2259fc368a1c8aeafeb48..985f13513ea9f4ba8144b9846329f70ba7bcf68e 100644
--- a/src/components/connection-modal/connection-modal.jsx
+++ b/src/components/connection-modal/connection-modal.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import keyMirror from 'keymirror';
 
 import Box from '../box/box.jsx';
 import Modal from '../modal/modal.jsx';
@@ -11,6 +12,13 @@ import ErrorStep from './error-step.jsx';
 
 import styles from './connection-modal.css';
 
+const PHASES = keyMirror({
+    scanning: null,
+    connecting: null,
+    connected: null,
+    error: null
+});
+
 const ConnectionModalComponent = props => (
     <Modal
         className={styles.modalContent}
@@ -19,18 +27,21 @@ const ConnectionModalComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            {props.phase === 'scanning' && <ScanningStep {...props} />}
-            {props.phase === 'connecting' && <ConnectingStep {...props} />}
-            {props.phase === 'connected' && <ConnectedStep {...props} />}
-            {props.phase === 'error' && <ErrorStep {...props} />}
+            {props.phase === PHASES.scanning && <ScanningStep {...props} />}
+            {props.phase === PHASES.connecting && <ConnectingStep {...props} />}
+            {props.phase === PHASES.connected && <ConnectedStep {...props} />}
+            {props.phase === PHASES.error && <ErrorStep {...props} />}
         </Box>
     </Modal>
 );
 
 ConnectionModalComponent.propTypes = {
     onCancel: PropTypes.func.isRequired,
-    phase: PropTypes.string.isRequired,
+    phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
     title: PropTypes.string.isRequired
 };
 
-export default ConnectionModalComponent;
+export {
+    ConnectionModalComponent as default,
+    PHASES
+};
diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx
index 73a3538657bbfe12a7072f1cbb36c6654c823a03..5443646e4d2f225f3bc7d0cf71eb20f7dd29340a 100644
--- a/src/containers/connection-modal.jsx
+++ b/src/containers/connection-modal.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
-import ConnectionModalComponent from '../components/connection-modal/connection-modal.jsx';
+import ConnectionModalComponent, {PHASES} from '../components/connection-modal/connection-modal.jsx';
 import VM from 'scratch-vm';
 
 class ConnectionModal extends React.Component {
@@ -15,7 +15,7 @@ class ConnectionModal extends React.Component {
             'handleError'
         ]);
         this.state = {
-            phase: 'scanning'
+            phase: PHASES.scanning
         };
     }
     componentDidMount () {
@@ -34,13 +34,13 @@ class ConnectionModal extends React.Component {
     }
     handleScanning () {
         this.setState({
-            phase: 'scanning'
+            phase: PHASES.scanning
         });
     }
     handleConnecting (peripheralId) {
         this.props.vm.connectToPeripheral(this.props.extensionId, peripheralId);
         this.setState({
-            phase: 'connecting'
+            phase: PHASES.connecting
         });
     }
     handleDisconnect () {
@@ -58,13 +58,13 @@ class ConnectionModal extends React.Component {
     handleError () {
         this.props.onStatusButtonUpdate(this.props.extensionId, 'not ready');
         this.setState({
-            phase: 'error'
+            phase: PHASES.error
         });
     }
     handleConnected () {
         this.props.onStatusButtonUpdate(this.props.extensionId, 'ready');
         this.setState({
-            phase: 'connected'
+            phase: PHASES.connected
         });
     }
     handleHelp () {