# MDAS JSView SDK

A React component library for displaying live options and market data from MDAS API with elegant UI components.

## Installation

```bash
npm install mdas-jsview-sdk
```

### Peer Dependencies

This package relies on several peer dependencies that need to be installed in your project:

```bash
npm install react react-dom react-chartjs-2 chart.js tailwindcss class-variance-authority clsx tailwind-merge lucide-react @radix-ui/react-slot
```

### Configure Tailwind CSS

Make sure you have Tailwind CSS configured in your project. Create or update your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  content: [
    "./src/**/*.{js,jsx}",
    // Add this line to include the SDK components
    "./node_modules/mdas-jsview-sdk/dist/**/*.{js,cjs,mjs}",
  ],
  theme: {
    // Copy the theme configuration from the SDK's tailwind.config.js
    // ...
  },
  plugins: [require("tailwindcss-animate")],
}
```

## Setup Guide

### WebSocket Server Setup

The SDK includes a WebSocket proxy server that securely connects to the MDAS API. This server handles authentication and forwards data to your frontend application.

1. **Start the WebSocket Proxy Server:**

```bash
# Navigate to the server directory
cd server

# Install dependencies (first time only)
npm install

# Start the server
npm run start
```

The server will run on port 3001 by default and listen for WebSocket connections at `ws://localhost:3001/wssub`.

2. **Configure Authentication:**

You need a valid JWT token to authenticate with the MDAS API. This token should be passed to the widgets when initializing them.

### Using the Widgets

The SDK provides ready-to-use widgets for displaying market and options data:

```jsx
import { 
  OptionsDataWidget, 
  MarketDataWidget, 
  LineChartWidget 
} from 'mdas-jsview-sdk';

// Import the CSS
import 'mdas-jsview-sdk/dist/index.css';

function App() {
  // Your JWT token for authentication
  const token = "YOUR_JWT_TOKEN";
  
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Market Data Dashboard</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        {/* Display market data for Apple */}
        <MarketDataWidget 
          token={token}
          symbol="AAPL"
        />
        
        {/* Display options data */}
        <OptionsDataWidget 
          token={token}
          optionName="QQQ250930C00490000"
        />
      </div>
      
      <div className="mt-6">
        <h2 className="text-xl font-bold mb-3">Price Chart</h2>
        <LineChartWidget 
          token={token}
          symbol="AAPL"
        />
      </div>
    </div>
  );
}

export default App;
```

## WebSocket Data Flow

The data flow works as follows:

1. Your React application initializes widgets with a JWT token
2. Widgets connect to your local WebSocket proxy server 
3. The proxy server connects to the MDAS API (`wss://mdas-api-dev.viewtrade.dev/wssub`)
4. The proxy adds authentication headers to all messages
5. Real-time data flows from the MDAS API through your proxy to the widgets

## Testing the SDK

To test the SDK components, use the provided test page:

```bash
# Build the SDK
npm run build

# Start the test server
npm run test-server
```

This will start a server on port 3000 and serve a test page at http://localhost:3000/ that demonstrates the widgets.

## Available Components

### Widgets (with WebSocket connectivity)
- **OptionsDataWidget**: Displays real-time options data
- **MarketDataWidget**: Shows market data for stocks
- **LineChartWidget**: Visualizes price data in a line chart

### UI Components
- **LineChart**: Chart component for visualizing time series data
- **OptionsData**: Displays option details in a formatted card
- **MarketData**: Shows market data in a formatted card

## Troubleshooting

If you encounter WebSocket connection issues:

1. Ensure the WebSocket proxy server is running
2. Verify your JWT token is valid
3. Check server logs for authentication issues
4. Confirm your network allows WebSocket connections

## License

Proprietary - See LICENSE file for details