few enhancements

1. only trades screen is protected 2. better ui experience
mnsrulz · Aug 22, 2024 · 8ba7a1c · 8ba7a1c
1 parent 579688d
commit 8ba7a1c
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 134 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "match-sorter": "^6.3.4",
     "next": "14.2.2",
     "next-auth": "^5.0.0-beta.16",
+    "nuqs": "^1.17.8",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.2",

diff --git a/src/app/api/symbols/[symbol]/summary/route.ts b/src/app/api/symbols/[symbol]/summary/route.ts
@@ -1,17 +1,16 @@
+import { getCurrentPrice } from "@/lib/stockService";
 import { StockPriceData } from "@/lib/types";
 import ky from "ky";
 import { NextResponse } from "next/server";
 //export const runtime = 'edge'; //This specifies the runtime environment that the middleware function will be executed in.
 
 export async function GET(request: Request, p: { params: { symbol: string } }) {
-    const priceresp = await ky(`https://www.optionsprofitcalculator.com/ajax/getStockPrice?stock=${p.params.symbol}&reqId=${new Date().getTime()}`, {
-        retry: {
-            limit: 3
-        }
-    }).json<{ price: { last: number | undefined } }>();
+    const resp = await getCurrentPrice(p.params.symbol)
     return NextResponse.json({
         quoteSummary: {
-            price: { regularMarketPrice: priceresp.price.last as number }
+            price: {
+                regularMarketPrice: resp.price.last
+            }
         }
     } as StockPriceData);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import TabsRouter from "./routes";
 import { CssBaseline } from "@mui/material";
+import { SessionProvider } from "next-auth/react";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,10 +19,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className} style={{padding: 12 }}>
+      <body className={inter.className} style={{ padding: 12 }}>
         <CssBaseline />
-        <TabsRouter />
-          {children}
+        <SessionProvider>
+          <TabsRouter />
+        </SessionProvider>
+        {children}
       </body>
     </html>
   );

diff --git a/src/app/routes.tsx b/src/app/routes.tsx
@@ -17,7 +17,7 @@ import { useState } from 'react';
 import MenuIcon from '@mui/icons-material/Menu';
 import AdbIcon from '@mui/icons-material/Adb';
 import AccountCircle from '@mui/icons-material/AccountCircle';
-import { signOut } from 'next-auth/react'
+import { signIn, signOut, useSession } from 'next-auth/react'
 
 /*
 <Button><Link href="/" className=''>Home</Link></Button>
@@ -96,6 +96,7 @@ function CurrentRoute() {
 export default function TabsRouter() {
     const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
     const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+    const session = useSession();
 
     const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorElNav(event.currentTarget);
@@ -231,7 +232,7 @@ export default function TabsRouter() {
                         </Box>
 
                         <Box sx={{ flexGrow: 0 }}>
-                            <Tooltip title="Open settings">
+                            <Tooltip title="User settings">
                                 <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                                     <AccountCircle />
                                 </IconButton>
@@ -252,14 +253,17 @@ export default function TabsRouter() {
                                 open={Boolean(anchorElUser)}
                                 onClose={handleCloseUserMenu}
                             >
-                                {/* {settings.map((setting) => (
-                                    <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                                        <Typography textAlign="center">{setting}</Typography>
+                                {session.status == 'authenticated' ? (
+                                    <>
+                                        <MenuItem key='signout' onClick={handleSignout}>
+                                            <Typography textAlign="center">Sign Out</Typography>
+                                        </MenuItem>
+                                    </>
+                                ) : (
+                                    <MenuItem key='signout' onClick={() => signIn()}>
+                                        <Typography textAlign="center">Sign In</Typography>
                                     </MenuItem>
-                                ))} */}
-                                <MenuItem key='signout' onClick={handleSignout}>
-                                    <Typography textAlign="center">Sign Out</Typography>
-                                </MenuItem>
+                                )}
                             </Menu>
                         </Box>
                     </Toolbar>

