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

Merge branch 'main' into feat/tabs

Browse Source
This commit is contained in:
muzam
2022-02-01 19:00:46 +05:30
parent 4f042ef3b7 de5380d6f3
commit bff01b4a9f
10 changed files with 131 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Accounts.tsx
View File

@@ -350,7 +350,7 @@ const Accounts: FC<AccountProps> = props => {
borderBottom: props.card ? "1px solid $mauve6" : undefined,
"@hover": {
"&:hover": {
background: "$mauve3",
background: "$backgroundAlt",
},
},
}}

86
components/DebugStream.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { useEffect, useState } from "react";
import { useSnapshot } from "valtio";
import { Select } from ".";
import state from "../state";
import LogBox from "./LogBox";
import Text from "./Text";
const DebugStream = () => {
const snap = useSnapshot(state);
const accountOptions = snap.accounts.map(acc => ({
label: acc.name,
value: acc.address,
}));
const [selectedAccount, setSelectedAccount] = useState<typeof accountOptions[0] | null>(null);
const renderNav = () => (
<>
<Text css={{ mx: "$2", fontSize: "inherit" }}>Account: </Text>
<Select
instanceId="debugStreamAccount"
placeholder="Select account"
options={accountOptions}
hideSelectedOptions
value={selectedAccount}
onChange={acc => setSelectedAccount(acc as any)}
css={{ width: "30%" }}
/>
</>
);
useEffect(() => {
const account = selectedAccount?.value;
if (!account) {
return;
}
const socket = new WebSocket(`wss://hooks-testnet-debugstream.xrpl-labs.com/${account}`);
const onOpen = () => {
state.debugLogs = [];
state.debugLogs.push({
type: "success",
message: `Debug stream opened for account ${account}`,
});
};
const onError = () => {
state.debugLogs.push({
type: "error",
message: "Something went wrong in establishing connection!",
});
setSelectedAccount(null);
};
const onMessage = (event: any) => {
if (!event.data) return;
state.debugLogs.push({
type: "log",
message: event.data,
});
};
socket.addEventListener("open", onOpen);
socket.addEventListener("close", onError);
socket.addEventListener("error", onError);
socket.addEventListener("message", onMessage);
return () => {
socket.removeEventListener("open", onOpen);
socket.removeEventListener("close", onError);
socket.removeEventListener("message", onMessage);
socket.close();
};
}, [selectedAccount]);
return (
<LogBox
enhanced
renderNav={renderNav}
title="Debug stream"
logs={snap.debugLogs}
clearLog={() => (state.debugLogs = [])}
/>
);
};
export default DebugStream;

4
components/HooksEditor.tsx
View File

