feat(appkit-wagmi): Omen deposit-flow demo in WebView

dapps/appkit-wagmi/src/navigators/RootStackNavigator.tsx

@@ -9,6 +9,9 @@ import {useLogs} from '@/hooks/useLogs';
 import { AppKitLogList } from '@/screens/AppKitLogList';
 import NetworkSettingsScreen from '@/screens/NetworkSettings';
 import PayWebView from '@/screens/PayWebView';
+import OmenScreen from '@/screens/Omen';
+import OmenDepositWebView from '@/screens/Omen/OmenDepositWebView';
+import GoodDepositConfirm from '@/screens/GoodWallet';
 
 const StackNavigator = createNativeStackNavigator<RootStackParamList>();
 
@@ -76,6 +79,34 @@ export function RootStackNavigator() {
           headerTintColor: Theme['fg-100'],
         }}
       />
+      <StackNavigator.Screen
+        name="Omen"
+        component={OmenScreen}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <StackNavigator.Screen
+        name="OmenDepositWebView"
+        component={OmenDepositWebView}
+        options={{
+          // BX renders its own "Add money" header (+ close) inside the webview, and the screen
+          // wraps it in a dark SafeAreaView — so the native header would just be a redundant
+          // light bar. Hide it for a seamless "inside the app" surface.
+          headerShown: false,
+        }}
+      />
+      <StackNavigator.Screen
+        name="GoodDepositConfirm"
+        component={GoodDepositConfirm}
+        options={{
+          // Presented as a full-screen modal that slides up — the "a separate wallet opened over
+          // the app" feel. Its own in-screen branded header, so no native header.
+          headerShown: false,
+          presentation: 'fullScreenModal',
+          animation: 'slide_from_bottom',
+        }}
+      />
     </StackNavigator.Navigator>
   );
 }

dapps/appkit-wagmi/src/screens/Connections/components/OmenDemoButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Button} from '@reown/appkit-ui-react-native';
+import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
+
+import {RootStackParamList} from '@/utils/TypesUtil';
+
+// Entry point for the Omen deposit demo: opens the mock funded-account screen, which in turn
+// opens the WalletConnect Pay deposit flow in an in-app WebView. Always visible (unlike
+// PasteUrlButton, which self-hides when connected) so the demo is reachable regardless of state.
+export function OmenDemoButton() {
+  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  return (
+    <Button testID="open-omen-demo-button" onPress={() => navigation.navigate('Omen')}>
+      Open Omen deposit demo
+    </Button>
+  );
+}

dapps/appkit-wagmi/src/screens/Connections/index.tsx

@@ -7,6 +7,7 @@ import {ActionsView} from './components/ActionsView';
 import { EventsView } from './components/EventsView';
 import { WalletInfoView } from './components/WalletInfoView';
 import { PasteUrlButton } from './components/PasteUrlButton';
+import { OmenDemoButton } from './components/OmenDemoButton';
 function ConnectionsScreen() {
   return (
     <FlexView flexGrow={1} padding="m" justifyContent="center" alignItems="center">
@@ -17,6 +18,7 @@ function ConnectionsScreen() {
         <WalletInfoView />
         <AppKitButton balance="show" />
         <NetworkButton />
+        <OmenDemoButton />
         <PasteUrlButton />
         <ActionsView />
         <EventsView />

dapps/appkit-wagmi/src/screens/GoodWallet/GoodWalletLogo.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+import {GOODWALLET_COLORS} from './theme';
+
+/**
+ * GoodWallet brand mark — drawn in code (no image asset). An emerald rounded-square badge with a
+ * checkmark glyph next to the "GoodWallet" wordmark, matching the wallet's own (light) skin.
+ */
+function GoodWalletLogo() {
+  return (
+    <View style={styles.root}>
+      <View style={styles.badge}>
+        <Text style={styles.glyph}>✓</Text>
+      </View>
+      <Text style={styles.wordmark}>GoodWallet</Text>
+    </View>
+  );
+}
+
+export default GoodWalletLogo;
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  badge: {
+    width: 28,
+    height: 28,
+    borderRadius: 9,
+    backgroundColor: GOODWALLET_COLORS.accent,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  glyph: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '800',
+    lineHeight: 20,
+  },
+  wordmark: {
+    color: GOODWALLET_COLORS.textPrimary,
+    fontSize: 18,
+    fontWeight: '700',
+  },
+});