From 781bac8324364922fb529206b24f86c52354112b Mon Sep 17 00:00:00 2001 From: Shusetsu Toda Date: Fri, 14 May 2021 14:25:56 +0200 Subject: [PATCH 1/3] :bug: Fix Dropdown selection and JSON validation for dashboard --- .../src/ui/components/Button/index.tsx | 3 +- .../components/widgets/CallActionWidget.tsx | 23 ++++++----- .../widgets/SendTransactionWidget.tsx | 40 ++++++++++--------- 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx index bdb5de60a95..453bb0b6f72 100644 --- a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx +++ b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx @@ -17,13 +17,14 @@ 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 => { const { onClick } = props; const size = props.size ?? 'm'; return ( - ); diff --git a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx index 979fd1aabe0..b328a3c1c4e 100644 --- a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx +++ b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx @@ -29,24 +29,17 @@ const CallActionWidget: React.FC = props => { const actions = props.actions.map(action => ({ label: action, value: action })).flat(); const [selectedAction, setSelectedAction] = React.useState(); const [keyValue, setKeyValue] = React.useState('{}'); + const [valueValid, setValidValid] = React.useState(true); const handleSubmit = () => { if (!selectedAction) { return; } - - let params; - try { - params = JSON.parse(keyValue) as Record; - } catch (error) { - return; - } - const actionName = selectedAction.value; props.onSubmit({ name: actionName, - params, + params: JSON.parse(keyValue) as Record, }); }; @@ -71,12 +64,20 @@ const CallActionWidget: React.FC = props => { placeholder={'Params'} size={'l'} value={keyValue} - onChange={val => setKeyValue(val)} + onChange={val => { + try { + JSON.parse(val ?? ''); + setValidValid(true); + } catch (error) { + setValidValid(false); + } + setKeyValue(val); + }} > - diff --git a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/SendTransactionWidget.tsx b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/SendTransactionWidget.tsx index 566062932e9..234fe35cf5d 100644 --- a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/SendTransactionWidget.tsx +++ b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/SendTransactionWidget.tsx @@ -26,24 +26,18 @@ interface WidgetProps { } const SendTransactionWidget: React.FC = props => { - const [listOptions, setListOptions] = React.useState([]); - const [selectedAsset, setSelectedAsset] = React.useState(); 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(assets[0]); const handleSubmit = () => { const assetSelectedValue = selectedAsset ? selectedAsset.value : ''; @@ -87,7 +81,7 @@ const SendTransactionWidget: React.FC = props => { setSelectedAsset(val)} > @@ -108,12 +102,20 @@ const SendTransactionWidget: React.FC = 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); + }} > - From 928698d126697ce3dc7b9d3e2f2707dc8bd1b655 Mon Sep 17 00:00:00 2001 From: Shusetsu Toda Date: Fri, 14 May 2021 14:29:01 +0200 Subject: [PATCH 2/3] :nail_care: Apply format --- .../src/ui/components/Button/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx index 453bb0b6f72..3b57d4d5560 100644 --- a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx +++ b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/index.tsx @@ -24,7 +24,11 @@ const Button: React.FC = props => { const { onClick } = props; const size = props.size ?? 'm'; return ( - ); From 563cc107e7261dce26890451ce1ea946c5310ce0 Mon Sep 17 00:00:00 2001 From: Shusetsu Toda Date: Fri, 14 May 2021 15:20:07 +0200 Subject: [PATCH 3/3] :recycle: Update variable name --- .../src/ui/components/widgets/CallActionWidget.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx index b328a3c1c4e..bca3afae634 100644 --- a/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx +++ b/framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/CallActionWidget.tsx @@ -29,7 +29,7 @@ const CallActionWidget: React.FC = props => { const actions = props.actions.map(action => ({ label: action, value: action })).flat(); const [selectedAction, setSelectedAction] = React.useState(); const [keyValue, setKeyValue] = React.useState('{}'); - const [valueValid, setValidValid] = React.useState(true); + const [validValue, setValidValue] = React.useState(true); const handleSubmit = () => { if (!selectedAction) { @@ -67,9 +67,9 @@ const CallActionWidget: React.FC = props => { onChange={val => { try { JSON.parse(val ?? ''); - setValidValid(true); + setValidValue(true); } catch (error) { - setValidValid(false); + setValidValue(false); } setKeyValue(val); }} @@ -77,7 +77,7 @@ const CallActionWidget: React.FC = props => { -