Repository: ProvableHQ/sdk (language: rust)

Issue:
[Proposal] Implement Syntax Highlighting in aleo.tools
## 💥 Proposal - Implement Syntax Highlighting in aleo.tools

When a user views a program on aleo.tools, the text box should be able to recognize Aleo instruction syntax and apply appropriate coloring and styling to the code elements.


Discussion / hints:

Fix patch:
diff --git a/website/.eslintrc.cjs b/website/.eslintrc.cjs
index 7a2d483d4..e0d8ab3ad 100644
--- a/website/.eslintrc.cjs
+++ b/website/.eslintrc.cjs
@@ -11,5 +11,6 @@ module.exports = {
     plugins: ["react-refresh"],
     rules: {
         "react-refresh/only-export-components": "warn",
+        "react/prop-types":"off"
     },
 };
diff --git a/website/package-lock.json b/website/package-lock.json
index 2549ff579..7f1f7e9d9 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -11,6 +11,12 @@
             "dependencies": {
                 "@aleohq/wasm": "file:../wasm/pkg-parallel",
                 "@ant-design/icons": "^4.4.0",
+                "@codemirror/language": "^6.8.0",
+                "@codemirror/legacy-modes": "^6.3.3",
+                "@codemirror/stream-parser": "^0.19.9",
+                "@uiw/codemirror-theme-noctis-lilac": "^4.21.8",
+                "@uiw/codemirror-theme-okaidia": "^4.21.7",
+                "@uiw/react-codemirror": "^4.21.7",
                 "antd": "^5.6.4",
                 "axios": "^1.1.3",
                 "babel-loader": "^8.2.3",
@@ -43,9 +49,31 @@
                 "webpack-cli": "^5.1.4"
             }
         },
