From e564dcbdfe32f0542d42b0ba0c9043536690dd7d Mon Sep 17 00:00:00 2001 From: John Reynolds Date: Tue, 23 Jan 2024 21:10:48 -0700 Subject: [PATCH] build: implement prettier and configure lint" --- .babelrc | 8 +- .eslintrc.cjs | 4 +- .prettierignore | 4 + .prettierrc | 6 + README.md | 5 +- index.html | 2 +- package-lock.json | 17 +- package.json | 6 +- programs/datetime/README.md | 2 + programs/datetime/program.json | 8 +- programs/offchain_verifier/README.md | 2 + programs/offchain_verifier/program.json | 8 +- programs/offchain_verifier_keccak/README.md | 2 + .../offchain_verifier_keccak/program.json | 8 +- programs/offchain_verifier_sha3/README.md | 2 + programs/offchain_verifier_sha3/program.json | 8 +- programs/onchain_issuer/README.md | 2 + programs/onchain_issuer/program.json | 8 +- programs/onchain_issuer_keccak/README.md | 2 + programs/onchain_issuer_keccak/program.json | 8 +- programs/onchain_issuer_sha3/README.md | 2 + programs/onchain_issuer_sha3/program.json | 8 +- programs/onchain_verifier/README.md | 2 + programs/onchain_verifier/program.json | 8 +- src/App.jsx | 27 +- src/components/AccountFromPrivateKey.jsx | 14 +- src/components/CopyButton.jsx | 16 +- src/components/Issuer.jsx | 99 ++-- src/components/IssuerProgram.jsx | 2 +- src/components/NewAccount.jsx | 66 +-- src/components/execute/CodeEditor.jsx | 156 +++--- src/components/execute/LoadProgram.jsx | 104 ++-- src/components/execute/index.jsx | 274 +++++----- src/components/helpers/nationalities.js | 492 +++++++++--------- src/components/issuer/DynamicFields.jsx | 25 +- src/components/issuer/SubmitSection.jsx | 50 +- src/components/issuer/ToggleButton.jsx | 2 +- src/consts.ts | 2 +- src/contexts/account.js | 76 ++- src/contexts/global.js | 14 +- src/hooks/aleo-wasm-hook.js | 56 +- src/index.css | 21 +- src/main.jsx | 20 +- src/pages/IssuerApp.jsx | 53 +- src/routing.jsx | 30 +- src/useWebWorker.js | 6 +- src/utils/menu-helper.js | 4 +- src/workers/WorkerContext.js | 2 +- src/workers/WorkerProvider.jsx | 13 +- src/workers/keys.js | 56 +- src/workers/worker.js | 242 +++++---- vite.config.js | 22 +- webpack.config.js | 46 +- 53 files changed, 1155 insertions(+), 967 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.babelrc b/.babelrc index cf5ee0a..08d007e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,6 @@ { - "presets": [ - "@babel/preset-env", - ["@babel/preset-react", { "runtime": "automatic" }] - ] + "presets": [ + "@babel/preset-env", + ["@babel/preset-react", { "runtime": "automatic" }] + ] } diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 03457ed..a3ac41b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -12,10 +12,10 @@ module.exports = { settings: { react: { version: '18.2' } }, plugins: ['react-refresh'], rules: { - "react-hooks/exhaustive-deps": "off", + 'react-hooks/exhaustive-deps': 'off', 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, -} +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..df09b5b --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +.npm +dist +node_modules +pkg \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0a72520 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true +} diff --git a/README.md b/README.md index 23d679a..d5af0a0 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ - Download from [Node.js official website](https://nodejs.org/en/download/) 2. **Rust (rustc 1.71.1 & cargo 1.71.1)** + - Install using the following command: ```bash curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh @@ -23,11 +24,13 @@ ### Setup Steps 1. **Install Node Modules** + ```bash npm i ``` 2. **Build wasm Package** + ```bash cd issuer wasm-pack build --target bundler @@ -39,4 +42,4 @@ npm run dev ``` -Enjoy using **zPass Tools**! \ No newline at end of file +Enjoy using **zPass Tools**! diff --git a/index.html b/index.html index 06795ca..99426e9 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ display: inline-block; position: absolute; top: 0; - background-color: #00C0F9; + background-color: #00c0f9; border-radius: 100%; -webkit-animation: sk-bounce 2s infinite ease-in-out; diff --git a/package-lock.json b/package-lock.json index f0d5375..d2c1389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "": { "name": "zpass-app", "version": "0.1.0", - "license": "MIT", + "license": "Apache-2.0", "dependencies": { "@aleohq/sdk": "^0.6.5", "@ant-design/icons": "^4.4.0", @@ -21,6 +21,7 @@ "axios": "^1.5.0", "constate": "^3.3.2", "moment": "^2.29.4", + "prettier": "^3.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.10.1", @@ -12597,6 +12598,20 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz", + "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-error": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz", diff --git a/package.json b/package.json index 5f92868..d2f65d6 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,15 @@ "private": true, "version": "0.1.0", "type": "module", - "license": "MIT", + "license": "Apache-2.0", "scripts": { "dev": "vite", "dev:webpack": "webpack-dev-server", "build": "webpack --config webpack.config.js", "build:vite": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" + "preview": "vite preview", + "prettier": "prettier --write ." }, "dependencies": { "@aleohq/sdk": "^0.6.5", @@ -25,6 +26,7 @@ "axios": "^1.5.0", "constate": "^3.3.2", "moment": "^2.29.4", + "prettier": "^3.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.10.1", diff --git a/programs/datetime/README.md b/programs/datetime/README.md index 3d0c65a..51965c9 100644 --- a/programs/datetime/README.md +++ b/programs/datetime/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/datetime/program.json b/programs/datetime/program.json index 197dab9..ac6cc39 100644 --- a/programs/datetime/program.json +++ b/programs/datetime/program.json @@ -1,6 +1,6 @@ { - "program": "datetime.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "datetime.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/offchain_verifier/README.md b/programs/offchain_verifier/README.md index 12300bf..48dc4c8 100644 --- a/programs/offchain_verifier/README.md +++ b/programs/offchain_verifier/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/offchain_verifier/program.json b/programs/offchain_verifier/program.json index 665c2d8..f851bc8 100644 --- a/programs/offchain_verifier/program.json +++ b/programs/offchain_verifier/program.json @@ -1,6 +1,6 @@ { - "program": "offchain_verifier.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "offchain_verifier.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/offchain_verifier_keccak/README.md b/programs/offchain_verifier_keccak/README.md index 9e23fc1..406392d 100644 --- a/programs/offchain_verifier_keccak/README.md +++ b/programs/offchain_verifier_keccak/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/offchain_verifier_keccak/program.json b/programs/offchain_verifier_keccak/program.json index ac609bb..1c8b204 100644 --- a/programs/offchain_verifier_keccak/program.json +++ b/programs/offchain_verifier_keccak/program.json @@ -1,6 +1,6 @@ { - "program": "offchain_verifier_keccak.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "offchain_verifier_keccak.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/offchain_verifier_sha3/README.md b/programs/offchain_verifier_sha3/README.md index d022f8b..556c94e 100644 --- a/programs/offchain_verifier_sha3/README.md +++ b/programs/offchain_verifier_sha3/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/offchain_verifier_sha3/program.json b/programs/offchain_verifier_sha3/program.json index d4bea54..cb5964d 100644 --- a/programs/offchain_verifier_sha3/program.json +++ b/programs/offchain_verifier_sha3/program.json @@ -1,6 +1,6 @@ { - "program": "offchain_verifier_sha3.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "offchain_verifier_sha3.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/onchain_issuer/README.md b/programs/onchain_issuer/README.md index 58f5b6e..e3929af 100644 --- a/programs/onchain_issuer/README.md +++ b/programs/onchain_issuer/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/onchain_issuer/program.json b/programs/onchain_issuer/program.json index cdc9414..3aea394 100644 --- a/programs/onchain_issuer/program.json +++ b/programs/onchain_issuer/program.json @@ -1,6 +1,6 @@ { - "program": "onchain_issuer.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "onchain_issuer.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/onchain_issuer_keccak/README.md b/programs/onchain_issuer_keccak/README.md index 3535fae..bdcc6e3 100644 --- a/programs/onchain_issuer_keccak/README.md +++ b/programs/onchain_issuer_keccak/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/onchain_issuer_keccak/program.json b/programs/onchain_issuer_keccak/program.json index cfb975c..04a3704 100644 --- a/programs/onchain_issuer_keccak/program.json +++ b/programs/onchain_issuer_keccak/program.json @@ -1,6 +1,6 @@ { - "program": "onchain_issuer_keccak.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "onchain_issuer_keccak.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/onchain_issuer_sha3/README.md b/programs/onchain_issuer_sha3/README.md index 4eb3c22..3f94562 100644 --- a/programs/onchain_issuer_sha3/README.md +++ b/programs/onchain_issuer_sha3/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/onchain_issuer_sha3/program.json b/programs/onchain_issuer_sha3/program.json index 55cb307..d1b8f82 100644 --- a/programs/onchain_issuer_sha3/program.json +++ b/programs/onchain_issuer_sha3/program.json @@ -1,6 +1,6 @@ { - "program": "onchain_issuer_sha3.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "onchain_issuer_sha3.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/programs/onchain_verifier/README.md b/programs/onchain_verifier/README.md index 61dfe31..40372d8 100644 --- a/programs/onchain_verifier/README.md +++ b/programs/onchain_verifier/README.md @@ -3,11 +3,13 @@ ## Build Guide To compile this Aleo program, run: + ```bash snarkvm build ``` To execute this Aleo program, run: + ```bash snarkvm run hello ``` diff --git a/programs/onchain_verifier/program.json b/programs/onchain_verifier/program.json index b6da462..c4346e0 100644 --- a/programs/onchain_verifier/program.json +++ b/programs/onchain_verifier/program.json @@ -1,6 +1,6 @@ { - "program": "onchain_verifier.aleo", - "version": "0.0.0", - "description": "", - "license": "MIT" + "program": "onchain_verifier.aleo", + "version": "0.0.0", + "description": "", + "license": "MIT" } diff --git a/src/App.jsx b/src/App.jsx index 1a2aa9d..d6b91b3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,4 @@ -import React, { useState } from 'react'; -import { ConfigProvider, Layout as AntLayout, Switch, theme } from 'antd'; +import { ConfigProvider, Layout as AntLayout, theme } from 'antd'; import IssuerApp from './pages/IssuerApp'; import { Outlet } from 'react-router-dom'; @@ -10,29 +9,37 @@ const commonContentStyle = { const App = () => { const { Header, Content, Footer, Sider } = AntLayout; - const [darkMode, setDarkMode] = useState(false); return (
- zPass
- + diff --git a/src/components/AccountFromPrivateKey.jsx b/src/components/AccountFromPrivateKey.jsx index 28be1ab..e7d60d9 100644 --- a/src/components/AccountFromPrivateKey.jsx +++ b/src/components/AccountFromPrivateKey.jsx @@ -1,5 +1,5 @@ -import { Form, Input, Row, Col, Button, Space } from "antd"; -import { useAccountProvider } from "../contexts/account"; +import { Form, Input, Row, Col, Button, Space } from 'antd'; +import { useAccountProvider } from '../contexts/account'; import '../index.css'; export const AccountFromPrivateKey = () => { @@ -16,14 +16,12 @@ export const AccountFromPrivateKey = () => { !account && ( - - Load Account from Private Key - + Load Account from Private Key
- { const [copySuccess, setCopySuccess] = useState(false); @@ -10,7 +10,7 @@ export const CopyButton = (props) => { copyToClipboard(props.data); setCopySuccess(true); setTimeout(() => setCopySuccess(false), 2000); // Switch back to `copy` icon after 2 seconds. - } + }; if (!props.data) { return ; @@ -21,7 +21,7 @@ export const CopyButton = (props) => { } else { return ; } -} +}; CopyButton.propTypes = { - data: PropTypes.any, // Adjust to more specific type if possible -}; \ No newline at end of file + data: PropTypes.any, // Adjust to more specific type if possible +}; diff --git a/src/components/Issuer.jsx b/src/components/Issuer.jsx index 9070fee..44ce923 100644 --- a/src/components/Issuer.jsx +++ b/src/components/Issuer.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { AutoComplete, DatePicker, Divider, Form, Input, Select } from 'antd'; import moment from 'moment'; import * as wasm from '../../issuer/pkg/issuer'; @@ -8,14 +8,30 @@ import { SubmitSection } from './issuer/SubmitSection'; import { NewAccount } from './NewAccount'; import { AccountFromPrivateKey } from './AccountFromPrivateKey'; import { CopyButton } from './CopyButton.jsx'; +import PropTypes from 'prop-types'; -const Issuer = ({ handleIssue, isSignatureGenerated, generatedSignature, nationalityfield, subjectfield, issuer }) => { +Issuer.propTypes = { + handleIssue: PropTypes.func.isRequired, + isSignatureGenerated: PropTypes.bool.isRequired, + generatedSignature: PropTypes.string.isRequired, + nationalityfield: PropTypes.string.isRequired, + subjectfield: PropTypes.string.isRequired, + issuer: PropTypes.string.isRequired, +}; + +const Issuer = ({ + handleIssue, + isSignatureGenerated, + generatedSignature, + nationalityfield, + subjectfield, + issuer, +}) => { const [showIssuer, setShowIssuer] = useState(true); const [form] = Form.useForm(); - useEffect(()=>{ - if(!isSignatureGenerated) form.resetFields(); - }, [form, generatedSignature, isSignatureGenerated]) - + useEffect(() => { + if (!isSignatureGenerated) form.resetFields(); + }, [form, generatedSignature, isSignatureGenerated]); const onFinish = (values) => { handleIssue(values); @@ -30,12 +46,14 @@ const Issuer = ({ handleIssue, isSignatureGenerated, generatedSignature, nationa .map((key) => ({ value: wasm.HashAlgorithm[key], label: key, - })); - + })); return ( <> - + {showIssuer && ( <> @@ -55,9 +73,7 @@ const Issuer = ({ handleIssue, isSignatureGenerated, generatedSignature, nationa label="Hash type" name="hash_type" className="account-label-width" - rules={[ - { required: true, message: 'Missing hash type' } - ]} + rules={[{ required: true, message: 'Missing hash type' }]} > } - disabled={isSignatureGenerated} - placeholder="Enter a subject (e.g., 'address')" + } + disabled={isSignatureGenerated} + placeholder="Enter a subject (e.g., 'address')" /> @@ -96,27 +115,33 @@ const Issuer = ({ handleIssue, isSignatureGenerated, generatedSignature, nationa format="YYYY-MM-DD" disabled={isSignatureGenerated} placeholder="Select DOB (e.g., YYYY-MM-DD)" - disabledDate={(current) => current && current > moment().endOf('day')} + disabledDate={(current) => + current && current > moment().endOf('day') + } /> + - - } - /> - - + + } + /> + + current && current < moment().endOf('day')} + disabledDate={(current) => + current && current < moment().endOf('day') + } /> - + - - ); }; diff --git a/src/components/IssuerProgram.jsx b/src/components/IssuerProgram.jsx index 5cd93ca..eecade6 100644 --- a/src/components/IssuerProgram.jsx +++ b/src/components/IssuerProgram.jsx @@ -131,4 +131,4 @@ // // }; // -// export default IssuerProgram; \ No newline at end of file +// export default IssuerProgram; diff --git a/src/components/NewAccount.jsx b/src/components/NewAccount.jsx index da63572..493e062 100644 --- a/src/components/NewAccount.jsx +++ b/src/components/NewAccount.jsx @@ -1,7 +1,6 @@ -import React from 'react'; -import { Row, Col, Button, Form, Input, Divider, Spin, Space } from "antd"; -import { useAccountProvider } from "../contexts/account"; -import {CopyButton} from "./CopyButton.jsx"; +import { Row, Col, Button, Form, Input, Divider, Spin, Space } from 'antd'; +import { useAccountProvider } from '../contexts/account'; +import { CopyButton } from './CopyButton.jsx'; // Ant Design layout configuration for form const layout = { @@ -14,10 +13,9 @@ export const NewAccount = () => { const { account, clear, isLoading } = useAccountProvider(); // Prepare account-related strings - const privateKey = account ? account.privateKey().to_string() : ""; - const viewKey = account ? account.viewKey().to_string() : ""; - const address = account ? account.address().to_string() : ""; - + const privateKey = account ? account.privateKey().to_string() : ''; + const viewKey = account ? account.viewKey().to_string() : ''; + const address = account ? account.address().to_string() : ''; // Render loading spinner or account information return ( @@ -28,17 +26,35 @@ export const NewAccount = () => { ) : ( <> - {account && ( + {account && (
Issuer Account Information - } disabled/> + } + disabled + /> - } disabled/> + } + disabled + /> - } disabled/> + } + disabled + /> @@ -46,26 +62,18 @@ export const NewAccount = () => { {/* Generate and Clear Buttons */} - { - account ? - - - - - - - : null - } + {account ? ( + + + + + + ) : null} {/* Display account information if available */} - )} diff --git a/src/components/execute/CodeEditor.jsx b/src/components/execute/CodeEditor.jsx index c541d93..e83ac27 100644 --- a/src/components/execute/CodeEditor.jsx +++ b/src/components/execute/CodeEditor.jsx @@ -1,89 +1,87 @@ -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"; -import PropTypes from "prop-types"; +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'; +import PropTypes from 'prop-types'; 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", - }, - ], + 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(); + const [isFocused, setIsFocused] = useState(false); + const { token } = theme.useToken(); - return ( -
- setIsFocused(true)} - onBlur={() => setIsFocused(false)} - /> -
- ); + return ( +
+ setIsFocused(true)} + onBlur={() => setIsFocused(false)} + /> +
+ ); } CodeEditor.propTypes = { - value: PropTypes.string, // assuming value is a string - onChange: PropTypes.func, + value: PropTypes.string, // assuming value is a string + onChange: PropTypes.func, }; diff --git a/src/components/execute/LoadProgram.jsx b/src/components/execute/LoadProgram.jsx index 42a762c..968eeaa 100644 --- a/src/components/execute/LoadProgram.jsx +++ b/src/components/execute/LoadProgram.jsx @@ -1,63 +1,63 @@ -import { useState } from "react"; -import { Form, Input } from "antd"; -import axios from "axios"; -import PropTypes from "prop-types"; +import { useState } from 'react'; +import { Form, Input } from 'antd'; +import axios from 'axios'; +import PropTypes from 'prop-types'; export const LoadProgram = ({ onResponse, clearSelect }) => { - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(null); - const form = Form.useFormInstance(); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + const form = Form.useFormInstance(); - const onProgramSearch = (value) => { - clearSelect(); - if (!value || value.trim() === "") { - setError("Please input a program"); - return; - } + const onProgramSearch = (value) => { + clearSelect(); + if (!value || value.trim() === '') { + setError('Please input a program'); + return; + } - if (!value.endsWith(".aleo") && !value.includes(".")) { - value += ".aleo"; - form.setFieldsValue({ - program_id: value, - }); - } + if (!value.endsWith('.aleo') && !value.includes('.')) { + value += '.aleo'; + form.setFieldsValue({ + program_id: value, + }); + } - setIsLoading(true); - const url = `https://api.explorer.aleo.org/v1/testnet3/program/${value}`; + setIsLoading(true); + const url = `https://api.explorer.aleo.org/v1/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(""); - }); - }; + axios + .get(url) + .then((response) => { + setIsLoading(false); + setError(null); + onResponse(response.data); + }) + .catch((error) => { + setIsLoading(false); + setError(error.response?.data || error.message); + onResponse(''); + }); + }; - return ( - - - - ); + return ( + + + + ); }; LoadProgram.propTypes = { - onResponse: PropTypes.func.isRequired, - clearSelect: PropTypes.func.isRequired, + onResponse: PropTypes.func.isRequired, + clearSelect: PropTypes.func.isRequired, }; diff --git a/src/components/execute/index.jsx b/src/components/execute/index.jsx index 1a483ea..50de1b5 100644 --- a/src/components/execute/index.jsx +++ b/src/components/execute/index.jsx @@ -12,17 +12,18 @@ import { Select, Skeleton, Switch, -} from "antd"; -import { LoadProgram } from "./LoadProgram.jsx"; -import { CodeEditor } from "./CodeEditor.jsx"; -import { useEffect, useState } from "react"; -import { useAccountProvider } from "../../contexts/account"; -import {useAleoWASM} from "../../hooks/aleo-wasm-hook"; +} from 'antd'; +import { LoadProgram } from './LoadProgram.jsx'; +import { CodeEditor } from './CodeEditor.jsx'; +import { useEffect, useState } from 'react'; +import { useAccountProvider } from '../../contexts/account'; +import { useAleoWASM } from '../../hooks/aleo-wasm-hook'; import { SIGVERIFY_PROGRAM_KECCAK_256, - SIGVERIFY_PROGRAM_SHA3_256, SIGVERIFY_PROGRAM -} from "../../consts.ts"; -import {useGlobalProvider} from "../../contexts/global.js"; + SIGVERIFY_PROGRAM_SHA3_256, + SIGVERIFY_PROGRAM, +} from '../../consts.ts'; +import { useGlobalProvider } from '../../contexts/global.js'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 18 } }; @@ -36,17 +37,17 @@ export const Execute = () => { const [privateFee, setPrivateFee] = useState(false); const [selectValue, setSelectValue] = useState(null); useEffect(() => { - if(selectValue) onLoadProgram(''); - if(selectValue) setFunctions([]); - if(selectValue) demoSelect(); - if(selectValue) setSelectValue(); - form.setFieldValue("privateKey", global.privateKey); + if (selectValue) onLoadProgram(''); + if (selectValue) setFunctions([]); + if (selectValue) demoSelect(); + if (selectValue) setSelectValue(); + form.setFieldValue('privateKey', global.privateKey); }, [global]); const PROGRAM_MAP = { - "offchain_verifier": SIGVERIFY_PROGRAM, - "offchain_verifier_keccak256": SIGVERIFY_PROGRAM_KECCAK_256, - "offchain_verifier_sha3_256": SIGVERIFY_PROGRAM_SHA3_256, + offchain_verifier: SIGVERIFY_PROGRAM, + offchain_verifier_keccak256: SIGVERIFY_PROGRAM_KECCAK_256, + offchain_verifier_sha3_256: SIGVERIFY_PROGRAM_SHA3_256, }; const demoSelect = async (value) => { @@ -55,20 +56,18 @@ export const Execute = () => { if (program) { await onLoadProgram(program); - form.setFieldValue("manual_input", false); - form.setFieldValue("functionName", "verify"); + form.setFieldValue('manual_input', false); + form.setFieldValue('functionName', 'verify'); } else { await onLoadProgram(''); } - if(value) setSelectValue(value); - + if (value) setSelectValue(value); } catch (error) { - console.error("Error in demoSelect:", error); + console.error('Error in demoSelect:', error); } }; - const [worker, setWorker] = useState(null); useEffect(() => { if (worker === null) { @@ -92,27 +91,29 @@ export const Execute = () => { fee_record, peer_url, execute_onchain, - privateKey + privateKey, } = values; const payload = { aleoFunction: functionName, inputs: JSON.parse(inputs), - privateKey: execute_onchain ? privateKey : account.privateKey().to_string() + privateKey: execute_onchain + ? privateKey + : account.privateKey().to_string(), }; if (execute_onchain) { Object.assign(payload, { - type: "ALEO_EXECUTE_PROGRAM_ON_CHAIN", + type: 'ALEO_EXECUTE_PROGRAM_ON_CHAIN', remoteProgram: program, fee, feeRecord: fee_record, - url: peer_url + url: peer_url, }); } else { Object.assign(payload, { - type: "ALEO_EXECUTE_PROGRAM_LOCAL", - localProgram: program + type: 'ALEO_EXECUTE_PROGRAM_LOCAL', + localProgram: program, }); } @@ -121,14 +122,13 @@ export const Execute = () => { } catch (error) { setLoading(false); setModalResult({ - status: "error", - title: "Function Execution Error", - subTitle: `Error: ${error || "Something went wrong..."}`, + status: 'error', + title: 'Function Execution Error', + subTitle: `Error: ${error || 'Something went wrong...'}`, }); } }; - function postMessagePromise(worker, message) { return new Promise((resolve, reject) => { worker.onmessage = (event) => { @@ -143,31 +143,32 @@ export const Execute = () => { function spawnWorker() { let worker = new Worker( - new URL("../../workers/worker.js", import.meta.url), - { type: "module" }, + new URL('../../workers/worker.js', import.meta.url), + { type: 'module' } ); - worker.addEventListener("message", (ev) => { - if (ev.data.type == "OFFLINE_EXECUTION_COMPLETED") { + worker.addEventListener('message', (ev) => { + if (ev.data.type == 'OFFLINE_EXECUTION_COMPLETED') { setLoading(false); setModalResult({ - title: "Execution Successsful!", - status: "success", + title: 'Execution Successsful!', + status: 'success', subTitle: `Outputs: ${ev.data.outputs.outputs}`, }); - } else if (ev.data.type == "EXECUTION_TRANSACTION_COMPLETED") { + } else if (ev.data.type == 'EXECUTION_TRANSACTION_COMPLETED') { const transactionId = ev.data.executeTransaction; setLoading(false); setModalResult({ - title: "On-Chain Execution Successsful!", - status: "success", + title: 'On-Chain Execution Successsful!', + status: 'success', subTitle: `Transaction ID: ${transactionId}`, }); - } else if (ev.data.type == "ERROR") { + } else if (ev.data.type == 'ERROR') { setLoading(false); setModalResult({ - status: "error", - title: "Function Execution Error", - subTitle: `Error: ${ev.data.errorMessage || "Something went wrong..." + status: 'error', + title: 'Function Execution Error', + subTitle: `Error: ${ + ev.data.errorMessage || 'Something went wrong...' }`, }); } @@ -204,7 +205,6 @@ export const Execute = () => { //offchain_verifier.aleo verify const functionNames = processedProgram.getFunctions(); const functionItems = functionNames.map((func) => { - const functionInputs = processedProgram.getFunctionInputs(func); return { key: func, @@ -218,8 +218,8 @@ export const Execute = () => { const [modalOpen, setModalModalOpen] = useState(false); const [loading, setLoading] = useState(false); const [modalResult, setModalResult] = useState({ - status: "warning", - subTitle: "Sorry, something went wrong.", + status: 'warning', + subTitle: 'Sorry, something went wrong.', }); const handleOk = () => { setModalModalOpen(false); @@ -232,8 +232,15 @@ export const Execute = () => { setLoading(true); setFeeLoading(true); - const { program, functionName, inputs, peer_url, privateKey } = form.getFieldsValue(); - const requiredFields = { program, functionName, inputs, peer_url, privateKey }; + const { program, functionName, inputs, peer_url, privateKey } = + form.getFieldsValue(); + const requiredFields = { + program, + functionName, + inputs, + peer_url, + privateKey, + }; // Check if any required field is missing const missingFieldNames = Object.entries(requiredFields) @@ -241,11 +248,13 @@ export const Execute = () => { .map(([key]) => key); if (missingFieldNames.length > 0) { - throw new Error(`Missing required fields: ${missingFieldNames.join(', ')}`); + throw new Error( + `Missing required fields: ${missingFieldNames.join(', ')}` + ); } const result = await postMessagePromise(worker, { - type: "ALEO_ESTIMATE_EXECUTION_FEE", + type: 'ALEO_ESTIMATE_EXECUTION_FEE', remoteProgram: program, privateKey, aleoFunction: functionName, @@ -253,45 +262,38 @@ export const Execute = () => { url: peer_url, }); - if (result.type === "ERROR") { + if (result.type === 'ERROR') { throw new Error(result.errorMessage.toString()); } - form.resetFields(["fee"]); - form.setFieldValue("fee", result.executionFee); + form.resetFields(['fee']); + form.setFieldValue('fee', result.executionFee); setModalResult({ - status: "success", - title: "Fee Estimation Success!", - subTitle: `Fee set to: ${result.executionFee || "Something went wrong..."}`, + status: 'success', + title: 'Fee Estimation Success!', + subTitle: `Fee set to: ${result.executionFee || 'Something went wrong...'}`, }); - } catch (err) { setModalResult({ - status: "error", - title: "Fee Estimation Error", - subTitle: `Error: ${err.toString() || "Something went wrong..."}`, + status: 'error', + title: 'Fee Estimation Error', + subTitle: `Error: ${err.toString() || 'Something went wrong...'}`, }); - form.setFieldValue("fee", ""); + form.setFieldValue('fee', ''); } finally { setLoading(false); setFeeLoading(false); - } }; - return ( - + @@ -300,20 +302,16 @@ export const Execute = () => { { - if (name !== "execute") { - form.setFieldValue("functionName", name); + if (name !== 'execute') { + form.setFieldValue('functionName', name); let translatedArray = info.values.inputs.map((item) => { - return JSON.stringify(item).replaceAll('"', ""); + return JSON.stringify(item).replaceAll('"', ''); }); - form.setFieldValue( - "inputs", - JSON.stringify(translatedArray), - ); + form.setFieldValue('inputs', JSON.stringify(translatedArray)); form.submit(); } }} > -
{ placeholder="Select a demo" onChange={demoSelect} value={selectValue} - style={{"width": "250px"}} + style={{ width: '250px' }} options={[ { - value: "offchain_verifier", - label: "offchain_verifier.aleo", + value: 'offchain_verifier', + label: 'offchain_verifier.aleo', }, { - value: "offchain_verifier_sha3_256", - label: "offchain_verifier_sha3_256.aleo", + value: 'offchain_verifier_sha3_256', + label: 'offchain_verifier_sha3_256.aleo', }, { - value: "offchain_verifier_keccak256", - label: "offchain_verifier_keccak256.aleo", + value: 'offchain_verifier_keccak256', + label: 'offchain_verifier_keccak256.aleo', }, ]} /> - - setSelectValue()} onResponse={onLoadProgram} /> - + setSelectValue()} + onResponse={onLoadProgram} + /> + @@ -372,8 +374,7 @@ export const Execute = () => { - prevValues.execute_onchain !== - currentValues.execute_onchain + prevValues.execute_onchain !== currentValues.execute_onchain } > {({ getFieldValue }) => ( @@ -381,16 +382,12 @@ export const Execute = () => {