Skip to content

Commit

Permalink
Simplify select options
Browse files Browse the repository at this point in the history
  • Loading branch information
@DOBEN
DOBEN committed Feb 15, 2024
1 parent eac448a commit 7d338a9
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 61 deletions.
112 changes: 60 additions & 52 deletions front-end-tools/src/components/InitComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,20 @@ import { TxHashLink } from './CCDScanLinks';
import Box from './Box';
import { initialize } from '../writing_to_blockchain';
import { getObjectExample, getArrayExample } from '../utils';
import { REFRESH_INTERVAL, INPUT_PARAMETER_TYPES_OPTIONS, hexRegex, MODULE_REFERENCE_PLACEHOLDER } from '../constants';
import {
REFRESH_INTERVAL,
INPUT_PARAMETER_TYPES_OPTIONS,
hexRegex,
MODULE_REFERENCE_PLACEHOLDER,
OPTIONS_DERIVE_FROM_MODULE_REFERENCE,
DO_NOT_DERIVE,
DERIVE_FROM_STEP_1,
DERIVE_FROM_CHAIN,
INPUT_PARAMETER_TYPE_ARRAY,
INPUT_PARAMETER_TYPE_OBJECT,
INPUT_PARAMETER_TYPE_STRING,
INPUT_PARAMETER_TYPE_NUMBER,
} from '../constants';
import { getModuleSource } from '../reading_from_blockchain';

