"use client";import { createPublicClient, webSocket, encodeFunctionData } from "viem";import { useAccount, useSendCalls } from "wagmi";import { useEffect, useState } from "react";import { riseTestnet } from "viem/chains";// RISE Testnetconst DICE_GAME = "0xd1037421286d2D789CC3Cf05e0BF9A1eaae71f60";export function DiceGameWidget() {  const { address } = useAccount();  const { sendCallsAsync } = useSendCalls();  const [result, setResult] = useState<number | null>(null);  // 1. Watch for VRF results in realtime via WebSocket  useEffect(() => {    if (!address) return;    const client = createPublicClient({      chain: riseTestnet,      transport: webSocket("wss://testnet.riselabs.xyz/ws"),    });    const unwatch = client.watchContractEvent({      address: DICE_GAME,      abi: DiceGameABI,      eventName: "DiceRollCompleted",      args: { player: address },      onLogs: (logs) => {        const lastLog = logs[logs.length - 1];        setResult(Number(lastLog.args.result));      },    });    return () => unwatch();  }, [address]);  // 2. Trigger the roll  const handleRoll = async () => {    const data = encodeFunctionData({      abi: DiceGameABI,      functionName: "rollDice",    });    await sendCallsAsync({      calls: [{ to: DICE_GAME, data }],    });  };  return (    <div className="space-y-4">      <div className="text-4xl text-center">        {result ? `🎲 ${result}` : "❓"}      </div>      <Button onClick={handleRoll}>        Roll Dice (Gasless)      </Button>    </div>  );}