diff --git a/src/components/DeltaGammaHedging.tsx b/src/components/DeltaGammaHedging.tsx
@@ -1,108 +1,23 @@
-import { Dialog, DialogContent, DialogActions, Button, Typography, LinearProgress, FormControl, InputLabel, MenuItem, Select, Tab, Tabs, Paper, CircularProgress, Box } from "@mui/material";
+import { Dialog, DialogContent, DialogActions, Button, Typography, LinearProgress, FormControl, InputLabel, MenuItem, Select, Tab, Tabs, Paper, Box } from "@mui/material";
 import { BarChart } from '@mui/x-charts/BarChart';
-import { axisClasses, ChartsReferenceLine } from '@mui/x-charts';
+import { ChartsReferenceLine } from '@mui/x-charts';
 import { OptionsHedgingData, useDeltaGammaHedging } from "@/lib/socket";
-import { useState } from "react";
 import { getColorPallete } from "@/lib/color";
-import { currencyFormatter, fixedCurrencyFormatter, humanAbsCurrencyFormatter } from "@/lib/formatters";
+import { humanAbsCurrencyFormatter } from "@/lib/formatters";
+import { useQueryState, parseAsInteger, parseAsStringEnum } from "nuqs";
 
 interface ITickerProps {
     symbol: string,
     onClose: () => void
 }
 
-// const data = [
-//     { strike: 67.5, exposure: 200 },
-//     { strike: 69.0, exposure: -300 },
-//     { strike: 70.5, exposure: 400 },
-//     { strike: 72.0, exposure: -150 },
-//     { strike: 73.5, exposure: 350 },
-//     { strike: 75.0, exposure: -250 },
-//     { strike: 76.5, exposure: 100 },
-//     { strike: 78.0, exposure: -50 },
-//     { strike: 79.5, exposure: 450 },
-//     { strike: 81.0, exposure: -100 },
-//     { strike: 82.5, exposure: 200 },
-// ];
-
-// const seriesA = {
-//     data: [2, 3, 1, 4, 5],
-//     label: 'Series A',
-// };
-// const seriesB = {
-//     data: [3, 1, 4, 2, 1],
-//     label: 'Series B',
-// };
-// const seriesC = {
-//     data: [3, 2, 4, 5, 1],
-//     label: 'Series C',
-// };
-
-// const valueFormatter = (value: number | null) => `${value}`;
-// const chartSetting = {
-//     yAxis: [
-//         {
-//             label: 'Open interest',
-//         },
-//     ],
-//     // width: 500,
-//     colors: ['red', 'green'],
-//     height: 500,
-//     sx: {
-//         [`.${axisClasses.left} .${axisClasses.label}`]: {
-//             //transform: 'translate(-20px, 0)',
-//         },
-//     },
-// };
-
-
-/*
-
-
-
-
-
-
-
-
-
-
-
-
-*/
-
-// const colorCodes = [
-//     '#a32020',
-//     '#e0301e',
-//     '#eb8c00',
-//     '#dc6900',
-
-//     '#005073',
-//     '#107dac',
-//     '#189ad3',
-//     '#1ebbd7',
-//     '#71c7ec',
-
-//     '#234d20',
-//     '#36802d',
-//     '#77ab59',
-//     '#c9df8a',
-//     '#f0f7da',
-
-//     '#bf8bff',
-//     '#dabcff'
-// ];
-
-//deepOrange
-// const colorCodes = [
-//     "#A52A2A", "#FF3333", "#FF5733", "#FF8C33", "#FFA07A",
-//     "#228B22", "#33FF33", "#8CFF33", "#ADFF33", "#98FB98",
-//     "#4169E1", "#3333FF", "#3357FF", "#338CFF", "#87CEFA",
-//     "#B8860B", "#FFD700", "#FFEB3B", "#FFFACD", "#FFFFE0"
-// ]
-
 const colorCodes = getColorPallete();
 
