[e2e] Add Malicious Dapp interaction test

e2e/4_discoverSheetFlow.spec.ts

@@ -37,13 +37,12 @@ describe('Discover Screen Flow', () => {
   });
 
   it('Should navigate to the Points screen after swiping left', async () => {
-    await swipe('profile-screen', 'left', 'slow');
+    await swipe('profile-screen', 'left', 'fast');
     await checkIfVisible('points-screen');
   });
 
-  it('Should navigate back to Discover screen after swiping right twice', async () => {
-    await swipe('points-screen', 'right', 'slow');
-    await swipe('profile-screen', 'right', 'slow');
+  it('Should navigate back to Discover screen after tapping Discover icon', async () => {
+    await waitAndTap('tab-bar-icon-DiscoverScreen');
     await checkIfVisible('discover-header');
   });
 

e2e/7_maliciousDappConnection.spec.ts

@@ -0,0 +1,56 @@
+import {
+  beforeAllcleanApp,
+  afterAllcleanApp,
+  importWalletFlow,
+  waitAndTap,
+  swipe,
+  checkIfVisible,
+  checkIfExistsByText,
+  typeText,
+  delayTime,
+  tapAtPoint,
+  checkIfExists,
+} from './helpers';
+import { WALLET_VARS } from './testVariables';
+
+describe('Check malicious dapp warning', () => {
+  beforeAll(async () => {
+    await beforeAllcleanApp({ hardhat: false });
+  });
+
+  afterAll(async () => {
+    await afterAllcleanApp({ hardhat: false });
+  });
+
+  it('Should be able to watch a wallet and load the wallet screen', async () => {
+    await importWalletFlow(WALLET_VARS.SEED_WALLET.PK);
+  });
+
+  it('Should be able to navigate to the dapp browser', async () => {
+    await swipe('wallet-screen', 'left', 'fast');
+    await swipe('discover-sheet', 'left', 'fast');
+    await checkIfVisible('browser-screen');
+  });
+
+  it('Should be able to type on search input and go to malicious dapp', async () => {
+    await waitAndTap('browser-search-input');
+    await checkIfExistsByText('Find apps and more');
+    await typeText('browser-search-input', 'https://test-dap-welps.vercel.app/', true, false, true);
+    // Waiting for webpage to load
+    await delayTime('long');
+  });
+
+  it('Should attempt to connect to in browser dapp', async () => {
+    // Detox can't query elements within a WebView within our app
+    // Using tapAtPoint() to tap coordinates is a workaround for now
+
+    // Tapping connect button
+    await tapAtPoint('browser-screen', { x: 275, y: 80 });
+    // Waiting for rainbowkit sheet to load / animate in
+    await delayTime('medium');
+    // Tapping Rainbow button
+    await tapAtPoint('browser-screen', { x: 50, y: 325 });
+
+    await checkIfExists('malicious-dapp-warning');
+  });
+});

e2e/environment.js

@@ -5,7 +5,7 @@ class CustomDetoxEnvironment extends DetoxCircusEnvironment {
   constructor(config, context) {
     super(config, context);
     this.launchAppTimeout = 120_000;
-    this.initTimeout = 360_000;
+    this.initTimeout = 120_000;
   }
 }
 module.exports = CustomDetoxEnvironment;

e2e/helpers.ts

@@ -28,15 +28,15 @@ export async function killHardhat() {
   exec('kill $(lsof -t -i:8545)');
 }
 
-export async function importWalletFlow() {
+export async function importWalletFlow(customSeed?: string) {
   await checkIfVisible('welcome-screen');
   await waitAndTap('already-have-wallet-button');
   await checkIfExists('add-wallet-sheet');
   await waitAndTap('restore-with-key-button');
   await checkIfExists('import-sheet');
   await clearField('import-sheet-input');
   await device.disableSynchronization();
-  await typeText('import-sheet-input', process.env.TEST_SEEDS, false);
+  await typeText('import-sheet-input', customSeed ? customSeed : process.env.TEST_SEEDS, false);
   await checkIfElementHasString('import-sheet-button-label', 'Continue');
   await waitAndTap('import-sheet-button');
   await checkIfVisible('wallet-info-modal');
@@ -51,9 +51,6 @@ export async function importWalletFlow() {
 }
 
 export async function beforeAllcleanApp({ hardhat }: { hardhat?: boolean }) {
-  // sometimes i see tests failed from the get-go
-  // giving an extra 15 to let things set up
-  await delayTime('very-long');
   jest.resetAllMocks();
   hardhat && (await startHardhat());
 }
@@ -126,7 +123,13 @@ export async function startIosSimulator() {
   }
 }
 
-export async function typeText(elementId: string | RegExp, text: string | undefined, focus = true, syncOnAndroid = false) {
+export async function typeText(
+  elementId: string | RegExp,
+  text: string | undefined,
+  focus = true,
+  syncOnAndroid = false,
+  hitEnterAfterText = false
+) {
   if (text === undefined) {
     throw new Error(`Cannot type 'undefined' into element with id ${elementId}`);
   }
@@ -139,13 +142,15 @@ export async function typeText(elementId: string | RegExp, text: string | undefi
       await device.disableSynchronization();
     }
     await element(by.id(elementId)).typeText(text);
+    hitEnterAfterText && (await typeText(elementId, '\n'));
     if (device.getPlatform() === 'android' && !syncOnAndroid) {
       await device.enableSynchronization();
     }
   } catch (error) {
     throw new Error(`Error typing "${text}" at element with id ${elementId}}: ${error}`);
   }
 }
+
 export async function typeNumbers(elementId: string | RegExp, text: string, submitLabel: string | RegExp) {
   try {
     await element(by.id(elementId)).replaceText(text.replace('\n', ''));

e2e/init.js

@@ -27,5 +27,7 @@ beforeAll(async () => {
     '.*rainbowme-res.cloudinary.com*',
     '.*rainbow-proxy-rpc.rainbowdotme.workers.*',
     '.*localhost:8081/assets/src/assets*.',
+    '.*arc-graphql.rainbowdotme.workers.dev*.',
+    '.*googleapis.com*.',
   ]);
 });

src/components/DappBrowser/DappBrowser.tsx

@@ -157,6 +157,7 @@ const TabViewScrollView = ({ children }: { children: React.ReactNode }) => {
       pinchGestureEnabled={false}
       ref={scrollViewRef}
       showsVerticalScrollIndicator={false}
+      testID={'browser-screen'}
     >
       <Animated.View style={[styles.scrollViewHeight, { height: scrollViewHeight, transform: [{ translateY: jitterCorrection }] }]}>
         {children}

src/components/DappBrowser/search-input/SearchInput.tsx

@@ -393,6 +393,7 @@ const AddressBar = React.memo(function AddressBar({
       </Animated.View>
       <Animated.View style={[styles.inputContentWrapper, animatedInputContentWrapperStyle]}>
         <AnimatedInput
+          testID={'browser-search-input'}
           animatedProps={searchInputValue}
           clearButtonMode="while-editing"
           enablesReturnKeyAutomatically

src/config/experimental.ts

@@ -1,5 +1,6 @@
 import { MMKV } from 'react-native-mmkv';
 import { STORAGE_IDS } from '@/model/mmkv';
+import { IS_TEST } from '@/env';
 
 /**
  * This file contains flags for enabling features which are still in development.
@@ -57,7 +58,7 @@ export const defaultConfig: Record<string, ExperimentalValue> = {
   [REMOTE_PROMO_SHEETS]: { settings: true, value: false },
   [REMOTE_CARDS]: { settings: true, value: false },
   [POINTS_NOTIFICATIONS_TOGGLE]: { settings: true, value: false },
-  [DAPP_BROWSER]: { settings: true, value: false },
+  [DAPP_BROWSER]: { settings: true, value: IS_TEST ? true : false },
   [SWAPS_V2]: { settings: true, value: false },
 };
 

src/screens/WalletConnectApprovalSheet.js

@@ -430,7 +430,7 @@ export default function WalletConnectApprovalSheet() {
             <Divider color={colors.rowDividerLight} inset={[0, 84]} />
           </Centered>
           {isScam && (
-            <Box paddingHorizontal={'16px'}>
+            <Box paddingHorizontal={'16px'} testID={'malicious-dapp-warning'}>
               <InfoAlert
                 rightIcon={
                   <Text size="15pt" color={{ custom: accentColor }}>