Added redemptions & redeemable actions. Fixed a few bugs.

app/socket/page.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { Button } from '@/components/ui/button';
+import { v4 } from "uuid"
+import { useEffect, useState } from 'react';
+import useWebSocket from 'react-use-websocket';
+
+const socketUrl = 'wss://echo.websocket.org';
+
+const SocketPage = () => {
+  const [mounted, setMounted] = useState(false)
+
+  const {
+    sendMessage,
+    sendJsonMessage,
+    lastMessage,
+    lastJsonMessage,
+    readyState,
+    getWebSocket,
+  } = useWebSocket(socketUrl, {
+    onOpen: () => console.log('opened'),
+    onMessage: (e) => console.log("MESSAGE", e),
+    onError: (e) => console.error(e),
+    shouldReconnect: (closeEvent) => { console.log("Reconnect"); return true; },
+  });
+  const [messageHistory, setMessageHistory] = useState<MessageEvent[]>([]);
+
+  useEffect(() => {
+    if (lastMessage !== null) {
+      console.log("LAST", lastMessage)
+      setMessageHistory((prev) => prev.concat(lastMessage));
+    }
+  }, [lastMessage, setMessageHistory]);
+
+  useEffect(() => {
+    if (!mounted) {
+      setMounted(true)
+    }
+  }, [])
+
+  return (<div className="w-full  bg-blue-300">
+    <p>Hello</p>
+    <p>{readyState}</p>
+    <Button onClick={() => sendMessage("uisdhnishdadasdfsd " + v4())}>
+      Click on me
+    </Button>
+    <div>
+      {lastMessage ? <span>Last message: {lastMessage.data}</span> : null}
+      <ul>
+        {messageHistory.map((message, idx) => (
+          <p className='block' key={idx}>{message ? message.data : null}</p>
+        ))}
+      </ul>
+    </div>
+  </div>)
+}
+
+export default SocketPage