11import { Textarea } from "@/components/ui/textarea.tsx" ;
2- import React , { useEffect , useState } from "react" ;
2+ import React , { useMemo , useState } from "react" ;
33import classNames from "classnames" ;
44import { bytes } from "@typeberry/block" ;
55import { logger } from "@/utils/loggerService" ;
6+ import { useAppSelector } from "@/store/hooks.ts" ;
7+ import { selectIsProgramInvalid } from "@/store/debugger/debuggerSlice.ts" ;
8+
9+ const parseArrayLikeString = ( input : string ) : ( number | string ) [ ] => {
10+ // Remove the brackets and split the string by commas
11+ const items = input
12+ . replace ( / ^ \[ | \] $ / g, "" )
13+ . split ( "," )
14+ . map ( ( item ) => item . trim ( ) ) ;
15+
16+ // Process each item
17+ return items . map ( ( item ) => {
18+ if ( / ^ (?: 0 x ) ? [ 0 - 9 a - f A - F ] + $ / i. test ( item ) ) {
19+ return parseInt ( item , 16 ) ;
20+ } else if ( ! isNaN ( Number ( item ) ) ) {
21+ return Number ( item ) ;
22+ } else {
23+ return item ;
24+ }
25+ } ) ;
26+ } ;
627
728export const ProgramTextLoader = ( {
829 program,
@@ -11,45 +32,83 @@ export const ProgramTextLoader = ({
1132 program ?: number [ ] ;
1233 setProgram : ( val ?: number [ ] , error ?: string ) => void ;
1334} ) => {
14- const [ programInput , setProgramInput ] = useState ( program ?. length ? JSON . stringify ( program ) : "" ) ;
15- useEffect ( ( ) => {
16- setProgramInput ( program ?. length ? JSON . stringify ( program ) : "" ) ;
35+ const defaultProgram = useMemo ( ( ) => {
36+ return program ;
1737 } , [ program ] ) ;
1838
39+ const [ programInput , setProgramInput ] = useState ( defaultProgram ?. length ? JSON . stringify ( defaultProgram ) : "" ) ;
40+ const [ programError , setProgramError ] = useState ( "" ) ;
41+ const isProgramInvalid = useAppSelector ( selectIsProgramInvalid ) ;
42+
1943 const handleOnChange = ( e : React . ChangeEvent < HTMLTextAreaElement > ) => {
2044 const newInput = e . target . value . trim ( ) ;
2145 setProgramInput ( newInput ) ;
2246
2347 if ( ! newInput . startsWith ( "[" ) ) {
2448 try {
2549 const parsedBlob = bytes . BytesBlob . parseBlob ( newInput ) ;
26- setProgram ( Array . prototype . slice . call ( parsedBlob . raw ) ) ;
27- } catch ( error ) {
28- logger . error ( "Wrong binary file" , { error, hideToast : true } ) ;
29- setProgram ( undefined , "Wrong binary file" ) ;
50+
51+ const parsedBlobArray = Array . prototype . slice . call ( parsedBlob . raw ) ;
52+
53+ if ( parsedBlobArray . length ) {
54+ setProgram ( parsedBlobArray ) ;
55+ }
56+
57+ setProgramError ( "" ) ;
58+ } catch ( error : unknown ) {
59+ logger . error ( "Wrong binary program" , { error, hideToast : true } ) ;
60+
61+ setProgram ( undefined , "Wrong binary program" ) ;
62+
63+ if ( error instanceof Error ) {
64+ if ( error ?. message ) {
65+ setProgramError ( error . message ) ;
66+ }
67+ }
3068 }
3169 } else {
3270 try {
33- JSON . parse ( newInput ) ;
34- setProgram ( JSON . parse ( newInput ) ) ;
71+ // Make sure that hex strings are parsed as strings for JSON.parse validation
72+ const parseTest = newInput . replace ( / 0 x ( [ a - f A - F 0 - 9 ] + ) / g, '"0x$1"' ) ;
73+ // Parse it just to check if it's a valid JSON
74+ JSON . parse ( parseTest ) ;
75+
76+ const parsedJson = parseArrayLikeString ( newInput ) ;
77+ const programArray = parsedJson . filter ( ( item ) => typeof item === "number" ) as number [ ] ;
78+
79+ if ( programArray . length ) {
80+ setProgram ( programArray ) ;
81+ }
82+ setProgramError ( "" ) ;
3583 } catch ( error ) {
3684 logger . error ( "Wrong JSON" , { error, hideToast : true } ) ;
85+
3786 setProgram ( undefined , "Wrong JSON" ) ;
87+
88+ if ( error ) {
89+ setProgramError ( error . toString ( ) ) ;
90+ }
3891 }
3992 }
4093 } ;
4194
4295 return (
4396 < div className = "h-full" >
44- < div className = { classNames ( "h-full flex-auto flex gap-1 flex-col border-2 rounded-md " ) } >
97+ < div className = { classNames ( "h-full flex-auto flex gap-1 flex-col" ) } >
98+ < p className = "pb-2 mb-1" >
99+ < small > Edit program code bytes</ small >
100+ </ p >
45101 < Textarea
46102 autoFocus
47- className = { classNames ( "w-full flex-auto font-mono border-0 text-base" ) }
103+ className = { classNames ( "w-full flex-auto font-mono text-base border-2 rounded-md" , {
104+ "focus-visible:ring-3 focus-visible:outline-none active:outline-none border-red-500" : isProgramInvalid ,
105+ } ) }
48106 id = "program"
49107 placeholder = "Paste the program as an array of numbers or hex string"
50108 value = { programInput }
51109 onChange = { handleOnChange }
52110 />
111+ { isProgramInvalid && < span className = "text-red-500" > { programError || "Program is not valid" } </ span > }
53112 </ div >
54113 </ div >
55114 ) ;
0 commit comments