Add form inputs

src/components/Main.tsx

@@ -1,7 +1,10 @@
 import { Instrument } from '@/types';
+import { getExpiryOptions } from '@/utils/ui';
 import { FormEvent, useState } from 'react';
 import { Table } from './Table';
 
+const expiryOptions = getExpiryOptions();
+
 export function Main() {
   const [isStarted, setIsStarted] = useState(false);
   const [instruments, setInstruments] = useState<Instrument[]>([]);
@@ -32,9 +35,50 @@ export function Main() {
   return (
     <main>
       <form
-        className="max-w-5xl mx-auto mt-6 rounded-lg py-6 bg-zinc-50 dark:bg-zinc-800 dark:bg-white/5 ring-1 ring-zinc-200 dark:ring-1 dark:ring-white/10 flex items-end px-4 sm:px-6 lg:px-8 [&>*:first-child]:grow"
+        className="max-w-5xl mx-auto mt-6 rounded-lg py-6 bg-zinc-50 dark:bg-zinc-800 dark:bg-white/5 ring-1 ring-zinc-200 dark:ring-1 dark:ring-white/10 flex justify-between items-end px-8"
         onSubmit={handleFormSubmit}
-      ></form>
+      >
+        <div>
+          <label
+            htmlFor="entryBasis"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Entry Basis %
+          </label>
+          <div className="mt-1">
+            <input
+              type="number"
+              defaultValue={0}
+              name="entryBasis"
+              id="entryBasis"
+              className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+        <div>
+          <label
+            htmlFor="expiry"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Expiry
+          </label>
+          <select
+            id="expiry"
+            name="expiry"
+            className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
+          >
+            {expiryOptions.map((o) => (
+              <option>{o}</option>
+            ))}
+          </select>
+        </div>
+        <button
+          type="submit"
+          className="px-8 py-2 text-base font-medium rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          {isStarted ? 'Stop' : 'Start'}
+        </button>
+      </form>
       {isStarted && <Table instruments={instruments} entryBasis={entryBasis} />}
     </main>
   );

src/components/Table.tsx

@@ -61,11 +61,33 @@ export function Table({ instruments, entryBasis }: TableProps) {
     >();
     const tokensToSubscribe: number[] = [];
     for (const i of instruments) {
+      const name = i.instrumentType === 'EQ' ? i.tradingSymbol : i.name;
       tokenToNameMap.set(i.instrumentToken, {
-        name: i.instrumentType === 'EQ' ? i.tradingSymbol : i.name,
+        name: name,
         type: i.instrumentType,
       });
       tokensToSubscribe.push(i.instrumentToken);
+
+      const foundInstrument = rows.find((r) => r.name === name);
+      if (foundInstrument) {
+        if (i.instrumentType === 'EQ') {
+          foundInstrument.equityTradingSymbol = name;
+        } else {
+          foundInstrument.futureTradingSymbol = i.tradingSymbol;
+        }
+      } else {
+        rows.push({
+          name: name,
+          lotSize: i.lotSize,
+          equityTradingSymbol: i.instrumentType === 'EQ' ? name : '',
+          equityAsk: 0,
+          futureTradingSymbol:
+            i.instrumentType === 'FUT' ? i.tradingSymbol : '',
+          futureBid: 0,
+          basis: 0,
+          basisPercent: 0,
+        });
+      }
     }
 
     const ws = new WebSocket(
@@ -75,7 +97,7 @@ export function Table({ instruments, entryBasis }: TableProps) {
     ws.onopen = (_event) => {
       console.log('Connected to Zerodha Kite Socket!');
 
-      const setModeMessage = { a: 'mode', v: ['full', [61512711]] };
+      const setModeMessage = { a: 'mode', v: ['full', tokensToSubscribe] };
       ws.send(JSON.stringify(setModeMessage));
     };
 

src/utils/ui.ts

@@ -1,2 +1,28 @@
 export const cx = (...classes: (boolean | string)[]) =>
   classes.filter(Boolean).join(' ');
+
+const getPaddedMonth = (monthIndex: number) =>
+  (monthIndex + 1).toLocaleString('en-US', {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  });
+
+export const getExpiryOptions = () => {
+  const date = new Date();
+  let currentMonthIndex = date.getMonth();
+  let currentYear = date.getFullYear();
+
+  const options: string[] = [];
+
+  for (let i = 0; i < 3; i++) {
+    options.push(`${currentYear}-${getPaddedMonth(currentMonthIndex)}`);
+
+    currentMonthIndex = currentMonthIndex + 1;
+    if (currentMonthIndex > 11) {
+      currentMonthIndex = 0;
+      currentYear = currentYear + 1;
+    }
+  }
+
+  return options;
+};