+enum DexGexType {
+    'DEX' = 'DEX',
+    'GEX' = 'GEX'
+}
+
 interface IExpo {
     data: OptionsHedgingData,
     exposure: 'dex' | 'gex',
@@ -194,14 +109,11 @@ const Expo = (props: IExpo) => {
 
 export const DeltaGammaHedging = (props: ITickerProps) => {
     const { onClose } = props;
-    const [dte, setDte] = useState(50);
-    const [strikeCounts, setStrikesCount] = useState(30);
-    const { data, isLoading } = useDeltaGammaHedging(props.symbol, dte, strikeCounts);
-    const [value, setValue] = useState(0);
+    const [dte, setDte] = useQueryState('dte', parseAsInteger.withDefault(50));
+    const [strikeCounts, setStrikesCount] = useQueryState('sc', parseAsInteger.withDefault(30));
 
-    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-        setValue(newValue);
-    };
+    const { data, isLoading } = useDeltaGammaHedging(props.symbol, dte, strikeCounts);
+    const [gexTab, setGexTab] = useQueryState<DexGexType>('dgextab', parseAsStringEnum<DexGexType>(Object.values(DexGexType)).withDefault(DexGexType.DEX));
 
     // if (isLoading) return <LinearProgress />;
     // if (!data) return <div>No data to show!!!</div>;
@@ -242,19 +154,19 @@ export const DeltaGammaHedging = (props: ITickerProps) => {
                 </FormControl>
                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                     <Tabs
-                        value={value}
-                        onChange={handleChange}
+                        value={gexTab}
+                        onChange={(e, v) => setGexTab(v)}
                         indicatorColor="secondary"
                         textColor="inherit"
                         variant="fullWidth"
                         aria-label="full width tabs example"
                     >
-                        <Tab label="Dex"></Tab>
-                        <Tab label="Gex"></Tab>
+                        <Tab label="Dex" value={'DEX'}></Tab>
+                        <Tab label="Gex" value={'GEX'}></Tab>
                     </Tabs>
                 </Box>
                 {
-                    isLoading ? <LinearProgress /> : data ? <Expo data={data} exposure={value == 0 ? 'dex' : 'gex'} symbol={props.symbol} dte={dte} /> : <div>no data...</div>
+                    isLoading ? <LinearProgress /> : data ? <Expo data={data} exposure={gexTab == DexGexType.DEX ? 'dex' : 'gex'} symbol={props.symbol} dte={dte} /> : <div>no data...</div>
                 }
             </DialogContent>
             <DialogActions>

diff --git a/src/components/add-trade.tsx b/src/components/add-trade.tsx
@@ -57,7 +57,7 @@ import ky from 'ky';
 export const AddTradeDialog = (props: ITickerProps) => {
     const { onClose, open, ticker } = props;
     const theme = useTheme();
-    const matches = useMediaQuery(theme.breakpoints.down('sm'));
+    const showFullScreenDialog = useMediaQuery(theme.breakpoints.down('sm'));
 
     if (!open) return <div></div>
     const handleSubmit = async (data: any) => {
@@ -84,7 +84,7 @@ export const AddTradeDialog = (props: ITickerProps) => {
     return <Dialog
         open={open}
         // maxWidth={'md'}
-        fullScreen={matches}
+        fullScreen={showFullScreenDialog}
         fullWidth={true}
         onClose={onCloseRequest}>
         <FormContainer onSuccess={handleSubmit} defaultValues={dv}>

diff --git a/src/components/mystocks.tsx b/src/components/mystocks.tsx
@@ -88,7 +88,7 @@ export const MyStockList = (props: ITickerProps) => {
   const handleCloseAddTrade = () => { setOpenAddTrade(false); };
   const descriptionElementRef = React.useRef<HTMLElement>(null);
   return <div>
-    <h1>my stocks</h1>
+    <h1>Watchlist</h1>
     {/* <ul>
             {mytickers.map(m => <li key={m.symbol}>{m.name} -- {m.symbol} <Button onClick={()=>RemoveItemFromMyList(m)}>Remove</Button></li>)}
         </ul> */}