interface ConnectionProps {
Expand Down Expand Up @@ -78,7 +91,7 @@ export default function InitComponent(props: ConnectionProps) {
const [moduleReferenceLengthError, setModuleReferenceLengthError] = useState<string | undefined>(undefined);
const [schemaError, setSchemaError] = useState<string | undefined>(undefined);

const [isModuleReferenceAlreadyDeployedStep2, setIsModuleReferenceAlreadyDeployedStep2] = useState(false);
const [isModuleReferenceAlreadyDeployed, setIsModuleReferenceAlreadyDeployed] = useState(false);

const [txHash, setTxHash] = useState<string | undefined>(undefined);

Expand Down Expand Up @@ -133,13 +146,13 @@ export default function InitComponent(props: ConnectionProps) {
.getModuleSource(moduleReference)
.then((value) => {
if (value === undefined) {
setIsModuleReferenceAlreadyDeployedStep2(false);
setIsModuleReferenceAlreadyDeployed(false);
} else {
setIsModuleReferenceAlreadyDeployedStep2(true);
setIsModuleReferenceAlreadyDeployed(true);
}
})
.catch(() => {
setIsModuleReferenceAlreadyDeployedStep2(false);
setIsModuleReferenceAlreadyDeployed(false);
});
}
}, [connection, client, moduleReference]);
Expand Down Expand Up @@ -192,23 +205,23 @@ export default function InitComponent(props: ConnectionProps) {
setInputParameterTemplate(initTemplate);
}
} catch (e) {
if (deriveFromModuleRefernce === "Don't derive") {
if (deriveFromModuleRefernce === DO_NOT_DERIVE.value) {
setSchemaError(
`Could not get schema from uploaded schema. Uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
);
} else {
setSchemaError(
`Could not get embedded schema from the module. Select "Don't derive" to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
`Could not get embedded schema from the module. Select "${DO_NOT_DERIVE.label}" to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
);
}
}

if (initTemplate) {
if (inputParameterType === 'array') {
form.setValue('inputParameter', JSON.stringify(JSON.parse(initTemplate), undefined, 2));
} else if (inputParameterType === 'object') {
form.setValue('inputParameter', JSON.stringify(JSON.parse(initTemplate), undefined, 2));
}
if (
initTemplate &&
(inputParameterType === INPUT_PARAMETER_TYPE_ARRAY.value ||
inputParameterType === INPUT_PARAMETER_TYPE_OBJECT.value)
) {
form.setValue('inputParameter', JSON.stringify(JSON.parse(initTemplate), undefined, 2));
}
}, [hasInputParameter, smartContractName, schema, inputParameterType]);

Expand Down Expand Up @@ -275,7 +288,7 @@ export default function InitComponent(props: ConnectionProps) {
const tx = initialize(
connection,
AccountAddress.fromBase58(account),
isModuleReferenceAlreadyDeployedStep2,
isModuleReferenceAlreadyDeployed,
moduleReference,
data.inputParameter,
data.smartContractName ? ContractName.fromString(data.smartContractName) : undefined,
Expand All @@ -296,20 +309,7 @@ export default function InitComponent(props: ConnectionProps) {
<Form.Label>DeriveFromModuleRefernce</Form.Label>
<Select
{...form.register('deriveFromModuleRefernce', { required: true })}
options={[
{
value: "Don't derive",
label: "Don't derive",
},
{
value: 'Derive from step 1',
label: 'Derive from step 1',
},
{
value: 'Derive from chain',
label: 'Derive from chain',
},
]}
options={OPTIONS_DERIVE_FROM_MODULE_REFERENCE}
onChange={async (e) => {
form.setValue('deriveFromModuleRefernce', e?.value);

Expand All @@ -322,7 +322,7 @@ export default function InitComponent(props: ConnectionProps) {

const selectValue = form.getValues('deriveFromModuleRefernce');

if (selectValue === 'Derive from step 1') {
if (selectValue === DERIVE_FROM_STEP_1.value) {
form.clearErrors('moduleReferenceString');
setModuleReference(undefined);
form.setValue('moduleReferenceString', undefined);
Expand All @@ -339,7 +339,7 @@ export default function InitComponent(props: ConnectionProps) {
}
}

if (selectValue === 'Derive from chain') {
if (selectValue === DERIVE_FROM_CHAIN.value) {
if (moduleReference === undefined) {
setModuleReferenceError('Set module reference field below');
} else {
Expand All @@ -348,7 +348,7 @@ export default function InitComponent(props: ConnectionProps) {
}
}}
/>
{deriveFromModuleRefernce === 'Derive from step 1' && (
{deriveFromModuleRefernce === DERIVE_FROM_STEP_1.value && (
<>
<br />
<Alert variant="info">
Expand All @@ -360,20 +360,20 @@ export default function InitComponent(props: ConnectionProps) {
</Alert>
<Alert variant="info" style={{ textAlign: 'left' }}>
<li>
Select <b>Don&apos;t derive</b> in the above drop down, if you want to manually fill
in a <code>module reference</code>, the <code>smart contract name</code>, or an{' '}
Select <b>{DO_NOT_DERIVE.label}</b> in the above drop down, if you want to manually
fill in a <code>module reference</code>, the <code>smart contract name</code>, or an{' '}
<code>input parameter schema</code>.
</li>
<li>
Select <b>Derive from chain</b> again in the drop down, if you want to load a new
module from <b>Step 1</b> because this box will not automatically update when you do
changes to <b>Step 1</b>.
Select <b>{DERIVE_FROM_STEP_1.label}</b> again in the drop down, if you want to load
a new module from <b>Step 1</b> because this box will not automatically update when
you do changes to <b>Step 1</b>.
</li>
</Alert>
<br />
</>
)}
{deriveFromModuleRefernce === 'Derive from chain' && (
{deriveFromModuleRefernce === DERIVE_FROM_CHAIN.value && (
<>
<br />
<Alert variant="info">
Expand All @@ -385,14 +385,14 @@ export default function InitComponent(props: ConnectionProps) {
<Alert variant="info" style={{ textAlign: 'left' }}>
<ul>
<li>
Select <b>Don&apos;t derive</b> in the above drop down, if you want to manually
fill in the <code>smart contract name</code>, or an{' '}
Select <b>{DO_NOT_DERIVE.label}</b> in the above drop down, if you want to
manually fill in the <code>smart contract name</code>, or an{' '}
<code>input parameter schema</code>.
</li>
<li>
Select <b>Derive from chain</b> again in the drop down, if you want to load a
new module from the chain because this box will not automatically update when
you change the moduel reference in field below.
Select <b>{DERIVE_FROM_CHAIN.label}</b> again in the drop down, if you want to
load a new module from the chain because this box will not automatically update
when you change the moduel reference in field below.
</li>
</ul>
</Alert>
Expand All @@ -408,7 +408,7 @@ export default function InitComponent(props: ConnectionProps) {
<Form.Label> Module Reference</Form.Label>
<Form.Control
defaultValue={MODULE_REFERENCE_PLACEHOLDER}
disabled={deriveFromModuleRefernce === 'Derive from step 1'}
disabled={deriveFromModuleRefernce === DERIVE_FROM_STEP_1.value}
{...form.register('moduleReferenceString', {
required: true,
validate: validateModuleReference,
Expand All @@ -423,7 +423,7 @@ export default function InitComponent(props: ConnectionProps) {
<Form.Text />
</Form.Group>

{deriveFromModuleRefernce !== "Don't derive" && displayContracts.length > 0 ? (
{deriveFromModuleRefernce !== DO_NOT_DERIVE.value && displayContracts.length > 0 ? (
<Form.Group className="col-md-4 mb-3">
<Form.Label>Smart Contract Name</Form.Label>

Expand Down Expand Up @@ -536,7 +536,7 @@ export default function InitComponent(props: ConnectionProps) {

{hasInputParameter && (
<div className="box">
{deriveFromModuleRefernce === "Don't derive" && (
{deriveFromModuleRefernce === DO_NOT_DERIVE.value && (
<Form.Group className="mb-3">
<Form.Label>Upload Smart Contract Module Schema File (e.g. schema.bin)</Form.Label>
<Form.Control
Expand Down Expand Up @@ -573,7 +573,7 @@ export default function InitComponent(props: ConnectionProps) {
<Form.Text />
</Form.Group>
)}
{deriveFromModuleRefernce === "Don't derive" && schema && (
{deriveFromModuleRefernce === DO_NOT_DERIVE.value && schema && (
<div className="actionResultBox">
Schema in base64:
<div>{schema.toString().slice(0, 30)} ...</div>
Expand Down Expand Up @@ -607,11 +607,16 @@ export default function InitComponent(props: ConnectionProps) {
<Form.Text />
</Form.Group>

{(inputParameterType === 'number' || inputParameterType === 'string') && (
{(inputParameterType === INPUT_PARAMETER_TYPE_NUMBER.value ||
inputParameterType === INPUT_PARAMETER_TYPE_STRING.value) && (
<Form.Group className="mb-3">
<Form.Label> Add your input parameter ({inputParameterType}):</Form.Label>
<Form.Control
placeholder={inputParameterType === 'string' ? 'myString' : '1000000'}
placeholder={
inputParameterType === INPUT_PARAMETER_TYPE_STRING.value
? 'myString'
: '1000000'
}
{...form.register('inputParameter', { required: true })}
onChange={(e) => {
const register = form.register('inputParameter', {
Expand All @@ -630,11 +635,12 @@ export default function InitComponent(props: ConnectionProps) {
</Form.Group>
)}

{(inputParameterType === 'object' || inputParameterType === 'array') && (
{(inputParameterType === INPUT_PARAMETER_TYPE_ARRAY.value ||
inputParameterType === INPUT_PARAMETER_TYPE_OBJECT.value) && (
<Form.Group className="mb-3">
<Form.Label> Add your input parameter ({inputParameterType}):</Form.Label>

{inputParameterType === 'array' && (
{inputParameterType === INPUT_PARAMETER_TYPE_ARRAY.value && (
<textarea
{...form.register('inputParameter')}
onChange={(event) => {
Expand All @@ -653,7 +659,7 @@ export default function InitComponent(props: ConnectionProps) {
{getArrayExample(inputParameterTemplate)}
</textarea>
)}
{inputParameterType === 'object' && (
{inputParameterType === INPUT_PARAMETER_TYPE_OBJECT.value && (
<textarea
{...form.register('inputParameter')}
onChange={(event) => {
Expand Down Expand Up @@ -684,12 +690,14 @@ export default function InitComponent(props: ConnectionProps) {
</div>
)}
<br />

<Button variant="primary" type="submit">
Initialize Smart Contract
</Button>
<br />
<br />
{!isModuleReferenceAlreadyDeployed && (
<Alert variant="warning">Warning: Module reference does not exist on chain.</Alert>
)}
{shouldWarnDifferenceModuleReferences && (
<Alert variant="warning">Warning: Module references in step 1 and step 2 are different.</Alert>
)}
Expand Down
24 changes: 19 additions & 5 deletions front-end-tools/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@ export const EXAMPLE_JSON_OBJECT = {
// or does not want to use the embedded schema (meaning if the checkbox "Use module from step 1" is unchecked).
export const EXAMPLE_ARRAYS = 'Examples: \n\n[1,2,3] or \n\n["abc","def"] or \n\n[{"myFieldKey":"myFieldValue"}]';

// The input parameter can have one of these type options.
// Available options for the input parameter type in step 2.
export const INPUT_PARAMETER_TYPE_NUMBER = { label: 'number', value: 'number' };
export const INPUT_PARAMETER_TYPE_STRING = { label: 'string', value: 'string' };
export const INPUT_PARAMETER_TYPE_OBJECT = { label: 'object', value: 'object' };
export const INPUT_PARAMETER_TYPE_ARRAY = { label: 'array', value: 'array' };

// All available options for the input parameter type in step 2.
export const INPUT_PARAMETER_TYPES_OPTIONS = [
{ label: 'number', value: 'number' },
{ label: 'string', value: 'string' },
{ label: 'object', value: 'object' },
{ label: 'array', value: 'array' },
INPUT_PARAMETER_TYPE_NUMBER,
INPUT_PARAMETER_TYPE_STRING,
INPUT_PARAMETER_TYPE_OBJECT,
INPUT_PARAMETER_TYPE_ARRAY,
];

// The subindex of all smart contracts.
Expand All @@ -37,3 +43,11 @@ export const hexRegex = /^[0-9a-fA-F]+$/;

// Module reference displayed as placeholder in the input field.
export const MODULE_REFERENCE_PLACEHOLDER = '91225f9538ac2903466cc4ab07b6eb607a2cd349549f357dfdf4e6042dde0693';

// Available options to select in step 2 for deriving values from the module references.
export const DO_NOT_DERIVE = { value: "Don't derive", label: "Don't derive" };
export const DERIVE_FROM_STEP_1 = { value: 'Derive from step 1', label: 'Derive from step 1' };
export const DERIVE_FROM_CHAIN = { value: 'Derive from chain', label: 'Derive from chain' };

// All available options to select in step 2 for deriving values from the module references.
export const OPTIONS_DERIVE_FROM_MODULE_REFERENCE = [DO_NOT_DERIVE, DERIVE_FROM_STEP_1, DERIVE_FROM_CHAIN];
8 changes: 4 additions & 4 deletions front-end-tools/src/writing_to_blockchain.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from '@concordium/web-sdk';
import { TypedSmartContractParameters, WalletConnection } from '@concordium/react-components';
import { moduleSchemaFromBase64 } from '@concordium/wallet-connectors';
import { CONTRACT_SUB_INDEX } from './constants';
import { CONTRACT_SUB_INDEX, DERIVE_FROM_CHAIN, DERIVE_FROM_STEP_1, DO_NOT_DERIVE } from './constants';

/** This function signs and sends a `DeployModule` transaction.
*/
Expand Down Expand Up @@ -140,8 +140,8 @@ export async function initialize(
if (moduleReferenceAlreadyDeployed === false) {
throw new Error(
`Module reference does not exist on chain. Enter a valid module reference or deploy your module in step 1 first.
The step 2 box will not automatically reload the new module reference,
you might want to select "Don't derive" and then select "Derive from chain/Derive from Step1" again to load the new module reference`
The step 2 box will not automatically derive values from the new module reference,
you might want to select "${DERIVE_FROM_STEP_1.label}/${DERIVE_FROM_CHAIN.label}" again to derive values from the new module reference`
);
}

Expand All @@ -156,7 +156,7 @@ export async function initialize(
let params: TypedSmartContractParameters | undefined;

if (hasInputParameter) {
if ((deriveFromModuleRefernce === "Don't derive" || undefined) && moduleSchema === undefined) {
if ((deriveFromModuleRefernce === DO_NOT_DERIVE.value || undefined) && moduleSchema === undefined) {
throw new Error(`Set schema`);
} else if (moduleSchema === undefined) {
throw new Error(`No embedded module schema found in module`);
Expand Down

0 comments on commit 7d338a9

Please sign in to comment.