Re-enable action buttons after errors and show error alert

This is a temporary solution, we'll be switching to Apollo 3 and
mutation hooks

Author: alse

src/components/Arguments/components.tsx

@@ -244,18 +244,20 @@ export const ActionButton: React.FC<InteractionButtonProps> = ({
   active = true,
   onClick,
 }) => {
-  const { project, active: activeEditor, getActiveCode } = useProject();
+  const {
+    project,
+    active: activeEditor,
+    getActiveCode,
+    showSavingMessage,
+  } = useProject();
   const label = getLabel(type, project, activeEditor);
-  const { isSavingCode } = useProject();
-  const sendingTransaction = false;
   const code = getActiveCode()[0].trim();
   return (
     <Controls>
       <Button
         onClick={onClick}
         Icon={FaArrowCircleRight}
-        disabled={isSavingCode || !active || code.length === 0}
-        isLoading={sendingTransaction}
+        disabled={showSavingMessage || !active || code.length === 0}
       >
         {label}
       </Button>

src/components/Arguments/index.tsx

@@ -141,15 +141,15 @@ type ProcessingArgs = {
 };
 
 const useTemplateType = (): ProcessingArgs => {
-  const { isSavingCode } = useProject();
+  const { showSavingMessage } = useProject();
   const {
     createScriptExecution,
     createTransactionExecution,
     updateAccountDeployedCode,
   } = useProject();
 
   return {
-    disabled: isSavingCode,
+    disabled: showSavingMessage,
     scriptFactory: createScriptExecution,
     transactionFactory: createTransactionExecution,
     contractDeployment: updateAccountDeployedCode,
@@ -218,7 +218,7 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
   const {
     project,
     active,
-    isSavingCode,
+    showSavingMessage,
     lastSigners,
     // updateAccountDeployedCode
   } = useProject();
@@ -356,7 +356,7 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
   let statusIcon = isOk ? <FaRegCheckCircle /> : <FaRegTimesCircle />;
   let statusMessage = isOk ? 'Ready' : 'Fix errors';
 
-  const progress = isSavingCode || processingStatus;
+  const progress = showSavingMessage || processingStatus;
 
   if (progress) {
     statusIcon = <FaSpinner className="spin" />;

src/components/CadenceEditor/ControlPanel/index.tsx

@@ -65,7 +65,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
   // ===========================================================================
   // GLOBAL HOOKS
   const { languageClient } = useContext(CadenceCheckerContext);
-  const { project, active, isSavingCode } = useProject();
+  const { project, active, showSavingMessage } = useProject();
 
   // HOOKS  -------------------------------------------------------------------
   const [executionArguments, setExecutionArguments] = useState({});
@@ -366,7 +366,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
       break;
   }
 
-  const progress = isSavingCode || processingStatus;
+  const progress = showSavingMessage || processingStatus;
   if (progress) {
     statusIcon = <FaSpinner className="spin" />;
     statusMessage = 'Please, wait...';

src/components/CadenceEditor/ControlPanel/utils.tsx

@@ -98,15 +98,15 @@ export const getLabel = (
 };
 
 export const useTemplateType = (): ProcessingArgs => {
-  const { isSavingCode } = useProject();
+  const { showSavingMessage } = useProject();
   const {
     createScriptExecution,
     createTransactionExecution,
     updateAccountDeployedCode,
   } = useProject();
 
   return {
-    disabled: isSavingCode,
+    disabled: showSavingMessage,
     scriptFactory: createScriptExecution,
     transactionFactory: createTransactionExecution,
     contractDeployment: updateAccountDeployedCode,

src/containers/Editor/components.tsx

@@ -121,15 +121,15 @@ const ShareSaveButton = ({
   onSave,
   icon,
 }: ShareSaveButtonProps) => {
-  const { isSavingCode } = useProject();
+  const { showSavingMessage } = useProject();
   return (
     <Box sx={{ marginRight: '0.5rem' }}>
       {showShare ? (
         <ShareButton url={url} />
       ) : (
         <FlowButton
           onClick={() => onSave()}
-          disabled={isSavingCode}
+          disabled={showSavingMessage}
           Icon={icon}
         >
           {saveText}

src/containers/Editor/layout.tsx

@@ -49,7 +49,7 @@ const EditorLayout: React.FC = () => {
   const {
     project,
     updateProject,
-    isSavingCode,
+    showSavingMessage,
     isLoading,
     active,
     setSelectedResourceAccount,
@@ -197,7 +197,7 @@ const EditorLayout: React.FC = () => {
                 }}
               >
                 <AnimatePresence exitBeforeEnter>
-                  {project && project.persist && isSavingCode && (
+                  {project && project.persist && showSavingMessage && (
                     <motion.div
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}
@@ -209,7 +209,7 @@ const EditorLayout: React.FC = () => {
                       Autosaving...
                     </motion.div>
                   )}
-                  {project && project.persist && !isSavingCode && (
+                  {project && project.persist && !showSavingMessage && (
                     <motion.div
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}