+        "../lang-aleo": {
+            "name": "codemirror-lang-aleo",
+            "version": "0.1.0",
+            "extraneous": true,
+            "license": "MIT",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0"
+            },
+            "devDependencies": {
+                "@lezer/generator": "^1.0.0",
+                "mocha": "^9.0.1",
+                "rollup": "^2.60.2",
+                "rollup-plugin-dts": "^4.0.1",
+                "rollup-plugin-ts": "^3.0.2",
+                "typescript": "^4.3.4"
+            }
+        },
+        "../lang-aleo/dist": {
+            "extraneous": true
+        },
         "../wasm/pkg-parallel": {
             "name": "@aleohq/aleo-wasm",
-            "version": "0.5.0",
+            "version": "0.5.1",
             "license": "GPL-3.0"
         },
         "node_modules/@aashutoshrathi/word-wrap": {
@@ -1874,6 +1902,242 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@codemirror/autocomplete": {
+            "version": "6.9.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.9.0.tgz",
+            "integrity": "sha512-Fbwm0V/Wn3BkEJZRhr0hi5BhCo5a7eBL6LYaliPjOSwCyfOpnjXY59HruSxOUNV+1OYer0Tgx1zRNQttjXyDog==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.6.0",
+                "@lezer/common": "^1.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/commands": {
+            "version": "6.2.4",
+            "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
+            "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.2.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/highlight": {
+            "version": "0.19.8",
+            "resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.8.tgz",
+            "integrity": "sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==",
+            "deprecated": "As of 0.20.0, this package has been split between @lezer/highlight and @codemirror/language",
+            "dependencies": {
+                "@codemirror/language": "^0.19.0",
+                "@codemirror/rangeset": "^0.19.0",
+                "@codemirror/state": "^0.19.3",
+                "@codemirror/view": "^0.19.39",
+                "@lezer/common": "^0.15.0",
+                "style-mod": "^4.0.0"
+            }
+        },
+        "node_modules/@codemirror/highlight/node_modules/@codemirror/language": {
+            "version": "0.19.10",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.10.tgz",
+            "integrity": "sha512-yA0DZ3RYn2CqAAGW62VrU8c4YxscMQn45y/I9sjBlqB1e2OTQLg4CCkMBuMSLXk4xaqjlsgazeOQWaJQOKfV8Q==",
+            "dependencies": {
+                "@codemirror/state": "^0.19.0",
+                "@codemirror/text": "^0.19.0",
+                "@codemirror/view": "^0.19.0",
+                "@lezer/common": "^0.15.5",
+                "@lezer/lr": "^0.15.0"
+            }
+        },
+        "node_modules/@codemirror/highlight/node_modules/@codemirror/state": {
+            "version": "0.19.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+            "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+            "dependencies": {
+                "@codemirror/text": "^0.19.0"
+            }
+        },
+        "node_modules/@codemirror/highlight/node_modules/@codemirror/view": {
+            "version": "0.19.48",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
+            "integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
+            "dependencies": {
+                "@codemirror/rangeset": "^0.19.5",
+                "@codemirror/state": "^0.19.3",
+                "@codemirror/text": "^0.19.0",
+                "style-mod": "^4.0.0",
+                "w3c-keyname": "^2.2.4"
+            }
+        },
+        "node_modules/@codemirror/highlight/node_modules/@lezer/common": {
+            "version": "0.15.12",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
+            "integrity": "sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig=="
+        },
+        "node_modules/@codemirror/highlight/node_modules/@lezer/lr": {
+            "version": "0.15.8",
+            "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.8.tgz",
+            "integrity": "sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==",
+            "dependencies": {
+                "@lezer/common": "^0.15.0"
+            }
+        },
+        "node_modules/@codemirror/language": {
+            "version": "6.8.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.8.0.tgz",
+            "integrity": "sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g==",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/common": "^1.0.0",
+                "@lezer/highlight": "^1.0.0",
+                "@lezer/lr": "^1.0.0",
+                "style-mod": "^4.0.0"
+            }
+        },
+        "node_modules/@codemirror/legacy-modes": {
+            "version": "6.3.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.3.3.tgz",
+            "integrity": "sha512-X0Z48odJ0KIoh/HY8Ltz75/4tDYc9msQf1E/2trlxFaFFhgjpVHjZ/BCXe1Lk7s4Gd67LL/CeEEHNI+xHOiESg==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0"
+            }
+        },
+        "node_modules/@codemirror/lint": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.0.tgz",
+            "integrity": "sha512-6VZ44Ysh/Zn07xrGkdtNfmHCbGSHZzFBdzWi0pbd7chAQ/iUcpLGX99NYRZTa7Ugqg4kEHCqiHhcZnH0gLIgSg==",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "node_modules/@codemirror/rangeset": {
+            "version": "0.19.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.9.tgz",
+            "integrity": "sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==",
+            "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
+            "dependencies": {
+                "@codemirror/state": "^0.19.0"
+            }
+        },
+        "node_modules/@codemirror/rangeset/node_modules/@codemirror/state": {
+            "version": "0.19.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+            "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+            "dependencies": {
+                "@codemirror/text": "^0.19.0"
+            }
+        },
+        "node_modules/@codemirror/search": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.0.tgz",
+            "integrity": "sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA==",
+            "dependencies": {
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "crelt": "^1.0.5"
+            }
+        },
+        "node_modules/@codemirror/state": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
+            "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
+        },
+        "node_modules/@codemirror/stream-parser": {
+            "version": "0.19.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/stream-parser/-/stream-parser-0.19.9.tgz",
+            "integrity": "sha512-WTmkEFSRCetpk8xIOvV2yyXdZs3DgYckM0IP7eFi4ewlxWnJO/H4BeJZLs4wQaydWsAqTQoDyIwNH1BCzK5LUQ==",
+            "deprecated": "As of 0.20.0, this package has been merged into @codemirror/language",
+            "dependencies": {
+                "@codemirror/highlight": "^0.19.0",
+                "@codemirror/language": "^0.19.0",
+                "@codemirror/state": "^0.19.0",
+                "@codemirror/text": "^0.19.0",
+                "@lezer/common": "^0.15.0",
+                "@lezer/lr": "^0.15.0"
+            }
+        },
+        "node_modules/@codemirror/stream-parser/node_modules/@codemirror/language": {
+            "version": "0.19.10",
+            "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.10.tgz",
+            "integrity": "sha512-yA0DZ3RYn2CqAAGW62VrU8c4YxscMQn45y/I9sjBlqB1e2OTQLg4CCkMBuMSLXk4xaqjlsgazeOQWaJQOKfV8Q==",
+            "dependencies": {
+                "@codemirror/state": "^0.19.0",
+                "@codemirror/text": "^0.19.0",
+                "@codemirror/view": "^0.19.0",
+                "@lezer/common": "^0.15.5",
+                "@lezer/lr": "^0.15.0"
+            }
+        },
+        "node_modules/@codemirror/stream-parser/node_modules/@codemirror/state": {
+            "version": "0.19.9",
+            "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+            "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+            "dependencies": {
+                "@codemirror/text": "^0.19.0"
+            }
+        },
+        "node_modules/@codemirror/stream-parser/node_modules/@codemirror/view": {
+            "version": "0.19.48",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
+            "integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
+            "dependencies": {
+                "@codemirror/rangeset": "^0.19.5",
+                "@codemirror/state": "^0.19.3",
+                "@codemirror/text": "^0.19.0",
+                "style-mod": "^4.0.0",
+                "w3c-keyname": "^2.2.4"
+            }
+        },
+        "node_modules/@codemirror/stream-parser/node_modules/@lezer/common": {
+            "version": "0.15.12",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
+            "integrity": "sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig=="
+        },
+        "node_modules/@codemirror/stream-parser/node_modules/@lezer/lr": {
+            "version": "0.15.8",
+            "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.8.tgz",
+            "integrity": "sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==",
+            "dependencies": {
+                "@lezer/common": "^0.15.0"
+            }
+        },
+        "node_modules/@codemirror/text": {
+            "version": "0.19.6",
+            "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
+            "integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==",
+            "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state"
+        },
+        "node_modules/@codemirror/theme-one-dark": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+            "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0",
+                "@lezer/highlight": "^1.0.0"
+            }
+        },
+        "node_modules/@codemirror/view": {
+            "version": "6.15.3",
+            "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.15.3.tgz",
+            "integrity": "sha512-chNgR8H7Ipx7AZUt0+Kknk7BCow/ron3mHd1VZdM7hQXiI79+UlWqcxpCiexTxZQ+iSkqndk3HHAclJOcjSuog==",
+            "dependencies": {
+                "@codemirror/state": "^6.1.4",
+                "style-mod": "^4.0.0",
+                "w3c-keyname": "^2.2.4"
+            }
+        },
         "node_modules/@ctrl/tinycolor": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
@@ -2414,6 +2678,27 @@
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
             "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
         },
+        "node_modules/@lezer/common": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.3.tgz",
+            "integrity": "sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA=="
+        },
+        "node_modules/@lezer/highlight": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
+            "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+            "dependencies": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
+        "node_modules/@lezer/lr": {
+            "version": "1.3.9",
+            "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.9.tgz",
+            "integrity": "sha512-XPz6dzuTHlnsbA5M2DZgjflNQ+9Hi5Swhic0RULdp3oOs3rh6bqGZolosVqN/fQIT8uNiepzINJDnS39oweTHQ==",
+            "dependencies": {
+                "@lezer/common": "^1.0.0"
+            }
+        },
         "node_modules/@nicolo-ribaudo/semver-v6": {
             "version": "6.3.3",
             "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
@@ -2844,6 +3129,97 @@
             "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
             "dev": true
         },
