Fixed small issues (#510)

* fix: issue during merging updates

* Enable payment manager in worker

* Use correct network depending on context

* Refactor layout components to streamline network context usage

* Refactor layout file to simplify imports and enhance network context usage

Author: clostao

apps/backend/src/app/servers/frontendWorker.ts

@@ -16,16 +16,27 @@
   )
   const logger = createLogger('servers:frontendWorker')
 
+  const { paymentManager } = await import(
+    '../../infrastructure/services/paymentManager/index.js'
+  )
+  
+  let somethingActive = false
   if (config.featureFlags.flags.taskManager.active) {
     EventRouter.listenFrontendEvents()
+    somethingActive = true
   }
   if (config.featureFlags.flags.objectMappingArchiver.active) {
     objectMappingArchiver.start()
+    somethingActive = true
   }
   if (
-    !config.featureFlags.flags.taskManager.active &&
-    !config.featureFlags.flags.objectMappingArchiver.active
+    config.featureFlags.flags.buyCredits.active ||
+    config.featureFlags.flags.buyCredits.staffOnly
   ) {
+    paymentManager.start()
+    somethingActive = true
+  }
+  if (!somethingActive) {
     logger.info('No services active, exiting')
     process.exit(1)
   }

apps/frontend/src/app/[chain]/drive/layout.tsx

@@ -1,11 +1,8 @@
 'use client';
 
 import '../../globals.css';
-import { useMemo } from 'react';
 import { SessionProvider } from 'next-auth/react';
-import { defaultNetworkId, NetworkId, networks } from '@auto-drive/ui';
-import { NetworkProvider } from 'contexts/network';
-import { useRouter } from 'next/navigation';
+import { useNetwork } from 'contexts/network';
 import { TopNavbar } from '@/components/organisms/TopNavbar';
 import { TableRouteChangeListener } from '@/components/organisms/FileTable/TableRouteChangeListener';
 import { SidebarProvider } from '@/components/molecules/Sidebar';
@@ -15,41 +12,29 @@ import { AutomaticLoginWrapper } from '../../../components/atoms/AutomaticLoginW
 
 export default function AppLayout({
   children,
-  params,
 }: Readonly<{
   children: React.ReactNode;
-  params: { chain: NetworkId };
 }>) {
-  const router = useRouter();
-
-  const network = useMemo(() => {
-    return networks[params.chain] || null;
-  }, [params.chain]);
-  if (!network) {
-    router.replace(`/${defaultNetworkId}/drive`);
-    return null;
-  }
+  const { network } = useNetwork();
 
   return (
     <div className='flex min-h-screen bg-background'>
       <AutomaticLoginWrapper>
         <SessionProvider>
-          <NetworkProvider network={network}>
-            <SessionEnsurer>
-              <SidebarProvider className='contents'>
-                <SideNavbar networkId={params.chain} />
-                <div className='flex h-screen flex-1 flex-col rounded-lg bg-background text-foreground'>
-                  <TopNavbar networkId={params.chain} />
-                  <div className='flex flex-1 overflow-hidden'>
-                    <main className='flex-1 overflow-auto px-6 pb-6'>
-                      <TableRouteChangeListener />
-                      {children}
-                    </main>
-                  </div>
+          <SessionEnsurer>
+            <SidebarProvider className='contents'>
+              <SideNavbar networkId={network.id} />
+              <div className='flex h-screen flex-1 flex-col rounded-lg bg-background text-foreground'>
+                <TopNavbar networkId={network.id} />
+                <div className='flex flex-1 overflow-hidden'>
+                  <main className='flex-1 overflow-auto px-6 pb-6'>
+                    <TableRouteChangeListener />
+                    {children}
+                  </main>
                 </div>
-              </SidebarProvider>
-            </SessionEnsurer>
-          </NetworkProvider>
+              </div>
+            </SidebarProvider>
+          </SessionEnsurer>
         </SessionProvider>
       </AutomaticLoginWrapper>
     </div>

apps/frontend/src/app/[chain]/layout.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { defaultNetworkId, NetworkId, networks } from '@auto-drive/ui';
+import { NetworkProvider } from '../../contexts/network';
+
+const WalletProvider = dynamic(
+  () => import('@/contexts/web3').then((mod) => mod.Web3Provider),
+  {
+    ssr: false,
+  },
+);
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { chain: NetworkId };
+}) {
+  const network =
+    params.chain in networks
+      ? networks[params.chain as NetworkId]!
+      : networks[defaultNetworkId]!;
+
+  return (
+    <NetworkProvider network={network}>
+      <WalletProvider>{children}</WalletProvider>
+    </NetworkProvider>
+  );
+}

apps/frontend/src/app/layout.tsx

@@ -2,7 +2,6 @@ import { Metadata, type Viewport } from 'next';
 import localFont from 'next/font/local';
 import './globals.css';
 import { getNoFlashScript } from '@auto-drive/ui';
-import dynamic from 'next/dynamic';
 import NextTopLoader from 'nextjs-toploader';
 import { Toaster } from 'react-hot-toast';
 
@@ -83,13 +82,6 @@ export const viewport: Viewport = {
   ],
 };
 
