Aggregator in Testnet

.env.production.example

@@ -1,9 +1,22 @@
-NEXT_PUBLIC_BACKEND_URL=https://api.soroswap.finance
-NEXT_PUBLIC_DEFAULT_NETWORK=testnet
+# This is an example environment configuration file for the Soroswap frontend in production.
+# Fill in the values for each environment variable as needed.
+
+# NEXT_PUBLIC_AGGREGATOR_ENABLED_MAINNET: Enable or disable the aggregator for the mainnet.
+# NEXT_PUBLIC_AGGREGATOR_ENABLED_TESTNET: Enable or disable the aggregator for the testnet.
+# NEXT_PUBLIC_BACKEND_URL: The URL of the backend service.
+# NEXT_PUBLIC_DEFAULT_NETWORK: The default network to be used.
+# NEXT_PUBLIC_SOROSWAP_BACKEND_ENABLED: Enable or disable the Soroswap backend.
+# NEXT_PUBLIC_SOROSWAP_BACKEND_API_KEY: The API key for the Soroswap backend.
+# NEXT_PUBLIC_SOROSWAP_BACKEND_URL: The URL of the Soroswap backend service.
+# NEXT_PUBLIC_TRUSTLINE_WALLET_PUBLIC_KEY: The public key for the trustline wallet.
+# NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY: The secret key for the test tokens admin.
+
+NEXT_PUBLIC_AGGREGATOR_ENABLED_MAINNET=
+NEXT_PUBLIC_AGGREGATOR_ENABLED_TESTNET=
+NEXT_PUBLIC_BACKEND_URL=
+NEXT_PUBLIC_DEFAULT_NETWORK=
+NEXT_PUBLIC_SOROSWAP_BACKEND_ENABLED=
 NEXT_PUBLIC_SOROSWAP_BACKEND_API_KEY=
-NEXT_PUBLIC_SOROSWAP_BACKEND_ENABLED=false
-NEXT_PUBLIC_SOROSWAP_BACKEND_URL=https://backend.soroswap.finance
-NEXT_PUBLIC_TAG_ID=
-NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY=
+NEXT_PUBLIC_SOROSWAP_BACKEND_URL=
 NEXT_PUBLIC_TRUSTLINE_WALLET_PUBLIC_KEY=
-NEXT_PUBLIC_AGGREGATOR_ENABLED=
+NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY=

.github/workflows/run-tests.yml

@@ -1,7 +1,7 @@
 name: Run tests
 
 on:
-  push:
+  pull_request:
   workflow_dispatch:
 permissions:
   contents: write

cypress.config.ts

@@ -10,10 +10,10 @@ export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     specPattern: 'cypress/{e2e,staging}/**/*.test.{ts,tsx}',
-    defaultCommandTimeout: 10000, // Sets the timeout for commands like cy.get() to 10 seconds
+    defaultCommandTimeout: 20000, // Sets the timeout for commands like cy.get() to 10 seconds
     pageLoadTimeout: 60000,       // Sets the timeout for cy.visit() to 60 seconds
     retries: {
-      runMode: 4, // Retries failing tests 2 times in CI mode
+      runMode: 9, // Retries failing tests 2 times in CI mode
       openMode: 0 // No retries in interactive mode
     },
   },

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),
 };
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -28,16 +28,16 @@
     "@scio-labs/use-inkathon": "^0.8.1",
     "@soroban-react/chains": "9.1.13",
     "@soroban-react/connect-button": "9.1.13",
-    "@soroban-react/contracts": "9.2.2",
-    "@soroban-react/core": "9.1.13",
-    "@soroban-react/events": "9.1.13",
+    "@soroban-react/contracts": "9.3.0",
+    "@soroban-react/core": "9.3.0",
+    "@soroban-react/events": "9.3.0",
     "@soroban-react/freighter": "9.1.13",
     "@soroban-react/hana": "9.1.13",
     "@soroban-react/lobstr": "9.1.13",
     "@soroban-react/types": "9.1.13",
     "@soroban-react/utils": "9.1.13",
-    "@soroban-react/wallet-data": "9.1.13",
-    "@soroban-react/xbull": "9.1.13",
+    "@soroban-react/wallet-data": "9.3.0",
+    "@soroban-react/xbull": "9.3.0",
     "@stellar/freighter-api": "1.7.1",
     "@stellar/stellar-sdk": "12.2.0",
     "@types/qs": "^6.9.7",
@@ -72,7 +72,7 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "redux": "^4.2.1",
-    "soroswap-router-sdk": "^1.2.13",
+    "soroswap-router-sdk": "^1.4.0",
     "soroswap-ui": "^1.0.0",
     "swr": "^2.2.0",
     "typescript": "5.3.3",

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 { Protocol } 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 == Protocol.SOROSWAP);
+          break;
+        case 'mainnet':
+          protocols = protocols.filter((protocol) => protocol.key == Protocol.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/components/Settings/ProtocolsSettings/index.tsx

@@ -100,7 +100,7 @@ const ProtocolsSettings = () => {
       onToggle={() => setIsOpen(!isOpen)}
       header={
         <Row width="auto">
-          <Typography color={theme.palette.secondary.main}>Protocols</Typography>
+          <Typography color={theme.palette.secondary.main}>Protocol</Typography>
           <QuestionHelper
             text={
               <div>

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/contexts/index.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Protocols } from 'soroswap-router-sdk';
+import { Protocol } from 'soroswap-router-sdk';
 import { PlatformType } from 'state/routing/types';
 
 type ConnectWalletModalType = {
@@ -16,7 +16,7 @@ export enum SnackbarIconType {
 }
 
 export interface ProtocolsStatus {
-  key: Protocols | PlatformType;
+  key: Protocol | PlatformType;
   value: boolean;
 }