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: Account, + key: "/account", + icon: , + }, + { + label: Record, + key: "/record", + icon: , + }, + { + label: REST API, + key: "/rest", + icon: , + }, + { + label: Advanced, + key: "/advanced", + icon: , + }, + { + label: Develop, + key: "/develop", + icon: , + }, + { + label: Transfer, + key: "transfer", + icon: , + }, +]; function App() { const [menuIndex, setMenuIndex] = useState("account"); @@ -30,43 +64,14 @@ function App() { } }, [location, navigate]); - const menuItems = [ - { - label: "Account", - key: "/account", - icon: , - }, - { - label: "Record", - key: "/record", - icon: , - }, - { - label: "REST API", - key: "/rest", - icon: , - }, - { - label: "Advanced", - key: "/advanced", - icon: , - }, - { - label: "Develop", - key: "/develop", - icon: , - }, - { - label: "Transfer", - key: "transfer", - icon: , - }, - ]; + const [darkMode, setDarkMode] = useState(true); return ( -
+ + Aleo SDK + + setDarkMode(value)} + checkedChildren="Dark" + unCheckedChildren="Light" + /> 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: ( + <> + + + ), + }, ], }, ]); 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 ( +
+ setIsFocused(true)} + onBlur={() => setIsFocused(false)} + /> +
+ ); +} 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 ( + + + + ); +}; 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 ( + + } + > + + {loading ? : } + + { + 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(); + } + }} + > +
+ + + + + + + + + + + + + + prevValues.execute_onchain !== + currentValues.execute_onchain + } + > + {({ getFieldValue }) => ( + <> + + + + + )} + + + + + + + prevValues.manual_input !== + currentValues.manual_input + } + > + {({ getFieldValue }) => ( + <> + + + + + )} + + + Program Functions + {functions.length > 0 ? ( + + ) : ( + + )} +
+ + ); +}; + +const renderInput = (input, inputIndex, nameArray = []) => { + if (input.members) { + const members = input.members; + return ( +
+ + {input.struct_id} {input.name || input.register}: + + {members.map((member, memberIndex) => + renderInput( + member, + memberIndex, + [].concat(nameArray).concat(input.name || inputIndex), + ), + )} +
+ ); + } else { + return ( + + + + ); + } +}; + +const functionForm = (func, funcInputs) => { + return ( +
+ {funcInputs.length > 0 ? ( + funcInputs.map((input, inputIndex) => + renderInput(input, inputIndex, ["inputs"]), + ) + ) : ( + + + + )} + + + +
+ ); +};