From 68bc4ce48912b3fb8bf480f7d67a73a4856bcd10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Baranx?= Date: Tue, 13 Feb 2024 09:00:43 +0700 Subject: [PATCH 1/4] chore: remove shadow on focused input --- components/ui/Input.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx index c95ecf3..31f266f 100644 --- a/components/ui/Input.tsx +++ b/components/ui/Input.tsx @@ -23,18 +23,15 @@ export const Input: React.FC = forwardRef( }, ref: ForwardedRef, ) => { - const [isFocused, setIsFocused] = useState(false) const [isInputEmpty, setIsInputEmpty] = useState(true) const handleFocus = (e: any) => { - setIsFocused(true) if (onFocus) { onFocus(e) } } const handleBlur = (e: any) => { - setIsFocused(false) if (onBlur && e) { onBlur(e) } @@ -52,9 +49,6 @@ export const Input: React.FC = forwardRef(
From c3ef8a3fc84709ed176c85f75d4ba3a8ec68d035 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Baranx?= Date: Tue, 13 Feb 2024 10:53:10 +0700 Subject: [PATCH 2/4] chore: add a ? button to display a modal explaining how to use the arguments input field --- components/Editor/EditorControls.tsx | 70 ++++++++++++++++++++++++++-- components/ui/Input.tsx | 3 ++ components/ui/Modal.tsx | 36 ++++++++++++++ components/ui/index.ts | 1 + 4 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 components/ui/Modal.tsx diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx index 42bbf59..a65cd94 100644 --- a/components/Editor/EditorControls.tsx +++ b/components/Editor/EditorControls.tsx @@ -1,9 +1,9 @@ -import { useRef } from 'react' +import { useRef, useState } from 'react' -import { RiLinksLine } from '@remixicon/react' +import { RiLinksLine, RiQuestionLine } from '@remixicon/react' import cn from 'classnames' -import { Button, Input } from 'components/ui' +import { Button, Input, Modal } from 'components/ui' type EditorControlsProps = { isCompileDisabled: boolean @@ -23,6 +23,68 @@ const EditorControls = ({ onProgramArgumentsUpdate, }: EditorControlsProps) => { const inputRef = useRef(null) + const [showArgumentsHelper, setShowArgumentsHelper] = useState(false) + + const argumentHelperModal = ( + +
e.stopPropagation()} + onKeyDown={(e) => e.stopPropagation()} + > +

+ This input field accepts a list of program arguments separated by a{' '} + whitespace. +

+

Each argument could be:

+
    +
  • + a single + felt252, +
    • +
  • + an array of + felt252 where items + are also separated by a{' '} + whitespace. +
    • +
+

+ Note that only decimal values are supported for{' '} + felt252. That means + neither hexadecimal value nor short string are supported yet. +

+

+ Of course, the signature of your{' '} + main() function must be + adapted accordingly. +

+

+ For example,{' '} + 1 [3 4 5] 9{' '} + contains 3 parameters and the corresponding main function should be{' '} + + main(x: felt252, y: Array<felt252>, z: felt252) + + . +

+
+ + ) + const argumentHelperIcon = ( + <> + + {showArgumentsHelper && argumentHelperModal} + + ) return (
@@ -42,6 +104,7 @@ const EditorControls = ({ { onProgramArgumentsUpdate(e.target.value) }} @@ -56,7 +119,6 @@ const EditorControls = ({ 'text-red-500': !areProgramArgumentsValid, })} /> -
) }, diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx new file mode 100644 index 0000000..ff12345 --- /dev/null +++ b/components/ui/Modal.tsx @@ -0,0 +1,36 @@ +export type ModalProps = { + title: string + visible: boolean + setVisible: (_visible: boolean) => void + children: React.ReactNode +} + +export const Modal = ({ + title, + visible, + setVisible, + children, +}: ModalProps): JSX.Element => { + return visible ? ( +
setVisible(false)} + onKeyDown={() => setVisible(false)} + > +
+
+
+

+ {title} +

+
+ {children} +
+
+
+ ) : ( + <> + ) +} diff --git a/components/ui/index.ts b/components/ui/index.ts index 59fcaf7..d5b8f16 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -9,3 +9,4 @@ export * from './Message' export * from './Radio' export * from './RelativeLink' export * from './StackBox' +export * from './Modal' From 10008f9bcd31a34c81f3e870070bd399a5028a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Baranx?= Date: Tue, 13 Feb 2024 10:55:21 +0700 Subject: [PATCH 3/4] chore: fix lint warnings --- components/Editor/index.tsx | 3 ++- types/index.ts | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx index fb02c85..c2f102e 100644 --- a/components/Editor/index.tsx +++ b/components/Editor/index.tsx @@ -128,7 +128,8 @@ const Editor = ({ readOnly = false }: Props) => { } else if (isCompiling === CompilationState.Error) { handleLogs(logs) } - }, [isCompiling, log, serializedOutput]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isCompiling, log, serializedOutput, logs]) const handleCairoCodeChange = (value: string) => { setCairoCode(value) diff --git a/types/index.ts b/types/index.ts index 832436f..5d3d787 100644 --- a/types/index.ts +++ b/types/index.ts @@ -1,5 +1,3 @@ -import { LogType } from '../components/Editor/types' - declare global { interface Window { EvmCodes: any From 281bdb7e828c7ddc170097fc4e2b4a6e17ce7a1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Baranx?= Date: Wed, 14 Feb 2024 15:06:13 +0700 Subject: [PATCH 4/4] update EditorControls and Modal after review --- components/Editor/EditorControls.tsx | 6 +++--- components/ui/Modal.tsx | 11 +++++++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx index a65cd94..81dfc35 100644 --- a/components/Editor/EditorControls.tsx +++ b/components/Editor/EditorControls.tsx @@ -68,7 +68,7 @@ const EditorControls = ({

For example,{' '} 1 [3 4 5] 9{' '} - contains 3 parameters and the corresponding main function should be{' '} + contains 3 arguments and the corresponding main function should be{' '} main(x: felt252, y: Array<felt252>, z: felt252) @@ -80,7 +80,7 @@ const EditorControls = ({ const argumentHelperIcon = ( <> {showArgumentsHelper && argumentHelperModal} @@ -110,7 +110,7 @@ const EditorControls = ({ }} readOnly={isCompileDisabled} value={programArguments} - placeholder={`Enter program parameters...`} + placeholder={`Enter program arguments...`} className={cn('grow border bg-gray-200 dark:bg-gray-800', { 'dark:border-gray-800 border-gray-200': areProgramArgumentsValid, 'border-red-500': !areProgramArgumentsValid, diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx index ff12345..11df3ab 100644 --- a/components/ui/Modal.tsx +++ b/components/ui/Modal.tsx @@ -1,3 +1,5 @@ +import { RiCloseLine } from '@remixicon/react' + export type ModalProps = { title: string visible: boolean @@ -11,13 +13,15 @@ export const Modal = ({ setVisible, children, }: ModalProps): JSX.Element => { + const closeModal = () => setVisible(false) + return visible ? (

setVisible(false)} - onKeyDown={() => setVisible(false)} + onClick={closeModal} + onKeyDown={closeModal} >
@@ -25,6 +29,9 @@ export const Modal = ({

{title}

+
{children}