From cd142f9ff56fe994c968a8b9e789ce9a33385e02 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 30 Jul 2025 19:01:16 +0000
Subject: [PATCH] [BLD-28] Dashboard: Fix error style in contract explorer
 (#7763)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the error display section within the `InteractiveAbiFunction` component to enhance readability and styling.

### Detailed summary
- Removed the import of `InlineCode`.
- Changed the error display from a fragment (`<>`) to a `div`.
- Updated the error heading to include a bottom margin (`mb-2`).
- Replaced `InlineCode` with `PlainTextCodeBlock` for error formatting.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Style**
  * Updated the visual appearance of error messages in the interactive ABI function section for improved readability, using a new code block style with enhanced formatting.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../functions/interactive-abi-function.tsx         | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx b/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
index 470ad6d79f1..297b89ff78f 100644
--- a/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
@@ -30,7 +30,6 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
-import { InlineCode } from "@/components/ui/inline-code";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -414,14 +413,13 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
           )}
 
           {error ? (
-            <>
-              <h3 className="text-sm font-medium">Error</h3>
-              <InlineCode
-                className="relative w-full whitespace-pre-wrap rounded-md border border-border p-4 text-red-500"
-                //  biome-ignore lint/suspicious/noExplicitAny: FIXME
-                code={formatError(error as any)}
+            <div>
+              <h3 className="text-sm font-medium mb-2">Error</h3>
+              <PlainTextCodeBlock
+                className="text-red-500 bg-background"
+                code={formatError(error)}
               />
-            </>
+            </div>
           ) : readLoading ? (
             <Skeleton className="h-20 w-full rounded-lg" />
           ) : formattedResponseData ? (