108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import { ConfigurationPanelItem } from "@/components/config/ConfigurationPanelItem";
|
|
import { useState } from "react";
|
|
import { LoadingSVG } from "@/components/button/LoadingSVG";
|
|
import { Button } from "@/components/button/Button";
|
|
|
|
interface RpcPanelProps {
|
|
config: any;
|
|
rpcMethod: string;
|
|
rpcPayload: string;
|
|
setRpcMethod: (method: string) => void;
|
|
setRpcPayload: (payload: string) => void;
|
|
handleRpcCall: () => Promise<any>;
|
|
}
|
|
|
|
export function RpcPanel({
|
|
config,
|
|
rpcMethod,
|
|
rpcPayload,
|
|
setRpcMethod,
|
|
setRpcPayload,
|
|
handleRpcCall,
|
|
}: RpcPanelProps) {
|
|
const [rpcResult, setRpcResult] = useState<{
|
|
success: boolean;
|
|
data: any;
|
|
} | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleCall = async () => {
|
|
setIsLoading(true);
|
|
setRpcResult(null);
|
|
try {
|
|
const result = await handleRpcCall();
|
|
setRpcResult({ success: true, data: result });
|
|
} catch (error) {
|
|
setRpcResult({
|
|
success: false,
|
|
data: error instanceof Error ? error.message : String(error),
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ConfigurationPanelItem
|
|
title="RPC"
|
|
collapsible={true}
|
|
defaultCollapsed={true}
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="text-xs text-gray-500 mt-2">Method Name</div>
|
|
<input
|
|
type="text"
|
|
value={rpcMethod}
|
|
onChange={(e) => setRpcMethod(e.target.value)}
|
|
className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
|
|
placeholder="my_method"
|
|
/>
|
|
|
|
<div className="text-xs text-gray-500 mt-2">Payload</div>
|
|
<textarea
|
|
value={rpcPayload}
|
|
onChange={(e) => setRpcPayload(e.target.value)}
|
|
className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
|
|
placeholder='{"my": "payload"}'
|
|
rows={2}
|
|
/>
|
|
|
|
<Button
|
|
accentColor={config.settings.theme_color}
|
|
onClick={handleCall}
|
|
disabled={!rpcMethod || isLoading}
|
|
className="mt-2 text-xs flex items-center justify-center gap-2"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<LoadingSVG diameter={12} strokeWidth={2} />
|
|
Performing RPC...
|
|
</>
|
|
) : (
|
|
"Perform RPC"
|
|
)}
|
|
</Button>
|
|
|
|
{rpcResult && (
|
|
<>
|
|
<div className="text-xs text-gray-500 mt-2">
|
|
{rpcResult.success ? "Result" : "Error"}
|
|
</div>
|
|
<div
|
|
className={`w-full text-sm bg-transparent border rounded-sm px-3 py-2 ${
|
|
rpcResult.success
|
|
? "border-green-500 text-green-500"
|
|
: "border-red-500 text-red-500"
|
|
}`}
|
|
>
|
|
{typeof rpcResult.data === "object"
|
|
? JSON.stringify(rpcResult.data, null, 2)
|
|
: String(rpcResult.data)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</ConfigurationPanelItem>
|
|
);
|
|
}
|