Merge pull request #551 from soroswap/refactor/ProtocolsToggle

Refactor protocols toggle logic

cypress/component/liquidity.test.tsx

@@ -1,6 +1,6 @@
 import '../../styles/globals.css';
 import MockRouter from '../utils/router';
-import Providers from 'components/Providers';
+import Providers from 'components/Providers/Providers';
 import AddLiquidityComponent from 'components/Liquidity/Add/AddLiquidityComponent';
 import { mockedFreighterConnector, sleep, testnetXLM } from '../utils/utils';
 import { useApiTokens } from 'hooks/tokens/useApiTokens';

cypress/component/swap.test.tsx

@@ -4,7 +4,7 @@ import { Field } from 'state/swap/actions';
 import { SetStateAction } from 'react';
 import { SwapComponent, SwapStateProps } from 'components/Swap/SwapComponent';
 import MockRouter from '../utils/router';
-import Providers from 'components/Providers';
+import Providers from 'components/Providers/Providers';
 import { mockedFreighterConnector, sleep, testnetXLM } from '../utils/utils';
 
 interface MockedSwapPageProps {

cypress/utils/utils.ts

@@ -8,7 +8,7 @@ export const walletAddress = 'GCHR5WWPDFF3U3HP2NA6TI6FCQPYEWS3UOPIPJKZLAAFM57CEG
 
 export const mockedFreighterConnector = {
   ...freighter(),
-  isConnected: () => true,
+  isConnected: () => Promise.resolve(true),
   getPublicKey: () => Promise.resolve(walletAddress),
 };
 

pages/_app.tsx

@@ -1,7 +1,7 @@
 import type { AppProps } from 'next/app';
 import '../styles/globals.css';
 
-import Providers from 'components/Providers';
+import Providers from 'components/Providers/Providers';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (

src/components/Providers/ContextProvider.tsx

@@ -0,0 +1,92 @@
+import { Analytics } from '@vercel/analytics/react';
+import { AppContext, AppContextType, SnackbarIconType, ProtocolsStatus } from 'contexts';
+import { useEffect, useMemo, useState } from 'react';
+import MainLayout from '../Layout/MainLayout';
+import { useSorobanReact } from '@soroban-react/core';
+import config from 'configs/protocols.config.json'
+import { Protocols } from 'soroswap-router-sdk';
+import { PlatformType } from 'state/routing/types';
+import { useAggregator } from 'hooks/useAggregator';
+
+
+export default function ContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const sorobanContext = useSorobanReact();
+  const { activeChain } = sorobanContext;
+  const { isEnabled: isAggregator } = useAggregator();
+  const [isConnectWalletModal, setConnectWalletModal] = useState<boolean>(false);
+  const [maxHops, setMaxHops] = useState<number>(2);
+  const [protocolsStatus, setProtocolsStatus] = useState<ProtocolsStatus[]>([]);
+  const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
+  const [snackbarMessage, setSnackbarMessage] = useState<string>('');
+  const [snackbarTitle, setSnackbarTitle] = useState<string>('Swapped');
+  const [snackbarType, setSnackbarType] = useState<SnackbarIconType>(SnackbarIconType.SWAP);
+
+  const appContextValues: AppContextType = {
+    ConnectWalletModal: {
+      isConnectWalletModalOpen: isConnectWalletModal,
+      setConnectWalletModalOpen: setConnectWalletModal,
+    },
+    SnackbarContext: {
+      openSnackbar,
+      snackbarMessage,
+      snackbarTitle,
+      snackbarType,
+      setOpenSnackbar,
+      setSnackbarMessage,
+      setSnackbarTitle,
+      setSnackbarType,
+    },
+    Settings: {
+      maxHops,
+      setMaxHops,
+      protocolsStatus,
+      setProtocolsStatus,
+    },
+  };
+
+  const defaultProtocolsStatus: ProtocolsStatus[] = useMemo(() => {
+    if (activeChain?.id === 'testnet') {
+      return config['testnet'] as ProtocolsStatus[];
+    } else {
+      return config['mainnet'] as ProtocolsStatus[];
+    }
+  }, [activeChain]);
+
+  useEffect(() => {
+    let protocols: ProtocolsStatus[] = [];
+    for (let protocol of defaultProtocolsStatus) {
+      const key = protocol.key;
+      protocols.push({
+        key: key.toLocaleLowerCase() === 'sdex' ? PlatformType.STELLAR_CLASSIC : key,
+        value: protocol.value,
+      });
+    }
+    if (isAggregator === false) {
+      switch (activeChain?.id) {
+        case 'testnet':
+          protocols = protocols.filter((protocol) => protocol.key == Protocols.SOROSWAP);
+          break;
+        case 'mainnet':
+          protocols = protocols.filter((protocol) => protocol.key == Protocols.SOROSWAP || protocol.key == PlatformType.STELLAR_CLASSIC);
+          break;
+      }
+    }
+    if (activeChain?.id == 'testnet') {
+      protocols = protocols.filter((protocol) => protocol.key != PlatformType.STELLAR_CLASSIC);
+    }
+    setProtocolsStatus(protocols);
+  }, [defaultProtocolsStatus, isAggregator, activeChain?.id]);
+
+  return (
+    <AppContext.Provider value={appContextValues}>
+      <MainLayout>
+        {children}
+        <Analytics />
+      </MainLayout>
+    </AppContext.Provider>
+  );
+}

src/components/Providers/Providers.tsx

@@ -0,0 +1,43 @@
+import { ColorModeContext } from 'contexts';
+import { Provider } from 'react-redux';
+import { useMemo, useState } from 'react';
+import InkathonProvider from 'inkathon/InkathonProvider';
+import MySorobanReactProvider from 'soroban/MySorobanReactProvider';
+import store from 'state';
+import { SorobanContextType } from '@soroban-react/core';
+import { SoroswapThemeProvider } from 'soroswap-ui';
+import ContextProvider from './ContextProvider';
+
+export default function Providers({
+  children,
+  sorobanReactProviderProps,
+}: {
+  children: React.ReactNode;
+  sorobanReactProviderProps?: Partial<SorobanContextType>;
+}) {
+  const [mode, setMode] = useState<'light' | 'dark'>('dark');
+  const colorMode = useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Provider store={store}>
+      <InkathonProvider>
+        <ColorModeContext.Provider value={colorMode}>
+          <SoroswapThemeProvider theme={mode}>
+            <MySorobanReactProvider {...sorobanReactProviderProps}>
+              <ContextProvider>
+                {children}
+              </ContextProvider>
+            </MySorobanReactProvider>
+          </SoroswapThemeProvider>
+        </ColorModeContext.Provider>
+      </InkathonProvider>
+    </Provider>
+  );
+}

