From 262c30697f3a359acaa39882012e424fa0f70d46 Mon Sep 17 00:00:00 2001
From: ChiHaoLu <b08303113@ntu.edu.tw>
Date: Wed, 6 Nov 2024 13:59:20 +0800
Subject: [PATCH] feat: refactor toollist

---
 manifest.json    |  5 -----
 pages/footer.tsx |  7 +++++++
 pages/index.tsx  |  7 +++++--
 pages/tool.tsx   | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 styles.css       |  5 +++++
 5 files changed, 64 insertions(+), 7 deletions(-)
 delete mode 100644 manifest.json
 create mode 100644 pages/tool.tsx

diff --git a/manifest.json b/manifest.json
deleted file mode 100644
index 71765d7..0000000
--- a/manifest.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "name": "ERC-4337 Debugger",
-    "short_name": "ERC-4337 Debugger",
-    "description": "An application helps debug any userOp."
-}
\ No newline at end of file
diff --git a/pages/footer.tsx b/pages/footer.tsx
index 3b3a33a..2d559ea 100644
--- a/pages/footer.tsx
+++ b/pages/footer.tsx
@@ -14,6 +14,13 @@ const Footer = () => {
           v0.1.29
         </a>
       </p>
+
+      <h3>Project Inspiration</h3>
+      <ul>
+        <li className="list">Tenderly</li>
+        <li className="list">Pimlico Debugger</li>
+        <li className="list">Jiffyscan</li>
+      </ul>
     </div>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 6503490..155cf2e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -9,7 +9,7 @@ const Home = () => {
     <div className="container">
       <Header />
       <div className="gif-container">
-        <img src="/chiikawa.gif" alt="GIF" className="gif" />
+        <img src="/chiikawa.GIF" alt="GIF" className="gif" />
       </div>
       <div className="link-container">
         <Link href="/explorer">
@@ -19,7 +19,10 @@ const Home = () => {
           <div className="link">Go to 4337 Debugger</div>
         </Link>
         <Link href="/imaccount-info">
-          <div className="link">imToken AA Wallet Infomation</div>
+          <div className="link">imToken AA Wallet Watcher</div>
+        </Link>
+        <Link href="/tool">
+          <div className="link">Debug Toolkit</div>
         </Link>
       </div>
       <Footer />
diff --git a/pages/tool.tsx b/pages/tool.tsx
new file mode 100644
index 0000000..5cb35e0
--- /dev/null
+++ b/pages/tool.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import Header from "./header";
+
+const Tool = () => {
+  return (
+    <div>
+      <Header />
+      <h2>Debug Toolkit</h2>
+      <ul>
+        <li>
+          <a
+            href="https://tools.deth.net/eth-unit-conversion"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            dETH Tools
+          </a>
+          : A handy toolset for every Ethereum developer, includes
+          <ul>
+            <li className="list">Eth Unit Conversion</li>
+            <li className="list">Token Unit Conversion</li>
+            <li className="list">Unix Epoch (timestamp) Conversion</li>
+            <li className="list">String - Bytes32 Conversion</li>
+            <li className="list">Calldata Decoder</li>
+            <li className="list">Event Decoder</li>
+            <li className="list">Tx Decoder</li>
+            <li className="list">Constructor Encoder</li>
+            <li className="list">Vanity Address Generator</li>
+          </ul>
+        </li>
+        <li>
+          <a
+            href="https://www.etherface.io/hash"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Ethereum Function Signature DataBase
+          </a>
+          : Find the function signature (function name and params) by their hash
+          (function selector).
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Tool;
diff --git a/styles.css b/styles.css
index 9f8c8ed..38191b4 100644
--- a/styles.css
+++ b/styles.css
@@ -78,6 +78,11 @@ a:hover {
     text-decoration: underline;
 }
 
+.list{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 footer {
     background-color: #333;
     color: #dcdcdc;