From e817c9b4e25cfcd2f241f69b6b73d0152b531281 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Tue, 23 Jan 2024 18:35:13 +0200
Subject: [PATCH 01/11] Use moduleReferenceType

---
 front-end-tools/src/Main.tsx                  |   7 +-
 .../src/components/DeployComponent.tsx        |  18 +-
 .../src/components/InitComponent.tsx          | 240 ++++++++++--------
 front-end-tools/src/constants.ts              |   3 -
 4 files changed, 149 insertions(+), 119 deletions(-)

diff --git a/front-end-tools/src/Main.tsx b/front-end-tools/src/Main.tsx
index e95954a6..6ffaf5ce 100644
--- a/front-end-tools/src/Main.tsx
+++ b/front-end-tools/src/Main.tsx
@@ -11,6 +11,7 @@ import {
 } from '@concordium/react-components';
 
 import { Alert } from 'react-bootstrap';
+import { ModuleReference } from '@concordium/web-sdk';
 import DeployComponent from './components/DeployComponent';
 import ReadComponent from './components/ReadComponent';
 import UpdateComponent from './components/UpdateComponent';
@@ -48,8 +49,10 @@ export default function Main(props: ConnectionProps) {
     const [accountBalance, setAccountBalance] = useState<string | undefined>(undefined);
 
     // Shared state between deploy step and init step
-    const [moduleReferenceCalculated, setModuleReferenceCalculated] = useState<string | undefined>(undefined);
-    const [moduleReferenceDeployed, setModuleReferenceDeployed] = useState<string | undefined>(undefined);
+    const [moduleReferenceCalculated, setModuleReferenceCalculated] = useState<ModuleReference.Type | undefined>(
+        undefined
+    );
+    const [moduleReferenceDeployed, setModuleReferenceDeployed] = useState<ModuleReference.Type | undefined>(undefined);
     const [contracts, setContracts] = useState<string[]>([]);
     const [embeddedModuleSchemaBase64Init, setEmbeddedModuleSchemaBase64Init] = useState<string | undefined>(undefined);
 
diff --git a/front-end-tools/src/components/DeployComponent.tsx b/front-end-tools/src/components/DeployComponent.tsx
index 39b47821..e70145e2 100644
--- a/front-end-tools/src/components/DeployComponent.tsx
+++ b/front-end-tools/src/components/DeployComponent.tsx
@@ -27,9 +27,9 @@ interface ConnectionProps {
     isTestnet: boolean;
     setContracts: (contracts: string[]) => void;
     setEmbeddedModuleSchemaBase64Init: (embeddedModuleSchemaBase64Init: string) => void;
-    setModuleReferenceDeployed: (moduleReferenceDeployed: string | undefined) => void;
-    setModuleReferenceCalculated: (moduleReferenceCalculated: string) => void;
-    moduleReferenceCalculated: string | undefined;
+    setModuleReferenceDeployed: (moduleReferenceDeployed: ModuleReference.Type | undefined) => void;
+    setModuleReferenceCalculated: (moduleReferenceCalculated: ModuleReference.Type) => void;
+    moduleReferenceCalculated: ModuleReference.Type | undefined;
 }
 
 /**
@@ -76,7 +76,9 @@ export default function DeployComponenet(props: ConnectionProps) {
                                 report.outcome.summary.transactionType === TransactionKindString.DeployModule
                             ) {
                                 setTransactionOutcome('Success');
-                                setModuleReferenceDeployed(report.outcome.summary.moduleDeployed.contents);
+                                setModuleReferenceDeployed(
+                                    ModuleReference.fromHexString(report.outcome.summary.moduleDeployed.contents)
+                                );
                                 clearInterval(interval);
                             } else {
                                 setTransactionOutcome('Fail');
@@ -97,7 +99,7 @@ export default function DeployComponenet(props: ConnectionProps) {
     useEffect(() => {
         if (connection && client && moduleReferenceCalculated) {
             client
-                .getModuleSource(ModuleReference.fromHexString(moduleReferenceCalculated))
+                .getModuleSource(moduleReferenceCalculated)
                 .then((value) => {
                     if (value === undefined) {
                         setIsModuleReferenceAlreadyDeployedStep1(false);
@@ -160,7 +162,9 @@ export default function DeployComponenet(props: ConnectionProps) {
 
                                 setBase64Module(module);
                                 setModuleReferenceCalculated(
-                                    Buffer.from(sha256([new Uint8Array(arrayBuffer)])).toString('hex')
+                                    ModuleReference.fromBuffer(
+                                        Buffer.from(sha256([new Uint8Array(arrayBuffer)]))
+                                    )
                                 );
 
                                 // Concordium's tooling create versioned modules e.g. `.wasm.v1` now.
@@ -250,7 +254,7 @@ export default function DeployComponenet(props: ConnectionProps) {
                     <>
                         <div className="actionResultBox">
                             Calculated module reference:
-                            <div>{moduleReferenceCalculated}</div>
+                            <div>{moduleReferenceCalculated.moduleRef}</div>
                         </div>
                         <div className="actionResultBox">
                             Module in base64:
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index de97797e..d839247f 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -23,17 +23,18 @@ 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, REG_MODULE_REF } from '../constants';
+import { REFRESH_INTERVAL, INPUT_PARAMETER_TYPES_OPTIONS } from '../constants';
+// import { getEmbeddedSchema } from '../../src/reading_from_blockchain';
 
 interface ConnectionProps {
-    isTestnet: boolean;
     account: string;
-    connection: WalletConnection;
     client: ConcordiumGRPCClient | undefined;
+    connection: WalletConnection;
     contracts: string[];
     embeddedModuleSchemaBase64: undefined | string;
-    moduleReferenceCalculated: undefined | string;
-    moduleReferenceDeployed: undefined | string;
+    isTestnet: boolean;
+    moduleReferenceCalculated: undefined | ModuleReference.Type;
+    moduleReferenceDeployed: undefined | ModuleReference.Type;
 }
 
 /**
@@ -42,47 +43,51 @@ interface ConnectionProps {
  */
 export default function InitComponent(props: ConnectionProps) {
     const {
-        isTestnet,
         account,
-        connection,
         client,
+        connection,
+        contracts,
+        embeddedModuleSchemaBase64,
+        isTestnet,
         moduleReferenceCalculated,
         moduleReferenceDeployed,
-        embeddedModuleSchemaBase64,
-        contracts,
     } = props;
 
     type FormType = {
-        moduleReference: string | undefined;
-        smartContractName: string | undefined;
+        cCDAmount: number;
+        deriveFromModuleRefernce: string | undefined;
         file: FileList | undefined;
-        useModuleReferenceFromStep1: boolean;
-        inputParameterType: string | undefined;
-        inputParameter: string | undefined;
         hasInputParameter: boolean;
-        maxExecutionEnergy: number;
+        inputParameter: string | undefined;
+        inputParameterType: string | undefined;
         isPayable: boolean;
-        cCDAmount: number;
+        maxExecutionEnergy: number;
+        moduleReferenceString: string | undefined;
+        moduleReference: ModuleReference.Type | undefined;
+        smartContractName: string | undefined;
+        useModuleReferenceFromStep1: boolean;
     };
 
     const form = useForm<FormType>({ mode: 'all' });
 
     const [
-        useModuleReferenceFromStep1,
-        smartContractName,
+        deriveFromModuleRefernce,
+        hasInputParameter,
         inputParameterType,
         isPayable,
-        hasInputParameter,
         moduleReference,
+        smartContractName,
+        useModuleReferenceFromStep1,
     ] = useWatch({
         control: form.control,
         name: [
-            'useModuleReferenceFromStep1',
-            'smartContractName',
+            'deriveFromModuleRefernce',
+            'hasInputParameter',
             'inputParameterType',
             'isPayable',
-            'hasInputParameter',
             'moduleReference',
+            'smartContractName',
+            'useModuleReferenceFromStep1',
         ],
     });
 
@@ -143,20 +148,18 @@ export default function InitComponent(props: ConnectionProps) {
 
     useEffect(() => {
         if (connection && client && moduleReference) {
-            if (REG_MODULE_REF.test(moduleReference)) {
-                client
-                    .getModuleSource(ModuleReference.fromHexString(moduleReference))
-                    .then((value) => {
-                        if (value === undefined) {
-                            setIsModuleReferenceAlreadyDeployedStep2(false);
-                        } else {
-                            setIsModuleReferenceAlreadyDeployedStep2(true);
-                        }
-                    })
-                    .catch(() => {
+            client
+                .getModuleSource(moduleReference)
+                .then((value) => {
+                    if (value === undefined) {
                         setIsModuleReferenceAlreadyDeployedStep2(false);
-                    });
-            }
+                    } else {
+                        setIsModuleReferenceAlreadyDeployedStep2(true);
+                    }
+                })
+                .catch(() => {
+                    setIsModuleReferenceAlreadyDeployedStep2(false);
+                });
         }
     }, [connection, client, moduleReference]);
 
@@ -249,7 +252,7 @@ export default function InitComponent(props: ConnectionProps) {
             connection,
             AccountAddress.fromBase58(account),
             isModuleReferenceAlreadyDeployedStep2,
-            data.moduleReference ? ModuleReference.fromHexString(data.moduleReference) : undefined,
+            data.moduleReference ? data.moduleReference : undefined,
             data.inputParameter,
             data.smartContractName ? ContractName.fromString(data.smartContractName) : undefined,
             data.hasInputParameter,
@@ -265,99 +268,122 @@ export default function InitComponent(props: ConnectionProps) {
     return (
         <Box header="Step 2: Initialize Smart Contract">
             <Form onSubmit={form.handleSubmit(onSubmit)}>
-                <Form.Group className="mb-3 d-flex justify-content-center">
-                    <Form.Check
-                        type="checkbox"
-                        label="Use Module From Step 1"
-                        {...form.register('useModuleReferenceFromStep1')}
-                        onChange={async (e) => {
-                            const register = form.register('useModuleReferenceFromStep1');
-
-                            register.onChange(e);
+                <Form.Group className="justify-content-center">
+                    <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',
+                            },
+                        ]}
+                        onChange={(e) => {
+                            form.setValue('deriveFromModuleRefernce', e?.value);
 
                             setModuleReferenceError(undefined);
-                            form.setValue('moduleReference', undefined);
-
                             setUploadedModuleSchemaBase64(undefined);
+                            setModuleReferenceLengthError(undefined);
+                            form.setValue('smartContractName', undefined);
+                            form.setValue('moduleReference', undefined);
 
-                            const checkboxElement = form.getValues('useModuleReferenceFromStep1');
+                            const selectValue = form.getValues('deriveFromModuleRefernce');
 
-                            form.setValue('moduleReference', undefined);
-                            setModuleReferenceLengthError(undefined);
+                            if (selectValue === 'Derive from step 1') {
+                                if (moduleReferenceDeployed === undefined && moduleReferenceCalculated === undefined) {
+                                    setModuleReferenceError('No module is uploaded in step 1');
+                                }
 
-                            if (
-                                checkboxElement &&
-                                moduleReferenceDeployed === undefined &&
-                                moduleReferenceCalculated === undefined
-                            ) {
-                                setModuleReferenceError('No module is uploaded in step 1');
-                            }
+                                const newModuleReference =
+                                    moduleReferenceDeployed !== undefined
+                                        ? moduleReferenceDeployed
+                                        : moduleReferenceCalculated;
 
-                            const newModuleReference =
-                                moduleReferenceDeployed !== undefined
-                                    ? moduleReferenceDeployed
-                                    : moduleReferenceCalculated;
+                                if (newModuleReference !== undefined) {
+                                    form.setValue('moduleReference', newModuleReference);
 
-                            if (checkboxElement && newModuleReference !== undefined) {
-                                form.setValue('moduleReference', newModuleReference);
+                                    setDisplayContracts(contracts);
+                                    form.setValue('smartContractName', contracts[0]);
+                                }
+                            }
 
-                                setDisplayContracts(contracts);
-                                form.setValue('smartContractName', contracts[0]);
+                            if (selectValue === 'Derive from chain') {
+                                // const promise = getEmbeddedSchema(client, moduleReference);
+                                // TODO
                             }
                         }}
                     />
-                </Form.Group>
-
-                {useModuleReferenceFromStep1 && (
-                    <>
-                        <br />
-                        <Alert variant="info">
-                            <div>
-                                This checkbox autofilled the <code>module reference</code>, the{' '}
-                                <code>smart contract name</code>, and the <code>input parameter schema</code> from the
-                                module in step1.
-                            </div>
+                    {deriveFromModuleRefernce === 'Derive from Step1' && (
+                        <>
                             <br />
-                            <div>
-                                <b>Uncheck</b> this box, 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>.
-                            </div>
+                            <Alert variant="info">
+                                <div>
+                                    You autofilled the <code>module reference</code>, the{' '}
+                                    <code>smart contract name</code>, and the <code>input parameter schema</code> from
+                                    the module in step1.
+                                </div>
+                                <br />
+                                <div>
+                                    Select <b>Don&apos;t derive</b>, 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>.
+                                </div>
+                                <br />
+                                <div>
+                                    Select <b>Don&apos;t derive</b> and then select <b>Derive from Step1</b> again, if
+                                    you want to load a new module from step 1.
+                                </div>
+                            </Alert>
                             <br />
-                            <div>
-                                <b>Uncheck</b> and <b>check</b> this box again, if you want to load a new module from
-                                step 1.
-                            </div>
-                        </Alert>
-                        <br />
-                    </>
-                )}
+                        </>
+                    )}
+                    {deriveFromModuleRefernce === 'Derive from chain' && (
+                        <>
+                            <br />
+                            <Alert variant="info">
+                                <div>
+                                    You autofilled the <code>smart contract name</code>, and the{' '}
+                                    <code>input parameter schema</code> from a module refence already on chain.
+                                </div>
+                                <br />
+                                <div>
+                                    Select <b>Don&apos;t derive</b>, 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>.
+                                </div>
+                                <br />
+                                <div>
+                                    Select <b>Don&apos;t derive</b> and then select <b>Derive from chain</b> again, if
+                                    you want to load a new module from chain.
+                                </div>
+                            </Alert>
+                            <br />
+                        </>
+                    )}
+                </Form.Group>
 
                 {moduleReferenceError && <Alert variant="danger"> Error: {moduleReferenceError}. </Alert>}
-
+                <br />
                 <Row>
                     <Form.Group className="col-md-4 mb-3">
                         <Form.Label> Module Reference</Form.Label>
                         <Form.Control
                             defaultValue="91225f9538ac2903466cc4ab07b6eb607a2cd349549f357dfdf4e6042dde0693"
                             disabled={!!useModuleReferenceFromStep1}
-                            {...form.register('moduleReference', { required: true })}
-                            onChange={(e) => {
-                                const register = form.register('moduleReference', {
-                                    required: true,
-                                });
-
-                                register.onChange(e);
-
-                                setModuleReferenceLengthError(undefined);
-
-                                const moduleRef = form.getValues('moduleReference');
-
-                                if (moduleRef !== undefined && !REG_MODULE_REF.test(moduleRef)) {
-                                    setModuleReferenceLengthError(
-                                        'Module reference has to be a valid hex string `[0-9A-Fa-f]` of length 64'
-                                    );
-                                }
-                            }}
+                            {...form.register('moduleReferenceString', {
+                                required: true,
+                                // TODO: validation
+                                // validate: validateModuleReference,
+                            })}
+                            value={moduleReference?.moduleRef}
                         />
                         <Form.Text />
                         {form.formState.errors.moduleReference && (
diff --git a/front-end-tools/src/constants.ts b/front-end-tools/src/constants.ts
index 7504616a..f18a39ac 100644
--- a/front-end-tools/src/constants.ts
+++ b/front-end-tools/src/constants.ts
@@ -31,6 +31,3 @@ export const INPUT_PARAMETER_TYPES_OPTIONS = [
 
 // The subindex of all smart contracts.
 export const CONTRACT_SUB_INDEX = 0n;
-
-// Regular expression of a valid module reference which has to be a hex string `[0-9A-Fa-f]` of length 64.
-export const REG_MODULE_REF = /^[0-9A-Fa-f]{64}$/;

From 27090c307b2f7f4e78531ec4841d837be46b1081 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:19:12 +0200
Subject: [PATCH 02/11] Add option to derive module reference from chain

---
 .../src/components/DeployComponent.tsx        |   4 +-
 .../src/components/InitComponent.tsx          | 108 +++++++++++++-----
 front-end-tools/src/constants.ts              |   3 +
 .../src/reading_from_blockchain.ts            |  15 +++
 4 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/front-end-tools/src/components/DeployComponent.tsx b/front-end-tools/src/components/DeployComponent.tsx
index e70145e2..766d2a51 100644
--- a/front-end-tools/src/components/DeployComponent.tsx
+++ b/front-end-tools/src/components/DeployComponent.tsx
@@ -162,9 +162,7 @@ export default function DeployComponenet(props: ConnectionProps) {
 
                                 setBase64Module(module);
                                 setModuleReferenceCalculated(
-                                    ModuleReference.fromBuffer(
-                                        Buffer.from(sha256([new Uint8Array(arrayBuffer)]))
-                                    )
+                                    ModuleReference.fromBuffer(Buffer.from(sha256([new Uint8Array(arrayBuffer)])))
                                 );
 
                                 // Concordium's tooling create versioned modules e.g. `.wasm.v1` now.
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index d839247f..30333532 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -23,8 +23,8 @@ 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 } from '../constants';
-// import { getEmbeddedSchema } from '../../src/reading_from_blockchain';
+import { REFRESH_INTERVAL, INPUT_PARAMETER_TYPES_OPTIONS, hexRegex } from '../constants';
+import { getModuleSource } from '../reading_from_blockchain';
 
 interface ConnectionProps {
     account: string;
@@ -62,7 +62,7 @@ export default function InitComponent(props: ConnectionProps) {
         inputParameterType: string | undefined;
         isPayable: boolean;
         maxExecutionEnergy: number;
-        moduleReferenceString: string | undefined;
+        moduleReferenceString: string;
         moduleReference: ModuleReference.Type | undefined;
         smartContractName: string | undefined;
         useModuleReferenceFromStep1: boolean;
@@ -238,6 +238,20 @@ export default function InitComponent(props: ConnectionProps) {
         inputParameterType,
     ]);
 
+    const validateModuleReference = (value: string) => {
+        try {
+            if (!hexRegex.test(value)) {
+                return 'Invalid module reference. Not a hex string.';
+            }
+
+            form.setValue('moduleReference', ModuleReference.fromHexString(value));
+
+            return true;
+        } catch (e) {
+            return `Invalid module reference. Original error: ${(e as Error).message}`;
+        }
+    };
+
     function onSubmit(data: FormType) {
         setTxHash(undefined);
         setSmartContractIndexError(undefined);
@@ -247,12 +261,11 @@ export default function InitComponent(props: ConnectionProps) {
         const schema = data.useModuleReferenceFromStep1 ? embeddedModuleSchemaBase64 : uploadedModuleSchemaBase64;
 
         // Send init transaction
-
         const tx = initialize(
             connection,
             AccountAddress.fromBase58(account),
             isModuleReferenceAlreadyDeployedStep2,
-            data.moduleReference ? data.moduleReference : undefined,
+            data.moduleReference,
             data.inputParameter,
             data.smartContractName ? ContractName.fromString(data.smartContractName) : undefined,
             data.hasInputParameter,
@@ -286,18 +299,19 @@ export default function InitComponent(props: ConnectionProps) {
                                 label: 'Derive from chain',
                             },
                         ]}
-                        onChange={(e) => {
+                        onChange={async (e) => {
                             form.setValue('deriveFromModuleRefernce', e?.value);
 
                             setModuleReferenceError(undefined);
                             setUploadedModuleSchemaBase64(undefined);
                             setModuleReferenceLengthError(undefined);
                             form.setValue('smartContractName', undefined);
-                            form.setValue('moduleReference', undefined);
 
                             const selectValue = form.getValues('deriveFromModuleRefernce');
 
                             if (selectValue === 'Derive from step 1') {
+                                form.setValue('moduleReference', undefined);
+
                                 if (moduleReferenceDeployed === undefined && moduleReferenceCalculated === undefined) {
                                     setModuleReferenceError('No module is uploaded in step 1');
                                 }
@@ -310,18 +324,43 @@ export default function InitComponent(props: ConnectionProps) {
                                 if (newModuleReference !== undefined) {
                                     form.setValue('moduleReference', newModuleReference);
 
+                                    // TODO schould this be consolidated ?
                                     setDisplayContracts(contracts);
                                     form.setValue('smartContractName', contracts[0]);
                                 }
                             }
 
                             if (selectValue === 'Derive from chain') {
-                                // const promise = getEmbeddedSchema(client, moduleReference);
-                                // TODO
+                                if (moduleReference === undefined) {
+                                    setModuleReferenceError('Set module reference field below');
+                                } else {
+                                    const module = await getModuleSource(client, moduleReference);
+
+                                    let wasmModule;
+                                    try {
+                                        wasmModule = await WebAssembly.compile(module.source);
+                                    } catch (err) {
+                                        setModuleReferenceError('ModuleSource on chain is disrupted');
+                                    }
+
+                                    if (wasmModule) {
+                                        const moduleFunctions = WebAssembly.Module.exports(wasmModule);
+
+                                        const contractNames = [];
+                                        for (let i = 0; i < moduleFunctions.length; i += 1) {
+                                            if (moduleFunctions[i].name.startsWith('init_')) {
+                                                contractNames.push(moduleFunctions[i].name.slice(5));
+                                            }
+                                        }
+
+                                        setDisplayContracts(contractNames);
+                                        form.setValue('smartContractName', contractNames[0]);
+                                    }
+                                }
                             }
                         }}
                     />
-                    {deriveFromModuleRefernce === 'Derive from Step1' && (
+                    {deriveFromModuleRefernce === 'Derive from step 1' && (
                         <>
                             <br />
                             <Alert variant="info">
@@ -330,16 +369,18 @@ export default function InitComponent(props: ConnectionProps) {
                                     <code>smart contract name</code>, and the <code>input parameter schema</code> from
                                     the module in step1.
                                 </div>
-                                <br />
+                            </Alert>
+                            <Alert variant="info">
                                 <div>
-                                    Select <b>Don&apos;t derive</b>, 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>.
+                                    - Select <b>Don&apos;t derive</b> in the above drop-down list, 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>.
                                 </div>
                                 <br />
                                 <div>
-                                    Select <b>Don&apos;t derive</b> and then select <b>Derive from Step1</b> again, if
-                                    you want to load a new module from step 1.
+                                    - Select <b>Don&apos;t derive</b> and then select <b>Derive from Step1</b> again, 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>.
                                 </div>
                             </Alert>
                             <br />
@@ -353,17 +394,20 @@ export default function InitComponent(props: ConnectionProps) {
                                     You autofilled the <code>smart contract name</code>, and the{' '}
                                     <code>input parameter schema</code> from a module refence already on chain.
                                 </div>
-                                <br />
-                                <div>
-                                    Select <b>Don&apos;t derive</b>, 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>.
-                                </div>
-                                <br />
-                                <div>
-                                    Select <b>Don&apos;t derive</b> and then select <b>Derive from chain</b> again, if
-                                    you want to load a new module from chain.
-                                </div>
+                            </Alert>
+                            <Alert variant="info" style={{ textAlign: 'left' }}>
+                                <ul>
+                                    <li>
+                                        Select <b>Don&apos;t derive</b> in the above drop-down list, if you want to
+                                        manually fill in the <code>smart contract name</code>, or an{' '}
+                                        <code>input parameter schema</code>.
+                                    </li>
+                                    <li>
+                                        Select <b>Don&apos;t derive</b> and then select <b>Derive from chain</b> again,
+                                        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>
                             <br />
                         </>
@@ -380,11 +424,15 @@ export default function InitComponent(props: ConnectionProps) {
                             disabled={!!useModuleReferenceFromStep1}
                             {...form.register('moduleReferenceString', {
                                 required: true,
-                                // TODO: validation
-                                // validate: validateModuleReference,
+                                validate: validateModuleReference,
                             })}
-                            value={moduleReference?.moduleRef}
                         />
+                        {form.formState.errors.moduleReferenceString && (
+                            <Alert variant="danger">
+                                {' '}
+                                Module reference is required. {form.formState.errors.moduleReferenceString.message}
+                            </Alert>
+                        )}
                         <Form.Text />
                         {form.formState.errors.moduleReference && (
                             <Alert variant="info">Module reference is required </Alert>
diff --git a/front-end-tools/src/constants.ts b/front-end-tools/src/constants.ts
index f18a39ac..abb042ad 100644
--- a/front-end-tools/src/constants.ts
+++ b/front-end-tools/src/constants.ts
@@ -31,3 +31,6 @@ export const INPUT_PARAMETER_TYPES_OPTIONS = [
 
 // The subindex of all smart contracts.
 export const CONTRACT_SUB_INDEX = 0n;
+
+// Characters of a hex string.
+export const hexRegex = /^[0-9a-fA-F]+$/;
diff --git a/front-end-tools/src/reading_from_blockchain.ts b/front-end-tools/src/reading_from_blockchain.ts
index 9850f75e..a68dd05c 100644
--- a/front-end-tools/src/reading_from_blockchain.ts
+++ b/front-end-tools/src/reading_from_blockchain.ts
@@ -39,6 +39,21 @@ export async function getContractInfo(rpcClient: ConcordiumGRPCClient | undefine
     return returnValue;
 }
 
+/** This function gets the module source of a module reference. */
+export async function getModuleSource(
+    rpcClient: ConcordiumGRPCClient | undefined,
+    moduleRef: ModuleReference.Type | undefined
+) {
+    if (rpcClient === undefined) {
+        throw new Error(`rpcClient undefined`);
+    }
+    if (moduleRef === undefined) {
+        throw new Error(`Set module ref`);
+    }
+
+    return rpcClient.getModuleSource(moduleRef);
+}
+
 /** This function gets the embedded schema of a module reference. */
 export async function getEmbeddedSchema(
     rpcClient: ConcordiumGRPCClient | undefined,

From 9d747e8656512ce75f0f1679e7f3cb21a3f95895 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Fri, 9 Feb 2024 14:58:18 +0200
Subject: [PATCH 03/11] Fix flow for input parameter in init function

---
 front-end-tools/src/Main.tsx                  |   2 +-
 .../src/components/InitComponent.tsx          | 148 +++++++++---------
 front-end-tools/src/constants.ts              |   3 +
 front-end-tools/src/writing_to_blockchain.ts  |   6 +-
 4 files changed, 80 insertions(+), 79 deletions(-)

diff --git a/front-end-tools/src/Main.tsx b/front-end-tools/src/Main.tsx
index 6ffaf5ce..6f62805e 100644
--- a/front-end-tools/src/Main.tsx
+++ b/front-end-tools/src/Main.tsx
@@ -153,7 +153,7 @@ export default function Main(props: ConnectionProps) {
                                 contracts={contracts}
                                 moduleReferenceDeployed={moduleReferenceDeployed}
                                 moduleReferenceCalculated={moduleReferenceCalculated}
-                                embeddedModuleSchemaBase64={embeddedModuleSchemaBase64Init}
+                                embeddedModuleSchemaBase64FromStep1={embeddedModuleSchemaBase64Init}
                             />
 
                             <ReadComponent connection={connection} account={account} client={client} />
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index 30333532..4a1f8768 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -23,7 +23,7 @@ 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 } from '../constants';
+import { REFRESH_INTERVAL, INPUT_PARAMETER_TYPES_OPTIONS, hexRegex, MODULE_REFERENCE_PLACEHOLDER } from '../constants';
 import { getModuleSource } from '../reading_from_blockchain';
 
 interface ConnectionProps {
@@ -31,7 +31,7 @@ interface ConnectionProps {
     client: ConcordiumGRPCClient | undefined;
     connection: WalletConnection;
     contracts: string[];
-    embeddedModuleSchemaBase64: undefined | string;
+    embeddedModuleSchemaBase64FromStep1: undefined | string;
     isTestnet: boolean;
     moduleReferenceCalculated: undefined | ModuleReference.Type;
     moduleReferenceDeployed: undefined | ModuleReference.Type;
@@ -47,7 +47,7 @@ export default function InitComponent(props: ConnectionProps) {
         client,
         connection,
         contracts,
-        embeddedModuleSchemaBase64,
+        embeddedModuleSchemaBase64FromStep1,
         isTestnet,
         moduleReferenceCalculated,
         moduleReferenceDeployed,
@@ -62,34 +62,24 @@ export default function InitComponent(props: ConnectionProps) {
         inputParameterType: string | undefined;
         isPayable: boolean;
         maxExecutionEnergy: number;
-        moduleReferenceString: string;
-        moduleReference: ModuleReference.Type | undefined;
+        moduleReferenceString: string | undefined;
         smartContractName: string | undefined;
-        useModuleReferenceFromStep1: boolean;
     };
 
     const form = useForm<FormType>({ mode: 'all' });
 
-    const [
-        deriveFromModuleRefernce,
-        hasInputParameter,
-        inputParameterType,
-        isPayable,
-        moduleReference,
-        smartContractName,
-        useModuleReferenceFromStep1,
-    ] = useWatch({
-        control: form.control,
-        name: [
-            'deriveFromModuleRefernce',
-            'hasInputParameter',
-            'inputParameterType',
-            'isPayable',
-            'moduleReference',
-            'smartContractName',
-            'useModuleReferenceFromStep1',
-        ],
-    });
+    const [deriveFromModuleRefernce, hasInputParameter, inputParameterType, isPayable, smartContractName, file] =
+        useWatch({
+            control: form.control,
+            name: [
+                'deriveFromModuleRefernce',
+                'hasInputParameter',
+                'inputParameterType',
+                'isPayable',
+                'smartContractName',
+                'file',
+            ],
+        });
 
     const [transactionError, setTransactionError] = useState<string | undefined>(undefined);
 
@@ -104,7 +94,10 @@ export default function InitComponent(props: ConnectionProps) {
 
     const [txHash, setTxHash] = useState<string | undefined>(undefined);
 
-    const [uploadedModuleSchemaBase64, setUploadedModuleSchemaBase64] = useState<string | undefined>(undefined);
+    const [schema, setSchema] = useState<string | undefined>(undefined);
+    const [moduleReference, setModuleReference] = useState<ModuleReference.Type | undefined>(
+        ModuleReference.fromHexString(MODULE_REFERENCE_PLACEHOLDER)
+    );
 
     const [smartContractIndex, setSmartContractIndex] = useState<string | undefined>(undefined);
     const [inputParameterTemplate, setInputParameterTemplate] = useState<string | undefined>(undefined);
@@ -192,18 +185,8 @@ export default function InitComponent(props: ConnectionProps) {
                 throw new Error('Set smart contract name');
             }
 
-            let schema = '';
-
-            const schemaFromModule = useModuleReferenceFromStep1
-                ? embeddedModuleSchemaBase64
-                : uploadedModuleSchemaBase64;
-
-            if (schemaFromModule !== undefined) {
-                schema = schemaFromModule;
-            }
-
             const inputParamterTypeSchemaBuffer = getInitContractParameterSchema(
-                toBuffer(schema, 'base64'),
+                toBuffer(schema || '', 'base64'),
                 ContractName.fromString(smartContractName),
                 2
             );
@@ -212,13 +195,13 @@ export default function InitComponent(props: ConnectionProps) {
 
             setInputParameterTemplate(initTemplate);
         } catch (e) {
-            if (useModuleReferenceFromStep1) {
+            if (deriveFromModuleRefernce === "Don't derive") {
                 setSchemaError(
-                    `Could not get embedded schema from the uploaded module. Uncheck "Use Module from Step 1" checkbox to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter.  Original error: ${e}`
+                    `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 schema from uploaded schema. Uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
+                    `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}`
                 );
             }
         }
@@ -230,21 +213,19 @@ export default function InitComponent(props: ConnectionProps) {
                 form.setValue('inputParameter', JSON.stringify(JSON.parse(initTemplate), undefined, 2));
             }
         }
-    }, [
-        hasInputParameter,
-        useModuleReferenceFromStep1,
-        smartContractName,
-        uploadedModuleSchemaBase64,
-        inputParameterType,
-    ]);
-
-    const validateModuleReference = (value: string) => {
+    }, [hasInputParameter, smartContractName, schema, inputParameterType]);
+
+    const validateModuleReference = (value: string | undefined) => {
+        if (!value) {
+            return true;
+        }
+
         try {
             if (!hexRegex.test(value)) {
                 return 'Invalid module reference. Not a hex string.';
             }
 
-            form.setValue('moduleReference', ModuleReference.fromHexString(value));
+            setModuleReference(ModuleReference.fromHexString(value));
 
             return true;
         } catch (e) {
@@ -258,18 +239,16 @@ export default function InitComponent(props: ConnectionProps) {
         setSmartContractIndex(undefined);
         setTransactionError(undefined);
 
-        const schema = data.useModuleReferenceFromStep1 ? embeddedModuleSchemaBase64 : uploadedModuleSchemaBase64;
-
         // Send init transaction
         const tx = initialize(
             connection,
             AccountAddress.fromBase58(account),
             isModuleReferenceAlreadyDeployedStep2,
-            data.moduleReference,
+            moduleReference,
             data.inputParameter,
             data.smartContractName ? ContractName.fromString(data.smartContractName) : undefined,
             data.hasInputParameter,
-            data.useModuleReferenceFromStep1,
+            data.deriveFromModuleRefernce,
             schema,
             data.inputParameterType,
             Energy.create(data.maxExecutionEnergy),
@@ -303,14 +282,15 @@ export default function InitComponent(props: ConnectionProps) {
                             form.setValue('deriveFromModuleRefernce', e?.value);
 
                             setModuleReferenceError(undefined);
-                            setUploadedModuleSchemaBase64(undefined);
+                            setSchema(undefined);
                             setModuleReferenceLengthError(undefined);
                             form.setValue('smartContractName', undefined);
 
                             const selectValue = form.getValues('deriveFromModuleRefernce');
 
                             if (selectValue === 'Derive from step 1') {
-                                form.setValue('moduleReference', undefined);
+                                setModuleReference(undefined);
+                                form.setValue('moduleReferenceString', undefined);
 
                                 if (moduleReferenceDeployed === undefined && moduleReferenceCalculated === undefined) {
                                     setModuleReferenceError('No module is uploaded in step 1');
@@ -322,11 +302,13 @@ export default function InitComponent(props: ConnectionProps) {
                                         : moduleReferenceCalculated;
 
                                 if (newModuleReference !== undefined) {
-                                    form.setValue('moduleReference', newModuleReference);
+                                    setModuleReference(newModuleReference);
+                                    form.setValue('moduleReferenceString', newModuleReference.moduleRef);
 
                                     // TODO schould this be consolidated ?
                                     setDisplayContracts(contracts);
                                     form.setValue('smartContractName', contracts[0]);
+                                    setSchema(embeddedModuleSchemaBase64FromStep1);
                                 }
                             }
 
@@ -355,6 +337,22 @@ export default function InitComponent(props: ConnectionProps) {
 
                                         setDisplayContracts(contractNames);
                                         form.setValue('smartContractName', contractNames[0]);
+
+                                        const customSection = WebAssembly.Module.customSections(
+                                            wasmModule,
+                                            'concordium-schema'
+                                        );
+
+                                        const embeddedSchema = new Uint8Array(customSection[0]);
+
+                                        // Use `reduce` to be able to convert large schema.
+                                        const embeddedModuleSchemaBase64 = btoa(
+                                            new Uint8Array(embeddedSchema).reduce(
+                                                (data, byte) => data + String.fromCharCode(byte),
+                                                ''
+                                            )
+                                        );
+                                        setSchema(embeddedModuleSchemaBase64);
                                     }
                                 }
                             }
@@ -420,8 +418,8 @@ export default function InitComponent(props: ConnectionProps) {
                     <Form.Group className="col-md-4 mb-3">
                         <Form.Label> Module Reference</Form.Label>
                         <Form.Control
-                            defaultValue="91225f9538ac2903466cc4ab07b6eb607a2cd349549f357dfdf4e6042dde0693"
-                            disabled={!!useModuleReferenceFromStep1}
+                            defaultValue={MODULE_REFERENCE_PLACEHOLDER}
+                            disabled={deriveFromModuleRefernce === 'Derive from step 1'}
                             {...form.register('moduleReferenceString', {
                                 required: true,
                                 validate: validateModuleReference,
@@ -434,12 +432,9 @@ export default function InitComponent(props: ConnectionProps) {
                             </Alert>
                         )}
                         <Form.Text />
-                        {form.formState.errors.moduleReference && (
-                            <Alert variant="info">Module reference is required </Alert>
-                        )}
                     </Form.Group>
 
-                    {useModuleReferenceFromStep1 && displayContracts.length > 0 ? (
+                    {deriveFromModuleRefernce !== "Don't derive" && displayContracts.length > 0 ? (
                         <Form.Group className="col-md-4 mb-3">
                             <Form.Label>Smart Contract Name</Form.Label>
 
@@ -534,21 +529,24 @@ export default function InitComponent(props: ConnectionProps) {
                         onChange={async (e) => {
                             const hasInputParameterRegister = form.register('hasInputParameter');
 
-                            hasInputParameterRegister.onChange(e);
-
                             setParsingError(undefined);
                             form.setValue('inputParameterType', undefined);
                             form.setValue('inputParameter', undefined);
                             setInputParameterTemplate(undefined);
-                            setUploadedModuleSchemaBase64(undefined);
+                            // If previously a file was uploaded and the schema was derived from it. Delete the schema.
+                            if (file) {
+                                setSchema(undefined);
+                            }
                             setSchemaError(undefined);
+
+                            hasInputParameterRegister.onChange(e);
                         }}
                     />
                 </Form.Group>
 
                 {hasInputParameter && (
                     <div className="box">
-                        {!useModuleReferenceFromStep1 && (
+                        {deriveFromModuleRefernce === "Don't derive" && (
                             <Form.Group className="mb-3">
                                 <Form.Label>Upload Smart Contract Module Schema File (e.g. schema.bin)</Form.Label>
                                 <Form.Control
@@ -561,22 +559,22 @@ export default function InitComponent(props: ConnectionProps) {
                                         fileRegister.onChange(e);
 
                                         setUploadError2(undefined);
-                                        setUploadedModuleSchemaBase64(undefined);
+                                        setSchema(undefined);
 
                                         const files = form.getValues('file');
 
                                         if (files !== undefined && files !== null && files.length > 0) {
-                                            const file = files[0];
-                                            const arrayBuffer = await file.arrayBuffer();
+                                            const file0 = files[0];
+                                            const arrayBuffer = await file0.arrayBuffer();
 
                                             // Use `reduce` to be able to convert large schemas.
-                                            const schema = btoa(
+                                            const embeddedSchema = btoa(
                                                 new Uint8Array(arrayBuffer).reduce(
                                                     (data, byte) => data + String.fromCharCode(byte),
                                                     ''
                                                 )
                                             );
-                                            setUploadedModuleSchemaBase64(schema);
+                                            setSchema(embeddedSchema);
                                         } else {
                                             setUploadError2('Upload schema file is undefined');
                                         }
@@ -585,10 +583,10 @@ export default function InitComponent(props: ConnectionProps) {
                                 <Form.Text />
                             </Form.Group>
                         )}
-                        {!useModuleReferenceFromStep1 && uploadedModuleSchemaBase64 && (
+                        {deriveFromModuleRefernce === "Don't derive" && schema && (
                             <div className="actionResultBox">
                                 Schema in base64:
-                                <div>{uploadedModuleSchemaBase64.toString().slice(0, 30)} ...</div>
+                                <div>{schema.toString().slice(0, 30)} ...</div>
                             </div>
                         )}
                         {uploadError2 !== undefined && <Alert variant="danger"> Error: {uploadError2}. </Alert>}
diff --git a/front-end-tools/src/constants.ts b/front-end-tools/src/constants.ts
index abb042ad..0cff0c05 100644
--- a/front-end-tools/src/constants.ts
+++ b/front-end-tools/src/constants.ts
@@ -34,3 +34,6 @@ export const CONTRACT_SUB_INDEX = 0n;
 
 // Characters of a hex string.
 export const hexRegex = /^[0-9a-fA-F]+$/;
+
+// Module reference displayed as placeholder in the input field.
+export const MODULE_REFERENCE_PLACEHOLDER = '91225f9538ac2903466cc4ab07b6eb607a2cd349549f357dfdf4e6042dde0693';
diff --git a/front-end-tools/src/writing_to_blockchain.ts b/front-end-tools/src/writing_to_blockchain.ts
index c879f5b3..abd9cfdb 100644
--- a/front-end-tools/src/writing_to_blockchain.ts
+++ b/front-end-tools/src/writing_to_blockchain.ts
@@ -131,7 +131,7 @@ export async function initialize(
     inputParameter: string | undefined,
     contractName: ContractName.Type | undefined,
     hasInputParameter: boolean,
-    useModuleFromStep1: boolean,
+    deriveFromModuleRefernce: string | undefined,
     moduleSchema: string | undefined,
     inputParamterType: string | undefined,
     maxContractExecutionEnergy: Energy.Type,
@@ -154,9 +154,9 @@ export async function initialize(
     let params: TypedSmartContractParameters | undefined;
 
     if (hasInputParameter) {
-        if (!useModuleFromStep1 && moduleSchema === undefined) {
+        if ((deriveFromModuleRefernce === "Don't derive" || undefined) && moduleSchema === undefined) {
             throw new Error(`Set schema`);
-        } else if (useModuleFromStep1 && moduleSchema === undefined) {
+        } else if (moduleSchema === undefined) {
             throw new Error(`No embedded module schema found in module`);
         }
 

From 498b473a7867ca98b6cb9e18030b97af7996af19 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:12:08 +0200
Subject: [PATCH 04/11] Simplify interactions between step 1 and 2

---
 front-end-tools/src/Main.tsx                  |   9 --
 .../src/components/DeployComponent.tsx        |  48 +------
 .../src/components/InitComponent.tsx          | 123 +++++++-----------
 3 files changed, 51 insertions(+), 129 deletions(-)

diff --git a/front-end-tools/src/Main.tsx b/front-end-tools/src/Main.tsx
index 6f62805e..5e586c40 100644
--- a/front-end-tools/src/Main.tsx
+++ b/front-end-tools/src/Main.tsx
@@ -52,9 +52,6 @@ export default function Main(props: ConnectionProps) {
     const [moduleReferenceCalculated, setModuleReferenceCalculated] = useState<ModuleReference.Type | undefined>(
         undefined
     );
-    const [moduleReferenceDeployed, setModuleReferenceDeployed] = useState<ModuleReference.Type | undefined>(undefined);
-    const [contracts, setContracts] = useState<string[]>([]);
-    const [embeddedModuleSchemaBase64Init, setEmbeddedModuleSchemaBase64Init] = useState<string | undefined>(undefined);
 
     // Refresh accountInfo periodically.
     // eslint-disable-next-line consistent-return
@@ -138,11 +135,8 @@ export default function Main(props: ConnectionProps) {
                                 connection={connection}
                                 account={account}
                                 client={client}
-                                setContracts={setContracts}
                                 moduleReferenceCalculated={moduleReferenceCalculated}
-                                setModuleReferenceDeployed={setModuleReferenceDeployed}
                                 setModuleReferenceCalculated={setModuleReferenceCalculated}
-                                setEmbeddedModuleSchemaBase64Init={setEmbeddedModuleSchemaBase64Init}
                             />
 
                             <InitComponent
@@ -150,10 +144,7 @@ export default function Main(props: ConnectionProps) {
                                 connection={connection}
                                 account={account}
                                 client={client}
-                                contracts={contracts}
-                                moduleReferenceDeployed={moduleReferenceDeployed}
                                 moduleReferenceCalculated={moduleReferenceCalculated}
-                                embeddedModuleSchemaBase64FromStep1={embeddedModuleSchemaBase64Init}
                             />
 
                             <ReadComponent connection={connection} account={account} client={client} />
diff --git a/front-end-tools/src/components/DeployComponent.tsx b/front-end-tools/src/components/DeployComponent.tsx
index 766d2a51..501a5452 100644
--- a/front-end-tools/src/components/DeployComponent.tsx
+++ b/front-end-tools/src/components/DeployComponent.tsx
@@ -25,9 +25,6 @@ interface ConnectionProps {
     connection: WalletConnection;
     client: ConcordiumGRPCClient | undefined;
     isTestnet: boolean;
-    setContracts: (contracts: string[]) => void;
-    setEmbeddedModuleSchemaBase64Init: (embeddedModuleSchemaBase64Init: string) => void;
-    setModuleReferenceDeployed: (moduleReferenceDeployed: ModuleReference.Type | undefined) => void;
     setModuleReferenceCalculated: (moduleReferenceCalculated: ModuleReference.Type) => void;
     moduleReferenceCalculated: ModuleReference.Type | undefined;
 }
@@ -37,17 +34,7 @@ interface ConnectionProps {
  *  This components creates a `DeployModule` transaction.
  */
 export default function DeployComponenet(props: ConnectionProps) {
-    const {
-        isTestnet,
-        client,
-        connection,
-        account,
-        setContracts,
-        setModuleReferenceDeployed,
-        setModuleReferenceCalculated,
-        moduleReferenceCalculated,
-        setEmbeddedModuleSchemaBase64Init,
-    } = props;
+    const { isTestnet, client, connection, account, setModuleReferenceCalculated, moduleReferenceCalculated } = props;
 
     type FormType = {
         file: FileList | undefined;
@@ -76,9 +63,6 @@ export default function DeployComponenet(props: ConnectionProps) {
                                 report.outcome.summary.transactionType === TransactionKindString.DeployModule
                             ) {
                                 setTransactionOutcome('Success');
-                                setModuleReferenceDeployed(
-                                    ModuleReference.fromHexString(report.outcome.summary.moduleDeployed.contents)
-                                );
                                 clearInterval(interval);
                             } else {
                                 setTransactionOutcome('Fail');
@@ -87,7 +71,6 @@ export default function DeployComponenet(props: ConnectionProps) {
                         }
                     })
                     .catch((e) => {
-                        setModuleReferenceDeployed(undefined);
                         setTransactionOutcome(`Fail; Error: ${(e as Error).message}`);
                         clearInterval(interval);
                     });
@@ -122,7 +105,6 @@ export default function DeployComponenet(props: ConnectionProps) {
 
         const tx = deploy(connection, AccountAddress.fromBase58(account), base64Module);
         tx.then((txHash) => {
-            setModuleReferenceDeployed(undefined);
             setTxHashDeploy(txHash);
         }).catch((err: Error) => setTransactionErrorDeploy((err as Error).message));
     }
@@ -142,7 +124,6 @@ export default function DeployComponenet(props: ConnectionProps) {
                             register.onChange(e);
 
                             setUploadError(undefined);
-                            setModuleReferenceDeployed(undefined);
                             setTransactionErrorDeploy(undefined);
                             setTxHashDeploy(undefined);
 
@@ -197,33 +178,6 @@ export default function DeployComponenet(props: ConnectionProps) {
                                 }
 
                                 if (wasmModule) {
-                                    const moduleFunctions = WebAssembly.Module.exports(wasmModule);
-
-                                    const contractNames = [];
-                                    for (let i = 0; i < moduleFunctions.length; i += 1) {
-                                        if (moduleFunctions[i].name.startsWith('init_')) {
-                                            contractNames.push(moduleFunctions[i].name.slice(5));
-                                        }
-                                    }
-                                    setContracts(contractNames);
-
-                                    const customSection = WebAssembly.Module.customSections(
-                                        wasmModule,
-                                        'concordium-schema'
-                                    );
-
-                                    const schema = new Uint8Array(customSection[0]);
-
-                                    // Use `reduce` to be able to convert large schema.
-                                    const moduleSchemaBase64Embedded = btoa(
-                                        new Uint8Array(schema).reduce(
-                                            (data, byte) => data + String.fromCharCode(byte),
-                                            ''
-                                        )
-                                    );
-
-                                    setEmbeddedModuleSchemaBase64Init(moduleSchemaBase64Embedded);
-
                                     // Check if the module was built as a reproducible build.
                                     const buildInfoSection = WebAssembly.Module.customSections(
                                         wasmModule,
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index 4a1f8768..a0cb8720 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -30,11 +30,8 @@ interface ConnectionProps {
     account: string;
     client: ConcordiumGRPCClient | undefined;
     connection: WalletConnection;
-    contracts: string[];
-    embeddedModuleSchemaBase64FromStep1: undefined | string;
     isTestnet: boolean;
     moduleReferenceCalculated: undefined | ModuleReference.Type;
-    moduleReferenceDeployed: undefined | ModuleReference.Type;
 }
 
 /**
@@ -42,16 +39,7 @@ interface ConnectionProps {
  * This components creates an `InitContract` transaction.
  */
 export default function InitComponent(props: ConnectionProps) {
-    const {
-        account,
-        client,
-        connection,
-        contracts,
-        embeddedModuleSchemaBase64FromStep1,
-        isTestnet,
-        moduleReferenceCalculated,
-        moduleReferenceDeployed,
-    } = props;
+    const { account, client, connection, isTestnet, moduleReferenceCalculated } = props;
 
     type FormType = {
         cCDAmount: number;
@@ -233,6 +221,41 @@ export default function InitComponent(props: ConnectionProps) {
         }
     };
 
+    const deriveSchemaAndContractNames = async (moduleRef: ModuleReference.Type) => {
+        const module = await getModuleSource(client, moduleRef);
+
+        let wasmModule;
+        try {
+            wasmModule = await WebAssembly.compile(module.source);
+        } catch (err) {
+            setModuleReferenceError('ModuleSource on chain is disrupted');
+        }
+
+        if (wasmModule) {
+            const moduleFunctions = WebAssembly.Module.exports(wasmModule);
+
+            const contractNames = [];
+            for (let i = 0; i < moduleFunctions.length; i += 1) {
+                if (moduleFunctions[i].name.startsWith('init_')) {
+                    contractNames.push(moduleFunctions[i].name.slice(5));
+                }
+            }
+
+            setDisplayContracts(contractNames);
+            form.setValue('smartContractName', contractNames[0]);
+
+            const customSection = WebAssembly.Module.customSections(wasmModule, 'concordium-schema');
+
+            const embeddedSchema = new Uint8Array(customSection[0]);
+
+            // Use `reduce` to be able to convert large schema.
+            const embeddedModuleSchemaBase64 = btoa(
+                new Uint8Array(embeddedSchema).reduce((data, byte) => data + String.fromCharCode(byte), '')
+            );
+            setSchema(embeddedModuleSchemaBase64);
+        }
+    };
+
     function onSubmit(data: FormType) {
         setTxHash(undefined);
         setSmartContractIndexError(undefined);
@@ -292,23 +315,15 @@ export default function InitComponent(props: ConnectionProps) {
                                 setModuleReference(undefined);
                                 form.setValue('moduleReferenceString', undefined);
 
-                                if (moduleReferenceDeployed === undefined && moduleReferenceCalculated === undefined) {
+                                if (moduleReferenceCalculated === undefined) {
                                     setModuleReferenceError('No module is uploaded in step 1');
                                 }
 
-                                const newModuleReference =
-                                    moduleReferenceDeployed !== undefined
-                                        ? moduleReferenceDeployed
-                                        : moduleReferenceCalculated;
-
-                                if (newModuleReference !== undefined) {
-                                    setModuleReference(newModuleReference);
-                                    form.setValue('moduleReferenceString', newModuleReference.moduleRef);
+                                if (moduleReferenceCalculated !== undefined) {
+                                    setModuleReference(moduleReferenceCalculated);
+                                    form.setValue('moduleReferenceString', moduleReferenceCalculated.moduleRef);
 
-                                    // TODO schould this be consolidated ?
-                                    setDisplayContracts(contracts);
-                                    form.setValue('smartContractName', contracts[0]);
-                                    setSchema(embeddedModuleSchemaBase64FromStep1);
+                                    await deriveSchemaAndContractNames(moduleReferenceCalculated);
                                 }
                             }
 
@@ -316,44 +331,7 @@ export default function InitComponent(props: ConnectionProps) {
                                 if (moduleReference === undefined) {
                                     setModuleReferenceError('Set module reference field below');
                                 } else {
-                                    const module = await getModuleSource(client, moduleReference);
-
-                                    let wasmModule;
-                                    try {
-                                        wasmModule = await WebAssembly.compile(module.source);
-                                    } catch (err) {
-                                        setModuleReferenceError('ModuleSource on chain is disrupted');
-                                    }
-
-                                    if (wasmModule) {
-                                        const moduleFunctions = WebAssembly.Module.exports(wasmModule);
-
-                                        const contractNames = [];
-                                        for (let i = 0; i < moduleFunctions.length; i += 1) {
-                                            if (moduleFunctions[i].name.startsWith('init_')) {
-                                                contractNames.push(moduleFunctions[i].name.slice(5));
-                                            }
-                                        }
-
-                                        setDisplayContracts(contractNames);
-                                        form.setValue('smartContractName', contractNames[0]);
-
-                                        const customSection = WebAssembly.Module.customSections(
-                                            wasmModule,
-                                            'concordium-schema'
-                                        );
-
-                                        const embeddedSchema = new Uint8Array(customSection[0]);
-
-                                        // Use `reduce` to be able to convert large schema.
-                                        const embeddedModuleSchemaBase64 = btoa(
-                                            new Uint8Array(embeddedSchema).reduce(
-                                                (data, byte) => data + String.fromCharCode(byte),
-                                                ''
-                                            )
-                                        );
-                                        setSchema(embeddedModuleSchemaBase64);
-                                    }
+                                    await deriveSchemaAndContractNames(moduleReference);
                                 }
                             }
                         }}
@@ -369,17 +347,16 @@ export default function InitComponent(props: ConnectionProps) {
                                 </div>
                             </Alert>
                             <Alert variant="info">
-                                <div>
-                                    - Select <b>Don&apos;t derive</b> in the above drop-down list, 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>.
-                                </div>
-                                <br />
-                                <div>
-                                    - Select <b>Don&apos;t derive</b> and then select <b>Derive from Step1</b> again, if
+                                <li>
+                                    Select <b>Don&apos;t derive</b> in the above drop-down list, 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>Don&apos;t derive</b> and then select <b>Derive from chain</b> again, 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>.
-                                </div>
+                                </li>
                             </Alert>
                             <br />
                         </>

From eac448a07d1a2317b54de73c0148536b4cdba271 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Sun, 11 Feb 2024 21:34:35 +0200
Subject: [PATCH 05/11] Fix edge cases

---
 front-end-tools/README.md                     | 12 +++-
 .../src/components/InitComponent.tsx          | 61 ++++++++++++-------
 front-end-tools/src/writing_to_blockchain.ts  |  4 +-
 3 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/front-end-tools/README.md b/front-end-tools/README.md
index 2d899311..04b53d9d 100644
--- a/front-end-tools/README.md
+++ b/front-end-tools/README.md
@@ -3,10 +3,16 @@
 The front end contains useful functionalities for smart contract developers:
 
 - Upload and deploy a smart contract module to chain.
-- Initialize a smart contract module on chain.
+- Initialize a smart contract instance on chain.
+- Invoke a smart contract on chain (reading from chain).
+- Update a smart contract on chain (writing to chain).
 
 Only the browser wallet is supported in the first version (no support for mobile wallets).
 
+## Hosted front end
+
+[Hosted front end link](https://sctools.mainnet.concordium.software/)
+
 ## Prerequisites
 
 -   Browser wallet extension must be installed in a Chromium-based browser.
@@ -30,13 +36,13 @@ To start the front end locally, do the following:
 
 -   Run `yarn build` in this folder.
 -   Run `yarn start` in this folder.
--   Open URL logged in console (typically http://127.0.0.1:8080).
+-   Open URL logged in console (typically http://127.0.0.1:5173).
 
 To have hot-reload (useful for development), do the following instead:
 
 -   Run `yarn watch` in this folder in a terminal.
 -   Run `yarn start` in this folder in another terminal.
--   Open URL logged in console (typically http://127.0.0.1:8080).
+-   Open URL logged in console (typically http://127.0.0.1:5173).
 
 ## Using yarn (on Unix/macOS systems)
 
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index a0cb8720..9ba86e95 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -148,7 +148,7 @@ export default function InitComponent(props: ConnectionProps) {
         if (
             moduleReference !== undefined &&
             moduleReferenceCalculated !== undefined &&
-            moduleReferenceCalculated !== moduleReference
+            moduleReferenceCalculated.moduleRef !== moduleReference.moduleRef
         ) {
             return true;
         }
@@ -162,6 +162,13 @@ export default function InitComponent(props: ConnectionProps) {
         return false;
     }, [inputParameterTemplate, hasInputParameter]);
 
+    const shouldWarnNoEmbeddedSchema = useMemo(() => {
+        if (schema?.length === 0) {
+            return true;
+        }
+        return false;
+    }, [schema]);
+
     useEffect(() => {
         setSchemaError(undefined);
         setInputParameterTemplate(undefined);
@@ -173,15 +180,17 @@ export default function InitComponent(props: ConnectionProps) {
                 throw new Error('Set smart contract name');
             }
 
-            const inputParamterTypeSchemaBuffer = getInitContractParameterSchema(
-                toBuffer(schema || '', 'base64'),
-                ContractName.fromString(smartContractName),
-                2
-            );
+            if (schema) {
+                const inputParamterTypeSchemaBuffer = getInitContractParameterSchema(
+                    toBuffer(schema, 'base64'),
+                    ContractName.fromString(smartContractName),
+                    2
+                );
 
-            initTemplate = displayTypeSchemaTemplate(inputParamterTypeSchemaBuffer);
+                initTemplate = displayTypeSchemaTemplate(inputParamterTypeSchemaBuffer);
 
-            setInputParameterTemplate(initTemplate);
+                setInputParameterTemplate(initTemplate);
+            }
         } catch (e) {
             if (deriveFromModuleRefernce === "Don't derive") {
                 setSchemaError(
@@ -305,13 +314,16 @@ export default function InitComponent(props: ConnectionProps) {
                             form.setValue('deriveFromModuleRefernce', e?.value);
 
                             setModuleReferenceError(undefined);
-                            setSchema(undefined);
                             setModuleReferenceLengthError(undefined);
+                            setSchema(undefined);
                             form.setValue('smartContractName', undefined);
+                            form.setValue('file', undefined);
+                            setDisplayContracts([]);
 
                             const selectValue = form.getValues('deriveFromModuleRefernce');
 
                             if (selectValue === 'Derive from step 1') {
+                                form.clearErrors('moduleReferenceString');
                                 setModuleReference(undefined);
                                 form.setValue('moduleReferenceString', undefined);
 
@@ -346,16 +358,16 @@ export default function InitComponent(props: ConnectionProps) {
                                     the module in step1.
                                 </div>
                             </Alert>
-                            <Alert variant="info">
+                            <Alert variant="info" style={{ textAlign: 'left' }}>
                                 <li>
-                                    Select <b>Don&apos;t derive</b> in the above drop-down list, if you want to manually
-                                    fill in a <code>module reference</code>, the <code>smart contract name</code>, or an{' '}
+                                    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{' '}
                                     <code>input parameter schema</code>.
                                 </li>
                                 <li>
-                                    Select <b>Don&apos;t derive</b> and then select <b>Derive from chain</b> again, 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 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>.
                                 </li>
                             </Alert>
                             <br />
@@ -373,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 list, if you want to
-                                        manually fill in the <code>smart contract name</code>, or an{' '}
+                                        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{' '}
                                         <code>input parameter schema</code>.
                                     </li>
                                     <li>
-                                        Select <b>Don&apos;t derive</b> and then select <b>Derive from chain</b> again,
-                                        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</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>
@@ -511,8 +523,9 @@ export default function InitComponent(props: ConnectionProps) {
                             form.setValue('inputParameter', undefined);
                             setInputParameterTemplate(undefined);
                             // If previously a file was uploaded and the schema was derived from it. Delete the schema.
-                            if (file) {
+                            if (file !== undefined) {
                                 setSchema(undefined);
+                                form.setValue('file', undefined);
                             }
                             setSchemaError(undefined);
 
@@ -680,6 +693,12 @@ export default function InitComponent(props: ConnectionProps) {
                 {shouldWarnDifferenceModuleReferences && (
                     <Alert variant="warning">Warning: Module references in step 1 and step 2 are different.</Alert>
                 )}
+                {shouldWarnNoEmbeddedSchema && (
+                    <Alert variant="warning">
+                        Warning: No schema was embedded in module. It is unknown if contract expects an input parameter.
+                        No parameter schemas will be displayed
+                    </Alert>
+                )}
                 {shouldWarnInputParameterInSchemaIgnored && (
                     <Alert variant="warning">
                         {' '}
diff --git a/front-end-tools/src/writing_to_blockchain.ts b/front-end-tools/src/writing_to_blockchain.ts
index abd9cfdb..32784d6b 100644
--- a/front-end-tools/src/writing_to_blockchain.ts
+++ b/front-end-tools/src/writing_to_blockchain.ts
@@ -139,7 +139,9 @@ export async function initialize(
 ) {
     if (moduleReferenceAlreadyDeployed === false) {
         throw new Error(
-            `Module reference does not exist on chain. First, deploy your module in step 1 and change/refresh the module reference field in step 2 to remove this 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`
         );
     }
 

From 7d338a9c0d56b48c1581a261ba68fa25e7fc84b2 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Thu, 15 Feb 2024 11:57:49 +0200
Subject: [PATCH 06/11] Simplify select options

---
 .../src/components/InitComponent.tsx          | 112 ++++++++++--------
 front-end-tools/src/constants.ts              |  24 +++-
 front-end-tools/src/writing_to_blockchain.ts  |   8 +-
 3 files changed, 83 insertions(+), 61 deletions(-)

diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index 9ba86e95..ffe2ba3a 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -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 {
@@ -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);
 
@@ -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]);
@@ -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]);
 
@@ -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,
@@ -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);
 
@@ -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);
@@ -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 {
@@ -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">
@@ -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">
@@ -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>
@@ -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,
@@ -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>
 
@@ -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
@@ -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>
@@ -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', {
@@ -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) => {
@@ -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) => {
@@ -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>
                 )}
diff --git a/front-end-tools/src/constants.ts b/front-end-tools/src/constants.ts
index 0cff0c05..7b425422 100644
--- a/front-end-tools/src/constants.ts
+++ b/front-end-tools/src/constants.ts
@@ -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.
@@ -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];
diff --git a/front-end-tools/src/writing_to_blockchain.ts b/front-end-tools/src/writing_to_blockchain.ts
index 32784d6b..ce90b4c5 100644
--- a/front-end-tools/src/writing_to_blockchain.ts
+++ b/front-end-tools/src/writing_to_blockchain.ts
@@ -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.
  */
@@ -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`
         );
     }
 
@@ -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`);

From a9111265883f5014d17a7df3f9a38c7e009734cd Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:57:48 +0200
Subject: [PATCH 07/11] Update changelog

---
 front-end-tools/CHANGELOG.md                     | 4 ++++
 front-end-tools/package.json                     | 2 +-
 front-end-tools/src/components/InitComponent.tsx | 4 ++--
 front-end-tools/src/constants.ts                 | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/front-end-tools/CHANGELOG.md b/front-end-tools/CHANGELOG.md
index a7a5fe6d..4f571cf4 100644
--- a/front-end-tools/CHANGELOG.md
+++ b/front-end-tools/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 3.1.0
+
+- Add option to `deriveFromChain` given a module reference in Step 2.
+
 ## 3.0.2
 
 - Fix error message when specifying input parameter without uploading schema.
diff --git a/front-end-tools/package.json b/front-end-tools/package.json
index 9f26e6e5..f1938bad 100644
--- a/front-end-tools/package.json
+++ b/front-end-tools/package.json
@@ -1,7 +1,7 @@
 {
     "name": "front-end-tools",
     "packageManager": "yarn@4.0.2",
-    "version": "3.0.2",
+    "version": "3.1.0",
     "license": "Apache-2.0",
     "engines": {
         "node": ">=16.x"
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index ffe2ba3a..541a42ae 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -703,8 +703,8 @@ export default function InitComponent(props: ConnectionProps) {
                 )}
                 {shouldWarnNoEmbeddedSchema && (
                     <Alert variant="warning">
-                        Warning: No schema was embedded in module. It is unknown if contract expects an input parameter.
-                        No parameter schemas will be displayed
+                        Warning: No schema was embedded in the module deployed on chain. It is unknown if contract
+                        expects an input parameter. No parameter schemas will be displayed
                     </Alert>
                 )}
                 {shouldWarnInputParameterInSchemaIgnored && (
diff --git a/front-end-tools/src/constants.ts b/front-end-tools/src/constants.ts
index 7b425422..c4031aa3 100644
--- a/front-end-tools/src/constants.ts
+++ b/front-end-tools/src/constants.ts
@@ -44,10 +44,10 @@ 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.
+// Available options to select in step 2 for deriving values from the module reference.
 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.
+// All available options to select in step 2 for deriving values from the module reference.
 export const OPTIONS_DERIVE_FROM_MODULE_REFERENCE = [DO_NOT_DERIVE, DERIVE_FROM_STEP_1, DERIVE_FROM_CHAIN];

From eab342c38362ebcae2ce55f5840a399d83ae04c3 Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Fri, 16 Feb 2024 14:17:47 +0200
Subject: [PATCH 08/11] Add documentation to functions

---
 .../src/components/InitComponent.tsx          | 55 +++++------
 .../src/components/ReadComponent.tsx          | 10 +-
 .../src/components/UpdateComponent.tsx        | 13 ++-
 .../src/reading_from_blockchain.ts            | 86 +++++++++++++---
 front-end-tools/src/writing_to_blockchain.ts  | 98 ++++++++++++++-----
 5 files changed, 180 insertions(+), 82 deletions(-)

diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index 541a42ae..f15ac2cd 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -56,7 +56,7 @@ export default function InitComponent(props: ConnectionProps) {
 
     type FormType = {
         cCDAmount: number;
-        deriveFromModuleRefernce: string | undefined;
+        deriveFromModuleReference: string | undefined;
         file: FileList | undefined;
         hasInputParameter: boolean;
         inputParameter: string | undefined;
@@ -69,11 +69,11 @@ export default function InitComponent(props: ConnectionProps) {
 
     const form = useForm<FormType>({ mode: 'all' });
 
-    const [deriveFromModuleRefernce, hasInputParameter, inputParameterType, isPayable, smartContractName, file] =
+    const [deriveFromModuleReference, hasInputParameter, inputParameterType, isPayable, smartContractName, file] =
         useWatch({
             control: form.control,
             name: [
-                'deriveFromModuleRefernce',
+                'deriveFromModuleReference',
                 'hasInputParameter',
                 'inputParameterType',
                 'isPayable',
@@ -145,11 +145,7 @@ export default function InitComponent(props: ConnectionProps) {
             client
                 .getModuleSource(moduleReference)
                 .then((value) => {
-                    if (value === undefined) {
-                        setIsModuleReferenceAlreadyDeployed(false);
-                    } else {
-                        setIsModuleReferenceAlreadyDeployed(true);
-                    }
+                    setIsModuleReferenceAlreadyDeployed(value !== undefined);
                 })
                 .catch(() => {
                     setIsModuleReferenceAlreadyDeployed(false);
@@ -175,12 +171,7 @@ export default function InitComponent(props: ConnectionProps) {
         return false;
     }, [inputParameterTemplate, hasInputParameter]);
 
-    const shouldWarnNoEmbeddedSchema = useMemo(() => {
-        if (schema?.length === 0) {
-            return true;
-        }
-        return false;
-    }, [schema]);
+    const shouldWarnNoEmbeddedSchema = useMemo(() => schema?.length === 0, [schema]);
 
     useEffect(() => {
         setSchemaError(undefined);
@@ -194,24 +185,24 @@ export default function InitComponent(props: ConnectionProps) {
             }
 
             if (schema) {
-                const inputParamterTypeSchemaBuffer = getInitContractParameterSchema(
+                const inputParameterTypeSchemaBuffer = getInitContractParameterSchema(
                     toBuffer(schema, 'base64'),
                     ContractName.fromString(smartContractName),
                     2
                 );
 
-                initTemplate = displayTypeSchemaTemplate(inputParamterTypeSchemaBuffer);
+                initTemplate = displayTypeSchemaTemplate(inputParameterTypeSchemaBuffer);
 
                 setInputParameterTemplate(initTemplate);
             }
         } catch (e) {
-            if (deriveFromModuleRefernce === DO_NOT_DERIVE.value) {
+            if (deriveFromModuleReference === 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}`
+                    `Could not get schema from uploaded schema. Uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
                 );
             } else {
                 setSchemaError(
-                    `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}`
+                    `Could not get embedded schema from the module. Select "${DO_NOT_DERIVE.label}" to manually upload a schema or uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
                 );
             }
         }
@@ -290,12 +281,12 @@ export default function InitComponent(props: ConnectionProps) {
             AccountAddress.fromBase58(account),
             isModuleReferenceAlreadyDeployed,
             moduleReference,
-            data.inputParameter,
             data.smartContractName ? ContractName.fromString(data.smartContractName) : undefined,
             data.hasInputParameter,
-            data.deriveFromModuleRefernce,
-            schema,
+            data.inputParameter,
             data.inputParameterType,
+            schema,
+            data.deriveFromModuleReference,
             Energy.create(data.maxExecutionEnergy),
             CcdAmount.fromMicroCcd(data.cCDAmount ?? 0)
         );
@@ -306,12 +297,12 @@ export default function InitComponent(props: ConnectionProps) {
         <Box header="Step 2: Initialize Smart Contract">
             <Form onSubmit={form.handleSubmit(onSubmit)}>
                 <Form.Group className="justify-content-center">
-                    <Form.Label>DeriveFromModuleRefernce</Form.Label>
+                    <Form.Label>DeriveFromModuleReference</Form.Label>
                     <Select
-                        {...form.register('deriveFromModuleRefernce', { required: true })}
+                        {...form.register('deriveFromModuleReference', { required: true })}
                         options={OPTIONS_DERIVE_FROM_MODULE_REFERENCE}
                         onChange={async (e) => {
-                            form.setValue('deriveFromModuleRefernce', e?.value);
+                            form.setValue('deriveFromModuleReference', e?.value);
 
                             setModuleReferenceError(undefined);
                             setModuleReferenceLengthError(undefined);
@@ -320,7 +311,7 @@ export default function InitComponent(props: ConnectionProps) {
                             form.setValue('file', undefined);
                             setDisplayContracts([]);
 
-                            const selectValue = form.getValues('deriveFromModuleRefernce');
+                            const selectValue = form.getValues('deriveFromModuleReference');
 
                             if (selectValue === DERIVE_FROM_STEP_1.value) {
                                 form.clearErrors('moduleReferenceString');
@@ -348,7 +339,7 @@ export default function InitComponent(props: ConnectionProps) {
                             }
                         }}
                     />
-                    {deriveFromModuleRefernce === DERIVE_FROM_STEP_1.value && (
+                    {deriveFromModuleReference === DERIVE_FROM_STEP_1.value && (
                         <>
                             <br />
                             <Alert variant="info">
@@ -373,7 +364,7 @@ export default function InitComponent(props: ConnectionProps) {
                             <br />
                         </>
                     )}
-                    {deriveFromModuleRefernce === DERIVE_FROM_CHAIN.value && (
+                    {deriveFromModuleReference === DERIVE_FROM_CHAIN.value && (
                         <>
                             <br />
                             <Alert variant="info">
@@ -408,7 +399,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.value}
+                            disabled={deriveFromModuleReference === DERIVE_FROM_STEP_1.value}
                             {...form.register('moduleReferenceString', {
                                 required: true,
                                 validate: validateModuleReference,
@@ -423,7 +414,7 @@ export default function InitComponent(props: ConnectionProps) {
                         <Form.Text />
                     </Form.Group>
 
-                    {deriveFromModuleRefernce !== DO_NOT_DERIVE.value && displayContracts.length > 0 ? (
+                    {deriveFromModuleReference !== DO_NOT_DERIVE.value && displayContracts.length > 0 ? (
                         <Form.Group className="col-md-4 mb-3">
                             <Form.Label>Smart Contract Name</Form.Label>
 
@@ -536,7 +527,7 @@ export default function InitComponent(props: ConnectionProps) {
 
                 {hasInputParameter && (
                     <div className="box">
-                        {deriveFromModuleRefernce === DO_NOT_DERIVE.value && (
+                        {deriveFromModuleReference === 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
@@ -573,7 +564,7 @@ export default function InitComponent(props: ConnectionProps) {
                                 <Form.Text />
                             </Form.Group>
                         )}
-                        {deriveFromModuleRefernce === DO_NOT_DERIVE.value && schema && (
+                        {deriveFromModuleReference === DO_NOT_DERIVE.value && schema && (
                             <div className="actionResultBox">
                                 Schema in base64:
                                 <div>{schema.toString().slice(0, 30)} ...</div>
diff --git a/front-end-tools/src/components/ReadComponent.tsx b/front-end-tools/src/components/ReadComponent.tsx
index bc7bdd9b..a0ab2736 100644
--- a/front-end-tools/src/components/ReadComponent.tsx
+++ b/front-end-tools/src/components/ReadComponent.tsx
@@ -99,7 +99,7 @@ export default function ReadComponenet(props: ConnectionProps) {
             const schema = deriveContractInfo ? embeddedModuleSchemaBase64 : uploadedModuleSchemaBase64;
             if (schema === undefined) {
                 setSchemaError(
-                    'Schema was not uploaded or not embedded into the module. Uncheck the "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter'
+                    'Schema was not uploaded or not embedded into the module. Uncheck the "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter'
                 );
                 return;
             }
@@ -116,11 +116,11 @@ export default function ReadComponenet(props: ConnectionProps) {
         } catch (e) {
             if (deriveContractInfo) {
                 setSchemaError(
-                    `Could not derive the embedded schema from the smart contract index. Uncheck "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
+                    `Could not derive the embedded schema from the smart contract index. Uncheck "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
                 );
             } else {
                 setSchemaError(
-                    `Could not get schema from uploaded schema. Uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
+                    `Could not get schema from uploaded schema. Uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
                 );
             }
         }
@@ -147,10 +147,10 @@ export default function ReadComponenet(props: ConnectionProps) {
             ContractName.fromString(data.smartContractName),
             BigInt(data.smartContractIndex),
             data.entryPointName ? EntrypointName.fromString(data.entryPointName) : undefined,
-            schema,
+            data.hasInputParameter,
             data.inputParameter,
             data.inputParameterType,
-            data.hasInputParameter,
+            schema,
             data.deriveFromSmartContractIndex
         );
 
diff --git a/front-end-tools/src/components/UpdateComponent.tsx b/front-end-tools/src/components/UpdateComponent.tsx
index d205d2c8..531c8731 100644
--- a/front-end-tools/src/components/UpdateComponent.tsx
+++ b/front-end-tools/src/components/UpdateComponent.tsx
@@ -144,7 +144,7 @@ export default function UpdateComponenet(props: ConnectionProps) {
             const schema = deriveContractInfo ? embeddedModuleSchemaBase64 : uploadedModuleSchemaBase64;
             if (schema === undefined) {
                 setSchemaError(
-                    'Schema was not uploaded or not embedded into the module. Uncheck the "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter'
+                    'Schema was not uploaded or not embedded into the module. Uncheck the "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter'
                 );
                 return;
             }
@@ -161,11 +161,11 @@ export default function UpdateComponenet(props: ConnectionProps) {
         } catch (e) {
             if (deriveContractInfo) {
                 setSchemaError(
-                    `Could not derive the embedded schema from the smart contract index. Uncheck "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
+                    `Could not derive the embedded schema from the smart contract index. Uncheck "Derive From Smart Contract Index" checkbox to manually upload a schema or uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
                 );
             } else {
                 setSchemaError(
-                    `Could not get schema from uploaded schema. Uncheck "Has Input Paramter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
+                    `Could not get schema from uploaded schema. Uncheck "Has Input Parameter" checkbox if this entrypoint has no input parameter. Original error: ${e}`
                 );
             }
         }
@@ -187,17 +187,16 @@ export default function UpdateComponenet(props: ConnectionProps) {
         const schema = deriveContractInfo ? embeddedModuleSchemaBase64 : uploadedModuleSchemaBase64;
 
         // Send update transaction
-
         const tx = update(
             connection,
             AccountAddress.fromBase58(account),
-            data.inputParameter,
             ContractName.fromString(data.smartContractName),
             data.entryPointName ? EntrypointName.fromString(data.entryPointName) : undefined,
-            data.hasInputParameter,
             data.deriveFromSmartContractIndex,
-            schema,
+            data.hasInputParameter,
+            data.inputParameter,
             data.inputParameterType,
+            schema,
             Energy.create(data.maxExecutionEnergy),
             BigInt(data.smartContractIndex),
             CcdAmount.fromMicroCcd(data.cCDAmount ?? 0)
diff --git a/front-end-tools/src/reading_from_blockchain.ts b/front-end-tools/src/reading_from_blockchain.ts
index a68dd05c..90f188ce 100644
--- a/front-end-tools/src/reading_from_blockchain.ts
+++ b/front-end-tools/src/reading_from_blockchain.ts
@@ -18,7 +18,16 @@ import {
 import JSONbig from 'json-bigint';
 import { CONTRACT_SUB_INDEX } from './constants';
 
-/** This function gets the contract info of a smart contract index. */
+/**
+ * Retrieves information about a given smart contract instance.
+ *
+ * @param rpcClient the rpcClient to query.
+ * @param contractIndex the contract index (part of the smart contract address).
+ *
+ * @returns An object with information about the contract instance. The object contains the contractName, the methods, and the sourceModule.
+ * @throws If the `rpcClient` is undefined.
+ * @throws If the `contractIndex` is undefined.
+ */
 export async function getContractInfo(rpcClient: ConcordiumGRPCClient | undefined, contractIndex: bigint) {
     if (rpcClient === undefined) {
         throw new Error(`rpcClient undefined`);
@@ -35,11 +44,19 @@ export async function getContractInfo(rpcClient: ConcordiumGRPCClient | undefine
     // Removing the `contractName.` prefix.
     const methods = info.methods.map(ReceiveName.toEntrypointName);
 
-    const returnValue = { contractName, methods, sourceModule: info.sourceModule };
-    return returnValue;
+    return { contractName, methods, sourceModule: info.sourceModule };
 }
 
-/** This function gets the module source of a module reference. */
+/**
+ * Retrieves information about module source of a module reference.
+ *
+ * @param rpcClient the rpcClient to query.
+ * @param moduleRef the module's reference, represented by the ModuleReference class.
+ *
+ * @returns the source of the module as raw bytes.
+ * @throws If the `rpcClient` is undefined.
+ * @throws If the `moduleRef` is undefined.
+ */
 export async function getModuleSource(
     rpcClient: ConcordiumGRPCClient | undefined,
     moduleRef: ModuleReference.Type | undefined
@@ -54,7 +71,16 @@ export async function getModuleSource(
     return rpcClient.getModuleSource(moduleRef);
 }
 
-/** This function gets the embedded schema of a module reference. */
+/**
+ * Retrieves the embedded schema of the given module.
+ *
+ * @param rpcClient the rpcClient to query.
+ * @param moduleRef the module's reference, represented by the ModuleReference class.
+ *
+ * @returns the module schema as a buffer.
+ * @throws If the `rpcClient` is undefined.
+ * @throws If the `moduleRef` is undefined.
+ */
 export async function getEmbeddedSchema(
     rpcClient: ConcordiumGRPCClient | undefined,
     moduleRef: ModuleReference.Type | undefined
@@ -69,7 +95,17 @@ export async function getEmbeddedSchema(
     return rpcClient.getEmbeddedSchema(moduleRef);
 }
 
-/** This function gets the account info and its balance. */
+/**
+ * Retrieves the account info for the specified account. If the request to the node is successful, this function updates
+ * the account balance with the `setAccountBalance` hook and updates the account existence status using the `setAccountExistsOnNetwork` hook.
+ * If the request to the node fails, the error returned is written to the `setViewErrorAccountInfo` hook.
+ *
+ * @param rpcClient the rpcClient to query.
+ * @param accountIdentifier the string in base58 encoding representing the account address.
+ * @param setAccountBalance a hook to update the account balance.
+ * @param setAccountExistsOnNetwork a hook to update the account existence status.
+ * @param setViewErrorAccountInfo a hook to write the error to in case the request to the node fails.
+ */
 export function getAccountInfo(
     client: ConcordiumGRPCClient,
     account: string,
@@ -95,22 +131,40 @@ export function getAccountInfo(
         });
 }
 
-/** This function invokes a smart contract entry point and returns its return_value.
- * This function expects that the entry point is a `typical` smart contract view/read/getter function that returns a return_value.
- * This function throws an error if the entry point does not return a return_value.
- * If the moduleSchema parameter is undefined, the return_value is in raw bytes.
- * If a valid moduleSchema is provided, the return_value is deserialized.
+/**
+ * Invokes a smart contract entry point and returns its return value.
+ * This function expects that the entry point is a `typical` smart contract view/read/getter function that returns a return value.
+ * This function throws an error if the entry point does not return a return value.
+ * If the moduleSchema parameter is undefined, the return value is in raw bytes.
+ * If a valid moduleSchema is provided, the return value is deserialized.
+ *
+ * @param rpcClient the rpcClient to query.
+ * @param contractName the contract name to be invoked.
+ * @param contractIndex the contract index to be invoked.
+ * @param entryPoint an optional entry point to be invoked. This function will throw if the entryPoint is undefined.
+ * @param hasInputParameter a boolean signaling if the invoke should be executed with an input parameter.
+ * @param inputParameter an optional input parameter.
+ * @param inputParameterType an optional input parameter type (`string`/`number`/`array`/`object`).
+ * @param moduleSchema an optional module schema to serialize the input parameter and deserialize the return value.
+ * @param deriveContractInfoFromIndex a boolean signaling if values were derived from the contract index or manually inputted by the user.
+ *
+ * @returns the return value from the smart contract invoke in raw bytes (if no valid moduleSchema is provided) or deserialized (if a valid moduleSchema is provided).
+ * @throws If the `rpcClient` is undefined.
+ * @throws If the `entryPoint` is undefined.
+ * @throws If the `hasInputParameter` is true but the input parameter cannot be serialized.
+ * @throws If the request to the node fails.
+ * @throws In case of a valid moduleSchema: if the deserialization of the return value fails.
  */
 export async function read(
     rpcClient: ConcordiumGRPCClient | undefined,
     contractName: ContractName.Type,
     contractIndex: bigint,
     entryPoint: EntrypointName.Type | undefined,
-    moduleSchema: string | undefined,
+    hasInputParameter: boolean,
     inputParameter: string | undefined,
     inputParameterType: string | undefined,
-    hasInputParameter: boolean,
-    deriveContractInfo: boolean
+    moduleSchema: string | undefined,
+    deriveContractInfoFromIndex: boolean
 ) {
     if (rpcClient === undefined) {
         throw new Error(`rpcClient undefined`);
@@ -123,9 +177,9 @@ export async function read(
     let param = Parameter.empty();
 
     if (hasInputParameter) {
-        if (!deriveContractInfo && moduleSchema === undefined) {
+        if (!deriveContractInfoFromIndex && moduleSchema === undefined) {
             throw new Error(`Set schema`);
-        } else if (deriveContractInfo && moduleSchema === undefined) {
+        } else if (deriveContractInfoFromIndex && moduleSchema === undefined) {
             throw new Error(`No embedded module schema found in module`);
         }
 
diff --git a/front-end-tools/src/writing_to_blockchain.ts b/front-end-tools/src/writing_to_blockchain.ts
index ce90b4c5..23d5f670 100644
--- a/front-end-tools/src/writing_to_blockchain.ts
+++ b/front-end-tools/src/writing_to_blockchain.ts
@@ -18,7 +18,17 @@ import { TypedSmartContractParameters, WalletConnection } from '@concordium/reac
 import { moduleSchemaFromBase64 } from '@concordium/wallet-connectors';
 import { CONTRACT_SUB_INDEX, DERIVE_FROM_CHAIN, DERIVE_FROM_STEP_1, DO_NOT_DERIVE } from './constants';
 
-/** This function signs and sends a `DeployModule` transaction.
+/**
+ * This function signs and sends a `DeployModule` transaction. A promise is returned for the hash of the submitted transaction.
+ * This type of transaction deploys a new Wasm module on chain.
+ *
+ * @param connection the wallet connection to submit the transaction to.
+ * @param account the account whose keys are used to sign the transaction.
+ * @param base64Module the Wasm module in base64 format to be deployed.
+ *
+ * @returns A promise for the hash of the submitted transaction.
+ * @throws If the `base64Module` is undefined.
+ * @throws If the request to the wallet fails.
  */
 export async function deploy(
     connection: WalletConnection,
@@ -34,20 +44,40 @@ export async function deploy(
     } as DeployModulePayload);
 }
 
-/** This function signs and sends an `Update` transaction.
- * If the transaction should include an input parameter, `hasInputParameter` needs to be true
- * and the `inputParameter`, its `inputParameterType`, and the contract `moduleSchema` have to be provided.
+/**
+ * This function signs and sends an `Update` transaction. A promise is returned for the hash of the submitted transaction.
+ * This type of transaction updates a new smart contract instance on chain.
+ * If the `hasInputParameter` is true, the `inputParameter` and its `inputParameterType`, and the contract `moduleSchema` have to
+ * be provided so that the input parameter can be serialized.
+ *
+ * @param connection the wallet connection to submit the transaction to.
+ * @param account the account whose keys are used to sign the transaction.
+ * @param contractName the contract name.
+ * @param entryPoint the entrypoint name.
+ * @param deriveContractInfoFromIndex a boolean signaling if values were derived from the contract index or manually inputted by the user.
+ * @param hasInputParameter a boolean signaling if the init function has an input parameter.
+ * @param inputParameter an optional input parameter.
+ * @param inputParameterType  an optional input parameter type (`string`/`number`/`array`/`object`).
+ * @param moduleSchema an optional module schema to serialize the input parameter.
+ * @param maxContractExecutionEnergy the maximum amount of energy to be used while executing the transaction.
+ * @param contractIndex the contract index (part of the smart contract address).
+ * @param amount the amount of micro CCD to send.
+ *
+ * @returns A promise for the hash of the submitted transaction.
+ * @throws If the `entryPoint` is undefined.
+ * @throws If the `hasInputParameter` is true but the input parameter cannot be serialized.
+ * @throws If the request to the wallet fails.
  */
 export async function update(
     connection: WalletConnection,
     account: AccountAddress.Type,
-    inputParameter: string | undefined,
     contractName: ContractName.Type,
     entryPoint: EntrypointName.Type | undefined,
+    deriveContractInfoFromIndex: boolean,
     hasInputParameter: boolean,
-    deriveContractInfo: boolean,
-    moduleSchema: string | undefined,
+    inputParameter: string | undefined,
     inputParameterType: string | undefined,
+    moduleSchema: string | undefined,
     maxContractExecutionEnergy: Energy.Type,
     contractIndex: bigint,
     amount: CcdAmount.Type
@@ -59,9 +89,9 @@ export async function update(
     let params: TypedSmartContractParameters | undefined;
 
     if (hasInputParameter) {
-        if (!deriveContractInfo && moduleSchema === undefined) {
+        if (!deriveContractInfoFromIndex && moduleSchema === undefined) {
             throw new Error(`Set schema`);
-        } else if (deriveContractInfo && moduleSchema === undefined) {
+        } else if (deriveContractInfoFromIndex && moduleSchema === undefined) {
             throw new Error(`No embedded module schema found in module`);
         }
 
@@ -100,7 +130,7 @@ export async function update(
                     };
                     break;
                 default:
-                    throw new Error(`Input paramter type option does not exist`);
+                    throw new Error(`Input parameter type option does not exist`);
             }
         }
     }
@@ -118,22 +148,43 @@ export async function update(
     );
 }
 
-/** This function signs and sends an `InitContract` transaction.
- * If the transaction should include an input parameter,
- * `hasInputParameter` needs to be true and the `inputParameter`,
- * its `inputParameterType`, and the contract `moduleSchema` have to be provided.
+/**
+ * This function signs and sends an `InitContract` transaction. A promise is returned for the hash of the submitted transaction.
+ * This type of transaction creates a new smart contract instance on chain.
+ * If the `hasInputParameter` is true, the `inputParameter` and its `inputParameterType`, and the contract `moduleSchema` have to
+ * be provided so that the input parameter can be serialized.
+ *
+ * @param connection the wallet connection to submit the transaction to.
+ * @param account the account whose keys are used to sign the transaction.
+ * @param moduleReferenceAlreadyDeployed a boolean signaling if the module is already deployed on chain.
+ * @param moduleReference the module's reference to initialize the smart contract instance from, represented by the ModuleReference class.
+ * @param contractName the contract name in case several contracts exist in the module.
+ * @param hasInputParameter a boolean signaling if the init function has an input parameter.
+ * @param inputParameter an optional input parameter.
+ * @param inputParameterType  an optional input parameter type (`string`/`number`/`array`/`object`).
+ * @param moduleSchema an optional module schema to serialize the input parameter.
+ * @param deriveFromModuleReference a value signalling how the module reference (and associated values) were derived (`doNotDerive`/`deriveFromStep1`/`deriveFromChain`).
+ * @param maxContractExecutionEnergy the maximum amount of energy to be used while executing the transaction.
+ * @param amount the amount of micro CCD to send.
+ *
+ * @returns A promise for the hash of the submitted transaction.
+ * @throws If the `moduleReferenceAlreadyDeployed` is false.
+ * @throws If the `moduleReference` is undefined.
+ * @throws If the `contractName` is undefined.
+ * @throws If the `hasInputParameter` is true but the input parameter cannot be serialized.
+ * @throws If the request to the wallet fails.
  */
 export async function initialize(
     connection: WalletConnection,
     account: AccountAddress.Type,
     moduleReferenceAlreadyDeployed: boolean,
     moduleReference: ModuleReference.Type | undefined,
-    inputParameter: string | undefined,
     contractName: ContractName.Type | undefined,
     hasInputParameter: boolean,
-    deriveFromModuleRefernce: string | undefined,
+    inputParameter: string | undefined,
+    inputParameterType: string | undefined,
     moduleSchema: string | undefined,
-    inputParamterType: string | undefined,
+    deriveFromModuleReference: string | undefined,
     maxContractExecutionEnergy: Energy.Type,
     amount: CcdAmount.Type
 ) {
@@ -156,22 +207,25 @@ export async function initialize(
     let params: TypedSmartContractParameters | undefined;
 
     if (hasInputParameter) {
-        if ((deriveFromModuleRefernce === DO_NOT_DERIVE.value || undefined) && moduleSchema === undefined) {
+        if (
+            (deriveFromModuleReference === DO_NOT_DERIVE.value || deriveFromModuleReference === undefined) &&
+            moduleSchema === undefined
+        ) {
             throw new Error(`Set schema`);
         } else if (moduleSchema === undefined) {
             throw new Error(`No embedded module schema found in module`);
         }
 
         if (moduleSchema !== undefined) {
-            if (inputParamterType === undefined) {
-                throw new Error(`Set input paramter type`);
+            if (inputParameterType === undefined) {
+                throw new Error(`Set input parameter type`);
             }
 
             if (inputParameter === undefined) {
                 throw new Error(`Set input parameter`);
             }
 
-            switch (inputParamterType) {
+            switch (inputParameterType) {
                 case 'number':
                     params = {
                         parameters: Number(inputParameter),
@@ -197,7 +251,7 @@ export async function initialize(
                     };
                     break;
                 default:
-                    throw new Error(`Input paramter type does not exist`);
+                    throw new Error(`Input parameter type does not exist`);
             }
         }
     }

From a233d5cd8b5119eb5bebfca53dbb52e9d03c1c6e Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Fri, 16 Feb 2024 17:50:02 +0200
Subject: [PATCH 09/11] Address comments

---
 .../src/components/InitComponent.tsx          | 27 +++++++++++--------
 front-end-tools/src/constants.ts              |  4 +--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index f15ac2cd..c9578b0e 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -26,7 +26,7 @@ import { getObjectExample, getArrayExample } from '../utils';
 import {
     REFRESH_INTERVAL,
     INPUT_PARAMETER_TYPES_OPTIONS,
-    hexRegex,
+    REG_MODULE_REF,
     MODULE_REFERENCE_PLACEHOLDER,
     OPTIONS_DERIVE_FROM_MODULE_REFERENCE,
     DO_NOT_DERIVE,
@@ -87,6 +87,9 @@ export default function InitComponent(props: ConnectionProps) {
     const [uploadError2, setUploadError2] = useState<string | undefined>(undefined);
     const [parsingError, setParsingError] = useState<string | undefined>(undefined);
     const [smartContractIndexError, setSmartContractIndexError] = useState<string | undefined>(undefined);
+    const [isModuleReferenceAlreadyDeployedError, setIsModuleReferenceAlreadyDeployedError] = useState<
+        string | undefined
+    >(undefined);
     const [moduleReferenceError, setModuleReferenceError] = useState<string | undefined>(undefined);
     const [moduleReferenceLengthError, setModuleReferenceLengthError] = useState<string | undefined>(undefined);
     const [schemaError, setSchemaError] = useState<string | undefined>(undefined);
@@ -141,13 +144,15 @@ export default function InitComponent(props: ConnectionProps) {
     }, [connection, client, txHash]);
 
     useEffect(() => {
+        setIsModuleReferenceAlreadyDeployedError(undefined);
         if (connection && client && moduleReference) {
             client
                 .getModuleSource(moduleReference)
                 .then((value) => {
                     setIsModuleReferenceAlreadyDeployed(value !== undefined);
                 })
-                .catch(() => {
+                .catch((e) => {
+                    setIsModuleReferenceAlreadyDeployedError((e as Error).message.replaceAll('%20', ' '));
                     setIsModuleReferenceAlreadyDeployed(false);
                 });
         }
@@ -221,17 +226,11 @@ export default function InitComponent(props: ConnectionProps) {
             return true;
         }
 
-        try {
-            if (!hexRegex.test(value)) {
-                return 'Invalid module reference. Not a hex string.';
-            }
-
+        if (REG_MODULE_REF.test(value)) {
             setModuleReference(ModuleReference.fromHexString(value));
-
-            return true;
-        } catch (e) {
-            return `Invalid module reference. Original error: ${(e as Error).message}`;
         }
+
+        return REG_MODULE_REF.test(value) ? true : 'Invalid module reference. Not a hex string of length 64.';
     };
 
     const deriveSchemaAndContractNames = async (moduleRef: ModuleReference.Type) => {
@@ -255,6 +254,9 @@ export default function InitComponent(props: ConnectionProps) {
             }
 
             setDisplayContracts(contractNames);
+            // We select and display the first contract name in the drop-down as the default value.
+            // This is especially convenient if the module only includes one contract since the user does not have to manually select
+            // the contract name. A smart contract module can include several smart contracts on Concordium.
             form.setValue('smartContractName', contractNames[0]);
 
             const customSection = WebAssembly.Module.customSections(wasmModule, 'concordium-schema');
@@ -716,6 +718,9 @@ export default function InitComponent(props: ConnectionProps) {
                 {smartContractIndexError !== undefined && (
                     <Alert variant="danger"> Error: {smartContractIndexError}.</Alert>
                 )}
+                {isModuleReferenceAlreadyDeployedError !== undefined && (
+                    <Alert variant="danger"> Error: {isModuleReferenceAlreadyDeployedError}.</Alert>
+                )}
                 {smartContractIndex !== undefined && (
                     <div className="actionResultBox">
                         Smart Contract Inedex:
diff --git a/front-end-tools/src/constants.ts b/front-end-tools/src/constants.ts
index c4031aa3..83593557 100644
--- a/front-end-tools/src/constants.ts
+++ b/front-end-tools/src/constants.ts
@@ -38,8 +38,8 @@ export const INPUT_PARAMETER_TYPES_OPTIONS = [
 // The subindex of all smart contracts.
 export const CONTRACT_SUB_INDEX = 0n;
 
-// Characters of a hex string.
-export const hexRegex = /^[0-9a-fA-F]+$/;
+// Regular expression of a valid module reference which has to be a hex string `[0-9A-Fa-f]` of length 64.
+export const REG_MODULE_REF = /^[0-9A-Fa-f]{64}$/;
 
 // Module reference displayed as placeholder in the input field.
 export const MODULE_REFERENCE_PLACEHOLDER = '91225f9538ac2903466cc4ab07b6eb607a2cd349549f357dfdf4e6042dde0693';

From 8d64515b0ce3ff7cfe41fb30e76cacf3d7e75a1a Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Mon, 19 Feb 2024 11:25:41 +0200
Subject: [PATCH 10/11] Move errors/warning to above or below the buttons
 depending on if they are automatically refreshed

---
 front-end-tools/src/Main.tsx                  |  2 +-
 .../src/components/InitComponent.tsx          | 19 +++++++++++--------
 .../src/components/ReadComponent.tsx          | 14 ++++++++------
 .../src/components/UpdateComponent.tsx        | 14 ++++++++------
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/front-end-tools/src/Main.tsx b/front-end-tools/src/Main.tsx
index 5e586c40..eb53aab3 100644
--- a/front-end-tools/src/Main.tsx
+++ b/front-end-tools/src/Main.tsx
@@ -9,9 +9,9 @@ import {
     MAINNET,
     useWalletConnectorSelector,
 } from '@concordium/react-components';
+import { ModuleReference } from '@concordium/web-sdk';
 
 import { Alert } from 'react-bootstrap';
-import { ModuleReference } from '@concordium/web-sdk';
 import DeployComponent from './components/DeployComponent';
 import ReadComponent from './components/ReadComponent';
 import UpdateComponent from './components/UpdateComponent';
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index c9578b0e..352182e2 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -683,11 +683,6 @@ 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>
                 )}
@@ -706,6 +701,17 @@ export default function InitComponent(props: ConnectionProps) {
                         Warning: Input parameter schema found but &quot;Has Input Parameter&quot; checkbox is unchecked.
                     </Alert>
                 )}
+                {isModuleReferenceAlreadyDeployedError !== undefined && (
+                    <Alert variant="danger"> Error: {isModuleReferenceAlreadyDeployedError}.</Alert>
+                )}
+                <br />
+
+                <Button variant="primary" type="submit">
+                    Initialize Smart Contract
+                </Button>
+
+                <br />
+                <br />
                 {!txHash && transactionError && <Alert variant="danger">Error: {transactionError}.</Alert>}
                 {txHash && (
                     <TxHashLink
@@ -718,9 +724,6 @@ export default function InitComponent(props: ConnectionProps) {
                 {smartContractIndexError !== undefined && (
                     <Alert variant="danger"> Error: {smartContractIndexError}.</Alert>
                 )}
-                {isModuleReferenceAlreadyDeployedError !== undefined && (
-                    <Alert variant="danger"> Error: {isModuleReferenceAlreadyDeployedError}.</Alert>
-                )}
                 {smartContractIndex !== undefined && (
                     <div className="actionResultBox">
                         Smart Contract Inedex:
diff --git a/front-end-tools/src/components/ReadComponent.tsx b/front-end-tools/src/components/ReadComponent.tsx
index a0ab2736..bb170cb3 100644
--- a/front-end-tools/src/components/ReadComponent.tsx
+++ b/front-end-tools/src/components/ReadComponent.tsx
@@ -515,12 +515,6 @@ export default function ReadComponenet(props: ConnectionProps) {
                     </div>
                 )}
 
-                <br />
-
-                <Button variant="primary" type="submit">
-                    Read Smart Contract
-                </Button>
-                <br />
                 <br />
                 {(deriveContractInfo ? embeddedModuleSchemaBase64 : uploadedModuleSchemaBase64) === undefined && (
                     <Alert variant="warning">
@@ -534,6 +528,14 @@ export default function ReadComponenet(props: ConnectionProps) {
                         Warning: Input parameter schema found but &quot;Has Input Parameter&quot; checkbox is unchecked.{' '}
                     </Alert>
                 )}
+                <br />
+
+                <Button variant="primary" type="submit">
+                    Read Smart Contract
+                </Button>
+
+                <br />
+                <br />
                 {error && <Alert variant="danger"> Error: {error}. </Alert>}
                 {returnValue && (
                     <div className="actionResultBox">
diff --git a/front-end-tools/src/components/UpdateComponent.tsx b/front-end-tools/src/components/UpdateComponent.tsx
index 531c8731..e17181ef 100644
--- a/front-end-tools/src/components/UpdateComponent.tsx
+++ b/front-end-tools/src/components/UpdateComponent.tsx
@@ -593,12 +593,6 @@ export default function UpdateComponenet(props: ConnectionProps) {
                     </div>
                 )}
 
-                <br />
-
-                <Button variant="primary" type="submit">
-                    Update Smart Contract
-                </Button>
-                <br />
                 <br />
                 {shouldWarnInputParameterInSchemaIgnored && (
                     <Alert variant="warning">
@@ -606,6 +600,14 @@ export default function UpdateComponenet(props: ConnectionProps) {
                         Warning: Input parameter schema found but &quot;Has Input Parameter&quot; checkbox is unchecked.
                     </Alert>
                 )}
+                <br />
+
+                <Button variant="primary" type="submit">
+                    Update Smart Contract
+                </Button>
+
+                <br />
+                <br />
                 {!txHashUpdate && transactionErrorUpdate && (
                     <Alert variant="danger"> Error: {transactionErrorUpdate}. </Alert>
                 )}

From 637665f95a374cc8a7b7888258adc9643eca085d Mon Sep 17 00:00:00 2001
From: Doris Benda <DOBEN@users.noreply.github.com>
Date: Tue, 20 Feb 2024 11:54:53 +0200
Subject: [PATCH 11/11] Address comments

---
 front-end-tools/src/components/DeployComponent.tsx | 3 +--
 front-end-tools/src/components/InitComponent.tsx   | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/front-end-tools/src/components/DeployComponent.tsx b/front-end-tools/src/components/DeployComponent.tsx
index 501a5452..0320123e 100644
--- a/front-end-tools/src/components/DeployComponent.tsx
+++ b/front-end-tools/src/components/DeployComponent.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Alert, Button, Form } from 'react-bootstrap';
-import { Buffer } from 'buffer';
 
 import { WalletConnection } from '@concordium/react-components';
 import {
@@ -143,7 +142,7 @@ export default function DeployComponenet(props: ConnectionProps) {
 
                                 setBase64Module(module);
                                 setModuleReferenceCalculated(
-                                    ModuleReference.fromBuffer(Buffer.from(sha256([new Uint8Array(arrayBuffer)])))
+                                    ModuleReference.fromBuffer(sha256([new Uint8Array(arrayBuffer)]))
                                 );
 
                                 // Concordium's tooling create versioned modules e.g. `.wasm.v1` now.
diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
index 352182e2..437fa814 100644
--- a/front-end-tools/src/components/InitComponent.tsx
+++ b/front-end-tools/src/components/InitComponent.tsx
@@ -162,7 +162,7 @@ export default function InitComponent(props: ConnectionProps) {
         if (
             moduleReference !== undefined &&
             moduleReferenceCalculated !== undefined &&
-            moduleReferenceCalculated.moduleRef !== moduleReference.moduleRef
+            !ModuleReference.equals(moduleReferenceCalculated, moduleReference)
         ) {
             return true;
         }