revise css

pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../styles.css'; // Import the global CSS here
+import { AppProps } from 'next/app';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import {
   simulate,
   BundlerUserOperationData,
@@ -16,6 +16,7 @@ const Home = () => {
   const [richBundlerEOA, setRichBundlerEOA] = useState<Address>(
     "0x4d7f573039fddc84fdb28515ba20d75ef6b987ff"
   );
+  const [network, setNetwork] = useState("11155111");
 
   // userOp input
   const [input, setInput] = useState(`{
@@ -65,7 +66,8 @@ const Home = () => {
         richBundlerEOA,
         parsedInput?.wrapped,
         projectOwner,
-        projectName
+        projectName,
+        network
       );
 
       setResult(JSON.stringify(simulationResult, null, 2));
@@ -152,11 +154,48 @@ const Home = () => {
       setParsedInput(null);
     }
   };
+
+  const handleResultClick = () => {
+    const url = result.startsWith('"') ? JSON.parse(result) : result;
+    window.open(url, "_blank");
+  };
 
   return (
     <div>
+      <div className="warning-banner">
+        <p>
+          This default configuration currently only supports the Sepolia
+          Testnet.
+          <br /> If you wish to use a different network, please create a
+          Tenderly project on your own.
+        </p>
+      </div>
       <h1>AA Debugger</h1>
-      <h2>1. Give the required Tenderly Config</h2>
+
+      <div>
+        <p>
+          Twitter:{" "}
+          <a
+            href="https://twitter.com/murmurlu"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            @murmurlu
+          </a>
+        </p>
+        <p>
+          Github Repo:{" "}
+          <a
+            href="https://github.com/ChiHaoLu/4337-debugger/tree/main"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            4337-debugger
+          </a>
+        </p>
+      </div>
+
+      <h2>1. Fill Up the Tenderly Config</h2>
       <div>
         <label>
           TENDERLY_ACCESS_KEY:
@@ -202,12 +241,24 @@ const Home = () => {
         </label>
       </div>
 
+      <div>
+        <label>
+          Chain ID:
+          <input
+            type="text"
+            value={network}
+            onChange={(e) => setNetwork(e.target.value)}
+            required
+          />
+        </label>
+      </div>
+
       <h2>2. Give your userOp</h2>
       <h3>UserOp Input</h3>
       <div>
         <label>
           <textarea
-            rows={35}
+            rows={30}
             cols={100}
             value={input}
             onChange={handleInputChange}
@@ -224,23 +275,20 @@ const Home = () => {
         )}
       </div>
 
-      <h2>3. Simulate and get the dashboard url</h2>
+      <h2>3. Simulate Time!</h2>
       <button onClick={handleSimulate} disabled={loading || isSimulateDisabled}>
         {loading ? "Simulating..." : "Run Simulation"}
       </button>
       {result !== "" && (
-        <div>
+        <div className="simulation-result">
           <h3>Simulation Result:</h3>
-          <a
-            target="_blank"
-            href={result.startsWith('"') ? JSON.parse(result) : result}
-          >
-            click me
-          </a>
+          <button onClick={handleResultClick}>
+            Go to Dashboard! (required login Tenderly)
+          </button>
         </div>
       )}
     </div>
   );
 };
 
-export default Home;
+export default Home;

styles.css

@@ -0,0 +1,121 @@
+body {
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #f7f3e9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+h1,
+h2,
+h3 {
+    color: #d32f2f;
+    /* Traditional Japanese red */
+}
+
+div {
+    margin: 20px;
+    flex: 1;
+    /* This makes the main content area take up available space */
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+input[type="text"],
+textarea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #333;
+}
+
+button {
+    background-color: #d32f2f;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:disabled {
+    background-color: #ccc;
+}
+
+button:hover:enabled {
+    background-color: #b71c1c;
+}
+
+pre {
+    background-color: #fff;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow-x: auto;
+    color: #333;
+}
+
+a {
+    color: #d32f2f;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 20px;
+    width: 100%;
+    position: relative;
+    bottom: 0;
+}
+
+.warning-banner {
+    background-color: #ffcc00;
+    color: #333;
+    text-align: center;
+    padding: 10px;
+    font-weight: bold;
+}
+
+.simulation-result {
+    background-color: #fff;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-top: 20px;
+}
+
+.simulation-result h3 {
+    color: #d32f2f;
+}
+
+.simulation-result button {
+    background-color: #d32f2f;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.simulation-result button:hover {
+    background-color: #b71c1c;
+}