Merge branch 'main' into feat/tabs

Per account debug stream

components/Accounts.tsx

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

components/DebugStream.tsx

@@ -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;

components/HooksEditor.tsx

@@ -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}`)
                 )
               );
             }

components/LogBox.tsx

@@ -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 && (

components/LogText.tsx

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

components/Select.tsx

@@ -21,6 +21,7 @@ const Select: FC<Props> = props => {
   colors.selected = colors.secondary;
   return (
     <SelectInput
+      menuPosition="fixed"
       theme={theme => ({
         ...theme,
         spacing: {

components/Tabs.tsx

@@ -1,24 +1,60 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState, Fragment, isValidElement, useCallback } from "react";
 import type { ReactNode, ReactElement } from "react";
-import { Button, Stack } from ".";
+import { Box, Button, Flex, Input, Stack, Text } from ".";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "./Dialog";
+import { Plus, X } from "phosphor-react";
+import { styled } from "../stitches.config";
+
+const ErrorText = styled(Text, {
+  color: "$red9",
+  mt: "$1",
+  display: "block",
+});
 
 interface TabProps {
   header?: string;
   children: ReactNode;
 }
 
+// TODO customise strings shown
 interface Props {
   activeIndex?: number;
   activeHeader?: string;
   headless?: boolean;
   children: ReactElement<TabProps>[];
+  keepAllAlive?: boolean;
+  defaultExtension?: string;
+  forceDefaultExtension?: boolean;
+  onCreateNewTab?: (name: string) => any;
+  onCloseTab?: (index: number, header?: string) => any;
 }
 
 export const Tab = (props: TabProps) => null;
 
-export const Tabs = ({ children, activeIndex, activeHeader, headless }: Props) => {
+export const Tabs = ({
+  children,
+  activeIndex,
+  activeHeader,
+  headless,
+  keepAllAlive = false,
+  onCreateNewTab,
+  onCloseTab,
+  defaultExtension = "",
+  forceDefaultExtension,
+}: Props) => {
   const [active, setActive] = useState(activeIndex || 0);
-  const tabProps: TabProps[] = children.map(elem => elem.props);
+  const tabs: TabProps[] = children.map(elem => elem.props);
+
+  const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false);
+  const [tabname, setTabname] = useState("");
+  const [newtabError, setNewtabError] = useState<string | null>(null);
 
   useEffect(() => {
     if (activeIndex) setActive(activeIndex);
@@ -26,10 +62,57 @@ export const Tabs = ({ children, activeIndex, activeHeader, headless }: Props) =
 
   useEffect(() => {
     if (activeHeader) {
-      const idx = tabProps.findIndex(tab => tab.header === activeHeader);
+      const idx = tabs.findIndex(tab => tab.header === activeHeader);
       setActive(idx);
     }
-  }, [activeHeader, tabProps]);
+  }, [activeHeader, tabs]);
+
+  // when filename changes, reset error
+  useEffect(() => {
+    setNewtabError(null);
+  }, [tabname, setNewtabError]);
+
+  const validateTabname = useCallback(
+    (tabname: string): { error: string | null } => {
+      if (tabs.find(tab => tab.header === tabname)) {
+        return { error: "Name already exists." };
+      }
+      return { error: null };
+    },
+    [tabs]
+  );
+
+  const handleCreateTab = useCallback(() => {
+    // add default extension in case omitted
+    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
+    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = _tabname + defaultExtension;
+    }
+
+    const chk = validateTabname(_tabname);
+    if (chk.error) {
+      setNewtabError(`Error: ${chk.error}`);
+      return;
+    }
+
+    setIsNewtabDialogOpen(false);
+    setTabname("");
+    // switch to new tab?
+    setActive(tabs.length);
+
+    onCreateNewTab?.(_tabname);
+  }, [tabname, defaultExtension, validateTabname, onCreateNewTab, tabs.length]);
+
+  const handleCloseTab = useCallback(
+    (idx: number) => {
+      if (idx <= active && active !== 0) {
+        setActive(active - 1);
+      }
+
+      onCloseTab?.(idx, tabs[idx].header);
+    },
+    [active, onCloseTab, tabs]
+  );
 
   return (
     <>
@@ -40,11 +123,13 @@ export const Tabs = ({ children, activeIndex, activeHeader, headless }: Props) =
             flex: 1,
             flexWrap: "nowrap",
             marginBottom: "-1px",
+            width: "100%",
+            overflow: "auto",
           }}
         >
-          {tabProps.map((prop, idx) => (
+          {tabs.map((tab, idx) => (
             <Button
-              key={prop.header}
+              key={tab.header}
               role="tab"
               tabIndex={idx}
               onClick={() => setActive(idx)}
@@ -59,12 +144,99 @@ export const Tabs = ({ children, activeIndex, activeHeader, headless }: Props) =
                 },
               }}
             >
-              {prop.header || idx}
+              {tab.header || idx}
+              {onCloseTab && (
+                <Box
+                  as="span"
+                  css={{
+                    display: "flex",
+                    p: "2px",
+                    borderRadius: "$full",
+                    mr: "-4px",
+                    "&:hover": {
+                      // boxSizing: "0px 0px 1px",
+                      backgroundColor: "$mauve2",
+                      color: "$mauve12",
+                    },
+                  }}
+                  onClick={(ev: React.MouseEvent<HTMLElement>) => {
+                    ev.stopPropagation();
+                    handleCloseTab(idx);
+                  }}
+                >
+                  <X size="9px" weight="bold" />
+                </Box>
+              )}
             </Button>
           ))}
+          {onCreateNewTab && (
+            <Dialog open={isNewtabDialogOpen} onOpenChange={setIsNewtabDialogOpen}>
+              <DialogTrigger asChild>
+                <Button ghost size="sm" css={{ alignItems: "center", px: "$2", mr: "$3" }}>
+                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogTitle>Create new tab</DialogTitle>
+                <DialogDescription>
+                  <label>Tabname</label>
+                  <Input
+                    value={tabname}
+                    onChange={e => setTabname(e.target.value)}
+                    onKeyPress={e => {
+                      if (e.key === "Enter") {
+                        handleCreateTab();
+                      }
+                    }}
+                  />
+                  <ErrorText>{newtabError}</ErrorText>
+                </DialogDescription>
+
+                <Flex
+                  css={{
+                    marginTop: 25,
+                    justifyContent: "flex-end",
+                    gap: "$3",
+                  }}
+                >
+                  <DialogClose asChild>
+                    <Button outline>Cancel</Button>
+                  </DialogClose>
+                  <Button variant="primary" onClick={handleCreateTab}>
+                    Create
+                  </Button>
+                </Flex>
+                <DialogClose asChild>
+                  <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+                    <X size="20px" />
+                  </Box>
+                </DialogClose>
+              </DialogContent>
+            </Dialog>
+          )}
         </Stack>
       )}
-      {tabProps[active].children}
+      {keepAllAlive ? (
+        tabs.map((tab, idx) => {
+          // TODO Maybe rule out fragments as children
+          if (!isValidElement(tab.children)) {
+            if (active !== idx) return null;
+            return tab.children;
+          }
+          let key = tab.children.key || tab.header || idx;
+          let { children } = tab;
+          let { style, ...props } = children.props;
+          return (
+            <children.type
+              key={key}
+              {...props}
+              style={{ ...style, display: active !== idx ? "none" : undefined }}
+            />
+          );
+        })
+      ) : (
+        <Fragment key={tabs[active].header || active}>{tabs[active].children}</Fragment>
+      )}
     </>
   );
 };

content/transactions.json

@@ -0,0 +1,221 @@
+[
+  {
+    "TransactionType": "AccountDelete",
+    "Account": "rWYkbWkCeg8dP6rXALnjgZSjjLyih5NXm",
+    "Destination": "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe",
+    "DestinationTag": 13,
+    "Fee": "2000000",
+    "Sequence": 2470665,
+    "Flags": 2147483648
+  },
+  {
+    "TransactionType": "AccountSet",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "12",
+    "Sequence": 5,
+    "Domain": "6578616D706C652E636F6D",
+    "SetFlag": 5,
+    "MessageKey": "03AB40A0490F9B7ED8DF29D246BF2D6269820A0EE7742ACDD457BEA7C7D0931EDB"
+  },
+  {
+    "Account": "rUn84CUYbNjRoTQ6mSW7BVJPSVJNLb1QLo",
+    "TransactionType": "CheckCancel",
+    "CheckID": "49647F0D748DC3FE26BDACBC57F251AADEFFF391403EC9BF87C97F67E9977FB0",
+    "Fee": "12"
+  },
+  {
+    "Account": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy",
+    "TransactionType": "CheckCash",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
+    "Fee": "12"
+  },
+  {
+    "TransactionType": "CheckCreate",
+    "Account": "rUn84CUYbNjRoTQ6mSW7BVJPSVJNLb1QLo",
+    "Destination": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy",
+    "SendMax": "100000000",
+    "Expiration": 570113521,
+    "InvoiceID": "6F1DFD1D0FE8A32E40E1F2C05CF1C15545BAB56B617F9C6C2D63A6B704BEF59B",
+    "DestinationTag": 1,
+    "Fee": "12"
+  },
+  {
+    "TransactionType": "DepositPreauth",
+    "Account": "rsUiUMpnrgxQp24dJYZDhmV4bE3aBtQyt8",
+    "Authorize": "rEhxGqkqPPSxQ3P25J66ft5TwpzV14k2de",
+    "Fee": "10",
+    "Flags": 2147483648,
+    "Sequence": 2
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "EscrowCancel",
+    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "OfferSequence": 7
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "EscrowCreate",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "CancelAfter": 533257958,
+    "FinishAfter": 533171558,
+    "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
+    "DestinationTag": 23480,
+    "SourceTag": 11747
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "EscrowFinish",
+    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "OfferSequence": 7,
+    "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
+    "Fulfillment": "A0028000"
+  },
+  {
+    "TransactionType": "NFTokenBurn",
+    "Account": "rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B",
+    "Fee": "10",
+    "TokenID": "000B013A95F14B0044F78A264E41713C64B5F89242540EE208C3098E00000D65"
+  },
+  {
+    "TransactionType": "NFTokenAcceptOffer",
+    "Fee": "10"
+  },
+  {
+    "TransactionType": "NFTokenCancelOffer",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "TokenIDs": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007"
+  },
+  {
+    "TransactionType": "NFTokenCreateOffer",
+    "Account": "rs8jBmmfpwgmrSPgwMsh7CvKRmRt1JTVSX",
+    "TokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Flags": 1
+  },
+  {
+    "TransactionType": "OfferCancel",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Fee": "12",
+    "Flags": 0,
+    "LastLedgerSequence": 7108629,
+    "OfferSequence": 6,
+    "Sequence": 7
+  },
+  {
+    "TransactionType": "OfferCreate",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Fee": "12",
+    "Flags": 0,
+    "LastLedgerSequence": 7108682,
+    "Sequence": 8,
+    "TakerGets": "6000000",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    }
+  },
+  {
+    "TransactionType": "Payment",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Fee": "12",
+    "Flags": 2147483648,
+    "Sequence": 2
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "PaymentChannelCreate",
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "SettleDelay": 86400,
+    "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
+    "CancelAfter": 533171558,
+    "DestinationTag": 23480,
+    "SourceTag": 11747
+  },
+  {
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "TransactionType": "PaymentChannelFund",
+    "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
+    "Amount": {
+      "value": "200",
+      "type": "currency"
+    },
+    "Expiration": 543171558
+  },
+  {
+    "Flags": 0,
+    "TransactionType": "SetRegularKey",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "12",
+    "RegularKey": "rAR8rR8sUkBoCZFawhkWzY4Y5YoyuznwD"
+  },
+  {
+    "Flags": 0,
+    "TransactionType": "SignerListSet",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "12",
+    "SignerQuorum": 3,
+    "SignerEntries": {
+      "type": "json",
+      "value": [
+        {
+          "SignerEntry": {
+            "Account": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+            "SignerWeight": 2
+          }
+        },
+        {
+          "SignerEntry": {
+            "Account": "rUpy3eEg8rqjqfUoLeBnZkscbKbFsKXC3v",
+            "SignerWeight": 1
+          }
+        },
+        {
+          "SignerEntry": {
+            "Account": "raKEEVSGnKSD9Zyvxu4z6Pqpm4ABH8FS6n",
+            "SignerWeight": 1
+          }
+        }
+      ]
+    }
+  },
+  {
+    "TransactionType": "TicketCreate",
+    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Fee": "10",
+    "Sequence": 381,
+    "TicketCount": 10
+  },
+  {
+    "TransactionType": "TrustSet",
+    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Fee": "12",
+    "Flags": 262144,
+    "LastLedgerSequence": 8007750,
+    "Amount": {
+      "value": "100",
+      "type": "currency"
+    },
+    "Sequence": 12
+  }
+]

pages/_app.tsx

@@ -17,6 +17,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();
   const slug = router.query?.slug;
   const gistId = (Array.isArray(slug) && slug[0]) ?? null;
+
   useEffect(() => {
     if (gistId && router.isReady) {
       fetchFiles(gistId);

pages/test/[[...slug]].tsx

@@ -1,6 +1,15 @@
 import { Container, Flex, Box, Tabs, Tab, Input, Select, Text, Button } from "../../components";
 import { Play } from "phosphor-react";
 import dynamic from "next/dynamic";
+import { useSnapshot } from "valtio";
+import state from "../../state";
+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,
@@ -9,103 +18,320 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
   ssr: false,
 });
 
-const Transaction = () => {
-  const options = [
-    { value: "chocolate", label: "Chocolate" },
-    { value: "strawberry", label: "Strawberry" },
-    { value: "vanilla", label: "Vanilla" },
-    {
-      value: "long",
-      label: "lorem woy uiwyf wyfw8 fwfw98f w98fy wf8fw89f 9w8fy w9fyw9f wf7tdw9f ",
-    },
-  ];
+// type SelectOption<T> = { value: T, label: string };
+type TxFields = Omit<typeof transactionsData[0], "Account" | "Sequence" | "TransactionType">;
+type OtherFields = (keyof Omit<TxFields, "Destination">)[];
+
+interface Props {
+  header?: string;
+}
+
+const Transaction: FC<Props> = ({ header, ...props }) => {
+  const snap = useSnapshot(state);
+
+  const transactionsOptions = transactionsData.map(tx => ({
+    value: tx.TransactionType,
+    label: tx.TransactionType,
+  }));
+  const [selectedTransaction, setSelectedTransaction] = useState<
+    typeof transactionsOptions[0] | null
+  >(null);
+
+  const accountOptions = snap.accounts.map(acc => ({
+    label: acc.name,
+    value: acc.address,
+  }));
+  const [selectedAccount, setSelectedAccount] = useState<typeof accountOptions[0] | null>(null);
+
+  const destAccountOptions = snap.accounts
+    .map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }))
+    .filter(acc => acc.value !== selectedAccount?.value);
+  const [selectedDestAccount, setSelectedDestAccount] = useState<
+    typeof destAccountOptions[0] | null
+  >(null);
+
+  const [txIsLoading, setTxIsLoading] = useState(false);
+  const [txIsDisabled, setTxIsDisabled] = useState(false);
+  const [txFields, setTxFields] = useState<TxFields>({});
+
+  useEffect(() => {
+    const transactionType = selectedTransaction?.value;
+    const account = snap.accounts.find(acc => acc.address === selectedAccount?.value);
+    if (!account || !transactionType || txIsLoading) {
+      setTxIsDisabled(true);
+    } else {
+      setTxIsDisabled(false);
+    }
+  }, [txIsLoading, selectedTransaction, selectedAccount, snap.accounts]);
+
+  useEffect(() => {
+    let _txFields: TxFields | undefined = transactionsData.find(
+      tx => tx.TransactionType === selectedTransaction?.value
+    );
+    if (!_txFields) return setTxFields({});
+    _txFields = { ..._txFields } as TxFields;
+
+    setSelectedDestAccount(null);
+    // @ts-ignore
+    delete _txFields.TransactionType;
+    // @ts-ignore
+    delete _txFields.Account;
+    // @ts-ignore
+    delete _txFields.Sequence;
+    setTxFields(_txFields);
+  }, [selectedTransaction, setSelectedDestAccount]);
+
+  const submitTest = useCallback(async () => {
+    const account = snap.accounts.find(acc => acc.address === selectedAccount?.value);
+    const TransactionType = selectedTransaction?.value;
+    if (!account || !TransactionType || txIsDisabled) return;
+
+    setTxIsLoading(true);
+    // setTxIsError(null)
+    try {
+      let options = { ...txFields };
+
+      options.Destination = selectedDestAccount?.value;
+      (Object.keys(options) as (keyof TxFields)[]).forEach(field => {
+        let _value = options[field];
+        // convert currency
+        if (typeof _value === "object" && _value.type === "currency") {
+          if (+_value.value) {
+            options[field] = (+_value.value * 1000000 + "") as any;
+          } else {
+            options[field] = undefined; // 👇 💀
+          }
+        }
+        // handle type: `json`
+        if (typeof _value === "object" && _value.type === "json") {
+          if (typeof _value.value === "object") {
+            options[field] = _value.value as any;
+          } else {
+            try {
+              options[field] = JSON.parse(_value.value);
+            } catch (error) {
+              const message = `Input error for json field '${field}': ${
+                error instanceof Error ? error.message : ""
+              }`;
+              throw Error(message);
+            }
+          }
+        }
+
+        // delete unneccesary fields
+        if (!options[field]) {
+          delete options[field];
+        }
+      });
+      const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
+      await sendTransaction(
+        account,
+        {
+          TransactionType,
+          ...options,
+        },
+        { logPrefix }
+      );
+    } catch (error) {
+      console.error(error);
+      if (error instanceof Error) {
+        state.transactionLogs.push({ type: "error", message: error.message });
+      }
+    }
+    setTxIsLoading(false);
+  }, [
+    header,
+    selectedAccount?.value,
+    selectedDestAccount?.value,
+    selectedTransaction?.value,
+    snap.accounts,
+    txFields,
+    txIsDisabled,
+  ]);
+
+  const resetState = useCallback(() => {
+    setSelectedAccount(null);
+    setSelectedDestAccount(null);
+    setSelectedTransaction(null);
+    setTxFields({});
+    setTxIsDisabled(false);
+    setTxIsLoading(false);
+  }, []);
+
+  const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
+  const otherFields = Object.keys(txFields).filter(k => !usualFields.includes(k)) as OtherFields;
   return (
-    <>
-      <Container css={{ p: "$3 0", fontSize: "$sm" }}>
-        <Flex column fluid>
+    <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
+      <Container css={{ p: "$3 0", fontSize: "$sm", height: "calc(100% - 28px)" }}>
+        <Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
           <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
             <Text muted css={{ mr: "$3" }}>
               Transaction type:{" "}
             </Text>
             <Select
-              instanceId="transaction"
+              instanceId="transactionsType"
               placeholder="Select transaction type"
+              options={transactionsOptions}
+              hideSelectedOptions
               css={{ width: "70%" }}
-              options={options}
+              value={selectedTransaction}
+              onChange={tt => setSelectedTransaction(tt as any)}
             />
           </Flex>
           <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
             <Text muted css={{ mr: "$3" }}>
-              From account:{" "}
+              Account:{" "}
             </Text>
             <Select
               instanceId="from-account"
-              placeholder="Select account from which to send from"
+              placeholder="Select your account"
               css={{ width: "70%" }}
-              options={options}
-            />
-          </Flex>
-          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
-            <Text muted css={{ mr: "$3" }}>
-              Amount (XRP):{" "}
-            </Text>
-            <Input defaultValue="0" variant="deep" css={{ width: "70%", flex: "inherit", height: "$9" }} />
-          </Flex>
-          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
-            <Text muted css={{ mr: "$3" }}>
-              To account:{" "}
-            </Text>
-            <Select
-              instanceId="to-account"
-              placeholder="Select account from which to send from"
-              css={{ width: "70%" }}
-              options={options}
+              options={accountOptions}
+              value={selectedAccount}
+              onChange={acc => setSelectedAccount(acc as any)}
             />
           </Flex>
+          {txFields.Amount !== undefined && (
+            <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+              <Text muted css={{ mr: "$3" }}>
+                Amount (XRP):{" "}
+              </Text>
+              <Input
+                value={txFields.Amount.value}
+                onChange={e =>
+                  setTxFields({
+                    ...txFields,
+                    Amount: { type: "currency", value: e.target.value },
+                  })
+                }
+                variant="deep"
+                css={{ width: "70%", flex: "inherit", height: "$9" }}
+              />
+            </Flex>
+          )}
+          {txFields.Destination !== undefined && (
+            <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+              <Text muted css={{ mr: "$3" }}>
+                Destination account:{" "}
+              </Text>
+              <Select
+                instanceId="to-account"
+                placeholder="Select the destination account"
+                css={{ width: "70%" }}
+                options={destAccountOptions}
+                value={selectedDestAccount}
+                isClearable
+                onChange={acc => setSelectedDestAccount(acc as any)}
+              />
+            </Flex>
+          )}
+          {otherFields.map(field => {
+            let _value = txFields[field];
+            let value = typeof _value === "object" ? _value.value : _value;
+            value = typeof value === "object" ? JSON.stringify(value) : value?.toLocaleString();
+            let isCurrency = typeof _value === "object" && _value.type === "currency";
+            return (
+              <Flex
+                key={field}
+                row
+                fluid
+                css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}
+              >
+                <Text muted css={{ mr: "$3" }}>
+                  {field + (isCurrency ? " (XRP)" : "")}:{" "}
+                </Text>
+                <Input
+                  value={value}
+                  onChange={e =>
+                    setTxFields({
+                      ...txFields,
+                      [field]:
+                        typeof _value === "object"
+                          ? { ..._value, value: e.target.value }
+                          : e.target.value,
+                    })
+                  }
+                  variant="deep"
+                  css={{ width: "70%", flex: "inherit", height: "$9" }}
+                />
+              </Flex>
+            );
+          })}
         </Flex>
       </Container>
-      <Flex row css={{ justifyContent: "space-between" }}>
+      <Flex
+        row
+        css={{
+          justifyContent: "space-between",
+          position: "absolute",
+          left: 0,
+          bottom: 0,
+          width: "100%",
+        }}
+      >
         <Button outline>VIEW AS JSON</Button>
         <Flex row>
-          <Button outline css={{ mr: "$3" }}>
+          <Button onClick={resetState} outline css={{ mr: "$3" }}>
             RESET
           </Button>
-          <Button variant="primary">
+          <Button
+            variant="primary"
+            onClick={submitTest}
+            isLoading={txIsLoading}
+            disabled={txIsDisabled}
+          >
             <Play weight="bold" size="16px" />
             RUN TEST
           </Button>
         </Flex>
       </Flex>
-    </>
+    </Box>
   );
 };
 
 const Test = () => {
+  const snap = useSnapshot(state);
+  const [tabHeaders, setTabHeaders] = useState<string[]>(["test1.json"]);
   return (
     <Container css={{ py: "$3", px: 0 }}>
-      <Flex row fluid css={{ justifyContent: 'center', mb: "$2", height: '40vh', minHeight: '300px', p: '$3 $2' }}>
+      <Flex
+        row
+        fluid
+        css={{ justifyContent: "center", mb: "$2", height: "40vh", minHeight: "300px", p: "$3 $2" }}
+      >
         <Box css={{ width: "55%", px: "$2" }}>
-          <Tabs>
-            {/* TODO Dynamic tabs */}
-            <Tab header="test1.json">
-              <Transaction />
-            </Tab>
-            <Tab header="test2.json">
-              <Transaction />
-            </Tab>
+          <Tabs
+            keepAllAlive
+            forceDefaultExtension
+            defaultExtension=".json"
+            onCreateNewTab={name => setTabHeaders(tabHeaders.concat(name))}
+            onCloseTab={index => setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))}
+          >
+            {tabHeaders.map(header => (
+              <Tab key={header} header={header}>
+                <Transaction header={header} />
+              </Tab>
+            ))}
           </Tabs>
         </Box>
-        <Box css={{ width: "45%", mx: "$2", height: '100%' }}>
+        <Box css={{ width: "45%", mx: "$2", height: "100%" }}>
           <Accounts card hideDeployBtn showHookStats />
         </Box>
       </Flex>
 
       <Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
         <Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
-          <LogBox title="From Log" logs={[]} clearLog={() => {}} />
+          <LogBox
+            title="Development Log"
+            logs={snap.transactionLogs}
+            clearLog={() => (state.transactionLogs = [])}
+          />
         </Box>
         <Box css={{ width: "50%" }}>
-          <LogBox title="To Log" logs={[]} clearLog={() => {}} />
+          <DebugStream />
         </Box>
       </Flex>
     </Container>

state/actions/index.ts

@@ -8,6 +8,7 @@ import { saveFile } from "./saveFile";
 import { syncToGist } from "./syncToGist";
 import { updateEditorSettings } from "./updateEditorSettings";
 import { downloadAsZip } from "./downloadAsZip";
+import { sendTransaction } from "./sendTransaction";
 
 export {
   addFaucetAccount,
@@ -19,5 +20,6 @@ export {
   saveFile,
   syncToGist,
   updateEditorSettings,
-  downloadAsZip
+  downloadAsZip,
+  sendTransaction
 };

state/actions/saveFile.ts

@@ -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" });
   }
-};
+};

state/actions/sendTransaction.ts

@@ -0,0 +1,53 @@
+import { derive, sign } from "xrpl-accountlib";
+
+import state from '..'
+import type { IAccount } from "..";
+
+interface TransactionOptions {
+    TransactionType: string,
+    Account?: string,
+    Fee?: string,
+    Destination?: string
+    [index: string]: any
+}
+interface OtherOptions {
+    logPrefix?: string
+}
+
+export const sendTransaction = async (account: IAccount, txOptions: TransactionOptions, options?: OtherOptions) => {
+    if (!state.client) throw Error('XRPL client not initalized')
+
+    const { Fee = "1000", ...opts } = txOptions
+    const tx: TransactionOptions = {
+        Account: account.address,
+        Sequence: account.sequence, // TODO auto-fillable
+        Fee,  // TODO auto-fillable
+        ...opts
+    };
+    const { logPrefix = '' } = options || {}
+    try {
+        const signedAccount = derive.familySeed(account.secret);
+        const { signedTransaction } = sign(tx, signedAccount);
+        const response = await state.client.send({
+            command: "submit",
+            tx_blob: signedTransaction,
+        });
+        if (response.engine_result === "tesSUCCESS") {
+            state.transactionLogs.push({
+                type: 'success',
+                message: `${logPrefix}[${response.engine_result}] ${response.engine_result_message}`
+            })
+        } else {
+            state.transactionLogs.push({
+                type: "error",
+                message: `${logPrefix}[${response.error || response.engine_result}] ${response.error_exception || response.engine_result_message}`,
+            });
+        }
+    } catch (err) {
+        console.error(err);
+        state.transactionLogs.push({
+            type: "error",
+            message: err instanceof Error ? `${logPrefix}Error: ${err.message}` : `${logPrefix}Something went wrong, try again later`,
+        });
+    }
+};

state/index.ts

@@ -49,6 +49,8 @@ export interface IState {
   compiling: boolean;
   logs: ILog[];
   deployLogs: ILog[];
+  transactionLogs: ILog[];
+  debugLogs: ILog[];
   editorCtx?: typeof monaco.editor;
   editorSettings: {
     tabSize: number;
@@ -70,6 +72,8 @@ let initialState: IState = {
   compiling: false,
   logs: [],
   deployLogs: [],
+  transactionLogs: [],
+  debugLogs: [],
   editorCtx: undefined,
   gistId: undefined,
   gistOwner: undefined,

stitches.config.ts

@@ -1,6 +1,7 @@
 // stitches.config.ts
 import type Stitches from '@stitches/react';
 import { createStitches } from '@stitches/react';
+
 import {
   gray,
   blue,
@@ -47,11 +48,12 @@ export const {
       ...yellow,
       ...purple,
       background: "$gray1",
+      backgroundAlt: "$gray4",
       text: "$gray12",
       primary: "$plum",
       white: "white",
       black: "black",
-      'deep': 'rgb(248, 248, 248)'
+      'deep': 'rgb(244, 244, 244)'
     },
     fonts: {
       body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -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),
   },
 });