Add confirm prompt to control panel

src/components/Arguments/styles.tsx

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 import theme from '../../theme';
 
 interface HoverPanelProps {
-  width?: string;
+  minWidth?: string;
 }
 
 export const HoverPanel = styled.div<HoverPanelProps>`
-  min-width: 300px;
+  min-width: ${({minWidth}) => minWidth};
   max-width: 500px;
   padding: 20px;
   border-radius: 4px;
@@ -105,15 +105,19 @@ export const SignersContainer = styled.div`
 interface ControlContainerProps {
   isOk: boolean;
   progress: boolean;
+  showPrompt?: boolean;
 }
 export const ControlContainer = styled.div<ControlContainerProps>`
-  display: flex;
+  display: ${({ showPrompt }) => showPrompt ? 'block' : 'flex'};
+  max-width: ${({ showPrompt }) => showPrompt ? 'min-content' : 'none'};
   align-items: center;
   justify-content: space-between;
-  color: ${({ isOk, progress }) => {
+  color: ${({ isOk, progress, showPrompt }) => {
     switch (true) {
       case progress:
         return '#a2a2a2';
+      case isOk && showPrompt:
+        return theme.colors.error;
       case isOk:
         return '#2bb169';
       default:

src/components/CadenceEditor/ControlPanel/components.tsx

@@ -2,6 +2,7 @@ import React  from 'react';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import theme from '../../../theme';
+import Button from 'components/Button';
 
 export const MotionBox = (props: any) => {
   const { children, dragConstraints } = props;
@@ -230,3 +231,49 @@ export const SignersError = styled.p`
     margin-right: 0.5em;
   }
 `;
+
+export const Confirm = styled(Button)`
+  background-color: ${theme.colors.error};
+  color: #fff;
+  margin-right: 0.5rem;
+
+  &:active {
+    background-color: #cf3529;
+  }
+`
+
+export const Cancel = styled(Button)`
+  background-color: ${theme.colors.background};
+  color: ${theme.colors.text};
+  border: 1px solid ${theme.colors.greyBorder};
+
+  &:active {
+    background-color: #dedede;
+  }
+`
+
+export const PromptActionsContainer = styled.div`
+  padding-top: 1rem;
+  display: flex;
+  justify-content: center;
+`;
+
+interface StatusIconProps {
+  isOk: boolean;
+  progress: boolean;
+  showPrompt: boolean;
+}
+export const StatusIcon = styled.div<StatusIconProps>`
+  color: ${({ isOk, progress, showPrompt }) => {
+    switch (true) {
+      case progress:
+        return '#a2a2a2';
+      case isOk && showPrompt:
+        return theme.colors.warning;
+      case isOk:
+        return '#2bb169';
+      default:
+        return '#EE431E';
+    }
+  }};
+`;

src/components/CadenceEditor/ControlPanel/index.tsx

@@ -1,6 +1,11 @@
 // External Modules
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { FaRegCheckCircle, FaRegTimesCircle, FaSpinner } from 'react-icons/fa';
+import {
+  FaExclamationTriangle,
+  FaRegCheckCircle,
+  FaRegTimesCircle,
+  FaSpinner,
+} from 'react-icons/fa';
 import { ExecuteCommandRequest } from 'monaco-languageclient';
 import {
   IPosition,
@@ -32,7 +37,7 @@ import {
 // Component Scoped Files
 import { getLabel, validateByType, useTemplateType } from './utils';
 import { ControlPanelProps, IValue } from './types';
-import { MotionBox } from './components';
+import { MotionBox, Confirm, Cancel, PromptActionsContainer, StatusIcon } from './components';
 
 // Other
 import {
@@ -43,7 +48,6 @@ import {
   Hints,
   Signers,
 } from '../../Arguments/components';
-
 import {
   ControlContainer,
   HoverPanel,
@@ -79,6 +83,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
   const [errors, setErrors] = useState({});
   // Handles problems, hints and info for checked code
   const [problemsList, setProblemsList] = useState({});
+  const [showPrompt, setShowPrompt] = useState(false);
 
   // REFS  -------------------------------------------------------------------
   // Holds reference to constraining div for floating window
@@ -282,13 +287,14 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
 
         case EntityType.Account: {
           // Ask if user wants to redeploy the contract
-          if (accounts[active.index] && accounts[active.index].deployedCode) {
-            const choiceMessage =
-              'Redeploying will clear the state of all accounts. Proceed?';
-            if (!confirm(choiceMessage)) {
-              setProcessingStatus(false);
-              return;
-            }
+          if (
+            accounts[active.index] &&
+            accounts[active.index].deployedCode &&
+            !showPrompt
+          ) {
+            setProcessingStatus(false);
+            setShowPrompt(true);
+            return;
           }
           resultType = ResultType.Contract;
           rawResult = await contractDeployment();
@@ -302,6 +308,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
       rawResult = e.toString();
     }
 
+    setShowPrompt(false);
     setProcessingStatus(false);
 
     // Display result in the bottom area
@@ -343,8 +350,25 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
   };
 
   const isOk = !haveErrors && validCode !== undefined && !!validCode;
-  let statusIcon = isOk ? <FaRegCheckCircle /> : <FaRegTimesCircle />;
-  let statusMessage = isOk ? 'Ready' : 'Fix errors';
+  let statusIcon;
+  let statusMessage;
+  switch (true) {
+    case isOk && showPrompt:
+      statusIcon = (
+        <FaExclamationTriangle />
+      );
+      statusMessage =
+        'Redeploying will clear the state of all accounts. Proceed?';
+      break;
+    case isOk:
+      statusIcon = <FaRegCheckCircle />;
+      statusMessage = 'Ready';
+      break;
+    default:
+      statusIcon = <FaRegTimesCircle />;
+      statusMessage = 'Fix errors';
+      break;
+  }
 
   const progress = isSavingCode || processingStatus;
   if (progress) {
@@ -359,6 +383,11 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
     }
   }, [languageClient, active]);
 
+  useEffect(() => {
+    // don't carry state of prompt between active editors
+    setShowPrompt(false);
+  }, [active]);
+
   useEffect(() => {
     validate(list, values);
   }, [list, values]);
@@ -369,7 +398,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
     <>
       <div ref={constraintsRef} className="constraints" />
       <MotionBox dragConstraints={constraintsRef}>
-        <HoverPanel>
+        <HoverPanel minWidth={showPrompt ? 'min-content' : '300px'}>
           <Hidable hidden={!validCode}>
             {list.length > 0 && (
               <>
@@ -403,12 +432,21 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
           <ErrorsList list={problems.error} actions={actions} />
           <Hints problems={problems} actions={actions} />
 
-          <ControlContainer isOk={isOk} progress={progress}>
+          <ControlContainer isOk={isOk} progress={progress} showPrompt={showPrompt}>
             <StatusMessage>
-              {statusIcon}
+              <StatusIcon isOk={isOk} progress={progress} showPrompt={showPrompt}>
+                {statusIcon}
+              </StatusIcon>
               <p>{statusMessage}</p>
             </StatusMessage>
-            <ActionButton active={isOk} type={type} onClick={send} />
+            {showPrompt ? (
+              <PromptActionsContainer>
+                <Confirm onClick={send}>Confirm</Confirm>
+                <Cancel onClick={() => setShowPrompt(false)}>Cancel</Cancel>
+              </PromptActionsContainer>
+            ) : (
+              <ActionButton active={isOk} type={type} onClick={send} />
+            )}
           </ControlContainer>
         </HoverPanel>
       </MotionBox>

src/theme.ts

@@ -12,6 +12,7 @@ export default {
     border: "rgb(240, 240, 240)",
     borderDark: "rgb(222, 222, 222)",
     shadowColor: "rgb(222, 222, 222)",
+    warning: "#ffcc00",
     error: "#f44336",
     blue: "#0000ff",
     heading: "#919191",