more specific rule for the box itself

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>
@@ -199,7 +201,15 @@ const AccountDialog = ({
                     fontFamily: "$monospace",
                   }}
                 >
-                  {activeAccount && activeAccount.hooks.length}
+                  {activeAccount && activeAccount?.hooks?.length > 0
+                    ? activeAccount?.hooks
+                        .map((i) => {
+                          return `${i?.substring(0, 6)}...${i?.substring(
+                            i.length - 4
+                          )}`;
+                        })
+                        .join(", ")
+                    : "–"}
                 </Text>
               </Flex>
             </Flex>
@@ -221,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",
@@ -239,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",
@@ -255,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")
@@ -337,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}
@@ -390,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);
                     }}
@@ -404,7 +421,7 @@ const Accounts: FC<AccountProps> = props => {
               </Flex>
               {props.showHookStats && (
                 <Text muted small css={{ mt: "$2" }}>
-                  {account.hooks.length} hook{account.hooks.length === 1 ? "" : "s"} installed
+                  X hooks installed
                 </Text>
               )}
             </Flex>
@@ -436,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/EditorNavigation.tsx

@@ -90,16 +90,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
 
   const validateFilename = useCallback(
     (filename: string): { error: string | null } => {
-      // check if filename already exists
-      if (snap.files.find(file => file.name === filename)) {
+      if (snap.files.find((file) => file.name === filename)) {
         return { error: "Filename already exists." };
       }
-
-      // check for illegal characters
-      const ILLEGAL_REGEX = /[/]/gi;
-      if (filename.match(ILLEGAL_REGEX)) {
-        return { error: "Filename contains illegal characters" };
-      }
       // More checks in future
       return { error: null };
     },

components/Navigation.tsx

@@ -279,18 +279,28 @@ const Navigation = () => {
                       >
                         <Heading>Starter</Heading>
                         <Text>
-                          Just a basic starter with essential imports
+                          Just an empty starter with essential imports
                         </Text>
                       </PanelBox>
                       <PanelBox
                         as="a"
-                        href={`/develop/${templateFileIds.firewall}`}
+                        href={`/develop/${templateFileIds.starter}`}
                       >
                         <Heading>Firewall</Heading>
                         <Text>
                           This Hook essentially checks a blacklist of accounts
                         </Text>
                       </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.accept}`}
+                      >
+                        <Heading>Accept</Heading>
+                        <Text>
+                          This hook just accepts any transaction coming through
+                          it
+                        </Text>
+                      </PanelBox>
                       <PanelBox
                         as="a"
                         href={`/develop/${templateFileIds.notary}`}

state/actions/compileCode.ts

@@ -25,7 +25,6 @@ export const compileCode = async (activeId: number) => {
   }
   // Set loading state to true
   state.compiling = true;
-  state.logs = []
   try {
     const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
       method: "POST",

state/constants/templates.ts

@@ -1,5 +1,6 @@
 export const templateFileIds = {
     'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
+    'accept': '1d14e51e2e02dc0a508cb0733767a914',
     'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
     'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
     'carbon': '43925143fa19735d8c6505c34d3a6a47',

styles/globals.css

@@ -39,3 +39,14 @@ html.light .gutter-vertical:hover {
 html.light .gutter-horizontal:hover {
   background-color: rgba(0, 0, 0, 0.25);
 }
+
+/* Adjust Monaco tooltip stylings */
+.markdown-hover h3 {
+  margin: 0;
+}
+.monaco-editor .monaco-hover hr {
+  margin: 8px 0;
+}
+.monaco-editor .monaco-hover {
+  z-index: 9999;
+}