Merge branch 'add-vaults-page' of https://github.com/CrocSwap/ambient…

…-ts-app into add-vaults-page

src/ambient-utils/constants/networks/index.ts

@@ -60,6 +60,9 @@ export const supportedNetworks: { [x: string]: NetworkIF } =
                   ? getNetworks(Object.keys(plumeSepoliaBrandAssets.networks))
                   : getNetworks(Object.keys(defaultBrandAssets.networks));
 
+export const vaultSupportedNetworkIds = ['0x1', '0x82750'];
+export const vaultSupportedNetworks = getNetworks(vaultSupportedNetworkIds);
+
 export function getDefaultPairForChain(chainId: string): [TokenIF, TokenIF] {
     if (brand === 'futa') {
         return (

src/contexts/ChainDataContext.tsx

@@ -15,6 +15,7 @@ import {
     ZERO_ADDRESS,
     hiddenTokens,
     supportedNetworks,
+    vaultSupportedNetworkIds,
 } from '../ambient-utils/constants';
 import { isJsonString } from '../ambient-utils/dataLayer';
 import { SinglePoolDataIF, TokenIF } from '../ambient-utils/types';
@@ -113,7 +114,8 @@ export const ChainDataContextProvider = (props: { children: ReactNode }) => {
     const isActiveNetworkScroll = ['0x82750', '0x8274f'].includes(chainId);
     const isActiveNetworkMainnet = ['0x1'].includes(chainId);
     const isActiveNetworkPlume = ['0x18230'].includes(chainId);
-    const isVaultSupportedOnNetwork = ['0x1', '0x82750'].includes(chainId);
+    const isVaultSupportedOnNetwork =
+        vaultSupportedNetworkIds.includes(chainId);
 
     const blockPollingUrl = BLOCK_POLLING_RPC_URL
         ? BLOCK_POLLING_RPC_URL

src/pages/platformAmbient/Vaults/NoVaults.module.css

@@ -0,0 +1,7 @@
+.no_vaults {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}

src/pages/platformAmbient/Vaults/NoVaults.tsx

@@ -0,0 +1,39 @@
+import styles from './NoVaults.module.css';
+import Button from '../../../components/Form/Button';
+import { AppStateContext } from '../../../contexts';
+import { useContext, useEffect } from 'react';
+import {
+    scrollMainnet,
+    vaultSupportedNetworks,
+} from '../../../ambient-utils/constants';
+import { useSwitchNetwork, useWeb3ModalAccount } from '@web3modal/ethers/react';
+
+export default function NoVaults() {
+    const { chooseNetwork } = useContext(AppStateContext);
+
+    const { isConnected } = useWeb3ModalAccount();
+    const { switchNetwork } = useSwitchNetwork();
+
+    async function goToScroll(): Promise<void> {
+        isConnected
+            ? await switchNetwork(parseInt(scrollMainnet.chainId))
+            : chooseNetwork(scrollMainnet);
+    }
+
+    useEffect(() => {
+        console.log({ vaultSupportedNetworks });
+    }, [vaultSupportedNetworks]);
+
+    const BUTTON_DOM_ID = 'change_network_to_scroll';
+
+    return (
+        <div className={styles.no_vaults}>
+            <h3>To use Vaults please change network to Scroll.</h3>
+            <Button
+                idForDOM={BUTTON_DOM_ID}
+                title='Change to Scroll'
+                action={() => goToScroll()}
+            />
+        </div>
+    );
+}

src/routes/PlatformAmbient.tsx

@@ -22,9 +22,12 @@ import FAQPoints from '../pages/common/FAQ/FAQPoints';
 import PrivacyPolicy from '../pages/common/PrivacyPolicy/PrivacyPolicy';
 import TermsOfService from '../pages/common/TermsOfService/TermsOfService';
 import TestPage from '../pages/common/TestPage/TestPage';
+import { ChainDataContext } from '../contexts';
+import NoVaults from '../pages/platformAmbient/Vaults/NoVaults';
 
 const PlatformAmbientRoutes: React.FC = () => {
     const { defaultUrlParams } = useContext(CrocEnvContext);
+    const { isVaultSupportedOnNetwork } = useContext(ChainDataContext);
 
     return (
         <Routes>
@@ -75,7 +78,10 @@ const PlatformAmbientRoutes: React.FC = () => {
             />
             <Route path='initpool/:params' element={<InitPool />} />
             <Route path='account' element={<Portfolio />} />
-            <Route path='vaults' element={<Vaults />} />
+            <Route
+                path='vaults'
+                element={isVaultSupportedOnNetwork ? <Vaults /> : <NoVaults />}
+            />
             <Route
                 path='xp-leaderboard'
                 element={<Portfolio isLevelsPage isRanksPage />}