fix: revise ui

next.config.js

@@ -1,4 +1,7 @@
 // next.config.js
 module.exports = {
-  reactStrictMode: true
+  reactStrictMode: true,
+  images: {
+    unoptimized: true,
+  }
 };

pages/explorer.tsx

@@ -5,19 +5,12 @@ import {
   INFRA_ADDRESS,
   BundlerMode,
   BundlerProvider,
-  BundlerUserOperationData,
   PackedUserOperation,
   wrap,
 } from "@consenlabs/imaccount-sdk";
-import { UserOpReceipt } from "../types/receipt";
+import { DataType, UserOpReceipt } from "../types";
 import Header from "./header";
 
-enum DataType {
-  Address = "/address/",
-  Transaction = "/tx/",
-  Block = "/block/",
-}
-
 const Explorer = () => {
   const [userOpHash, setUserOpHash] = useState<Hex>(
     "0x95193f1f7d7cac1caa3385a33ce7a63dc3b66d3ba91059addfcaaf1091834fcc"
@@ -26,7 +19,7 @@ const Explorer = () => {
     process.env.NEXT_PUBLIC_RPC_URL ??
       "https://<chain_prefix>.g.alchemy.com/v2/<your_api_key>"
   );
-  const [chainName, setChainName] = useState<string|null>()
+  const [chainName, setChainName] = useState<string | null>();
   const [userOpReceipt, setUserOpReceipt] = useState<UserOpReceipt | null>(
     null
   );

pages/imaccount-info.tsx

@@ -6,13 +6,23 @@ import {
   InfoType,
 } from "@consenlabs/imaccount-sdk";
 import { Address } from "viem";
+import { DataType } from "../types";
 import Header from "./header";
 
 enum AddressType {
   Entry = "Entry",
   Account = "Account",
 }
 
+type FullInfoType = {
+  BasicInfo: InfoType,
+  DeploymentInfo: {
+    EntryFactory: Address,
+    AccountFactory: Address,
+    Version: string
+  }
+}
+
 const AccountInfo = () => {
   const [address, setAddress] = useState<Address>(
     "0xea67ba18ab79c208369f7f40cf21a27c41f605f2"
@@ -22,11 +32,27 @@ const AccountInfo = () => {
     process.env.NEXT_PUBLIC_RPC_URL ??
       "https://<chain_prefix>.g.alchemy.com/v2/<your_api_key>"
   );
+  const [chainName, setChainName] = useState<string | null>();
   const [fetching, setFetching] = useState(false);
   const [info, setInfo] = useState<InfoType | null>();
 
   const isFetchDisabled = !address || !type || !ALCHEMY_RPC_URL;
 
+  const getExplorerLink = (address: string, type: DataType): string => {
+    if (!ALCHEMY_RPC_URL) return "https://";
+
+    const provider = getPublicClient(ALCHEMY_RPC_URL);
+    if (!chainName || chainName === "") {
+      setChainName(provider.chain?.name);
+    }
+    const explorerLink = provider.chain?.blockExplorers?.default.url;
+
+    if (!explorerLink) return "https://";
+
+    const dataLink = explorerLink + type + address;
+    return dataLink;
+  };
+
   const getWalletInfo = async () => {
     if (!address || !type || !ALCHEMY_RPC_URL) {
       alert("Please fill in all required fields.");
@@ -56,10 +82,11 @@ const AccountInfo = () => {
   return (
     <div>
       <Header />
-      <h2>imToken AA Wallet Infomation</h2>
+      <h2>imToken AA Wallet Watcher</h2>
       <div className="warning-banner">
         <p>It is an experimental feature. Please use it cautiously.</p>
       </div>
+      <h3>Infomation</h3>
       <div>
         <h4>Contract Type</h4>
         <label>
@@ -100,7 +127,50 @@ const AccountInfo = () => {
         {info && (
           <div>
             <h3>Wallet Infomation</h3>
-            <pre>{JSON.stringify(info, null, 2)}</pre>
+            <div className="data-section">
+              <div>
+                <span className="label">Entry Address</span>{" "}
+                <a
+                  href={getExplorerLink(info.entryAddr, DataType.Address)}
+                  target="_blank"
+                >
+                  {info.entryAddr}
+                </a>
+              </div>
+              <div>
+                <span className="label">Validator</span>{" "}
+                {info.currentOwnerValidator}
+              </div>
+              <div>
+                <span className="label">Validator Address</span>{" "}
+                <a
+                  href={getExplorerLink(
+                    info.currentOwnerValidatorAddr,
+                    DataType.Address
+                  )}
+                  target="_blank"
+                >
+                  {info.currentOwnerValidatorAddr}
+                </a>
+              </div>
+              <div>
+                <span className="label">Accounts Addresses</span>{" "}
+                <div>
+                  {info.accountAddrs.map((acc: any, index: any) => (
+                    <span key={index}>
+                      <a
+                        href={getExplorerLink(acc, DataType.Address)}
+                        target="_blank"
+                      >
+                        {acc}
+                      </a>
+
+                      <br />
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         )}
       </div>

pages/index.tsx

@@ -3,13 +3,21 @@ import Link from "next/link";
 
 import Header from "./header";
 import Footer from "./footer";
+import Image from "next/image";
 
 const Home = () => {
   return (
     <div className="container">
       <Header />
       <div className="gif-container">
-        <img src="/chiikawa.GIF" alt="GIF" className="gif" />
+        <Image
+          src="/chiikawa.gif"
+          alt="Usagi"
+          width={0}
+          height={0}
+          sizes="100vw"
+          style={{ width: "50%", height: "auto" }}
+        />
       </div>
       <div className="link-container">
         <Link href="/explorer">

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "AA Debugger",
+    "short_name": "AA Debugger",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

styles.css

@@ -185,4 +185,34 @@ footer {
     border: 1px solid #3e3e3e;
     border-radius: 4px;
     overflow-x: auto;
+}
+
+select {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 20px;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    background-color: #2e2e2e;
+    color: #dcdcdc;
+    font-family: 'Ubuntu Mono', monospace;
+    appearance: none;
+    /* Removes default arrow */
+    cursor: pointer;
+    transition: border-color 0.3s ease, background-color 0.3s ease;
+}
+
+select:hover {
+    border-color: #4ec9b0;
+}
+
+select:focus {
+    outline: none;
+    border-color: #4ec9b0;
+}
+
+select option {
+    background-color: #2e2e2e;
+    color: #dcdcdc;
 }

types/receipt.ts → types/index.ts

@@ -1,5 +1,11 @@
 import { Address } from "viem";
 
+export enum DataType {
+  Address = "/address/",
+  Transaction = "/tx/",
+  Block = "/block/",
+}
+
 export type Log = {
   address: Address;
   topics: string[];