feat: upgrade the version of aelf-smartcontract-viewer

components/contract-viewer/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useWallet } from "@/data/wallet";
 import { ContractView } from "aelf-smartcontract-viewer";
@@ -13,21 +12,13 @@ const ContractViewer = ({ name }: { name: string }) => {
   const wallet = useWallet();
   const { resolvedTheme } = useTheme();
   const contractViewerAddress = searchParams.get("contract-viewer-address");
-  const [key, setKey] = useState("0");
-
-  useEffect(() => {
-    setTimeout(() => {
-      setKey(prev => parseInt(prev) + 1 + "");
-    }, 1000);
-  }, [contractViewerAddress]);
 
   if (!contractViewerAddress || !wallet?.wallet) {
     return;
   }
 
   return (
     <ContractView
-      key={key}
       wallet={wallet.wallet}
       address={contractViewerAddress}
       headerTitle={"Contract View"}

components/left-side.tsx

@@ -24,6 +24,7 @@ const LeftSide = ({ name }: { name: string }) => {
           bottom={<ContractViewer name={name} />}
           topDefaultSize={30}
           bottomDefaultSize={70}
+          bottomClassName="contract-viewer-container"
         />
       ) : (
         <TopSections />

components/top-bottom.tsx

@@ -10,23 +10,27 @@ export default function TopBottom({
   bottom,
   topDefaultSize = 70,
   bottomDefaultSize = 30,
+  topClassName = "",
+  bottomClassName = "",
 }: {
   top: ReactNode;
   bottom: ReactNode;
   topDefaultSize?: number;
   bottomDefaultSize?: number;
+  topClassName?: string;
+  bottomClassName?: string
 }) {
   return (
     <div className="h-[calc(100vh-40px)]">
       <ResizablePanelGroup direction="vertical">
         <ResizablePanel
           defaultSize={topDefaultSize}
-          className="overflow-y-auto"
+          className={`overflow-y-auto ${topClassName}`}
         >
           {top}
         </ResizablePanel>
         <ResizableHandle />
-        <ResizablePanel defaultSize={bottomDefaultSize}>
+        <ResizablePanel defaultSize={bottomDefaultSize} className={bottomClassName}>
           {bottom}
         </ResizablePanel>
       </ResizablePanelGroup>

package.json

@@ -48,7 +48,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "aelf-sdk": "^3.4.15",
-    "aelf-smartcontract-viewer": "^1.0.6",
+    "aelf-smartcontract-viewer": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",

src/routes/workspace.scss

@@ -0,0 +1,3 @@
+.contract-viewer-container {
+  overflow-y: auto !important;
+}

src/routes/workspace.tsx

@@ -7,6 +7,7 @@ import {
 import Cli from "@/components/workspace/cli";
 import LeftSide from "@/components/left-side";
 import { Outlet, useParams } from "react-router-dom";
+import './workspace.scss';
 
 export function Component() {
   let { id } = useParams();