Merge pull request #68 from compolabs/fix/1083-switching-tab

[1083] Correct tab switching

Author: EchoDex

src/screens/TradeScreen/OrderbookAndTradesInterface/OrderbookAndTradesInterface.tsx

@@ -3,29 +3,37 @@ import styled from "@emotion/styled";
 
 import Button, { ButtonGroup } from "@components/Button";
 import SizedBox from "@components/SizedBox";
-import SpotOrderBook from "@screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook";
-import SpotTrades from "@screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades";
 import Text, { TEXT_TYPES } from "@src/components/Text";
 
+import { SpotOrderBook } from "./SpotOrderBook/SpotOrderBook";
+import { SpotOrderbookVMProvider } from "./SpotOrderBook/SpotOrderbookVM";
+import { SpotTrades } from "./SpotTrades/SpotTrades";
+import { SpotTradesVMProvider } from "./SpotTrades/SpotTradesVM";
+
 const OrderbookAndTradesInterface: React.FC = () => {
   const [isOrderbook, setIsOrderbook] = useState(true);
+
   return (
-    <Root>
-      <ButtonGroup style={{ padding: "0 12px" }}>
-        <Button active={isOrderbook} onClick={() => setIsOrderbook(true)}>
-          <Text primary={isOrderbook} type={TEXT_TYPES.BUTTON_SECONDARY}>
-            orderbook
-          </Text>
-        </Button>
-        <Button active={!isOrderbook} onClick={() => setIsOrderbook(false)}>
-          <Text primary={!isOrderbook} type={TEXT_TYPES.BUTTON_SECONDARY}>
-            trades
-          </Text>
-        </Button>
-      </ButtonGroup>
-      <SizedBox height={8} />
-      {isOrderbook ? <SpotOrderBook /> : <SpotTrades />}
-    </Root>
+    <SpotOrderbookVMProvider>
+      <SpotTradesVMProvider>
+        <Root>
+          <ButtonGroup style={{ padding: "0 12px" }}>
+            <Button active={isOrderbook} onClick={() => setIsOrderbook(true)}>
+              <Text primary={isOrderbook} type={TEXT_TYPES.BUTTON_SECONDARY}>
+                orderbook
+              </Text>
+            </Button>
+            <Button active={!isOrderbook} onClick={() => setIsOrderbook(false)}>
+              <Text primary={!isOrderbook} type={TEXT_TYPES.BUTTON_SECONDARY}>
+                trades
+              </Text>
+            </Button>
+          </ButtonGroup>
+          <SizedBox height={8} />
+          {isOrderbook ? <SpotOrderBook /> : <SpotTrades />}
+        </Root>
+      </SpotTradesVMProvider>
+    </SpotOrderbookVMProvider>
   );
 };