Merge pull request #120 from dijangh904/solved

Add mainnet support with network switcher

Author: Austinaminu2

.env.local.example

@@ -6,12 +6,14 @@
 
 # ─── Stellar contract ─────────────────────────────────────────────────────────
 
-# Deployed streaming contract address on Stellar.
+# Deployed streaming contract addresses on Stellar.
 #
-# When this is set, FlowStar talks to the live Soroban contract on testnet.
-# When it is empty (or this file is not copied), the app falls back to an
-# in-memory MOCK mode — streams are stored in memory only and reset on reload.
+# When a contract ID is set for the active network, FlowStar talks to the live
+# Soroban contract on that network. When no contract ID is configured, the app
+# falls back to an in-memory MOCK mode — streams are stored in memory only and
+# reset on reload.
 #
 # Deploy your own with `./scripts/deploy.sh --update-env` (see DEPLOYMENT.md),
 # or use the public testnet deployment below to get started immediately.
-NEXT_PUBLIC_STREAM_CONTRACT_ID=CBNDCZTRFNTDAPQLPK2ESOKO4XFMSC4PX37QE75BBYFOYIEWIPMHAKFV
+NEXT_PUBLIC_STREAM_CONTRACT_ID_TESTNET=CBNDCZTRFNTDAPQLPK2ESOKO4XFMSC4PX37QE75BBYFOYIEWIPMHAKFV
+NEXT_PUBLIC_STREAM_CONTRACT_ID_MAINNET=

app/layout.tsx

@@ -1,6 +1,8 @@
 import { Analytics } from '@vercel/analytics/next'
 import type { Metadata, Viewport } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
+import { ThemeProvider } from 'next-themes'
+import { NetworkProvider } from '@/components/providers/network-provider'
 import { WalletProvider } from '@/components/providers/wallet-provider'
 import { Toaster } from '@/components/ui/sonner'
 import './globals.css'
@@ -44,7 +46,6 @@ export const metadata: Metadata = {
 }
 
 export const viewport: Viewport = {
-  colorScheme: 'dark',
   themeColor: '#0c1014',
 }
 
