From bfc9db6b28331ddd34493e3c4f7a921d80bfea3b Mon Sep 17 00:00:00 2001
From: Kien Ngo <github@kien.ngo>
Date: Wed, 2 Oct 2024 03:26:57 +0700
Subject: [PATCH] Update interactive-abi-function.tsx

---
 .../interactive-abi-function.tsx              | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
index 80f13bed211..81c3293757e 100644
--- a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
+++ b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { InlineCode } from "@/components/ui/inline-code";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   ButtonGroup,
-  Code,
   Divider,
   Flex,
   FormControl,
@@ -408,21 +408,11 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = ({
             <>
               <Divider />
               <Heading size="label.sm">Error</Heading>
-              <Text
-                borderColor="borderColor"
-                as={Code}
-                p={4}
-                w="full"
-                bgColor="backgroundHighlight"
-                borderRadius="md"
-                color="red.500"
-                whiteSpace="pre-wrap"
-                borderWidth="1px"
-                position="relative"
-              >
-                {/* biome-ignore lint/suspicious/noExplicitAny: FIXME */}
-                {formatError(error as any)}
-              </Text>
+              <InlineCode
+                //  biome-ignore lint/suspicious/noExplicitAny: FIXME
+                code={formatError(error as any)}
+                className="relative w-full whitespace-pre-wrap rounded-md border border-border p-4 text-red-500"
+              />
             </>
           ) : formattedResponseData ? (
             <>