Only use MarketProvider on pages where it's relevant

SOL-CAT · Dec 11, 2020 · d58040e · d58040e
1 parent 09a293d
commit d58040e
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 51 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,15 +15,13 @@ export default function App() {
       <GlobalStyle />
       <ErrorBoundary>
         <ConnectionProvider>
-          <MarketProvider>
-            <WalletProvider>
-              <PreferencesProvider>
-                <Suspense fallback={() => <Spin size="large" />}>
-                  <Routes />
-                </Suspense>
-              </PreferencesProvider>
-            </WalletProvider>
-          </MarketProvider>
+          <WalletProvider>
+            <PreferencesProvider>
+              <Suspense fallback={() => <Spin size="large" />}>
+                <Routes />
+              </Suspense>
+            </PreferencesProvider>
+          </WalletProvider>
         </ConnectionProvider>
       </ErrorBoundary>
     </Suspense>

diff --git a/src/components/ConvertForm.tsx b/src/components/ConvertForm.tsx
@@ -9,6 +9,7 @@ import {
   getMarketOrderPrice,
   getSelectedTokenAccountForMint,
   useBalances,
+  useCustomMarkets,
   useMarket,
   useTokenAccounts,
 } from '../utils/markets';
@@ -39,7 +40,7 @@ const ConvertButton = styled(Button)`
 
 export default function ConvertForm() {
   const { connected, wallet } = useWallet();
-  const { customMarkets } = useMarket();
+  const { customMarkets } = useCustomMarkets();
   const marketInfos = getMarketInfos(customMarkets);
   const { market, setMarketAddress } = useMarket();
 

diff --git a/src/components/UserInfoTable/WalletBalancesTable.tsx b/src/components/UserInfoTable/WalletBalancesTable.tsx
@@ -7,7 +7,6 @@ import { useConnection } from '../../utils/connection';
 import { useWallet } from '../../utils/wallet';
 import {
   useAllMarkets,
-  useMarket,
   useSelectedTokenAccounts,
   useTokenAccounts,
 } from '../../utils/markets';
@@ -30,8 +29,7 @@ export default function WalletBalancesTable({
   const { wallet, connected } = useWallet();
   const [selectedTokenAccounts] = useSelectedTokenAccounts();
   const [tokenAccounts, tokenAccountsConnected] = useTokenAccounts();
-  const { customMarkets } = useMarket();
-  const [allMarkets, allMarketsConnected] = useAllMarkets(customMarkets);
+  const [allMarkets, allMarketsConnected] = useAllMarkets();
   const [settlingFunds, setSettlingFunds] = useState(false);
 
   async function onSettleFunds() {

diff --git a/src/pages/ConvertPage.tsx b/src/pages/ConvertPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import ConvertForm from '../components/ConvertForm';
 import { Row, Col } from 'antd';
+import { MarketProvider } from '../utils/markets';
 
 const Wrapper = styled.div`
   height: 100%;
@@ -18,7 +19,9 @@ export default function ConvertPage() {
     <Wrapper style={{ flex: 1, paddingTop: 10 }}>
       <Row justify="center">
         <Col>
-          <ConvertForm />
+          <MarketProvider>
+            <ConvertForm />
+          </MarketProvider>
         </Col>
       </Row>
     </Wrapper>

diff --git a/src/pages/OpenOrdersPage.tsx b/src/pages/OpenOrdersPage.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
 import FloatingElement from '../components/layout/FloatingElement';
 import {
-  getMarketInfos,
   useAllMarkets,
   useAllOpenOrders,
-  useMarket,
+  useMarketInfos,
 } from '../utils/markets';
 import OpenOrderTable from '../components/UserInfoTable/OpenOrderTable';
 import { Button } from 'antd';
 import { OrderWithMarketAndMarketName } from '../utils/types';
 
 export default function OpenOrdersPage() {
   const { openOrders, loaded, refreshOpenOrders } = useAllOpenOrders();
-  let { customMarkets } = useMarket();
-  let marketInfos = getMarketInfos(customMarkets);
+  let marketInfos = useMarketInfos();
   let marketAddressesToNames = Object.fromEntries(
     marketInfos.map((info) => [info.address.toBase58(), info.name]),
   );
-  let [allMarkets] = useAllMarkets(customMarkets);
+  let [allMarkets] = useAllMarkets();
   const marketsByAddress = Object.fromEntries(
     (allMarkets || []).map((marketInfo) => [
       marketInfo.market.address.toBase58(),

diff --git a/src/pages/TradePage.tsx b/src/pages/TradePage.tsx
@@ -9,6 +9,7 @@ import {
   useMarketsList,
   useUnmigratedDeprecatedMarkets,
   getMarketInfos,
+  MarketProvider,
 } from '../utils/markets';
 import TradeForm from '../components/TradeForm';
 import TradesTable from '../components/TradesTable';
@@ -35,6 +36,14 @@ const Wrapper = styled.div`
 `;
 
 export default function TradePage() {
+  return (
+    <MarketProvider>
+      <TradePageInner />
+    </MarketProvider>
+  );
+}
+
+function TradePageInner() {
   const {
     market,
     marketName,
@@ -83,7 +92,7 @@ export default function TradePage() {
       [],
     ),
   };
-  const getComponent = useCallback(() => {
+  const component = (() => {
     if (handleDeprecated) {
       return (
         <DeprecatedMarketsPage
@@ -97,7 +106,7 @@ export default function TradePage() {
     } else {
       return <RenderNormal {...componentProps} />;
     }
-  }, [width, componentProps, handleDeprecated]);
+  })();
 
   const onAddCustomMarket = (customMarket) => {
     const marketInfo = getMarketInfos(customMarkets).some(
@@ -176,7 +185,7 @@ export default function TradePage() {
             </React.Fragment>
           )}
         </Row>
-        {getComponent()}
+        {component}
       </Wrapper>
     </>
   );

diff --git a/src/utils/markets.tsx b/src/utils/markets.tsx
@@ -53,8 +53,9 @@ export function useMarketsList() {
   return USE_MARKETS.filter(({ deprecated }) => !deprecated);
 }
 
-export function useAllMarkets(customMarkets) {
+export function useAllMarkets() {
   const connection = useConnection();
+  const { customMarkets } = useCustomMarkets();
 
   const getAllMarkets = async () => {
     const markets: Array<{
@@ -212,14 +213,19 @@ export function getMarketDetails(
   };
 }
 
+export function useCustomMarkets() {
+  const [customMarkets, setCustomMarkets] = useLocalStorageState<
+    CustomMarketInfo[]
+  >('customMarkets', []);
+  return { customMarkets, setCustomMarkets };
+}
+
 export function MarketProvider({ children }) {
   const [marketAddress, setMarketAddress] = useLocalStorageState(
     'marketAddress',
     DEFAULT_MARKET?.address.toBase58(),
   );
-  const [customMarkets, setCustomMarkets] = useLocalStorageState<
-    CustomMarketInfo[]
-  >('customMarkets', []);
+  const { customMarkets, setCustomMarkets } = useCustomMarkets();
 
   const address = marketAddress && new PublicKey(marketAddress);
   const connection = useConnection();
@@ -611,8 +617,7 @@ export function useFillsForAllMarkets(limit = 100) {
   const { connected, wallet } = useWallet();
 
   const connection = useConnection();
-  // todo: add custom markets
-  const allMarkets = useAllMarkets([]);
+  const allMarkets = useAllMarkets();
 
   async function getFillsForAllMarkets() {
     let fills: Trade[] = [];
@@ -667,8 +672,7 @@ export function useFillsForAllMarkets(limit = 100) {
 export function useAllOpenOrdersAccounts() {
   const { wallet, connected } = useWallet();
   const connection = useConnection();
-  const { customMarkets } = useMarket();
-  const marketInfos = getMarketInfos(customMarkets);
+  const marketInfos = useMarketInfos();
   const programIds = [
     ...new Set(marketInfos.map((info) => info.programId.toBase58())),
   ].map((stringProgramId) => new PublicKey(stringProgramId));
@@ -692,7 +696,7 @@ export function useAllOpenOrdersAccounts() {
       connection,
       connected,
       wallet?.publicKey?.toBase58(),
-      customMarkets.length,
+      marketInfos.length,
       (programIds || []).length,
     ),
     { refreshInterval: _SLOW_REFRESH_INTERVAL },
@@ -705,8 +709,7 @@ export function useAllOpenOrdersBalances() {
     loadedOpenOrdersAccounts,
   ] = useAllOpenOrdersAccounts();
   const [mintInfos, mintInfosConnected] = useMintInfos();
-  const { customMarkets } = useMarket();
-  const [allMarkets] = useAllMarkets(customMarkets);
+  const [allMarkets] = useAllMarkets();
   if (!loadedOpenOrdersAccounts || !mintInfosConnected) {
     return {};
   }
@@ -772,8 +775,7 @@ export function useAllOpenOrders(): {
     openOrdersAccounts,
     openOrdersAccountsConnected,
   ] = useAllOpenOrdersAccounts();
-  const { customMarkets } = useMarket();
-  const [marketInfos, marketInfosConnected] = useAllMarkets(customMarkets);
+  const [marketInfos, marketInfosConnected] = useAllMarkets();
   const openOrdersAccountsByAddress: {
     [marketAddress: string]: OpenOrders[];
   } = {};
@@ -992,10 +994,7 @@ export function useGetOpenOrdersForDeprecatedMarkets(): {
   refreshOpenOrders: () => void;
 } {
   const { connected, wallet } = useWallet();
-  const [customMarkets] = useLocalStorageState<CustomMarketInfo[]>(
-    'customMarkets',
-    [],
-  );
+  const { customMarkets } = useCustomMarkets();
   const connection = useConnection();
   const marketsAndOrders = useUnmigratedDeprecatedMarkets();
   const marketsList =
@@ -1140,7 +1139,7 @@ export function getMarketInfos(
 }
 
 export function useMarketInfos() {
-  const { customMarkets } = useMarket();
+  const { customMarkets } = useCustomMarkets();
   return getMarketInfos(customMarkets);
 }
 

diff --git a/src/utils/preferences.tsx b/src/utils/preferences.tsx
@@ -5,9 +5,8 @@ import { useConnection } from './connection';
 import { useWallet } from './wallet';
 import {
   useAllMarkets,
-  useTokenAccounts,
-  useMarket,
   useSelectedTokenAccounts,
+  useTokenAccounts,
 } from './markets';
 import { settleAllFunds } from './send';
 import { PreferencesContextValues } from './types';
@@ -24,8 +23,7 @@ export function PreferencesProvider({ children }) {
 
   const [tokenAccounts] = useTokenAccounts();
   const { connected, wallet } = useWallet();
-  const { customMarkets } = useMarket();
-  const [marketList] = useAllMarkets(customMarkets);
+  const [marketList] = useAllMarkets();
   const connection = useConnection();
   const [selectedTokenAccounts] = useSelectedTokenAccounts();
 

diff --git a/src/utils/tokens.tsx b/src/utils/tokens.tsx
@@ -4,7 +4,7 @@ import { AccountInfo, Connection, PublicKey } from '@solana/web3.js';
 import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions';
 import { TokenAccount } from './types';
 import { TOKEN_MINTS } from '@project-serum/serum';
-import { useAllMarkets, useMarket, useTokenAccounts } from './markets';
+import { useAllMarkets, useCustomMarkets, useTokenAccounts } from './markets';
 import { getMultipleSolanaAccounts } from './send';
 import { useConnection } from './connection';
 import { useAsyncData } from './fetch-loop';
@@ -146,8 +146,8 @@ export async function getTokenAccountInfo(
 }
 
 export function useMintToTickers(): { [mint: string]: string } {
-  const { customMarkets } = useMarket();
-  const [markets] = useAllMarkets(customMarkets);
+  const { customMarkets } = useCustomMarkets();
+  const [markets] = useAllMarkets();
   return useMemo(() => {
     const mintsToTickers = Object.fromEntries(
       TOKEN_MINTS.map((mint) => [mint.address.toBase58(), mint.name]),
@@ -191,9 +191,8 @@ export function useMintInfos(): [
   boolean,
 ] {
   const connection = useConnection();
-  const { customMarkets } = useMarket();
   const [tokenAccounts] = useTokenAccounts();
-  const [allMarkets] = useAllMarkets(customMarkets);
+  const [allMarkets] = useAllMarkets();
 
   const allMints = (tokenAccounts || [])
     .map((account) => account.effectiveMint)

diff --git a/src/utils/utils.tsx b/src/utils/utils.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { PublicKey } from '@solana/web3.js';
 import BN from 'bn.js';
 
@@ -111,7 +111,7 @@ export function useLocalStorageState<T = any>(
     JSON.stringify(defaultState),
   );
   return [
-    stringState && JSON.parse(stringState),
+    useMemo(() => stringState && JSON.parse(stringState), [stringState]),
     (newState) => setStringState(JSON.stringify(newState)),
   ];
 }