diff --git a/src/components/Arguments/styles.tsx b/src/components/Arguments/styles.tsx index 22fd214e..99be388b 100644 --- a/src/components/Arguments/styles.tsx +++ b/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` - 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` - 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: diff --git a/src/components/CadenceEditor/ControlPanel/components.tsx b/src/components/CadenceEditor/ControlPanel/components.tsx index 9ffabec2..d9c14b12 100644 --- a/src/components/CadenceEditor/ControlPanel/components.tsx +++ b/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` + color: ${({ isOk, progress, showPrompt }) => { + switch (true) { + case progress: + return '#a2a2a2'; + case isOk && showPrompt: + return theme.colors.warning; + case isOk: + return '#2bb169'; + default: + return '#EE431E'; + } + }}; +`; diff --git a/src/components/CadenceEditor/ControlPanel/index.tsx b/src/components/CadenceEditor/ControlPanel/index.tsx index 38200b2b..eb740506 100644 --- a/src/components/CadenceEditor/ControlPanel/index.tsx +++ b/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 = (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 = (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 = (props) => { rawResult = e.toString(); } + setShowPrompt(false); setProcessingStatus(false); // Display result in the bottom area @@ -343,8 +350,25 @@ const ControlPanel: React.FC = (props) => { }; const isOk = !haveErrors && validCode !== undefined && !!validCode; - let statusIcon = isOk ? : ; - let statusMessage = isOk ? 'Ready' : 'Fix errors'; + let statusIcon; + let statusMessage; + switch (true) { + case isOk && showPrompt: + statusIcon = ( + + ); + statusMessage = + 'Redeploying will clear the state of all accounts. Proceed?'; + break; + case isOk: + statusIcon = ; + statusMessage = 'Ready'; + break; + default: + statusIcon = ; + statusMessage = 'Fix errors'; + break; + } const progress = isSavingCode || processingStatus; if (progress) { @@ -359,6 +383,11 @@ const ControlPanel: React.FC = (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 = (props) => { <>
- + diff --git a/src/theme.ts b/src/theme.ts index 0311664a..3648dff3 100644 --- a/src/theme.ts +++ b/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",