From c4fd37ef99a19121cadaa82b0b2fa86d80b12043 Mon Sep 17 00:00:00 2001
From: "yongen.loong" <yongen.loong@aelf.io>
Date: Sat, 16 Nov 2024 20:39:37 +0800
Subject: [PATCH] fix: add refresh

---
 components/contract-viewer/index.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/components/contract-viewer/index.tsx b/components/contract-viewer/index.tsx
index e3a0a34..441a98c 100644
--- a/components/contract-viewer/index.tsx
+++ b/components/contract-viewer/index.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { useWallet } from "@/data/wallet";
 import { ContractView } from "aelf-smartcontract-viewer";
 import { useTheme } from "next-themes";
+import { Button } from "../ui/button";
 
 const sideChainTestnetRpc = "https://tdvw-test-node.aelf.io";
 
@@ -13,20 +14,27 @@ const ContractViewer = ({ name }: { name: string }) => {
   const wallet = useWallet();
   const { resolvedTheme } = useTheme();
   const contractViewerAddress = searchParams.get("contract-viewer-address");
+  const [key, setKey] = useState("0");
 
   if (!contractViewerAddress || !wallet?.wallet) {
     return;
   }
 
   return (
-    <ContractView
-      wallet={wallet.wallet}
-      address={contractViewerAddress}
-      headerTitle={"Contract View"}
-      rpcUrl={sideChainTestnetRpc}
-      contractName={name}
-      theme={resolvedTheme as "dark" | "light"}
-    />
+    <>
+      <div className="flex">
+        <Button className="mx-auto mt-2" onClick={() => setKey(prev => parseInt(prev) + 1 + "")}>Refresh</Button>
+      </div>
+      <ContractView
+        key={key}
+        wallet={wallet.wallet}
+        address={contractViewerAddress}
+        headerTitle={"Contract View"}
+        rpcUrl={sideChainTestnetRpc}
+        contractName={name}
+        theme={resolvedTheme as "dark" | "light"}
+      />
+    </>
   );
 };