feat(web3): add view ledger button to view transactions history

Author: vishnukothakapu

services/frontend/app/dashboard/page.tsx

@@ -12,6 +12,16 @@ import AnimatedButton from "@/components/ui/AnimatedButton";
 import StatCard from "@/components/ui/StatCard";
 import TrustScoreRing from "@/components/ui/TrustScoreRing";
 import { useAuth } from "@/hooks/useAuth";
+import {
+  BarChart3,
+  CircleDollarSign,
+  ShieldCheck,
+  Wallet,
+  Copy,
+  Building2,
+  ChevronRight,
+  ExternalLink,
+} from "lucide-react";
 import {
   upsertProfile,
   getProfile,
@@ -376,15 +386,15 @@ function Overview() {
           label="Active Funds"
           value={funds.length}
           delay={0.05}
-          icon={<span>📊</span>}
+          icon={<BarChart3 size={16} />}
           accent="#60a5fa"
         />
         <StatCard
           label="Contributions"
           value={contribs.length}
           suffix="paid"
           delay={0.1}
-          icon={<span>💰</span>}
+          icon={<CircleDollarSign size={16} />}
           accent="#f59e0b"
         />
         {risk ? (
@@ -452,7 +462,7 @@ function Overview() {
             label="Trust Score"
             value="—"
             delay={0.15}
-            icon={<span>🛡️</span>}
+            icon={<ShieldCheck size={16} />}
             accent="#22c55e"
           />
         )}
@@ -464,32 +474,63 @@ function Overview() {
           <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
             <div style={{ flex: 1, minWidth: 200 }}>
               <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
-                <span style={{ fontSize: 14 }}>👛</span>
+                <Wallet size={14} />
                 <span style={{ fontSize: 10, fontWeight: 700, color: "var(--color-text-muted)", textTransform: "uppercase", letterSpacing: 1 }}>Your Custodial Wallet</span>
               </div>
               <div style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--color-bg-subtle)", padding: "8px 12px", borderRadius: 8, boxShadow: "inset 0 1px 3px rgba(0,0,0,0.2)" }}>
                 <code style={{ fontSize: 12, color: "var(--color-text-secondary)", fontFamily: "monospace", overflow: "hidden", textOverflow: "ellipsis" }}>
                   {wallet?.address || "Loading..."}
                 </code>
                 {wallet?.address && (
-                  <button 
-                    onClick={() => {
-                      navigator.clipboard.writeText(wallet.address);
-                      alert("Address copied to clipboard!");
-                    }}
-                    style={{ background: "transparent", border: "none", cursor: "pointer", fontSize: 14, opacity: 0.6, padding: 4 }}
-                    title="Copy Address"
-                  >
-                    📋
-                  </button>
+                  <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(wallet.address);
+                        alert("Address copied to clipboard!");
+                      }}
+                      style={{ background: "transparent", border: "none", cursor: "pointer", fontSize: 14, opacity: 0.6, padding: 4, color: "var(--color-text)" }}
+                      title="Copy Address"
+                    >
+                      <Copy size={14} />
+                    </button>
+                    <a
+                      href={`https://amoy.polygonscan.com/address/${wallet.address}#tokentxns`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{
+                        fontSize: 10,
+                        fontWeight: 700,
+                        color: "var(--color-accent)",
+                        textDecoration: "none",
+                        padding: "6px 12px",
+                        borderRadius: 6,
+                        background: "rgba(249,115,22,0.1)",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                        transition: "all 0.2s",
+                        border: "1px solid rgba(249,115,22,0.2)"
+                      }}
+                      onMouseOver={(e) => {
+                        e.currentTarget.style.background = "rgba(249,115,22,0.2)";
+                        e.currentTarget.style.borderColor = "rgba(249,115,22,0.4)";
+                      }}
+                      onMouseOut={(e) => {
+                        e.currentTarget.style.background = "rgba(249,115,22,0.1)";
+                        e.currentTarget.style.borderColor = "rgba(249,115,22,0.2)";
+                      }}
+                    >
+                      View Ledger <ExternalLink size={10} />
+                    </a>
+                  </div>
                 )}
               </div>
             </div>
 
             <div style={{ textAlign: "right" }}>
               <span style={{ fontSize: 10, fontWeight: 700, color: "var(--color-text-muted)", textTransform: "uppercase", letterSpacing: 1 }}>Token Balance</span>
               <p style={{ fontSize: 28, fontWeight: 800, margin: "4px 0 0", color: "var(--color-text)", letterSpacing: -1 }}>
-                {wallet ? wallet.balance.toLocaleString() : "—"} 
+                {wallet ? wallet.balance.toLocaleString() : "—"}
                 <span style={{ fontSize: 14, color: "var(--color-accent)", marginLeft: 6, fontWeight: 700 }}>CHIT</span>
               </p>
             </div>
@@ -547,7 +588,7 @@ function Overview() {
               transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
               style={{ fontSize: 32, display: "inline-block" }}
             >
-              🏦
+              <Building2 size={32} />
             </motion.span>
             <p
               style={{
@@ -575,7 +616,9 @@ function Overview() {
                 window.location.href = "/funds";
               }}
             >
-              Browse Funds →
+              <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                Browse Funds <ChevronRight size={14} />
+              </span>
             </AnimatedButton>
           </motion.div>
         ) : (
@@ -638,8 +681,8 @@ function Overview() {
               const blockchainStatus = contribution.blockchain_status;
               const status =
                 c.status === "paid" &&
-                blockchainStatus &&
-                blockchainStatus !== "confirmed"
+                  blockchainStatus &&
+                  blockchainStatus !== "confirmed"
                   ? blockchainStatus
                   : c.status;
               const style =
@@ -652,9 +695,9 @@ function Overview() {
                       : status === "depositing to pool"
                         ? { color: "#f472b6", bg: "rgba(244,114,182,0.08)" }
                         : {
-                            color: "var(--color-text-secondary)",
-                            bg: "var(--color-bg-subtle)",
-                          };
+                          color: "var(--color-text-secondary)",
+                          bg: "var(--color-bg-subtle)",
+                        };
 
               return (
                 <GlassCard
@@ -1135,6 +1178,7 @@ function Profile({ onUpdate }: { onUpdate: () => void }) {
                 onChange={up("phone_number")}
                 required
                 disabled={!edit}
+
                 placeholder="+91 9876543210"
               />
               <Input

services/frontend/app/fund/[id]/page.tsx

@@ -10,6 +10,15 @@ import StatCard from "@/components/ui/StatCard";
 import AuctionRulebook from "@/components/AuctionRulebook";
 import ChatPanel from "@/components/ChatPanel";
 import { useAuctionSocket } from "@/hooks/useAuctionSocket";
+import {
+  CircleDollarSign,
+  Calendar,
+  Users,
+  Timer,
+  CheckCircle2,
+  Wallet,
+  ExternalLink,
+} from "lucide-react";
 import {
   applyToFund,
   getFundDetails,
@@ -491,7 +500,7 @@ export default function FundDetailPage() {
                 boxShadow: "var(--shadow-card)",
               }}
             >
-              ✓ {actionMessage}
+              <span style={{ display: "flex", alignItems: "center", gap: 6 }}><CheckCircle2 size={14} /> {actionMessage}</span>
             </motion.div>
           )}
         </AnimatePresence>
@@ -571,6 +580,53 @@ export default function FundDetailPage() {
                   >
                     ID: {id}
                   </motion.p>
+                  {fund?.contract_address && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ delay: 0.35 }}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        marginTop: 4,
+                      }}
+                    >
+                      <span style={{ fontSize: 10, color: "var(--color-text-muted)", fontWeight: 600 }}>CONTRACT:</span>
+                      <code style={{ fontSize: 11, color: "var(--color-text-secondary)", fontFamily: "monospace" }}>
+                        {fund.contract_address}
+                      </code>
+                      <a
+                        href={`https://amoy.polygonscan.com/address/${fund.contract_address}#internaltx`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          fontSize: 9,
+                          fontWeight: 700,
+                          color: "var(--color-accent)",
+                          textDecoration: "none",
+                          padding: "4px 10px",
+                          borderRadius: 6,
+                          background: "rgba(249,115,22,0.1)",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6,
+                          transition: "all 0.2s",
+                          border: "1px solid rgba(249,115,22,0.2)"
+                        }}
+                        onMouseOver={(e) => { 
+                          e.currentTarget.style.background = "rgba(249,115,22,0.2)"; 
+                          e.currentTarget.style.borderColor = "rgba(249,115,22,0.4)";
+                        }}
+                        onMouseOut={(e) => { 
+                          e.currentTarget.style.background = "rgba(249,115,22,0.1)"; 
+                          e.currentTarget.style.borderColor = "rgba(249,115,22,0.2)";
+                        }}
+                      >
+                        View Ledger <ExternalLink size={10} />
+                      </a>
+                    </motion.div>
+                  )}
                 </div>
                 <motion.span
                   initial={{ opacity: 0, scale: 0.8 }}