+        "node_modules/@uiw/codemirror-extensions-basic-setup": {
+            "version": "4.21.7",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.7.tgz",
+            "integrity": "sha512-T5JvfGcocytnIOxTMvHxzcBn1PDAqZS1wnPblGnvOLRW0pUnXoqaOeBC+QI7h+3PGM5uCzPnzvaY+jqYwFDiZg==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/autocomplete": ">=6.0.0",
+                "@codemirror/commands": ">=6.0.0",
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/lint": ">=6.0.0",
+                "@codemirror/search": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/codemirror-theme-noctis-lilac": {
+            "version": "4.21.8",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-noctis-lilac/-/codemirror-theme-noctis-lilac-4.21.8.tgz",
+            "integrity": "sha512-PtfFQLD1MHj9HUG8fs2jjftWnT0b6Jq/Ob7YWtEh/HJaTvRiZRwShLijO6Smq5jsm0bvMBHWy9TTeBaQrHeklQ==",
+            "dependencies": {
+                "@uiw/codemirror-themes": "4.21.8"
+            }
+        },
+        "node_modules/@uiw/codemirror-theme-noctis-lilac/node_modules/@uiw/codemirror-themes": {
+            "version": "4.21.8",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.8.tgz",
+            "integrity": "sha512-0Zqi/nosFJ00pCpNgj8e3uc7hM8cdLFNfYs9ud4V6ERiQYglX83dYGnDRSH983sH07q9JxOTBuNRvFcPJdxOHQ==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/codemirror-theme-okaidia": {
+            "version": "4.21.7",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-okaidia/-/codemirror-theme-okaidia-4.21.7.tgz",
+            "integrity": "sha512-cUFHH7VzeHFB99Q1HNhfl8OVd/7oEPowIjhJbTcHJbIgsFJiHP1x1pSx9p9Vw/LodfZS5hd0ojYIlOiDOIYYPQ==",
+            "dependencies": {
+                "@uiw/codemirror-themes": "4.21.7"
+            }
+        },
+        "node_modules/@uiw/codemirror-themes": {
+            "version": "4.21.7",
+            "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.21.7.tgz",
+            "integrity": "sha512-IggpVo7R+GREBpmInhrGxYcmbcqMci/cbaBxMmjNtPILqDwlGgWNtc7F2gNQ+gfQ138l+KXtdamielrSEM1qeA==",
+            "dependencies": {
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@codemirror/language": ">=6.0.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0"
+            }
+        },
+        "node_modules/@uiw/react-codemirror": {
+            "version": "4.21.7",
+            "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.21.7.tgz",
+            "integrity": "sha512-nrWlH0PZyfew+5gj6o5vp5imJYO8jgkxjqO+tfLovo7T/6AlKJaZIlU1nAobxqKn3mSbgjSZ9GCEDybvrbF6DA==",
+            "dependencies": {
+                "@babel/runtime": "^7.18.6",
+                "@codemirror/commands": "^6.1.0",
+                "@codemirror/state": "^6.1.1",
+                "@codemirror/theme-one-dark": "^6.0.0",
+                "@uiw/codemirror-extensions-basic-setup": "4.21.7",
+                "codemirror": "^6.0.0"
+            },
+            "peerDependencies": {
+                "@babel/runtime": ">=7.11.0",
+                "@codemirror/state": ">=6.0.0",
+                "@codemirror/theme-one-dark": ">=6.0.0",
+                "@codemirror/view": ">=6.0.0",
+                "codemirror": ">=6.0.0",
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/@vitejs/plugin-react-swc": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.3.2.tgz",
@@ -3648,6 +4024,20 @@
                 "node": ">=6"
             }
         },
+        "node_modules/codemirror": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+            "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+            "dependencies": {
+                "@codemirror/autocomplete": "^6.0.0",
+                "@codemirror/commands": "^6.0.0",
+                "@codemirror/language": "^6.0.0",
+                "@codemirror/lint": "^6.0.0",
+                "@codemirror/search": "^6.0.0",
+                "@codemirror/state": "^6.0.0",
+                "@codemirror/view": "^6.0.0"
+            }
+        },
         "node_modules/color-convert": {
             "version": "1.9.3",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3801,6 +4191,11 @@
                 "url": "https://opencollective.com/core-js"
             }
         },
+        "node_modules/crelt": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+            "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7743,6 +8138,11 @@
                 "webpack": "^5.0.0"
             }
         },
+        "node_modules/style-mod": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
+            "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
+        },
         "node_modules/stylis": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
@@ -8158,6 +8558,11 @@
                 }
             }
         },
