Published on

UnusualWhales NOPE (Net Options Pricing Effect) Dashboard

Authors
  • avatar
    Name
    Teddy Xinyuan Chen
    Twitter

UnusualWhales's custom dashboard doesn't allow for the NOPE charts, so I built my own. This is a front end pet project.

Update 11/29: I found that the NOPE data updates on UW have 5 minutes delay, so don't expect it to be predictive in the way you want.

Table of Contents

Introduction

https://unusualwhales.com/news/nope-a-primer

In short, NOPE represents a best-estimate of expected number of shares to be hedged at any given time, and will show a general expected direction on the underlying

In my understanding, NOPE can be seen as aggregated effect of market maker Delta and Gamma hedging exposure. But since the algorithm is proprietary, there's no way for me to know how it's actually calculated.

The other 2 of my "theories" are:

  • Institutions position themselves in the right direction using options before moving the price in that direction.
  • Institutions "virtual signal" the market by placing large directional bets, other tutes pick up the signal and the informed money moves the market. NOPE is for intraday, but we learned that if someone placed large bets in longer dated far-OTM options, price tends to move towards that strike. May be another self-fulfilling prophecy.

Based on my own observation in the past 2 days, it seems like a good leading indicator for the most traded liquid tickers like SPY and META and suggests reversals 5-9 minutes before they actually happened.

The dashboard (nope.teddysc.me) is basically a bunch of <iframe>s with a fancy UI and convenience features. An active UnusualWhales subscription ($50/mo) is required.

The site is access-controlled and the source is not published, but the technologies used can be found at the bottom.

Demo

NOPE

https://www.youtube.com/watch?v=H2g2w4qQPuI

DEX / GEX

Delta and Gamma Exposure Dashboards, because why not? These pages can save me 20 tabs every hours and made my life a lot easier.

https://www.youtube.com/watch?v=9cKN_sLNkeY

Code is similar to the NOPE one, but I had to use some disgusting uBlock Origin rules (:matches-path(greek-exposure)) to hide certain elements without affecting the NOPE page.

Multi-View

This would let me check more info and get more context without switching between apps and tabs too many times, whether this is actually useful will need to be tested when market re-opens.

https://www.youtube.com/watch?v=wnlDPwmf8hU

The version in the video is outdated - I made a better looking version by putting candlestick charts in the same row:

Multi-View Dashboard

README generated by AI from the code

All content below is AI-generated.

The UW NOPE Dashboard is a web application designed to provide a comprehensive view of various stock tickers. It allows users to add, delete, and manage stock tickers, view detailed information, and interact with the data through a user-friendly interface.

Features

Ticker Management

  • Add Tickers: Users can add new stock tickers to the dashboard by pressing Ctrl + A or Cmd + A. A prompt will appear to enter the ticker symbol.
  • Delete Tickers: Users can delete a ticker by clicking the delete button (×) next to the ticker name.
  • Reorder Tickers: Users can drag and drop tickers to reorder them using the drag-and-drop functionality provided by react-beautiful-dnd.

Search and Navigation

  • Quick Search: Pressing / focuses the input field for quick ticker search and navigation.
  • Command Dialog: Pressing Ctrl + K or Cmd + K opens a command dialog where users can search for tickers and navigate to them quickly.

URL Management

  • URL Parameters: The dashboard uses URL parameters to manage the state of tickers and columns. The

t

parameter holds the list of tickers, and the

cols

parameter holds the number of columns.

  • Update URL: The URL is updated automatically when tickers are added, deleted, or reordered, ensuring that the state is preserved across sessions.

Responsive Design

  • Responsive Layout: The dashboard adjusts the number of columns based on the screen width. By default, it uses one column for screens narrower than 600px and two columns for wider screens.

Detailed Ticker Information

  • Ticker Cards: Each ticker is displayed in a card format, showing the ticker symbol and additional links for detailed information.
  • Embedded Charts: The dashboard can embed charts and other detailed information for each ticker.

Keyboard Shortcuts

  • Focus Input: Press / to focus the input field.
  • Open Command Dialog: Press Ctrl + K or Cmd + K to open the command dialog.
  • Add Ticker: Press Ctrl + A or Cmd + A to add a new ticker.
  • Delete Ticker: Press Ctrl + D or Cmd + D to delete a ticker.

Usage

  1. Add Tickers: Press Ctrl + A or Cmd + A and enter the ticker symbol in the prompt.
  2. Delete Tickers: Click the delete button (×) next to the ticker name.
  3. Reorder Tickers: Drag and drop tickers to reorder them.
  4. Search Tickers: Press / to focus the input field and type the ticker symbol.
  5. Open Command Dialog: Press Ctrl + K or Cmd + K to open the command dialog and search for tickers.

Technologies Used

This project uses the following libraries and frameworks:

  • React for building the user interface.
  • react-beautiful-dnd for drag-and-drop functionality.
  • Shadcn UI for pre-built, customizable components.
  • Tailwind CSS for styling.
  • Lucide React for icons.
  • TradingView delayed chart widgets for embedded charts (I pay $20/month (US Equities, CME, Cboe, Cboe Indices, Osaka Stock Exchange) just for data on TV and they wouldn't let me use real time chart when embedded :( ).

Access controlled.