wire up stop button

src/actions/hub.ts

@@ -77,3 +77,10 @@ export function downloadAndRun(data: ArrayBuffer): HubThunkAction {
         dispatch(updateStatus(HubRuntimeStatusType.Loaded));
     };
 }
+
+// CTRL+C, CTRL+C, CTRL+D
+const stopCommand = new Uint8Array([0x03, 0x03, 0x04]);
+
+export function stop(): HubThunkAction {
+    return write(stopCommand);
+}

src/components/StopButton.tsx

@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { AnyAction } from 'redux';
+import { RootState } from '../reducers';
+import { HubRuntimeState } from '../reducers/hub';
+import { stop } from '../actions/hub';
+import ActionButton, { ActionButtonProps } from './ActionButton';
+
+type Dispatch = ThunkDispatch<{}, {}, AnyAction>;
+
+type StateProps = Pick<ActionButtonProps, 'enabled' | 'context'>;
+type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
+type OwnProps = Pick<ActionButtonProps, 'id'>;
+
+const mapStateToProps = (state: RootState): StateProps => ({
+    enabled: state.hub.runtime === HubRuntimeState.Running,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onAction: (): void => {
+        dispatch(stop());
+    },
+});
+
+const mergeProps = (
+    stateProps: StateProps,
+    dispatchProps: DispatchProps,
+    ownProps: OwnProps,
+): ActionButtonProps => ({
+    tooltip: 'Stop everything',
+    icon: 'stop.svg',
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);

src/components/Toolbar.tsx

@@ -7,6 +7,7 @@ import { BLEConnectionState } from '../reducers/ble';
 import ActionButton from './ActionButton';
 import BluetoothButton from './BluetoothButton';
 import RunButton from './RunButton';
+import StopButton from './StopButton';
 
 interface ToolbarState {
     bleState: BLEConnectionState;
@@ -35,12 +36,7 @@ class Toolbar extends React.Component<{}, ToolbarState> {
                         <ButtonGroup className="mr-2" size="lg">
                             <BluetoothButton id="bluetooth" />
                             <RunButton id="run" />
-                            <ActionButton
-                                id="stop"
-                                tooltip="Stop everything"
-                                icon="stop.svg"
-                                onAction={this.onAction}
-                            />
+                            <StopButton id="stop" />
                         </ButtonGroup>
                         <ButtonGroup className="mr-2" size="lg">
                             <ActionButton