+        "node_modules/w3c-keyname": {
+            "version": "2.2.8",
+            "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+            "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/website/package.json b/website/package.json
index ad9dbf288..0e42f8de7 100644
--- a/website/package.json
+++ b/website/package.json
@@ -15,6 +15,12 @@
     "dependencies": {
         "@aleohq/wasm": "file:../wasm/pkg-parallel",
         "@ant-design/icons": "^4.4.0",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/legacy-modes": "^6.3.3",
+        "@codemirror/stream-parser": "^0.19.9",
+        "@uiw/codemirror-theme-noctis-lilac": "^4.21.8",
+        "@uiw/codemirror-theme-okaidia": "^4.21.7",
+        "@uiw/react-codemirror": "^4.21.7",
         "antd": "^5.6.4",
         "axios": "^1.1.3",
         "babel-loader": "^8.2.3",
diff --git a/website/src/App.css b/website/src/App.css
index bfba5cc62..eb1e03298 100644
--- a/website/src/App.css
+++ b/website/src/App.css
@@ -1,15 +1,3 @@
-.logo {
-    height: 32px;
-    margin: 16px;
-}
-
-.logo:before {
-    content: "Aleo SDK";
-    color: white;
-    font-size: 20px;
-    font-weight: bold;
-}
-
 /*
  * Input (disabled) - Make box appear not disabled
  *
@@ -17,10 +5,4 @@
  */
 input[type="text"]:disabled {
     cursor: text;
-}
-
-/* Copy to clipboard icon formatting */
-.ant-input-group-addon:last-child {
-    border-radius: 20px;
-    width: 42px;
-}
+}
\ No newline at end of file
diff --git a/website/src/App.jsx b/website/src/App.jsx
index 27b73e513..2a5072404 100644
--- a/website/src/App.jsx
+++ b/website/src/App.jsx
@@ -1,7 +1,7 @@
 import "./App.css";
 import { useEffect, useState } from "react";
-import { ConfigProvider, Layout, Menu, theme } from "antd";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { ConfigProvider, Layout, Menu, Switch, theme, Typography } from "antd";
+import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 
 import {
     ApiOutlined,
@@ -10,10 +10,44 @@ import {
     SwapOutlined,
     ToolOutlined,
     UserOutlined,
+    FormatPainterOutlined,
+    FireOutlined,
 } from "@ant-design/icons";
 
 const { Content, Footer, Sider } = Layout;
 
+const menuItems = [
+    {
+        label: <Link to="/account">Account</Link>,
+        key: "/account",
+        icon: <UserOutlined />,
+    },
+    {
+        label: <Link to="/record">Record</Link>,
+        key: "/record",
+        icon: <ProfileOutlined />,
+    },
+    {
+        label: <Link to="/rest">REST API</Link>,
+        key: "/rest",
+        icon: <ApiOutlined />,
+    },
+    {
+        label: <Link to="/advanced">Advanced</Link>,
+        key: "/advanced",
+        icon: <ToolOutlined />,
+    },
+    {
+        label: <Link to="/develop">Develop</Link>,
+        key: "/develop",
+        icon: <CodeOutlined />,
+    },
+    {
+        label: <Link to="/transfer">Transfer</Link>,
+        key: "transfer",
+        icon: <SwapOutlined />,
+    },
+];
 function App() {
     const [menuIndex, setMenuIndex] = useState("account");
 
@@ -30,43 +64,14 @@ function App() {
         }
     }, [location, navigate]);
 
-    const menuItems = [
-        {
-            label: "Account",
-            key: "/account",
-            icon: <UserOutlined />,
-        },
-        {
-            label: "Record",
-            key: "/record",
-            icon: <ProfileOutlined />,
-        },
-        {
-            label: "REST API",
-            key: "/rest",
-            icon: <ApiOutlined />,
-        },
-        {
-            label: "Advanced",
-            key: "/advanced",
-            icon: <ToolOutlined />,
-        },
-        {
-            label: "Develop",
-            key: "/develop",
-            icon: <CodeOutlined />,
-        },
-        {
-            label: "Transfer",
-            key: "transfer",
-            icon: <SwapOutlined />,
-        },
-    ];
+    const [darkMode, setDarkMode] = useState(true);
 
     return (
         <ConfigProvider
             theme={{
-                algorithm: theme.darkAlgorithm,
+                algorithm: darkMode
+                    ? theme.darkAlgorithm
+                    : theme.defaultAlgorithm,
                 token: {
                     colorPrimary: "#18e48f",
                 },
@@ -74,13 +79,34 @@ function App() {
         >
             <Layout style={{ minHeight: "100vh" }}>
                 <Sider breakpoint="lg" collapsedWidth="0" theme="light">
-                    <div alt="Aleo SDK Logo" className="logo"></div>
+                    <Typography.Title
+                        level={4}
+                        alt="Aleo SDK Logo"
+                        style={{
+                            margin: "16px",
+                            fontWeight: "bold",
+                            whiteSpace: "nowrap",
+                        }}
+                    >
+                        Aleo SDK
+                    </Typography.Title>
                     <Menu
+                        theme="light"
                         mode="inline"
                         selectedKeys={[menuIndex]}
                         items={menuItems}
                         onClick={onClick}
                     />
+                    <Switch
+                        style={{
+                            marginTop: "24px",
+                            marginLeft: "24px",
+                        }}
+                        checked={darkMode}
+                        onChange={(value) => setDarkMode(value)}
+                        checkedChildren="Dark"
+                        unCheckedChildren="Light"
+                    />
                 </Sider>
                 <Layout>
                     <Content style={{ padding: "50px 50px" }}>
diff --git a/website/src/routing.jsx b/website/src/routing.jsx
index 17a7f3e8e..e03e19ca1 100644
--- a/website/src/routing.jsx
+++ b/website/src/routing.jsx
@@ -14,11 +14,12 @@ import { GetProgram } from "./tabs/rest/GetProgram.jsx";
 import { GetTransaction } from "./tabs/rest/GetTransaction.jsx";
 import { EncryptAccount } from "./tabs/advanced/EncryptAccount.jsx";
 import { DecryptAccount } from "./tabs/advanced/DecryptAccount.jsx";
-import { Execute } from "./tabs/develop/Execute.jsx";
+import { ExecuteLegacy } from "./tabs/develop/ExecuteLegacy.jsx";
 import { Deploy } from "./tabs/develop/Deploy.jsx";
 import { Transfer } from "./tabs/develop/Transfer.jsx";
 import { Split } from "./tabs/develop/Split.jsx";
 import { Join } from "./tabs/develop/Join.jsx";
+import { Execute } from "./tabs/develop/execute/";
 import { GetMappingNames } from "./tabs/rest/GetMappingNames.jsx";
 import { GetMappingValue } from "./tabs/rest/GetMappingValue.jsx";
 
@@ -108,6 +109,14 @@ export const router = createBrowserRouter([
                     </>
                 ),
             },
+            {
+                path: "/execute_legacy",
+                element: (
+                    <>
+                        <ExecuteLegacy />
+                    </>
+                ),
+            },
         ],
     },
 ]);
diff --git a/website/src/tabs/develop/Execute.jsx b/website/src/tabs/develop/ExecuteLegacy.jsx
similarity index 99%
rename from website/src/tabs/develop/Execute.jsx
rename to website/src/tabs/develop/ExecuteLegacy.jsx
index 37bd6b0c4..9f0ac7e3e 100644
--- a/website/src/tabs/develop/Execute.jsx
+++ b/website/src/tabs/develop/ExecuteLegacy.jsx
@@ -19,7 +19,7 @@ import init, * as aleo from "@aleohq/wasm";
 
 await init();
 
-export const Execute = () => {
+export const ExecuteLegacy = () => {
     const [executionFeeRecord, setExecutionFeeRecord] = useState(null);
     const [executeUrl, setExecuteUrl] = useState("https://vm.aleo.org/api");
     const [functionID, setFunctionID] = useState(null);
@@ -211,7 +211,9 @@ export const Execute = () => {
         setProgramResponse(null);
         setTransactionID(null);
         setExecutionError(null);
-        messageApi.info("Disclaimer: Fee estimation is experimental and may not represent a correct estimate on any current or future network");
+        messageApi.info(
+            "Disclaimer: Fee estimation is experimental and may not represent a correct estimate on any current or future network",
+        );
         setTip("Estimating Execution Fee...");
         let functionInputs = [];
         try {
diff --git a/website/src/tabs/develop/execute/CodeEditor.jsx b/website/src/tabs/develop/execute/CodeEditor.jsx
new file mode 100644
index 000000000..d815d3ba8
--- /dev/null
+++ b/website/src/tabs/develop/execute/CodeEditor.jsx
@@ -0,0 +1,84 @@
+import CodeMirror from "@uiw/react-codemirror";
+import { okaidia } from "@uiw/codemirror-theme-okaidia";
+import { noctisLilac } from "@uiw/codemirror-theme-noctis-lilac";
+import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
+import { StreamLanguage } from "@codemirror/language";
+import { theme } from "antd";
+import { useState } from "react";
+
+const aleoSyntaxHighlight = {
+    start: [
+        {
+            regex: /(?:^|\s)(function|program|as|by|interface|closure|into|import)(?:$|\s)/,
+            token: "keyword",
+        },
+        {
+            regex: /(?:^|\s)(finalize|mapping)(?:$|\s)/,
+            token: "atom",
+        },
+        {
+            regex: /(?:^|\s)(abs.w|abs|add.w|add|and|assert|assert.eq|assert.neq|block.height|branch.eq|branch.neq|call|cast|cast.loosy|commit.bhp256|commit.bhp512|commit.bhp768|commit.bhp1024|commit.ped64|commit.ped128|div.w|div|double|gt|gte|hash.bhp256|hash.bhp512|hash.bhp768|hash.bhp1024|hash.ped64|hash.ped128|hash.psd2|hash.psd4|hash.psd8|inv|input|is.eq|is.neq|lt|lte|key|mod|mul.w|mul|nand|neg|nor|not|or|output|position|pow.w|pow|rand.chacha|rem.w|rem|shl.w|shl|shr.w|srh|sqrt|sub.w|sub|square|ternary|value|xor|get.or_use|get|set|contains|remove)(?:$|\s)/,
+            token: "property",
+        },
+        {
+            regex: /(?:field|group|address|scalar|u8|u16|u32|u64|u128|i8|i16|i32|i64|i128)\b/,
+            token: "number",
+        },
+        {
+            regex: /\.(constant|public|private|record|aleo)\b/,
+            token: "type",
+        },
+        {
+            regex: /(?:^|\s)(record)(?:$|\s)/,
+            token: "type",
+        },
+        {
+            regex: /\b([0-9]+)([ui](8|16|32|64|128))?\b/,
+            token: "number",
+        },
+        {
+            regex: /[cr][0-9]+/,
+            token: "variable",
+        },
+    ],
+};
+
+export function CodeEditor({ value, onChange }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const { token } = theme.useToken();
+
+    return (
+        <section
+            style={{
+                overflow: "auto",
+                borderRadius: token.borderRadius,
+                height: "300px",
+                outline: isFocused
+                    ? `1px solid ${token.colorPrimaryHover}`
+                    : "none",
+                boxShadow: isFocused
+                    ? `0 0 0 ${token.controlOutlineWidth + 1}px ${
+                          token.controlOutline
+                      }`
+                    : "none",
+            }}
+        >
+            <CodeMirror
+                style={{
+                    overflow: "auto",
+                    borderRadius: token.borderRadius,
+                }}
+                value={value}
+                extensions={[
+                    StreamLanguage.define(simpleMode(aleoSyntaxHighlight)),
+                ]}
+                theme={token.colorBgBase === "#000" ? okaidia : noctisLilac}
+                onChange={onChange}
+                height="300px"
+                option={{ indentUnit: 4 }}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+            />
+        </section>
+    );
+}
diff --git a/website/src/tabs/develop/execute/LoadProgram.jsx b/website/src/tabs/develop/execute/LoadProgram.jsx
new file mode 100644
index 000000000..52e20c778
--- /dev/null
+++ b/website/src/tabs/develop/execute/LoadProgram.jsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Form, Input } from "antd";
+import axios from "axios";
+
+export const LoadProgram = ({ onResponse }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const form = Form.useFormInstance();
+
+    const onProgramSearch = (value) => {
+        if (!value || value.trim() === "") {
+            setError("Please input a program");
+            return;
+        }
+
+        if (!value.endsWith(".aleo") && !value.includes(".")) {
+            value += ".aleo";
+            form.setFieldsValue({
+                program_id: value,
+            });
+        }
+
+        setIsLoading(true);
+        const url = `https://vm.aleo.org/api/testnet3/program/${value}`;
+
+        axios
+            .get(url)
+            .then((response) => {
+                setIsLoading(false);
+                setError(null);
+                onResponse(response.data);
+            })
+            .catch((error) => {
+                setIsLoading(false);
+                setError(error.response?.data || error.message);
+                onResponse("");
+            });
+    };
+
+    return (
+        <Form.Item
+            label="Load Program"
+            name="program_id"
+            tooltip="Optionally load program from REST API"
+            help={error || ""}
+            validateStatus={error ? "warning" : ""}
+        >
+            <Input.Search
+                placeholder="Program ID"
+                onSearch={onProgramSearch}
+                disabled={isLoading}
+                loading={isLoading}
+            />
+        </Form.Item>
+    );
+};
diff --git a/website/src/tabs/develop/execute/index.jsx b/website/src/tabs/develop/execute/index.jsx
new file mode 100644
index 000000000..61369509c
--- /dev/null
+++ b/website/src/tabs/develop/execute/index.jsx
@@ -0,0 +1,537 @@
+import {
+    Alert,
+    Button,
+    Card,
+    Collapse,
+    Divider,
+    Empty,
+    Form,
+    Input,
+    Modal,
+    Result,
+    Select,
+    Skeleton,
+    Switch,
+} from "antd";
+import { LoadProgram } from "./LoadProgram.jsx";
+import { CodeEditor } from "./CodeEditor.jsx";
+import { useAleoWASM } from "../../../aleo-wasm-hook";
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+const layout = { labelCol: { span: 4 }, wrapperCol: { span: 18 } };
+
+export const Execute = () => {
+    const [form] = Form.useForm();
+    const aleoWASM = useAleoWASM();
+
+    const demoSelect = async (value) => {
+        if (value === "hello") {
+            await onLoadProgram(
+                "program hello_hello.aleo;\n" +
+                    "\n" +
+                    "function hello:\n" +
+                    "    input r0 as u32.public;\n" +
+                    "    input r1 as u32.private;\n" +
+                    "    add r0 r1 into r2;\n" +
+                    "    output r2 as u32.private;\n",
+            );
+            form.setFieldValue("manual_input", true);
+            form.setFieldValue("functionName", "hello");
+            form.setFieldValue("inputs", JSON.stringify(["5u32", "5u32"]));
+        }
+    };
+
+    const [worker, setWorker] = useState(null);
+
+    useEffect(() => {
+        if (worker === null) {
+            const spawnedWorker = spawnWorker();
+            setWorker(spawnedWorker);
+            return () => {
+                spawnedWorker.terminate();
+            };
+        }
+    }, []);
+
+    const execute = async (values) => {
+        setModalModalOpen(true);
+        setLoading(true);
+        try {
+            const {
+                program,
+                functionName,
+                inputs,
+                private_key,
+                fee,
+                fee_record,
+                peer_url,
+                execute_onchain,
+            } = values;
+
+            if (execute_onchain) {
+                await postMessagePromise(worker, {
+                    type: "ALEO_EXECUTE_PROGRAM_ON_CHAIN",
+                    remoteProgram: program,
+                    aleoFunction: functionName,
+                    inputs: JSON.parse(inputs),
+                    privateKey: private_key,
+                    fee: fee,
+                    feeRecord: fee_record,
+                    url: peer_url,
+                });
+            } else {
+                await postMessagePromise(worker, {
+                    type: "ALEO_EXECUTE_PROGRAM_LOCAL",
+                    localProgram: program,
+                    aleoFunction: functionName,
+                    inputs: JSON.parse(inputs),
+                    privateKey: private_key,
+                });
+            }
+        } catch (error) {
+            setLoading(false);
+            setModalResult({
+                status: "error",
+                title: "Function Execution Error",
+                subTitle: `Error: ${error || "Something went wrong..."}`,
+            });
+        }
+    };
+
+    function postMessagePromise(worker, message) {
+        return new Promise((resolve, reject) => {
+            worker.onmessage = (event) => {
+                resolve(event.data);
+            };
+            worker.onerror = (error) => {
+                reject(error);
+            };
+            worker.postMessage(message);
+        });
+    }
+
+    function spawnWorker() {
+        let worker = new Worker(
+            new URL("../../../workers/worker.js", import.meta.url),
+            { type: "module" },
+        );
+        worker.addEventListener("message", (ev) => {
+            if (ev.data.type == "OFFLINE_EXECUTION_COMPLETED") {
+                setLoading(false);
+                setModalResult({
+                    title: "Execution Successsful!",
+                    status: "success",
+                    subTitle: `Outputs: ${ev.data.outputs}`,
+                });
+            } else if (ev.data.type == "EXECUTION_TRANSACTION_COMPLETED") {
+                let [transaction, url] = ev.data.executeTransaction;
+                axios
+                    .post(
+                        url + "/testnet3/transaction/broadcast",
+                        transaction,
+                        {
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                        },
+                    )
+                    .then((response) => {
+                        setLoading(false);
+                        setModalResult({
+                            title: "On-Chain Execution Successsful!",
+                            status: "success",
+                            subTitle: `Transaction ID: ${response.data}`,
+                        });
+                    });
+            } else if (ev.data.type == "ERROR") {
+                setLoading(false);
+                setModalResult({
+                    status: "error",
+                    title: "Function Execution Error",
+                    subTitle: `Error: ${
+                        ev.data.errorMessage || "Something went wrong..."
+                    }`,
+                });
+            }
+        });
+        return worker;
+    }
+
+    const [functions, setFunctions] = useState([]);
+    const onLoadProgram = async (value) => {
+        if (value) {
+            form.setFieldsValue({
+                program: value,
+            });
+            await onProgramChange(value);
+        }
+    };
+    const onProgramEdit = async (value) => {
+        await onProgramChange(value);
+    };
+
+    const onProgramChange = async (value) => {
+        let processedProgram;
+        try {
+            processedProgram = await aleoWASM.Program.fromString(value);
+        } catch (e) {
+            setFunctions([]);
+            return;
+        }
+        const functionNames = processedProgram.getFunctions();
+        const functionItems = functionNames.map((func, index) => {
+            const functionInputs = processedProgram.getFunctionInputs(func);
+            return {
+                key: func,
+                label: func,
+                children: functionForm(func, functionInputs),
+            };
+        });
+        setFunctions(functionItems);
+    };
+
+    const [modalOpen, setModalModalOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [modalResult, setModalResult] = useState({
+        status: "warning",
+        subTitle: "Sorry, something went wrong.",
+    });
+    const handleOk = () => {
+        setModalModalOpen(false);
+    };
+
+    const generateKey = () => {
+        form.setFieldValue(
+            "private_key",
+            new aleoWASM.PrivateKey().to_string(),
+        );
+        form.validateFields(["private_key"]);
+    };
+
+    const [feeLoading, setFeeLoading] = useState(false);
+    const estimateFee = async () => {
+        setFeeLoading(true);
+        setModalModalOpen(true);
+        setLoading(true);
+        const { program, functionName, inputs, private_key, peer_url } =
+            form.getFieldsValue();
+        const result = await postMessagePromise(worker, {
+            type: "ALEO_ESTIMATE_EXECUTION_FEE",
+            privateKey: private_key,
+            remoteProgram: program,
+            aleoFunction: functionName,
+            inputs: JSON.parse(inputs),
+            url: peer_url,
+        });
+        setFeeLoading(false);
+        setLoading(false);
+        if (result.type === "ERROR") {
+            form.setFieldValue("fee", "");
+            setModalResult({
+                status: "error",
+                title: "Fee Estimation Error",
+                subTitle: `Error: ${
+                    result.errorMessage || "Something went wrong..."
+                }`,
+            });
+        } else {
+            form.setFieldValue("fee", result.executionFee);
+            setModalResult({
+                status: "success",
+                title: "Fee Estimation Success!",
+                subTitle: `Fee set to: ${
+                    result.executionFee || "Something went wrong..."
+                }`,
+            });
+        }
+    };
+
+    return (
+        <Card
+            title="Execute Program"
+            extra={
+                <Select
+                    placeholder="Select a demo"
+                    onChange={demoSelect}
+                    options={[
+                        {
+                            value: "hello",
+                            label: "hello_hello.aleo",
+                        },
+                    ]}
+                />
+            }
+        >
+            <Modal
+                title="Executing program..."
+                open={modalOpen}
+                onOk={handleOk}
+                confirmLoading={loading}
+                cancelButtonProps={{ style: { display: "none" } }}
+                closeIcon={false}
+                maskClosable={false}
+            >
+                {loading ? <Skeleton active /> : <Result {...modalResult} />}
+            </Modal>
+            <Form.Provider
+                onFormFinish={(name, info) => {
+                    if (name !== "execute") {
+                        form.setFieldValue("functionName", name);
+                        let translatedArray = info.values.inputs.map((item) => {
+                            return JSON.stringify(item).replaceAll('"', "");
+                        });
+                        form.setFieldValue(
+                            "inputs",
+                            JSON.stringify(translatedArray),
+                        );
+                        form.submit();
+                    }
+                }}
+            >
+                <Form
+                    form={form}
+                    name="execute"
+                    {...layout}
+                    onFinish={execute}
+                    autoComplete="off"
+                    scrollToFirstError="true"
+                >
+                    <LoadProgram onResponse={onLoadProgram} />
+                    <Form.Item
+                        label="Program"
+                        name="program"
+                        rules={[
+                            {
+                                required: true,
+                                message: "Please input or load an Aleo program",
+                            },
+                        ]}
+                    >
+                        <CodeEditor onChange={onProgramEdit} />
+                    </Form.Item>
+                    <Divider dashed />
+                    <Form.Item
+                        label="Private Key"
+                        name="private_key"
+                        rules={[
+                            {
+                                required: true,
+                                message: "Private key required",
+                            },
+                        ]}
+                    >
+                        <Input.Search
+                            enterButton="Generate Random Key"
+                            onSearch={generateKey}
+                        />
+                    </Form.Item>
+                    <Divider dashed />
+                    <Form.Item
+                        label="Execute On-Chain"
+                        name="execute_onchain"
+                        valuePropName="checked"
+                        initialValue={false}
+                    >
+                        <Switch />
+                    </Form.Item>
+                    <Form.Item
+                        noStyle
+                        shouldUpdate={(prevValues, currentValues) =>
+                            prevValues.execute_onchain !==
+                            currentValues.execute_onchain
+                        }
+                    >
+                        {({ getFieldValue }) => (
+                            <>
+                                <Form.Item
+                                    label="Peer URL"
+                                    name="peer_url"
+                                    initialValue="https://vm.aleo.org/api"
+                                    hidden={!getFieldValue("execute_onchain")}
+                                >
+                                    <Input />
+                                </Form.Item>
+                                <Form.Item
+                                    label="Fee"
+                                    name="fee"
+                                    hidden={!getFieldValue("execute_onchain")}
+                                    tooltip="Fee estimation is experimental and may not represent a correct estimate on any current or future network"
+                                    rules={[
+                                        {
+                                            required:
+                                                getFieldValue(
+                                                    "execute_onchain",
+                                                ),
+                                            message:
+                                                "Fee needed for on-chain execution",
+                                        },
+                                    ]}
+                                >
+                                    <Input.Search
+                                        enterButton="Estimate Fee"
+                                        onSearch={estimateFee}
+                                        loading={feeLoading}
+                                    />
+                                </Form.Item>
+                                <Form.Item
+                                    label="Fee Record"
+                                    name="fee_record"
+                                    hidden={!getFieldValue("execute_onchain")}
+                                    rules={[
+                                        {
+                                            required:
+                                                getFieldValue(
+                                                    "execute_onchain",
+                                                ),
+                                            message:
+                                                "Fee record needed for on-chain execution",
+                                        },
+                                    ]}
+                                >
+                                    <Input.TextArea />
+                                </Form.Item>
+                            </>
+                        )}
+                    </Form.Item>
+                    <Divider dashed />
+                    <Form.Item
+                        label="Manual Input"
+                        name="manual_input"
+                        valuePropName="checked"
+                        initialValue={false}
+                    >
+                        <Switch />
+                    </Form.Item>
+                    <Form.Item
+                        noStyle
+                        shouldUpdate={(prevValues, currentValues) =>
+                            prevValues.manual_input !==
+                            currentValues.manual_input
+                        }
+                    >
+                        {({ getFieldValue }) => (
+                            <>
+                                <Form.Item
+                                    label="Function"
+                                    name="functionName"
+                                    hidden={!getFieldValue("manual_input")}
+                                >
+                                    <Input />
+                                </Form.Item>
+                                <Form.Item
+                                    label="Inputs"
+                                    name="inputs"
+                                    hidden={!getFieldValue("manual_input")}
+                                >
+                                    <Input.TextArea />
+                                </Form.Item>
+                                <Form.Item
+                                    wrapperCol={{
+                                        xs: {
+                                            offset: 0,
+                                        },
+                                        sm: {
+                                            offset: 4,
+                                        },
+                                    }}
+                                    hidden={!getFieldValue("manual_input")}
+                                >
+                                    <Button type="primary" htmlType="submit">
+                                        Run
+                                    </Button>
+                                </Form.Item>
+                            </>
+                        )}
+                    </Form.Item>
+                </Form>
+                <Divider dashed>Program Functions</Divider>
+                {functions.length > 0 ? (
+                    <Collapse bordered={false} items={functions} />
+                ) : (
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                )}
+            </Form.Provider>
+        </Card>
+    );
+};
+
+const renderInput = (input, inputIndex, nameArray = []) => {
+    if (input.members) {
+        const members = input.members;
+        return (
+            <div key={inputIndex}>
+                <Divider orientation="left" dashed plain>
+                    {input.struct_id} {input.name || input.register}:
+                </Divider>
+                {members.map((member, memberIndex) =>
+                    renderInput(
+                        member,
+                        memberIndex,
+                        [].concat(nameArray).concat(input.name || inputIndex),
+                    ),
+                )}
+            </div>
+        );
+    } else {
+        return (
+            <Form.Item
+                key={inputIndex}
+                label={input.name ? input.name : input.register}
+                name={[].concat(nameArray).concat(input.name || inputIndex)}
+                rules={[{ required: true, message: "Please input a value" }]}
+            >
+                <Input placeholder={`${input.type}`} />
+            </Form.Item>
+        );
+    }
+};
+
+const functionForm = (func, funcInputs) => {
+    return (
+        <Form
+            name={func}
+            autoComplete="off"
+            scrollToFirstError="true"
+            {...layout}
+        >
+            {funcInputs.length > 0 ? (
+                funcInputs.map((input, inputIndex) =>
+                    renderInput(input, inputIndex, ["inputs"]),
+                )
+            ) : (
+                <Form.Item
+                    wrapperCol={{
+                        xs: {
+                            offset: 0,
+                        },
+                        sm: {
+                            offset: 4,
+                            span: 18,
+                        },
+                    }}
+                >
+                    <Alert
+                        message={`The \`${func}\` function does not take any inputs.`}
+                        type="info"
+                        showIcon
+                    />
+                </Form.Item>
+            )}
+            <Form.Item
+                wrapperCol={{
+                    xs: {
+                        offset: 0,
+                    },
+                    sm: {
+                        offset: 4,
+                    },
+                }}
+            >
+                <Button type="primary" htmlType="submit">
+                    Run
+                </Button>
+            </Form.Item>
+        </Form>
+    );
+};


Test patch: