Initial commit

app/pages/home/HomePage.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { formatEther, isHash, type Hash } from "viem";
+import { useTransaction } from "wagmi";
+
+
+export function HomePage() {
+  const [inputHash, setInputHash] = useState('');
+  const [confirmedHash, setConfirmedHash] = useState<Hash | undefined>(undefined);
+
+  const { data: transaction, isPending, error } = useTransaction({
+    hash: confirmedHash,
+    query: {
+      retry: 1
+    }
+  })
+
+  function onSubmit(e) {
+    e.preventDefault();
+    if (isHash(inputHash)) {
+      setConfirmedHash(inputHash);
+    } else {
+      toast.error('Enter a valid transaction hash!');
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-10"> 
+      <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-6">
+        <h1 className="text-lg font-bold">Transaction Explorer</h1>
+        <p>Enter a transaction hash to get more details...</p>
+
+        <form className="flex flex-row gap-5 w-full" onSubmit={onSubmit}>
+          <input type="text" value={inputHash} onChange={(e) => {
+            setInputHash(e.target.value);
+            if (confirmedHash) {
+              setConfirmedHash(undefined);
+            }
+          }} className="w-full border border-gray-300 p-2 rounded-lg" placeholder="Enter hash..." />
+          <button 
+            type="submit" 
+            disabled={!inputHash} 
+            className="bg-black text-white p-2 px-6 rounded-xl cursor-pointer disabled:opacity-50"
+          >
+            Run
+          </button>
+        </form>
+      </div>
+
+      {!!confirmedHash && (
+        <div className="bg-white p-0 rounded-xl overflow-hidden border border-slate-200 shadown-sm flex flex-col gap-6">
+          <div className="bg-slate-100 px-6 py-4">
+            <h2 className="text-lg font-bold">Details</h2>
+          </div>
+
+          <div className="p-6 pt-0">
+            {error && <p>An error occurred. Please enter a valid hash.</p>}
+            {isPending && <p>Loading details...</p>}
+
+            {!!transaction && (
+              <div className="grid grid-cols-6 w-full gap-y-6">
+
+                  <div className="opacity-50">Hash</div>
+                  <div className="col-span-5 break-all">{transaction.hash}</div>
+                
+                  <div className="opacity-50">From</div>
+                  <div className="col-span-5">{transaction.from}</div>
+                
+                  <div className="opacity-50">To</div>
+                  <div className="col-span-5">{transaction.to || 'N/A'}</div>
+                
+                  <div className="opacity-50">Value</div>
+                  <div className="col-span-5">{formatEther(transaction.value)} ETH</div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}