Merge branch 'main' into mikesposito/fix/duplicate-accounts

Author: mikesposito

.github/workflows/check-pr-max-lines.yml

@@ -0,0 +1,12 @@
+name: "Check PR Max Lines"
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  check-pr-max-lines:
+    uses: metamask/github-tools/.github/workflows/pr-line-check.yml@main
+    with:
+      max_lines: 1000
+      ignore_patterns: '(\.lock$)'

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- feat(bridge): improve bridge screen layout and user experience ([#15425](https://github.com/MetaMask/metamask-mobile/pull/15425))
+- fix(browser): fix browser PermissionsSummary origin spoofing when browser redirects issue ([#13394](https://github.com/MetaMask/metamask-mobile/pull/13394))
 - feat: migrate eth_accounts and permittedChains to CAIP-25 endowment ([#13970](https://github.com/MetaMask/metamask-mobile/pull/13970))
 - feat(identity): rebrand "Profile syncing" to "Backup and sync", adding a dedicated settings menu and more ([#15003](https://github.com/MetaMask/metamask-mobile/pull/15003))
 - feat(bridge): implement quote expiration handling in Bridge feature ([#14872](https://github.com/MetaMask/metamask-mobile/pull/14872))

app/components/Nav/App/App.tsx

@@ -129,10 +129,8 @@ import {
 import getUIStartupSpan from '../../../core/Performance/UIStartup';
 import { selectUserLoggedIn } from '../../../reducers/user/selectors';
 import { Confirm } from '../../Views/confirmations/components/confirm';
-///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
 import ImportNewSecretRecoveryPhrase from '../../Views/ImportNewSecretRecoveryPhrase';
 import { SelectSRPBottomSheet } from '../../Views/SelectSRP/SelectSRPBottomSheet';
-///: END:ONLY_INCLUDE_IF
 import NavigationService from '../../../core/NavigationService';
 import ConfirmTurnOnBackupAndSyncModal from '../../UI/Identity/ConfirmTurnOnBackupAndSyncModal/ConfirmTurnOnBackupAndSyncModal';
 import AddNewAccount from '../../Views/AddNewAccount';
@@ -305,17 +303,13 @@ const DetectedTokensFlow = () => (
   </Stack.Navigator>
 );
 
-///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
 interface RootModalFlowProps {
   route: {
     params: Record<string, unknown>;
   };
 }
-///: END:ONLY_INCLUDE_IF(multi-srp)
 const RootModalFlow = (
-  ///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
   props: RootModalFlowProps,
-  ///: END:ONLY_INCLUDE_IF
 ) => (
   <Stack.Navigator mode={'modal'} screenOptions={clearStackNavigatorOptions}>
     <Stack.Screen
@@ -430,19 +424,15 @@ const RootModalFlow = (
       component={EnableAutomaticSecurityChecksModal}
     />
     {
-      ///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
       <Stack.Screen
         name={Routes.SHEET.SELECT_SRP}
         component={SelectSRPBottomSheet}
       />
-      ///: END:ONLY_INCLUDE_IF
     }
     <Stack.Screen
       name={Routes.MODAL.SRP_REVEAL_QUIZ}
       component={SRPQuiz}
-      ///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
       initialParams={{ ...props.route.params }}
-      ///: END:ONLY_INCLUDE_IF
     />
     <Stack.Screen
       name={Routes.SHEET.ACCOUNT_ACTIONS}
@@ -501,7 +491,6 @@ const ImportPrivateKeyView = () => (
   </Stack.Navigator>
 );
 
-///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
 const ImportSRPView = () => (
   <Stack.Navigator
     screenOptions={{
@@ -514,7 +503,6 @@ const ImportSRPView = () => (
     />
   </Stack.Navigator>
 );
-///: END:ONLY_INCLUDE_IF
 
 const ConnectQRHardwareFlow = () => (
   <Stack.Navigator
@@ -641,13 +629,11 @@ const AppFlow = () => {
         options={{ animationEnabled: true }}
       />
       {
-        ///: BEGIN:ONLY_INCLUDE_IF(multi-srp)
         <Stack.Screen
           name="ImportSRPView"
           component={ImportSRPView}
           options={{ animationEnabled: true }}
         />
-        ///: END:ONLY_INCLUDE_IF
       }
       <Stack.Screen
         name="ConnectQRHardwareFlow"

app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`AssetElement should render correctly 1`] = `
 <TouchableOpacity
+  disabled={false}
   onLongPress={[Function]}
   onPress={[Function]}
   style={

app/components/UI/AssetElement/index.tsx

@@ -27,6 +27,7 @@ interface AssetElementProps {
   balance?: string;
   secondaryBalance?: string;
   privacyMode?: boolean;
+  disabled?: boolean;
 }
 
 const createStyles = (colors: Colors) =>
@@ -67,6 +68,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
   onPress,
   onLongPress,
   privacyMode = false,
+  disabled = false,
 }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
@@ -83,6 +85,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
   // when privacyMode is true, we should hide the balance and the fiat
   return (
     <TouchableOpacity
+      disabled={disabled}
       onPress={handleOnPress}
       onLongPress={handleOnLongPress}
       style={styles.itemWrapper}

app/components/UI/AssetOverview/Balance/Balance.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View } from 'react-native';
-import { Hex, isCaipChainId } from '@metamask/utils';
+import { CaipAssetId, Hex, isCaipChainId } from '@metamask/utils';
 import { strings } from '../../../../../locales/i18n';
 import { useStyles } from '../../../../component-library/hooks';
 import styleSheet from './Balance.styles';
@@ -108,23 +108,32 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
     );
   }, [asset, styles.ethLogo]);
 
+  const isDisabled = useMemo(
+    () => asset.isNative || isCaipChainId(asset.chainId as CaipAssetId),
+    [asset.chainId, asset.isNative],
+  );
+
+  const handlePress = useCallback(
+    () =>
+      !asset.isNative &&
+      navigation.navigate('AssetDetails', {
+        chainId: asset.chainId,
+        address: asset.address,
+      }),
+    [asset.address, asset.chainId, asset.isNative, navigation],
+  );
+
   return (
     <View style={styles.wrapper}>
       <Text variant={TextVariant.HeadingMD} style={styles.title}>
         {strings('asset_overview.your_balance')}
       </Text>
       <AssetElement
+        disabled={isDisabled}
         asset={asset}
         balance={mainBalance}
         secondaryBalance={secondaryBalance}
-        onPress={() =>
-          !asset.isETH &&
-          !asset.isNative &&
-          navigation.navigate('AssetDetails', {
-            chainId: asset.chainId,
-            address: asset.address,
-          })
-        }
+        onPress={handlePress}
       >
         <BadgeWrapper
           style={styles.badgeWrapper}

app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`Balance should render correctly with main and secondary balance 1`] = `
     Your balance
   </Text>
   <TouchableOpacity
+    disabled={false}
     onLongPress={[Function]}
     onPress={[Function]}
     style={
@@ -251,6 +252,7 @@ exports[`Balance should render correctly without a secondary balance 1`] = `
     Your balance
   </Text>
   <TouchableOpacity
+    disabled={false}
     onLongPress={[Function]}
     onPress={[Function]}
     style={

app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap

@@ -942,6 +942,7 @@ exports[`AssetOverview should render correctly 1`] = `
         Your balance
       </Text>
       <TouchableOpacity
+        disabled={false}
         onLongPress={[Function]}
         onPress={[Function]}
         style={
@@ -2102,6 +2103,7 @@ exports[`AssetOverview should render native balances even if there are no accoun
         Your balance
       </Text>
       <TouchableOpacity
+        disabled={true}
         onLongPress={[Function]}
         onPress={[Function]}
         style={
@@ -3162,6 +3164,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
         Your balance
       </Text>
       <TouchableOpacity
+        disabled={true}
         onLongPress={[Function]}
         onPress={[Function]}
         style={

app/components/UI/Bridge/Views/BridgeView/BridgeView.styles.ts

@@ -59,27 +59,28 @@ export const createStyles = (params: { theme: Theme }) => {
     keypadContainer: {
       flex: 1,
       justifyContent: 'flex-end',
-      paddingBottom: 36,
-      paddingTop: 8,
+      paddingBottom: 8,
     },
     keypad: {
       paddingHorizontal: 4,
     },
     destinationAccountSelectorContainer: {
       paddingBottom: 12,
     },
-    mainContent: {
-      flex: 1,
-    },
     dynamicContent: {
       flex: 1,
       paddingBottom: 12,
       justifyContent: 'flex-start',
     },
     keypadContainerWithDestinationPicker: {
-      justifyContent: 'center',
-      paddingTop: 8,
-      paddingBottom: 12,
+      justifyContent: 'flex-end',
+      paddingBottom: 8,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollViewContent: {
+      flexGrow: 1,
     },
   });
 };

app/components/UI/Bridge/Views/BridgeView/BridgeView.test.tsx

@@ -631,4 +631,100 @@ describe('BridgeView', () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('Error Banner Visibility', () => {
+    it('should hide error banner when input is focused', async () => {
+      // Setup state with error condition
+      const testState = createBridgeTestState({
+        bridgeControllerOverrides: {
+          quotesLoadingStatus: RequestStatus.FETCHED,
+          quotes: [],
+          quotesLastFetched: 12,
+        },
+        bridgeReducerOverrides: {
+          sourceAmount: '1.0',
+        },
+      });
+
+      // Mock quote data to show an error
+      jest
+        .mocked(useBridgeQuoteData as unknown as jest.Mock)
+        .mockImplementation(() => ({
+          ...mockUseBridgeQuoteData,
+          quoteFetchError: 'Error fetching quote',
+          isNoQuotesAvailable: true,
+          isLoading: false,
+        }));
+
+      const { getByTestId, queryByTestId } = renderScreen(
+        BridgeView,
+        {
+          name: Routes.BRIDGE.ROOT,
+        },
+        { state: testState },
+      );
+
+      // Error banner should be visible initially
+      await waitFor(() => {
+        expect(queryByTestId('banneralert')).toBeTruthy();
+      });
+
+      // Focus the input
+      const input = getByTestId('source-token-area-input');
+      fireEvent(input, 'focus');
+
+      // Error banner should be hidden
+      await waitFor(() => {
+        expect(queryByTestId('banneralert')).toBeNull();
+      });
+    });
+
+    it('should focus input and show keypad when error banner is closed', async () => {
+      // Setup state with error condition
+      const testState = createBridgeTestState({
+        bridgeControllerOverrides: {
+          quotesLoadingStatus: RequestStatus.FETCHED,
+          quotes: [],
+          quotesLastFetched: 12,
+        },
+        bridgeReducerOverrides: {
+          sourceAmount: '1.0',
+        },
+      });
+
+      // Mock quote data to show an error
+      jest
+        .mocked(useBridgeQuoteData as unknown as jest.Mock)
+        .mockImplementation(() => ({
+          ...mockUseBridgeQuoteData,
+          quoteFetchError: 'Error fetching quote',
+          isNoQuotesAvailable: true,
+          isLoading: false,
+        }));
+
+      const { getByTestId, queryByTestId } = renderScreen(
+        BridgeView,
+        {
+          name: Routes.BRIDGE.ROOT,
+        },
+        { state: testState },
+      );
+
+      // Error banner should be visible initially
+      await waitFor(() => {
+        expect(queryByTestId('banneralert')).toBeTruthy();
+      });
+
+      // Close the banner by clicking close button
+      const closeButton = getByTestId('banner-close-button-icon');
+      fireEvent.press(closeButton);
+
+      // Error banner should be hidden and keypad should be visible
+      await waitFor(() => {
+        expect(queryByTestId('banneralert')).toBeNull();
+        // Keypad should be visible - check for the delete button which is part of the keypad
+        expect(queryByTestId('keypad-delete-button')).toBeTruthy();
+      });
+    });
+  });
 });