ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #41 from eqlabs/feat/templates

Browse Source 
Fetch templates and header files according to selection.
This commit is contained in:
muzamil
2022-01-04 15:32:10 +05:30
committed by GitHub
parent 938b567256 027b2c8ed4
commit fd479d8671
5 changed files with 78 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/HooksEditor.tsx
View File

@@ -11,6 +11,7 @@ import Container from "./Container";
import dark from "../theme/editor/amy.json";
import light from "../theme/editor/xcode_default.json";
import { saveFile } from "../state/actions";
import { apiHeaderFiles } from "../state/constants";
import state from "../state";
import EditorNavigation from "./EditorNavigation";
@@ -26,12 +27,26 @@ loader.config({
},
});
const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
const currPath = editor.getModel()?.uri.path;
if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
editor.updateOptions({ readOnly: true });
} else {
editor.updateOptions({ readOnly: false });
}
};
const HooksEditor = () => {
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
const subscriptionRef = useRef<ReconnectingWebSocket | null>(null);
const snap = useSnapshot(state);
const router = useRouter();
const { theme } = useTheme();
useEffect(() => {
if (editorRef.current) validateWritability(editorRef.current);
}, [snap.active]);
useEffect(() => {
return () => {
subscriptionRef?.current?.close();
@@ -58,9 +73,9 @@ const HooksEditor = () => {
language={snap.files?.[snap.active]?.language}
path={`file://work/c/${snap.files?.[snap.active]?.name}`}
defaultValue={snap.files?.[snap.active]?.content}
beforeMount={(monaco) => {
beforeMount={monaco => {
if (!snap.editorCtx) {
snap.files.forEach((file) =>
snap.files.forEach(file =>
monaco.editor.createModel(
file.content,
file.language,
@@ -85,7 +100,7 @@ const HooksEditor = () => {
// listen when the web socket is opened
listen({
webSocket: webSocket as WebSocket,
onConnection: (connection) => {
onConnection: connection => {
// create and start the language client
const languageClient = createLanguageClient(connection);
const disposable = languageClient.start();
@@ -124,12 +139,10 @@ const HooksEditor = () => {
enabled: true,
},
});
editor.addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
() => {
saveFile();
}
);
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
saveFile();
});
validateWritability(editor)
}}
theme={theme === "dark" ? "dark" : "light"}
/>
@@ -147,9 +160,7 @@ const HooksEditor = () => {
<Box css={{ display: "inline-flex", pl: "35px" }}>
<ArrowBendLeftUp size={30} />
</Box>
<Box
css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
>
<Box css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}>
<Text
css={{
fontSize: "14px",

105
components/Navigation.tsx
View File

@@ -27,6 +27,7 @@ import {
DialogTrigger,
} from "./Dialog";
import PanelBox from "./PanelBox";
import { templateFileIds } from '../state/constants';
const Navigation = () => {
const router = useRouter();
@@ -82,12 +83,8 @@ const Navigation = () => {
<Spinner />
) : (
<>
<Heading css={{ lineHeight: 1 }}>
{snap.files?.[0]?.name || "XRPL Hooks"}
</Heading>
<Text
css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
>
<Heading css={{ lineHeight: 1 }}>{snap.files?.[0]?.name || "XRPL Hooks"}</Heading>
<Text css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}>
{snap.files.length > 0 ? "Gist: " : "Playground"}
<Text css={{ color: "$mauve12" }}>
{snap.files.length > 0 &&
@@ -99,10 +96,7 @@ const Navigation = () => {
</Flex>
{router.isReady && (
<ButtonGroup css={{ marginLeft: "auto" }}>
<Dialog
open={snap.mainModalOpen}
onOpenChange={(open) => (state.mainModalOpen = open)}
>
<Dialog open={snap.mainModalOpen} onOpenChange={open => (state.mainModalOpen = open)}>
<DialogTrigger asChild>
<Button outline>
<FolderOpen size="15px" />
@@ -163,12 +157,9 @@ const Navigation = () => {
mb: "$7",
}}
>
Hooks add smart contract functionality to the XRP
Ledger.
Hooks add smart contract functionality to the XRP Ledger.
</Text>
<Flex
css={{ flexDirection: "column", gap: "$2", mt: "$2" }}
>
<Flex css={{ flexDirection: "column", gap: "$2", mt: "$2" }}>
<Text
css={{
display: "inline-flex",
@@ -253,43 +244,29 @@ const Navigation = () => {
},
}}
>
<PanelBox
as="a"
href="/develop/be088224fb37c0075e84491da0e602c1"
>
<PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
<Heading>Starter</Heading>
<Text>
Just an empty starter with essential imports
</Text>
<Text>Just an empty starter with essential imports</Text>
</PanelBox>
<PanelBox
as="a"
href="/develop/be088224fb37c0075e84491da0e602c1"
>
<PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
<Heading>Firewall</Heading>
<Text>
This Hook essentially checks a blacklist of accounts
</Text>
<Text>This Hook essentially checks a blacklist of accounts</Text>
</PanelBox>
<PanelBox
as="a"
href="/develop/be088224fb37c0075e84491da0e602c1"
>
<PanelBox as="a" href={`/develop/${templateFileIds.accept}`}>
<Heading>Accept</Heading>
<Text>
This hook just accepts any transaction coming through
it
</Text>
<Text>This hook just accepts any transaction coming through it</Text>
</PanelBox>
<PanelBox
as="a"
href="/develop/be088224fb37c0075e84491da0e602c1"
>
<Heading>Accept</Heading>
<Text>
This hook just accepts any transaction coming through
it
</Text>
<PanelBox as="a" href={`/develop/${templateFileIds.notary}`}>
<Heading>Notary</Heading>
<Text>Collecting signatures for multi-sign transactions</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.carbon}`}>
<Heading>Carbon</Heading>
<Text>Send a percentage of sum to an address</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.peggy}`}>
<Heading>Peggy</Heading>
<Text>An oracle based stabe coin hook</Text>
</PanelBox>
</Flex>
</Flex>
@@ -336,42 +313,18 @@ const Navigation = () => {
}}
>
<ButtonGroup>
<Link
href={gistId ? `/develop/${gistId}` : "/develop"}
passHref
shallow
>
<Button
as="a"
outline={!router.pathname.includes("/develop")}
uppercase
>
<Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref shallow>
<Button as="a" outline={!router.pathname.includes("/develop")} uppercase>
Develop
</Button>
</Link>
<Link
href={gistId ? `/deploy/${gistId}` : "/deploy"}
passHref
shallow
>
<Button
as="a"
outline={!router.pathname.includes("/deploy")}
uppercase
>
<Link href={gistId ? `/deploy/${gistId}` : "/deploy"} passHref shallow>
<Button as="a" outline={!router.pathname.includes("/deploy")} uppercase>
Deploy
</Button>
</Link>
<Link
href={gistId ? `/test/${gistId}` : "/test"}
passHref
shallow
>
<Button
as="a"
outline={!router.pathname.includes("/test")}
uppercase
>
<Link href={gistId ? `/test/${gistId}` : "/test"} passHref shallow>
<Button as="a" outline={!router.pathname.includes("/test")} uppercase>
Test
</Button>
</Link>

14
state/actions/fetchFiles.ts
View File

@@ -1,6 +1,8 @@
import { Octokit } from "@octokit/core";
import Router from "next/router";
import state from '../index';
import { templateFileIds } from '../constants';
const octokit = new Octokit();
@@ -17,6 +19,17 @@ export const fetchFiles = (gistId: string) => {
octokit
.request("GET /gists/{gist_id}", { gist_id: gistId })
.then(res => {
if (!Object.values(templateFileIds).includes(gistId)) {
return res
}
// in case of templates, fetch header file(s) and append to res
return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {
const files = { ...res.data.files, ...headerFiles }
res.data.files = files
return res
})
})
.then((res) => {
if (res.data.files && Object.keys(res.data.files).length > 0) {
const files = Object.keys(res.data.files).map((filename) => ({
@@ -44,6 +57,7 @@ export const fetchFiles = (gistId: string) => {
state.loading = false;
})
.catch((err) => {
// console.error(err)
state.loading = false;
state.logs.push({
type: "error",

1
state/constants/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './templates'

11
state/constants/templates.ts Normal file
View File

@@ -0,0 +1,11 @@
export const templateFileIds = {
'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
'accept': '1d14e51e2e02dc0a508cb0733767a914',
'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
'carbon': '43925143fa19735d8c6505c34d3a6a47',
'peggy': 'ceaf352e2a65741341033ab7ef05c448',
'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
}
export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']