WIP

src/components/cards/LimitOrderCard.tsx

@@ -1,6 +1,14 @@
 import Long from 'long';
 import BigNumber from 'bignumber.js';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { LimitOrderType } from '@duality-labs/dualityjs/types/codegen/dualitylabs/duality/dex/tx';
 
 import TabsCard from './TabsCard';
 import Tabs from '../Tabs';
@@ -28,6 +36,7 @@ import { useOrderedTokenPair } from '../../lib/web3/hooks/useTokenPairs';
 import { useTokenPairTickLiquidity } from '../../lib/web3/hooks/useTickLiquidity';
 import { useBankBalanceDisplayAmount } from '../../lib/web3/hooks/useUserBankBalances';
 import RangeListSliderInput from '../inputs/RangeInput/RangeListSliderInput';
+import { LimitOrderContextProvider } from './LimitOrderContext';
 
 export default function LimitOrderCard({
   tokenA,
@@ -37,29 +46,31 @@ export default function LimitOrderCard({
   tokenB?: Token;
 }) {
   return (
-    <TabsCard
-      className="flex limitorder-card"
-      style={{
-        // fix width to a minimum to allow tabs to be of equal size
-        minWidth: '20em',
-      }}
-      tabs={useMemo(() => {
-        return [
-          {
-            nav: 'Buy',
-            Tab: () => <LimitOrderType tokenA={tokenA} tokenB={tokenB} />,
-          },
-          {
-            nav: 'Sell',
-            Tab: () => <LimitOrderType tokenA={tokenA} tokenB={tokenB} sell />,
-          },
-        ];
-      }, [tokenA, tokenB])}
-    />
+    <LimitOrderContextProvider>
+      <TabsCard
+        className="flex limitorder-card"
+        style={{
+          // fix width to a minimum to allow tabs to be of equal size
+          minWidth: '20em',
+        }}
+        tabs={useMemo(() => {
+          return [
+            {
+              nav: 'Buy',
+              Tab: () => <LimitOrderNav tokenA={tokenA} tokenB={tokenB} />,
+            },
+            {
+              nav: 'Sell',
+              Tab: () => <LimitOrderNav tokenA={tokenA} tokenB={tokenB} sell />,
+            },
+          ];
+        }, [tokenA, tokenB])}
+      />
+    </LimitOrderContextProvider>
   );
 }
 
-function LimitOrderType({
+function LimitOrderNav({
   tokenA,
   tokenB,
   sell = false,

src/components/cards/LimitOrderContext.tsx

@@ -0,0 +1,106 @@
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useMemo,
+  useState,
+} from 'react';
+import { LimitOrderType } from '@duality-labs/dualityjs/types/codegen/dualitylabs/duality/dex/tx';
+
+export const orderTypeTextMap: {
+  [key in keyof typeof LimitOrderType]: string;
+} = {
+  IMMEDIATE_OR_CANCEL: 'Market',
+  FILL_OR_KILL: 'Fill-Kill',
+  GOOD_TIL_CANCELLED: 'Limit',
+  GOOD_TIL_TIME: 'Stop Order',
+  JUST_IN_TIME: 'JIT',
+  UNRECOGNIZED: 'Unknown',
+};
+
+export interface FormState {
+  amount: string;
+  limitPrice: string;
+  triggerPrice: string;
+  timeAmount: string;
+  timePeriod: 'seconds' | 'minutes' | 'hours' | 'days' | undefined;
+  execution: keyof typeof LimitOrderType | undefined;
+  slippage: string;
+}
+interface FormSetState {
+  setAmount: Dispatch<SetStateAction<FormState['amount']>>;
+  setLimitPrice: Dispatch<SetStateAction<FormState['limitPrice']>>;
+  setTriggerPrice: Dispatch<SetStateAction<FormState['triggerPrice']>>;
+  setTimeAmount: Dispatch<SetStateAction<FormState['timeAmount']>>;
+  setTimePeriod: Dispatch<SetStateAction<FormState['timePeriod']>>;
+  setExecution: Dispatch<SetStateAction<FormState['execution']>>;
+  setSlippage: Dispatch<SetStateAction<FormState['slippage']>>;
+}
+
+export const LimitOrderFormContext = createContext<Partial<FormState>>({});
+export const LimitOrderFormSetContext = createContext<Partial<FormSetState>>(
+  {}
+);
+
+export function LimitOrderContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [amount, setAmount] = useState('');
+  const [limitPrice, setLimitPrice] = useState('');
+  const [triggerPrice, setTriggerPrice] = useState('');
+  const [timeAmount, setTimeAmount] = useState('');
+  const [timePeriod, setTimePeriod] = useState<FormState['timePeriod']>();
+  const [execution, setExecution] = useState<FormState['execution']>();
+  const [slippage, setSlippage] = useState('');
+
+  const state = useMemo(() => {
+    return {
+      amount,
+      limitPrice,
+      triggerPrice,
+      timeAmount,
+      timePeriod,
+      execution,
+      slippage,
+    };
+  }, [
+    amount,
+    limitPrice,
+    triggerPrice,
+    timeAmount,
+    timePeriod,
+    execution,
+    slippage,
+  ]);
+
+  const setState = useMemo(() => {
+    return {
+      setAmount,
+      setLimitPrice,
+      setTriggerPrice,
+      setTimeAmount,
+      setTimePeriod,
+      setExecution,
+      setSlippage,
+    };
+  }, [
+    setAmount,
+    setLimitPrice,
+    setTriggerPrice,
+    setTimeAmount,
+    setTimePeriod,
+    setExecution,
+    setSlippage,
+  ]);
+
+  return (
+    <LimitOrderFormContext.Provider value={state}>
+      <LimitOrderFormSetContext.Provider value={setState}>
+        {children}
+      </LimitOrderFormSetContext.Provider>
+    </LimitOrderFormContext.Provider>
+  );
+}

src/pages/Orderbook/OrderbookChart.tsx

@@ -77,7 +77,7 @@ export default function OrderBookChart({
         liquidity.push(...data);
         // fetch again if necessary
         next = pagination['next_key'];
-      } while (next);
+      } while (false);
       timeout = setTimeout(poller.poll, 25000);
 
       setChartSeries([

src/pages/Orderbook/OrderbookFooter.tsx

@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
-import { LimitOrderType } from '@duality-labs/dualityjs/types/codegen/dualitylabs/duality/dex/tx';
 
+import { orderTypeTextMap } from '../../components/cards/LimitOrderContext';
 import Table from '../../components/Table/Table';
 import { formatDateTime } from '../../lib/utils/time';
 import { useWeb3 } from '../../lib/web3/useWeb3';
@@ -129,17 +129,6 @@ function findPlaceLimitOrderActionEvent({
   );
 }
 
-const orderTypeTextMap: {
-  [key in keyof typeof LimitOrderType]: string;
-} = {
-  IMMEDIATE_OR_CANCEL: 'Market',
-  FILL_OR_KILL: 'Fill-Kill',
-  GOOD_TIL_CANCELLED: 'Limit',
-  GOOD_TIL_TIME: 'Stop Order',
-  JUST_IN_TIME: 'JIT',
-  UNRECOGNIZED: 'Unknown',
-};
-
 function TypeColumn({ row: tx }: { row: Tx }) {
   const event = tx.tx_result.events.find(findPlaceLimitOrderActionEvent);
   if (event) {