@@ -632,21 +688,21 @@ export default function FundDetailPage() {
                 label="Total Pool"
                 value={fund?.total_amount || 0}
                 delay={0.1}
-                icon={<span>💰</span>}
+                icon={<CircleDollarSign size={16} />}
                 accent="#f97316"
               />
               <StatCard
                 label="Monthly"
                 value={fund?.monthly_contribution || 0}
                 delay={0.15}
-                icon={<span>📅</span>}
+                icon={<Calendar size={16} />}
                 accent="#60a5fa"
               />
               <StatCard
                 label="Members"
                 value={`${fund?.current_member_count || 0}/${fund?.max_members || 0}`}
                 delay={0.2}
-                icon={<span>👥</span>}
+                icon={<Users size={16} />}
                 accent="#2dd4bf"
                 animate={false}
               />
@@ -655,7 +711,7 @@ export default function FundDetailPage() {
                 value={fund?.duration_months || 0}
                 suffix="mo"
                 delay={0.25}
-                icon={<span>⏱️</span>}
+                icon={<Timer size={16} />}
                 accent="#a78bfa"
               />
             </div>

services/frontend/app/funds/page.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
+import { Coins, ChevronRight } from "lucide-react";
 import Navbar from "@/components/Navbar";
 import ChitFundCard from "@/components/ChitFundCard";
 import AnimatedButton from "@/components/ui/AnimatedButton";
@@ -94,10 +95,14 @@ export default function FundsPage() {
           <div style={{ fontSize: 13, color: "var(--color-danger)", background: "var(--color-danger-light)", border: "1px solid rgba(239,68,68,0.15)", borderRadius: 6, padding: "10px 14px" }}>{error}</div>
         ) : funds.length === 0 ? (
           <div style={{ textAlign: "center", padding: "40px 0", background: "var(--color-bg-card)", border: "1px dashed var(--color-border)", borderRadius: 8 }}>
-            <span style={{ fontSize: 28 }}>💰</span>
+            <Coins size={48} style={{ color: "var(--color-accent)", opacity: 0.8, marginBottom: 16 }} />
             <p style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text)", margin: "8px 0 4px" }}>No Funds</p>
             <p style={{ fontSize: 12, color: "var(--color-text-muted)", marginBottom: 14 }}>Be the first to create one</p>
-            <AnimatedButton variant="primary" size="sm" onClick={() => { router.push("/dashboard?tab=create"); }}>Create Fund →</AnimatedButton>
+            <AnimatedButton variant="primary" size="sm" onClick={() => { router.push("/dashboard?tab=create"); }}>
+              <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                Create Fund <ChevronRight size={14} />
+              </span>
+            </AnimatedButton>
           </div>
         ) : (
           <motion.div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 10 }} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>