-const WalletProvider = dynamic(
-  () => import('@/contexts/web3').then((mod) => mod.Web3Provider),
-  {
-    ssr: false,
-  },
-);
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -102,7 +94,7 @@ export default function RootLayout({
       >
         <script dangerouslySetInnerHTML={{ __html: getNoFlashScript() }} />
         <NextTopLoader color='#1949D2' height={2} showSpinner={false} />
-        <WalletProvider>{children}</WalletProvider>
+        {children}
         <Toaster position='top-center' />
       </body>
     </html>

apps/frontend/src/components/atoms/SessionEnsurer.tsx

@@ -9,7 +9,7 @@ export const SessionEnsurer = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const session = useContext(SessionContext);
   const setUser = useUserStore(({ setUser }) => setUser);
-  const user = useUserStore(({ user }) => user);
+  const setFeatures = useUserStore(({ setFeatures }) => setFeatures);
   const setAccount = useUserStore((m) => m.setAccount);
   const { api } = useNetwork();
 
@@ -37,12 +37,10 @@ export const SessionEnsurer = ({ children }: { children: React.ReactNode }) => {
   }, [api, setAccount]);
 
   useEffect(() => {
-    if (user) {
-      api.getAccount().then((account) => {
-        setAccount(account);
-      });
-    }
-  }, [api, user, setAccount]);
+    api.getFeatures().then((features) => {
+      setFeatures(features);
+    });
+  }, [api, setFeatures]);
 
   if (session === undefined) {
     // TODO: Add a loading state

apps/frontend/src/components/organisms/SideNavBar/index.tsx

@@ -16,14 +16,15 @@ import { AuthModal } from '../../molecules/AuthModal';
 import { SIDEBAR_DEFINITION } from './items';
 import { SideNavBarContent } from './SideNavBarContent';
 import { AskForCreditsButton } from '../../atoms/AskForCredits';
+import { BuyMoreCreditsButton } from '../../atoms/BuyMoreCreditsButton';
 
 export type SideNavbarProps = {
   networkId: NetworkId;
 };
 
 export const SideNavbar = ({ networkId }: SideNavbarProps) => {
   const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
-  const { user, account } = useUserStore();
+  const { user, account, features } = useUserStore();
   const { state } = useSidebar();
 
   const session = useContext(SessionContext);
@@ -85,7 +86,11 @@ export const SideNavbar = ({ networkId }: SideNavbarProps) => {
           />
         )}
         {isLoggedIn && account ? (
-          <AskForCreditsButton />
+          features.buyCredits ? (
+            <BuyMoreCreditsButton />
+          ) : (
+            <AskForCreditsButton />
+          )
         ) : (
           <Button
             variant='outline'

apps/frontend/src/components/views/PurchaseCredits/steps/Step3_TransferTokens.tsx

@@ -65,7 +65,9 @@ export const PurchaseStep3TransferTokens = ({
       const depositTransaction = await paymentIntent(
         formatCreditsInMbAsValue(Number(context.sizeMB)),
       );
-      const hash = await writeContractAsync(depositTransaction);
+      const hash = await writeContractAsync({
+        ...depositTransaction,
+      });
       setIntentId(depositTransaction.intentId);
       setTxHash(hash);
     } catch (error) {

apps/frontend/src/contexts/web3.tsx

@@ -12,15 +12,17 @@ import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persi
 import { FC, ReactNode, useMemo, useState } from 'react';
 import { WagmiProvider } from 'wagmi';
 import { evmChains } from '@auto-drive/ui';
+import { useNetwork } from './network';
 
 export const Web3Provider: FC<{ children: ReactNode }> = ({ children }) => {
   const [queryClient] = useState(() => new QueryClient({}));
+  const { network } = useNetwork();
   const config = useMemo(
     () =>
       getDefaultConfig({
         appName: 'Auto Drive',
         projectId: process.env.NEXT_PUBLIC_PROJECT_ID || '',
-        chains: [evmChains.local, evmChains.mainnet],
+        chains: [evmChains[network.id]],
         ssr: false,
       }),
     [],

apps/frontend/src/services/api.ts

@@ -106,6 +106,26 @@ export const createApiService = ({
 
     return response.json() as Promise<AccountInfo>;
   },
+  getFeatures: async (): Promise<Record<string, boolean>> => {
+    const session = await getAuthSession().catch(() => null);
+
+    const response = await fetch(`${apiBaseUrl}/features`, {
+      headers: {
+        ...(session?.accessToken
+          ? {
+              Authorization: `Bearer ${session?.accessToken}`,
+              'X-Auth-Provider': session.authProvider,
+            }
+          : {}),
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to get features: ${response.statusText}`);
+    }
+
+    return response.json();
+  },  
   getUserList: async (
     userPublicIds: string[],
   ): Promise<Record<string, AccountInfo>> => {

packages/ui/src/constants/evm.ts

@@ -1,10 +1,5 @@
 import { NetworkId } from './networks'
 import { Chain } from 'wagmi/chains'
-import {
-  getNetworkDomainRpcUrls,
-  NetworkId as AutoUtilsNetworkId,
-  DomainRuntime,
-} from '@autonomys/auto-utils'
 
 export const evmChains: Record<NetworkId, Chain> = {
   [NetworkId.MAINNET]: {
@@ -17,10 +12,7 @@ export const evmChains: Record<NetworkId, Chain> = {
     },
     rpcUrls: {
       default: {
-        http: getNetworkDomainRpcUrls({
-          networkId: AutoUtilsNetworkId.MAINNET,
-          domainId: '0',
-        }),
+        http: ['https://auto-evm.mainnet.autonomys.xyz/ws'],
       },
     },
   },