SELF-1610: fix internal webview wallet connect links (#1489)

* save working android implementation

* save working webview

* more webview space

* fix close button

* nav icons match footer icons

* fix webscreen tests. android works as expected

* save almost working implementation

* skip tests for seshanth to review

* tighten up allowed webview schemes

* lock down to cloud.google.com

* remove logging

* make screen wider

* fix padding

* revert test change

* skip tests for now

* agent feedback

* update lock

* fix padding

* agent feedback and abstract methods

* Handle Coinbase wallet popups externally (#1496)

* Handle Coinbase wallet popups externally

* Clarify Coinbase popup redirect handling

* open coinbase wallet request in new window

* agent feedback

* add system alert to warn user they are being redirected to their browser

* fix footer icons; open app.aave.com in external browser for ios

* finalize aave ios flow for testing

* agent feedback

* feedback

app/src/components/WebViewFooter.tsx

@@ -6,11 +6,7 @@ import React from 'react';
 import { ArrowLeft, ArrowRight, RotateCcw } from '@tamagui/lucide-icons';
 
 import { Button, XStack, YStack } from '@selfxyz/mobile-sdk-alpha/components';
-import {
-  black,
-  slate50,
-  slate400,
-} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { black, slate400 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
 import { buttonTap } from '@/integrations/haptics';
 
@@ -23,8 +19,7 @@ export interface WebViewFooterProps {
   onOpenInBrowser: () => void;
 }
 
-const iconSize = 22;
-const buttonSize = 36;
+const iconSize = 24;
 
 export const WebViewFooter: React.FC<WebViewFooterProps> = ({
   canGoBack,
@@ -42,19 +37,13 @@ export const WebViewFooter: React.FC<WebViewFooterProps> = ({
   ) => (
     <Button
       key={key}
-      size="$4"
       unstyled
       disabled={disabled}
+      hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
       onPress={() => {
         buttonTap();
         onPress();
       }}
-      backgroundColor={slate50}
-      borderRadius={buttonSize / 2}
-      width={buttonSize}
-      height={buttonSize}
-      alignItems="center"
-      justifyContent="center"
       opacity={disabled ? 0.5 : 1}
     >
       {icon}
@@ -62,7 +51,7 @@ export const WebViewFooter: React.FC<WebViewFooterProps> = ({
   );
 
   return (
-    <YStack gap={12} paddingVertical={12} width="100%">
+    <YStack gap={4} paddingVertical={4} paddingHorizontal={5} width="100%">
       <XStack justifyContent="space-between" alignItems="center" width="100%">
         {renderIconButton(
           'back',

app/src/components/navbar/WebViewNavBar.tsx

@@ -30,9 +30,9 @@ export const WebViewNavBar: React.FC<WebViewNavBarProps> = ({
 
   return (
     <XStack
-      paddingHorizontal={20}
       paddingVertical={10}
       paddingTop={insets.top + 10}
+      paddingHorizontal={16}
       gap={14}
       alignItems="center"
       backgroundColor="white"
@@ -50,7 +50,12 @@ export const WebViewNavBar: React.FC<WebViewNavBarProps> = ({
       />
 
       {/* Center: Title */}
-      <XStack flex={1} alignItems="center" justifyContent="center">
+      <XStack
+        flex={1}
+        alignItems="center"
+        justifyContent="center"
+        paddingHorizontal={8}
+      >
         <Text style={styles.title} numberOfLines={1}>
           {title?.toUpperCase() || 'PAGE TITLE'}
         </Text>