Real-time Updates

The Real-time Updates system in OADA-UI provides live data synchronization through WebSocket connections, enabling instant updates for prices, portfolio values, and transaction status. This section details the core components and their implementations.

WebSocket Integration

The WebSocket integration system provides real-time communication with the backend server. Let's break down the key components:

The WebsocketContextType defines the type for the WebSocket context:

// src/websocket.tsx
// Type definition for WebSocket context
// Used to share WebSocket instance across components
type WebsocketContextType = WebSocket;

The WebsocketContext creates a React context for sharing the WebSocket instance:

// src/websocket.tsx
// React context for WebSocket instance
// Provides WebSocket access to child components
export const WebsocketContext = createContext<WebsocketContextType | null>(
  null
);

The WebsocketProvider component manages the WebSocket connection lifecycle:

// src/websocket.tsx
// WebSocket Provider Component
// Manages WebSocket connection and provides it to child components
const WebsocketProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const wallet = useAppSelector(selectWallet);
  const url = `${wsUrl}`;
  const ws = new WebSocket(url);

  const dispatch = useAppDispatch();
  const [reconnectToggle, setReconnectToggle] = useState<boolean>(false);

  // Handle successful connection
  ws.addEventListener("open", (event) => {
    if (wallet !== null) {
      sendWalletConnectWsNotif(ws, wallet.address);
    }
    // Set up heartbeat mechanism
    const timer = setInterval(function () {
      if (ws.readyState === WebSocket.OPEN) {
        ws.send("ping");
      } else {
        clearInterval(timer);
      }
    }, 30000);
  });

  // Handle connection closure
  ws.addEventListener("close", (event) => {
    setTimeout(function () {
      setReconnectToggle(!reconnectToggle);
    }, 5000);
  });

  // Handle connection errors
  ws.addEventListener("error", (event) => {
    setTimeout(function () {
      setReconnectToggle(!reconnectToggle);
    }, 5000);
  });

  // Handle incoming messages
  ws.addEventListener("message", (event) => {
    const data = event.data;
    if (data === "pong") {
      return;
    }
    const o = JSON.parse(data);
    if (!isJsonRpcNotif("RewardDistsView", isRewardAccounts)(o)) {
      console.error(`WebsocketMessage: not a valid json rpc message: ${data}`);
      return;
    }
    if (o.params !== undefined) {
      dispatch(setRewardAccounts(o.params));
    }
  });

  return (
    <WebsocketContext.Provider value={ws}>{children}</WebsocketContext.Provider>
  );
};

Key features of the Real-time Updates system include:

1. WebSocket Integration

   • Automatic connection management

   • Heartbeat mechanism for connection health

   • Automatic reconnection on failure

   • Message processing and dispatch

2. Portfolio Value Tracking

   • Real-time balance updates for all tokens

   • Support for multiple asset types (ADA, OADA, sOADA, etc.)

   • Automatic conversion between units (lovelace to ADA)

   • Virtual UTxO management for pending transactions

3. Transaction Status Monitoring

   • Real-time UTxO updates

   • Transaction confirmation tracking

   • Virtual UTxO support for pending transactions

   • Automatic pruning of confirmed transactions

4. Error Handling

   • Connection error recovery

   • Automatic reconnection attempts

   • Message validation and error reporting

   • Graceful degradation on failures

The system provides a comprehensive interface for real-time data synchronization, ensuring that users always have access to the latest information about their portfolio and transactions.