forked from ProvableHQ/sdk
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Feature] generate input fields, syntax highlighting, light mode (Pro…
…vableHQ#696) * loading stash * using link for router * program form * load program abstracted * trailing return * code editor * dark mode switch * tweaks * new light code theme, auto add .aleo, flashing height fix * resizable code editor * auto .aleo refinement * conditional on-chain forms * before collapse * collapse working * refactor * nested structs and records * tweaks * kind of working, before refactor * before wasm fix * working with wasm fix * execute offline working * modal and demo * success and error execution response working * fee estimation * on-chain execution, fixing collapse key, estimate fee tweaks, on-chain rules * setting up routing, preventing popping effect for code editor * removing debugging, catching error case * Update website/src/tabs/develop/execute/CodeEditor.jsx Co-authored-by: Collin Chin <[email protected]> Signed-off-by: Brent C <[email protected]> * clarifying modal state * fixing nested serialization --------- Signed-off-by: Brent C <[email protected]> Co-authored-by: Collin Chin <[email protected]>
- Loading branch information
Showing
10 changed files
with
1,167 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,8 @@ | ||
| .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 | ||
| * | ||
| * https://www.w3schools.com/cssref/pr_class_cursor.asp | ||
| */ | ||
| input[type="text"]:disabled { | ||
| cursor: text; | ||
| } | ||
|
|
||
| /* Copy to clipboard icon formatting */ | ||
| .ant-input-group-addon:last-child { | ||
| border-radius: 20px; | ||
| width: 42px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
Oops, something went wrong.