Wire TopNav and sheets

app/src/app/_layout.tsx

@@ -3,10 +3,14 @@ import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { HeroUINativeProvider } from "heroui-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { View } from "react-native";
 
 import "../global.css";
 import { WalletProvider } from "@/state/wallet";
 import { ModalProvider } from "@/state/modals";
+import { TopNav } from "@/components/TopNav";
+import { WalletConnectSheet } from "@/components/WalletConnectSheet";
+import { CheckoutSheet } from "@/components/CheckoutSheet";
 
 export default function RootLayout(): JSX.Element {
   return (
@@ -14,9 +18,14 @@ export default function RootLayout(): JSX.Element {
       <HeroUINativeProvider config={{ devInfo: { stylingPrinciples: false } }}>
         <WalletProvider>
           <ModalProvider>
-            <Stack screenOptions={{ headerShown: false }}>
-              <Stack.Screen name="(tabs)" />
-            </Stack>
+            <View className="flex-1 bg-background">
+              <TopNav />
+              <Stack screenOptions={{ headerShown: false }}>
+                <Stack.Screen name="(tabs)" />
+              </Stack>
+            </View>
+            <WalletConnectSheet />
+            <CheckoutSheet />
           </ModalProvider>
         </WalletProvider>
         <StatusBar style="auto" />