@@ -71,7 +71,7 @@ const HooksEditor = () => {
keepCurrentModel
defaultLanguage={snap.files?.[snap.active]?.language}
language={snap.files?.[snap.active]?.language}
path={`file://work/c/${snap.files?.[snap.active]?.name}`}
path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
defaultValue={snap.files?.[snap.active]?.content}
beforeMount={monaco => {
if (!snap.editorCtx) {
@@ -79,7 +79,7 @@ const HooksEditor = () => {
monaco.editor.createModel(
file.content,
file.language,
monaco.Uri.parse(`file://work/c/${file.name}`)
monaco.Uri.parse(`file:///work/c/${file.name}`)
)
);
}

25
components/LogBox.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useLayoutEffect } from "react";
import React, { useRef, useLayoutEffect, ReactNode } from "react";
import { Notepad, Prohibit } from "phosphor-react";
import useStayScrolled from "react-stay-scrolled";
import NextLink from "next/link";
@@ -17,9 +17,11 @@ interface ILogBox {
title: string;
clearLog?: () => void;
logs: ILog[];
renderNav?: () => ReactNode;
enhanced?: boolean;
}
const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
const logRef = useRef<HTMLPreElement>(null);
const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
@@ -39,7 +41,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
}}
>
<Container css={{ px: 0, flexShrink: 1 }}>
<Flex css={{ py: "$3" }}>
<Flex css={{ py: "$3", alignItems: "center", fontSize: "$sm", fontWeight: 300 }}>
<Heading
as="h3"
css={{
@@ -56,6 +58,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
>
<Notepad size="15px" /> <Text css={{ lineHeight: 1 }}>{title}</Text>
</Heading>
{renderNav?.()}
<Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
{clearLog && (
<Button ghost size="xs" onClick={clearLog}>
@@ -84,10 +87,18 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children }) => {
}}
>
{logs?.map((log, index) => (
<Box as="span" key={log.type + index}>
{/* <LogText capitalize variant={log.type}>
{log.type}:{" "}
</LogText> */}
<Box
as="span"
key={log.type + index}
css={{
"@hover": {
"&:hover": {
backgroundColor: enhanced ? "$backgroundAlt" : undefined,
},
},
p: "$2 $1",
}}
>
<LogText variant={log.type}>
{log.message}{" "}
{log.link && (

1
components/LogText.tsx
View File

@@ -4,6 +4,7 @@ const Text = styled("span", {
fontFamily: "$monospace",
lineHeight: "$body",
color: "$text",
wordWrap: 'break-word',
variants: {
variant: {
log: {

12
components/Select.tsx
View File

@@ -1,5 +1,5 @@
import { FC } from "react";
import { gray, grayDark } from "@radix-ui/colors";
import { mauve, mauveDark } from "@radix-ui/colors";
import { useTheme } from "next-themes";
import { styled } from '../stitches.config';
import dynamic from 'next/dynamic';
@@ -11,11 +11,11 @@ const Select: FC<Props> = props => {
const isDark = theme === "dark";
const colors: any = {
// primary: pink.pink9,
primary: isDark ? grayDark.gray4 : gray.gray4,
secondary: isDark ? grayDark.gray8 : gray.gray8,
background: isDark ? "rgb(10, 10, 10)" : "rgb(244, 244, 244)",
searchText: isDark ? grayDark.gray12 : gray.gray12,
placeholder: isDark ? grayDark.gray11 : gray.gray11,
primary: isDark ? mauveDark.mauve4 : mauve.mauve4,
secondary: isDark ? mauveDark.mauve8 : mauve.mauve8,
background: isDark ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
searchText: isDark ? mauveDark.mauve12 : mauve.mauve12,
placeholder: isDark ? mauveDark.mauve11 : mauve.mauve11,
};
colors.outline = colors.background;
colors.selected = colors.secondary;

12
pages/test/[[...slug]].tsx
View File

@@ -7,6 +7,10 @@ import { sendTransaction } from "../../state/actions";
import { useCallback, useEffect, useState, FC } from "react";
import transactionsData from "../../content/transactions.json";
const DebugStream = dynamic(() => import("../../components/DebugStream"), {
ssr: false,
});
const LogBox = dynamic(() => import("../../components/LogBox"), {
ssr: false,
});
@@ -298,7 +302,7 @@ const Test = () => {
fluid
css={{ justifyContent: "center", mb: "$2", height: "40vh", minHeight: "300px", p: "$3 $2" }}
>
<Box css={{ width: "60%", px: "$2", maxWidth: "800px", height: "100%", overflow: "auto" }}>
<Box css={{ width: "55%", px: "$2" }}>
<Tabs
keepAllAlive
forceDefaultExtension
@@ -313,7 +317,7 @@ const Test = () => {
))}
</Tabs>
</Box>
<Box css={{ width: "40%", mx: "$2", height: "100%", maxWidth: "750px" }}>
<Box css={{ width: "45%", mx: "$2", height: "100%" }}>
<Accounts card hideDeployBtn showHookStats />
</Box>
</Flex>
@@ -321,13 +325,13 @@ const Test = () => {
<Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
<Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
<LogBox
title="From Log"
title="Development Log"
logs={snap.transactionLogs}
clearLog={() => (state.transactionLogs = [])}
/>
</Box>
<Box css={{ width: "50%" }}>
<LogBox title="To Log" logs={[]} clearLog={() => {}} />
<DebugStream />
</Box>
</Flex>
</Container>

5
state/actions/saveFile.ts
View File

@@ -4,8 +4,9 @@ import state from '../index';
// Saves the current editor content to global state
export const saveFile = (showToast: boolean = true) => {
const editorModels = state.editorCtx?.getModels();
const sought = '/' + state.files[state.active].name;
const currentModel = editorModels?.find((editorModel) => {
return editorModel.uri.path === `/c/${state.files[state.active].name}`;
return editorModel.uri.path.endsWith(sought);
});
if (state.files.length > 0) {
state.files[state.active].content = currentModel?.getValue() || "";
@@ -13,4 +14,4 @@ export const saveFile = (showToast: boolean = true) => {
if (showToast) {
toast.success("Saved successfully", { position: "bottom-center" });
}
};
};

2
state/index.ts
View File

@@ -50,6 +50,7 @@ export interface IState {
logs: ILog[];
deployLogs: ILog[];
transactionLogs: ILog[];
debugLogs: ILog[];
editorCtx?: typeof monaco.editor;
editorSettings: {
tabSize: number;
@@ -72,6 +73,7 @@ let initialState: IState = {
logs: [],
deployLogs: [],
transactionLogs: [],
debugLogs: [],
editorCtx: undefined,
gistId: undefined,
gistOwner: undefined,

5
stitches.config.ts
View File

@@ -1,6 +1,7 @@
// stitches.config.ts
import type Stitches from '@stitches/react';
import { createStitches } from '@stitches/react';
import {
gray,
blue,
@@ -47,6 +48,7 @@ export const {
...yellow,
...purple,
background: "$gray1",
backgroundAlt: "$gray4",
text: "$gray12",
primary: "$plum",
white: "white",
@@ -304,7 +306,8 @@ export const darkTheme = createTheme('dark', {
...pinkDark,
...yellowDark,
...purpleDark,
deep: 'rgb(10, 10, 10)'
deep: 'rgb(10, 10, 10)',
// backgroundA: transparentize(0.1, grayDark.gray1),
},
});