From f543c64265d9616177b23d78142b99238dce50fe Mon Sep 17 00:00:00 2001
From: AugustoL <augustolemble@pm.me>
Date: Fri, 5 Dec 2025 11:22:41 -0300
Subject: [PATCH 1/5] refactor: move AddressDisplay inline styles to CSS
 classes

- Move all inline styles from AddressDisplay.tsx to components.css
- Add CSS classes for address header, ENS name display
- Add CSS classes for wallet connect buttons and chain selector
- Add CSS classes for contract function buttons (read/write)
- Add CSS classes for function forms, inputs, and results
- Add CSS classes for transaction status and history section
- Add CSS classes for sourcify link and table links
---
 .../pages/address/AddressDisplay.tsx          | 625 ++----------------
 src/styles/components.css                     | 488 ++++++++++++++
 2 files changed, 550 insertions(+), 563 deletions(-)

diff --git a/src/components/pages/address/AddressDisplay.tsx b/src/components/pages/address/AddressDisplay.tsx
index 0aeecd6b..f53c7c4c 100644
--- a/src/components/pages/address/AddressDisplay.tsx
+++ b/src/components/pages/address/AddressDisplay.tsx
@@ -325,28 +325,11 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
 
     return (
       <div className="block-display-card">
-        <div
-          className="block-display-header"
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-        >
+        <div className="block-display-header address-header">
           <div>
             <span className="block-label">Address</span>
             {(ensName || reverseResult?.ensName) && (
-              <span
-                style={{
-                  marginLeft: "12px",
-                  marginRight: "8px",
-                  fontSize: "1rem",
-                  fontWeight: "600",
-                  color: "#10b981",
-                }}
-              >
-                {ensName || reverseResult?.ensName}
-              </span>
+              <span className="address-ens-name">{ensName || reverseResult?.ensName}</span>
             )}
             <span className="tx-mono header-subtitle">{addressHash}</span>
           </div>
@@ -659,14 +642,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                   {/* Contract ABI */}
                   {contractData.abi && contractData.abi.length > 0 && (
                     <div className="tx-row-vertical">
-                      <div
-                        style={{
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center",
-                          marginBottom: "8px",
-                        }}
-                      >
+                      <div className="contract-functions-header">
                         <span className="tx-label">Functions</span>
                         <ConnectButton.Custom>
                           {({
@@ -691,11 +667,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                               <div
                                 {...(!ready && {
                                   "aria-hidden": true,
-                                  style: {
-                                    opacity: 0,
-                                    pointerEvents: "none",
-                                    userSelect: "none",
-                                  },
+                                  className: "wallet-hidden",
                                 })}
                               >
                                 {(() => {
@@ -704,25 +676,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                       <button
                                         onClick={openConnectModal}
                                         type="button"
-                                        style={{
-                                          padding: "8px 16px",
-                                          background: "rgba(16, 185, 129, 0.15)",
-                                          color: "#10b981",
-                                          border: "1px solid rgba(16, 185, 129, 0.3)",
-                                          borderRadius: "6px",
-                                          fontSize: "0.85rem",
-                                          fontWeight: "600",
-                                          cursor: "pointer",
-                                          transition: "all 0.2s",
-                                        }}
-                                        onMouseEnter={(e) => {
-                                          e.currentTarget.style.background =
-                                            "rgba(16, 185, 129, 0.25)";
-                                        }}
-                                        onMouseLeave={(e) => {
-                                          e.currentTarget.style.background =
-                                            "rgba(16, 185, 129, 0.15)";
-                                        }}
+                                        className="btn-connect-wallet"
                                       >
                                         Connect Wallet
                                       </button>
@@ -734,16 +688,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                       <button
                                         onClick={openChainModal}
                                         type="button"
-                                        style={{
-                                          padding: "8px 16px",
-                                          background: "rgba(239, 68, 68, 0.15)",
-                                          color: "#ef4444",
-                                          border: "1px solid rgba(239, 68, 68, 0.3)",
-                                          borderRadius: "6px",
-                                          fontSize: "0.85rem",
-                                          fontWeight: "600",
-                                          cursor: "pointer",
-                                        }}
+                                        className="btn-wrong-network"
                                       >
                                         Wrong Network
                                       </button>
@@ -751,38 +696,17 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                   }
 
                                   return (
-                                    <div
-                                      style={{
-                                        display: "flex",
-                                        gap: "8px",
-                                        alignItems: "center",
-                                      }}
-                                    >
+                                    <div className="wallet-connected-container">
                                       <button
                                         onClick={openChainModal}
                                         type="button"
-                                        style={{
-                                          padding: "6px 12px",
-                                          background: "rgba(59, 130, 246, 0.15)",
-                                          color: "#3b82f6",
-                                          border: "1px solid rgba(59, 130, 246, 0.3)",
-                                          borderRadius: "6px",
-                                          fontSize: "0.8rem",
-                                          display: "flex",
-                                          alignItems: "center",
-                                          gap: "6px",
-                                          cursor: "pointer",
-                                        }}
+                                        className="btn-chain-selector"
                                       >
                                         {chain.hasIcon && chain.iconUrl && (
                                           <img
                                             alt={chain.name ?? "Chain icon"}
                                             src={chain.iconUrl}
-                                            style={{
-                                              width: 16,
-                                              height: 16,
-                                              borderRadius: "50%",
-                                            }}
+                                            className="chain-icon"
                                           />
                                         )}
                                         {chain.name}
@@ -790,16 +714,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                       <button
                                         onClick={openAccountModal}
                                         type="button"
-                                        style={{
-                                          padding: "6px 12px",
-                                          background: "rgba(16, 185, 129, 0.15)",
-                                          color: "#10b981",
-                                          border: "1px solid rgba(16, 185, 129, 0.3)",
-                                          borderRadius: "6px",
-                                          fontSize: "0.8rem",
-                                          cursor: "pointer",
-                                          fontFamily: "monospace",
-                                        }}
+                                        className="btn-account"
                                       >
                                         {account.displayName}
                                       </button>
@@ -811,7 +726,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                           }}
                         </ConnectButton.Custom>
                       </div>
-                      <div style={{ marginTop: "8px" }}>
+                      <div className="contract-functions-content">
                         {/* Read Functions (view/pure) */}
                         {(() => {
                           const readFunctions = contractData.abi.filter(
@@ -822,24 +737,11 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                           );
                           return (
                             readFunctions.length > 0 && (
-                              <div style={{ marginBottom: "12px" }}>
-                                <div
-                                  style={{
-                                    fontSize: "0.85rem",
-                                    color: "#10b981",
-                                    marginBottom: "6px",
-                                    fontWeight: "600",
-                                  }}
-                                >
+                              <div className="functions-section">
+                                <div className="functions-section-title functions-section-title-read">
                                   Read Functions ({readFunctions.length})
                                 </div>
-                                <div
-                                  style={{
-                                    display: "flex",
-                                    flexWrap: "wrap",
-                                    gap: "8px",
-                                  }}
-                                >
+                                <div className="functions-list">
                                   {readFunctions.map((func: FunctionABI) => (
                                     <button
                                       type="button"
@@ -850,35 +752,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                         setFunctionInputs({});
                                         setReadFunctionResult(null);
                                       }}
-                                      style={{
-                                        padding: "4px 10px",
-                                        background:
-                                          selectedReadFunction?.name === func.name
-                                            ? "rgba(59, 130, 246, 0.3)"
-                                            : "rgba(59, 130, 246, 0.15)",
-                                        color: "#3b82f6",
-                                        border:
-                                          selectedReadFunction?.name === func.name
-                                            ? "1px solid rgba(59, 130, 246, 0.5)"
-                                            : "1px solid transparent",
-                                        borderRadius: "6px",
-                                        fontSize: "0.8rem",
-                                        fontFamily: "monospace",
-                                        cursor: "pointer",
-                                        transition: "all 0.2s",
-                                      }}
-                                      onMouseEnter={(e) => {
-                                        if (selectedReadFunction?.name !== func.name) {
-                                          e.currentTarget.style.background =
-                                            "rgba(59, 130, 246, 0.25)";
-                                        }
-                                      }}
-                                      onMouseLeave={(e) => {
-                                        if (selectedReadFunction?.name !== func.name) {
-                                          e.currentTarget.style.background =
-                                            "rgba(59, 130, 246, 0.15)";
-                                        }
-                                      }}
+                                      className={`btn-function btn-function-read ${selectedReadFunction?.name === func.name ? "selected" : ""}`}
                                     >
                                       {func.name}
                                     </button>
@@ -900,24 +774,11 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                           );
                           return (
                             writeFunctions.length > 0 && (
-                              <div style={{ marginBottom: "12px" }}>
-                                <div
-                                  style={{
-                                    fontSize: "0.85rem",
-                                    color: "#f59e0b",
-                                    marginBottom: "6px",
-                                    fontWeight: "600",
-                                  }}
-                                >
+                              <div className="functions-section">
+                                <div className="functions-section-title functions-section-title-write">
                                   Write Functions ({writeFunctions.length})
                                 </div>
-                                <div
-                                  style={{
-                                    display: "flex",
-                                    flexWrap: "wrap",
-                                    gap: "8px",
-                                  }}
-                                >
+                                <div className="functions-list">
                                   {writeFunctions.map((func: FunctionABI) => (
                                     <button
                                       type="button"
@@ -928,35 +789,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                         setFunctionInputs({});
                                         setReadFunctionResult(null);
                                       }}
-                                      style={{
-                                        padding: "4px 10px",
-                                        background:
-                                          selectedWriteFunction?.name === func.name
-                                            ? "rgba(245, 158, 11, 0.3)"
-                                            : "rgba(245, 158, 11, 0.15)",
-                                        color: "#f59e0b",
-                                        border:
-                                          selectedWriteFunction?.name === func.name
-                                            ? "1px solid rgba(245, 158, 11, 0.5)"
-                                            : "1px solid transparent",
-                                        borderRadius: "6px",
-                                        fontSize: "0.8rem",
-                                        fontFamily: "monospace",
-                                        cursor: "pointer",
-                                        transition: "all 0.2s",
-                                      }}
-                                      onMouseEnter={(e) => {
-                                        if (selectedWriteFunction?.name !== func.name) {
-                                          e.currentTarget.style.background =
-                                            "rgba(245, 158, 11, 0.25)";
-                                        }
-                                      }}
-                                      onMouseLeave={(e) => {
-                                        if (selectedWriteFunction?.name !== func.name) {
-                                          e.currentTarget.style.background =
-                                            "rgba(245, 158, 11, 0.15)";
-                                        }
-                                      }}
+                                      className={`btn-function btn-function-write ${selectedWriteFunction?.name === func.name ? "selected" : ""}`}
                                     >
                                       {func.name}
                                     </button>
@@ -970,53 +803,24 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                         {/* Events */}
                         {contractData.abi.filter((item: ABI) => item.type === "event").length >
                           0 && (
-                          <div style={{ marginBottom: "12px" }}>
-                            <div
-                              style={{
-                                fontSize: "0.85rem",
-                                color: "#10b981",
-                                marginBottom: "6px",
-                                fontWeight: "600",
-                              }}
-                            >
+                          <div className="functions-section">
+                            <div className="functions-section-title functions-section-title-events">
                               Events (
                               {contractData.abi.filter((item: ABI) => item.type === "event").length}
                               )
                             </div>
-                            <div
-                              style={{
-                                display: "flex",
-                                flexWrap: "wrap",
-                                gap: "8px",
-                              }}
-                            >
+                            <div className="functions-list">
                               {contractData.abi
                                 .filter((item: ABI): item is EventABI => item.type === "event")
                                 .slice(0, 10)
                                 .map((event: EventABI) => (
-                                  <span
-                                    key={event.name}
-                                    style={{
-                                      padding: "4px 10px",
-                                      background: "rgba(139, 92, 246, 0.15)",
-                                      color: "#8b5cf6",
-                                      borderRadius: "6px",
-                                      fontSize: "0.8rem",
-                                      fontFamily: "monospace",
-                                    }}
-                                  >
+                                  <span key={event.name} className="event-badge">
                                     {event.name}
                                   </span>
                                 ))}
                               {contractData.abi.filter((item: ABI) => item.type === "event")
                                 .length > 10 && (
-                                <span
-                                  style={{
-                                    color: "rgba(255, 255, 255, 0.5)",
-                                    fontSize: "0.85rem",
-                                    alignSelf: "center",
-                                  }}
-                                >
+                                <span className="events-more">
                                   +
                                   {contractData.abi.filter((item: ABI) => item.type === "event")
                                     .length - 10}{" "}
@@ -1029,48 +833,21 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
 
                         {/* Read Function Form */}
                         {selectedReadFunction && (
-                          <div
-                            style={{
-                              marginTop: "16px",
-                              padding: "16px",
-                              background: "rgba(59, 130, 246, 0.05)",
-                              border: "1px solid rgba(59, 130, 246, 0.2)",
-                              borderRadius: "8px",
-                            }}
-                          >
-                            <div
-                              style={{
-                                fontSize: "0.9rem",
-                                color: "#3b82f6",
-                                marginBottom: "12px",
-                                fontWeight: "600",
-                                fontFamily: "monospace",
-                              }}
-                            >
+                          <div className="function-form function-form-read">
+                            <div className="function-form-title function-form-title-read">
                               {selectedReadFunction.name}
                             </div>
 
                             {selectedReadFunction.inputs &&
                             selectedReadFunction.inputs.length > 0 ? (
-                              <div style={{ marginBottom: "12px" }}>
+                              <div className="function-inputs">
                                 {selectedReadFunction.inputs.map(
                                   (input: ABIParameter, idx: number) => (
                                     <label
                                       key={`${input.name || idx}-${input.type}`}
-                                      style={{
-                                        display: "block",
-                                        marginBottom: "10px",
-                                      }}
+                                      className="function-input-label"
                                     >
-                                      <span
-                                        style={{
-                                          display: "block",
-                                          fontSize: "0.8rem",
-                                          color: "rgba(255, 255, 255, 0.7)",
-                                          marginBottom: "4px",
-                                          fontFamily: "monospace",
-                                        }}
-                                      >
+                                      <span className="function-input-name">
                                         {input.name || `param${idx}`} ({input.type})
                                       </span>
                                       <input
@@ -1083,63 +860,22 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                           })
                                         }
                                         placeholder={`Enter ${input.type}`}
-                                        style={{
-                                          width: "100%",
-                                          padding: "8px 12px",
-                                          background: "rgba(0, 0, 0, 0.3)",
-                                          border: "1px solid rgba(59, 130, 246, 0.3)",
-                                          borderRadius: "6px",
-                                          color: "#fff",
-                                          fontSize: "0.85rem",
-                                          fontFamily: "monospace",
-                                        }}
+                                        className="function-input function-input-read"
                                       />
                                     </label>
                                   ),
                                 )}
                               </div>
                             ) : (
-                              <div
-                                style={{
-                                  fontSize: "0.8rem",
-                                  color: "#10b981",
-                                  marginBottom: "12px",
-                                  fontStyle: "italic",
-                                }}
-                              >
-                                No parameters required
-                              </div>
+                              <div className="function-no-params">No parameters required</div>
                             )}
 
                             {/* Read Result */}
                             {readFunctionResult !== null && (
                               <div
-                                style={{
-                                  marginBottom: "12px",
-                                  padding: "10px",
-                                  borderRadius: "6px",
-                                  fontSize: "0.85rem",
-                                  background: readFunctionResult?.startsWith("Error")
-                                    ? "rgba(239, 68, 68, 0.1)"
-                                    : "rgba(16, 185, 129, 0.1)",
-                                  border: `1px solid ${
-                                    readFunctionResult?.startsWith("Error")
-                                      ? "rgba(239, 68, 68, 0.3)"
-                                      : "rgba(16, 185, 129, 0.3)"
-                                  }`,
-                                  color: readFunctionResult?.startsWith("Error")
-                                    ? "#ef4444"
-                                    : "#10b981",
-                                  wordBreak: "break-all",
-                                  fontFamily: "monospace",
-                                }}
+                                className={`function-result ${readFunctionResult?.startsWith("Error") ? "function-result-error" : "function-result-success"}`}
                               >
-                                <div
-                                  style={{
-                                    fontWeight: "600",
-                                    marginBottom: "4px",
-                                  }}
-                                >
+                                <div className="function-result-title">
                                   {readFunctionResult?.startsWith("Error")
                                     ? "❌ Error"
                                     : "✅ Result"}
@@ -1148,36 +884,12 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                               </div>
                             )}
 
-                            <div style={{ display: "flex", gap: "8px" }}>
+                            <div className="function-actions">
                               <button
                                 type="button"
                                 onClick={handleReadFunction}
                                 disabled={isReadingFunction}
-                                style={{
-                                  flex: 1,
-                                  padding: "10px 16px",
-                                  background: isReadingFunction
-                                    ? "rgba(59, 130, 246, 0.1)"
-                                    : "rgba(59, 130, 246, 0.2)",
-                                  color: isReadingFunction ? "rgba(59, 130, 246, 0.5)" : "#3b82f6",
-                                  border: "1px solid rgba(59, 130, 246, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "0.85rem",
-                                  fontWeight: "600",
-                                  cursor: isReadingFunction ? "not-allowed" : "pointer",
-                                  transition: "all 0.2s",
-                                  opacity: isReadingFunction ? 0.6 : 1,
-                                }}
-                                onMouseEnter={(e) => {
-                                  if (!isReadingFunction) {
-                                    e.currentTarget.style.background = "rgba(59, 130, 246, 0.3)";
-                                  }
-                                }}
-                                onMouseLeave={(e) => {
-                                  if (!isReadingFunction) {
-                                    e.currentTarget.style.background = "rgba(59, 130, 246, 0.2)";
-                                  }
-                                }}
+                                className="btn-function-action btn-query"
                               >
                                 {isReadingFunction ? "Reading..." : "Query"}
                               </button>
@@ -1187,23 +899,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                   setSelectedReadFunction(null);
                                   setReadFunctionResult(null);
                                 }}
-                                style={{
-                                  padding: "10px 16px",
-                                  background: "rgba(239, 68, 68, 0.2)",
-                                  color: "#ef4444",
-                                  border: "1px solid rgba(239, 68, 68, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "0.85rem",
-                                  fontWeight: "600",
-                                  cursor: "pointer",
-                                  transition: "all 0.2s",
-                                }}
-                                onMouseEnter={(e) => {
-                                  e.currentTarget.style.background = "rgba(239, 68, 68, 0.3)";
-                                }}
-                                onMouseLeave={(e) => {
-                                  e.currentTarget.style.background = "rgba(239, 68, 68, 0.2)";
-                                }}
+                                className="btn-cancel"
                               >
                                 Cancel
                               </button>
@@ -1213,65 +909,24 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
 
                         {/* Write Function Form */}
                         {selectedWriteFunction && (
-                          <div
-                            style={{
-                              marginTop: "16px",
-                              padding: "16px",
-                              background: "rgba(245, 158, 11, 0.05)",
-                              border: "1px solid rgba(245, 158, 11, 0.2)",
-                              borderRadius: "8px",
-                            }}
-                          >
-                            <div
-                              style={{
-                                fontSize: "0.9rem",
-                                color: "#f59e0b",
-                                marginBottom: "12px",
-                                fontWeight: "600",
-                                fontFamily: "monospace",
-                              }}
-                            >
+                          <div className="function-form function-form-write">
+                            <div className="function-form-title function-form-title-write">
                               {selectedWriteFunction.name}
                               {selectedWriteFunction.stateMutability === "payable" && (
-                                <span
-                                  style={{
-                                    marginLeft: "8px",
-                                    fontSize: "0.75rem",
-                                    padding: "2px 6px",
-                                    background: "rgba(16, 185, 129, 0.15)",
-                                    color: "#10b981",
-                                    borderRadius: "4px",
-                                  }}
-                                >
-                                  payable
-                                </span>
+                                <span className="payable-badge">payable</span>
                               )}
                             </div>
 
                             {selectedWriteFunction.inputs &&
                             selectedWriteFunction.inputs.length > 0 ? (
-                              <div style={{ marginBottom: "12px" }}>
+                              <div className="function-inputs">
                                 {selectedWriteFunction.inputs.map(
                                   (input: ABIParameter, idx: number) => (
                                     <label
                                       key={`${input.name || idx}-${input.type}`}
-                                      style={{
-                                        display: "block",
-                                        fontSize: "0.8rem",
-                                        color: "rgba(0, 118, 4, 0.7)",
-                                        marginBottom: "4px",
-                                        fontFamily: "monospace",
-                                      }}
+                                      className="function-input-label"
                                     >
-                                      <span
-                                        style={{
-                                          display: "block",
-                                          fontSize: "0.8rem",
-                                          color: "rgba(255, 255, 255, 0.7)",
-                                          marginBottom: "4px",
-                                          fontFamily: "monospace",
-                                        }}
-                                      >
+                                      <span className="function-input-name">
                                         {input.name || `param${idx}`} ({input.type})
                                       </span>
                                       <input
@@ -1284,52 +939,19 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                           })
                                         }
                                         placeholder={`Enter ${input.type}`}
-                                        style={{
-                                          width: "100%",
-                                          padding: "8px 12px",
-                                          background: "rgba(0, 0, 0, 0.3)",
-                                          border: "1px solid rgba(245, 158, 11, 0.3)",
-                                          borderRadius: "6px",
-                                          color: "#fff",
-                                          fontSize: "0.85rem",
-                                          fontFamily: "monospace",
-                                        }}
+                                        className="function-input function-input-write"
                                       />
                                     </label>
                                   ),
                                 )}
                               </div>
                             ) : (
-                              <div
-                                style={{
-                                  fontSize: "0.8rem",
-                                  color: "#10b981",
-                                  marginBottom: "12px",
-                                  fontStyle: "italic",
-                                }}
-                              >
-                                No parameters required
-                              </div>
+                              <div className="function-no-params">No parameters required</div>
                             )}
 
                             {selectedWriteFunction.stateMutability === "payable" && (
-                              <label
-                                style={{
-                                  display: "block",
-                                  marginBottom: "12px",
-                                }}
-                              >
-                                <span
-                                  style={{
-                                    display: "block",
-                                    fontSize: "0.8rem",
-                                    color: "rgba(0, 118, 4, 0.7)",
-                                    marginBottom: "4px",
-                                    fontFamily: "monospace",
-                                  }}
-                                >
-                                  Value (ETH)
-                                </span>
+                              <label className="function-input-label">
+                                <span className="function-input-name">Value (ETH)</span>
                                 <input
                                   type="text"
                                   // biome-ignore lint/complexity/useLiteralKeys: _value is a special key for ETH value
@@ -1341,16 +963,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                     })
                                   }
                                   placeholder="0.0"
-                                  style={{
-                                    width: "100%",
-                                    padding: "8px 12px",
-                                    background: "rgba(0, 0, 0, 0.3)",
-                                    border: "1px solid rgba(16, 185, 129, 0.3)",
-                                    borderRadius: "6px",
-                                    color: "#fff",
-                                    fontSize: "0.85rem",
-                                    fontFamily: "monospace",
-                                  }}
+                                  className="function-input function-input-value"
                                 />
                               </label>
                             )}
@@ -1358,25 +971,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                             {/* Transaction Status */}
                             {(isPending || isConfirming || isConfirmed || isError) && (
                               <div
-                                style={{
-                                  marginBottom: "12px",
-                                  padding: "10px",
-                                  borderRadius: "6px",
-                                  fontSize: "0.85rem",
-                                  background: isError
-                                    ? "rgba(239, 68, 68, 0.1)"
-                                    : isConfirmed
-                                      ? "rgba(16, 185, 129, 0.1)"
-                                      : "rgba(59, 130, 246, 0.1)",
-                                  border: `1px solid ${
-                                    isError
-                                      ? "rgba(239, 68, 68, 0.3)"
-                                      : isConfirmed
-                                        ? "rgba(16, 185, 129, 0.3)"
-                                        : "rgba(59, 130, 246, 0.3)"
-                                  }`,
-                                  color: isError ? "#ef4444" : isConfirmed ? "#10b981" : "#3b82f6",
-                                }}
+                                className={`tx-status-box ${isError ? "tx-status-error" : isConfirmed ? "tx-status-success" : "tx-status-pending"}`}
                               >
                                 {isPending && "⏳ Waiting for wallet confirmation..."}
                                 {isConfirming && "⏳ Waiting for transaction confirmation..."}
@@ -1384,20 +979,8 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                                   <div>
                                     ✅ Transaction confirmed!
                                     {hash && (
-                                      <div
-                                        style={{
-                                          marginTop: "4px",
-                                          fontFamily: "monospace",
-                                          fontSize: "0.75rem",
-                                        }}
-                                      >
-                                        <Link
-                                          to={`/${networkId}/tx/${hash}`}
-                                          style={{
-                                            color: "#10b981",
-                                            textDecoration: "underline",
-                                          }}
-                                        >
+                                      <div className="tx-hash-link">
+                                        <Link to={`/${networkId}/tx/${hash}`}>
                                           View transaction
                                         </Link>
                                       </div>
@@ -1410,40 +993,12 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                               </div>
                             )}
 
-                            <div style={{ display: "flex", gap: "8px" }}>
+                            <div className="function-actions">
                               <button
                                 type="button"
                                 onClick={handleWriteFunction}
                                 disabled={isPending || isConfirming}
-                                style={{
-                                  flex: 1,
-                                  padding: "10px 16px",
-                                  background:
-                                    isPending || isConfirming
-                                      ? "rgba(245, 158, 11, 0.1)"
-                                      : "rgba(245, 158, 11, 0.2)",
-                                  color:
-                                    isPending || isConfirming
-                                      ? "rgba(245, 158, 11, 0.5)"
-                                      : "#f59e0b",
-                                  border: "1px solid rgba(245, 158, 11, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "0.85rem",
-                                  fontWeight: "600",
-                                  cursor: isPending || isConfirming ? "not-allowed" : "pointer",
-                                  transition: "all 0.2s",
-                                  opacity: isPending || isConfirming ? 0.6 : 1,
-                                }}
-                                onMouseEnter={(e) => {
-                                  if (!isPending && !isConfirming) {
-                                    e.currentTarget.style.background = "rgba(245, 158, 11, 0.3)";
-                                  }
-                                }}
-                                onMouseLeave={(e) => {
-                                  if (!isPending && !isConfirming) {
-                                    e.currentTarget.style.background = "rgba(245, 158, 11, 0.2)";
-                                  }
-                                }}
+                                className="btn-function-action btn-write-action"
                               >
                                 {isPending
                                   ? "Confirming in Wallet..."
@@ -1454,23 +1009,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                               <button
                                 type="button"
                                 onClick={() => setSelectedWriteFunction(null)}
-                                style={{
-                                  padding: "10px 16px",
-                                  background: "rgba(239, 68, 68, 0.2)",
-                                  color: "#ef4444",
-                                  border: "1px solid rgba(239, 68, 68, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "0.85rem",
-                                  fontWeight: "600",
-                                  cursor: "pointer",
-                                  transition: "all 0.2s",
-                                }}
-                                onMouseEnter={(e) => {
-                                  e.currentTarget.style.background = "rgba(239, 68, 68, 0.3)";
-                                }}
-                                onMouseLeave={(e) => {
-                                  e.currentTarget.style.background = "rgba(239, 68, 68, 0.2)";
-                                }}
+                                className="btn-cancel"
                               >
                                 Cancel
                               </button>
@@ -1488,14 +1027,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                         href={`https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`}
                         target="_blank"
                         rel="noopener noreferrer"
-                        style={{
-                          color: "#10b981",
-                          textDecoration: "none",
-                          fontWeight: "600",
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: "6px",
-                        }}
+                        className="sourcify-link"
                       >
                         View Full Contract on Sourcify ↗
                       </a>
@@ -1508,40 +1040,27 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
 
           {/* Last Transactions Section */}
           <div className="tx-details">
-            <div
-              className="tx-section"
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
+            <div className="tx-section tx-history-header">
               <span className="tx-section-title">Last Transactions</span>
               {transactionsResult && (
                 <span
-                  style={{
-                    fontSize: "0.85rem",
-                    color: transactionsResult.isComplete ? "#10b981" : "#f59e0b",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "6px",
-                  }}
+                  className={`tx-history-status ${transactionsResult.source === "trace_filter" ? "tx-history-status-complete" : transactionsResult.source === "logs" ? "tx-history-status-partial" : "tx-history-status-none"}`}
                 >
                   {transactionsResult.source === "trace_filter" && (
                     <>
-                      <span style={{ color: "#10b981" }}>●</span>
+                      <span className="tx-history-dot">●</span>
                       Complete history ({transactionDetails.length} transactions)
                     </>
                   )}
                   {transactionsResult.source === "logs" && (
                     <>
-                      <span style={{ color: "#f59e0b" }}>●</span>
+                      <span className="tx-history-dot">●</span>
                       Partial (logs only) - {transactionDetails.length} transactions
                     </>
                   )}
                   {transactionsResult.source === "none" && (
                     <>
-                      <span style={{ color: "#ef4444" }}>●</span>
+                      <span className="tx-history-dot">●</span>
                       No data available
                     </>
                   )}
@@ -1552,21 +1071,9 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
             {/* Warning message for partial data */}
             {transactionsResult?.message && (
               <div
-                style={{
-                  padding: "12px 16px",
-                  background:
-                    transactionsResult.source === "none"
-                      ? "rgba(239, 68, 68, 0.1)"
-                      : "rgba(245, 158, 11, 0.1)",
-                  borderBottom: "1px solid rgba(0, 0, 0, 0.1)",
-                  fontSize: "0.85rem",
-                  color: transactionsResult.source === "none" ? "#ef4444" : "#f59e0b",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                }}
+                className={`tx-history-message ${transactionsResult.source === "none" ? "tx-history-message-error" : "tx-history-message-warning"}`}
               >
-                <span style={{ fontSize: "1rem" }}>
+                <span className="tx-history-message-icon">
                   {transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
                 </span>
                 {transactionsResult.message}
@@ -1649,15 +1156,7 @@ const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
                           {tx.to ? (
                             <Link
                               to={`/${networkId}/address/${tx.to}`}
-                              style={{
-                                color:
-                                  tx.to?.toLowerCase() === addressHash.toLowerCase()
-                                    ? "#f59e0b"
-                                    : "#10b981",
-                                textDecoration: "none",
-                                fontFamily: "monospace",
-                                fontSize: "0.9rem",
-                              }}
+                              className={`tx-table-to-link ${tx.to?.toLowerCase() === addressHash.toLowerCase() ? "tx-table-to-link-self" : "tx-table-to-link-other"}`}
                             >
                               {tx.to?.toLowerCase() === addressHash.toLowerCase()
                                 ? "This Address"
diff --git a/src/styles/components.css b/src/styles/components.css
index 752eb61b..cc9f23dc 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -3301,3 +3301,491 @@
 	}
 }
 
+/* ============================================
+   Address Display Styles
+   ============================================ */
+
+/* Address Header */
+.address-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.address-header-left {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.address-ens-name {
+	margin-left: 12px;
+	margin-right: 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	color: #10b981;
+}
+
+/* Contract Functions Section */
+.contract-functions-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8px;
+}
+
+.contract-functions-content {
+	margin-top: 8px;
+}
+
+.functions-section {
+	margin-bottom: 12px;
+}
+
+.functions-section-title {
+	font-size: 0.85rem;
+	font-weight: 600;
+	margin-bottom: 6px;
+}
+
+.functions-section-title-read {
+	color: #10b981;
+}
+
+.functions-section-title-write {
+	color: #f59e0b;
+}
+
+.functions-section-title-events {
+	color: #10b981;
+}
+
+.functions-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+/* Wallet Connect Buttons */
+.wallet-hidden {
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+}
+
+.btn-connect-wallet {
+	padding: 8px 16px;
+	background: rgba(16, 185, 129, 0.15);
+	color: #10b981;
+	border: 1px solid rgba(16, 185, 129, 0.3);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-connect-wallet:hover {
+	background: rgba(16, 185, 129, 0.25);
+}
+
+.btn-wrong-network {
+	padding: 8px 16px;
+	background: rgba(239, 68, 68, 0.15);
+	color: #ef4444;
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.wallet-connected-container {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.btn-chain-selector {
+	padding: 6px 12px;
+	background: rgba(59, 130, 246, 0.15);
+	color: #3b82f6;
+	border: 1px solid rgba(59, 130, 246, 0.3);
+	border-radius: 6px;
+	font-size: 0.8rem;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+}
+
+.btn-account {
+	padding: 6px 12px;
+	background: rgba(16, 185, 129, 0.15);
+	color: #10b981;
+	border: 1px solid rgba(16, 185, 129, 0.3);
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	font-family: monospace;
+}
+
+.chain-icon {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+}
+
+/* Function Buttons */
+.btn-function {
+	padding: 4px 10px;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	font-family: monospace;
+	cursor: pointer;
+	transition: all 0.2s;
+	border: 1px solid transparent;
+}
+
+.btn-function-read {
+	background: rgba(59, 130, 246, 0.15);
+	color: #3b82f6;
+}
+
+.btn-function-read:hover {
+	background: rgba(59, 130, 246, 0.25);
+}
+
+.btn-function-read.selected {
+	background: rgba(59, 130, 246, 0.3);
+	border-color: rgba(59, 130, 246, 0.5);
+}
+
+.btn-function-write {
+	background: rgba(245, 158, 11, 0.15);
+	color: #f59e0b;
+}
+
+.btn-function-write:hover {
+	background: rgba(245, 158, 11, 0.25);
+}
+
+.btn-function-write.selected {
+	background: rgba(245, 158, 11, 0.3);
+	border-color: rgba(245, 158, 11, 0.5);
+}
+
+/* Event Badge */
+.event-badge {
+	padding: 4px 10px;
+	background: rgba(139, 92, 246, 0.15);
+	color: #8b5cf6;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	font-family: monospace;
+}
+
+.events-more {
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 0.85rem;
+	align-self: center;
+}
+
+/* Function Forms */
+.function-form {
+	margin-top: 16px;
+	padding: 16px;
+	border-radius: 8px;
+}
+
+.function-form-read {
+	background: rgba(59, 130, 246, 0.05);
+	border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.function-form-write {
+	background: rgba(245, 158, 11, 0.05);
+	border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.function-form-title {
+	font-size: 0.9rem;
+	margin-bottom: 12px;
+	font-weight: 600;
+	font-family: monospace;
+}
+
+.function-form-title-read {
+	color: #3b82f6;
+}
+
+.function-form-title-write {
+	color: #f59e0b;
+}
+
+.function-inputs {
+	margin-bottom: 12px;
+}
+
+.function-input-label {
+	display: block;
+	margin-bottom: 10px;
+}
+
+.function-input-name {
+	display: block;
+	font-size: 0.8rem;
+	color: rgba(255, 255, 255, 0.7);
+	margin-bottom: 4px;
+	font-family: monospace;
+}
+
+.function-input {
+	width: 100%;
+	padding: 8px 12px;
+	background: rgba(0, 0, 0, 0.3);
+	border-radius: 6px;
+	color: #fff;
+	font-size: 0.85rem;
+	font-family: monospace;
+}
+
+.function-input-read {
+	border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.function-input-write {
+	border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+.function-input-value {
+	border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.function-no-params {
+	font-size: 0.8rem;
+	color: #10b981;
+	margin-bottom: 12px;
+	font-style: italic;
+}
+
+/* Payable Badge */
+.payable-badge {
+	margin-left: 8px;
+	font-size: 0.75rem;
+	padding: 2px 6px;
+	background: rgba(16, 185, 129, 0.15);
+	color: #10b981;
+	border-radius: 4px;
+}
+
+/* Function Result */
+.function-result {
+	margin-bottom: 12px;
+	padding: 10px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+	word-break: break-all;
+	font-family: monospace;
+}
+
+.function-result-success {
+	background: rgba(16, 185, 129, 0.1);
+	border: 1px solid rgba(16, 185, 129, 0.3);
+	color: #10b981;
+}
+
+.function-result-error {
+	background: rgba(239, 68, 68, 0.1);
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	color: #ef4444;
+}
+
+.function-result-title {
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+/* Function Action Buttons */
+.function-actions {
+	display: flex;
+	gap: 8px;
+}
+
+.btn-function-action {
+	padding: 10px 16px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-query {
+	flex: 1;
+	background: rgba(59, 130, 246, 0.2);
+	color: #3b82f6;
+	border: 1px solid rgba(59, 130, 246, 0.4);
+}
+
+.btn-query:hover:not(:disabled) {
+	background: rgba(59, 130, 246, 0.3);
+}
+
+.btn-query:disabled {
+	background: rgba(59, 130, 246, 0.1);
+	color: rgba(59, 130, 246, 0.5);
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.btn-write-action {
+	flex: 1;
+	background: rgba(245, 158, 11, 0.2);
+	color: #f59e0b;
+	border: 1px solid rgba(245, 158, 11, 0.4);
+}
+
+.btn-write-action:hover:not(:disabled) {
+	background: rgba(245, 158, 11, 0.3);
+}
+
+.btn-write-action:disabled {
+	background: rgba(245, 158, 11, 0.1);
+	color: rgba(245, 158, 11, 0.5);
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.btn-cancel {
+	padding: 10px 16px;
+	background: rgba(239, 68, 68, 0.2);
+	color: #ef4444;
+	border: 1px solid rgba(239, 68, 68, 0.4);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-cancel:hover {
+	background: rgba(239, 68, 68, 0.3);
+}
+
+/* Transaction Status */
+.tx-status-box {
+	margin-bottom: 12px;
+	padding: 10px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+}
+
+.tx-status-pending {
+	background: rgba(59, 130, 246, 0.1);
+	border: 1px solid rgba(59, 130, 246, 0.3);
+	color: #3b82f6;
+}
+
+.tx-status-success {
+	background: rgba(16, 185, 129, 0.1);
+	border: 1px solid rgba(16, 185, 129, 0.3);
+	color: #10b981;
+}
+
+.tx-status-error {
+	background: rgba(239, 68, 68, 0.1);
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	color: #ef4444;
+}
+
+.tx-hash-link {
+	margin-top: 4px;
+	font-family: monospace;
+	font-size: 0.75rem;
+}
+
+.tx-hash-link a {
+	color: #10b981;
+	text-decoration: underline;
+}
+
+/* Sourcify Link */
+.sourcify-link {
+	color: #10b981;
+	text-decoration: none;
+	font-weight: 600;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+/* Transaction History Section */
+.tx-history-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tx-history-status {
+	font-size: 0.85rem;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.tx-history-status-complete {
+	color: #10b981;
+}
+
+.tx-history-status-partial {
+	color: #f59e0b;
+}
+
+.tx-history-status-none {
+	color: #ef4444;
+}
+
+.tx-history-dot {
+	font-size: 0.5rem;
+}
+
+.tx-history-message {
+	padding: 12px 16px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	font-size: 0.85rem;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.tx-history-message-warning {
+	background: rgba(245, 158, 11, 0.1);
+	color: #f59e0b;
+}
+
+.tx-history-message-error {
+	background: rgba(239, 68, 68, 0.1);
+	color: #ef4444;
+}
+
+.tx-history-message-icon {
+	font-size: 1rem;
+}
+
+/* Transaction Table To Link */
+.tx-table-to-link {
+	text-decoration: none;
+	font-family: monospace;
+	font-size: 0.9rem;
+}
+
+.tx-table-to-link-self {
+	color: #f59e0b;
+}
+
+.tx-table-to-link-other {
+	color: #10b981;
+}
+

From 68e65a6396012b5cb2e526b721ec97b96b832700 Mon Sep 17 00:00:00 2001
From: AugustoL <augustolemble@pm.me>
Date: Fri, 5 Dec 2025 12:21:01 -0300
Subject: [PATCH 2/5] feat: refactor address page with type-based display
 components

- Add AddressType for account, contract, erc20, erc721, erc1155
- Create fetchAddressWithType utility combining data fetch and type detection
- Detect token types via metadata first, then ERC165/ERC20 on-chain detection
- Add separate display components for each address type
- Extract shared components: AddressHeader, BalanceSection, ContractDetails, etc.
- Add CSS classes for address type indicators and token badges
---
 .../pages/address/displays/AccountDisplay.tsx |  90 ++++
 .../address/displays/ContractDisplay.tsx      | 233 +++++++++
 .../pages/address/displays/ERC1155Display.tsx | 320 ++++++++++++
 .../pages/address/displays/ERC20Display.tsx   | 368 +++++++++++++
 .../pages/address/displays/ERC721Display.tsx  | 344 +++++++++++++
 .../pages/address/displays/index.ts           |   5 +
 src/components/pages/address/index.tsx        | 122 +++--
 .../pages/address/shared/AddressHeader.tsx    |  49 ++
 .../pages/address/shared/BalanceSection.tsx   |  41 ++
 .../pages/address/shared/ContractDetails.tsx  | 255 +++++++++
 .../address/shared/ContractInteraction.tsx    | 483 ++++++++++++++++++
 .../pages/address/shared/ContractStorage.tsx  |  57 +++
 .../address/shared/TransactionHistory.tsx     | 214 ++++++++
 src/components/pages/address/shared/index.ts  |   6 +
 src/styles/components.css                     |  85 +++
 src/types/index.ts                            |   5 +
 src/utils/addressTypeDetection.ts             | 280 ++++++++++
 17 files changed, 2911 insertions(+), 46 deletions(-)
 create mode 100644 src/components/pages/address/displays/AccountDisplay.tsx
 create mode 100644 src/components/pages/address/displays/ContractDisplay.tsx
 create mode 100644 src/components/pages/address/displays/ERC1155Display.tsx
 create mode 100644 src/components/pages/address/displays/ERC20Display.tsx
 create mode 100644 src/components/pages/address/displays/ERC721Display.tsx
 create mode 100644 src/components/pages/address/displays/index.ts
 create mode 100644 src/components/pages/address/shared/AddressHeader.tsx
 create mode 100644 src/components/pages/address/shared/BalanceSection.tsx
 create mode 100644 src/components/pages/address/shared/ContractDetails.tsx
 create mode 100644 src/components/pages/address/shared/ContractInteraction.tsx
 create mode 100644 src/components/pages/address/shared/ContractStorage.tsx
 create mode 100644 src/components/pages/address/shared/TransactionHistory.tsx
 create mode 100644 src/components/pages/address/shared/index.ts
 create mode 100644 src/utils/addressTypeDetection.ts

diff --git a/src/components/pages/address/displays/AccountDisplay.tsx b/src/components/pages/address/displays/AccountDisplay.tsx
new file mode 100644
index 00000000..87de4d1c
--- /dev/null
+++ b/src/components/pages/address/displays/AccountDisplay.tsx
@@ -0,0 +1,90 @@
+import type React from "react";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import { AddressHeader, BalanceSection, TransactionHistory } from "../shared";
+
+interface AccountDisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const AccountDisplay: React.FC<AccountDisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="account"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+      />
+
+      <div className="address-section-content">
+        {/* Balance Section */}
+        <BalanceSection address={address} />
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDisplay
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AccountDisplay;
diff --git a/src/components/pages/address/displays/ContractDisplay.tsx b/src/components/pages/address/displays/ContractDisplay.tsx
new file mode 100644
index 00000000..53a5e8eb
--- /dev/null
+++ b/src/components/pages/address/displays/ContractDisplay.tsx
@@ -0,0 +1,233 @@
+import type React from "react";
+import { useContext, useMemo } from "react";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+
+interface ContractDisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ContractDisplay: React.FC<ContractDisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles } = useContext(AppContext);
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Check if we have local artifact data for this address
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  // Parse local artifact to sourcify format if it exists
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  // Use local artifact data if available and sourcify is not verified
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="contract"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+      />
+
+      <div className="address-section-content">
+        {/* Address Details Section */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">Contract Details</span>
+          </div>
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+
+          {/* Contract Name (if verified) */}
+          {contractData?.name && (
+            <div className="tx-row">
+              <span className="tx-label">Contract Name:</span>
+              <span className="tx-value">{contractData.name}</span>
+            </div>
+          )}
+
+          {/* Compiler Version (if verified) */}
+          {contractData?.compilerVersion && (
+            <div className="tx-row">
+              <span className="tx-label">Compiler:</span>
+              <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+            </div>
+          )}
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDisplay
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+
+        {/* Contract Storage */}
+        <ContractStorage address={address} />
+      </div>
+    </div>
+  );
+};
+
+export default ContractDisplay;
diff --git a/src/components/pages/address/displays/ERC1155Display.tsx b/src/components/pages/address/displays/ERC1155Display.tsx
new file mode 100644
index 00000000..56e85c46
--- /dev/null
+++ b/src/components/pages/address/displays/ERC1155Display.tsx
@@ -0,0 +1,320 @@
+import type React from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+
+interface ERC1155DisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles, rpcUrls } = useContext(AppContext);
+  const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
+  const [onChainData, setOnChainData] = useState<{
+    uri?: string;
+  } | null>(null);
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Fetch token metadata from explorer-metadata
+  useEffect(() => {
+    fetchToken(Number(networkId), addressHash).then(setTokenMetadata).catch(console.error);
+  }, [networkId, addressHash]);
+
+  // Fetch on-chain ERC1155 data
+  useEffect(() => {
+    const fetchOnChainData = async () => {
+      const chainId = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[chainId as keyof typeof rpcUrls];
+      if (!rpcUrlsForChain) return;
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+      if (!rpcUrl) return;
+
+      // Try to get URI for token ID 0 as a sample
+      // uri(uint256) with tokenId = 0
+      const uriSelector =
+        "0x0e89341c0000000000000000000000000000000000000000000000000000000000000000";
+
+      try {
+        const response = await fetch(rpcUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            method: "eth_call",
+            params: [{ to: addressHash, data: uriSelector }, "latest"],
+            id: 1,
+          }),
+        });
+        const data = await response.json();
+        if (!data.error && data.result && data.result !== "0x") {
+          // Decode string
+          const hex = data.result.slice(2);
+          if (hex.length >= 128) {
+            const lengthHex = hex.slice(64, 128);
+            const length = parseInt(lengthHex, 16);
+            const strHex = hex.slice(128, 128 + length * 2);
+            const uri = Buffer.from(strHex, "hex").toString("utf8");
+            setOnChainData({ uri });
+          }
+        }
+      } catch {
+        // Continue
+      }
+    };
+
+    fetchOnChainData();
+  }, [networkId, addressHash, rpcUrls]);
+
+  // Check if we have local artifact data
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  // Combine token data
+  const collectionName = tokenMetadata?.name || contractData?.name;
+  const collectionSymbol = tokenMetadata?.symbol;
+  const collectionLogo = tokenMetadata?.logo
+    ? getAssetUrl(tokenMetadata.logo)
+    : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="erc1155"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+        tokenSymbol={collectionSymbol}
+        tokenName={collectionName}
+      />
+
+      <div className="address-section-content">
+        {/* Multi-Token Collection Details */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">Multi-Token Collection Details</span>
+          </div>
+
+          {/* Collection Logo and Name */}
+          <div className="tx-row">
+            <span className="tx-label">Collection:</span>
+            <span className="tx-value">
+              <div className="token-info-row">
+                <img
+                  src={collectionLogo}
+                  alt={collectionSymbol || "Multi-Token Collection"}
+                  className="token-logo"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <span className="token-name-symbol">
+                  {collectionName && <span className="token-name">{collectionName}</span>}
+                  {collectionSymbol && <span className="token-symbol">({collectionSymbol})</span>}
+                </span>
+              </div>
+            </span>
+          </div>
+
+          {/* Token Standard */}
+          <div className="tx-row">
+            <span className="tx-label">Token Standard:</span>
+            <span className="tx-value">
+              <span className="token-standard-badge token-standard-erc1155">ERC-1155</span>
+            </span>
+          </div>
+
+          {/* Metadata URI */}
+          {onChainData?.uri && (
+            <div className="tx-row">
+              <span className="tx-label">Metadata URI:</span>
+              <span className="tx-value">
+                <span className="tx-mono" style={{ wordBreak: "break-all" }}>
+                  {onChainData.uri.length > 60
+                    ? `${onChainData.uri.slice(0, 60)}...`
+                    : onChainData.uri}
+                </span>
+              </span>
+            </div>
+          )}
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDisplay
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ERC1155Display;
diff --git a/src/components/pages/address/displays/ERC20Display.tsx b/src/components/pages/address/displays/ERC20Display.tsx
new file mode 100644
index 00000000..f8f11cc3
--- /dev/null
+++ b/src/components/pages/address/displays/ERC20Display.tsx
@@ -0,0 +1,368 @@
+import type React from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+
+interface ERC20DisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ERC20Display: React.FC<ERC20DisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles, rpcUrls } = useContext(AppContext);
+  const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
+  const [onChainData, setOnChainData] = useState<{
+    name?: string;
+    symbol?: string;
+    decimals?: number;
+    totalSupply?: string;
+  } | null>(null);
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Fetch token metadata from explorer-metadata
+  useEffect(() => {
+    fetchToken(Number(networkId), addressHash).then(setTokenMetadata).catch(console.error);
+  }, [networkId, addressHash]);
+
+  // Fetch on-chain token data
+  useEffect(() => {
+    const fetchOnChainData = async () => {
+      const chainId = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[chainId as keyof typeof rpcUrls];
+      if (!rpcUrlsForChain) return;
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+      if (!rpcUrl) return;
+
+      const calls = [
+        { selector: "0x06fdde03", key: "name" }, // name()
+        { selector: "0x95d89b41", key: "symbol" }, // symbol()
+        { selector: "0x313ce567", key: "decimals" }, // decimals()
+        { selector: "0x18160ddd", key: "totalSupply" }, // totalSupply()
+      ];
+
+      const results: Record<string, string> = {};
+
+      for (const call of calls) {
+        try {
+          const response = await fetch(rpcUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              jsonrpc: "2.0",
+              method: "eth_call",
+              params: [{ to: addressHash, data: call.selector }, "latest"],
+              id: 1,
+            }),
+          });
+          const data = await response.json();
+          if (!data.error && data.result && data.result !== "0x") {
+            results[call.key] = data.result;
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      // Decode results
+      const decoded: typeof onChainData = {};
+
+      // Decode string (name, symbol)
+      const decodeString = (hex: string): string => {
+        try {
+          // Remove 0x prefix
+          const data = hex.slice(2);
+          // Check if it's dynamic string (offset + length + data)
+          if (data.length >= 128) {
+            const lengthHex = data.slice(64, 128);
+            const length = parseInt(lengthHex, 16);
+            const strHex = data.slice(128, 128 + length * 2);
+            return Buffer.from(strHex, "hex").toString("utf8");
+          }
+          return "";
+        } catch {
+          return "";
+        }
+      };
+
+      if (results.name) {
+        decoded.name = decodeString(results.name);
+      }
+      if (results.symbol) {
+        decoded.symbol = decodeString(results.symbol);
+      }
+      if (results.decimals) {
+        decoded.decimals = parseInt(results.decimals, 16);
+      }
+      if (results.totalSupply) {
+        decoded.totalSupply = BigInt(results.totalSupply).toString();
+      }
+
+      setOnChainData(decoded);
+    };
+
+    fetchOnChainData();
+  }, [networkId, addressHash, rpcUrls]);
+
+  // Check if we have local artifact data
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  // Combine token data from metadata and on-chain
+  const tokenName = tokenMetadata?.name || onChainData?.name;
+  const tokenSymbol = tokenMetadata?.symbol || onChainData?.symbol;
+  const tokenDecimals = tokenMetadata?.decimals ?? onChainData?.decimals;
+  const tokenTotalSupply = onChainData?.totalSupply;
+  const tokenLogo = tokenMetadata?.logo
+    ? getAssetUrl(tokenMetadata.logo)
+    : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
+
+  // Format total supply
+  const formattedTotalSupply = useMemo(() => {
+    if (!tokenTotalSupply || tokenDecimals === undefined) return null;
+    try {
+      const supply = BigInt(tokenTotalSupply);
+      const divisor = BigInt(10 ** tokenDecimals);
+      const whole = supply / divisor;
+      return whole.toLocaleString();
+    } catch {
+      return tokenTotalSupply;
+    }
+  }, [tokenTotalSupply, tokenDecimals]);
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="erc20"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+        tokenSymbol={tokenSymbol}
+        tokenName={tokenName}
+      />
+
+      <div className="address-section-content">
+        {/* Token Details Section */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">Token Details</span>
+          </div>
+
+          {/* Token Logo and Name */}
+          <div className="tx-row">
+            <span className="tx-label">Token:</span>
+            <span className="tx-value">
+              <div className="token-info-row">
+                <img
+                  src={tokenLogo}
+                  alt={tokenSymbol || "Token"}
+                  className="token-logo"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <span className="token-name-symbol">
+                  {tokenName && <span className="token-name">{tokenName}</span>}
+                  {tokenSymbol && <span className="token-symbol">({tokenSymbol})</span>}
+                </span>
+              </div>
+            </span>
+          </div>
+
+          {/* Decimals */}
+          {tokenDecimals !== undefined && (
+            <div className="tx-row">
+              <span className="tx-label">Decimals:</span>
+              <span className="tx-value">{tokenDecimals}</span>
+            </div>
+          )}
+
+          {/* Total Supply */}
+          {formattedTotalSupply && (
+            <div className="tx-row">
+              <span className="tx-label">Total Supply:</span>
+              <span className="tx-value">
+                {formattedTotalSupply} {tokenSymbol}
+              </span>
+            </div>
+          )}
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDisplay
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ERC20Display;
diff --git a/src/components/pages/address/displays/ERC721Display.tsx b/src/components/pages/address/displays/ERC721Display.tsx
new file mode 100644
index 00000000..13e7c747
--- /dev/null
+++ b/src/components/pages/address/displays/ERC721Display.tsx
@@ -0,0 +1,344 @@
+import type React from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+
+interface ERC721DisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ERC721Display: React.FC<ERC721DisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles, rpcUrls } = useContext(AppContext);
+  const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
+  const [onChainData, setOnChainData] = useState<{
+    name?: string;
+    symbol?: string;
+    totalSupply?: string;
+  } | null>(null);
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Fetch token metadata from explorer-metadata
+  useEffect(() => {
+    fetchToken(Number(networkId), addressHash).then(setTokenMetadata).catch(console.error);
+  }, [networkId, addressHash]);
+
+  // Fetch on-chain NFT data
+  useEffect(() => {
+    const fetchOnChainData = async () => {
+      const chainId = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[chainId as keyof typeof rpcUrls];
+      if (!rpcUrlsForChain) return;
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+      if (!rpcUrl) return;
+
+      const calls = [
+        { selector: "0x06fdde03", key: "name" }, // name()
+        { selector: "0x95d89b41", key: "symbol" }, // symbol()
+        { selector: "0x18160ddd", key: "totalSupply" }, // totalSupply()
+      ];
+
+      const results: Record<string, string> = {};
+
+      for (const call of calls) {
+        try {
+          const response = await fetch(rpcUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              jsonrpc: "2.0",
+              method: "eth_call",
+              params: [{ to: addressHash, data: call.selector }, "latest"],
+              id: 1,
+            }),
+          });
+          const data = await response.json();
+          if (!data.error && data.result && data.result !== "0x") {
+            results[call.key] = data.result;
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      // Decode results
+      const decoded: typeof onChainData = {};
+
+      const decodeString = (hex: string): string => {
+        try {
+          const data = hex.slice(2);
+          if (data.length >= 128) {
+            const lengthHex = data.slice(64, 128);
+            const length = parseInt(lengthHex, 16);
+            const strHex = data.slice(128, 128 + length * 2);
+            return Buffer.from(strHex, "hex").toString("utf8");
+          }
+          return "";
+        } catch {
+          return "";
+        }
+      };
+
+      if (results.name) {
+        decoded.name = decodeString(results.name);
+      }
+      if (results.symbol) {
+        decoded.symbol = decodeString(results.symbol);
+      }
+      if (results.totalSupply) {
+        decoded.totalSupply = BigInt(results.totalSupply).toString();
+      }
+
+      setOnChainData(decoded);
+    };
+
+    fetchOnChainData();
+  }, [networkId, addressHash, rpcUrls]);
+
+  // Check if we have local artifact data
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  // Combine NFT data
+  const collectionName = tokenMetadata?.name || onChainData?.name;
+  const collectionSymbol = tokenMetadata?.symbol || onChainData?.symbol;
+  const totalSupply = onChainData?.totalSupply;
+  const collectionLogo = tokenMetadata?.logo
+    ? getAssetUrl(tokenMetadata.logo)
+    : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="erc721"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+        tokenSymbol={collectionSymbol}
+        tokenName={collectionName}
+      />
+
+      <div className="address-section-content">
+        {/* NFT Collection Details */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">NFT Collection Details</span>
+          </div>
+
+          {/* Collection Logo and Name */}
+          <div className="tx-row">
+            <span className="tx-label">Collection:</span>
+            <span className="tx-value">
+              <div className="token-info-row">
+                <img
+                  src={collectionLogo}
+                  alt={collectionSymbol || "NFT Collection"}
+                  className="token-logo"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <span className="token-name-symbol">
+                  {collectionName && <span className="token-name">{collectionName}</span>}
+                  {collectionSymbol && <span className="token-symbol">({collectionSymbol})</span>}
+                </span>
+              </div>
+            </span>
+          </div>
+
+          {/* Token Standard */}
+          <div className="tx-row">
+            <span className="tx-label">Token Standard:</span>
+            <span className="tx-value">
+              <span className="token-standard-badge token-standard-erc721">ERC-721</span>
+            </span>
+          </div>
+
+          {/* Total Supply */}
+          {totalSupply && (
+            <div className="tx-row">
+              <span className="tx-label">Total Minted:</span>
+              <span className="tx-value">{Number(totalSupply).toLocaleString()} NFTs</span>
+            </div>
+          )}
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDisplay
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ERC721Display;
diff --git a/src/components/pages/address/displays/index.ts b/src/components/pages/address/displays/index.ts
new file mode 100644
index 00000000..42830a02
--- /dev/null
+++ b/src/components/pages/address/displays/index.ts
@@ -0,0 +1,5 @@
+export { default as AccountDisplay } from "./AccountDisplay";
+export { default as ContractDisplay } from "./ContractDisplay";
+export { default as ERC20Display } from "./ERC20Display";
+export { default as ERC721Display } from "./ERC721Display";
+export { default as ERC1155Display } from "./ERC1155Display";
diff --git a/src/components/pages/address/index.tsx b/src/components/pages/address/index.tsx
index 7da7f2d4..3eb9d730 100644
--- a/src/components/pages/address/index.tsx
+++ b/src/components/pages/address/index.tsx
@@ -1,17 +1,24 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
 import { useDataService } from "../../../hooks/useDataService";
 import { useENS } from "../../../hooks/useENS";
-import { useProviderSelection } from "../../../hooks/useProviderSelection";
-import { useSelectedData } from "../../../hooks/useSelectedData";
 import type {
   AddressTransactionsResult,
-  Address as AddressType,
+  Address as AddressData,
+  AddressType,
   DataWithMetadata,
   Transaction,
 } from "../../../types";
+import { fetchAddressWithType } from "../../../utils/addressTypeDetection";
 import Loader from "../../common/Loader";
-import AddressDisplay from "./AddressDisplay";
+import {
+  AccountDisplay,
+  ContractDisplay,
+  ERC20Display,
+  ERC721Display,
+  ERC1155Display,
+} from "./displays";
 
 export default function Address() {
   const { networkId, address } = useParams<{
@@ -21,7 +28,9 @@ export default function Address() {
   const location = useLocation();
   const numericNetworkId = Number(networkId) || 1;
   const dataService = useDataService(numericNetworkId);
-  const [addressResult, setAddressResult] = useState<DataWithMetadata<AddressType> | null>(null);
+  const { rpcUrls } = useContext(AppContext);
+  const [addressData, setAddressData] = useState<AddressData | null>(null);
+  const [addressType, setAddressType] = useState<AddressType>("account");
   const [transactionsResult, setTransactionsResult] = useState<AddressTransactionsResult | null>(
     null,
   );
@@ -30,14 +39,6 @@ export default function Address() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Provider selection state
-  const [selectedProvider, setSelectedProvider] = useProviderSelection(
-    `address_${numericNetworkId}_${address}`,
-  );
-
-  // Extract actual address data based on selected provider
-  const addressData = useSelectedData(addressResult, selectedProvider);
-
   // Get ENS name from navigation state (if user searched by ENS name)
   const initialEnsName = (location.state as { ensName?: string })?.ensName;
 
@@ -51,37 +52,58 @@ export default function Address() {
     isMainnet,
   } = useENS(address, numericNetworkId, initialEnsName);
 
+  // Fetch address data and detect type in a single flow
   useEffect(() => {
-    if (!dataService || !address) {
+    if (!address) {
+      setLoading(false);
+      return;
+    }
+
+    const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+    if (!rpcUrlsForChain) {
+      setError("No RPC URL configured for this network");
       setLoading(false);
       return;
     }
 
-    console.log("Fetching address data for:", address, "on chain:", numericNetworkId);
+    const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+    if (!rpcUrl) {
+      setError("No RPC URL configured for this network");
+      setLoading(false);
+      return;
+    }
+
+    console.log("Fetching address data and type for:", address, "on chain:", numericNetworkId);
     setLoading(true);
     setError(null);
 
-    // Fetch address data
-    dataService
-      .getAddress(address)
+    fetchAddressWithType({
+      addressHash: address,
+      chainId: numericNetworkId,
+      rpcUrl,
+    })
       .then((result) => {
-        console.log("Fetched address:", result);
-        setAddressResult(result);
+        console.log("Fetched address with type:", result);
+        setAddressData(result.address);
+        setAddressType(result.addressType);
       })
       .catch((err) => {
         console.error("Error fetching address:", err);
         setError(err.message || "Failed to fetch address data");
       })
       .finally(() => setLoading(false));
+  }, [address, numericNetworkId, rpcUrls]);
+
+  // Fetch transactions separately (still uses dataService for caching benefits)
+  useEffect(() => {
+    if (!dataService || !address) return;
 
-    // Fetch transactions separately using new trace_filter/logs method
     dataService
       .getAddressTransactions(address)
       .then(async (result) => {
         console.log("Fetched transactions result:", result);
         setTransactionsResult(result);
 
-        // Fetch full transaction details for first 25 transactions
         if (result.transactions.length > 0) {
           setLoadingTxDetails(true);
           const txsToFetch = result.transactions.slice(0, 25);
@@ -103,7 +125,6 @@ export default function Address() {
       })
       .catch((err) => {
         console.error("Error fetching address transactions:", err);
-        // Non-critical error, don't set main error state
         setTransactionsResult({
           transactions: [],
           source: "none",
@@ -111,7 +132,7 @@ export default function Address() {
           message: `Failed to fetch transaction history: ${err.message}`,
         });
       });
-  }, [dataService, address, numericNetworkId]);
+  }, [dataService, address]);
 
   if (loading) {
     return (
@@ -160,29 +181,38 @@ export default function Address() {
     );
   }
 
+  if (!addressData) {
+    return (
+      <div className="container-wide">
+        <p>Address data not found</p>
+      </div>
+    );
+  }
+
+  // Common props for all display components
+  const displayProps = {
+    address: addressData,
+    addressHash: address,
+    networkId: networkId || "1",
+    transactionsResult,
+    transactionDetails,
+    loadingTxDetails,
+    ensName,
+    reverseResult,
+    ensRecords,
+    decodedContenthash,
+    ensLoading,
+    isMainnet,
+  };
+
+  // Render appropriate display component based on detected type
   return (
     <div className="container-wide">
-      {addressData ? (
-        <AddressDisplay
-          address={addressData}
-          addressHash={address}
-          networkId={networkId}
-          transactionsResult={transactionsResult}
-          transactionDetails={transactionDetails}
-          loadingTxDetails={loadingTxDetails}
-          metadata={addressResult?.metadata}
-          selectedProvider={selectedProvider}
-          onProviderSelect={setSelectedProvider}
-          ensName={ensName}
-          reverseResult={reverseResult}
-          ensRecords={ensRecords}
-          decodedContenthash={decodedContenthash}
-          ensLoading={ensLoading}
-          isMainnet={isMainnet}
-        />
-      ) : (
-        <p>Address data not found</p>
-      )}
+      {addressType === "account" && <AccountDisplay {...displayProps} />}
+      {addressType === "contract" && <ContractDisplay {...displayProps} />}
+      {addressType === "erc20" && <ERC20Display {...displayProps} />}
+      {addressType === "erc721" && <ERC721Display {...displayProps} />}
+      {addressType === "erc1155" && <ERC1155Display {...displayProps} />}
     </div>
   );
 }
diff --git a/src/components/pages/address/shared/AddressHeader.tsx b/src/components/pages/address/shared/AddressHeader.tsx
new file mode 100644
index 00000000..403cc221
--- /dev/null
+++ b/src/components/pages/address/shared/AddressHeader.tsx
@@ -0,0 +1,49 @@
+import type React from "react";
+import type { AddressType, RPCMetadata } from "../../../../types";
+import { getAddressTypeIcon, getAddressTypeLabel } from "../../../../utils/addressTypeDetection";
+import { RPCIndicator } from "../../../common/RPCIndicator";
+
+interface AddressHeaderProps {
+  addressHash: string;
+  addressType: AddressType;
+  ensName?: string | null;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  tokenSymbol?: string;
+  tokenName?: string;
+}
+
+const AddressHeader: React.FC<AddressHeaderProps> = ({
+  addressHash,
+  addressType,
+  ensName,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  tokenSymbol,
+  tokenName,
+}) => {
+  return (
+    <div className="block-display-header address-header">
+      <div>
+        <div className="address-type-indicator">
+          <span className="address-type-icon">{getAddressTypeIcon(addressType)}</span>
+          <span className="address-type-label">{getAddressTypeLabel(addressType)}</span>
+          {tokenSymbol && <span className="address-token-symbol">{tokenSymbol}</span>}
+        </div>
+        {(ensName || tokenName) && <span className="address-ens-name">{ensName || tokenName}</span>}
+        <span className="tx-mono header-subtitle">{addressHash}</span>
+      </div>
+      {metadata && selectedProvider !== undefined && onProviderSelect && (
+        <RPCIndicator
+          metadata={metadata}
+          selectedProvider={selectedProvider}
+          onProviderSelect={onProviderSelect}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AddressHeader;
diff --git a/src/components/pages/address/shared/BalanceSection.tsx b/src/components/pages/address/shared/BalanceSection.tsx
new file mode 100644
index 00000000..aa3971a3
--- /dev/null
+++ b/src/components/pages/address/shared/BalanceSection.tsx
@@ -0,0 +1,41 @@
+import type React from "react";
+import { useMemo } from "react";
+import type { Address } from "../../../../types";
+
+interface BalanceSectionProps {
+  address: Address;
+  currency?: string;
+}
+
+const BalanceSection: React.FC<BalanceSectionProps> = ({ address, currency = "ETH" }) => {
+  const formattedBalance = useMemo(() => {
+    try {
+      const eth = Number(address.balance) / 1e18;
+      return `${eth.toFixed(6)} ${currency}`;
+    } catch {
+      return address.balance;
+    }
+  }, [address.balance, currency]);
+
+  return (
+    <div className="tx-details">
+      <div className="tx-section">
+        <span className="tx-section-title">Balance</span>
+      </div>
+
+      <div className="tx-row">
+        <span className="tx-label">Balance:</span>
+        <span className="tx-value">
+          <span className="tx-value-highlight">{formattedBalance}</span>
+        </span>
+      </div>
+
+      <div className="tx-row">
+        <span className="tx-label">Transactions:</span>
+        <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+      </div>
+    </div>
+  );
+};
+
+export default BalanceSection;
diff --git a/src/components/pages/address/shared/ContractDetails.tsx b/src/components/pages/address/shared/ContractDetails.tsx
new file mode 100644
index 00000000..eb94b853
--- /dev/null
+++ b/src/components/pages/address/shared/ContractDetails.tsx
@@ -0,0 +1,255 @@
+import type React from "react";
+import { useState } from "react";
+import type { ABI } from "../../../../types";
+import ContractInteraction from "./ContractInteraction";
+
+interface ContractData {
+  name?: string;
+  compilerVersion?: string;
+  evmVersion?: string;
+  chainId?: string;
+  verifiedAt?: string;
+  match?: "perfect" | "partial" | null;
+  metadata?: {
+    compiler?: { version: string };
+    language?: string;
+  };
+  creation_match?: string | null;
+  runtime_match?: string | null;
+  abi?: ABI[];
+  files?: Array<{ name: string; path: string; content: string }>;
+  sources?: Record<string, { content: string }>;
+}
+
+interface ContractDetailsProps {
+  addressHash: string;
+  networkId: string;
+  code: string;
+  contractData: ContractData;
+  isLocalArtifact?: boolean;
+  sourcifyUrl?: string;
+}
+
+const ContractDetails: React.FC<ContractDetailsProps> = ({
+  addressHash,
+  networkId,
+  code,
+  contractData,
+  isLocalArtifact = false,
+  sourcifyUrl,
+}) => {
+  const [showContractDetails, setShowContractDetails] = useState(false);
+
+  // Prepare source files array
+  const sourceFiles =
+    contractData.files && contractData.files.length > 0
+      ? contractData.files
+      : contractData.sources
+        ? Object.entries(contractData.sources).map(([path, source]) => ({
+            name: path,
+            path: path,
+            content: source.content || "",
+          }))
+        : [];
+
+  return (
+    <div className="tx-details">
+      <button
+        type="button"
+        className="tx-section btn-toggle-section"
+        onClick={() => setShowContractDetails(!showContractDetails)}
+      >
+        <span className="tx-section-title">Contract Details</span>
+        <span className="contract-section-toggle">{showContractDetails ? " ▼" : " ▶"}</span>
+      </button>
+
+      {showContractDetails && (
+        <>
+          {contractData.compilerVersion && (
+            <div className="tx-row">
+              <span className="tx-label">Compiler Version</span>
+              <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+            </div>
+          )}
+
+          {contractData.evmVersion && (
+            <div className="tx-row">
+              <span className="tx-label">EVM Version</span>
+              <span className="tx-value">{contractData.evmVersion}</span>
+            </div>
+          )}
+
+          {contractData.chainId && (
+            <div className="tx-row">
+              <span className="tx-label">Network ID</span>
+              <span className="tx-value">{contractData.chainId}</span>
+            </div>
+          )}
+
+          {contractData.name && (
+            <div className="tx-row">
+              <span className="tx-label">Contract Name</span>
+              <span className="tx-value tx-value-success">{contractData.name}</span>
+            </div>
+          )}
+
+          {contractData.verifiedAt && (
+            <div className="tx-row">
+              <span className="tx-label">Verified At</span>
+              <span className="tx-value">{new Date(contractData.verifiedAt).toLocaleString()}</span>
+            </div>
+          )}
+
+          {contractData.match && (
+            <div className="tx-row">
+              <span className="tx-label">Match Type</span>
+              <span
+                className={`tx-value font-weight-600 ${contractData.match === "perfect" ? "text-success" : "text-warning"}`}
+              >
+                {isLocalArtifact ? "Local JSON" : contractData.match.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {contractData.metadata?.compiler && (
+            <div className="tx-row">
+              <span className="tx-label">Compiler</span>
+              <span className="tx-value tx-mono">{contractData.metadata.compiler.version}</span>
+            </div>
+          )}
+
+          {contractData.creation_match && (
+            <div className="tx-row">
+              <span className="tx-label">Creation Match</span>
+              <span
+                className={`tx-value font-weight-600 ${contractData.creation_match === "perfect" ? "text-success" : "text-warning"}`}
+              >
+                {contractData.creation_match.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {contractData.runtime_match && (
+            <div className="tx-row">
+              <span className="tx-label">Runtime Match</span>
+              <span
+                className={`tx-value font-weight-600 ${contractData.runtime_match === "perfect" ? "text-success" : "text-warning"}`}
+              >
+                {contractData.runtime_match.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {/* Contract Bytecode */}
+          <div className="tx-row-vertical">
+            <button
+              type="button"
+              className="source-toggle-container btn-reset-block"
+              onClick={() => {
+                const elem = document.getElementById("bytecode-content");
+                const icon = document.getElementById("bytecode-icon");
+                if (elem && icon) {
+                  const isHidden = elem.style.display === "none";
+                  elem.style.display = isHidden ? "block" : "none";
+                  icon.textContent = isHidden ? "▼" : "▶";
+                }
+              }}
+            >
+              <span className="tx-label">Contract Bytecode</span>
+              <span id="bytecode-icon" className="source-toggle-icon">
+                ▶
+              </span>
+            </button>
+            <div id="bytecode-content" className="tx-input-data" style={{ display: "none" }}>
+              <code>{code}</code>
+            </div>
+          </div>
+
+          {/* Source Code */}
+          {sourceFiles.length > 0 && (
+            <div className="tx-row-vertical">
+              <button
+                type="button"
+                className="source-toggle-container btn-reset-block"
+                onClick={() => {
+                  const elem = document.getElementById("source-code-content");
+                  const icon = document.getElementById("source-code-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-label">Source Code</span>
+                <span id="source-code-icon" className="source-toggle-icon">
+                  ▶
+                </span>
+              </button>
+              <div id="source-code-content" className="margin-top-8" style={{ display: "none" }}>
+                {sourceFiles.map((file) => (
+                  <div key={file.path} className="source-file-container">
+                    <div className="source-file-header">📄 {file.name || file.path}</div>
+                    <pre className="source-file-code">{file.content}</pre>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Raw ABI */}
+          {contractData.abi && contractData.abi.length > 0 && (
+            <div className="tx-row-vertical">
+              <button
+                type="button"
+                className="source-toggle-container btn-reset-block"
+                onClick={() => {
+                  const elem = document.getElementById("raw-abi-content");
+                  const icon = document.getElementById("raw-abi-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-label">Raw ABI</span>
+                <span id="raw-abi-icon" className="source-toggle-icon">
+                  ▶
+                </span>
+              </button>
+              <div id="raw-abi-content" className="tx-input-data" style={{ display: "none" }}>
+                <code>{JSON.stringify(contractData.abi, null, 2)}</code>
+              </div>
+            </div>
+          )}
+
+          {/* Contract Functions */}
+          {contractData.abi && contractData.abi.length > 0 && (
+            <ContractInteraction
+              addressHash={addressHash}
+              networkId={networkId}
+              abi={contractData.abi}
+            />
+          )}
+
+          {sourcifyUrl && (
+            <div className="tx-row">
+              <span className="tx-label">Sourcify</span>
+              <a
+                href={sourcifyUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="sourcify-link"
+              >
+                View Full Contract on Sourcify ↗
+              </a>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ContractDetails;
diff --git a/src/components/pages/address/shared/ContractInteraction.tsx b/src/components/pages/address/shared/ContractInteraction.tsx
new file mode 100644
index 00000000..d80de1d2
--- /dev/null
+++ b/src/components/pages/address/shared/ContractInteraction.tsx
@@ -0,0 +1,483 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import type React from "react";
+import { useCallback, useContext, useState } from "react";
+import { Link } from "react-router-dom";
+import { encodeFunctionData, parseEther } from "viem";
+import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { AppContext } from "../../../../context";
+import type { ABI, ABIParameter, EventABI, FunctionABI } from "../../../../types";
+
+interface ContractInteractionProps {
+  addressHash: string;
+  networkId: string;
+  abi: ABI[];
+}
+
+const ContractInteraction: React.FC<ContractInteractionProps> = ({
+  addressHash,
+  networkId,
+  abi,
+}) => {
+  const [selectedWriteFunction, setSelectedWriteFunction] = useState<FunctionABI | null>(null);
+  const [selectedReadFunction, setSelectedReadFunction] = useState<FunctionABI | null>(null);
+  const [functionInputs, setFunctionInputs] = useState<Record<string, string>>({});
+  const [readFunctionResult, setReadFunctionResult] = useState<string | null>(null);
+  const [isReadingFunction, setIsReadingFunction] = useState(false);
+  const { rpcUrls } = useContext(AppContext);
+
+  // Wagmi hooks for contract interaction
+  const { data: hash, writeContract, isPending, isError, error } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  const handleWriteFunction = useCallback(async () => {
+    if (!selectedWriteFunction) return;
+
+    try {
+      const args: unknown[] = [];
+      if (selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0) {
+        for (const input of selectedWriteFunction.inputs) {
+          const paramName = input.name || `param${selectedWriteFunction.inputs.indexOf(input)}`;
+          const value = functionInputs[paramName];
+
+          if (!value && value !== "0") {
+            alert(`Please provide value for ${paramName}`);
+            return;
+          }
+
+          args.push(value);
+        }
+      }
+
+      let txValue: bigint | undefined;
+      const valueKey = "_value";
+      if (selectedWriteFunction.stateMutability === "payable" && functionInputs[valueKey]) {
+        try {
+          txValue = parseEther(functionInputs[valueKey]);
+        } catch {
+          alert("Invalid ETH value");
+          return;
+        }
+      }
+
+      writeContract({
+        address: addressHash as `0x${string}`,
+        abi: abi,
+        functionName: selectedWriteFunction.name,
+        args: args,
+        value: txValue,
+      });
+    } catch (err) {
+      console.error("Error writing to contract:", err);
+      alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+    }
+  }, [selectedWriteFunction, functionInputs, addressHash, abi, writeContract]);
+
+  const handleReadFunction = useCallback(async () => {
+    if (!selectedReadFunction) return;
+
+    setIsReadingFunction(true);
+    setReadFunctionResult(null);
+
+    try {
+      const networkIdNum = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[networkIdNum as keyof typeof rpcUrls];
+
+      if (!rpcUrlsForChain) {
+        throw new Error(`No RPC URL configured for chain ${networkId}`);
+      }
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+      if (!rpcUrl) {
+        throw new Error(`No RPC URL configured for chain ${networkId}`);
+      }
+
+      const args: unknown[] = [];
+      if (selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0) {
+        for (const input of selectedReadFunction.inputs) {
+          const paramName = input.name || `param${selectedReadFunction.inputs.indexOf(input)}`;
+          const value = functionInputs[paramName];
+
+          if (!value && value !== "0") {
+            alert(`Please provide value for ${paramName}`);
+            setIsReadingFunction(false);
+            return;
+          }
+
+          args.push(value);
+        }
+      }
+
+      const response = await fetch(rpcUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method: "eth_call",
+          params: [
+            {
+              to: addressHash,
+              data: encodeFunctionData({
+                abi: abi,
+                functionName: selectedReadFunction.name,
+                args: args,
+              }),
+            },
+            "latest",
+          ],
+          id: 1,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.error) {
+        throw new Error(data.error.message || "Contract call failed");
+      }
+
+      setReadFunctionResult(data.result);
+    } catch (err) {
+      console.error("Error reading from contract:", err);
+      setReadFunctionResult(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+    } finally {
+      setIsReadingFunction(false);
+    }
+  }, [selectedReadFunction, functionInputs, addressHash, abi, networkId, rpcUrls]);
+
+  const readFunctions = abi.filter(
+    (item: ABI): item is FunctionABI =>
+      item.type === "function" &&
+      ((item as FunctionABI).stateMutability === "view" ||
+        (item as FunctionABI).stateMutability === "pure"),
+  );
+
+  const writeFunctions = abi.filter(
+    (item: ABI): item is FunctionABI =>
+      item.type === "function" &&
+      ((item as FunctionABI).stateMutability === "payable" ||
+        (item as FunctionABI).stateMutability === "nonpayable" ||
+        !(item as FunctionABI).stateMutability),
+  );
+
+  const events = abi.filter((item: ABI): item is EventABI => item.type === "event");
+
+  return (
+    <div className="tx-row-vertical">
+      <div className="contract-functions-header">
+        <span className="tx-label">Functions</span>
+        <ConnectButton.Custom>
+          {({
+            account,
+            chain,
+            openAccountModal,
+            openChainModal,
+            openConnectModal,
+            authenticationStatus,
+            mounted,
+          }: Parameters<Parameters<typeof ConnectButton.Custom>[0]["children"]>[0]) => {
+            const ready = mounted && authenticationStatus !== "loading";
+            const connected =
+              ready &&
+              account &&
+              chain &&
+              (!authenticationStatus || authenticationStatus === "authenticated");
+
+            return (
+              <div
+                {...(!ready && {
+                  "aria-hidden": true,
+                  className: "wallet-hidden",
+                })}
+              >
+                {(() => {
+                  if (!connected) {
+                    return (
+                      <button
+                        onClick={openConnectModal}
+                        type="button"
+                        className="btn-connect-wallet"
+                      >
+                        Connect Wallet
+                      </button>
+                    );
+                  }
+
+                  if (chain.unsupported) {
+                    return (
+                      <button onClick={openChainModal} type="button" className="btn-wrong-network">
+                        Wrong Network
+                      </button>
+                    );
+                  }
+
+                  return (
+                    <div className="wallet-connected-container">
+                      <button onClick={openChainModal} type="button" className="btn-chain-selector">
+                        {chain.hasIcon && chain.iconUrl && (
+                          <img
+                            alt={chain.name ?? "Chain icon"}
+                            src={chain.iconUrl}
+                            className="chain-icon"
+                          />
+                        )}
+                        {chain.name}
+                      </button>
+                      <button onClick={openAccountModal} type="button" className="btn-account">
+                        {account.displayName}
+                      </button>
+                    </div>
+                  );
+                })()}
+              </div>
+            );
+          }}
+        </ConnectButton.Custom>
+      </div>
+      <div className="contract-functions-content">
+        {/* Read Functions */}
+        {readFunctions.length > 0 && (
+          <div className="functions-section">
+            <div className="functions-section-title functions-section-title-read">
+              Read Functions ({readFunctions.length})
+            </div>
+            <div className="functions-list">
+              {readFunctions.map((func: FunctionABI) => (
+                <button
+                  type="button"
+                  key={func.name}
+                  onClick={() => {
+                    setSelectedReadFunction(func);
+                    setSelectedWriteFunction(null);
+                    setFunctionInputs({});
+                    setReadFunctionResult(null);
+                  }}
+                  className={`btn-function btn-function-read ${selectedReadFunction?.name === func.name ? "selected" : ""}`}
+                >
+                  {func.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Write Functions */}
+        {writeFunctions.length > 0 && (
+          <div className="functions-section">
+            <div className="functions-section-title functions-section-title-write">
+              Write Functions ({writeFunctions.length})
+            </div>
+            <div className="functions-list">
+              {writeFunctions.map((func: FunctionABI) => (
+                <button
+                  type="button"
+                  key={func.name}
+                  onClick={() => {
+                    setSelectedWriteFunction(func);
+                    setSelectedReadFunction(null);
+                    setFunctionInputs({});
+                    setReadFunctionResult(null);
+                  }}
+                  className={`btn-function btn-function-write ${selectedWriteFunction?.name === func.name ? "selected" : ""}`}
+                >
+                  {func.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Events */}
+        {events.length > 0 && (
+          <div className="functions-section">
+            <div className="functions-section-title functions-section-title-events">
+              Events ({events.length})
+            </div>
+            <div className="functions-list">
+              {events.slice(0, 10).map((event: EventABI) => (
+                <span key={event.name} className="event-badge">
+                  {event.name}
+                </span>
+              ))}
+              {events.length > 10 && (
+                <span className="events-more">+{events.length - 10} more</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Read Function Form */}
+        {selectedReadFunction && (
+          <div className="function-form function-form-read">
+            <div className="function-form-title function-form-title-read">
+              {selectedReadFunction.name}
+            </div>
+
+            {selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0 ? (
+              <div className="function-inputs">
+                {selectedReadFunction.inputs.map((input: ABIParameter, idx: number) => (
+                  <label
+                    key={`${input.name || idx}-${input.type}`}
+                    className="function-input-label"
+                  >
+                    <span className="function-input-name">
+                      {input.name || `param${idx}`} ({input.type})
+                    </span>
+                    <input
+                      type="text"
+                      value={functionInputs[input.name || `param${idx}`] || ""}
+                      onChange={(e) =>
+                        setFunctionInputs({
+                          ...functionInputs,
+                          [input.name || `param${idx}`]: e.target.value,
+                        })
+                      }
+                      placeholder={`Enter ${input.type}`}
+                      className="function-input function-input-read"
+                    />
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className="function-no-params">No parameters required</div>
+            )}
+
+            {readFunctionResult !== null && (
+              <div
+                className={`function-result ${readFunctionResult?.startsWith("Error") ? "function-result-error" : "function-result-success"}`}
+              >
+                <div className="function-result-title">
+                  {readFunctionResult?.startsWith("Error") ? "❌ Error" : "✅ Result"}
+                </div>
+                {readFunctionResult}
+              </div>
+            )}
+
+            <div className="function-actions">
+              <button
+                type="button"
+                onClick={handleReadFunction}
+                disabled={isReadingFunction}
+                className="btn-function-action btn-query"
+              >
+                {isReadingFunction ? "Reading..." : "Query"}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setSelectedReadFunction(null);
+                  setReadFunctionResult(null);
+                }}
+                className="btn-cancel"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Write Function Form */}
+        {selectedWriteFunction && (
+          <div className="function-form function-form-write">
+            <div className="function-form-title function-form-title-write">
+              {selectedWriteFunction.name}
+              {selectedWriteFunction.stateMutability === "payable" && (
+                <span className="payable-badge">payable</span>
+              )}
+            </div>
+
+            {selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0 ? (
+              <div className="function-inputs">
+                {selectedWriteFunction.inputs.map((input: ABIParameter, idx: number) => (
+                  <label
+                    key={`${input.name || idx}-${input.type}`}
+                    className="function-input-label"
+                  >
+                    <span className="function-input-name">
+                      {input.name || `param${idx}`} ({input.type})
+                    </span>
+                    <input
+                      type="text"
+                      value={functionInputs[input.name || `param${idx}`] || ""}
+                      onChange={(e) =>
+                        setFunctionInputs({
+                          ...functionInputs,
+                          [input.name || `param${idx}`]: e.target.value,
+                        })
+                      }
+                      placeholder={`Enter ${input.type}`}
+                      className="function-input function-input-write"
+                    />
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className="function-no-params">No parameters required</div>
+            )}
+
+            {selectedWriteFunction.stateMutability === "payable" && (
+              <label className="function-input-label">
+                <span className="function-input-name">Value (ETH)</span>
+                <input
+                  type="text"
+                  // biome-ignore lint/complexity/useLiteralKeys: _value is a special key for ETH value
+                  value={functionInputs["_value"] || ""}
+                  onChange={(e) =>
+                    setFunctionInputs({
+                      ...functionInputs,
+                      _value: e.target.value,
+                    })
+                  }
+                  placeholder="0.0"
+                  className="function-input function-input-value"
+                />
+              </label>
+            )}
+
+            {/* Transaction Status */}
+            {(isPending || isConfirming || isConfirmed || isError) && (
+              <div
+                className={`tx-status-box ${isError ? "tx-status-error" : isConfirmed ? "tx-status-success" : "tx-status-pending"}`}
+              >
+                {isPending && "⏳ Waiting for wallet confirmation..."}
+                {isConfirming && "⏳ Waiting for transaction confirmation..."}
+                {isConfirmed && (
+                  <div>
+                    ✅ Transaction confirmed!
+                    {hash && (
+                      <div className="tx-hash-link">
+                        <Link to={`/${networkId}/tx/${hash}`}>View transaction</Link>
+                      </div>
+                    )}
+                  </div>
+                )}
+                {isError && <div>❌ Error: {error?.message || "Transaction failed"}</div>}
+              </div>
+            )}
+
+            <div className="function-actions">
+              <button
+                type="button"
+                onClick={handleWriteFunction}
+                disabled={isPending || isConfirming}
+                className="btn-function-action btn-write-action"
+              >
+                {isPending ? "Confirming in Wallet..." : isConfirming ? "Processing..." : "Write"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setSelectedWriteFunction(null)}
+                className="btn-cancel"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContractInteraction;
diff --git a/src/components/pages/address/shared/ContractStorage.tsx b/src/components/pages/address/shared/ContractStorage.tsx
new file mode 100644
index 00000000..4a1d4a53
--- /dev/null
+++ b/src/components/pages/address/shared/ContractStorage.tsx
@@ -0,0 +1,57 @@
+import type React from "react";
+import { useCallback, useState } from "react";
+import type { Address } from "../../../../types";
+
+interface ContractStorageProps {
+  address: Address;
+}
+
+const ContractStorage: React.FC<ContractStorageProps> = ({ address }) => {
+  const [storageSlot, setStorageSlot] = useState("");
+  const [storageValue, setStorageValue] = useState("");
+
+  const handleGetStorage = useCallback(() => {
+    if (address.storeageAt?.[storageSlot]) {
+      setStorageValue(address.storeageAt[storageSlot]);
+    } else {
+      setStorageValue("0x0000000000000000000000000000000000000000000000000000000000000000");
+    }
+  }, [address.storeageAt, storageSlot]);
+
+  return (
+    <div className="block-display-card">
+      <div className="block-display-header">
+        <span className="block-label">Contract Storage</span>
+      </div>
+      <div className="tx-details">
+        <div className="tx-row">
+          <span className="tx-label">Storage Slot:</span>
+          <span className="tx-value">
+            <div className="storage-input-row">
+              <input
+                type="text"
+                placeholder="e.g., 0x0"
+                value={storageSlot}
+                onChange={(e) => setStorageSlot(e.target.value)}
+                className="storage-input"
+              />
+              <button type="button" onClick={handleGetStorage} className="storage-button">
+                Get
+              </button>
+            </div>
+          </span>
+        </div>
+        {storageValue && (
+          <div className="tx-row">
+            <span className="tx-label">Value:</span>
+            <span className="tx-value">
+              <div className="storage-value-display">{storageValue}</div>
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContractStorage;
diff --git a/src/components/pages/address/shared/TransactionHistory.tsx b/src/components/pages/address/shared/TransactionHistory.tsx
new file mode 100644
index 00000000..2b87fcf5
--- /dev/null
+++ b/src/components/pages/address/shared/TransactionHistory.tsx
@@ -0,0 +1,214 @@
+import type React from "react";
+import { useCallback, useMemo } from "react";
+import { Link } from "react-router-dom";
+import type { ABI, AddressTransactionsResult, FunctionABI, Transaction } from "../../../../types";
+import { toFunctionSelector } from "viem";
+
+interface TransactionHistoryProps {
+  networkId: string;
+  addressHash: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  contractAbi?: ABI[];
+}
+
+const TransactionHistory: React.FC<TransactionHistoryProps> = ({
+  networkId,
+  addressHash,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  contractAbi,
+}) => {
+  const truncate = useCallback((str: string, start = 6, end = 4) => {
+    if (!str) return "";
+    if (str.length <= start + end) return str;
+    return `${str.slice(0, start)}...${str.slice(-end)}`;
+  }, []);
+
+  const formatValue = useCallback((value: string) => {
+    try {
+      const eth = Number(value) / 1e18;
+      return `${eth.toFixed(6)} ETH`;
+    } catch {
+      return "0 ETH";
+    }
+  }, []);
+
+  // Decode function name from calldata using ABI
+  const decodeFunctionName = useCallback(
+    (data: string | undefined): string | null => {
+      if (!data || data === "0x" || data.length < 10) return null;
+      if (!contractAbi) return null;
+
+      const selector = data.slice(0, 10).toLowerCase();
+
+      for (const item of contractAbi) {
+        const abiItem = item as FunctionABI;
+        if (abiItem.type !== "function") continue;
+
+        const inputs = abiItem.inputs || [];
+        const signature = `${abiItem.name}(${inputs.map((i) => i.type).join(",")})`;
+
+        try {
+          const computedSelector = toFunctionSelector(signature).toLowerCase();
+          if (computedSelector === selector) {
+            return abiItem.name;
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      return null;
+    },
+    [contractAbi],
+  );
+
+  const hasContractAbi = useMemo(() => contractAbi && contractAbi.length > 0, [contractAbi]);
+
+  return (
+    <div className="tx-details">
+      <div className="tx-section tx-history-header">
+        <span className="tx-section-title">Last Transactions</span>
+        {transactionsResult && (
+          <span
+            className={`tx-history-status ${transactionsResult.source === "trace_filter" ? "tx-history-status-complete" : transactionsResult.source === "logs" ? "tx-history-status-partial" : "tx-history-status-none"}`}
+          >
+            {transactionsResult.source === "trace_filter" && (
+              <>
+                <span className="tx-history-dot">●</span>
+                Complete history ({transactionDetails.length} transactions)
+              </>
+            )}
+            {transactionsResult.source === "logs" && (
+              <>
+                <span className="tx-history-dot">●</span>
+                Partial (logs only) - {transactionDetails.length} transactions
+              </>
+            )}
+            {transactionsResult.source === "none" && (
+              <>
+                <span className="tx-history-dot">●</span>
+                No data available
+              </>
+            )}
+          </span>
+        )}
+      </div>
+
+      {/* Warning message for partial data */}
+      {transactionsResult?.message && (
+        <div
+          className={`tx-history-message ${transactionsResult.source === "none" ? "tx-history-message-error" : "tx-history-message-warning"}`}
+        >
+          <span className="tx-history-message-icon">
+            {transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
+          </span>
+          {transactionsResult.message}
+        </div>
+      )}
+
+      {/* Loading state */}
+      {loadingTxDetails && <div className="tx-history-empty">Loading transaction details...</div>}
+
+      {/* Transaction table */}
+      {!loadingTxDetails && transactionDetails.length > 0 && (
+        <div className="address-table-container">
+          <table className="recent-transactions-table">
+            <thead>
+              <tr>
+                <th>TX Hash</th>
+                {hasContractAbi && <th>Method</th>}
+                <th>From</th>
+                <th>To</th>
+                <th>Value</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactionDetails.map((tx) => (
+                <tr key={tx.hash}>
+                  <td>
+                    <Link to={`/${networkId}/tx/${tx.hash}`} className="address-table-link">
+                      {truncate(tx.hash, 8, 6)}
+                    </Link>
+                  </td>
+                  {hasContractAbi && (
+                    <td>
+                      {tx.to?.toLowerCase() === addressHash.toLowerCase() ? (
+                        (() => {
+                          const funcName = decodeFunctionName(tx.data);
+                          const selector = tx.data?.slice(0, 10);
+                          return funcName ? (
+                            <span className="method-badge method-badge-decoded">{funcName}</span>
+                          ) : selector && selector !== "0x" ? (
+                            <span className="method-badge method-badge-selector" title={selector}>
+                              {selector}
+                            </span>
+                          ) : (
+                            <span className="method-badge method-badge-transfer">Transfer</span>
+                          );
+                        })()
+                      ) : !tx.data || tx.data === "0x" ? (
+                        <span className="method-badge method-badge-transfer">Transfer</span>
+                      ) : (
+                        <span
+                          className="method-badge method-badge-selector"
+                          title={tx.data?.slice(0, 10)}
+                        >
+                          {tx.data?.slice(0, 10)}
+                        </span>
+                      )}
+                    </td>
+                  )}
+                  <td>
+                    <Link to={`/${networkId}/address/${tx.from}`} className="address-table-link">
+                      {tx.from?.toLowerCase() === addressHash.toLowerCase()
+                        ? "This Address"
+                        : truncate(tx.from || "", 6, 4)}
+                    </Link>
+                  </td>
+                  <td>
+                    {tx.to ? (
+                      <Link
+                        to={`/${networkId}/address/${tx.to}`}
+                        className={`tx-table-to-link ${tx.to?.toLowerCase() === addressHash.toLowerCase() ? "tx-table-to-link-self" : "tx-table-to-link-other"}`}
+                      >
+                        {tx.to?.toLowerCase() === addressHash.toLowerCase()
+                          ? "This Address"
+                          : truncate(tx.to, 6, 4)}
+                      </Link>
+                    ) : (
+                      <span className="contract-creation-badge">Contract Creation</span>
+                    )}
+                  </td>
+                  <td>
+                    <span className="address-table-value">{formatValue(tx.value)}</span>
+                  </td>
+                  <td>
+                    {tx.receipt?.status === "0x1" ? (
+                      <span className="table-status-badge table-status-success">✓ Success</span>
+                    ) : tx.receipt?.status === "0x0" ? (
+                      <span className="table-status-badge table-status-failed">✗ Failed</span>
+                    ) : (
+                      <span className="table-status-badge table-status-pending">⏳ Pending</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loadingTxDetails && transactionDetails.length === 0 && !transactionsResult?.message && (
+        <div className="tx-history-empty">No transactions found for this address</div>
+      )}
+    </div>
+  );
+};
+
+export default TransactionHistory;
diff --git a/src/components/pages/address/shared/index.ts b/src/components/pages/address/shared/index.ts
new file mode 100644
index 00000000..62924b31
--- /dev/null
+++ b/src/components/pages/address/shared/index.ts
@@ -0,0 +1,6 @@
+export { default as AddressHeader } from "./AddressHeader";
+export { default as BalanceSection } from "./BalanceSection";
+export { default as ContractDetails } from "./ContractDetails";
+export { default as ContractInteraction } from "./ContractInteraction";
+export { default as ContractStorage } from "./ContractStorage";
+export { default as TransactionHistory } from "./TransactionHistory";
diff --git a/src/styles/components.css b/src/styles/components.css
index cc9f23dc..a3f17553 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -3789,3 +3789,88 @@
 	color: #10b981;
 }
 
+/* Address Type Display Components */
+.address-type-indicator {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 4px;
+}
+
+.address-type-icon {
+	font-size: 1.2rem;
+}
+
+.address-type-label {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--text-secondary, #6b7280);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.address-token-symbol {
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: #10b981;
+	padding: 2px 8px;
+	background: rgba(16, 185, 129, 0.1);
+	border-radius: 4px;
+}
+
+/* Token Info Row */
+.token-info-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.token-logo {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	object-fit: cover;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.token-name-symbol {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.token-name {
+	font-weight: 600;
+	color: var(--text-color, #1f2937);
+}
+
+.token-symbol {
+	font-size: 0.85rem;
+	color: var(--text-secondary, #6b7280);
+}
+
+/* Token Standard Badges */
+.token-standard-badge {
+	display: inline-block;
+	padding: 4px 10px;
+	border-radius: 4px;
+	font-size: 0.8rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.token-standard-erc20 {
+	background: rgba(59, 130, 246, 0.1);
+	color: #3b82f6;
+}
+
+.token-standard-erc721 {
+	background: rgba(139, 92, 246, 0.1);
+	color: #8b5cf6;
+}
+
+.token-standard-erc1155 {
+	background: rgba(236, 72, 153, 0.1);
+	color: #ec4899;
+}
+
diff --git a/src/types/index.ts b/src/types/index.ts
index 8a55a313..a336fa99 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -119,6 +119,11 @@ export interface Address {
   recentTransactions?: Transaction[];
 }
 
+/**
+ * Address type classification
+ */
+export type AddressType = "account" | "contract" | "erc20" | "erc721" | "erc1155";
+
 export type StoreageAt = Record<string, string>;
 
 export interface MempoolTransaction {
diff --git a/src/utils/addressTypeDetection.ts b/src/utils/addressTypeDetection.ts
new file mode 100644
index 00000000..2b58173a
--- /dev/null
+++ b/src/utils/addressTypeDetection.ts
@@ -0,0 +1,280 @@
+import { fetchToken } from "../services/MetadataService";
+import type { Address, AddressType } from "../types";
+
+// ERC165 interface IDs
+const ERC165_INTERFACE_ID = "0x01ffc9a7";
+const ERC721_INTERFACE_ID = "0x80ac58cd";
+const ERC1155_INTERFACE_ID = "0xd9b67a26";
+
+// ERC20 function selectors
+const ERC20_NAME_SELECTOR = "0x06fdde03"; // name()
+const ERC20_SYMBOL_SELECTOR = "0x95d89b41"; // symbol()
+const ERC20_DECIMALS_SELECTOR = "0x313ce567"; // decimals()
+const ERC20_TOTAL_SUPPLY_SELECTOR = "0x18160ddd"; // totalSupply()
+
+/**
+ * Make a single RPC call
+ */
+async function rpcCall<T>(rpcUrl: string, method: string, params: unknown[]): Promise<T> {
+  const response = await fetch(rpcUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      jsonrpc: "2.0",
+      method,
+      params,
+      id: 1,
+    }),
+  });
+
+  const data = await response.json();
+
+  if (data.error) {
+    throw new Error(data.error.message);
+  }
+
+  return data.result;
+}
+
+/**
+ * Fetch basic address data (balance, code, txCount)
+ */
+async function fetchAddressData(addressHash: string, rpcUrl: string): Promise<Address> {
+  const normalizedAddress = addressHash.toLowerCase();
+
+  const [balance, code, txCount] = await Promise.all([
+    rpcCall<string>(rpcUrl, "eth_getBalance", [normalizedAddress, "latest"]),
+    rpcCall<string>(rpcUrl, "eth_getCode", [normalizedAddress, "latest"]),
+    rpcCall<string>(rpcUrl, "eth_getTransactionCount", [normalizedAddress, "latest"]),
+  ]);
+
+  return {
+    address: addressHash,
+    balance: BigInt(balance).toString(),
+    code: code,
+    txCount: Number.parseInt(txCount, 16).toString(),
+    storeageAt: {},
+  };
+}
+
+/**
+ * Check if a contract supports a specific interface via ERC165
+ */
+async function supportsInterface(
+  contractAddress: string,
+  interfaceId: string,
+  rpcUrl: string,
+): Promise<boolean> {
+  try {
+    // Encode supportsInterface(bytes4) call
+    // supportsInterface selector: 0x01ffc9a7
+    // Pad interfaceId to 32 bytes
+    const paddedInterfaceId = interfaceId.slice(2).padEnd(64, "0");
+    const data = `0x01ffc9a7${paddedInterfaceId}`;
+
+    const result = await rpcCall<string>(rpcUrl, "eth_call", [
+      { to: contractAddress, data },
+      "latest",
+    ]);
+
+    // Check if result is true (0x0000...0001)
+    const resultValue = result.toLowerCase();
+    return resultValue === "0x0000000000000000000000000000000000000000000000000000000000000001";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a contract has ERC20 methods by calling them
+ */
+async function hasERC20Methods(contractAddress: string, rpcUrl: string): Promise<boolean> {
+  const selectors = [
+    ERC20_NAME_SELECTOR,
+    ERC20_SYMBOL_SELECTOR,
+    ERC20_DECIMALS_SELECTOR,
+    ERC20_TOTAL_SUPPLY_SELECTOR,
+  ];
+
+  let successCount = 0;
+
+  // Check all selectors in parallel
+  const results = await Promise.all(
+    selectors.map(async (selector) => {
+      try {
+        const result = await rpcCall<string>(rpcUrl, "eth_call", [
+          { to: contractAddress, data: selector },
+          "latest",
+        ]);
+        return result && result !== "0x";
+      } catch {
+        return false;
+      }
+    }),
+  );
+
+  successCount = results.filter(Boolean).length;
+
+  // If at least 3 of 4 methods respond, likely ERC20
+  return successCount >= 3;
+}
+
+/**
+ * Detect address type via ERC165 supportsInterface
+ */
+async function detectViaERC165(
+  contractAddress: string,
+  rpcUrl: string,
+): Promise<AddressType | null> {
+  // First check if contract supports ERC165 at all
+  const supportsERC165 = await supportsInterface(contractAddress, ERC165_INTERFACE_ID, rpcUrl);
+
+  if (!supportsERC165) {
+    return null;
+  }
+
+  // Check for ERC1155 and ERC721 in parallel
+  const [isERC1155, isERC721] = await Promise.all([
+    supportsInterface(contractAddress, ERC1155_INTERFACE_ID, rpcUrl),
+    supportsInterface(contractAddress, ERC721_INTERFACE_ID, rpcUrl),
+  ]);
+
+  // Check for ERC1155 first (more specific)
+  if (isERC1155) {
+    return "erc1155";
+  }
+
+  if (isERC721) {
+    return "erc721";
+  }
+
+  return null;
+}
+
+/**
+ * Detect address type via metadata service
+ */
+async function detectViaMetadata(
+  chainId: number,
+  contractAddress: string,
+): Promise<AddressType | null> {
+  try {
+    const tokenMetadata = await fetchToken(chainId, contractAddress);
+
+    if (tokenMetadata?.type) {
+      const type = tokenMetadata.type.toLowerCase();
+      if (type === "erc20" || type === "erc721" || type === "erc1155") {
+        return type as AddressType;
+      }
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Determine the address type from code and on-chain detection
+ */
+async function determineContractType(
+  addressHash: string,
+  chainId: number,
+  rpcUrl: string,
+): Promise<AddressType> {
+  // Try metadata detection first (fastest, no RPC calls)
+  const metadataType = await detectViaMetadata(chainId, addressHash);
+  if (metadataType) {
+    return metadataType;
+  }
+
+  // Try ERC165 detection (for ERC721/ERC1155)
+  const erc165Type = await detectViaERC165(addressHash, rpcUrl);
+  if (erc165Type) {
+    return erc165Type;
+  }
+
+  // Try ERC20 method detection
+  const isERC20 = await hasERC20Methods(addressHash, rpcUrl);
+  if (isERC20) {
+    return "erc20";
+  }
+
+  // Default to generic contract
+  return "contract";
+}
+
+export interface FetchAddressWithTypeOptions {
+  addressHash: string;
+  chainId: number;
+  rpcUrl: string;
+}
+
+export interface AddressWithType {
+  address: Address;
+  addressType: AddressType;
+}
+
+/**
+ * Fetch address data and detect its type in a single flow
+ * This combines the getAddress and detectAddressType operations
+ */
+export async function fetchAddressWithType(
+  options: FetchAddressWithTypeOptions,
+): Promise<AddressWithType> {
+  const { addressHash, chainId, rpcUrl } = options;
+
+  // Step 1: Fetch basic address data (balance, code, txCount)
+  const address = await fetchAddressData(addressHash, rpcUrl);
+
+  // Step 2: Determine address type based on code
+  if (!address.code || address.code === "0x") {
+    // It's an EOA (no code)
+    return { address, addressType: "account" };
+  }
+
+  // Step 3: It's a contract - determine what type
+  const addressType = await determineContractType(addressHash, chainId, rpcUrl);
+
+  return { address, addressType };
+}
+
+/**
+ * Get a human-readable label for an address type
+ */
+export function getAddressTypeLabel(type: AddressType): string {
+  switch (type) {
+    case "account":
+      return "Account (EOA)";
+    case "contract":
+      return "Contract";
+    case "erc20":
+      return "ERC-20 Token";
+    case "erc721":
+      return "ERC-721 NFT";
+    case "erc1155":
+      return "ERC-1155 Multi-Token";
+    default:
+      return "Unknown";
+  }
+}
+
+/**
+ * Get an icon/emoji for an address type
+ */
+export function getAddressTypeIcon(type: AddressType): string {
+  switch (type) {
+    case "account":
+      return "👤";
+    case "contract":
+      return "📄";
+    case "erc20":
+      return "🪙";
+    case "erc721":
+      return "🖼️";
+    case "erc1155":
+      return "📦";
+    default:
+      return "❓";
+  }
+}

From 1066620c04defb5daa29c589c1c2bcec7a6e6061 Mon Sep 17 00:00:00 2001
From: AugustoL <augustolemble@pm.me>
Date: Fri, 5 Dec 2025 12:32:31 -0300
Subject: [PATCH 3/5] chore: remove deprecated AddressDisplay.tsx

---
 .../pages/address/AddressDisplay.tsx          | 1243 -----------------
 1 file changed, 1243 deletions(-)
 delete mode 100644 src/components/pages/address/AddressDisplay.tsx

diff --git a/src/components/pages/address/AddressDisplay.tsx b/src/components/pages/address/AddressDisplay.tsx
deleted file mode 100644
index f53c7c4c..00000000
--- a/src/components/pages/address/AddressDisplay.tsx
+++ /dev/null
@@ -1,1243 +0,0 @@
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-import React, { useCallback, useContext, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
-import { encodeFunctionData, parseEther, toFunctionSelector } from "viem";
-import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
-import { AppContext } from "../../../context";
-import { useSourcify } from "../../../hooks/useSourcify";
-import type {
-  ABI,
-  ABIParameter,
-  Address,
-  AddressTransactionsResult,
-  DecodedContenthash,
-  ENSRecords,
-  ENSReverseResult,
-  EventABI,
-  FunctionABI,
-  RPCMetadata,
-  Transaction,
-} from "../../../types";
-import { RPCIndicator } from "../../common/RPCIndicator";
-import ENSRecordsDisplay from "./ENSRecordsDisplay";
-
-interface AddressDisplayProps {
-  address: Address;
-  addressHash: string;
-  networkId?: string;
-  transactionsResult?: AddressTransactionsResult | null;
-  transactionDetails?: Transaction[];
-  loadingTxDetails?: boolean;
-  metadata?: RPCMetadata;
-  selectedProvider?: string | null;
-  onProviderSelect?: (provider: string) => void;
-  // ENS props
-  ensName?: string | null;
-  reverseResult?: ENSReverseResult | null;
-  ensRecords?: ENSRecords | null;
-  decodedContenthash?: DecodedContenthash | null;
-  ensLoading?: boolean;
-  isMainnet?: boolean;
-}
-
-const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
-  ({
-    address,
-    addressHash,
-    networkId = "1",
-    transactionsResult,
-    transactionDetails = [],
-    loadingTxDetails = false,
-    metadata,
-    selectedProvider,
-    onProviderSelect,
-    ensName,
-    reverseResult,
-    ensRecords,
-    decodedContenthash,
-    ensLoading = false,
-    isMainnet = true,
-  }) => {
-    const [storageSlot, setStorageSlot] = useState("");
-    const [storageValue, setStorageValue] = useState("");
-    const [showContractDetails, setShowContractDetails] = useState(false);
-    const [selectedWriteFunction, setSelectedWriteFunction] = useState<FunctionABI | null>(null);
-    const [selectedReadFunction, setSelectedReadFunction] = useState<FunctionABI | null>(null);
-    const [functionInputs, setFunctionInputs] = useState<Record<string, string>>({});
-    const [readFunctionResult, setReadFunctionResult] = useState<string | null>(null);
-    const [isReadingFunction, setIsReadingFunction] = useState(false);
-    const { jsonFiles, rpcUrls } = useContext(AppContext);
-
-    // Wagmi hooks for contract interaction
-    const { data: hash, writeContract, isPending, isError, error } = useWriteContract();
-    const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
-      hash,
-    });
-
-    const isContract = useMemo(() => address.code && address.code !== "0x", [address.code]);
-
-    // Fetch Sourcify data only if it's a contract
-    const {
-      data: sourcifyData,
-      loading: sourcifyLoading,
-      isVerified,
-    } = useSourcify(Number(networkId), isContract ? addressHash : undefined, true);
-
-    // Memoized helper functions
-    const truncate = useCallback((str: string, start = 6, end = 4) => {
-      if (!str) return "";
-      if (str.length <= start + end) return str;
-      return `${str.slice(0, start)}...${str.slice(-end)}`;
-    }, []);
-
-    const formatBalance = useCallback((balance: string) => {
-      try {
-        const eth = Number(balance) / 1e18;
-        return `${eth.toFixed(6)} ETH`;
-      } catch (_e) {
-        return balance;
-      }
-    }, []);
-
-    const formatValue = useCallback((value: string) => {
-      try {
-        const eth = Number(value) / 1e18;
-        return `${eth.toFixed(6)} ETH`;
-      } catch (_e) {
-        return "0 ETH";
-      }
-    }, []);
-
-    // Memoized formatted balance
-    const _formattedBalance = useMemo(
-      () => formatBalance(address.balance),
-      [address.balance, formatBalance],
-    );
-
-    const handleGetStorage = useCallback(() => {
-      // Check if the slot exists in the storeageAt object
-      if (address.storeageAt?.[storageSlot]) {
-        setStorageValue(address.storeageAt[storageSlot]);
-      } else {
-        setStorageValue("0x0000000000000000000000000000000000000000000000000000000000000000");
-      }
-    }, [address.storeageAt, storageSlot]);
-
-    // Check if we have local artifact data for this address
-    const localArtifact = jsonFiles[addressHash.toLowerCase()];
-
-    // Parse local artifact to sourcify format if it exists - memoized
-    const parsedLocalData = useMemo(() => {
-      if (!localArtifact) return null;
-      return {
-        name: localArtifact.contractName,
-        compilerVersion: localArtifact.buildInfo?.solcLongVersion,
-        evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
-        abi: localArtifact.abi,
-        files: localArtifact.sourceCode
-          ? [
-              {
-                name: localArtifact.sourceName || "Contract.sol",
-                path: localArtifact.sourceName || "Contract.sol",
-                content: localArtifact.sourceCode,
-              },
-            ]
-          : undefined,
-        metadata: {
-          language: localArtifact.buildInfo?.input?.language,
-          compiler: localArtifact.buildInfo
-            ? {
-                version: localArtifact.buildInfo.solcVersion,
-              }
-            : undefined,
-        },
-        match: "perfect" as const,
-        creation_match: null,
-        runtime_match: null,
-        chainId: networkId,
-        address: addressHash,
-        verifiedAt: undefined,
-      };
-    }, [localArtifact, networkId, addressHash]);
-
-    // Use local artifact data if available and sourcify is not verified, otherwise use sourcify
-    const contractData = useMemo(
-      () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
-      [isVerified, sourcifyData, parsedLocalData],
-    );
-
-    // Decode function name from calldata using ABI
-    const decodeFunctionName = useCallback(
-      (data: string | undefined): string | null => {
-        if (!data || data === "0x" || data.length < 10) return null;
-        if (!contractData?.abi) return null;
-
-        const selector = data.slice(0, 10).toLowerCase();
-
-        // Find matching function in ABI
-        for (const item of contractData.abi) {
-          // biome-ignore lint/suspicious/noExplicitAny: ABI item type
-          const abiItem = item as any;
-          if (abiItem.type !== "function") continue;
-
-          // Calculate function selector: keccak256(name(type1,type2,...))
-          const inputs = abiItem.inputs || [];
-          // biome-ignore lint/suspicious/noExplicitAny: ABI input type
-          const signature = `${abiItem.name}(${inputs.map((i: any) => i.type).join(",")})`;
-
-          try {
-            const computedSelector = toFunctionSelector(signature).toLowerCase();
-            if (computedSelector === selector) {
-              return abiItem.name;
-            }
-          } catch {}
-        }
-
-        return null;
-      },
-      [contractData?.abi],
-    );
-
-    const handleWriteFunction = useCallback(async () => {
-      if (!selectedWriteFunction) return;
-
-      try {
-        // Prepare function arguments
-        const args: unknown[] = [];
-        if (selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0) {
-          for (const input of selectedWriteFunction.inputs) {
-            const paramName = input.name || `param${selectedWriteFunction.inputs.indexOf(input)}`;
-            const value = functionInputs[paramName];
-
-            if (!value && value !== "0") {
-              alert(`Please provide value for ${paramName}`);
-              return;
-            }
-
-            args.push(value);
-          }
-        }
-
-        // Prepare transaction value for payable functions
-        let txValue: bigint | undefined;
-        const valueKey = "_value";
-        if (selectedWriteFunction.stateMutability === "payable" && functionInputs[valueKey]) {
-          try {
-            txValue = parseEther(functionInputs[valueKey]);
-          } catch (_e) {
-            alert("Invalid ETH value");
-            return;
-          }
-        }
-
-        // Call the contract
-        writeContract({
-          address: addressHash as `0x${string}`,
-          abi: contractData?.abi || [],
-          functionName: selectedWriteFunction.name,
-          args: args,
-          value: txValue,
-        });
-      } catch (err) {
-        console.error("Error writing to contract:", err);
-        alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
-      }
-    }, [selectedWriteFunction, functionInputs, addressHash, contractData?.abi, writeContract]);
-
-    const handleReadFunction = useCallback(async () => {
-      if (!selectedReadFunction || !contractData) return;
-
-      setIsReadingFunction(true);
-      setReadFunctionResult(null);
-
-      try {
-        // Get RPC URL for the current chain
-        const networkIdNum = Number(networkId);
-        const rpcUrlsForChain = rpcUrls[networkIdNum as keyof typeof rpcUrls];
-
-        if (!rpcUrlsForChain) {
-          throw new Error(`No RPC URL configured for chain ${networkId}`);
-        }
-
-        // Get first RPC URL (could be string or array)
-        const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
-
-        if (!rpcUrl) {
-          // Defensive: ensure rpcUrl is defined before calling fetch
-          throw new Error(`No RPC URL configured for chain ${networkId}`);
-        }
-
-        // Prepare function arguments
-        const args: unknown[] = [];
-        if (selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0) {
-          for (const input of selectedReadFunction.inputs) {
-            const paramName = input.name || `param${selectedReadFunction.inputs.indexOf(input)}`;
-            const value = functionInputs[paramName];
-
-            if (!value && value !== "0") {
-              alert(`Please provide value for ${paramName}`);
-              setIsReadingFunction(false);
-              return;
-            }
-
-            args.push(value);
-          }
-        }
-
-        // Use fetch to call the RPC directly for read functions
-        const response = await fetch(rpcUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            jsonrpc: "2.0",
-            method: "eth_call",
-            params: [
-              {
-                to: addressHash,
-                data: encodeFunctionData({
-                  abi: contractData.abi,
-                  functionName: selectedReadFunction.name,
-                  args: args,
-                }),
-              },
-              "latest",
-            ],
-            id: 1,
-          }),
-        });
-
-        const data = await response.json();
-
-        if (data.error) {
-          throw new Error(data.error.message || "Contract call failed");
-        }
-
-        setReadFunctionResult(data.result);
-      } catch (err) {
-        console.error("Error reading from contract:", err);
-        setReadFunctionResult(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
-      } finally {
-        setIsReadingFunction(false);
-      }
-    }, [selectedReadFunction, contractData, networkId, functionInputs, addressHash, rpcUrls]);
-
-    return (
-      <div className="block-display-card">
-        <div className="block-display-header address-header">
-          <div>
-            <span className="block-label">Address</span>
-            {(ensName || reverseResult?.ensName) && (
-              <span className="address-ens-name">{ensName || reverseResult?.ensName}</span>
-            )}
-            <span className="tx-mono header-subtitle">{addressHash}</span>
-          </div>
-          {metadata && selectedProvider !== undefined && onProviderSelect && (
-            <RPCIndicator
-              metadata={metadata}
-              selectedProvider={selectedProvider}
-              onProviderSelect={onProviderSelect}
-            />
-          )}
-        </div>
-
-        <div className="address-section-content">
-          {/* Address Details Section */}
-          <div className="tx-details">
-            <div className="tx-section">
-              <span className="tx-section-title">Address Details</span>
-            </div>
-
-            {/* Type */}
-            <div className="tx-row">
-              <span className="tx-label">Type:</span>
-              <span className="tx-value">
-                {isContract ? (
-                  <span className="tx-value-highlight text-blue">📄 Contract</span>
-                ) : (
-                  <span className="tx-value-highlight">👤 Externally Owned Account (EOA)</span>
-                )}
-              </span>
-            </div>
-
-            {/* Balance */}
-            <div className="tx-row">
-              <span className="tx-label">Balance:</span>
-              <span className="tx-value">
-                <span className="tx-value-highlight">{formatBalance(address.balance)}</span>
-              </span>
-            </div>
-
-            {/* Transaction Count (Nonce) */}
-            <div className="tx-row">
-              <span className="tx-label">Transactions:</span>
-              <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
-            </div>
-
-            {/* Verification Status (only for contracts) */}
-            {isContract && (
-              <div className="tx-row">
-                <span className="tx-label">Contract Verified:</span>
-                <span className="tx-value">
-                  {sourcifyLoading ? (
-                    <span className="verification-checking">Checking Sourcify...</span>
-                  ) : isVerified || parsedLocalData ? (
-                    <span className="flex-align-center-gap-8">
-                      <span className="tx-value-highlight">✓ Verified</span>
-                      {contractData?.match && (
-                        <span className="match-badge match-badge-full">
-                          {contractData.match === "perfect"
-                            ? parsedLocalData
-                              ? "Local JSON"
-                              : "Perfect Match"
-                            : "Partial Match"}
-                        </span>
-                      )}
-                    </span>
-                  ) : (
-                    <span className="verification-not-verified">Not Verified</span>
-                  )}
-                </span>
-              </div>
-            )}
-
-            {/* Contract Name (if verified) */}
-            {isContract && contractData?.name && (
-              <div className="tx-row">
-                <span className="tx-label">Contract Name:</span>
-                <span className="tx-value">{contractData.name}</span>
-              </div>
-            )}
-
-            {/* Compiler Version (if verified) */}
-            {isContract && contractData?.compilerVersion && (
-              <div className="tx-row">
-                <span className="tx-label">Compiler:</span>
-                <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
-              </div>
-            )}
-          </div>
-
-          {/* ENS Records Section */}
-          {(ensName || reverseResult?.ensName || ensLoading) && (
-            <ENSRecordsDisplay
-              ensName={ensName || null}
-              reverseResult={reverseResult}
-              records={ensRecords}
-              decodedContenthash={decodedContenthash}
-              loading={ensLoading}
-              isMainnet={isMainnet}
-            />
-          )}
-
-          {/* Contract Verification Details */}
-          {isContract && (isVerified || parsedLocalData) && contractData && (
-            <div className="tx-details">
-              <button
-                type="button"
-                className="tx-section btn-toggle-section"
-                onClick={() => setShowContractDetails(!showContractDetails)}
-              >
-                <span className="tx-section-title">Contract Details</span>
-                <span className="contract-section-toggle">{showContractDetails ? " ▼" : " ▶"}</span>
-              </button>
-
-              {showContractDetails && (
-                <>
-                  {contractData.name && (
-                    <div className="tx-row">
-                      <span className="tx-label">Contract Name</span>
-                      <span className="tx-value tx-value-success">{contractData.name}</span>
-                    </div>
-                  )}
-
-                  {contractData.compilerVersion && (
-                    <div className="tx-row">
-                      <span className="tx-label">Compiler Version</span>
-                      <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
-                    </div>
-                  )}
-
-                  {contractData.evmVersion && (
-                    <div className="tx-row">
-                      <span className="tx-label">EVM Version</span>
-                      <span className="tx-value">{contractData.evmVersion}</span>
-                    </div>
-                  )}
-
-                  {contractData.chainId && (
-                    <div className="tx-row">
-                      <span className="tx-label">Chain ID</span>
-                      <span className="tx-value">{contractData.chainId}</span>
-                    </div>
-                  )}
-
-                  {contractData.verifiedAt && (
-                    <div className="tx-row">
-                      <span className="tx-label">Verified At</span>
-                      <span className="tx-value">
-                        {new Date(contractData.verifiedAt).toLocaleString()}
-                      </span>
-                    </div>
-                  )}
-
-                  {contractData.match && (
-                    <div className="tx-row">
-                      <span className="tx-label">Match Type</span>
-                      <span
-                        className={`tx-value font-weight-600 ${contractData.match === "perfect" ? "text-success" : "text-warning"}`}
-                      >
-                        {contractData.match.toUpperCase()}
-                      </span>
-                    </div>
-                  )}
-
-                  {contractData.metadata?.compiler && (
-                    <div className="tx-row">
-                      <span className="tx-label">Compiler</span>
-                      <span className="tx-value tx-mono">
-                        {contractData.metadata.compiler.version}
-                      </span>
-                    </div>
-                  )}
-
-                  {contractData.creation_match && (
-                    <div className="tx-row">
-                      <span className="tx-label">Creation Match</span>
-                      <span
-                        className={`tx-value font-weight-600 ${contractData.creation_match === "perfect" ? "text-success" : "text-warning"}`}
-                      >
-                        {contractData.creation_match.toUpperCase()}
-                      </span>
-                    </div>
-                  )}
-
-                  {contractData.runtime_match && (
-                    <div className="tx-row">
-                      <span className="tx-label">Runtime Match</span>
-                      <span
-                        className={`tx-value font-weight-600 ${contractData.runtime_match === "perfect" ? "text-success" : "text-warning"}`}
-                      >
-                        {contractData.runtime_match.toUpperCase()}
-                      </span>
-                    </div>
-                  )}
-
-                  {/* Contract Bytecode */}
-                  <div className="tx-row-vertical">
-                    <button
-                      type="button"
-                      className="source-toggle-container btn-reset-block"
-                      onClick={() => {
-                        const elem = document.getElementById("bytecode-content");
-                        const icon = document.getElementById("bytecode-icon");
-                        if (elem && icon) {
-                          const isHidden = elem.style.display === "none";
-                          elem.style.display = isHidden ? "block" : "none";
-                          icon.textContent = isHidden ? "▼" : "▶";
-                        }
-                      }}
-                    >
-                      <span className="tx-label">Contract Bytecode</span>
-                      <span id="bytecode-icon" className="source-toggle-icon">
-                        ▶
-                      </span>
-                    </button>
-                    <div
-                      id="bytecode-content"
-                      className="tx-input-data"
-                      style={{ display: "none" }}
-                    >
-                      <code>{address.code}</code>
-                    </div>
-                  </div>
-
-                  {/* Source Code */}
-                  {((contractData.files && contractData.files.length > 0) ||
-                    ("sources" in contractData && contractData.sources)) &&
-                    (() => {
-                      // Prepare source files array - either from files or sources object
-                      const sources = "sources" in contractData ? contractData.sources : undefined;
-                      const sourceFiles =
-                        contractData.files && contractData.files.length > 0
-                          ? contractData.files
-                          : sources
-                            ? Object.entries(sources).map(([path, source]) => ({
-                                name: path,
-                                path: path,
-                                content: source.content || "",
-                              }))
-                            : [];
-
-                      return sourceFiles.length > 0 ? (
-                        <div className="tx-row-vertical">
-                          <button
-                            type="button"
-                            className="source-toggle-container btn-reset-block"
-                            onClick={() => {
-                              const elem = document.getElementById("source-code-content");
-                              const icon = document.getElementById("source-code-icon");
-                              if (elem && icon) {
-                                const isHidden = elem.style.display === "none";
-                                elem.style.display = isHidden ? "block" : "none";
-                                icon.textContent = isHidden ? "▼" : "▶";
-                              }
-                            }}
-                          >
-                            <span className="tx-label">Source Code</span>
-                            <span id="source-code-icon" className="source-toggle-icon">
-                              ▶
-                            </span>
-                          </button>
-                          <div
-                            id="source-code-content"
-                            className="margin-top-8"
-                            style={{ display: "none" }}
-                          >
-                            {sourceFiles.map((file) => (
-                              <div key={file.path} className="source-file-container">
-                                <div className="source-file-header">
-                                  📄 {file.name || file.path}
-                                </div>
-                                <pre className="source-file-code">{file.content}</pre>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      ) : null;
-                    })()}
-
-                  {/* Raw ABI */}
-                  {contractData.abi && contractData.abi.length > 0 && (
-                    <div className="tx-row-vertical">
-                      <button
-                        type="button"
-                        className="source-toggle-container btn-reset-block"
-                        onClick={() => {
-                          const elem = document.getElementById("raw-abi-content");
-                          const icon = document.getElementById("raw-abi-icon");
-                          if (elem && icon) {
-                            const isHidden = elem.style.display === "none";
-                            elem.style.display = isHidden ? "block" : "none";
-                            icon.textContent = isHidden ? "▼" : "▶";
-                          }
-                        }}
-                      >
-                        <span className="tx-label">Raw ABI</span>
-                        <span id="raw-abi-icon" className="source-toggle-icon">
-                          ▶
-                        </span>
-                      </button>
-                      <div
-                        id="raw-abi-content"
-                        className="tx-input-data"
-                        style={{ display: "none" }}
-                      >
-                        <code>{JSON.stringify(contractData.abi, null, 2)}</code>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Contract ABI */}
-                  {contractData.abi && contractData.abi.length > 0 && (
-                    <div className="tx-row-vertical">
-                      <div className="contract-functions-header">
-                        <span className="tx-label">Functions</span>
-                        <ConnectButton.Custom>
-                          {({
-                            account,
-                            chain,
-                            openAccountModal,
-                            openChainModal,
-                            openConnectModal,
-                            authenticationStatus,
-                            mounted,
-                          }: Parameters<
-                            Parameters<typeof ConnectButton.Custom>[0]["children"]
-                          >[0]) => {
-                            const ready = mounted && authenticationStatus !== "loading";
-                            const connected =
-                              ready &&
-                              account &&
-                              chain &&
-                              (!authenticationStatus || authenticationStatus === "authenticated");
-
-                            return (
-                              <div
-                                {...(!ready && {
-                                  "aria-hidden": true,
-                                  className: "wallet-hidden",
-                                })}
-                              >
-                                {(() => {
-                                  if (!connected) {
-                                    return (
-                                      <button
-                                        onClick={openConnectModal}
-                                        type="button"
-                                        className="btn-connect-wallet"
-                                      >
-                                        Connect Wallet
-                                      </button>
-                                    );
-                                  }
-
-                                  if (chain.unsupported) {
-                                    return (
-                                      <button
-                                        onClick={openChainModal}
-                                        type="button"
-                                        className="btn-wrong-network"
-                                      >
-                                        Wrong Network
-                                      </button>
-                                    );
-                                  }
-
-                                  return (
-                                    <div className="wallet-connected-container">
-                                      <button
-                                        onClick={openChainModal}
-                                        type="button"
-                                        className="btn-chain-selector"
-                                      >
-                                        {chain.hasIcon && chain.iconUrl && (
-                                          <img
-                                            alt={chain.name ?? "Chain icon"}
-                                            src={chain.iconUrl}
-                                            className="chain-icon"
-                                          />
-                                        )}
-                                        {chain.name}
-                                      </button>
-                                      <button
-                                        onClick={openAccountModal}
-                                        type="button"
-                                        className="btn-account"
-                                      >
-                                        {account.displayName}
-                                      </button>
-                                    </div>
-                                  );
-                                })()}
-                              </div>
-                            );
-                          }}
-                        </ConnectButton.Custom>
-                      </div>
-                      <div className="contract-functions-content">
-                        {/* Read Functions (view/pure) */}
-                        {(() => {
-                          const readFunctions = contractData.abi.filter(
-                            (item: ABI): item is FunctionABI =>
-                              item.type === "function" &&
-                              ((item as FunctionABI).stateMutability === "view" ||
-                                (item as FunctionABI).stateMutability === "pure"),
-                          );
-                          return (
-                            readFunctions.length > 0 && (
-                              <div className="functions-section">
-                                <div className="functions-section-title functions-section-title-read">
-                                  Read Functions ({readFunctions.length})
-                                </div>
-                                <div className="functions-list">
-                                  {readFunctions.map((func: FunctionABI) => (
-                                    <button
-                                      type="button"
-                                      key={func.name}
-                                      onClick={() => {
-                                        setSelectedReadFunction(func);
-                                        setSelectedWriteFunction(null);
-                                        setFunctionInputs({});
-                                        setReadFunctionResult(null);
-                                      }}
-                                      className={`btn-function btn-function-read ${selectedReadFunction?.name === func.name ? "selected" : ""}`}
-                                    >
-                                      {func.name}
-                                    </button>
-                                  ))}
-                                </div>
-                              </div>
-                            )
-                          );
-                        })()}
-
-                        {/* Write Functions (payable/nonpayable) */}
-                        {(() => {
-                          const writeFunctions = contractData.abi.filter(
-                            (item: ABI): item is FunctionABI =>
-                              item.type === "function" &&
-                              ((item as FunctionABI).stateMutability === "payable" ||
-                                (item as FunctionABI).stateMutability === "nonpayable" ||
-                                !(item as FunctionABI).stateMutability),
-                          );
-                          return (
-                            writeFunctions.length > 0 && (
-                              <div className="functions-section">
-                                <div className="functions-section-title functions-section-title-write">
-                                  Write Functions ({writeFunctions.length})
-                                </div>
-                                <div className="functions-list">
-                                  {writeFunctions.map((func: FunctionABI) => (
-                                    <button
-                                      type="button"
-                                      key={func.name}
-                                      onClick={() => {
-                                        setSelectedWriteFunction(func);
-                                        setSelectedReadFunction(null);
-                                        setFunctionInputs({});
-                                        setReadFunctionResult(null);
-                                      }}
-                                      className={`btn-function btn-function-write ${selectedWriteFunction?.name === func.name ? "selected" : ""}`}
-                                    >
-                                      {func.name}
-                                    </button>
-                                  ))}
-                                </div>
-                              </div>
-                            )
-                          );
-                        })()}
-
-                        {/* Events */}
-                        {contractData.abi.filter((item: ABI) => item.type === "event").length >
-                          0 && (
-                          <div className="functions-section">
-                            <div className="functions-section-title functions-section-title-events">
-                              Events (
-                              {contractData.abi.filter((item: ABI) => item.type === "event").length}
-                              )
-                            </div>
-                            <div className="functions-list">
-                              {contractData.abi
-                                .filter((item: ABI): item is EventABI => item.type === "event")
-                                .slice(0, 10)
-                                .map((event: EventABI) => (
-                                  <span key={event.name} className="event-badge">
-                                    {event.name}
-                                  </span>
-                                ))}
-                              {contractData.abi.filter((item: ABI) => item.type === "event")
-                                .length > 10 && (
-                                <span className="events-more">
-                                  +
-                                  {contractData.abi.filter((item: ABI) => item.type === "event")
-                                    .length - 10}{" "}
-                                  more
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                        )}
-
-                        {/* Read Function Form */}
-                        {selectedReadFunction && (
-                          <div className="function-form function-form-read">
-                            <div className="function-form-title function-form-title-read">
-                              {selectedReadFunction.name}
-                            </div>
-
-                            {selectedReadFunction.inputs &&
-                            selectedReadFunction.inputs.length > 0 ? (
-                              <div className="function-inputs">
-                                {selectedReadFunction.inputs.map(
-                                  (input: ABIParameter, idx: number) => (
-                                    <label
-                                      key={`${input.name || idx}-${input.type}`}
-                                      className="function-input-label"
-                                    >
-                                      <span className="function-input-name">
-                                        {input.name || `param${idx}`} ({input.type})
-                                      </span>
-                                      <input
-                                        type="text"
-                                        value={functionInputs[input.name || `param${idx}`] || ""}
-                                        onChange={(e) =>
-                                          setFunctionInputs({
-                                            ...functionInputs,
-                                            [input.name || `param${idx}`]: e.target.value,
-                                          })
-                                        }
-                                        placeholder={`Enter ${input.type}`}
-                                        className="function-input function-input-read"
-                                      />
-                                    </label>
-                                  ),
-                                )}
-                              </div>
-                            ) : (
-                              <div className="function-no-params">No parameters required</div>
-                            )}
-
-                            {/* Read Result */}
-                            {readFunctionResult !== null && (
-                              <div
-                                className={`function-result ${readFunctionResult?.startsWith("Error") ? "function-result-error" : "function-result-success"}`}
-                              >
-                                <div className="function-result-title">
-                                  {readFunctionResult?.startsWith("Error")
-                                    ? "❌ Error"
-                                    : "✅ Result"}
-                                </div>
-                                {readFunctionResult}
-                              </div>
-                            )}
-
-                            <div className="function-actions">
-                              <button
-                                type="button"
-                                onClick={handleReadFunction}
-                                disabled={isReadingFunction}
-                                className="btn-function-action btn-query"
-                              >
-                                {isReadingFunction ? "Reading..." : "Query"}
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  setSelectedReadFunction(null);
-                                  setReadFunctionResult(null);
-                                }}
-                                className="btn-cancel"
-                              >
-                                Cancel
-                              </button>
-                            </div>
-                          </div>
-                        )}
-
-                        {/* Write Function Form */}
-                        {selectedWriteFunction && (
-                          <div className="function-form function-form-write">
-                            <div className="function-form-title function-form-title-write">
-                              {selectedWriteFunction.name}
-                              {selectedWriteFunction.stateMutability === "payable" && (
-                                <span className="payable-badge">payable</span>
-                              )}
-                            </div>
-
-                            {selectedWriteFunction.inputs &&
-                            selectedWriteFunction.inputs.length > 0 ? (
-                              <div className="function-inputs">
-                                {selectedWriteFunction.inputs.map(
-                                  (input: ABIParameter, idx: number) => (
-                                    <label
-                                      key={`${input.name || idx}-${input.type}`}
-                                      className="function-input-label"
-                                    >
-                                      <span className="function-input-name">
-                                        {input.name || `param${idx}`} ({input.type})
-                                      </span>
-                                      <input
-                                        type="text"
-                                        value={functionInputs[input.name || `param${idx}`] || ""}
-                                        onChange={(e) =>
-                                          setFunctionInputs({
-                                            ...functionInputs,
-                                            [input.name || `param${idx}`]: e.target.value,
-                                          })
-                                        }
-                                        placeholder={`Enter ${input.type}`}
-                                        className="function-input function-input-write"
-                                      />
-                                    </label>
-                                  ),
-                                )}
-                              </div>
-                            ) : (
-                              <div className="function-no-params">No parameters required</div>
-                            )}
-
-                            {selectedWriteFunction.stateMutability === "payable" && (
-                              <label className="function-input-label">
-                                <span className="function-input-name">Value (ETH)</span>
-                                <input
-                                  type="text"
-                                  // biome-ignore lint/complexity/useLiteralKeys: _value is a special key for ETH value
-                                  value={functionInputs["_value"] || ""}
-                                  onChange={(e) =>
-                                    setFunctionInputs({
-                                      ...functionInputs,
-                                      _value: e.target.value,
-                                    })
-                                  }
-                                  placeholder="0.0"
-                                  className="function-input function-input-value"
-                                />
-                              </label>
-                            )}
-
-                            {/* Transaction Status */}
-                            {(isPending || isConfirming || isConfirmed || isError) && (
-                              <div
-                                className={`tx-status-box ${isError ? "tx-status-error" : isConfirmed ? "tx-status-success" : "tx-status-pending"}`}
-                              >
-                                {isPending && "⏳ Waiting for wallet confirmation..."}
-                                {isConfirming && "⏳ Waiting for transaction confirmation..."}
-                                {isConfirmed && (
-                                  <div>
-                                    ✅ Transaction confirmed!
-                                    {hash && (
-                                      <div className="tx-hash-link">
-                                        <Link to={`/${networkId}/tx/${hash}`}>
-                                          View transaction
-                                        </Link>
-                                      </div>
-                                    )}
-                                  </div>
-                                )}
-                                {isError && (
-                                  <div>❌ Error: {error?.message || "Transaction failed"}</div>
-                                )}
-                              </div>
-                            )}
-
-                            <div className="function-actions">
-                              <button
-                                type="button"
-                                onClick={handleWriteFunction}
-                                disabled={isPending || isConfirming}
-                                className="btn-function-action btn-write-action"
-                              >
-                                {isPending
-                                  ? "Confirming in Wallet..."
-                                  : isConfirming
-                                    ? "Processing..."
-                                    : "Write"}
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => setSelectedWriteFunction(null)}
-                                className="btn-cancel"
-                              >
-                                Cancel
-                              </button>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
-
-                  {sourcifyData && (
-                    <div className="tx-row">
-                      <span className="tx-label">Sourcify</span>
-                      <a
-                        href={`https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="sourcify-link"
-                      >
-                        View Full Contract on Sourcify ↗
-                      </a>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Last Transactions Section */}
-          <div className="tx-details">
-            <div className="tx-section tx-history-header">
-              <span className="tx-section-title">Last Transactions</span>
-              {transactionsResult && (
-                <span
-                  className={`tx-history-status ${transactionsResult.source === "trace_filter" ? "tx-history-status-complete" : transactionsResult.source === "logs" ? "tx-history-status-partial" : "tx-history-status-none"}`}
-                >
-                  {transactionsResult.source === "trace_filter" && (
-                    <>
-                      <span className="tx-history-dot">●</span>
-                      Complete history ({transactionDetails.length} transactions)
-                    </>
-                  )}
-                  {transactionsResult.source === "logs" && (
-                    <>
-                      <span className="tx-history-dot">●</span>
-                      Partial (logs only) - {transactionDetails.length} transactions
-                    </>
-                  )}
-                  {transactionsResult.source === "none" && (
-                    <>
-                      <span className="tx-history-dot">●</span>
-                      No data available
-                    </>
-                  )}
-                </span>
-              )}
-            </div>
-
-            {/* Warning message for partial data */}
-            {transactionsResult?.message && (
-              <div
-                className={`tx-history-message ${transactionsResult.source === "none" ? "tx-history-message-error" : "tx-history-message-warning"}`}
-              >
-                <span className="tx-history-message-icon">
-                  {transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
-                </span>
-                {transactionsResult.message}
-              </div>
-            )}
-
-            {/* Loading state */}
-            {loadingTxDetails && (
-              <div className="tx-history-empty">Loading transaction details...</div>
-            )}
-
-            {/* Transaction table */}
-            {!loadingTxDetails && transactionDetails.length > 0 && (
-              <div className="address-table-container">
-                <table className="recent-transactions-table">
-                  <thead>
-                    <tr>
-                      <th>TX Hash</th>
-                      {contractData && <th>Method</th>}
-                      <th>From</th>
-                      <th>To</th>
-                      <th>Value</th>
-                      <th>Status</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {transactionDetails.map((tx) => (
-                      <tr key={tx.hash}>
-                        <td>
-                          <Link to={`/${networkId}/tx/${tx.hash}`} className="address-table-link">
-                            {truncate(tx.hash, 8, 6)}
-                          </Link>
-                        </td>
-                        {contractData && (
-                          <td>
-                            {tx.to?.toLowerCase() === addressHash.toLowerCase() ? (
-                              (() => {
-                                const funcName = decodeFunctionName(tx.data);
-                                const selector = tx.data?.slice(0, 10);
-                                return funcName ? (
-                                  <span className="method-badge method-badge-decoded">
-                                    {funcName}
-                                  </span>
-                                ) : selector && selector !== "0x" ? (
-                                  <span
-                                    className="method-badge method-badge-selector"
-                                    title={selector}
-                                  >
-                                    {selector}
-                                  </span>
-                                ) : (
-                                  <span className="method-badge method-badge-transfer">
-                                    Transfer
-                                  </span>
-                                );
-                              })()
-                            ) : !tx.data || tx.data === "0x" ? (
-                              <span className="method-badge method-badge-transfer">Transfer</span>
-                            ) : (
-                              <span
-                                className="method-badge method-badge-selector"
-                                title={tx.data?.slice(0, 10)}
-                              >
-                                {tx.data?.slice(0, 10)}
-                              </span>
-                            )}
-                          </td>
-                        )}
-                        <td>
-                          <Link
-                            to={`/${networkId}/address/${tx.from}`}
-                            className="address-table-link"
-                          >
-                            {tx.from?.toLowerCase() === addressHash.toLowerCase()
-                              ? "This Address"
-                              : truncate(tx.from || "", 6, 4)}
-                          </Link>
-                        </td>
-                        <td>
-                          {tx.to ? (
-                            <Link
-                              to={`/${networkId}/address/${tx.to}`}
-                              className={`tx-table-to-link ${tx.to?.toLowerCase() === addressHash.toLowerCase() ? "tx-table-to-link-self" : "tx-table-to-link-other"}`}
-                            >
-                              {tx.to?.toLowerCase() === addressHash.toLowerCase()
-                                ? "This Address"
-                                : truncate(tx.to, 6, 4)}
-                            </Link>
-                          ) : (
-                            <span className="contract-creation-badge">Contract Creation</span>
-                          )}
-                        </td>
-                        <td>
-                          <span className="address-table-value">{formatValue(tx.value)}</span>
-                        </td>
-                        <td>
-                          {tx.receipt?.status === "0x1" ? (
-                            <span className="table-status-badge table-status-success">
-                              ✓ Success
-                            </span>
-                          ) : tx.receipt?.status === "0x0" ? (
-                            <span className="table-status-badge table-status-failed">✗ Failed</span>
-                          ) : (
-                            <span className="table-status-badge table-status-pending">
-                              ⏳ Pending
-                            </span>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-
-            {/* Empty state */}
-            {!loadingTxDetails &&
-              transactionDetails.length === 0 &&
-              !transactionsResult?.message && (
-                <div className="tx-history-empty">No transactions found for this address</div>
-              )}
-          </div>
-
-          {/* Storage Section (for contracts) */}
-          {isContract && (
-            <div className="block-display-card">
-              <div className="block-display-header">
-                <span className="block-label">Contract Storage</span>
-              </div>
-              <div className="tx-details">
-                <div className="tx-row">
-                  <span className="tx-label">Storage Slot:</span>
-                  <span className="tx-value">
-                    <div className="storage-input-row">
-                      <input
-                        type="text"
-                        placeholder="e.g., 0x0"
-                        value={storageSlot}
-                        onChange={(e) => setStorageSlot(e.target.value)}
-                        className="storage-input"
-                      />
-                      <button type="button" onClick={handleGetStorage} className="storage-button">
-                        Get
-                      </button>
-                    </div>
-                  </span>
-                </div>
-                {storageValue && (
-                  <div className="tx-row">
-                    <span className="tx-label">Value:</span>
-                    <span className="tx-value">
-                      <div className="storage-value-display">{storageValue}</div>
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-AddressDisplay.displayName = "AddressDisplay";
-
-export default AddressDisplay;

From 78b1b1b7cda1505431825bd2f7c5fba6d3e81f95 Mon Sep 17 00:00:00 2001
From: AugustoL <augustolemble@pm.me>
Date: Fri, 5 Dec 2025 14:38:01 -0300
Subject: [PATCH 4/5] feat: add NFT token detail pages for ERC721 and ERC1155

Add dedicated token detail pages accessible via /:networkId/address/:contract/:tokenId
route that display individual NFT metadata including:
- Token image, name, description, and properties/attributes
- Collection info (name, symbol) fetched from contract
- Owner and approval status (ERC721) / balance lookup (ERC1155)
- Token URI with link to raw metadata
- Collapsible raw metadata JSON section

Technical changes:
- Create shared hexUtils.ts for browser-compatible hex decoding
- Add erc721Metadata.ts and erc1155Metadata.ts utility modules
- Add NFTTokenDetail wrapper with auto-detection via ERC165
- Remove inline CSS styles in favor of utility classes
- Add NFT-specific CSS styles to components.css
---
 src/App.tsx                                   |    2 +
 src/components/LazyComponents.tsx             |    2 +
 .../pages/address/AddressDetails.tsx          | 1243 +++++++++++++++++
 .../pages/address/displays/AccountDisplay.tsx |    4 +-
 .../address/displays/ContractDisplay.tsx      |    4 +-
 .../pages/address/displays/ERC1155Display.tsx |   93 +-
 .../pages/address/displays/ERC20Display.tsx   |    6 +-
 .../pages/address/displays/ERC721Display.tsx  |   57 +-
 .../{ => shared}/ENSRecordsDisplay.tsx        |    2 +-
 src/components/pages/address/shared/index.ts  |    1 +
 .../tokenDetails/ERC1155TokenDisplay.tsx      |  387 +++++
 .../pages/tokenDetails/ERC721TokenDisplay.tsx |  359 +++++
 src/components/pages/tokenDetails/index.tsx   |  140 ++
 src/styles/components.css                     |  546 ++++++++
 src/utils/erc1155Metadata.ts                  |  277 ++++
 src/utils/erc721Metadata.ts                   |  318 +++++
 src/utils/hexUtils.ts                         |   44 +
 17 files changed, 3443 insertions(+), 42 deletions(-)
 create mode 100644 src/components/pages/address/AddressDetails.tsx
 rename src/components/pages/address/{ => shared}/ENSRecordsDisplay.tsx (99%)
 create mode 100644 src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
 create mode 100644 src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
 create mode 100644 src/components/pages/tokenDetails/index.tsx
 create mode 100644 src/utils/erc1155Metadata.ts
 create mode 100644 src/utils/erc721Metadata.ts
 create mode 100644 src/utils/hexUtils.ts

diff --git a/src/App.tsx b/src/App.tsx
index 19249bd5..aa52e84e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ import {
   LazyDevTools,
   LazyHome,
   LazyMempool,
+  LazyTokenDetails,
   LazyProfile,
   LazySettings,
   LazySubscriptions,
@@ -105,6 +106,7 @@ function AppContent() {
               <Route path=":networkId/txs" element={<LazyTxs />} />
               <Route path=":networkId/tx/:filter" element={<LazyTx />} />
               <Route path=":networkId/address/:address" element={<LazyAddress />} />
+              <Route path=":networkId/address/:address/:tokenId" element={<LazyTokenDetails />} />
               <Route path=":networkId/mempool" element={<LazyMempool />} />
               <Route path=":networkId/mempool/:filter" element={<LazyTx />} />
               <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/components/LazyComponents.tsx b/src/components/LazyComponents.tsx
index 70262c97..64102e83 100644
--- a/src/components/LazyComponents.tsx
+++ b/src/components/LazyComponents.tsx
@@ -9,6 +9,7 @@ const Block = lazy(() => import("./pages/block"));
 const Txs = lazy(() => import("./pages/txs"));
 const Tx = lazy(() => import("./pages/tx"));
 const Address = lazy(() => import("./pages/address"));
+const TokenDetails = lazy(() => import("./pages/tokenDetails"));
 const Mempool = lazy(() => import("./pages/mempool"));
 const Settings = lazy(() => import("./pages/settings"));
 const DevTools = lazy(() => import("./pages/devtools"));
@@ -38,6 +39,7 @@ export const LazyBlock = withSuspense(Block);
 export const LazyTxs = withSuspense(Txs);
 export const LazyTx = withSuspense(Tx);
 export const LazyAddress = withSuspense(Address);
+export const LazyTokenDetails = withSuspense(TokenDetails);
 export const LazyMempool = withSuspense(Mempool);
 export const LazySettings = withSuspense(Settings);
 export const LazyDevTools = withSuspense(DevTools);
diff --git a/src/components/pages/address/AddressDetails.tsx b/src/components/pages/address/AddressDetails.tsx
new file mode 100644
index 00000000..4f25202b
--- /dev/null
+++ b/src/components/pages/address/AddressDetails.tsx
@@ -0,0 +1,1243 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import React, { useCallback, useContext, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { encodeFunctionData, parseEther, toFunctionSelector } from "viem";
+import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { AppContext } from "../../../context";
+import { useSourcify } from "../../../hooks/useSourcify";
+import type {
+  ABI,
+  ABIParameter,
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  EventABI,
+  FunctionABI,
+  RPCMetadata,
+  Transaction,
+} from "../../../types";
+import { RPCIndicator } from "../../common/RPCIndicator";
+import ENSRecordsDisplay from "./shared/ENSRecordsDisplay";
+
+interface AddressDisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId?: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails?: Transaction[];
+  loadingTxDetails?: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
+  ({
+    address,
+    addressHash,
+    networkId = "1",
+    transactionsResult,
+    transactionDetails = [],
+    loadingTxDetails = false,
+    metadata,
+    selectedProvider,
+    onProviderSelect,
+    ensName,
+    reverseResult,
+    ensRecords,
+    decodedContenthash,
+    ensLoading = false,
+    isMainnet = true,
+  }) => {
+    const [storageSlot, setStorageSlot] = useState("");
+    const [storageValue, setStorageValue] = useState("");
+    const [showContractDetails, setShowContractDetails] = useState(false);
+    const [selectedWriteFunction, setSelectedWriteFunction] = useState<FunctionABI | null>(null);
+    const [selectedReadFunction, setSelectedReadFunction] = useState<FunctionABI | null>(null);
+    const [functionInputs, setFunctionInputs] = useState<Record<string, string>>({});
+    const [readFunctionResult, setReadFunctionResult] = useState<string | null>(null);
+    const [isReadingFunction, setIsReadingFunction] = useState(false);
+    const { jsonFiles, rpcUrls } = useContext(AppContext);
+
+    // Wagmi hooks for contract interaction
+    const { data: hash, writeContract, isPending, isError, error } = useWriteContract();
+    const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+      hash,
+    });
+
+    const isContract = useMemo(() => address.code && address.code !== "0x", [address.code]);
+
+    // Fetch Sourcify data only if it's a contract
+    const {
+      data: sourcifyData,
+      loading: sourcifyLoading,
+      isVerified,
+    } = useSourcify(Number(networkId), isContract ? addressHash : undefined, true);
+
+    // Memoized helper functions
+    const truncate = useCallback((str: string, start = 6, end = 4) => {
+      if (!str) return "";
+      if (str.length <= start + end) return str;
+      return `${str.slice(0, start)}...${str.slice(-end)}`;
+    }, []);
+
+    const formatBalance = useCallback((balance: string) => {
+      try {
+        const eth = Number(balance) / 1e18;
+        return `${eth.toFixed(6)} ETH`;
+      } catch (_e) {
+        return balance;
+      }
+    }, []);
+
+    const formatValue = useCallback((value: string) => {
+      try {
+        const eth = Number(value) / 1e18;
+        return `${eth.toFixed(6)} ETH`;
+      } catch (_e) {
+        return "0 ETH";
+      }
+    }, []);
+
+    // Memoized formatted balance
+    const _formattedBalance = useMemo(
+      () => formatBalance(address.balance),
+      [address.balance, formatBalance],
+    );
+
+    const handleGetStorage = useCallback(() => {
+      // Check if the slot exists in the storeageAt object
+      if (address.storeageAt?.[storageSlot]) {
+        setStorageValue(address.storeageAt[storageSlot]);
+      } else {
+        setStorageValue("0x0000000000000000000000000000000000000000000000000000000000000000");
+      }
+    }, [address.storeageAt, storageSlot]);
+
+    // Check if we have local artifact data for this address
+    const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+    // Parse local artifact to sourcify format if it exists - memoized
+    const parsedLocalData = useMemo(() => {
+      if (!localArtifact) return null;
+      return {
+        name: localArtifact.contractName,
+        compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+        evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+        abi: localArtifact.abi,
+        files: localArtifact.sourceCode
+          ? [
+              {
+                name: localArtifact.sourceName || "Contract.sol",
+                path: localArtifact.sourceName || "Contract.sol",
+                content: localArtifact.sourceCode,
+              },
+            ]
+          : undefined,
+        metadata: {
+          language: localArtifact.buildInfo?.input?.language,
+          compiler: localArtifact.buildInfo
+            ? {
+                version: localArtifact.buildInfo.solcVersion,
+              }
+            : undefined,
+        },
+        match: "perfect" as const,
+        creation_match: null,
+        runtime_match: null,
+        chainId: networkId,
+        address: addressHash,
+        verifiedAt: undefined,
+      };
+    }, [localArtifact, networkId, addressHash]);
+
+    // Use local artifact data if available and sourcify is not verified, otherwise use sourcify
+    const contractData = useMemo(
+      () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+      [isVerified, sourcifyData, parsedLocalData],
+    );
+
+    // Decode function name from calldata using ABI
+    const decodeFunctionName = useCallback(
+      (data: string | undefined): string | null => {
+        if (!data || data === "0x" || data.length < 10) return null;
+        if (!contractData?.abi) return null;
+
+        const selector = data.slice(0, 10).toLowerCase();
+
+        // Find matching function in ABI
+        for (const item of contractData.abi) {
+          // biome-ignore lint/suspicious/noExplicitAny: ABI item type
+          const abiItem = item as any;
+          if (abiItem.type !== "function") continue;
+
+          // Calculate function selector: keccak256(name(type1,type2,...))
+          const inputs = abiItem.inputs || [];
+          // biome-ignore lint/suspicious/noExplicitAny: ABI input type
+          const signature = `${abiItem.name}(${inputs.map((i: any) => i.type).join(",")})`;
+
+          try {
+            const computedSelector = toFunctionSelector(signature).toLowerCase();
+            if (computedSelector === selector) {
+              return abiItem.name;
+            }
+          } catch {}
+        }
+
+        return null;
+      },
+      [contractData?.abi],
+    );
+
+    const handleWriteFunction = useCallback(async () => {
+      if (!selectedWriteFunction) return;
+
+      try {
+        // Prepare function arguments
+        const args: unknown[] = [];
+        if (selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0) {
+          for (const input of selectedWriteFunction.inputs) {
+            const paramName = input.name || `param${selectedWriteFunction.inputs.indexOf(input)}`;
+            const value = functionInputs[paramName];
+
+            if (!value && value !== "0") {
+              alert(`Please provide value for ${paramName}`);
+              return;
+            }
+
+            args.push(value);
+          }
+        }
+
+        // Prepare transaction value for payable functions
+        let txValue: bigint | undefined;
+        const valueKey = "_value";
+        if (selectedWriteFunction.stateMutability === "payable" && functionInputs[valueKey]) {
+          try {
+            txValue = parseEther(functionInputs[valueKey]);
+          } catch (_e) {
+            alert("Invalid ETH value");
+            return;
+          }
+        }
+
+        // Call the contract
+        writeContract({
+          address: addressHash as `0x${string}`,
+          abi: contractData?.abi || [],
+          functionName: selectedWriteFunction.name,
+          args: args,
+          value: txValue,
+        });
+      } catch (err) {
+        console.error("Error writing to contract:", err);
+        alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    }, [selectedWriteFunction, functionInputs, addressHash, contractData?.abi, writeContract]);
+
+    const handleReadFunction = useCallback(async () => {
+      if (!selectedReadFunction || !contractData) return;
+
+      setIsReadingFunction(true);
+      setReadFunctionResult(null);
+
+      try {
+        // Get RPC URL for the current chain
+        const networkIdNum = Number(networkId);
+        const rpcUrlsForChain = rpcUrls[networkIdNum as keyof typeof rpcUrls];
+
+        if (!rpcUrlsForChain) {
+          throw new Error(`No RPC URL configured for chain ${networkId}`);
+        }
+
+        // Get first RPC URL (could be string or array)
+        const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+        if (!rpcUrl) {
+          // Defensive: ensure rpcUrl is defined before calling fetch
+          throw new Error(`No RPC URL configured for chain ${networkId}`);
+        }
+
+        // Prepare function arguments
+        const args: unknown[] = [];
+        if (selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0) {
+          for (const input of selectedReadFunction.inputs) {
+            const paramName = input.name || `param${selectedReadFunction.inputs.indexOf(input)}`;
+            const value = functionInputs[paramName];
+
+            if (!value && value !== "0") {
+              alert(`Please provide value for ${paramName}`);
+              setIsReadingFunction(false);
+              return;
+            }
+
+            args.push(value);
+          }
+        }
+
+        // Use fetch to call the RPC directly for read functions
+        const response = await fetch(rpcUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            method: "eth_call",
+            params: [
+              {
+                to: addressHash,
+                data: encodeFunctionData({
+                  abi: contractData.abi,
+                  functionName: selectedReadFunction.name,
+                  args: args,
+                }),
+              },
+              "latest",
+            ],
+            id: 1,
+          }),
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+          throw new Error(data.error.message || "Contract call failed");
+        }
+
+        setReadFunctionResult(data.result);
+      } catch (err) {
+        console.error("Error reading from contract:", err);
+        setReadFunctionResult(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+      } finally {
+        setIsReadingFunction(false);
+      }
+    }, [selectedReadFunction, contractData, networkId, functionInputs, addressHash, rpcUrls]);
+
+    return (
+      <div className="block-display-card">
+        <div className="block-display-header address-header">
+          <div>
+            <span className="block-label">Address</span>
+            {(ensName || reverseResult?.ensName) && (
+              <span className="address-ens-name">{ensName || reverseResult?.ensName}</span>
+            )}
+            <span className="tx-mono header-subtitle">{addressHash}</span>
+          </div>
+          {metadata && selectedProvider !== undefined && onProviderSelect && (
+            <RPCIndicator
+              metadata={metadata}
+              selectedProvider={selectedProvider}
+              onProviderSelect={onProviderSelect}
+            />
+          )}
+        </div>
+
+        <div className="address-section-content">
+          {/* Address Details Section */}
+          <div className="tx-details">
+            <div className="tx-section">
+              <span className="tx-section-title">Address Details</span>
+            </div>
+
+            {/* Type */}
+            <div className="tx-row">
+              <span className="tx-label">Type:</span>
+              <span className="tx-value">
+                {isContract ? (
+                  <span className="tx-value-highlight text-blue">📄 Contract</span>
+                ) : (
+                  <span className="tx-value-highlight">👤 Externally Owned Account (EOA)</span>
+                )}
+              </span>
+            </div>
+
+            {/* Balance */}
+            <div className="tx-row">
+              <span className="tx-label">Balance:</span>
+              <span className="tx-value">
+                <span className="tx-value-highlight">{formatBalance(address.balance)}</span>
+              </span>
+            </div>
+
+            {/* Transaction Count (Nonce) */}
+            <div className="tx-row">
+              <span className="tx-label">Transactions:</span>
+              <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+            </div>
+
+            {/* Verification Status (only for contracts) */}
+            {isContract && (
+              <div className="tx-row">
+                <span className="tx-label">Contract Verified:</span>
+                <span className="tx-value">
+                  {sourcifyLoading ? (
+                    <span className="verification-checking">Checking Sourcify...</span>
+                  ) : isVerified || parsedLocalData ? (
+                    <span className="flex-align-center-gap-8">
+                      <span className="tx-value-highlight">✓ Verified</span>
+                      {contractData?.match && (
+                        <span className="match-badge match-badge-full">
+                          {contractData.match === "perfect"
+                            ? parsedLocalData
+                              ? "Local JSON"
+                              : "Perfect Match"
+                            : "Partial Match"}
+                        </span>
+                      )}
+                    </span>
+                  ) : (
+                    <span className="verification-not-verified">Not Verified</span>
+                  )}
+                </span>
+              </div>
+            )}
+
+            {/* Contract Name (if verified) */}
+            {isContract && contractData?.name && (
+              <div className="tx-row">
+                <span className="tx-label">Contract Name:</span>
+                <span className="tx-value">{contractData.name}</span>
+              </div>
+            )}
+
+            {/* Compiler Version (if verified) */}
+            {isContract && contractData?.compilerVersion && (
+              <div className="tx-row">
+                <span className="tx-label">Compiler:</span>
+                <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+              </div>
+            )}
+          </div>
+
+          {/* ENS Records Section */}
+          {(ensName || reverseResult?.ensName || ensLoading) && (
+            <ENSRecordsDisplay
+              ensName={ensName || null}
+              reverseResult={reverseResult}
+              records={ensRecords}
+              decodedContenthash={decodedContenthash}
+              loading={ensLoading}
+              isMainnet={isMainnet}
+            />
+          )}
+
+          {/* Contract Verification Details */}
+          {isContract && (isVerified || parsedLocalData) && contractData && (
+            <div className="tx-details">
+              <button
+                type="button"
+                className="tx-section btn-toggle-section"
+                onClick={() => setShowContractDetails(!showContractDetails)}
+              >
+                <span className="tx-section-title">Contract Details</span>
+                <span className="contract-section-toggle">{showContractDetails ? " ▼" : " ▶"}</span>
+              </button>
+
+              {showContractDetails && (
+                <>
+                  {contractData.name && (
+                    <div className="tx-row">
+                      <span className="tx-label">Contract Name</span>
+                      <span className="tx-value tx-value-success">{contractData.name}</span>
+                    </div>
+                  )}
+
+                  {contractData.compilerVersion && (
+                    <div className="tx-row">
+                      <span className="tx-label">Compiler Version</span>
+                      <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+                    </div>
+                  )}
+
+                  {contractData.evmVersion && (
+                    <div className="tx-row">
+                      <span className="tx-label">EVM Version</span>
+                      <span className="tx-value">{contractData.evmVersion}</span>
+                    </div>
+                  )}
+
+                  {contractData.chainId && (
+                    <div className="tx-row">
+                      <span className="tx-label">Chain ID</span>
+                      <span className="tx-value">{contractData.chainId}</span>
+                    </div>
+                  )}
+
+                  {contractData.verifiedAt && (
+                    <div className="tx-row">
+                      <span className="tx-label">Verified At</span>
+                      <span className="tx-value">
+                        {new Date(contractData.verifiedAt).toLocaleString()}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.match && (
+                    <div className="tx-row">
+                      <span className="tx-label">Match Type</span>
+                      <span
+                        className={`tx-value font-weight-600 ${contractData.match === "perfect" ? "text-success" : "text-warning"}`}
+                      >
+                        {contractData.match.toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.metadata?.compiler && (
+                    <div className="tx-row">
+                      <span className="tx-label">Compiler</span>
+                      <span className="tx-value tx-mono">
+                        {contractData.metadata.compiler.version}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.creation_match && (
+                    <div className="tx-row">
+                      <span className="tx-label">Creation Match</span>
+                      <span
+                        className={`tx-value font-weight-600 ${contractData.creation_match === "perfect" ? "text-success" : "text-warning"}`}
+                      >
+                        {contractData.creation_match.toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.runtime_match && (
+                    <div className="tx-row">
+                      <span className="tx-label">Runtime Match</span>
+                      <span
+                        className={`tx-value font-weight-600 ${contractData.runtime_match === "perfect" ? "text-success" : "text-warning"}`}
+                      >
+                        {contractData.runtime_match.toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Contract Bytecode */}
+                  <div className="tx-row-vertical">
+                    <button
+                      type="button"
+                      className="source-toggle-container btn-reset-block"
+                      onClick={() => {
+                        const elem = document.getElementById("bytecode-content");
+                        const icon = document.getElementById("bytecode-icon");
+                        if (elem && icon) {
+                          const isHidden = elem.style.display === "none";
+                          elem.style.display = isHidden ? "block" : "none";
+                          icon.textContent = isHidden ? "▼" : "▶";
+                        }
+                      }}
+                    >
+                      <span className="tx-label">Contract Bytecode</span>
+                      <span id="bytecode-icon" className="source-toggle-icon">
+                        ▶
+                      </span>
+                    </button>
+                    <div
+                      id="bytecode-content"
+                      className="tx-input-data"
+                      style={{ display: "none" }}
+                    >
+                      <code>{address.code}</code>
+                    </div>
+                  </div>
+
+                  {/* Source Code */}
+                  {((contractData.files && contractData.files.length > 0) ||
+                    ("sources" in contractData && contractData.sources)) &&
+                    (() => {
+                      // Prepare source files array - either from files or sources object
+                      const sources = "sources" in contractData ? contractData.sources : undefined;
+                      const sourceFiles =
+                        contractData.files && contractData.files.length > 0
+                          ? contractData.files
+                          : sources
+                            ? Object.entries(sources).map(([path, source]) => ({
+                                name: path,
+                                path: path,
+                                content: source.content || "",
+                              }))
+                            : [];
+
+                      return sourceFiles.length > 0 ? (
+                        <div className="tx-row-vertical">
+                          <button
+                            type="button"
+                            className="source-toggle-container btn-reset-block"
+                            onClick={() => {
+                              const elem = document.getElementById("source-code-content");
+                              const icon = document.getElementById("source-code-icon");
+                              if (elem && icon) {
+                                const isHidden = elem.style.display === "none";
+                                elem.style.display = isHidden ? "block" : "none";
+                                icon.textContent = isHidden ? "▼" : "▶";
+                              }
+                            }}
+                          >
+                            <span className="tx-label">Source Code</span>
+                            <span id="source-code-icon" className="source-toggle-icon">
+                              ▶
+                            </span>
+                          </button>
+                          <div
+                            id="source-code-content"
+                            className="margin-top-8"
+                            style={{ display: "none" }}
+                          >
+                            {sourceFiles.map((file) => (
+                              <div key={file.path} className="source-file-container">
+                                <div className="source-file-header">
+                                  📄 {file.name || file.path}
+                                </div>
+                                <pre className="source-file-code">{file.content}</pre>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      ) : null;
+                    })()}
+
+                  {/* Raw ABI */}
+                  {contractData.abi && contractData.abi.length > 0 && (
+                    <div className="tx-row-vertical">
+                      <button
+                        type="button"
+                        className="source-toggle-container btn-reset-block"
+                        onClick={() => {
+                          const elem = document.getElementById("raw-abi-content");
+                          const icon = document.getElementById("raw-abi-icon");
+                          if (elem && icon) {
+                            const isHidden = elem.style.display === "none";
+                            elem.style.display = isHidden ? "block" : "none";
+                            icon.textContent = isHidden ? "▼" : "▶";
+                          }
+                        }}
+                      >
+                        <span className="tx-label">Raw ABI</span>
+                        <span id="raw-abi-icon" className="source-toggle-icon">
+                          ▶
+                        </span>
+                      </button>
+                      <div
+                        id="raw-abi-content"
+                        className="tx-input-data"
+                        style={{ display: "none" }}
+                      >
+                        <code>{JSON.stringify(contractData.abi, null, 2)}</code>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Contract ABI */}
+                  {contractData.abi && contractData.abi.length > 0 && (
+                    <div className="tx-row-vertical">
+                      <div className="contract-functions-header">
+                        <span className="tx-label">Functions</span>
+                        <ConnectButton.Custom>
+                          {({
+                            account,
+                            chain,
+                            openAccountModal,
+                            openChainModal,
+                            openConnectModal,
+                            authenticationStatus,
+                            mounted,
+                          }: Parameters<
+                            Parameters<typeof ConnectButton.Custom>[0]["children"]
+                          >[0]) => {
+                            const ready = mounted && authenticationStatus !== "loading";
+                            const connected =
+                              ready &&
+                              account &&
+                              chain &&
+                              (!authenticationStatus || authenticationStatus === "authenticated");
+
+                            return (
+                              <div
+                                {...(!ready && {
+                                  "aria-hidden": true,
+                                  className: "wallet-hidden",
+                                })}
+                              >
+                                {(() => {
+                                  if (!connected) {
+                                    return (
+                                      <button
+                                        onClick={openConnectModal}
+                                        type="button"
+                                        className="btn-connect-wallet"
+                                      >
+                                        Connect Wallet
+                                      </button>
+                                    );
+                                  }
+
+                                  if (chain.unsupported) {
+                                    return (
+                                      <button
+                                        onClick={openChainModal}
+                                        type="button"
+                                        className="btn-wrong-network"
+                                      >
+                                        Wrong Network
+                                      </button>
+                                    );
+                                  }
+
+                                  return (
+                                    <div className="wallet-connected-container">
+                                      <button
+                                        onClick={openChainModal}
+                                        type="button"
+                                        className="btn-chain-selector"
+                                      >
+                                        {chain.hasIcon && chain.iconUrl && (
+                                          <img
+                                            alt={chain.name ?? "Chain icon"}
+                                            src={chain.iconUrl}
+                                            className="chain-icon"
+                                          />
+                                        )}
+                                        {chain.name}
+                                      </button>
+                                      <button
+                                        onClick={openAccountModal}
+                                        type="button"
+                                        className="btn-account"
+                                      >
+                                        {account.displayName}
+                                      </button>
+                                    </div>
+                                  );
+                                })()}
+                              </div>
+                            );
+                          }}
+                        </ConnectButton.Custom>
+                      </div>
+                      <div className="contract-functions-content">
+                        {/* Read Functions (view/pure) */}
+                        {(() => {
+                          const readFunctions = contractData.abi.filter(
+                            (item: ABI): item is FunctionABI =>
+                              item.type === "function" &&
+                              ((item as FunctionABI).stateMutability === "view" ||
+                                (item as FunctionABI).stateMutability === "pure"),
+                          );
+                          return (
+                            readFunctions.length > 0 && (
+                              <div className="functions-section">
+                                <div className="functions-section-title functions-section-title-read">
+                                  Read Functions ({readFunctions.length})
+                                </div>
+                                <div className="functions-list">
+                                  {readFunctions.map((func: FunctionABI) => (
+                                    <button
+                                      type="button"
+                                      key={func.name}
+                                      onClick={() => {
+                                        setSelectedReadFunction(func);
+                                        setSelectedWriteFunction(null);
+                                        setFunctionInputs({});
+                                        setReadFunctionResult(null);
+                                      }}
+                                      className={`btn-function btn-function-read ${selectedReadFunction?.name === func.name ? "selected" : ""}`}
+                                    >
+                                      {func.name}
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            )
+                          );
+                        })()}
+
+                        {/* Write Functions (payable/nonpayable) */}
+                        {(() => {
+                          const writeFunctions = contractData.abi.filter(
+                            (item: ABI): item is FunctionABI =>
+                              item.type === "function" &&
+                              ((item as FunctionABI).stateMutability === "payable" ||
+                                (item as FunctionABI).stateMutability === "nonpayable" ||
+                                !(item as FunctionABI).stateMutability),
+                          );
+                          return (
+                            writeFunctions.length > 0 && (
+                              <div className="functions-section">
+                                <div className="functions-section-title functions-section-title-write">
+                                  Write Functions ({writeFunctions.length})
+                                </div>
+                                <div className="functions-list">
+                                  {writeFunctions.map((func: FunctionABI) => (
+                                    <button
+                                      type="button"
+                                      key={func.name}
+                                      onClick={() => {
+                                        setSelectedWriteFunction(func);
+                                        setSelectedReadFunction(null);
+                                        setFunctionInputs({});
+                                        setReadFunctionResult(null);
+                                      }}
+                                      className={`btn-function btn-function-write ${selectedWriteFunction?.name === func.name ? "selected" : ""}`}
+                                    >
+                                      {func.name}
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            )
+                          );
+                        })()}
+
+                        {/* Events */}
+                        {contractData.abi.filter((item: ABI) => item.type === "event").length >
+                          0 && (
+                          <div className="functions-section">
+                            <div className="functions-section-title functions-section-title-events">
+                              Events (
+                              {contractData.abi.filter((item: ABI) => item.type === "event").length}
+                              )
+                            </div>
+                            <div className="functions-list">
+                              {contractData.abi
+                                .filter((item: ABI): item is EventABI => item.type === "event")
+                                .slice(0, 10)
+                                .map((event: EventABI) => (
+                                  <span key={event.name} className="event-badge">
+                                    {event.name}
+                                  </span>
+                                ))}
+                              {contractData.abi.filter((item: ABI) => item.type === "event")
+                                .length > 10 && (
+                                <span className="events-more">
+                                  +
+                                  {contractData.abi.filter((item: ABI) => item.type === "event")
+                                    .length - 10}{" "}
+                                  more
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Read Function Form */}
+                        {selectedReadFunction && (
+                          <div className="function-form function-form-read">
+                            <div className="function-form-title function-form-title-read">
+                              {selectedReadFunction.name}
+                            </div>
+
+                            {selectedReadFunction.inputs &&
+                            selectedReadFunction.inputs.length > 0 ? (
+                              <div className="function-inputs">
+                                {selectedReadFunction.inputs.map(
+                                  (input: ABIParameter, idx: number) => (
+                                    <label
+                                      key={`${input.name || idx}-${input.type}`}
+                                      className="function-input-label"
+                                    >
+                                      <span className="function-input-name">
+                                        {input.name || `param${idx}`} ({input.type})
+                                      </span>
+                                      <input
+                                        type="text"
+                                        value={functionInputs[input.name || `param${idx}`] || ""}
+                                        onChange={(e) =>
+                                          setFunctionInputs({
+                                            ...functionInputs,
+                                            [input.name || `param${idx}`]: e.target.value,
+                                          })
+                                        }
+                                        placeholder={`Enter ${input.type}`}
+                                        className="function-input function-input-read"
+                                      />
+                                    </label>
+                                  ),
+                                )}
+                              </div>
+                            ) : (
+                              <div className="function-no-params">No parameters required</div>
+                            )}
+
+                            {/* Read Result */}
+                            {readFunctionResult !== null && (
+                              <div
+                                className={`function-result ${readFunctionResult?.startsWith("Error") ? "function-result-error" : "function-result-success"}`}
+                              >
+                                <div className="function-result-title">
+                                  {readFunctionResult?.startsWith("Error")
+                                    ? "❌ Error"
+                                    : "✅ Result"}
+                                </div>
+                                {readFunctionResult}
+                              </div>
+                            )}
+
+                            <div className="function-actions">
+                              <button
+                                type="button"
+                                onClick={handleReadFunction}
+                                disabled={isReadingFunction}
+                                className="btn-function-action btn-query"
+                              >
+                                {isReadingFunction ? "Reading..." : "Query"}
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setSelectedReadFunction(null);
+                                  setReadFunctionResult(null);
+                                }}
+                                className="btn-cancel"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Write Function Form */}
+                        {selectedWriteFunction && (
+                          <div className="function-form function-form-write">
+                            <div className="function-form-title function-form-title-write">
+                              {selectedWriteFunction.name}
+                              {selectedWriteFunction.stateMutability === "payable" && (
+                                <span className="payable-badge">payable</span>
+                              )}
+                            </div>
+
+                            {selectedWriteFunction.inputs &&
+                            selectedWriteFunction.inputs.length > 0 ? (
+                              <div className="function-inputs">
+                                {selectedWriteFunction.inputs.map(
+                                  (input: ABIParameter, idx: number) => (
+                                    <label
+                                      key={`${input.name || idx}-${input.type}`}
+                                      className="function-input-label"
+                                    >
+                                      <span className="function-input-name">
+                                        {input.name || `param${idx}`} ({input.type})
+                                      </span>
+                                      <input
+                                        type="text"
+                                        value={functionInputs[input.name || `param${idx}`] || ""}
+                                        onChange={(e) =>
+                                          setFunctionInputs({
+                                            ...functionInputs,
+                                            [input.name || `param${idx}`]: e.target.value,
+                                          })
+                                        }
+                                        placeholder={`Enter ${input.type}`}
+                                        className="function-input function-input-write"
+                                      />
+                                    </label>
+                                  ),
+                                )}
+                              </div>
+                            ) : (
+                              <div className="function-no-params">No parameters required</div>
+                            )}
+
+                            {selectedWriteFunction.stateMutability === "payable" && (
+                              <label className="function-input-label">
+                                <span className="function-input-name">Value (ETH)</span>
+                                <input
+                                  type="text"
+                                  // biome-ignore lint/complexity/useLiteralKeys: _value is a special key for ETH value
+                                  value={functionInputs["_value"] || ""}
+                                  onChange={(e) =>
+                                    setFunctionInputs({
+                                      ...functionInputs,
+                                      _value: e.target.value,
+                                    })
+                                  }
+                                  placeholder="0.0"
+                                  className="function-input function-input-value"
+                                />
+                              </label>
+                            )}
+
+                            {/* Transaction Status */}
+                            {(isPending || isConfirming || isConfirmed || isError) && (
+                              <div
+                                className={`tx-status-box ${isError ? "tx-status-error" : isConfirmed ? "tx-status-success" : "tx-status-pending"}`}
+                              >
+                                {isPending && "⏳ Waiting for wallet confirmation..."}
+                                {isConfirming && "⏳ Waiting for transaction confirmation..."}
+                                {isConfirmed && (
+                                  <div>
+                                    ✅ Transaction confirmed!
+                                    {hash && (
+                                      <div className="tx-hash-link">
+                                        <Link to={`/${networkId}/tx/${hash}`}>
+                                          View transaction
+                                        </Link>
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                                {isError && (
+                                  <div>❌ Error: {error?.message || "Transaction failed"}</div>
+                                )}
+                              </div>
+                            )}
+
+                            <div className="function-actions">
+                              <button
+                                type="button"
+                                onClick={handleWriteFunction}
+                                disabled={isPending || isConfirming}
+                                className="btn-function-action btn-write-action"
+                              >
+                                {isPending
+                                  ? "Confirming in Wallet..."
+                                  : isConfirming
+                                    ? "Processing..."
+                                    : "Write"}
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => setSelectedWriteFunction(null)}
+                                className="btn-cancel"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {sourcifyData && (
+                    <div className="tx-row">
+                      <span className="tx-label">Sourcify</span>
+                      <a
+                        href={`https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="sourcify-link"
+                      >
+                        View Full Contract on Sourcify ↗
+                      </a>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Last Transactions Section */}
+          <div className="tx-details">
+            <div className="tx-section tx-history-header">
+              <span className="tx-section-title">Last Transactions</span>
+              {transactionsResult && (
+                <span
+                  className={`tx-history-status ${transactionsResult.source === "trace_filter" ? "tx-history-status-complete" : transactionsResult.source === "logs" ? "tx-history-status-partial" : "tx-history-status-none"}`}
+                >
+                  {transactionsResult.source === "trace_filter" && (
+                    <>
+                      <span className="tx-history-dot">●</span>
+                      Complete history ({transactionDetails.length} transactions)
+                    </>
+                  )}
+                  {transactionsResult.source === "logs" && (
+                    <>
+                      <span className="tx-history-dot">●</span>
+                      Partial (logs only) - {transactionDetails.length} transactions
+                    </>
+                  )}
+                  {transactionsResult.source === "none" && (
+                    <>
+                      <span className="tx-history-dot">●</span>
+                      No data available
+                    </>
+                  )}
+                </span>
+              )}
+            </div>
+
+            {/* Warning message for partial data */}
+            {transactionsResult?.message && (
+              <div
+                className={`tx-history-message ${transactionsResult.source === "none" ? "tx-history-message-error" : "tx-history-message-warning"}`}
+              >
+                <span className="tx-history-message-icon">
+                  {transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
+                </span>
+                {transactionsResult.message}
+              </div>
+            )}
+
+            {/* Loading state */}
+            {loadingTxDetails && (
+              <div className="tx-history-empty">Loading transaction details...</div>
+            )}
+
+            {/* Transaction table */}
+            {!loadingTxDetails && transactionDetails.length > 0 && (
+              <div className="address-table-container">
+                <table className="recent-transactions-table">
+                  <thead>
+                    <tr>
+                      <th>TX Hash</th>
+                      {contractData && <th>Method</th>}
+                      <th>From</th>
+                      <th>To</th>
+                      <th>Value</th>
+                      <th>Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {transactionDetails.map((tx) => (
+                      <tr key={tx.hash}>
+                        <td>
+                          <Link to={`/${networkId}/tx/${tx.hash}`} className="address-table-link">
+                            {truncate(tx.hash, 8, 6)}
+                          </Link>
+                        </td>
+                        {contractData && (
+                          <td>
+                            {tx.to?.toLowerCase() === addressHash.toLowerCase() ? (
+                              (() => {
+                                const funcName = decodeFunctionName(tx.data);
+                                const selector = tx.data?.slice(0, 10);
+                                return funcName ? (
+                                  <span className="method-badge method-badge-decoded">
+                                    {funcName}
+                                  </span>
+                                ) : selector && selector !== "0x" ? (
+                                  <span
+                                    className="method-badge method-badge-selector"
+                                    title={selector}
+                                  >
+                                    {selector}
+                                  </span>
+                                ) : (
+                                  <span className="method-badge method-badge-transfer">
+                                    Transfer
+                                  </span>
+                                );
+                              })()
+                            ) : !tx.data || tx.data === "0x" ? (
+                              <span className="method-badge method-badge-transfer">Transfer</span>
+                            ) : (
+                              <span
+                                className="method-badge method-badge-selector"
+                                title={tx.data?.slice(0, 10)}
+                              >
+                                {tx.data?.slice(0, 10)}
+                              </span>
+                            )}
+                          </td>
+                        )}
+                        <td>
+                          <Link
+                            to={`/${networkId}/address/${tx.from}`}
+                            className="address-table-link"
+                          >
+                            {tx.from?.toLowerCase() === addressHash.toLowerCase()
+                              ? "This Address"
+                              : truncate(tx.from || "", 6, 4)}
+                          </Link>
+                        </td>
+                        <td>
+                          {tx.to ? (
+                            <Link
+                              to={`/${networkId}/address/${tx.to}`}
+                              className={`tx-table-to-link ${tx.to?.toLowerCase() === addressHash.toLowerCase() ? "tx-table-to-link-self" : "tx-table-to-link-other"}`}
+                            >
+                              {tx.to?.toLowerCase() === addressHash.toLowerCase()
+                                ? "This Address"
+                                : truncate(tx.to, 6, 4)}
+                            </Link>
+                          ) : (
+                            <span className="contract-creation-badge">Contract Creation</span>
+                          )}
+                        </td>
+                        <td>
+                          <span className="address-table-value">{formatValue(tx.value)}</span>
+                        </td>
+                        <td>
+                          {tx.receipt?.status === "0x1" ? (
+                            <span className="table-status-badge table-status-success">
+                              ✓ Success
+                            </span>
+                          ) : tx.receipt?.status === "0x0" ? (
+                            <span className="table-status-badge table-status-failed">✗ Failed</span>
+                          ) : (
+                            <span className="table-status-badge table-status-pending">
+                              ⏳ Pending
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* Empty state */}
+            {!loadingTxDetails &&
+              transactionDetails.length === 0 &&
+              !transactionsResult?.message && (
+                <div className="tx-history-empty">No transactions found for this address</div>
+              )}
+          </div>
+
+          {/* Storage Section (for contracts) */}
+          {isContract && (
+            <div className="block-display-card">
+              <div className="block-display-header">
+                <span className="block-label">Contract Storage</span>
+              </div>
+              <div className="tx-details">
+                <div className="tx-row">
+                  <span className="tx-label">Storage Slot:</span>
+                  <span className="tx-value">
+                    <div className="storage-input-row">
+                      <input
+                        type="text"
+                        placeholder="e.g., 0x0"
+                        value={storageSlot}
+                        onChange={(e) => setStorageSlot(e.target.value)}
+                        className="storage-input"
+                      />
+                      <button type="button" onClick={handleGetStorage} className="storage-button">
+                        Get
+                      </button>
+                    </div>
+                  </span>
+                </div>
+                {storageValue && (
+                  <div className="tx-row">
+                    <span className="tx-label">Value:</span>
+                    <span className="tx-value">
+                      <div className="storage-value-display">{storageValue}</div>
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+AddressDisplay.displayName = "AddressDisplay";
+
+export default AddressDisplay;
diff --git a/src/components/pages/address/displays/AccountDisplay.tsx b/src/components/pages/address/displays/AccountDisplay.tsx
index 87de4d1c..98ee6c73 100644
--- a/src/components/pages/address/displays/AccountDisplay.tsx
+++ b/src/components/pages/address/displays/AccountDisplay.tsx
@@ -8,7 +8,7 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 import { AddressHeader, BalanceSection, TransactionHistory } from "../shared";
 
 interface AccountDisplayProps {
@@ -64,7 +64,7 @@ const AccountDisplay: React.FC<AccountDisplayProps> = ({
 
         {/* ENS Records Section */}
         {(ensName || reverseResult?.ensName || ensLoading) && (
-          <ENSRecordsDisplay
+          <ENSRecordsDetails
             ensName={ensName || null}
             reverseResult={reverseResult}
             records={ensRecords}
diff --git a/src/components/pages/address/displays/ContractDisplay.tsx b/src/components/pages/address/displays/ContractDisplay.tsx
index 53a5e8eb..8a83ea1a 100644
--- a/src/components/pages/address/displays/ContractDisplay.tsx
+++ b/src/components/pages/address/displays/ContractDisplay.tsx
@@ -11,7 +11,7 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDisplay from "../ENSRecordsDisplay";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
 
 interface ContractDisplayProps {
@@ -187,7 +187,7 @@ const ContractDisplay: React.FC<ContractDisplayProps> = ({
 
         {/* ENS Records Section */}
         {(ensName || reverseResult?.ensName || ensLoading) && (
-          <ENSRecordsDisplay
+          <ENSRecordsDetails
             ensName={ensName || null}
             reverseResult={reverseResult}
             records={ensRecords}
diff --git a/src/components/pages/address/displays/ERC1155Display.tsx b/src/components/pages/address/displays/ERC1155Display.tsx
index 56e85c46..422eff51 100644
--- a/src/components/pages/address/displays/ERC1155Display.tsx
+++ b/src/components/pages/address/displays/ERC1155Display.tsx
@@ -1,8 +1,10 @@
 import type React from "react";
 import { useContext, useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import { AppContext } from "../../../../context";
 import { useSourcify } from "../../../../hooks/useSourcify";
 import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import { decodeAbiString } from "../../../../utils/hexUtils";
 import type {
   Address,
   AddressTransactionsResult,
@@ -12,8 +14,8 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDisplay from "../ENSRecordsDisplay";
-import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
 
 interface ERC1155DisplayProps {
   address: Address;
@@ -55,7 +57,10 @@ const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
   const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
   const [onChainData, setOnChainData] = useState<{
     uri?: string;
+    name?: string;
+    symbol?: string;
   } | null>(null);
+  const [tokenIdInput, setTokenIdInput] = useState("");
 
   // Fetch Sourcify data
   const {
@@ -79,6 +84,38 @@ const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
       const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
       if (!rpcUrl) return;
 
+      const results: { uri?: string; name?: string; symbol?: string } = {};
+
+      // Fetch name and symbol
+      const calls = [
+        { selector: "0x06fdde03", key: "name" }, // name()
+        { selector: "0x95d89b41", key: "symbol" }, // symbol()
+      ];
+
+      for (const call of calls) {
+        try {
+          const response = await fetch(rpcUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              jsonrpc: "2.0",
+              method: "eth_call",
+              params: [{ to: addressHash, data: call.selector }, "latest"],
+              id: 1,
+            }),
+          });
+          const data = await response.json();
+          if (!data.error && data.result && data.result !== "0x") {
+            const decoded = decodeAbiString(data.result);
+            if (decoded) {
+              results[call.key as "name" | "symbol"] = decoded;
+            }
+          }
+        } catch {
+          // Continue
+        }
+      }
+
       // Try to get URI for token ID 0 as a sample
       // uri(uint256) with tokenId = 0
       const uriSelector =
@@ -97,19 +134,18 @@ const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
         });
         const data = await response.json();
         if (!data.error && data.result && data.result !== "0x") {
-          // Decode string
-          const hex = data.result.slice(2);
-          if (hex.length >= 128) {
-            const lengthHex = hex.slice(64, 128);
-            const length = parseInt(lengthHex, 16);
-            const strHex = hex.slice(128, 128 + length * 2);
-            const uri = Buffer.from(strHex, "hex").toString("utf8");
-            setOnChainData({ uri });
+          const uri = decodeAbiString(data.result);
+          if (uri) {
+            results.uri = uri;
           }
         }
       } catch {
         // Continue
       }
+
+      if (Object.keys(results).length > 0) {
+        setOnChainData(results);
+      }
     };
 
     fetchOnChainData();
@@ -157,8 +193,8 @@ const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
   const hasVerifiedContract = isVerified || parsedLocalData;
 
   // Combine token data
-  const collectionName = tokenMetadata?.name || contractData?.name;
-  const collectionSymbol = tokenMetadata?.symbol;
+  const collectionName = tokenMetadata?.name || onChainData?.name || contractData?.name;
+  const collectionSymbol = tokenMetadata?.symbol || onChainData?.symbol;
   const collectionLogo = tokenMetadata?.logo
     ? getAssetUrl(tokenMetadata.logo)
     : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
@@ -217,7 +253,7 @@ const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
             <div className="tx-row">
               <span className="tx-label">Metadata URI:</span>
               <span className="tx-value">
-                <span className="tx-mono" style={{ wordBreak: "break-all" }}>
+                <span className="tx-mono word-break-all">
                   {onChainData.uri.length > 60
                     ? `${onChainData.uri.slice(0, 60)}...`
                     : onChainData.uri}
@@ -275,9 +311,38 @@ const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
           </div>
         </div>
 
+        {/* Token ID Lookup */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">View Token</span>
+          </div>
+          <div className="erc1155-token-lookup">
+            <div className="erc1155-token-lookup-row">
+              <input
+                type="text"
+                placeholder="Enter Token ID"
+                value={tokenIdInput}
+                onChange={(e) => setTokenIdInput(e.target.value)}
+                className="erc1155-token-input"
+              />
+              <Link
+                to={tokenIdInput ? `/${networkId}/address/${addressHash}/${tokenIdInput}` : "#"}
+                className={`erc1155-view-button ${!tokenIdInput ? "disabled" : ""}`}
+                onClick={(e) => {
+                  if (!tokenIdInput) {
+                    e.preventDefault();
+                  }
+                }}
+              >
+                View Token
+              </Link>
+            </div>
+          </div>
+        </div>
+
         {/* ENS Records Section */}
         {(ensName || reverseResult?.ensName || ensLoading) && (
-          <ENSRecordsDisplay
+          <ENSRecordsDetails
             ensName={ensName || null}
             reverseResult={reverseResult}
             records={ensRecords}
diff --git a/src/components/pages/address/displays/ERC20Display.tsx b/src/components/pages/address/displays/ERC20Display.tsx
index f8f11cc3..0f41f12e 100644
--- a/src/components/pages/address/displays/ERC20Display.tsx
+++ b/src/components/pages/address/displays/ERC20Display.tsx
@@ -12,8 +12,8 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDisplay from "../ENSRecordsDisplay";
-import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
 
 interface ERC20DisplayProps {
   address: Address;
@@ -325,7 +325,7 @@ const ERC20Display: React.FC<ERC20DisplayProps> = ({
 
         {/* ENS Records Section */}
         {(ensName || reverseResult?.ensName || ensLoading) && (
-          <ENSRecordsDisplay
+          <ENSRecordsDetails
             ensName={ensName || null}
             reverseResult={reverseResult}
             records={ensRecords}
diff --git a/src/components/pages/address/displays/ERC721Display.tsx b/src/components/pages/address/displays/ERC721Display.tsx
index 13e7c747..ae7c957e 100644
--- a/src/components/pages/address/displays/ERC721Display.tsx
+++ b/src/components/pages/address/displays/ERC721Display.tsx
@@ -1,8 +1,10 @@
 import type React from "react";
 import { useContext, useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import { AppContext } from "../../../../context";
 import { useSourcify } from "../../../../hooks/useSourcify";
 import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import { decodeAbiString } from "../../../../utils/hexUtils";
 import type {
   Address,
   AddressTransactionsResult,
@@ -12,8 +14,8 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDisplay from "../ENSRecordsDisplay";
-import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
 
 interface ERC721DisplayProps {
   address: Address;
@@ -58,6 +60,7 @@ const ERC721Display: React.FC<ERC721DisplayProps> = ({
     symbol?: string;
     totalSupply?: string;
   } | null>(null);
+  const [tokenIdInput, setTokenIdInput] = useState("");
 
   // Fetch Sourcify data
   const {
@@ -113,26 +116,11 @@ const ERC721Display: React.FC<ERC721DisplayProps> = ({
       // Decode results
       const decoded: typeof onChainData = {};
 
-      const decodeString = (hex: string): string => {
-        try {
-          const data = hex.slice(2);
-          if (data.length >= 128) {
-            const lengthHex = data.slice(64, 128);
-            const length = parseInt(lengthHex, 16);
-            const strHex = data.slice(128, 128 + length * 2);
-            return Buffer.from(strHex, "hex").toString("utf8");
-          }
-          return "";
-        } catch {
-          return "";
-        }
-      };
-
       if (results.name) {
-        decoded.name = decodeString(results.name);
+        decoded.name = decodeAbiString(results.name);
       }
       if (results.symbol) {
-        decoded.symbol = decodeString(results.symbol);
+        decoded.symbol = decodeAbiString(results.symbol);
       }
       if (results.totalSupply) {
         decoded.totalSupply = BigInt(results.totalSupply).toString();
@@ -299,9 +287,38 @@ const ERC721Display: React.FC<ERC721DisplayProps> = ({
           </div>
         </div>
 
+        {/* Token ID Lookup */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">View NFT</span>
+          </div>
+          <div className="erc721-token-lookup">
+            <div className="erc721-token-lookup-row">
+              <input
+                type="text"
+                placeholder="Enter Token ID"
+                value={tokenIdInput}
+                onChange={(e) => setTokenIdInput(e.target.value)}
+                className="erc721-token-input"
+              />
+              <Link
+                to={tokenIdInput ? `/${networkId}/address/${addressHash}/${tokenIdInput}` : "#"}
+                className={`erc721-view-button ${!tokenIdInput ? "disabled" : ""}`}
+                onClick={(e) => {
+                  if (!tokenIdInput) {
+                    e.preventDefault();
+                  }
+                }}
+              >
+                View NFT
+              </Link>
+            </div>
+          </div>
+        </div>
+
         {/* ENS Records Section */}
         {(ensName || reverseResult?.ensName || ensLoading) && (
-          <ENSRecordsDisplay
+          <ENSRecordsDetails
             ensName={ensName || null}
             reverseResult={reverseResult}
             records={ensRecords}
diff --git a/src/components/pages/address/ENSRecordsDisplay.tsx b/src/components/pages/address/shared/ENSRecordsDisplay.tsx
similarity index 99%
rename from src/components/pages/address/ENSRecordsDisplay.tsx
rename to src/components/pages/address/shared/ENSRecordsDisplay.tsx
index 7906ee21..b94cf749 100644
--- a/src/components/pages/address/ENSRecordsDisplay.tsx
+++ b/src/components/pages/address/shared/ENSRecordsDisplay.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
 import { useState } from "react";
-import type { DecodedContenthash, ENSRecords, ENSReverseResult } from "../../../types";
+import type { DecodedContenthash, ENSRecords, ENSReverseResult } from "../../../../types";
 
 interface ENSRecordsDisplayProps {
   ensName: string | null;
diff --git a/src/components/pages/address/shared/index.ts b/src/components/pages/address/shared/index.ts
index 62924b31..1b0b46f6 100644
--- a/src/components/pages/address/shared/index.ts
+++ b/src/components/pages/address/shared/index.ts
@@ -4,3 +4,4 @@ export { default as ContractDetails } from "./ContractDetails";
 export { default as ContractInteraction } from "./ContractInteraction";
 export { default as ContractStorage } from "./ContractStorage";
 export { default as TransactionHistory } from "./TransactionHistory";
+export { default as ENSRecordsDisplay } from "./ENSRecordsDisplay";
\ No newline at end of file
diff --git a/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx b/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
new file mode 100644
index 00000000..6d5a2f98
--- /dev/null
+++ b/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
@@ -0,0 +1,387 @@
+import type React from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import {
+  fetchCollectionInfo,
+  fetchERC1155MetadataWithUri,
+  fetchTokenBalance,
+  getImageUrl,
+  type CollectionInfo,
+  type ERC1155TokenMetadata,
+} from "../../../utils/erc1155Metadata";
+import Loader from "../../common/Loader";
+
+const ERC1155TokenDetails: React.FC = () => {
+  const {
+    networkId,
+    address: contractAddress,
+    tokenId,
+  } = useParams<{
+    networkId?: string;
+    address?: string;
+    tokenId?: string;
+  }>();
+
+  const { rpcUrls } = useContext(AppContext);
+  const [metadata, setMetadata] = useState<ERC1155TokenMetadata | null>(null);
+  const [collectionInfo, setCollectionInfo] = useState<CollectionInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tokenUri, setTokenUri] = useState<string | null>(null);
+
+  // Balance lookup state
+  const [balanceAddress, setBalanceAddress] = useState("");
+  const [balance, setBalance] = useState<string | null>(null);
+  const [balanceLoading, setBalanceLoading] = useState(false);
+  const [balanceError, setBalanceError] = useState<string | null>(null);
+
+  const numericNetworkId = Number(networkId) || 1;
+
+  // Get RPC URL
+  const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+  const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+  // Fetch token metadata
+  useEffect(() => {
+    if (!contractAddress || !tokenId || !rpcUrl) {
+      setLoading(false);
+      setError("Missing contract address, token ID, or RPC URL");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    Promise.all([
+      fetchERC1155MetadataWithUri(contractAddress, tokenId, rpcUrl),
+      fetchCollectionInfo(contractAddress, rpcUrl),
+    ])
+      .then(([metadataResult, collectionResult]) => {
+        if (metadataResult.metadata) {
+          setMetadata(metadataResult.metadata);
+        } else {
+          setError("Failed to fetch token metadata");
+        }
+        setTokenUri(metadataResult.tokenUri);
+        setCollectionInfo(collectionResult);
+      })
+      .catch((err) => {
+        console.error("Error fetching metadata:", err);
+        setError(err.message || "Failed to fetch token metadata");
+      })
+      .finally(() => setLoading(false));
+  }, [contractAddress, tokenId, rpcUrl]);
+
+  // Handle balance lookup
+  const handleBalanceLookup = useCallback(async () => {
+    if (!balanceAddress || !contractAddress || !tokenId || !rpcUrl) {
+      setBalanceError("Please enter a valid address");
+      return;
+    }
+
+    // Validate address format
+    if (!/^0x[a-fA-F0-9]{40}$/.test(balanceAddress)) {
+      setBalanceError("Invalid address format");
+      return;
+    }
+
+    setBalanceLoading(true);
+    setBalanceError(null);
+    setBalance(null);
+
+    try {
+      const result = await fetchTokenBalance(contractAddress, balanceAddress, tokenId, rpcUrl);
+      if (result !== null) {
+        setBalance(result);
+      } else {
+        setBalanceError("Failed to fetch balance");
+      }
+    } catch (err) {
+      setBalanceError(err instanceof Error ? err.message : "Failed to fetch balance");
+    } finally {
+      setBalanceLoading(false);
+    }
+  }, [balanceAddress, contractAddress, tokenId, rpcUrl]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-1155 Token</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading token metadata..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-1155 Token</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const imageUrl = metadata ? getImageUrl(metadata) : null;
+  // Token name from metadata, collection name from contract
+  const tokenName = metadata?.name;
+  const collectionName = collectionInfo?.name;
+  const collectionSymbol = collectionInfo?.symbol;
+
+  return (
+    <div className="container-wide">
+      <div className="block-display-card">
+        {/* Header Section */}
+        <div className="block-display-header">
+          <div className="erc1155-header">
+            {/* Token name */}
+            {tokenName && <span className="erc1155-token-name">{tokenName}</span>}
+            {/* Collection name with symbol and Token ID on same line */}
+            <div className="erc1155-header-title">
+              {collectionName && (
+                <Link
+                  to={`/${networkId}/address/${contractAddress}`}
+                  className="nft-collection-link"
+                >
+                  {collectionName}
+                  {collectionSymbol && (
+                    <span className="nft-collection-symbol">({collectionSymbol})</span>
+                  )}
+                </Link>
+              )}
+              <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="erc1155-detail-content">
+          {/* Token Image and Basic Info */}
+          <div className="erc1155-main-section">
+            {imageUrl && (
+              <div className="erc1155-image-container">
+                <img
+                  src={imageUrl}
+                  alt={tokenName || `Token #${tokenId}`}
+                  className="erc1155-token-image"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              </div>
+            )}
+
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Token Details</span>
+              </div>
+
+              {/* Collection */}
+              {collectionName && (
+                <div className="tx-row">
+                  <span className="tx-label">Collection:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                      {collectionName}
+                      {collectionSymbol && ` (${collectionSymbol})`}
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* Contract Address */}
+              <div className="tx-row">
+                <span className="tx-label">Contract:</span>
+                <span className="tx-value">
+                  <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                    {contractAddress}
+                  </Link>
+                </span>
+              </div>
+
+              {/* Token ID */}
+              <div className="tx-row">
+                <span className="tx-label">Token ID:</span>
+                <span className="tx-value tx-mono">{tokenId}</span>
+              </div>
+
+              {/* Token Standard */}
+              <div className="tx-row">
+                <span className="tx-label">Token Standard:</span>
+                <span className="tx-value">
+                  <span className="token-standard-badge token-standard-erc1155">ERC-1155</span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Description Section */}
+          {metadata?.description && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Description</span>
+              </div>
+              <div className="nft-description">{metadata.description}</div>
+            </div>
+          )}
+
+          {/* Properties/Attributes Section */}
+          {metadata?.attributes && metadata.attributes.length > 0 && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Properties</span>
+                <span className="tx-section-count">{metadata.attributes.length}</span>
+              </div>
+              <div className="erc1155-attributes-grid">
+                {metadata.attributes.map((attr, index) => (
+                  <div key={`${attr.trait_type}-${index}`} className="erc1155-attribute-card">
+                    <span className="erc1155-attribute-type">{attr.trait_type}</span>
+                    <span className="erc1155-attribute-value">{String(attr.value)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Balance Lookup Section */}
+          <div className="tx-details">
+            <div className="tx-section">
+              <span className="tx-section-title">Balance Lookup</span>
+            </div>
+            <div className="erc1155-balance-lookup">
+              <div className="erc1155-balance-input-row">
+                <input
+                  type="text"
+                  placeholder="Enter address (0x...)"
+                  value={balanceAddress}
+                  onChange={(e) => setBalanceAddress(e.target.value)}
+                  className="erc1155-balance-input"
+                />
+                <button
+                  type="button"
+                  onClick={handleBalanceLookup}
+                  disabled={balanceLoading}
+                  className="erc1155-balance-button"
+                >
+                  {balanceLoading ? "Checking..." : "Check Balance"}
+                </button>
+              </div>
+
+              {balanceError && <div className="erc1155-balance-error">{balanceError}</div>}
+
+              {balance !== null && (
+                <div className="erc1155-balance-result">
+                  <span className="erc1155-balance-label">Balance:</span>
+                  <span className="erc1155-balance-value">{balance}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Links Section */}
+          {(metadata?.external_url || metadata?.animation_url) && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Links</span>
+              </div>
+              <div className="nft-links">
+                {metadata?.external_url && (
+                  <a
+                    href={metadata.external_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    External URL ↗
+                  </a>
+                )}
+                {metadata?.animation_url && (
+                  <a
+                    href={
+                      metadata.animation_url.startsWith("ipfs://")
+                        ? metadata.animation_url.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : metadata.animation_url
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    View Animation ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Token URI Section */}
+          {tokenUri && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Token URI</span>
+              </div>
+              <div className="nft-token-uri">
+                <code className="nft-token-uri-code">{tokenUri}</code>
+                {!tokenUri.startsWith("data:") && (
+                  <a
+                    href={
+                      tokenUri.startsWith("ipfs://")
+                        ? tokenUri.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : tokenUri
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button nft-token-uri-link"
+                  >
+                    Open URI ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Raw Metadata Section */}
+          {metadata && (
+            <div className="tx-details">
+              <button
+                type="button"
+                className="tx-section btn-toggle-section"
+                onClick={() => {
+                  const elem = document.getElementById("raw-metadata-content");
+                  const icon = document.getElementById("raw-metadata-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-section-title">Raw Metadata</span>
+                <span id="raw-metadata-icon" className="contract-section-toggle">
+                  ▶
+                </span>
+              </button>
+              <div id="raw-metadata-content" className="tx-input-data hidden">
+                <code>{JSON.stringify(metadata, null, 2)}</code>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ERC1155TokenDetails;
diff --git a/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx b/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
new file mode 100644
index 00000000..0ff8755e
--- /dev/null
+++ b/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
@@ -0,0 +1,359 @@
+import type React from "react";
+import { useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import {
+  fetchCollectionInfo,
+  fetchERC721MetadataWithUri,
+  fetchTokenApproval,
+  fetchTokenOwner,
+  getImageUrl,
+  type CollectionInfo,
+  type ERC721TokenMetadata,
+} from "../../../utils/erc721Metadata";
+import Loader from "../../common/Loader";
+
+const ERC721TokenDisplay: React.FC = () => {
+  const {
+    networkId,
+    address: contractAddress,
+    tokenId,
+  } = useParams<{
+    networkId?: string;
+    address?: string;
+    tokenId?: string;
+  }>();
+
+  const { rpcUrls } = useContext(AppContext);
+  const [metadata, setMetadata] = useState<ERC721TokenMetadata | null>(null);
+  const [collectionInfo, setCollectionInfo] = useState<CollectionInfo | null>(null);
+  const [owner, setOwner] = useState<string | null>(null);
+  const [approval, setApproval] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tokenUri, setTokenUri] = useState<string | null>(null);
+
+  const numericNetworkId = Number(networkId) || 1;
+
+  // Get RPC URL
+  const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+  const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+  // Fetch token metadata and ownership info
+  useEffect(() => {
+    if (!contractAddress || !tokenId || !rpcUrl) {
+      setLoading(false);
+      setError("Missing contract address, token ID, or RPC URL");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    Promise.all([
+      fetchERC721MetadataWithUri(contractAddress, tokenId, rpcUrl),
+      fetchTokenOwner(contractAddress, tokenId, rpcUrl),
+      fetchTokenApproval(contractAddress, tokenId, rpcUrl),
+      fetchCollectionInfo(contractAddress, rpcUrl),
+    ])
+      .then(([metadataResult, ownerResult, approvalResult, collectionResult]) => {
+        if (metadataResult.metadata) {
+          setMetadata(metadataResult.metadata);
+        }
+        setTokenUri(metadataResult.tokenUri);
+        setOwner(ownerResult);
+        setApproval(approvalResult);
+        setCollectionInfo(collectionResult);
+
+        // Only show error if we couldn't get metadata AND owner
+        if (!metadataResult.metadata && !ownerResult) {
+          setError("Token may not exist or failed to fetch data");
+        }
+      })
+      .catch((err) => {
+        console.error("Error fetching token data:", err);
+        setError(err.message || "Failed to fetch token data");
+      })
+      .finally(() => setLoading(false));
+  }, [contractAddress, tokenId, rpcUrl]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-721 NFT</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading NFT metadata..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !owner) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-721 NFT</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const imageUrl = metadata ? getImageUrl(metadata) : null;
+  // Token name from metadata, collection name from contract
+  const tokenName = metadata?.name;
+  const collectionName = collectionInfo?.name;
+  const collectionSymbol = collectionInfo?.symbol;
+
+  return (
+    <div className="container-wide">
+      <div className="block-display-card">
+        {/* Header Section */}
+        <div className="block-display-header">
+          <div className="erc721-header">
+            {/* Token name */}
+            {tokenName && <span className="erc721-token-name">{tokenName}</span>}
+            {/* Collection name with symbol and Token ID on same line */}
+            <div className="erc721-header-title">
+              {collectionName && (
+                <Link
+                  to={`/${networkId}/address/${contractAddress}`}
+                  className="nft-collection-link"
+                >
+                  {collectionName}
+                  {collectionSymbol && (
+                    <span className="nft-collection-symbol">({collectionSymbol})</span>
+                  )}
+                </Link>
+              )}
+              <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="erc721-detail-content">
+          {/* Token Image and Basic Info */}
+          <div className="erc721-main-section">
+            {imageUrl && (
+              <div className="erc721-image-container">
+                <img
+                  src={imageUrl}
+                  alt={tokenName || `NFT #${tokenId}`}
+                  className="erc721-token-image"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              </div>
+            )}
+
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">NFT Details</span>
+              </div>
+
+              {/* Collection */}
+              {collectionName && (
+                <div className="tx-row">
+                  <span className="tx-label">Collection:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                      {collectionName}
+                      {collectionSymbol && ` (${collectionSymbol})`}
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* Contract Address */}
+              <div className="tx-row">
+                <span className="tx-label">Contract:</span>
+                <span className="tx-value">
+                  <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                    {contractAddress}
+                  </Link>
+                </span>
+              </div>
+
+              {/* Token ID */}
+              <div className="tx-row">
+                <span className="tx-label">Token ID:</span>
+                <span className="tx-value tx-mono">{tokenId}</span>
+              </div>
+
+              {/* Token Standard */}
+              <div className="tx-row">
+                <span className="tx-label">Token Standard:</span>
+                <span className="tx-value">
+                  <span className="token-standard-badge token-standard-erc721">ERC-721</span>
+                </span>
+              </div>
+
+              {/* Total Supply */}
+              {collectionInfo?.totalSupply && (
+                <div className="tx-row">
+                  <span className="tx-label">Collection Size:</span>
+                  <span className="tx-value">
+                    {Number(collectionInfo.totalSupply).toLocaleString()} NFTs
+                  </span>
+                </div>
+              )}
+
+              {/* Owner */}
+              {owner && (
+                <div className="tx-row">
+                  <span className="tx-label">Owner:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${owner}`} className="address-link">
+                      {owner}
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* Approved Address */}
+              {approval && (
+                <div className="tx-row">
+                  <span className="tx-label">Approved:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${approval}`} className="address-link">
+                      {approval}
+                    </Link>
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Description Section */}
+          {metadata?.description && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Description</span>
+              </div>
+              <div className="nft-description">{metadata.description}</div>
+            </div>
+          )}
+
+          {/* Properties/Attributes Section */}
+          {metadata?.attributes && metadata.attributes.length > 0 && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Properties</span>
+                <span className="tx-section-count">{metadata.attributes.length}</span>
+              </div>
+              <div className="erc721-attributes-grid">
+                {metadata.attributes.map((attr, index) => (
+                  <div key={`${attr.trait_type}-${index}`} className="erc721-attribute-card">
+                    <span className="erc721-attribute-type">{attr.trait_type}</span>
+                    <span className="erc721-attribute-value">{String(attr.value)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Additional Details */}
+          {(metadata?.external_url || metadata?.animation_url) && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Links</span>
+              </div>
+              <div className="nft-links">
+                {metadata?.external_url && (
+                  <a
+                    href={metadata.external_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    External URL ↗
+                  </a>
+                )}
+                {metadata?.animation_url && (
+                  <a
+                    href={
+                      metadata.animation_url.startsWith("ipfs://")
+                        ? metadata.animation_url.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : metadata.animation_url
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    View Animation ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Token URI Section */}
+          {tokenUri && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Token URI</span>
+              </div>
+              <div className="nft-token-uri">
+                <code className="nft-token-uri-code">{tokenUri}</code>
+                {!tokenUri.startsWith("data:") && (
+                  <a
+                    href={
+                      tokenUri.startsWith("ipfs://")
+                        ? tokenUri.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : tokenUri
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button nft-token-uri-link"
+                  >
+                    Open URI ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Raw Metadata Section */}
+          {metadata && (
+            <div className="tx-details">
+              <button
+                type="button"
+                className="tx-section btn-toggle-section"
+                onClick={() => {
+                  const elem = document.getElementById("raw-metadata-content");
+                  const icon = document.getElementById("raw-metadata-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-section-title">Raw Metadata</span>
+                <span id="raw-metadata-icon" className="contract-section-toggle">
+                  ▶
+                </span>
+              </button>
+              <div id="raw-metadata-content" className="tx-input-data hidden">
+                <code>{JSON.stringify(metadata, null, 2)}</code>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ERC721TokenDisplay;
diff --git a/src/components/pages/tokenDetails/index.tsx b/src/components/pages/tokenDetails/index.tsx
new file mode 100644
index 00000000..70a243aa
--- /dev/null
+++ b/src/components/pages/tokenDetails/index.tsx
@@ -0,0 +1,140 @@
+import type React from "react";
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import Loader from "../../common/Loader";
+import ERC721TokenDetails from "./ERC721TokenDisplay";
+import ERC1155TokenDetails from "./ERC1155TokenDisplay";
+
+type NFTType = "erc721" | "erc1155" | "unknown";
+
+/**
+ * Check if contract supports ERC721 (interface ID: 0x80ac58cd)
+ */
+async function supportsERC721(contractAddress: string, rpcUrl: string): Promise<boolean> {
+  try {
+    // supportsInterface(bytes4) selector: 0x01ffc9a7
+    // ERC721 interface ID: 0x80ac58cd
+    const data = "0x01ffc9a780ac58cd00000000000000000000000000000000000000000000000000000000";
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+    if (result.error || !result.result) return false;
+
+    // Check if result is true (non-zero)
+    return result.result !== "0x" && BigInt(result.result) === BigInt(1);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if contract supports ERC1155 (interface ID: 0xd9b67a26)
+ */
+async function supportsERC1155(contractAddress: string, rpcUrl: string): Promise<boolean> {
+  try {
+    // supportsInterface(bytes4) selector: 0x01ffc9a7
+    // ERC1155 interface ID: 0xd9b67a26
+    const data = "0x01ffc9a7d9b67a2600000000000000000000000000000000000000000000000000000000";
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+    if (result.error || !result.result) return false;
+
+    // Check if result is true (non-zero)
+    return result.result !== "0x" && BigInt(result.result) === BigInt(1);
+  } catch {
+    return false;
+  }
+}
+
+const NFTTokenDetails: React.FC = () => {
+  const { networkId, address: contractAddress } = useParams<{
+    networkId?: string;
+    address?: string;
+    tokenId?: string;
+  }>();
+
+  const { rpcUrls } = useContext(AppContext);
+  const [nftType, setNftType] = useState<NFTType | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const numericNetworkId = Number(networkId) || 1;
+
+  // Get RPC URL
+  const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+  const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+  // Detect NFT type
+  useEffect(() => {
+    if (!contractAddress || !rpcUrl) {
+      setNftType("unknown");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+
+    Promise.all([supportsERC721(contractAddress, rpcUrl), supportsERC1155(contractAddress, rpcUrl)])
+      .then(([isERC721, isERC1155]) => {
+        if (isERC721) {
+          setNftType("erc721");
+        } else if (isERC1155) {
+          setNftType("erc1155");
+        } else {
+          // Fallback: try ERC721 first (more common for individual token pages)
+          setNftType("erc721");
+        }
+      })
+      .catch(() => {
+        // Default to ERC721 on error
+        setNftType("erc721");
+      })
+      .finally(() => setLoading(false));
+  }, [contractAddress, rpcUrl]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">NFT Token</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Detecting token type..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Render appropriate component based on detected type
+  if (nftType === "erc1155") {
+    return <ERC1155TokenDetails />;
+  }
+
+  // Default to ERC721
+  return <ERC721TokenDetails />;
+};
+
+export default NFTTokenDetails;
diff --git a/src/styles/components.css b/src/styles/components.css
index a3f17553..1363ea43 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1,5 +1,14 @@
 /* Reusable Component Styles */
 
+/* Utility Classes */
+.hidden {
+	display: none;
+}
+
+.word-break-all {
+	word-break: break-all;
+}
+
 /* Transaction Details - Row-based layout (Etherscan style) */
 .tx-details {
 	display: flex;
@@ -3874,3 +3883,540 @@
 	color: #ec4899;
 }
 
+/* ERC1155 Token Detail Page */
+.erc1155-header {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.erc1155-header-title {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.erc1155-token-name {
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--text-color, #1f2937);
+}
+
+.erc1155-detail-content {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+}
+
+.erc1155-main-section {
+	display: flex;
+	gap: 24px;
+	flex-wrap: wrap;
+}
+
+.erc1155-image-container {
+	flex-shrink: 0;
+	width: 300px;
+	max-width: 100%;
+}
+
+.erc1155-token-image {
+	width: 100%;
+	height: auto;
+	border-radius: 12px;
+	object-fit: cover;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.erc1155-main-section .tx-details {
+	flex: 1;
+	min-width: 300px;
+}
+
+/* Attributes Grid */
+.erc1155-attributes-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: 12px;
+	padding: 16px;
+}
+
+.erc1155-attribute-card {
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+	background: rgba(236, 72, 153, 0.05);
+	border: 1px solid rgba(236, 72, 153, 0.2);
+	border-radius: 8px;
+	text-align: center;
+}
+
+.erc1155-attribute-type {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: #ec4899;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin-bottom: 4px;
+}
+
+.erc1155-attribute-value {
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: var(--text-color, #1f2937);
+	word-break: break-word;
+}
+
+/* Balance Lookup */
+.erc1155-balance-lookup {
+	padding: 16px;
+}
+
+.erc1155-balance-input-row {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.erc1155-balance-input {
+	flex: 1;
+	min-width: 250px;
+	padding: 10px 14px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-family: monospace;
+	background: var(--bg-color, #fff);
+	color: var(--text-color, #1f2937);
+}
+
+.erc1155-balance-input:focus {
+	outline: none;
+	border-color: #ec4899;
+	box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
+}
+
+.erc1155-balance-button {
+	padding: 10px 20px;
+	background: #ec4899;
+	color: white;
+	border: none;
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.2s;
+}
+
+.erc1155-balance-button:hover {
+	background: #db2777;
+}
+
+.erc1155-balance-button:disabled {
+	background: #9ca3af;
+	cursor: not-allowed;
+}
+
+.erc1155-balance-error {
+	margin-top: 12px;
+	padding: 8px 12px;
+	background: rgba(239, 68, 68, 0.1);
+	color: #ef4444;
+	border-radius: 6px;
+	font-size: 0.85rem;
+}
+
+.erc1155-balance-result {
+	margin-top: 12px;
+	padding: 12px 16px;
+	background: rgba(16, 185, 129, 0.1);
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.erc1155-balance-label {
+	font-size: 0.9rem;
+	color: var(--text-secondary, #6b7280);
+}
+
+.erc1155-balance-value {
+	font-size: 1.1rem;
+	font-weight: 600;
+	color: #10b981;
+	font-family: monospace;
+}
+
+/* Token ID Input for ERC1155 Contract Page */
+.erc1155-token-lookup {
+	padding: 16px;
+}
+
+.erc1155-token-lookup-row {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.erc1155-token-input {
+	flex: 1;
+	min-width: 150px;
+	max-width: 300px;
+	padding: 10px 14px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-family: monospace;
+	background: var(--bg-color, #fff);
+	color: var(--text-color, #1f2937);
+}
+
+.erc1155-token-input:focus {
+	outline: none;
+	border-color: #ec4899;
+	box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
+}
+
+.erc1155-view-button {
+	padding: 10px 20px;
+	background: #ec4899;
+	color: white;
+	border: none;
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.2s;
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+}
+
+.erc1155-view-button:hover {
+	background: #db2777;
+}
+
+.erc1155-view-button.disabled {
+	background: #9ca3af;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* ERC721 Token Detail Page */
+.erc721-header {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.erc721-header-title {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.erc721-token-name {
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--text-color, #1f2937);
+}
+
+.erc721-detail-content {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+}
+
+.erc721-main-section {
+	display: flex;
+	gap: 24px;
+	flex-wrap: wrap;
+}
+
+.erc721-image-container {
+	flex-shrink: 0;
+	width: 300px;
+	max-width: 100%;
+}
+
+.erc721-token-image {
+	width: 100%;
+	height: auto;
+	border-radius: 12px;
+	object-fit: cover;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.erc721-main-section .tx-details {
+	flex: 1;
+	min-width: 300px;
+}
+
+/* ERC721 Attributes Grid */
+.erc721-attributes-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: 12px;
+	padding: 16px;
+}
+
+.erc721-attribute-card {
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+	background: rgba(139, 92, 246, 0.05);
+	border: 1px solid rgba(139, 92, 246, 0.2);
+	border-radius: 8px;
+	text-align: center;
+}
+
+.erc721-attribute-type {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: #8b5cf6;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin-bottom: 4px;
+}
+
+.erc721-attribute-value {
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: var(--text-color, #1f2937);
+	word-break: break-word;
+}
+
+/* ERC721 Token ID Input for Contract Page */
+.erc721-token-lookup {
+	padding: 16px;
+}
+
+.erc721-token-lookup-row {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.erc721-token-input {
+	flex: 1;
+	min-width: 150px;
+	max-width: 300px;
+	padding: 10px 14px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-family: monospace;
+	background: var(--bg-color, #fff);
+	color: var(--text-color, #1f2937);
+}
+
+.erc721-token-input:focus {
+	outline: none;
+	border-color: #8b5cf6;
+	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
+}
+
+.erc721-view-button {
+	padding: 10px 20px;
+	background: #8b5cf6;
+	color: white;
+	border: none;
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.2s;
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+}
+
+.erc721-view-button:hover {
+	background: #7c3aed;
+}
+
+.erc721-view-button.disabled {
+	background: #9ca3af;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* NFT Transfer History Table */
+.nft-transfers-table-container {
+	overflow-x: auto;
+	padding: 0 16px 16px;
+}
+
+.nft-transfers-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.875rem;
+}
+
+.nft-transfers-table th {
+	text-align: left;
+	padding: 12px 8px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	font-weight: 600;
+	color: var(--text-secondary, #6b7280);
+	white-space: nowrap;
+}
+
+.nft-transfers-table td {
+	padding: 12px 8px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+	vertical-align: middle;
+}
+
+.nft-transfers-table tbody tr:hover {
+	background: rgba(0, 0, 0, 0.02);
+}
+
+.nft-transfers-loading {
+	padding: 24px 16px;
+	text-align: center;
+}
+
+.nft-transfers-empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--text-secondary, #6b7280);
+	font-style: italic;
+}
+
+.nft-transfers-more {
+	padding: 12px 16px;
+	text-align: center;
+	color: var(--text-secondary, #6b7280);
+	font-size: 0.85rem;
+	border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* NFT Action Badges */
+.nft-action-badge {
+	display: inline-block;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.nft-action-transfer {
+	background: rgba(59, 130, 246, 0.1);
+	color: #3b82f6;
+}
+
+.nft-action-mint {
+	background: rgba(16, 185, 129, 0.1);
+	color: #10b981;
+}
+
+.nft-action-burn {
+	background: rgba(239, 68, 68, 0.1);
+	color: #ef4444;
+}
+
+/* Null Address styling */
+.null-address {
+	color: var(--text-secondary, #6b7280);
+	font-style: italic;
+}
+
+/* Section count badge */
+.tx-section-count {
+	margin-left: 8px;
+	padding: 2px 8px;
+	background: rgba(0, 0, 0, 0.05);
+	border-radius: 12px;
+	font-size: 0.75rem;
+	font-weight: 500;
+	color: var(--text-secondary, #6b7280);
+}
+
+/* NFT Collection Link */
+.nft-collection-link {
+	display: inline-block;
+	font-size: 1.1rem;
+	font-weight: 600;
+	color: var(--primary-color, #3b82f6);
+	text-decoration: none;
+}
+
+.nft-collection-link:hover {
+	text-decoration: underline;
+}
+
+.nft-collection-symbol {
+	margin-left: 6px;
+	font-weight: 400;
+	color: var(--text-secondary, #6b7280);
+}
+
+/* NFT Description */
+.nft-description {
+	padding: 12px 16px;
+	line-height: 1.6;
+	color: var(--text-primary, #1f2937);
+	white-space: pre-wrap;
+}
+
+/* NFT Links Section */
+.nft-links {
+	padding: 12px 16px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.nft-link-button {
+	display: inline-flex;
+	align-items: center;
+	padding: 8px 16px;
+	background: rgba(59, 130, 246, 0.1);
+	color: #3b82f6;
+	border-radius: 6px;
+	text-decoration: none;
+	font-size: 0.9rem;
+	font-weight: 500;
+	transition: background 0.2s ease;
+}
+
+.nft-link-button:hover {
+	background: rgba(59, 130, 246, 0.2);
+}
+
+/* NFT Token URI Section */
+.nft-token-uri {
+	padding: 12px 16px;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.nft-token-uri-code {
+	flex: 1;
+	padding: 12px;
+	background: rgba(0, 0, 0, 0.03);
+	border-radius: 6px;
+	font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
+	font-size: 0.85rem;
+	line-height: 1.5;
+	word-break: break-all;
+	white-space: pre-wrap;
+	color: var(--text-primary, #1f2937);
+	overflow-x: auto;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.nft-token-uri-link {
+	flex-shrink: 0;
+}
+
diff --git a/src/utils/erc1155Metadata.ts b/src/utils/erc1155Metadata.ts
new file mode 100644
index 00000000..88dcddfd
--- /dev/null
+++ b/src/utils/erc1155Metadata.ts
@@ -0,0 +1,277 @@
+/**
+ * ERC1155 Token Metadata Utilities
+ * Handles fetching and parsing ERC1155 token metadata from various URI formats
+ */
+
+import { decodeAbiString, hexToString } from "./hexUtils";
+
+export interface ERC1155TokenMetadata {
+  name?: string;
+  description?: string;
+  image?: string;
+  animation_url?: string;
+  external_url?: string;
+  attributes?: Array<{
+    trait_type?: string;
+    value?: string | number;
+    display_type?: string;
+  }>;
+  properties?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Convert IPFS URI to HTTP gateway URL
+ */
+export function ipfsToHttp(uri: string): string {
+  if (uri.startsWith("ipfs://")) {
+    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+  if (uri.startsWith("ipfs/")) {
+    return `https://ipfs.io/${uri}`;
+  }
+  return uri;
+}
+
+/**
+ * Substitute {id} placeholder in URI with hex-padded token ID
+ * Per ERC1155 spec: 64 hex chars, lowercase, no 0x prefix
+ */
+export function substituteTokenId(uri: string, tokenId: string): string {
+  // Convert tokenId to BigInt, then to hex, pad to 64 chars
+  const tokenIdBigInt = BigInt(tokenId);
+  const hexId = tokenIdBigInt.toString(16).toLowerCase().padStart(64, "0");
+  return uri.replace("{id}", hexId);
+}
+
+/**
+ * Parse data URI (base64 encoded JSON)
+ */
+function parseDataUri(uri: string): ERC1155TokenMetadata | null {
+  try {
+    // Handle data:application/json;base64,...
+    if (uri.startsWith("data:application/json;base64,")) {
+      const base64Data = uri.slice("data:application/json;base64,".length);
+      const jsonString = atob(base64Data);
+      return JSON.parse(jsonString);
+    }
+    // Handle data:application/json,...
+    if (uri.startsWith("data:application/json,")) {
+      const jsonString = decodeURIComponent(uri.slice("data:application/json,".length));
+      return JSON.parse(jsonString);
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to parse data URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch ERC1155 token URI from contract
+ */
+export async function fetchTokenUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode uri(uint256) call
+    // uri selector: 0x0e89341c
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x0e89341c${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode string from ABI-encoded response
+    const hex = result.result.slice(2);
+    if (hex.length < 128) return null;
+
+    // Get string length (second 32 bytes)
+    const lengthHex = hex.slice(64, 128);
+    const length = parseInt(lengthHex, 16);
+
+    // Get string data
+    const strHex = hex.slice(128, 128 + length * 2);
+    const uri = hexToString(strHex);
+
+    return uri;
+  } catch (error) {
+    console.error("Failed to fetch token URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch balance of an address for a specific token ID
+ */
+export async function fetchTokenBalance(
+  contractAddress: string,
+  ownerAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode balanceOf(address,uint256) call
+    // balanceOf selector: 0x00fdd58e
+    const ownerPadded = ownerAddress.toLowerCase().slice(2).padStart(64, "0");
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x00fdd58e${ownerPadded}${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return "0";
+    }
+
+    const balance = BigInt(result.result).toString();
+    return balance;
+  } catch (error) {
+    console.error("Failed to fetch token balance:", error);
+    return null;
+  }
+}
+
+export interface ERC1155MetadataResult {
+  metadata: ERC1155TokenMetadata | null;
+  tokenUri: string | null;
+}
+
+/**
+ * Fetch and parse ERC1155 token metadata
+ */
+export async function fetchERC1155Metadata(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC1155TokenMetadata | null> {
+  const result = await fetchERC1155MetadataWithUri(contractAddress, tokenId, rpcUrl);
+  return result.metadata;
+}
+
+/**
+ * Fetch and parse ERC1155 token metadata along with the raw tokenURI
+ */
+export async function fetchERC1155MetadataWithUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC1155MetadataResult> {
+  // Step 1: Get the token URI from contract
+  let uri = await fetchTokenUri(contractAddress, tokenId, rpcUrl);
+
+  if (!uri) {
+    return { metadata: null, tokenUri: null };
+  }
+
+  // Step 2: Substitute {id} placeholder if present
+  uri = substituteTokenId(uri, tokenId);
+
+  // Step 3: Handle different URI schemes
+  // Data URI - parse directly
+  if (uri.startsWith("data:")) {
+    return { metadata: parseDataUri(uri), tokenUri: uri };
+  }
+
+  // IPFS or HTTP URI - fetch the metadata
+  const httpUri = ipfsToHttp(uri);
+
+  try {
+    const response = await fetch(httpUri);
+    if (!response.ok) {
+      console.error("Failed to fetch metadata:", response.status);
+      return { metadata: null, tokenUri: uri };
+    }
+
+    const metadata = await response.json();
+    return { metadata: metadata as ERC1155TokenMetadata, tokenUri: uri };
+  } catch (error) {
+    console.error("Failed to fetch/parse metadata:", error);
+    return { metadata: null, tokenUri: uri };
+  }
+}
+
+/**
+ * Get display-ready image URL from metadata
+ */
+export function getImageUrl(metadata: ERC1155TokenMetadata): string | null {
+  const image = metadata.image || metadata.animation_url;
+  if (!image) return null;
+  return ipfsToHttp(image);
+}
+
+export interface CollectionInfo {
+  name?: string;
+  symbol?: string;
+}
+
+/**
+ * Fetch collection info (name, symbol) from ERC1155 contract
+ * Note: ERC1155 doesn't have a standard totalSupply, it's per-token ID
+ */
+export async function fetchCollectionInfo(
+  contractAddress: string,
+  rpcUrl: string,
+): Promise<CollectionInfo> {
+  const info: CollectionInfo = {};
+
+  const calls = [
+    { selector: "0x06fdde03", key: "name" }, // name()
+    { selector: "0x95d89b41", key: "symbol" }, // symbol()
+  ];
+
+  for (const call of calls) {
+    try {
+      const response = await fetch(rpcUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method: "eth_call",
+          params: [{ to: contractAddress, data: call.selector }, "latest"],
+          id: 1,
+        }),
+      });
+      const data = await response.json();
+      if (!data.error && data.result && data.result !== "0x") {
+        const decoded = decodeAbiString(data.result);
+        if (decoded) {
+          if (call.key === "name") info.name = decoded;
+          if (call.key === "symbol") info.symbol = decoded;
+        }
+      }
+    } catch {
+      // Continue on error
+    }
+  }
+
+  return info;
+}
diff --git a/src/utils/erc721Metadata.ts b/src/utils/erc721Metadata.ts
new file mode 100644
index 00000000..337a62f9
--- /dev/null
+++ b/src/utils/erc721Metadata.ts
@@ -0,0 +1,318 @@
+/**
+ * ERC721 Token Metadata Utilities
+ * Handles fetching and parsing ERC721 NFT token metadata from various URI formats
+ */
+
+import { decodeAbiString, hexToString } from "./hexUtils";
+
+export interface ERC721TokenMetadata {
+  name?: string;
+  description?: string;
+  image?: string;
+  animation_url?: string;
+  external_url?: string;
+  attributes?: Array<{
+    trait_type?: string;
+    value?: string | number;
+    display_type?: string;
+  }>;
+  properties?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Convert IPFS URI to HTTP gateway URL
+ */
+export function ipfsToHttp(uri: string): string {
+  if (uri.startsWith("ipfs://")) {
+    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+  if (uri.startsWith("ipfs/")) {
+    return `https://ipfs.io/${uri}`;
+  }
+  return uri;
+}
+
+/**
+ * Parse data URI (base64 encoded JSON)
+ */
+function parseDataUri(uri: string): ERC721TokenMetadata | null {
+  try {
+    // Handle data:application/json;base64,...
+    if (uri.startsWith("data:application/json;base64,")) {
+      const base64Data = uri.slice("data:application/json;base64,".length);
+      const jsonString = atob(base64Data);
+      return JSON.parse(jsonString);
+    }
+    // Handle data:application/json,...
+    if (uri.startsWith("data:application/json,")) {
+      const jsonString = decodeURIComponent(uri.slice("data:application/json,".length));
+      return JSON.parse(jsonString);
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to parse data URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch ERC721 tokenURI from contract
+ */
+export async function fetchTokenUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode tokenURI(uint256) call
+    // tokenURI selector: 0xc87b56dd
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0xc87b56dd${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode string from ABI-encoded response
+    const hex = result.result.slice(2);
+    if (hex.length < 128) return null;
+
+    // Get string length (second 32 bytes)
+    const lengthHex = hex.slice(64, 128);
+    const length = parseInt(lengthHex, 16);
+
+    // Get string data
+    const strHex = hex.slice(128, 128 + length * 2);
+    const uri = hexToString(strHex);
+
+    return uri;
+  } catch (error) {
+    console.error("Failed to fetch token URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch owner of a specific token ID
+ */
+export async function fetchTokenOwner(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode ownerOf(uint256) call
+    // ownerOf selector: 0x6352211e
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x6352211e${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode address from response (last 40 hex chars)
+    const hex = result.result.slice(2);
+    if (hex.length < 40) return null;
+
+    const address = `0x${hex.slice(-40)}`;
+    return address;
+  } catch (error) {
+    console.error("Failed to fetch token owner:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch approved address for a specific token ID
+ */
+export async function fetchTokenApproval(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode getApproved(uint256) call
+    // getApproved selector: 0x081812fc
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x081812fc${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode address from response
+    const hex = result.result.slice(2);
+    if (hex.length < 40) return null;
+
+    const address = `0x${hex.slice(-40)}`;
+    // Return null for zero address (no approval)
+    if (address === "0x0000000000000000000000000000000000000000") {
+      return null;
+    }
+    return address;
+  } catch (error) {
+    console.error("Failed to fetch token approval:", error);
+    return null;
+  }
+}
+
+export interface ERC721MetadataResult {
+  metadata: ERC721TokenMetadata | null;
+  tokenUri: string | null;
+}
+
+/**
+ * Fetch and parse ERC721 token metadata
+ */
+export async function fetchERC721Metadata(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC721TokenMetadata | null> {
+  const result = await fetchERC721MetadataWithUri(contractAddress, tokenId, rpcUrl);
+  return result.metadata;
+}
+
+/**
+ * Fetch and parse ERC721 token metadata along with the raw tokenURI
+ */
+export async function fetchERC721MetadataWithUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC721MetadataResult> {
+  // Step 1: Get the token URI from contract
+  const uri = await fetchTokenUri(contractAddress, tokenId, rpcUrl);
+
+  if (!uri) {
+    return { metadata: null, tokenUri: null };
+  }
+
+  // Step 2: Handle different URI schemes
+  // Data URI - parse directly
+  if (uri.startsWith("data:")) {
+    return { metadata: parseDataUri(uri), tokenUri: uri };
+  }
+
+  // IPFS or HTTP URI - fetch the metadata
+  const httpUri = ipfsToHttp(uri);
+
+  try {
+    const response = await fetch(httpUri);
+    if (!response.ok) {
+      console.error("Failed to fetch metadata:", response.status);
+      return { metadata: null, tokenUri: uri };
+    }
+
+    const metadata = await response.json();
+    return { metadata: metadata as ERC721TokenMetadata, tokenUri: uri };
+  } catch (error) {
+    console.error("Failed to fetch/parse metadata:", error);
+    return { metadata: null, tokenUri: uri };
+  }
+}
+
+/**
+ * Get display-ready image URL from metadata
+ */
+export function getImageUrl(metadata: ERC721TokenMetadata): string | null {
+  const image = metadata.image || metadata.animation_url;
+  if (!image) return null;
+  return ipfsToHttp(image);
+}
+
+export interface CollectionInfo {
+  name?: string;
+  symbol?: string;
+  totalSupply?: string;
+}
+
+/**
+ * Fetch collection info (name, symbol, totalSupply) from ERC721 contract
+ */
+export async function fetchCollectionInfo(
+  contractAddress: string,
+  rpcUrl: string,
+): Promise<CollectionInfo> {
+  const info: CollectionInfo = {};
+
+  const calls = [
+    { selector: "0x06fdde03", key: "name" }, // name()
+    { selector: "0x95d89b41", key: "symbol" }, // symbol()
+    { selector: "0x18160ddd", key: "totalSupply" }, // totalSupply()
+  ];
+
+  for (const call of calls) {
+    try {
+      const response = await fetch(rpcUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method: "eth_call",
+          params: [{ to: contractAddress, data: call.selector }, "latest"],
+          id: 1,
+        }),
+      });
+      const data = await response.json();
+      if (!data.error && data.result && data.result !== "0x") {
+        if (call.key === "totalSupply") {
+          info.totalSupply = BigInt(data.result).toString();
+        } else {
+          const decoded = decodeAbiString(data.result);
+          if (decoded) {
+            if (call.key === "name") info.name = decoded;
+            if (call.key === "symbol") info.symbol = decoded;
+          }
+        }
+      }
+    } catch {
+      // Continue on error
+    }
+  }
+
+  return info;
+}
diff --git a/src/utils/hexUtils.ts b/src/utils/hexUtils.ts
new file mode 100644
index 00000000..459c7f93
--- /dev/null
+++ b/src/utils/hexUtils.ts
@@ -0,0 +1,44 @@
+/**
+ * Shared hex decoding utilities for browser-compatible string conversion.
+ * Used for decoding ABI-encoded strings from RPC responses.
+ */
+
+/**
+ * Convert a hex string to a UTF-8 string.
+ * Stops at first null character (0x00).
+ * Browser-compatible alternative to Node.js Buffer.from(hex, "hex").toString("utf8")
+ */
+export function hexToString(hex: string): string {
+  let str = "";
+  for (let i = 0; i < hex.length; i += 2) {
+    const charCode = parseInt(hex.slice(i, i + 2), 16);
+    if (charCode === 0) break;
+    str += String.fromCharCode(charCode);
+  }
+  return str;
+}
+
+/**
+ * Decode an ABI-encoded string from a hex response.
+ * ABI-encoded strings have the format:
+ * - bytes 0-32: offset to string data (usually 0x20 = 32)
+ * - bytes 32-64: string length
+ * - bytes 64+: string data (padded to 32 bytes)
+ *
+ * @param hex - The hex string including "0x" prefix
+ * @returns The decoded string, or empty string on error
+ */
+export function decodeAbiString(hex: string): string {
+  try {
+    const data = hex.slice(2); // Remove "0x" prefix
+    if (data.length >= 128) {
+      const lengthHex = data.slice(64, 128);
+      const length = parseInt(lengthHex, 16);
+      const strHex = data.slice(128, 128 + length * 2);
+      return hexToString(strHex);
+    }
+    return "";
+  } catch {
+    return "";
+  }
+}

From a1cbd56bdaf067112dcc9c0305f2afcc59598599 Mon Sep 17 00:00:00 2001
From: AugustoL <augustolemble@pm.me>
Date: Fri, 5 Dec 2025 21:39:01 -0300
Subject: [PATCH 5/5] fix: lint fixes

---
 src/App.tsx                                                | 2 +-
 src/components/pages/address/displays/AccountDisplay.tsx   | 2 +-
 src/components/pages/address/displays/ContractDisplay.tsx  | 2 +-
 src/components/pages/address/displays/ERC1155Display.tsx   | 4 ++--
 src/components/pages/address/displays/ERC20Display.tsx     | 2 +-
 src/components/pages/address/displays/ERC721Display.tsx    | 4 ++--
 src/components/pages/address/index.tsx                     | 2 +-
 src/components/pages/address/shared/TransactionHistory.tsx | 2 +-
 src/components/pages/address/shared/index.ts               | 2 +-
 src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx  | 4 ++--
 src/components/pages/tokenDetails/ERC721TokenDisplay.tsx   | 4 ++--
 11 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index aa52e84e..2a358a1d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,11 +43,11 @@ import {
   LazyDevTools,
   LazyHome,
   LazyMempool,
-  LazyTokenDetails,
   LazyProfile,
   LazySettings,
   LazySubscriptions,
   LazySupporters,
+  LazyTokenDetails,
   LazyTx,
   LazyTxs,
 } from "./components/LazyComponents";
diff --git a/src/components/pages/address/displays/AccountDisplay.tsx b/src/components/pages/address/displays/AccountDisplay.tsx
index 98ee6c73..66d56886 100644
--- a/src/components/pages/address/displays/AccountDisplay.tsx
+++ b/src/components/pages/address/displays/AccountDisplay.tsx
@@ -8,8 +8,8 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 import { AddressHeader, BalanceSection, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 
 interface AccountDisplayProps {
   address: Address;
diff --git a/src/components/pages/address/displays/ContractDisplay.tsx b/src/components/pages/address/displays/ContractDisplay.tsx
index 8a83ea1a..b3590f2d 100644
--- a/src/components/pages/address/displays/ContractDisplay.tsx
+++ b/src/components/pages/address/displays/ContractDisplay.tsx
@@ -11,8 +11,8 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 
 interface ContractDisplayProps {
   address: Address;
diff --git a/src/components/pages/address/displays/ERC1155Display.tsx b/src/components/pages/address/displays/ERC1155Display.tsx
index 422eff51..1e6ceb2c 100644
--- a/src/components/pages/address/displays/ERC1155Display.tsx
+++ b/src/components/pages/address/displays/ERC1155Display.tsx
@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 import { AppContext } from "../../../../context";
 import { useSourcify } from "../../../../hooks/useSourcify";
 import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
-import { decodeAbiString } from "../../../../utils/hexUtils";
 import type {
   Address,
   AddressTransactionsResult,
@@ -14,8 +13,9 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+import { decodeAbiString } from "../../../../utils/hexUtils";
 import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 
 interface ERC1155DisplayProps {
   address: Address;
diff --git a/src/components/pages/address/displays/ERC20Display.tsx b/src/components/pages/address/displays/ERC20Display.tsx
index 0f41f12e..bae539f4 100644
--- a/src/components/pages/address/displays/ERC20Display.tsx
+++ b/src/components/pages/address/displays/ERC20Display.tsx
@@ -12,8 +12,8 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 
 interface ERC20DisplayProps {
   address: Address;
diff --git a/src/components/pages/address/displays/ERC721Display.tsx b/src/components/pages/address/displays/ERC721Display.tsx
index ae7c957e..aba098c0 100644
--- a/src/components/pages/address/displays/ERC721Display.tsx
+++ b/src/components/pages/address/displays/ERC721Display.tsx
@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 import { AppContext } from "../../../../context";
 import { useSourcify } from "../../../../hooks/useSourcify";
 import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
-import { decodeAbiString } from "../../../../utils/hexUtils";
 import type {
   Address,
   AddressTransactionsResult,
@@ -14,8 +13,9 @@ import type {
   RPCMetadata,
   Transaction,
 } from "../../../../types";
-import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+import { decodeAbiString } from "../../../../utils/hexUtils";
 import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
 
 interface ERC721DisplayProps {
   address: Address;
diff --git a/src/components/pages/address/index.tsx b/src/components/pages/address/index.tsx
index 3eb9d730..33c2ed6b 100644
--- a/src/components/pages/address/index.tsx
+++ b/src/components/pages/address/index.tsx
@@ -4,8 +4,8 @@ import { AppContext } from "../../../context";
 import { useDataService } from "../../../hooks/useDataService";
 import { useENS } from "../../../hooks/useENS";
 import type {
-  AddressTransactionsResult,
   Address as AddressData,
+  AddressTransactionsResult,
   AddressType,
   DataWithMetadata,
   Transaction,
diff --git a/src/components/pages/address/shared/TransactionHistory.tsx b/src/components/pages/address/shared/TransactionHistory.tsx
index 2b87fcf5..9c5a2378 100644
--- a/src/components/pages/address/shared/TransactionHistory.tsx
+++ b/src/components/pages/address/shared/TransactionHistory.tsx
@@ -1,8 +1,8 @@
 import type React from "react";
 import { useCallback, useMemo } from "react";
 import { Link } from "react-router-dom";
-import type { ABI, AddressTransactionsResult, FunctionABI, Transaction } from "../../../../types";
 import { toFunctionSelector } from "viem";
+import type { ABI, AddressTransactionsResult, FunctionABI, Transaction } from "../../../../types";
 
 interface TransactionHistoryProps {
   networkId: string;
diff --git a/src/components/pages/address/shared/index.ts b/src/components/pages/address/shared/index.ts
index 1b0b46f6..52f70686 100644
--- a/src/components/pages/address/shared/index.ts
+++ b/src/components/pages/address/shared/index.ts
@@ -3,5 +3,5 @@ export { default as BalanceSection } from "./BalanceSection";
 export { default as ContractDetails } from "./ContractDetails";
 export { default as ContractInteraction } from "./ContractInteraction";
 export { default as ContractStorage } from "./ContractStorage";
+export { default as ENSRecordsDisplay } from "./ENSRecordsDisplay";
 export { default as TransactionHistory } from "./TransactionHistory";
-export { default as ENSRecordsDisplay } from "./ENSRecordsDisplay";
\ No newline at end of file
diff --git a/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx b/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
index 6d5a2f98..f85758df 100644
--- a/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
+++ b/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
@@ -3,12 +3,12 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { AppContext } from "../../../context";
 import {
+  type CollectionInfo,
+  type ERC1155TokenMetadata,
   fetchCollectionInfo,
   fetchERC1155MetadataWithUri,
   fetchTokenBalance,
   getImageUrl,
-  type CollectionInfo,
-  type ERC1155TokenMetadata,
 } from "../../../utils/erc1155Metadata";
 import Loader from "../../common/Loader";
 
diff --git a/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx b/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
index 0ff8755e..54ec2299 100644
--- a/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
+++ b/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
@@ -3,13 +3,13 @@ import { useContext, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { AppContext } from "../../../context";
 import {
+  type CollectionInfo,
+  type ERC721TokenMetadata,
   fetchCollectionInfo,
   fetchERC721MetadataWithUri,
   fetchTokenApproval,
   fetchTokenOwner,
   getImageUrl,
-  type CollectionInfo,
-  type ERC721TokenMetadata,
 } from "../../../utils/erc721Metadata";
 import Loader from "../../common/Loader";