src/configs/protocols.config.json

@@ -0,0 +1,30 @@
+{
+  "mainnet": [
+    {
+      "key": "sdex",
+      "value": true
+    },
+    {
+      "key": "soroswap",
+      "value": true
+    },
+    {
+      "key": "phoenix",
+      "value": false
+    }
+  ],
+  "testnet": [
+    {
+      "key": "soroswap",
+      "value": true
+    },
+    {
+      "key": "phoenix",
+      "value": true
+    },
+    {
+      "key": "sdex",
+      "value": false
+    }
+  ]
+}

src/functions/generateRoute.ts

@@ -62,55 +62,6 @@ export const useRouterSDK = () => {
 
   const network = sorobanContext.activeChain?.networkPassphrase as Networks;
 
-  const getValuebyKey = (key: string) => {
-    let value = protocolsStatus.find((p) => p.key === key)?.value;
-    // Soroswap will be activatewd by defaul
-    if (value === undefined && key === Protocols.SOROSWAP) {
-      return true;
-    }
-    // SDEX will be activated by defaul
-    if (value === undefined && key === PlatformType.STELLAR_CLASSIC) {
-      return true;
-    }
-    if (typeof value === 'undefined') {
-      return false;
-    }
-    if (value === true || value === false) {
-      return value;
-    }
-    return value;
-  }
-
-  const getDefaultProtocolsStatus = async (network: Networks) => {
-    switch (network) {
-      case Networks.PUBLIC:
-        // here you should add your new supported protocols
-        return [
-          { key: Protocols.SOROSWAP , value: getValuebyKey(Protocols.SOROSWAP) },
-          { key: PlatformType.STELLAR_CLASSIC, value: getValuebyKey(PlatformType.STELLAR_CLASSIC) },
-        ];
-      case Networks.TESTNET:
-        return [
-          { key: Protocols.SOROSWAP, value: getValuebyKey(Protocols.SOROSWAP) },
-          { key: Protocols.PHOENIX, value: getValuebyKey(Protocols.PHOENIX) },
-        ];
-      default:
-        return [
-          { key: Protocols.SOROSWAP, value: true },
-          { key: Protocols.PHOENIX, value: false },
-          { key: PlatformType.STELLAR_CLASSIC, value: true },
-        ];
-    }
-  }
-
-  useEffect(() => {
-    const fetchProtocolsStatus = async () => {
-      const defaultProtocols = await getDefaultProtocolsStatus(network);
-      setProtocolsStatus(defaultProtocols);
-    };
-    fetchProtocolsStatus();
-  }, [network]);
-
   const getPairsFns = useMemo(() => {
     const routerProtocols = []
     if(!shouldUseBackend) return undefined
@@ -146,10 +97,6 @@ export const useRouterSDK = () => {
     });
   }, [network, maxHops, isAggregator, protocolsStatus]);
 
-  const isProtocolEnabled = (protocol: any) => {
-    return protocolsStatus.find((p) => p.key === protocol)?.value;
-  }
-
   const fromAddressToToken = (address: string) => {
     return new Token(network, address, 18);
   };