Compare commits
12 Commits
feat/json-
...
feat/user-
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0ea88f0d32 | ||
|
|
4c2e1f36f3 | ||
|
|
fa5315fc0e | ||
|
|
eda8b1550c | ||
|
|
742b11374f | ||
|
|
d16e83dcfa | ||
|
|
155aa57784 | ||
|
|
b88b6da7d9 | ||
|
|
fa13f7e282 | ||
|
|
f1a43ef758 | ||
|
|
4217813fd7 | ||
|
|
c588f7b1f3 |
@@ -1,4 +1,5 @@
|
|||||||
NEXTAUTH_URL=https://example.com
|
NEXTAUTH_URL=https://example.com
|
||||||
|
NEXTAUTH_SECRET="1234"
|
||||||
GITHUB_SECRET=""
|
GITHUB_SECRET=""
|
||||||
GITHUB_ID=""
|
GITHUB_ID=""
|
||||||
NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
|
NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
|
||||||
|
|||||||
@@ -108,3 +108,5 @@ To learn more about Next.js, take a look at the following resources:
|
|||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useSnapshot, ref } from "valtio";
|
import { useSnapshot, ref } from "valtio";
|
||||||
import Editor, { loader } from "@monaco-editor/react";
|
import Editor from "@monaco-editor/react";
|
||||||
import type monaco from "monaco-editor";
|
import type monaco from "monaco-editor";
|
||||||
import { ArrowBendLeftUp } from "phosphor-react";
|
import { ArrowBendLeftUp } from "phosphor-react";
|
||||||
import { useTheme } from "next-themes";
|
import { useTheme } from "next-themes";
|
||||||
@@ -23,12 +23,6 @@ import ReconnectingWebSocket from "reconnecting-websocket";
|
|||||||
|
|
||||||
import docs from "../xrpl-hooks-docs/docs";
|
import docs from "../xrpl-hooks-docs/docs";
|
||||||
|
|
||||||
loader.config({
|
|
||||||
paths: {
|
|
||||||
vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
|
const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
|
||||||
const currPath = editor.getModel()?.uri.path;
|
const currPath = editor.getModel()?.uri.path;
|
||||||
if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
|
if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
|
||||||
@@ -170,15 +164,21 @@ const HooksEditor = () => {
|
|||||||
onConnection: (connection) => {
|
onConnection: (connection) => {
|
||||||
// create and start the language client
|
// create and start the language client
|
||||||
const languageClient = createLanguageClient(connection);
|
const languageClient = createLanguageClient(connection);
|
||||||
const disposable = languageClient.start();
|
languageClient.start();
|
||||||
connection.onClose(() => {
|
// connection.onDispose((d) => {
|
||||||
try {
|
// console.log("disposed: ", d);
|
||||||
// disposable.stop();
|
// });
|
||||||
disposable.dispose();
|
// connection.onError((ee) => {
|
||||||
} catch (err) {
|
// console.log(ee =)
|
||||||
console.log("err", err);
|
// })
|
||||||
}
|
// connection.onClose(() => {
|
||||||
});
|
// try {
|
||||||
|
// // disposable.stop();
|
||||||
|
// disposable.dispose();
|
||||||
|
// } catch (err) {
|
||||||
|
// console.log("err", err);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
230
components/LogBoxForScripts.tsx
Normal file
230
components/LogBoxForScripts.tsx
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
import {
|
||||||
|
useRef,
|
||||||
|
useLayoutEffect,
|
||||||
|
ReactNode,
|
||||||
|
FC,
|
||||||
|
useState,
|
||||||
|
useCallback,
|
||||||
|
} from "react";
|
||||||
|
import { FileJs, Prohibit } from "phosphor-react";
|
||||||
|
import useStayScrolled from "react-stay-scrolled";
|
||||||
|
import NextLink from "next/link";
|
||||||
|
|
||||||
|
import Container from "./Container";
|
||||||
|
import LogText from "./LogText";
|
||||||
|
import state, { ILog } from "../state";
|
||||||
|
import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
|
||||||
|
import regexifyString from "regexify-string";
|
||||||
|
import { useSnapshot } from "valtio";
|
||||||
|
import { AccountDialog } from "./Accounts";
|
||||||
|
import RunScript from "./RunScript";
|
||||||
|
|
||||||
|
interface ILogBox {
|
||||||
|
title: string;
|
||||||
|
clearLog?: () => void;
|
||||||
|
logs: ILog[];
|
||||||
|
renderNav?: () => ReactNode;
|
||||||
|
enhanced?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LogBox: FC<ILogBox> = ({
|
||||||
|
title,
|
||||||
|
clearLog,
|
||||||
|
logs,
|
||||||
|
children,
|
||||||
|
renderNav,
|
||||||
|
enhanced,
|
||||||
|
}) => {
|
||||||
|
const logRef = useRef<HTMLPreElement>(null);
|
||||||
|
const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
|
||||||
|
const snap = useSnapshot(state);
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
stayScrolled();
|
||||||
|
}, [stayScrolled, logs]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
as="div"
|
||||||
|
css={{
|
||||||
|
display: "flex",
|
||||||
|
borderTop: "1px solid $mauve6",
|
||||||
|
background: "$mauve1",
|
||||||
|
position: "relative",
|
||||||
|
flex: 1,
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Container
|
||||||
|
css={{
|
||||||
|
px: 0,
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex
|
||||||
|
fluid
|
||||||
|
css={{
|
||||||
|
height: "48px",
|
||||||
|
alignItems: "center",
|
||||||
|
fontSize: "$sm",
|
||||||
|
fontWeight: 300,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
as="h3"
|
||||||
|
css={{
|
||||||
|
fontWeight: 300,
|
||||||
|
m: 0,
|
||||||
|
fontSize: "11px",
|
||||||
|
color: "$mauve12",
|
||||||
|
px: "$3",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
alignItems: "center",
|
||||||
|
display: "inline-flex",
|
||||||
|
gap: "$3",
|
||||||
|
mr: "$3",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FileJs size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
|
||||||
|
</Heading>
|
||||||
|
<Flex css={{ gap: "$3" }}>
|
||||||
|
{snap.files
|
||||||
|
.filter((f) => f.name.endsWith(".js"))
|
||||||
|
.map((file) => (
|
||||||
|
<RunScript file={file} key={file.name} />
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
<Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
|
||||||
|
{clearLog && (
|
||||||
|
<Button ghost size="xs" onClick={clearLog}>
|
||||||
|
<Prohibit size="14px" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
<Box
|
||||||
|
as="pre"
|
||||||
|
ref={logRef}
|
||||||
|
css={{
|
||||||
|
margin: 0,
|
||||||
|
// display: "inline-block",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
width: "100%",
|
||||||
|
height: "calc(100% - 48px)", // 100% minus the logbox header height
|
||||||
|
overflowY: "auto",
|
||||||
|
fontSize: "13px",
|
||||||
|
fontWeight: "$body",
|
||||||
|
fontFamily: "$monospace",
|
||||||
|
px: "$3",
|
||||||
|
pb: "$2",
|
||||||
|
whiteSpace: "normal",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{logs?.map((log, index) => (
|
||||||
|
<Box
|
||||||
|
as="span"
|
||||||
|
key={log.type + index}
|
||||||
|
css={{
|
||||||
|
"@hover": {
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: enhanced ? "$backgroundAlt" : undefined,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
p: enhanced ? "$1" : undefined,
|
||||||
|
my: enhanced ? "$1" : undefined,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Log {...log} />
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Log: FC<ILog> = ({
|
||||||
|
type,
|
||||||
|
timestring,
|
||||||
|
message: _message,
|
||||||
|
link,
|
||||||
|
linkText,
|
||||||
|
defaultCollapsed,
|
||||||
|
jsonData: _jsonData,
|
||||||
|
}) => {
|
||||||
|
const [expanded, setExpanded] = useState(!defaultCollapsed);
|
||||||
|
const { accounts } = useSnapshot(state);
|
||||||
|
const [dialogAccount, setDialogAccount] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const enrichAccounts = useCallback(
|
||||||
|
(str?: string): ReactNode => {
|
||||||
|
if (!str || !accounts.length) return null;
|
||||||
|
|
||||||
|
const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
|
||||||
|
const res = regexifyString({
|
||||||
|
pattern: new RegExp(pattern, "gim"),
|
||||||
|
decorator: (match, idx) => {
|
||||||
|
const name = accounts.find((acc) => acc.address === match)?.name;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={match + idx}
|
||||||
|
as="a"
|
||||||
|
onClick={() => setDialogAccount(match)}
|
||||||
|
title={match}
|
||||||
|
highlighted
|
||||||
|
>
|
||||||
|
{name || match}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
input: str,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <>{res}</>;
|
||||||
|
},
|
||||||
|
[accounts]
|
||||||
|
);
|
||||||
|
|
||||||
|
let message: ReactNode;
|
||||||
|
|
||||||
|
if (typeof _message === "string") {
|
||||||
|
_message = _message.trim().replace(/\n /gi, "\n");
|
||||||
|
message = enrichAccounts(_message);
|
||||||
|
} else {
|
||||||
|
message = _message;
|
||||||
|
}
|
||||||
|
|
||||||
|
const jsonData = enrichAccounts(_jsonData);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<AccountDialog
|
||||||
|
setActiveAccountAddress={setDialogAccount}
|
||||||
|
activeAccountAddress={dialogAccount}
|
||||||
|
/>
|
||||||
|
<LogText variant={type}>
|
||||||
|
{timestring && (
|
||||||
|
<Text muted monospace>
|
||||||
|
{timestring}{" "}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<Pre>{message} </Pre>
|
||||||
|
{link && (
|
||||||
|
<NextLink href={link} shallow passHref>
|
||||||
|
<Link as="a">{linkText}</Link>
|
||||||
|
</NextLink>
|
||||||
|
)}
|
||||||
|
{jsonData && (
|
||||||
|
<Link onClick={() => setExpanded(!expanded)} as="a">
|
||||||
|
{expanded ? "Collapse" : "Expand"}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{expanded && jsonData && <Pre block>{jsonData}</Pre>}
|
||||||
|
</LogText>
|
||||||
|
<br />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LogBox;
|
||||||
182
components/RunScript/index.tsx
Normal file
182
components/RunScript/index.tsx
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
import Handlebars from "handlebars";
|
||||||
|
import { Play, X } from "phosphor-react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import state, { IFile, ILog } from "../../state";
|
||||||
|
import Button from "../Button";
|
||||||
|
import Box from "../Box";
|
||||||
|
import Input from "../Input";
|
||||||
|
import Stack from "../Stack";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogContent,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
DialogClose,
|
||||||
|
} from "../Dialog";
|
||||||
|
import Flex from "../Flex";
|
||||||
|
import { useSnapshot } from "valtio";
|
||||||
|
|
||||||
|
const generateHtmlTemplate = (code: string) => {
|
||||||
|
return `
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script>
|
||||||
|
var log = console.log;
|
||||||
|
var errorLog = console.error;
|
||||||
|
var infoLog = console.info;
|
||||||
|
var warnLog = console.warn
|
||||||
|
console.log = function(){
|
||||||
|
var args = Array.from(arguments);
|
||||||
|
parent.window.postMessage({ type: 'log', args: args || [] }, '*');
|
||||||
|
log.apply(console, args);
|
||||||
|
}
|
||||||
|
console.error = function(){
|
||||||
|
var args = Array.from(arguments);
|
||||||
|
parent.window.postMessage({ type: 'error', args: args || [] }, '*');
|
||||||
|
errorLog.apply(console, args);
|
||||||
|
}
|
||||||
|
console.info = function(){
|
||||||
|
var args = Array.from(arguments);
|
||||||
|
parent.window.postMessage({ type: 'info', args: args || [] }, '*');
|
||||||
|
infoLog.apply(console, args);
|
||||||
|
}
|
||||||
|
console.warn = function(){
|
||||||
|
var args = Array.from(arguments);
|
||||||
|
parent.window.postMessage({ type: 'warning', args: args || [] }, '*');
|
||||||
|
warnLog.apply(console, args);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="module">
|
||||||
|
${code}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
const RunScript: React.FC<{ file: IFile }> = ({ file }) => {
|
||||||
|
const snap = useSnapshot(state);
|
||||||
|
const parsed = Handlebars.parse(file.content);
|
||||||
|
const names = parsed.body
|
||||||
|
.filter((i) => i.type === "MustacheStatement")
|
||||||
|
// @ts-expect-error
|
||||||
|
.map((block) => block?.path?.original);
|
||||||
|
const defaultState: Record<string, string> = {};
|
||||||
|
names.forEach((name) => (defaultState[name] = ""));
|
||||||
|
const [fields, setFields] = useState<Record<string, string>>(defaultState);
|
||||||
|
const [iFrameCode, setIframeCode] = useState("");
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const runScript = () => {
|
||||||
|
const template = Handlebars.compile(file.content);
|
||||||
|
const code = template(fields);
|
||||||
|
setIframeCode(generateHtmlTemplate(code));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEvent = (e: any) => {
|
||||||
|
if (e.data.type === "log" || e.data.type === "error") {
|
||||||
|
const data: ILog[] = e.data.args.map((msg: any) => ({
|
||||||
|
type: e.data.type,
|
||||||
|
message: typeof msg === "string" ? msg : JSON.stringify(msg, null, 2),
|
||||||
|
}));
|
||||||
|
state.scriptLogs = [...snap.scriptLogs, ...data];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener("message", handleEvent);
|
||||||
|
return () => window.removeEventListener("message", handleEvent);
|
||||||
|
}, [snap.scriptLogs]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setIframeCode("");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{file.name} <Play weight="bold" size="16px" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogTitle>Run {file.name} script</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
You are about to run scripts provided by the developer of the hook,
|
||||||
|
make sure you know what you are doing.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
{Object.keys(fields).length > 0
|
||||||
|
? `You also need to fill in following parameters to run the script`
|
||||||
|
: ""}
|
||||||
|
</DialogDescription>
|
||||||
|
<Stack css={{ width: "100%" }}>
|
||||||
|
{Object.keys(fields).map((key) => (
|
||||||
|
<Box key={key} css={{ width: "100%" }}>
|
||||||
|
<label>{key}</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={fields[key]}
|
||||||
|
css={{ mt: "$1" }}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFields({ ...fields, [key]: e.target.value })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
<Flex
|
||||||
|
css={{ justifyContent: "flex-end", width: "100%", gap: "$3" }}
|
||||||
|
>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button outline>Cancel</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
isDisabled={
|
||||||
|
Object.entries(fields).length > 0 &&
|
||||||
|
Object.entries(fields).every(
|
||||||
|
([key, value]: [string, string]) => !value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
state.scriptLogs = [];
|
||||||
|
runScript();
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Run script
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Stack>
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Box
|
||||||
|
css={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "$1",
|
||||||
|
right: "$1",
|
||||||
|
cursor: "pointer",
|
||||||
|
background: "$mauve1",
|
||||||
|
display: "flex",
|
||||||
|
borderRadius: "$full",
|
||||||
|
p: "$1",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X size="20px" />
|
||||||
|
</Box>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
{iFrameCode && (
|
||||||
|
<iframe
|
||||||
|
style={{ display: "none" }}
|
||||||
|
srcDoc={iFrameCode}
|
||||||
|
sandbox="allow-scripts"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RunScript;
|
||||||
@@ -8,6 +8,9 @@ module.exports = {
|
|||||||
config.resolve.alias["vscode"] = require.resolve(
|
config.resolve.alias["vscode"] = require.resolve(
|
||||||
"@codingame/monaco-languageclient/lib/vscode-compatibility"
|
"@codingame/monaco-languageclient/lib/vscode-compatibility"
|
||||||
);
|
);
|
||||||
|
config.resolve.alias["handlebars"] = require.resolve(
|
||||||
|
"handlebars/dist/handlebars.js"
|
||||||
|
);
|
||||||
if (!isServer) {
|
if (!isServer) {
|
||||||
config.resolve.fallback.fs = false;
|
config.resolve.fallback.fs = false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codingame/monaco-jsonrpc": "^0.3.1",
|
"@codingame/monaco-jsonrpc": "^0.3.1",
|
||||||
"@codingame/monaco-languageclient": "^0.17.0",
|
"@codingame/monaco-languageclient": "^0.17.0",
|
||||||
"@monaco-editor/react": "^4.4.1",
|
"@monaco-editor/react": "^4.4.5",
|
||||||
"@octokit/core": "^3.5.1",
|
"@octokit/core": "^3.5.1",
|
||||||
"@radix-ui/colors": "^0.1.7",
|
"@radix-ui/colors": "^0.1.7",
|
||||||
"@radix-ui/react-alert-dialog": "^0.1.1",
|
"@radix-ui/react-alert-dialog": "^0.1.1",
|
||||||
@@ -23,11 +23,12 @@
|
|||||||
"@radix-ui/react-popover": "^0.1.6",
|
"@radix-ui/react-popover": "^0.1.6",
|
||||||
"@radix-ui/react-switch": "^0.1.5",
|
"@radix-ui/react-switch": "^0.1.5",
|
||||||
"@radix-ui/react-tooltip": "^0.1.7",
|
"@radix-ui/react-tooltip": "^0.1.7",
|
||||||
"@stitches/react": "^1.2.6-0",
|
"@stitches/react": "^1.2.8",
|
||||||
"base64-js": "^1.5.1",
|
"base64-js": "^1.5.1",
|
||||||
"dinero.js": "^1.9.1",
|
"dinero.js": "^1.9.1",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"filesize": "^8.0.7",
|
"filesize": "^8.0.7",
|
||||||
|
"handlebars": "^4.7.7",
|
||||||
"javascript-time-ago": "^2.3.11",
|
"javascript-time-ago": "^2.3.11",
|
||||||
"jszip": "^3.7.1",
|
"jszip": "^3.7.1",
|
||||||
"lodash.uniqby": "^4.7.0",
|
"lodash.uniqby": "^4.7.0",
|
||||||
|
|||||||
@@ -6,6 +6,8 @@ import Transaction from "../../components/Transaction";
|
|||||||
import state from "../../state";
|
import state from "../../state";
|
||||||
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
|
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
|
||||||
import { transactionsState, modifyTransaction } from "../../state";
|
import { transactionsState, modifyTransaction } from "../../state";
|
||||||
|
import LogBoxForScripts from "../../components/LogBoxForScripts";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
const DebugStream = dynamic(() => import("../../components/DebugStream"), {
|
const DebugStream = dynamic(() => import("../../components/DebugStream"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
@@ -19,18 +21,26 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const Test = () => {
|
const Test = () => {
|
||||||
|
// This and useEffect is here to prevent useLayoutEffect warnings from react-split
|
||||||
|
const [showComponent, setShowComponent] = useState(false);
|
||||||
const { transactionLogs } = useSnapshot(state);
|
const { transactionLogs } = useSnapshot(state);
|
||||||
const { transactions, activeHeader } = useSnapshot(transactionsState);
|
const { transactions, activeHeader } = useSnapshot(transactionsState);
|
||||||
|
const snap = useSnapshot(state);
|
||||||
|
useEffect(() => {
|
||||||
|
setShowComponent(true);
|
||||||
|
}, []);
|
||||||
|
if (!showComponent) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Container css={{ px: 0 }}>
|
<Container css={{ px: 0 }}>
|
||||||
<Split
|
<Split
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
sizes={getSplit("testVertical") || [50, 50]}
|
sizes={getSplit("testVertical") || [50, 20, 30]}
|
||||||
gutterSize={4}
|
gutterSize={4}
|
||||||
gutterAlign="center"
|
gutterAlign="center"
|
||||||
style={{ height: "calc(100vh - 60px)" }}
|
style={{ height: "calc(100vh - 60px)" }}
|
||||||
onDragEnd={e => saveSplit("testVertical", e)}
|
onDragEnd={(e) => saveSplit("testVertical", e)}
|
||||||
>
|
>
|
||||||
<Flex
|
<Flex
|
||||||
row
|
row
|
||||||
@@ -52,7 +62,7 @@ const Test = () => {
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
}}
|
}}
|
||||||
onDragEnd={e => saveSplit("testHorizontal", e)}
|
onDragEnd={(e) => saveSplit("testHorizontal", e)}
|
||||||
>
|
>
|
||||||
<Box css={{ width: "55%", px: "$2" }}>
|
<Box css={{ width: "55%", px: "$2" }}>
|
||||||
<Tabs
|
<Tabs
|
||||||
@@ -64,17 +74,14 @@ const Test = () => {
|
|||||||
keepAllAlive
|
keepAllAlive
|
||||||
forceDefaultExtension
|
forceDefaultExtension
|
||||||
defaultExtension=".json"
|
defaultExtension=".json"
|
||||||
onCreateNewTab={header => modifyTransaction(header, {})}
|
onCreateNewTab={(header) => modifyTransaction(header, {})}
|
||||||
onCloseTab={(idx, header) =>
|
onCloseTab={(idx, header) =>
|
||||||
header && modifyTransaction(header, undefined)
|
header && modifyTransaction(header, undefined)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{transactions.map(({ header, state }) => (
|
{transactions.map(({ header, state }) => (
|
||||||
<Tab key={header} header={header}>
|
<Tab key={header} header={header}>
|
||||||
<Transaction
|
<Transaction state={state} header={header} />
|
||||||
state={state}
|
|
||||||
header={header}
|
|
||||||
/>
|
|
||||||
</Tab>
|
</Tab>
|
||||||
))}
|
))}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
@@ -84,8 +91,17 @@ const Test = () => {
|
|||||||
</Box>
|
</Box>
|
||||||
</Split>
|
</Split>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
<Flex
|
||||||
<Flex row fluid>
|
as="div"
|
||||||
|
css={{
|
||||||
|
borderTop: "1px solid $mauve6",
|
||||||
|
background: "$mauve1",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LogBoxForScripts title="Helper scripts" logs={snap.scriptLogs} />
|
||||||
|
</Flex>
|
||||||
|
<Flex>
|
||||||
<Split
|
<Split
|
||||||
direction="horizontal"
|
direction="horizontal"
|
||||||
sizes={[50, 50]}
|
sizes={[50, 50]}
|
||||||
|
|||||||
@@ -23,16 +23,18 @@ export const fetchFiles = (gistId: string) => {
|
|||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
// in case of templates, fetch header file(s) and append to res
|
// in case of templates, fetch header file(s) and append to res
|
||||||
let resHeaderJson;
|
|
||||||
try {
|
try {
|
||||||
const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
|
const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
|
||||||
if (resHeader.ok) {
|
if (resHeader.ok) {
|
||||||
resHeaderJson = await resHeader.json();
|
const resHeaderJson = await resHeader.json()
|
||||||
|
const headerFiles: Record<string, { filename: string; content: string; language: string }> = {};
|
||||||
|
Object.entries(resHeaderJson).forEach(([key, value]) => {
|
||||||
|
const fname = `${key}.h`;
|
||||||
|
headerFiles[fname] = { filename: fname, content: value as string, language: 'C' }
|
||||||
|
})
|
||||||
const files = {
|
const files = {
|
||||||
...res.data.files,
|
...res.data.files,
|
||||||
'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: resHeaderJson.hookapi, language: 'C' },
|
...headerFiles
|
||||||
'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: resHeaderJson.hookmacro, language: 'C' },
|
|
||||||
'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: resHeaderJson.sfcodes, language: 'C' },
|
|
||||||
};
|
};
|
||||||
res.data.files = files;
|
res.data.files = files;
|
||||||
}
|
}
|
||||||
@@ -112,4 +114,4 @@ export const fetchFiles = (gistId: string) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
state.loading = false;
|
state.loading = false;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -66,6 +66,7 @@ export interface IState {
|
|||||||
logs: ILog[];
|
logs: ILog[];
|
||||||
deployLogs: ILog[];
|
deployLogs: ILog[];
|
||||||
transactionLogs: ILog[];
|
transactionLogs: ILog[];
|
||||||
|
scriptLogs: ILog[];
|
||||||
editorCtx?: typeof monaco.editor;
|
editorCtx?: typeof monaco.editor;
|
||||||
editorSettings: {
|
editorSettings: {
|
||||||
tabSize: number;
|
tabSize: number;
|
||||||
@@ -96,6 +97,7 @@ let initialState: IState = {
|
|||||||
logs: [],
|
logs: [],
|
||||||
deployLogs: [],
|
deployLogs: [],
|
||||||
transactionLogs: [],
|
transactionLogs: [],
|
||||||
|
scriptLogs: [],
|
||||||
editorCtx: undefined,
|
editorCtx: undefined,
|
||||||
gistId: undefined,
|
gistId: undefined,
|
||||||
gistOwner: undefined,
|
gistOwner: undefined,
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { MessageConnection } from "@codingame/monaco-jsonrpc";
|
import { MessageConnection } from "@codingame/monaco-jsonrpc";
|
||||||
import { MonacoLanguageClient, ErrorAction, CloseAction, createConnection } from "@codingame/monaco-languageclient";
|
import { MonacoLanguageClient, ErrorAction, CloseAction, createConnection } from "@codingame/monaco-languageclient";
|
||||||
import Router from "next/router";
|
|
||||||
import normalizeUrl from "normalize-url";
|
import normalizeUrl from "normalize-url";
|
||||||
import ReconnectingWebSocket from "reconnecting-websocket";
|
import ReconnectingWebSocket from "reconnecting-websocket";
|
||||||
|
|
||||||
@@ -14,11 +13,7 @@ export function createLanguageClient(connection: MessageConnection): MonacoLangu
|
|||||||
errorHandler: {
|
errorHandler: {
|
||||||
error: () => ErrorAction.Continue,
|
error: () => ErrorAction.Continue,
|
||||||
closed: () => {
|
closed: () => {
|
||||||
if (Router.pathname.includes('/develop')) {
|
return CloseAction.DoNotRestart
|
||||||
return CloseAction.Restart
|
|
||||||
} else {
|
|
||||||
return CloseAction.DoNotRestart
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
58
yarn.lock
58
yarn.lock
@@ -202,19 +202,19 @@
|
|||||||
resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
|
resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
|
||||||
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
||||||
|
|
||||||
"@monaco-editor/loader@^1.3.0":
|
"@monaco-editor/loader@^1.3.2":
|
||||||
version "1.3.0"
|
version "1.3.2"
|
||||||
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.0.tgz#659fbaf1d612ea67b2a0519a18612d1c4813e444"
|
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
|
||||||
integrity sha512-N3mGq1ktC3zh7WUx3NGO+PSDdNq9Vspk/41rEmRdrCqV9vNbBTRzAOplmUpNQsi+hmTs++ERMBobMERb8Kb+3g==
|
integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
|
||||||
dependencies:
|
dependencies:
|
||||||
state-local "^1.0.6"
|
state-local "^1.0.6"
|
||||||
|
|
||||||
"@monaco-editor/react@^4.4.1":
|
"@monaco-editor/react@^4.4.5":
|
||||||
version "4.4.1"
|
version "4.4.5"
|
||||||
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.1.tgz#2e2b9b369f3082b0e14f47cdbe35658fd56c7c7d"
|
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.5.tgz#beabe491efeb2457441a00d1c7651c653697f65b"
|
||||||
integrity sha512-95E/XPC4dbm/7qdkhSsU/a1kRgcn2PYhRTVIc+/cixWCZrwRURW1DRPaIZ2lOawBJ6kAOLywxuD4A4UmbT0ZIw==
|
integrity sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@monaco-editor/loader" "^1.3.0"
|
"@monaco-editor/loader" "^1.3.2"
|
||||||
prop-types "^15.7.2"
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
"@next/env@12.1.0":
|
"@next/env@12.1.0":
|
||||||
@@ -917,10 +917,10 @@
|
|||||||
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz"
|
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz"
|
||||||
integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
|
integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
|
||||||
|
|
||||||
"@stitches/react@^1.2.6-0":
|
"@stitches/react@^1.2.8":
|
||||||
version "1.2.7"
|
version "1.2.8"
|
||||||
resolved "https://registry.npmjs.org/@stitches/react/-/react-1.2.7.tgz"
|
resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
|
||||||
integrity sha512-6AxpUag7OW55ANzRnuy7R15FEyQeZ66fytVo3BBilFIU0mfo3t49CAMcEAL/A1SbhSj/FCdWkn/XrbjGBTJTzg==
|
integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==
|
||||||
|
|
||||||
"@types/aws-lambda@^8.10.83":
|
"@types/aws-lambda@^8.10.83":
|
||||||
version "8.10.93"
|
version "8.10.93"
|
||||||
@@ -2281,6 +2281,18 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
|
|||||||
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
|
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
|
||||||
integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
|
integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
|
||||||
|
|
||||||
|
handlebars@^4.7.7:
|
||||||
|
version "4.7.7"
|
||||||
|
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
|
||||||
|
integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
|
||||||
|
dependencies:
|
||||||
|
minimist "^1.2.5"
|
||||||
|
neo-async "^2.6.0"
|
||||||
|
source-map "^0.6.1"
|
||||||
|
wordwrap "^1.0.0"
|
||||||
|
optionalDependencies:
|
||||||
|
uglify-js "^3.1.4"
|
||||||
|
|
||||||
has-bigints@^1.0.1:
|
has-bigints@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
|
resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
|
||||||
@@ -2949,6 +2961,11 @@ natural-compare@^1.4.0:
|
|||||||
resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
|
resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
|
||||||
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
|
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
|
||||||
|
|
||||||
|
neo-async@^2.6.0:
|
||||||
|
version "2.6.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
|
||||||
|
integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
|
||||||
|
|
||||||
next-auth@^4.0.0-beta.5:
|
next-auth@^4.0.0-beta.5:
|
||||||
version "4.2.1"
|
version "4.2.1"
|
||||||
resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.2.1.tgz"
|
resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.2.1.tgz"
|
||||||
@@ -3858,6 +3875,11 @@ source-map@^0.5.7:
|
|||||||
resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
|
resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
|
||||||
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
|
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
|
||||||
|
|
||||||
|
source-map@^0.6.1:
|
||||||
|
version "0.6.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||||
|
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||||
|
|
||||||
split.js@^1.6.0:
|
split.js@^1.6.0:
|
||||||
version "1.6.5"
|
version "1.6.5"
|
||||||
resolved "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz"
|
resolved "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz"
|
||||||
@@ -4089,6 +4111,11 @@ typescript@4.4.4:
|
|||||||
resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz"
|
resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz"
|
||||||
integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
|
integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
|
||||||
|
|
||||||
|
uglify-js@^3.1.4:
|
||||||
|
version "3.16.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.16.0.tgz#b778ba0831ca102c1d8ecbdec2d2bdfcc7353190"
|
||||||
|
integrity sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==
|
||||||
|
|
||||||
unbox-primitive@^1.0.1:
|
unbox-primitive@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
|
resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
|
||||||
@@ -4308,6 +4335,11 @@ word-wrap@^1.2.3:
|
|||||||
resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
|
resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
|
||||||
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
|
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
|
||||||
|
|
||||||
|
wordwrap@^1.0.0:
|
||||||
|
version "1.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
|
||||||
|
integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
|
||||||
|
|
||||||
wrappy@1:
|
wrappy@1:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
|
resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
|
||||||
|
|||||||
Reference in New Issue
Block a user