Use the improved extension status button API

src/containers/blocks.jsx

@@ -212,6 +212,8 @@ class Blocks extends React.Component {
         this.props.vm.addListener('targetsUpdate', this.onTargetsUpdate);
         this.props.vm.addListener('EXTENSION_ADDED', this.handleExtensionAdded);
         this.props.vm.addListener('BLOCKSINFO_UPDATE', this.handleBlocksInfoUpdate);
+        this.props.vm.addListener('PERIPHERAL_CONNECTED', this.handleStatusButtonUpdate);
+        this.props.vm.addListener('PERIPHERAL_ERROR', this.handleStatusButtonUpdate);
     }
     detachVM () {
         this.props.vm.removeListener('SCRIPT_GLOW_ON', this.onScriptGlowOn);
@@ -223,6 +225,8 @@ class Blocks extends React.Component {
         this.props.vm.removeListener('targetsUpdate', this.onTargetsUpdate);
         this.props.vm.removeListener('EXTENSION_ADDED', this.handleExtensionAdded);
         this.props.vm.removeListener('BLOCKSINFO_UPDATE', this.handleBlocksInfoUpdate);
+        this.props.vm.removeListener('PERIPHERAL_CONNECTED', this.handleStatusButtonUpdate);
+        this.props.vm.removeListener('PERIPHERAL_ERROR', this.handleStatusButtonUpdate);
     }
 
     updateToolboxBlockValue (id, value) {
@@ -357,8 +361,8 @@ class Blocks extends React.Component {
     handleConnectionModalClose () {
         this.setState({connectionModal: null});
     }
-    handleStatusButtonUpdate (extensionId, status) {
-        this.ScratchBlocks.updateStatusButton(this.workspace, extensionId, status);
+    handleStatusButtonUpdate () {
+        this.ScratchBlocks.refreshStatusButtons(this.workspace);
     }
     handlePromptCallback (input, optionSelection) {
         this.state.prompt.callback(input, optionSelection,

src/containers/connection-modal.jsx

@@ -56,13 +56,13 @@ class ConnectionModal extends React.Component {
         this.props.onCancel();
     }
     handleError () {
-        this.props.onStatusButtonUpdate(this.props.extensionId, 'not ready');
+        this.props.onStatusButtonUpdate();
         this.setState({
             phase: PHASES.error
         });
     }
     handleConnected () {
-        this.props.onStatusButtonUpdate(this.props.extensionId, 'ready');
+        this.props.onStatusButtonUpdate();
         this.setState({
             phase: PHASES.connected
         });

src/lib/blocks.js

@@ -208,5 +208,12 @@ export default function (vm) {
         return monitoredBlock ? monitoredBlock.isMonitored : false;
     };
 
+    ScratchBlocks.FlyoutExtensionCategoryHeader.getExtensionState = function (extensionId) {
+        if (vm.getPeripheralIsConnected(extensionId)) {
+            return ScratchBlocks.StatusButtonState.READY;
+        }
+        return ScratchBlocks.StatusButtonState.NOT_READY;
+    };
+
     return ScratchBlocks;
 }