@@ -57,13 +58,23 @@ export default function RootLayout({
     <html
       lang="en"
       className={`${geistSans.variable} ${geistMono.variable} bg-background`}
+      suppressHydrationWarning
     >
       <body className="font-sans antialiased">
-        <WalletProvider>
-          {children}
-          <Toaster position="top-right" />
-        </WalletProvider>
-        {process.env.NODE_ENV === 'production' && <Analytics />}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <NetworkProvider>
+            <WalletProvider>
+              {children}
+              <Toaster position="top-right" />
+            </WalletProvider>
+          </NetworkProvider>
+          {process.env.NODE_ENV === 'production' && <Analytics />}
+        </ThemeProvider>
       </body>
     </html>
   )

components/layout/mock-mode-banner.tsx

@@ -1,20 +1,21 @@
 'use client'
 
 import { FlaskConical } from 'lucide-react'
-import { IS_MOCK_MODE } from '@/lib/stellar'
+import { useNetwork } from '@/components/providers/network-provider'
 
 /**
  * Dev-only indicator shown when the app runs against the in-memory mock store
- * (i.e. NEXT_PUBLIC_STREAM_CONTRACT_ID is unset). Hidden in production builds so
+ * (i.e. NEXT_PUBLIC_STREAM_CONTRACT_ID_{NETWORK} is unset). Hidden in production builds so
  * it never leaks into a real deployment.
  */
 export function MockModeBanner() {
-  if (process.env.NODE_ENV === 'production' || !IS_MOCK_MODE) return null
+  const { isMockMode } = useNetwork()
+  if (process.env.NODE_ENV === 'production' || !isMockMode) return null
 
   return (
     <div
       role="status"
-      title="No contract configured — set NEXT_PUBLIC_STREAM_CONTRACT_ID in .env.local to use the live contract."
+      title="No contract configured — set NEXT_PUBLIC_STREAM_CONTRACT_ID_{NETWORK} in .env.local to use the live contract."
       className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs font-medium text-amber-400 backdrop-blur-md"
     >
       <FlaskConical className="size-3.5" />

components/layout/navbar.tsx

@@ -2,9 +2,16 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Plus } from 'lucide-react'
+import { Plus, Moon, Sun, Monitor } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import { Brand } from '@/components/brand'
 import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { ConnectWalletButton } from '@/components/layout/connect-wallet-button'
 import { NotificationBell } from '@/components/layout/notification-bell'
 import { cn } from '@/lib/utils'
@@ -16,6 +23,7 @@ const NAV_LINKS = [
 
 export function Navbar() {
   const pathname = usePathname()
+  const { setTheme, theme } = useTheme()
 
   return (
     <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-xl">
@@ -52,6 +60,31 @@ export function Navbar() {
               <span className="hidden sm:inline">New stream</span>
             </Link>
           </Button>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">Toggle theme</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setTheme('light')}>
+                <Sun className="mr-2 size-4" />
+                Light
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme('dark')}>
+                <Moon className="mr-2 size-4" />
+                Dark
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme('system')}>
+                <Monitor className="mr-2 size-4" />
+                System
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <NotificationBell />
           <ConnectWalletButton />
         </div>

components/providers/network-provider.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+import { type NetworkName, getNetworkConfig } from '@/lib/stellar'
+
+const NETWORK_KEY = 'flowstar:network'
+
+interface NetworkContextValue {
+  network: NetworkName
+  setNetwork: (network: NetworkName) => void
+  config: ReturnType<typeof getNetworkConfig>
+  isMockMode: boolean
+}
+
+const NetworkContext = createContext<NetworkContextValue | null>(null)
+
+export function NetworkProvider({ children }: { children: ReactNode }) {
+  const [network, setNetworkState] = useState<NetworkName>('testnet')
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    const saved = localStorage.getItem(NETWORK_KEY) as NetworkName | null
+    if (saved && ['testnet', 'mainnet'].includes(saved)) {
+      setNetworkState(saved)
+    }
+  }, [])
+
+  const setNetwork = useCallback((newNetwork: NetworkName) => {
+    setNetworkState(newNetwork)
+    localStorage.setItem(NETWORK_KEY, newNetwork)
+  }, [])
+
+  const config = useMemo(() => getNetworkConfig(network), [network])
+  const isMockMode = !config.streamContractId
+
+  // Startup check: warn (in non-production) when the contract ID is missing
+  useEffect(() => {
+    if (mounted && isMockMode && process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `[FlowStar] No contract ID configured for ${network} — running in MOCK mode. ` +
+          'Streams are kept in memory only and reset on reload. ' +
+          'Copy .env.local.example to .env.local and set the appropriate contract ID.',
+      )
+    }
+  }, [network, isMockMode, mounted])
+
+  const value = useMemo<NetworkContextValue>(
+    () => ({
+      network,
+      setNetwork,
+      config,
+      isMockMode,
+    }),
+    [network, setNetwork, config, isMockMode],
+  )
+
+  return <NetworkContext.Provider value={value}>{children}</NetworkContext.Provider>
+}
+
+export function useNetwork() {
+  const ctx = useContext(NetworkContext)
+  if (!ctx) throw new Error('useNetwork must be used within a NetworkProvider')
+  return ctx
+}

components/providers/wallet-provider.tsx

@@ -10,7 +10,8 @@ import {
   type ReactNode,
 } from 'react'
 import { setSignTransaction } from '@/lib/contract'
-import { NETWORK } from '@/lib/stellar'
+import { type NetworkName, getNetworkConfig } from '@/lib/stellar'
+import { useNetwork } from './network-provider'
 
 // ─── Wallet options ───────────────────────────────────────────────────────────
 
@@ -36,7 +37,7 @@ interface WalletContextValue {
   isConnected: boolean
   connect: (walletId: string) => Promise<void>
   disconnect: () => void
-  signTransaction: (xdr: string) => Promise<string>
+  signTransaction: (xdr: string, network?: NetworkName) => Promise<string>
 }
 
 const WalletContext = createContext<WalletContextValue | null>(null)
@@ -56,10 +57,10 @@ async function connectFreighter(): Promise<string> {
   return result.address
 }
 
-async function signWithFreighter(xdr: string): Promise<string> {
+async function signWithFreighter(xdr: string, networkPassphrase: string): Promise<string> {
   const { signTransaction } = await import('@stellar/freighter-api')
   const result = await signTransaction(xdr, {
-    networkPassphrase: NETWORK.passphrase,
+    networkPassphrase,
   })
   if (result.error) throw new Error(result.error)
   return result.signedTxXdr
@@ -82,19 +83,13 @@ async function connectWallet(id: string): Promise<string> {
   }
 }
 
-async function signWithWallet(id: string, xdr: string): Promise<string> {
-  switch (id) {
-    case 'freighter': return signWithFreighter(xdr)
-    default: throw new Error(`Signing not implemented for ${id}`)
-  }
-}
-
 // ─── Provider ─────────────────────────────────────────────────────────────────
 
 export function WalletProvider({ children }: { children: ReactNode }) {
   const [address, setAddress] = useState<string | null>(null)
   const [walletId, setWalletId] = useState<string | null>(null)
   const [connecting, setConnecting] = useState(false)
+  const { network } = useNetwork()
 
   const connect = useCallback(async (id: string) => {
     setConnecting(true)
@@ -113,16 +108,20 @@ export function WalletProvider({ children }: { children: ReactNode }) {
   }, [])
 
   const signTransaction = useCallback(
-    async (xdr: string): Promise<string> => {
+    async (xdr: string, customNetwork?: NetworkName): Promise<string> => {
       if (!walletId) throw new Error('No wallet connected')
-      return signWithWallet(walletId, xdr)
+      const config = getNetworkConfig(customNetwork || network)
+      switch (walletId) {
+        case 'freighter': return signWithFreighter(xdr, config.passphrase)
+        default: throw new Error(`Signing not implemented for ${walletId}`)
+      }
     },
-    [walletId],
+    [walletId, network],
   )
 
   // Keep contract layer in sync
   useEffect(() => {
-    setSignTransaction(signTransaction)
+    setSignTransaction((xdr: string) => signTransaction(xdr))
   }, [signTransaction])
 
   const value = useMemo<WalletContextValue>(