added a fixed height for logbox header to logbox content box height can be calculated easily

Transaction tabs

components/Accounts.tsx

@@ -36,11 +36,13 @@ const AccountDialog = ({
 }) => {
   const snap = useSnapshot(state);
   const [showSecret, setShowSecret] = useState(false);
-  const activeAccount = snap.accounts.find(account => account.address === activeAccountAddress);
+  const activeAccount = snap.accounts.find(
+    (account) => account.address === activeAccountAddress
+  );
   return (
     <Dialog
       open={Boolean(activeAccountAddress)}
-      onOpenChange={open => {
+      onOpenChange={(open) => {
         setShowSecret(false);
         !open && setActiveAccountAddress(null);
       }}
@@ -135,7 +137,7 @@ const AccountDialog = ({
                     }}
                     ghost
                     size="xs"
-                    onClick={() => setShowSecret(curr => !curr)}
+                    onClick={() => setShowSecret((curr) => !curr)}
                   >
                     {showSecret ? "Hide" : "Show"}
                   </Button>
@@ -181,7 +183,11 @@ const AccountDialog = ({
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  <Button size="sm" ghost css={{ color: "$green11 !important", mt: "$3" }}>
+                  <Button
+                    size="sm"
+                    ghost
+                    css={{ color: "$green11 !important", mt: "$3" }}
+                  >
                     <ArrowSquareOut size="15px" />
                   </Button>
                 </a>
@@ -197,8 +203,10 @@ const AccountDialog = ({
                 >
                   {activeAccount && activeAccount?.hooks?.length > 0
                     ? activeAccount?.hooks
-                        .map(i => {
+                        .map((i) => {
-                          return `${i?.substring(0, 6)}...${i?.substring(i.length - 4)}`;
+                          return `${i?.substring(0, 6)}...${i?.substring(
+                            i.length - 4
+                          )}`;
                         })
                         .join(", ")
                     : "–"}
@@ -223,13 +231,15 @@ interface AccountProps {
   showHookStats?: boolean;
 }
 
-const Accounts: FC<AccountProps> = props => {
+const Accounts: FC<AccountProps> = (props) => {
   const snap = useSnapshot(state);
-  const [activeAccountAddress, setActiveAccountAddress] = useState<string | null>(null);
+  const [activeAccountAddress, setActiveAccountAddress] = useState<
+    string | null
+  >(null);
   useEffect(() => {
     const fetchAccInfo = async () => {
       if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map(acc =>
+        const requests = snap.accounts.map((acc) =>
           snap.client?.send({
             id: acc.address,
             command: "account_info",
@@ -241,13 +251,15 @@ const Accounts: FC<AccountProps> = props => {
           const address = res?.account_data?.Account as string;
           const balance = res?.account_data?.Balance as string;
           const sequence = res?.account_data?.Sequence as number;
-          const accountToUpdate = state.accounts.find(acc => acc.address === address);
+          const accountToUpdate = state.accounts.find(
+            (acc) => acc.address === address
+          );
           if (accountToUpdate) {
             accountToUpdate.xrp = balance;
             accountToUpdate.sequence = sequence;
           }
         });
-        const objectRequests = snap.accounts.map(acc => {
+        const objectRequests = snap.accounts.map((acc) => {
           return snap.client?.send({
             id: `${acc.address}-hooks`,
             command: "account_objects",
@@ -257,7 +269,9 @@ const Accounts: FC<AccountProps> = props => {
         const objectResponses = await Promise.all(objectRequests);
         objectResponses.forEach((res: any) => {
           const address = res?.account as string;
-          const accountToUpdate = state.accounts.find(acc => acc.address === address);
+          const accountToUpdate = state.accounts.find(
+            (acc) => acc.address === address
+          );
           if (accountToUpdate) {
             accountToUpdate.hooks = res.account_objects
               .filter((ac: any) => ac?.LedgerEntryType === "Hook")
@@ -289,18 +303,19 @@ const Accounts: FC<AccountProps> = props => {
         display: "flex",
         backgroundColor: props.card ? "$deep" : "$mauve1",
         position: "relative",
-        width: "100%",
+        flex: "1",
         height: "100%",
-        flexShrink: 0,
+        border: "1px solid $mauve6",
-        borderTop: "1px solid $mauve6",
-        borderRight: "1px solid $mauve6",
-        borderLeft: "1px solid $mauve6",
-        borderBottom: "1px solid $mauve6",
         borderRadius: props.card ? "$md" : undefined,
       }}
     >
       <Container css={{ p: 0, flexShrink: 1, height: "100%" }}>
-        <Flex css={{ py: "$3", borderBottom: props.card ? "1px solid $mauve6" : undefined }}>
+        <Flex
+          css={{
+            py: "$3",
+            borderBottom: props.card ? "1px solid $mauve6" : undefined,
+          }}
+        >
           <Heading
             as="h3"
             css={{
@@ -338,7 +353,7 @@ const Accounts: FC<AccountProps> = props => {
             overflowY: "auto",
           }}
         >
-          {snap.accounts.map(account => (
+          {snap.accounts.map((account) => (
             <Flex
               column
               key={account.address + account.name}
@@ -363,7 +378,12 @@ const Accounts: FC<AccountProps> = props => {
               >
                 <Box>
                   <Text>{account.name} </Text>
-                  <Text css={{ color: "$mauve9" }}>
+                  <Text
+                    css={{
+                      color: "$mauve9",
+                      wordBreak: "break-word",
+                    }}
+                  >
                     {account.address} (
                     {Dinero({
                       amount: Number(account?.xrp || "0"),
@@ -386,10 +406,11 @@ const Accounts: FC<AccountProps> = props => {
                     isLoading={account.isLoading}
                     disabled={
                       account.isLoading ||
-                      !snap.files.filter(file => file.compiledWatContent).length
+                      !snap.files.filter((file) => file.compiledWatContent)
+                        .length
                     }
                     variant="secondary"
-                    onClick={e => {
+                    onClick={(e) => {
                       e.stopPropagation();
                       deployHook(account);
                     }}
@@ -432,7 +453,7 @@ const ImportAccountDialog = () => {
             name="secret"
             type="password"
             value={value}
-            onChange={e => setValue(e.target.value)}
+            onChange={(e) => setValue(e.target.value)}
           />
         </DialogDescription>
 

components/LogBox.tsx

@@ -21,7 +21,14 @@ interface ILogBox {
   enhanced?: boolean;
 }
 
-const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
+const LogBox: React.FC<ILogBox> = ({
+  title,
+  clearLog,
+  logs,
+  children,
+  renderNav,
+  enhanced,
+}) => {
   const logRef = useRef<HTMLPreElement>(null);
   const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
 
@@ -38,10 +45,23 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
         background: "$mauve1",
         position: "relative",
         flex: 1,
+        height: "100%",
       }}
     >
-      <Container css={{ px: 0, flexShrink: 1 }}>
+      <Container
-        <Flex css={{ py: "$3", alignItems: "center", fontSize: "$sm", fontWeight: 300 }}>
+        css={{
+          px: 0,
+          height: "100%",
+        }}
+      >
+        <Flex
+          css={{
+            height: "48px",
+            alignItems: "center",
+            fontSize: "$sm",
+            fontWeight: 300,
+          }}
+        >
           <Heading
             as="h3"
             css={{
@@ -67,6 +87,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
             )}
           </Flex>
         </Flex>
+
         <Box
           as="pre"
           ref={logRef}
@@ -76,14 +97,14 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
             display: "flex",
             flexDirection: "column",
             width: "100%",
-            height: "160px",
+            height: "calc(100% - 48px)", // 100% minus the logbox header height
+            overflowY: "auto",
             fontSize: "13px",
             fontWeight: "$body",
             fontFamily: "$monospace",
             px: "$3",
             pb: "$2",
             whiteSpace: "normal",
-            overflowY: "auto",
           }}
         >
           {logs?.map((log, index) => (
@@ -96,7 +117,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
                     backgroundColor: enhanced ? "$backgroundAlt" : undefined,
                   },
                 },
-                p: "$2 $1",
+                p: enhanced ? "$2 $1" : undefined,
               }}
             >
               <LogText variant={log.type}>

components/LogText.tsx

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

components/Navigation.tsx

@@ -27,7 +27,7 @@ import {
   DialogTrigger,
 } from "./Dialog";
 import PanelBox from "./PanelBox";
-import { templateFileIds } from '../state/constants';
+import { templateFileIds } from "../state/constants";
 
 const Navigation = () => {
   const router = useRouter();
@@ -43,6 +43,7 @@ const Navigation = () => {
         borderBottom: "1px solid $mauve6",
         position: "relative",
         zIndex: 2003,
+        height: "60px",
       }}
     >
       <Container
@@ -83,8 +84,12 @@ const Navigation = () => {
               <Spinner />
             ) : (
               <>
-                <Heading css={{ lineHeight: 1 }}>{snap.files?.[0]?.name || "XRPL Hooks"}</Heading>
+                <Heading css={{ lineHeight: 1 }}>
-                <Text css={{ fontSize: "$xs", color: "$mauve10", 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 &&
@@ -96,7 +101,10 @@ 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" />
@@ -157,9 +165,12 @@ 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",
@@ -244,27 +255,54 @@ const Navigation = () => {
                         },
                       }}
                     >
-                      <PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
+                      <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/${templateFileIds.starter}`}>
+                      <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/${templateFileIds.accept}`}>
+                      <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/${templateFileIds.notary}`}>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.notary}`}
+                      >
                         <Heading>Notary</Heading>
-                        <Text>Collecting signatures for multi-sign transactions</Text>
+                        <Text>
+                          Collecting signatures for multi-sign transactions
+                        </Text>
                       </PanelBox>
-                      <PanelBox as="a" href={`/develop/${templateFileIds.carbon}`}>
+                      <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}`}>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.peggy}`}
+                      >
                         <Heading>Peggy</Heading>
                         <Text>An oracle based stabe coin hook</Text>
                       </PanelBox>
@@ -313,18 +351,42 @@ const Navigation = () => {
             }}
           >
             <ButtonGroup>
-              <Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref shallow>
+              <Link
-                <Button as="a" outline={!router.pathname.includes("/develop")} uppercase>
+                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>
+              <Link
-                <Button as="a" outline={!router.pathname.includes("/deploy")} uppercase>
+                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>
+              <Link
-                <Button as="a" outline={!router.pathname.includes("/test")} uppercase>
+                href={gistId ? `/test/${gistId}` : "/test"}
+                passHref
+                shallow
+              >
+                <Button
+                  as="a"
+                  outline={!router.pathname.includes("/test")}
+                  uppercase
+                >
                   Test
                 </Button>
               </Link>

package.json

@@ -41,6 +41,7 @@
     "react-hot-toast": "^2.1.1",
     "react-new-window": "^0.2.1",
     "react-select": "^5.2.1",
+    "react-split": "^2.0.14",
     "react-stay-scrolled": "^7.4.0",
     "reconnecting-websocket": "^4.4.0",
     "valtio": "^1.2.5",

pages/deploy/[[...slug]].tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import dynamic from "next/dynamic";
-import { Flex, Box } from "../../components";
 import { useSnapshot } from "valtio";
 import state from "../../state";
+import Split from "react-split";
 
 const DeployEditor = dynamic(() => import("../../components/DeployEditor"), {
   ssr: false,
@@ -19,23 +19,41 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
 const Deploy = () => {
   const snap = useSnapshot(state);
   return (
-    <>
+    <Split
-      <main style={{ display: "flex", flex: 1, height: 'calc(100vh - 30vh - 60px)' }}>
+      direction="vertical"
+      gutterSize={4}
+      gutterAlign="center"
+      sizes={[40, 60]}
+      style={{ height: "calc(100vh - 60px)" }}
+    >
+      <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <DeployEditor />
       </main>
-      <Flex css={{ flexDirection: "row", width: "100%", minHeight: '225px', height: '30vh' }}>
+      <Split
-        <Box css={{ width: "100%" }}>
+        direction="horizontal"
+        sizes={[50, 50]}
+        minSize={[320, 160]}
+        gutterSize={4}
+        gutterAlign="center"
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <div style={{ alignItems: "stretch", display: "flex" }}>
           <Accounts />
-        </Box>
+        </div>
-        <Box css={{ width: "100%" }}>
+        <div>
           <LogBox
             title="Deploy Log"
             logs={snap.deployLogs}
             clearLog={() => (state.deployLogs = [])}
           />
-        </Box>
+        </div>
-      </Flex>
+      </Split>
-    </>
+    </Split>
   );
 };
 

pages/develop/[[...slug]].tsx

@@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
 import { useSnapshot } from "valtio";
 import Hotkeys from "react-hot-keys";
 import { Play } from "phosphor-react";
+import Split from "react-split";
 
 import type { NextPage } from "next";
 import { compileCode } from "../../state/actions";
@@ -19,8 +20,16 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
 
 const Home: NextPage = () => {
   const snap = useSnapshot(state);
+
   return (
-    <>
+    <Split
+      direction="vertical"
+      sizes={[70, 30]}
+      minSize={[100, 100]}
+      gutterAlign="center"
+      gutterSize={4}
+      style={{ height: "calc(100vh - 60px)" }}
+    >
       <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <HooksEditor />
         {snap.files[snap.active]?.name?.split(".")?.[1].toLowerCase() ===
@@ -65,7 +74,7 @@ const Home: NextPage = () => {
           logs={snap.logs}
         />
       </Box>
-    </>
+    </Split>
   );
 };
 

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

@@ -1,7 +1,18 @@
-import { Container, Flex, Box, Tabs, Tab, Input, Select, Text, Button } from "../../components";
+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 Split from "react-split";
 import state from "../../state";
 import { sendTransaction } from "../../state/actions";
 import { useCallback, useEffect, useState, FC } from "react";
@@ -19,7 +30,10 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
 });
 
 // type SelectOption<T> = { value: T, label: string };
-type TxFields = Omit<typeof transactionsData[0], "Account" | "Sequence" | "TransactionType">;
+type TxFields = Omit<
+  typeof transactionsData[0],
+  "Account" | "Sequence" | "TransactionType"
+>;
 type OtherFields = (keyof Omit<TxFields, "Destination">)[];
 
 interface Props {
@@ -29,7 +43,7 @@ interface Props {
 const Transaction: FC<Props> = ({ header, ...props }) => {
   const snap = useSnapshot(state);
 
-  const transactionsOptions = transactionsData.map(tx => ({
+  const transactionsOptions = transactionsData.map((tx) => ({
     value: tx.TransactionType,
     label: tx.TransactionType,
   }));
@@ -37,18 +51,20 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
     typeof transactionsOptions[0] | null
   >(null);
 
-  const accountOptions = snap.accounts.map(acc => ({
+  const accountOptions = snap.accounts.map((acc) => ({
     label: acc.name,
     value: acc.address,
   }));
-  const [selectedAccount, setSelectedAccount] = useState<typeof accountOptions[0] | null>(null);
+  const [selectedAccount, setSelectedAccount] = useState<
+    typeof accountOptions[0] | null
+  >(null);
 
   const destAccountOptions = snap.accounts
-    .map(acc => ({
+    .map((acc) => ({
       label: acc.name,
       value: acc.address,
     }))
-    .filter(acc => acc.value !== selectedAccount?.value);
+    .filter((acc) => acc.value !== selectedAccount?.value);
   const [selectedDestAccount, setSelectedDestAccount] = useState<
     typeof destAccountOptions[0] | null
   >(null);
@@ -59,7 +75,9 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
 
   useEffect(() => {
     const transactionType = selectedTransaction?.value;
-    const account = snap.accounts.find(acc => acc.address === selectedAccount?.value);
+    const account = snap.accounts.find(
+      (acc) => acc.address === selectedAccount?.value
+    );
     if (!account || !transactionType || txIsLoading) {
       setTxIsDisabled(true);
     } else {
@@ -69,7 +87,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
 
   useEffect(() => {
     let _txFields: TxFields | undefined = transactionsData.find(
-      tx => tx.TransactionType === selectedTransaction?.value
+      (tx) => tx.TransactionType === selectedTransaction?.value
     );
     if (!_txFields) return setTxFields({});
     _txFields = { ..._txFields } as TxFields;
@@ -85,7 +103,9 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
   }, [selectedTransaction, setSelectedDestAccount]);
 
   const submitTest = useCallback(async () => {
-    const account = snap.accounts.find(acc => acc.address === selectedAccount?.value);
+    const account = snap.accounts.find(
+      (acc) => acc.address === selectedAccount?.value
+    );
     const TransactionType = selectedTransaction?.value;
     if (!account || !TransactionType || txIsDisabled) return;
 
@@ -95,7 +115,7 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
       let options = { ...txFields };
 
       options.Destination = selectedDestAccount?.value;
-      (Object.keys(options) as (keyof TxFields)[]).forEach(field => {
+      (Object.keys(options) as (keyof TxFields)[]).forEach((field) => {
         let _value = options[field];
         // convert currency
         if (typeof _value === "object" && _value.type === "currency") {
@@ -162,12 +182,20 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
   }, []);
 
   const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
-  const otherFields = Object.keys(txFields).filter(k => !usualFields.includes(k)) as OtherFields;
+  const otherFields = Object.keys(txFields).filter(
+    (k) => !usualFields.includes(k)
+  ) as OtherFields;
   return (
     <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
-      <Container css={{ p: "$3 0", fontSize: "$sm", height: "calc(100% - 28px)" }}>
+      <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" }}>
+          <Flex
+            row
+            fluid
+            css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}
+          >
             <Text muted css={{ mr: "$3" }}>
               Transaction type:{" "}
             </Text>
@@ -178,10 +206,14 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
               hideSelectedOptions
               css={{ width: "70%" }}
               value={selectedTransaction}
-              onChange={tt => setSelectedTransaction(tt as any)}
+              onChange={(tt) => setSelectedTransaction(tt as any)}
             />
           </Flex>
-          <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+          <Flex
+            row
+            fluid
+            css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}
+          >
             <Text muted css={{ mr: "$3" }}>
               Account:{" "}
             </Text>
@@ -191,17 +223,25 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
               css={{ width: "70%" }}
               options={accountOptions}
               value={selectedAccount}
-              onChange={acc => setSelectedAccount(acc as any)}
+              onChange={(acc) => setSelectedAccount(acc as any)}
             />
           </Flex>
           {txFields.Amount !== undefined && (
-            <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+            <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 =>
+                onChange={(e) =>
                   setTxFields({
                     ...txFields,
                     Amount: { type: "currency", value: e.target.value },
@@ -213,7 +253,15 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
             </Flex>
           )}
           {txFields.Destination !== undefined && (
-            <Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
+            <Flex
+              row
+              fluid
+              css={{
+                justifyContent: "flex-end",
+                alignItems: "center",
+                mb: "$3",
+              }}
+            >
               <Text muted css={{ mr: "$3" }}>
                 Destination account:{" "}
               </Text>
@@ -224,28 +272,36 @@ const Transaction: FC<Props> = ({ header, ...props }) => {
                 options={destAccountOptions}
                 value={selectedDestAccount}
                 isClearable
-                onChange={acc => setSelectedDestAccount(acc as any)}
+                onChange={(acc) => setSelectedDestAccount(acc as any)}
               />
             </Flex>
           )}
-          {otherFields.map(field => {
+          {otherFields.map((field) => {
             let _value = txFields[field];
             let value = typeof _value === "object" ? _value.value : _value;
-            value = typeof value === "object" ? JSON.stringify(value) : value?.toLocaleString();
+            value =
-            let isCurrency = typeof _value === "object" && _value.type === "currency";
+              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" }}
+                css={{
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  mb: "$3",
+                }}
               >
                 <Text muted css={{ mr: "$3" }}>
                   {field + (isCurrency ? " (XRP)" : "")}:{" "}
                 </Text>
                 <Input
                   value={value}
-                  onChange={e =>
+                  onChange={(e) =>
                     setTxFields({
                       ...txFields,
                       [field]:
@@ -296,44 +352,92 @@ const Test = () => {
   const snap = useSnapshot(state);
   const [tabHeaders, setTabHeaders] = useState<string[]>(["test1.json"]);
   return (
-    <Container css={{ py: "$3", px: 0 }}>
+    <Container css={{ px: 0 }}>
-      <Flex
+      <Split
-        row
+        direction="vertical"
-        fluid
+        sizes={[50, 50]}
-        css={{ justifyContent: "center", mb: "$2", height: "40vh", minHeight: "300px", p: "$3 $2" }}
+        gutterSize={4}
+        gutterAlign="center"
+        style={{ height: "calc(100vh - 60px)" }}
       >
-        <Box css={{ width: "55%", px: "$2" }}>
+        <Flex
-          <Tabs
+          row
-            keepAllAlive
+          fluid
-            forceDefaultExtension
+          css={{
-            defaultExtension=".json"
+            justifyContent: "center",
-            onCreateNewTab={name => setTabHeaders(tabHeaders.concat(name))}
+            p: "$3 $2",
-            onCloseTab={index => setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))}
+          }}
+        >
+          <Split
+            direction="horizontal"
+            sizes={[50, 50]}
+            minSize={[180, 320]}
+            gutterSize={4}
+            gutterAlign="center"
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              width: "100%",
+              height: "100%",
+            }}
           >
-            {tabHeaders.map(header => (
+            <Box css={{ width: "55%", px: "$2" }}>
-              <Tab key={header} header={header}>
+              <Tabs
-                <Transaction header={header} />
+                keepAllAlive
-              </Tab>
+                forceDefaultExtension
-            ))}
+                defaultExtension=".json"
-          </Tabs>
+                onCreateNewTab={(name) =>
-        </Box>
+                  setTabHeaders(tabHeaders.concat(name))
-        <Box css={{ width: "45%", mx: "$2", height: "100%" }}>
+                }
-          <Accounts card hideDeployBtn showHookStats />
+                onCloseTab={(index) =>
-        </Box>
+                  setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))
-      </Flex>
+                }
+              >
+                {tabHeaders.map((header) => (
+                  <Tab key={header} header={header}>
+                    <Transaction header={header} />
+                  </Tab>
+                ))}
+              </Tabs>
+            </Box>
+            <Box css={{ width: "45%", mx: "$2", height: "100%" }}>
+              <Accounts card hideDeployBtn showHookStats />
+            </Box>
+          </Split>
+        </Flex>
 
-      <Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
+        <Flex row fluid>
-        <Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
+          <Split
-          <LogBox
+            direction="horizontal"
-            title="Development Log"
+            sizes={[50, 50]}
-            logs={snap.transactionLogs}
+            minSize={[320, 160]}
-            clearLog={() => (state.transactionLogs = [])}
+            gutterSize={4}
-          />
+            gutterAlign="center"
-        </Box>
+            style={{
-        <Box css={{ width: "50%" }}>
+              display: "flex",
-          <DebugStream />
+              flexDirection: "row",
-        </Box>
+              width: "100%",
-      </Flex>
+              height: "100%",
+            }}
+          >
+            <Box
+              css={{
+                borderRight: "1px solid $mauve8",
+                height: "100%",
+              }}
+            >
+              <LogBox
+                title="Development Log"
+                logs={snap.transactionLogs}
+                clearLog={() => (state.transactionLogs = [])}
+              />
+            </Box>
+            <Box css={{ height: "100%" }}>
+              <DebugStream />
+            </Box>
+          </Split>
+        </Flex>
+      </Split>
     </Container>
   );
 };

styles/globals.css

@@ -6,8 +6,36 @@ body,
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow-y: hidden;
 }
 
 * {
   box-sizing: border-box;
 }
+
+.gutter {
+  position: relative;
+  transition: border-color 0.3s, background-color 0.3s;
+}
+
+.gutter-vertical {
+  margin-top: -4px;
+}
+.gutter-horizontal {
+  margin-left: -4px;
+}
+.gutter-vertical:hover {
+  cursor: row-resize;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+html.light .gutter-vertical:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.gutter-horizontal:hover {
+  cursor: col-resize;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+html.light .gutter-horizontal:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}

yarn.lock

@@ -3688,6 +3688,15 @@ progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+prop-types@^15.5.7:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.6.0, prop-types@^15.6.2:
   version "15.8.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588"
@@ -3855,6 +3864,14 @@ react-select@^5.2.1:
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
 
+react-split@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.14.tgz#ef198259bf43264d605f792fb3384f15f5b34432"
+  integrity sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==
+  dependencies:
+    prop-types "^15.5.7"
+    split.js "^1.6.0"
+
 react-stay-scrolled@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/react-stay-scrolled/-/react-stay-scrolled-7.4.0.tgz#cb109b8dfd7834e5406d9c9322035ab40c398368"
@@ -4259,6 +4276,11 @@ source-map@^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:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/split.js/-/split.js-1.6.5.tgz#f7f61da1044c9984cb42947df4de4fadb5a3f300"
+  integrity sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"