diff --git a/example/transactionBuilder/app.js b/example/transactionBuilder/app.js
index 154f608..d04fbad 100644
--- a/example/transactionBuilder/app.js
+++ b/example/transactionBuilder/app.js
@@ -256,7 +256,8 @@ window.onChangeRecipient = async () => {
 
   document.querySelector("#namedActionsContainer").style.display = "block";
 
-  Contract.extractActionsFromContract(contractCode).forEach((action) => {
+  const actions = await Contract.extractActionsFromContract(contractCode);
+  actions.forEach((action) => {
     const option = document.createElement("option");
     option.text = action.name;
     option.value = action.name;
@@ -280,7 +281,16 @@ window.onChangeRecipient = async () => {
       paramInput.setAttribute("class", "input");
       paramInput.addEventListener("change", function (e) {
         const value = e.target.value;
-        namedParams[index] = Contract.parseTypedArgument(value);
+        try {
+          const json = JSON.parse(value);
+          if (typeof json === "object") {
+            namedParams[index] = Contract.parseTypedArgument(json);
+          } else {
+            namedParams[index] = Contract.parseTypedArgument(value);
+          }
+        } catch (e) {
+          namedParams[index] = Contract.parseTypedArgument(value);
+        }
       });
 
       paramsContainer.appendChild(paramLabel);
@@ -309,7 +319,7 @@ window.onClickAddRecipient = () => {
     if (recipientList.textContent != "") {
       recipientList.textContent = recipientList.textContent + "\n";
     }
-    recipientList.textContent += `${recipientAddress} - ${namedAction} - ${namedParams}`;
+    recipientList.textContent += `${recipientAddress} - ${namedAction} - ${JSON.stringify(namedParams)}`;
 
     document.querySelector("#namedActionsContainer").style.display = "none";
     document.querySelector("#namedActions").innerHTML = "<option></option>";