Fix Dropdown selection and JSON validation for dashboard - Closes #6423

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx

@@ -17,13 +17,18 @@ import styles from './Button.module.scss';
 interface Props {
 	onClick?: (event: React.MouseEvent | Event) => void;
 	size?: 's' | 'm' | 'l' | 'xl';
+	disabled?: boolean;
 }
 
 const Button: React.FC<Props> = props => {
 	const { onClick } = props;
 	const size = props.size ?? 'm';
 	return (
-		<button className={`${styles.button} ${styles[`button-${size}`]}`} onClick={onClick}>
+		<button
+			className={`${styles.button} ${styles[`button-${size}`]}`}
+			onClick={onClick}
+			disabled={props.disabled}
+		>
 			{props.children}
 		</button>
 	);

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx

@@ -29,24 +29,17 @@ const CallActionWidget: React.FC<WidgetProps> = props => {
 	const actions = props.actions.map(action => ({ label: action, value: action })).flat();
 	const [selectedAction, setSelectedAction] = React.useState<SelectInputOptionType>();
 	const [keyValue, setKeyValue] = React.useState('{}');
+	const [validValue, setValidValue] = React.useState(true);
 
 	const handleSubmit = () => {
 		if (!selectedAction) {
 			return;
 		}
-
-		let params;
-		try {
-			params = JSON.parse(keyValue) as Record<string, unknown>;
-		} catch (error) {
-			return;
-		}
-
 		const actionName = selectedAction.value;
 
 		props.onSubmit({
 			name: actionName,
-			params,
+			params: JSON.parse(keyValue) as Record<string, unknown>,
 		});
 	};
 
@@ -71,12 +64,20 @@ const CallActionWidget: React.FC<WidgetProps> = props => {
 						placeholder={'Params'}
 						size={'l'}
 						value={keyValue}
-						onChange={val => setKeyValue(val)}
+						onChange={val => {
+							try {
+								JSON.parse(val ?? '');
+								setValidValue(true);
+							} catch (error) {
+								setValidValue(false);
+							}
+							setKeyValue(val);
+						}}
 					></TextAreaInput>
 				</Box>
 
 				<Box textAlign={'center'}>
-					<Button size={'m'} onClick={handleSubmit}>
+					<Button size={'m'} onClick={handleSubmit} disabled={!validValue}>
 						Submit
 					</Button>
 				</Box>

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/SendTransactionWidget.tsx

@@ -26,24 +26,18 @@ interface WidgetProps {
 }
 
 const SendTransactionWidget: React.FC<WidgetProps> = props => {
-	const [listOptions, setListOptions] = React.useState<SelectInputOptionType[]>([]);
-	const [selectedAsset, setSelectedAsset] = React.useState<SelectInputOptionType>();
 	const [passphrase, setPassphrase] = React.useState('');
 	const [asset, setAsset] = React.useState('{}');
-
-	React.useEffect(() => {
-		const assets = props.modules
-			.map(m =>
-				m.transactionAssets.map(t => ({
-					label: `${m.name}:${t.name}`,
-					value: `${m.name}:${t.name}`,
-				})),
-			)
-			.flat();
-
-		setListOptions(assets);
-		setSelectedAsset(assets[0]);
-	}, [props.modules]);
+	const [validAsset, setValidAsset] = React.useState(true);
+	const assets = props.modules
+		.map(m =>
+			m.transactionAssets.map(t => ({
+				label: `${m.name}:${t.name}`,
+				value: `${m.name}:${t.name}`,
+			})),
+		)
+		.flat();
+	const [selectedAsset, setSelectedAsset] = React.useState<SelectInputOptionType>(assets[0]);
 
 	const handleSubmit = () => {
 		const assetSelectedValue = selectedAsset ? selectedAsset.value : '';
@@ -87,7 +81,7 @@ const SendTransactionWidget: React.FC<WidgetProps> = props => {
 				<Box mb={4}>
 					<SelectInput
 						multi={false}
-						options={listOptions}
+						options={assets}
 						selected={selectedAsset}
 						onChange={val => setSelectedAsset(val)}
 					></SelectInput>
@@ -108,12 +102,20 @@ const SendTransactionWidget: React.FC<WidgetProps> = props => {
 						placeholder={'Asset'}
 						size={'m'}
 						value={asset}
-						onChange={val => setAsset(val)}
+						onChange={val => {
+							try {
+								JSON.parse(val ?? '');
+								setValidAsset(true);
+							} catch (error) {
+								setValidAsset(false);
+							}
+							setAsset(val);
+						}}
 					></TextAreaInput>
 				</Box>
 
 				<Box textAlign={'center'}>
-					<Button size={'m'} onClick={handleSubmit}>
+					<Button size={'m'} onClick={handleSubmit} disabled={!validAsset}>
 						Submit
 					</Button>
 				</Box>