Run prettier through everything.

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

@@ -1,58 +1,56 @@
-import dynamic from "next/dynamic";
-import Split from "react-split";
-import { useSnapshot } from "valtio";
-import { Box, Container, Flex, Tab, Tabs } from "../../components";
-import Transaction from "../../components/Transaction";
-import state, { renameTxState } from "../../state";
-import { getSplit, saveSplit } from "../../state/actions/persistSplits";
-import { transactionsState, modifyTxState } from "../../state";
-import { useEffect, useState } from "react";
-import { FileJs } from "phosphor-react";
-import RunScript from "../../components/RunScript";
+import dynamic from 'next/dynamic'
+import Split from 'react-split'
+import { useSnapshot } from 'valtio'
+import { Box, Container, Flex, Tab, Tabs } from '../../components'
+import Transaction from '../../components/Transaction'
+import state, { renameTxState } from '../../state'
+import { getSplit, saveSplit } from '../../state/actions/persistSplits'
+import { transactionsState, modifyTxState } from '../../state'
+import { useEffect, useState } from 'react'
+import { FileJs } from 'phosphor-react'
+import RunScript from '../../components/RunScript'
 
-const DebugStream = dynamic(() => import("../../components/DebugStream"), {
-  ssr: false,
-});
+const DebugStream = dynamic(() => import('../../components/DebugStream'), {
+  ssr: false
+})
 
-const LogBox = dynamic(() => import("../../components/LogBox"), {
-  ssr: false,
-});
-const Accounts = dynamic(() => import("../../components/Accounts"), {
-  ssr: false,
-});
+const LogBox = dynamic(() => import('../../components/LogBox'), {
+  ssr: false
+})
+const Accounts = dynamic(() => import('../../components/Accounts'), {
+  ssr: false
+})
 
 const Test = () => {
   // This and useEffect is here to prevent useLayoutEffect warnings from react-split
-  const [showComponent, setShowComponent] = useState(false);
-  const { transactionLogs } = useSnapshot(state);
-  const { transactions, activeHeader } = useSnapshot(transactionsState);
-  const snap = useSnapshot(state);
+  const [showComponent, setShowComponent] = useState(false)
+  const { transactionLogs } = useSnapshot(state)
+  const { transactions, activeHeader } = useSnapshot(transactionsState)
+  const snap = useSnapshot(state)
   useEffect(() => {
-    setShowComponent(true);
-  }, []);
+    setShowComponent(true)
+  }, [])
   if (!showComponent) {
-    return null;
+    return null
   }
-  const hasScripts = Boolean(
-    snap.files.filter(f => f.name.toLowerCase()?.endsWith(".js")).length
-  );
+  const hasScripts = Boolean(snap.files.filter(f => f.name.toLowerCase()?.endsWith('.js')).length)
 
   const renderNav = () => (
-    <Flex css={{ gap: "$3" }}>
+    <Flex css={{ gap: '$3' }}>
       {snap.files
-        .filter(f => f.name.endsWith(".js"))
+        .filter(f => f.name.endsWith('.js'))
         .map(file => (
           <RunScript file={file} key={file.name} />
         ))}
     </Flex>
-  );
+  )
 
   return (
     <Container css={{ px: 0 }}>
       <Split
         direction="vertical"
         sizes={
-          hasScripts && getSplit("testVertical")?.length === 2
+          hasScripts && getSplit('testVertical')?.length === 2
             ? [50, 20, 30]
             : hasScripts
             ? [50, 20, 50]
@@ -60,49 +58,45 @@ const Test = () => {
         }
         gutterSize={4}
         gutterAlign="center"
-        style={{ height: "calc(100vh - 60px)" }}
-        onDragEnd={e => saveSplit("testVertical", e)}
+        style={{ height: 'calc(100vh - 60px)' }}
+        onDragEnd={e => saveSplit('testVertical', e)}
       >
         <Flex
           row
           fluid
           css={{
-            justifyContent: "center",
-            p: "$3 $2",
+            justifyContent: 'center',
+            p: '$3 $2'
           }}
         >
           <Split
             direction="horizontal"
-            sizes={getSplit("testHorizontal") || [50, 50]}
+            sizes={getSplit('testHorizontal') || [50, 50]}
             minSize={[180, 320]}
             gutterSize={4}
             gutterAlign="center"
             style={{
-              display: "flex",
-              flexDirection: "row",
-              width: "100%",
-              height: "100%",
+              display: 'flex',
+              flexDirection: 'row',
+              width: '100%',
+              height: '100%'
             }}
-            onDragEnd={e => saveSplit("testHorizontal", e)}
+            onDragEnd={e => saveSplit('testHorizontal', e)}
           >
-            <Box css={{ width: "55%", px: "$2" }}>
+            <Box css={{ width: '55%', px: '$2' }}>
               <Tabs
                 label="Transaction"
                 activeHeader={activeHeader}
                 // TODO make header a required field
                 onChangeActive={(idx, header) => {
-                  if (header) transactionsState.activeHeader = header;
+                  if (header) transactionsState.activeHeader = header
                 }}
                 keepAllAlive
                 defaultExtension="json"
-                allowedExtensions={["json"]}
+                allowedExtensions={['json']}
                 onCreateNewTab={header => modifyTxState(header, {})}
-                onRenameTab={(idx, nwName, oldName = "") =>
-                  renameTxState(oldName, nwName)
-                }
-                onCloseTab={(idx, header) =>
-                  header && modifyTxState(header, undefined)
-                }
+                onRenameTab={(idx, nwName, oldName = '') => renameTxState(oldName, nwName)}
+                onCloseTab={(idx, header) => header && modifyTxState(header, undefined)}
               >
                 {transactions.map(({ header, state }) => (
                   <Tab key={header} header={header}>
@@ -111,7 +105,7 @@ const Test = () => {
                 ))}
               </Tabs>
             </Box>
-            <Box css={{ width: "45%", mx: "$2", height: "100%" }}>
+            <Box css={{ width: '45%', mx: '$2', height: '100%' }}>
               <Accounts card hideDeployBtn showHookStats />
             </Box>
           </Split>
@@ -120,9 +114,9 @@ const Test = () => {
           <Flex
             as="div"
             css={{
-              borderTop: "1px solid $mauve6",
-              background: "$mauve1",
-              flexDirection: "column",
+              borderTop: '1px solid $mauve6',
+              background: '$mauve1',
+              flexDirection: 'column'
             }}
           >
             <LogBox
@@ -142,16 +136,16 @@ const Test = () => {
             gutterSize={4}
             gutterAlign="center"
             style={{
-              display: "flex",
-              flexDirection: "row",
-              width: "100%",
-              height: "100%",
+              display: 'flex',
+              flexDirection: 'row',
+              width: '100%',
+              height: '100%'
             }}
           >
             <Box
               css={{
-                borderRight: "1px solid $mauve8",
-                height: "100%",
+                borderRight: '1px solid $mauve8',
+                height: '100%'
               }}
             >
               <LogBox
@@ -160,14 +154,14 @@ const Test = () => {
                 clearLog={() => (state.transactionLogs = [])}
               />
             </Box>
-            <Box css={{ height: "100%" }}>
+            <Box css={{ height: '100%' }}>
               <DebugStream />
             </Box>
           </Split>
         </Flex>
       </Split>
     </Container>
-  );
-};
+  )
+}
 
-export default Test;
+export default Test