feat: rpc-caller

Author: robot

docs/features/rpc-caller.md

@@ -16,8 +16,11 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@solana/web3.js": "^1.98.2",
     "bip39": "^3.1.0",
@@ -33,6 +36,7 @@
     "react-json-view": "^1.21.3",
     "react-textarea-autosize": "^8.5.9",
     "recharts": "^3.5.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "viem": "^2.40.3"
   },

package.json

@@ -0,0 +1,17 @@
+'use client';
+
+import EvmRpcCaller from '@/components/features/evm/rpc-caller/EvmRpcCaller';
+
+export default function Page() {
+  return (
+    <div className="flex flex-col items-center justify-items-center"
+      style={{ fontFamily: 'Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, "Courier New", monospace' }}>
+      <article className="w-full flex flex-col items-start">
+        <EvmRpcCaller />
+      </article>
+      <footer className="flex gap-6 flex-wrap items-center justify-center">
+      </footer>
+    </div>
+  );
+}
+

pnpm-lock.yaml

@@ -22,6 +22,7 @@ import { AppSidebar } from "@/components/layout/app-sidebar"
 
 import { ThemeProvider } from "@/components/layout/theme-provider"
 import { SiteHeader } from "@/components/layout/site-header"
+import { Toaster } from '@/components/layout/sonner-toaster';
 
 export default function RootLayout({
   children,
@@ -46,6 +47,7 @@ export default function RootLayout({
               {children}
             </main>
           </SidebarProvider>
+          <Toaster />
         </ThemeProvider>
       </body>
     </html>

src/app/evm/rpc-caller/page.tsx

@@ -0,0 +1,6 @@
+import SolanaRpcCaller from '@/components/features/sol/rpc-caller/SolanaRpcCaller';
+
+export default function SolanaRpcCallerPage() {
+  return <SolanaRpcCaller />;
+}
+

src/app/layout.tsx

@@ -0,0 +1,6 @@
+import SuiRpcCaller from '@/components/features/sui/rpc-caller/SuiRpcCaller';
+
+export default function SuiRpcCallerPage() {
+  return <SuiRpcCaller />;
+}
+

src/app/sol/rpc-caller/page.tsx

@@ -0,0 +1,6 @@
+import TronRpcCaller from '@/components/features/tron/rpc-caller/TronRpcCaller';
+
+export default function TronRpcCallerPage() {
+  return <TronRpcCaller />;
+}
+

src/app/sui/rpc-caller/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Trash2, X } from 'lucide-react';
+import { type CallHistoryItem } from './types';
+
+interface CallHistoryProps {
+  callHistory: CallHistoryItem[];
+  onItemClick: (method: string, params: unknown[]) => void;
+  onDeleteItem: (id: string) => void;
+  onClearAll: () => void;
+}
+
+export default function CallHistory({
+  callHistory,
+  onItemClick,
+  onDeleteItem,
+  onClearAll,
+}: CallHistoryProps) {
+  const handleItemClick = (item: CallHistoryItem) => {
+    onItemClick(item.method, item.params);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Call History</CardTitle>
+            <CardDescription>Recent call records</CardDescription>
+          </div>
+          {callHistory.length > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearAll}
+              className="h-7 px-2 text-xs text-destructive hover:text-destructive"
+            >
+              <Trash2 className="h-3 w-3 mr-1" />
+              Clear All
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {callHistory.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No history yet</p>
+        ) : (
+          <div className="space-y-1.5 max-h-[300px] overflow-y-auto">
+            {callHistory.map((item) => (
+              <div
+                key={item.id}
+                className="rounded-md border px-3 py-2 text-xs group hover:bg-muted/50"
+              >
+                <div
+                  className="cursor-pointer"
+                  onClick={() => handleItemClick(item)}
+                >
+                  <div className="flex items-center justify-between mb-0.5">
+                    <span className="font-mono font-medium">{item.method}</span>
+                    <span className="text-muted-foreground">
+                      {new Date(item.timestamp).toLocaleTimeString()}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1.5">
+                      {item.error ? (
+                        <span className="text-destructive">✗ Failed</span>
+                      ) : (
+                        <span className="text-green-600">✓ Success</span>
+                      )}
+                      {item.duration && (
+                        <span className="text-muted-foreground">
+                          {item.duration}ms
+                        </span>
+                      )}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-5 px-1.5 text-destructive hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteItem(item.id);
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+