Frontend updates (keep-starknet-strange#203)

<!-- enter the gh issue after hash -->

- [ ] issue #
- [ ] follows contribution
[guide](https://github.com/keep-starknet-strange/shinigami/blob/main/CONTRIBUTING.md)
- [ ] code change includes tests

<!-- PR description below -->
- Change website favicon to an anime style apple
- Comments on frontend ( ignore a line staring with '//' when building
the script
- Debug mode working with Script Sig also
- Add help text / descriptions for all opcodes that show in the
suggestion box when inserting opcodes
- convert strings of the form <'asd'> or "asd" to 'asd' when sending
pubkey/sig to the backend
- move stack visualizer to the right of script editor and increase
height of both
- Create scripts to query raw transaction data and utxo data from
mainnet/testnet bitcoin ( using txid as input )
- Better memory managment for backend commandline scripts
- Made backend script only respond to calls from origin
https://www.shinigamibtc.dev/
- Mobile view stop button fix

---------

Co-authored-by: Brandon Roberts <[email protected]>

backend/index.js

@@ -1,22 +1,33 @@
 const express = require('express');
-const { exec } = require('child_process');
+const { spawn } = require('child_process');
 const app = express();
 const cors = require('cors');
 
 const MAX_SIZE = 350000; // Max script size is 10000 bytes, longest named opcode is ~25 chars, so 25 * 10000 = 250000 + extra allowance
 
-function runShellCommand(command, callback) {
-    exec(command, (error, stdout, stderr) => {
-        if (error) {
-            callback(`Error: ${error.message}`);
-            return;
-        }
-        callback(stdout);
+// This function runs a shell command asynchronously using spawn
+// `spawn` is preferred over `exec` when you need to handle a large amount of data or streams 
+// because it doesn't buffer the output in memory, making it more memory-efficient for long-running processes
+function runShellCommand(command, args, callback) {
+    // Pass the command as the first argument and arguments as an array
+    const process = spawn(command, args);  // 'args' must be an array
+    let output = '';
+
+    // Listen for data from the process
+    process.stdout.on('data', (data) => {
+        output += data.toString();
+    });
+
+    // On process close, execute the callback
+    process.on('close', (code) => {
+        callback(output);
     });
 }
 
 function handleScriptRequest(req, res, functionName) {
     const { pub_key, sig } = req.body;
+
+    // Input validation
     if (!pub_key) {
         return res.status(400).send('Missing public key parameter');
     }
@@ -28,24 +39,36 @@ function handleScriptRequest(req, res, functionName) {
             return res.status(400).send('Script Signature exceeds maximum allowed size');
         }
     }
+
     const scriptPath = '../tests/text_to_byte_array.sh';
-    const sigCommand = `bash ${scriptPath} "${sig}"`;
-    const pubCommand = `bash ${scriptPath} "${pub_key}"`;
-    runShellCommand(sigCommand, (sigOutput) => {
-        runShellCommand(pubCommand, (pubOutput) => {
+
+    // Use `spawn` by separating the script path from its arguments
+    const sigArgs = [scriptPath, sig]; // Arguments should be passed as an array
+    const pubArgs = [scriptPath, pub_key];
+
+    runShellCommand('bash', sigArgs, (sigOutput) => {
+        runShellCommand('bash', pubArgs, (pubOutput) => {
             const modifiedSigOutput = sigOutput.trim().slice(1, -1);
             const modifiedPubOutput = pubOutput.trim().slice(1, -1);
             const combinedOutput = `[${modifiedSigOutput},${modifiedPubOutput}]`;
-            const cairoCommand = `scarb cairo-run --function ${functionName} ${combinedOutput} --no-build`;
-            runShellCommand(cairoCommand, (finalOutput) => {
+
+            // Similarly, separate the command and its arguments for cairo-run
+            const cairoArgs = ['cairo-run', '--function', functionName, combinedOutput, '--no-build'];
+            runShellCommand('scarb', cairoArgs, (finalOutput) => {
                 const matches = [...finalOutput.matchAll(/\[.*\]/g)].map((m) => m[0]);
                 res.json({ message: matches ? matches : 'No message found' });
             });
         });
     });
 }
 
-app.use(cors());
+app.use(cors({
+    origin: '*',
+    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+    allowedHeaders: '*',  // Allow all headers
+    preflightContinue: false,
+    optionsSuccessStatus: 204
+}));
 app.use(express.json());
 
 app.get('/', (_, res) => {

frontend/src/app/globals.css

@@ -41,6 +41,10 @@ body {
   }
 }
 
+.custom-highlight {
+  background-color: #008000;
+}
+
 .highlight {
   background: #008000C0;
 }

frontend/src/app/layout.tsx

@@ -10,6 +10,13 @@ const commonClasses = "w-full min-h-screen";
 export const metadata: Metadata = {
   title: "Shinigami Script Wizard",
   description: "Shinigami Script Wizard",
+  icons: [
+    {
+      url: "/favicon.ico",
+      sizes: "64x64 32x32 24x24 16x16",
+      type: "image/x-icon",
+    },
+  ],
 };
 
 export default function RootLayout({

frontend/src/app/page.tsx

@@ -1,9 +1,11 @@
+import Footer from "@/components/footer";
 import ScriptEditor from "@/components/script-editor";
 
 export default function Home() {
   return (
-    <div className="w-full max-w-4xl flex flex-col items-center justify-between space-y-5 h-full min-h-screen">
+    <div className="w-full max-w-6xl flex flex-col items-center justify-between space-y-5 h-full">
       <ScriptEditor />
+      <Footer />
     </div>
   );
 }

frontend/src/components/footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
     return (
-        <div className="flex flex-row items-center justify-center pt-5 pb-8">
+        <div className="flex flex-row items-center justify-center pt-5 pb-8 xl:absolute xl:bottom-0">
             <p className="text-white text-lg uppercase">
                 Shinigami Script Wizard. V.10
             </p>

frontend/src/components/header.tsx

@@ -31,11 +31,11 @@ const MobileMenu: FC<MobileMenuProps> = ({ isOpen, onClose, onOpenModal }) => {
   return (
     <div className="w-full h-fit absolute top-8 z-20 inset-x-0 flex flex-row items-center rounded-xl sm:hidden">
       <div className="w-full mx-5 h-[182.5px] backdrop-blur-md rounded-xl border border-white/10">
-        <div className="w-full max-w-4xl flex flex-row items-center justify-between border-b border-white/10 px-3.5 sm:border-0 py-2 sm:py-0">
+        <div className="w-full max-w-4xl flex flex-row items-center justify-between border-b border-white/10 pl-2.5 pr-3.5 sm:border-0 py-1.5 sm:py-0">
           <Link href="/">
             <div className="flex flex-row items-center justify-center space-x-0.5">
-              <Image src={logo} width={25} height={25} alt="Shinigami" />
-              <h6 className="uppercase text-white">Shinigami Script Wizard</h6>
+              <Image src={logo} width={35} height={35} alt="Shinigami Logo" />
+              <h6 className="uppercase text-white pl-2 text-lg">Shinigami Script Wizard</h6>
             </div>
           </Link>
           <button className="block sm:hidden py-2.5" onClick={onClose}>
@@ -75,13 +75,13 @@ export default function Header() {
       <div
         className={clsx(
           isMobileMenuOpen ? "hidden" : "",
-          "w-full max-w-4xl flex flex-row items-center justify-between border border-white/10 px-3.5 rounded-3xl py-2.5",
+          "w-full max-w-4xl flex flex-row items-center justify-between border border-white/10 pl-2.5 pr-3.5 rounded-3xl py-1.5",
         )}
       >
         <Link href="/">
           <div className="flex flex-row items-center justify-center space-x-0.5">
-            <Image src={logo} width={25} height={25} alt="Shinigami" />
-            <h6 className="uppercase text-white pl-3">
+            <Image src={logo} width={35} height={35} alt="Shinigami Logo" />
+            <h6 className="uppercase text-white pl-2 text-lg">
               Shinigami Script Wizard
             </h6>
           </div>