Merge branch 'develop' into @matthew/APP-1233

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');
@@ -52,9 +52,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());
 }
@@ -127,7 +124,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}`);
   }
@@ -140,13 +143,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*.',
   ]);
 });

index.js

@@ -5,11 +5,14 @@ It needs to be an import statement because otherwise it doesn't load properly
 likely because of typescript.
 */
 import '@walletconnect/react-native-compat';
+import { initSentry } from '@/logger/sentry';
 import { analytics } from './src/analytics';
 import { StartTime } from './src/performance/start-time';
 import { PerformanceTracking } from './src/performance/tracking';
 import { PerformanceMetrics } from './src/performance/tracking/types/PerformanceMetrics';
 
+initSentry();
+
 analytics.track('Started executing JavaScript bundle');
 PerformanceTracking.logDirectly(PerformanceMetrics.loadJSBundle, Date.now() - StartTime.START_TIME);
 PerformanceTracking.startMeasuring(PerformanceMetrics.loadRootAppComponent);

package.json

@@ -374,6 +374,7 @@
     "webpack-cli": "5.1.4"
   },
   "resolutions": {
+    "**/braces": "3.0.3",
     "**/async": "2.6.4",
     "**/zod": "3.22.3",
     "**/file-type": "16.5.4",

src/App.js

@@ -42,7 +42,6 @@ import { InitialRouteContext } from '@/navigation/initialRoute';
 import Routes from '@/navigation/routesNames';
 import { Portal } from '@/react-native-cool-modals/Portal';
 import { NotificationsHandler } from '@/notifications/NotificationsHandler';
-import { initSentry, sentryRoutingInstrumentation } from '@/logger/sentry';
 import { analyticsV2 } from '@/analytics';
 import { getOrCreateDeviceId, securelyHashWalletAddress } from '@/analytics/utils';
 import { logger, RainbowError } from '@/logger';
@@ -57,9 +56,10 @@ import { handleReviewPromptAction } from '@/utils/reviewAlert';
 import { RemotePromoSheetProvider } from '@/components/remote-promo-sheet/RemotePromoSheetProvider';
 import { RemoteCardProvider } from '@/components/cards/remote-cards';
 import { initializeRemoteConfig } from '@/model/remoteConfig';
+import { IS_DEV } from './env';
 import { checkIdentifierOnLaunch } from './model/backup';
 
-if (__DEV__) {
+if (IS_DEV) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();
   (showNetworkRequests || showNetworkResponses) && monitorNetwork(showNetworkRequests, showNetworkResponses);
 }
@@ -218,10 +218,6 @@ class OldApp extends Component {
     updateBalancesAfter(isL2 ? 10000 : 5000, isL2, network);
   };
 
-  handleSentryNavigationIntegration = () => {
-    sentryRoutingInstrumentation?.registerNavigationContainer(this.navigatorRef);
-  };
-
   render() {
     return (
       <Portal>
@@ -230,7 +226,7 @@ class OldApp extends Component {
             <RemotePromoSheetProvider isWalletReady={this.props.walletReady}>
               <RemoteCardProvider>
                 <InitialRouteContext.Provider value={this.state.initialRoute}>
-                  <RoutesComponent onReady={this.handleSentryNavigationIntegration} ref={this.handleNavigatorRef} />
+                  <RoutesComponent ref={this.handleNavigatorRef} />
                   <PortalConsumer />
                 </InitialRouteContext.Provider>
               </RemoteCardProvider>
@@ -257,9 +253,7 @@ function Root() {
 
   React.useEffect(() => {
     async function initializeApplication() {
-      await initSentry(); // must be set up immediately
       await initializeRemoteConfig();
-      // must happen immediately, but after Sentry
       await migrate();
 
       const isReturningUser = ls.device.get(['isReturningUser']);
@@ -339,7 +333,7 @@ function Root() {
         // init complete, load the rest of the app
         setInitializing(false);
       })
-      .catch(e => {
+      .catch(() => {
         logger.error(new RainbowError(`initializeApplication failed`));
 
         // for failure, continue to rest of the app for now
@@ -369,6 +363,7 @@ function Root() {
   );
 }
 
+/** Wrapping Root allows Sentry to accurately track startup times */
 const RootWithSentry = Sentry.wrap(Root);
 
 const PlaygroundWithReduxStore = () => (

src/__swaps__/safe-math/SafeMath.ts

@@ -1,15 +1,35 @@
 // Utility function to remove the decimal point and keep track of the number of decimal places
 const removeDecimalWorklet = (num: string): [bigint, number] => {
   'worklet';
-  const parts = num.split('.');
-  const decimalPlaces = parts.length === 2 ? parts[1].length : 0;
-  const bigIntNum = BigInt(parts.join(''));
+  let decimalPlaces = 0;
+  let bigIntNum: bigint;
+
+  if (/[eE]/.test(num)) {
+    const [base, exponent] = num.split(/[eE]/);
+    const exp = Number(exponent);
+    const parts = base.split('.');
+    const baseDecimalPlaces = parts.length === 2 ? parts[1].length : 0;
+    const bigIntBase = BigInt(parts.join(''));
+
+    if (exp >= 0) {
+      decimalPlaces = baseDecimalPlaces - exp;
+      bigIntNum = bigIntBase * BigInt(10) ** BigInt(exp);
+    } else {
+      decimalPlaces = baseDecimalPlaces - exp;
+      bigIntNum = bigIntBase;
+    }
+  } else {
+    const parts = num.split('.');
+    decimalPlaces = parts.length === 2 ? parts[1].length : 0;
+    bigIntNum = BigInt(parts.join(''));
+  }
+
   return [bigIntNum, decimalPlaces];
 };
 
 const isNumberStringWorklet = (value: string): boolean => {
   'worklet';
-  return /^-?\d+(\.\d+)?$/.test(value);
+  return /^-?\d+(\.\d+)?([eE][-+]?\d+)?$/.test(value);
 };
 
 const isZeroWorklet = (value: string): boolean => {
@@ -43,7 +63,11 @@ const formatResultWorklet = (result: bigint): string => {
 // Helper function to handle string and number input types
 const toStringWorklet = (value: string | number): string => {
   'worklet';
-  return typeof value === 'number' ? value.toString() : value;
+  const ret = typeof value === 'number' ? value.toString() : value;
+  if (/^\d+\.$/.test(ret)) {
+    return ret.slice(0, -1);
+  }
+  return ret;
 };
 
 // Converts a numeric string to a scaled integer string, preserving the specified decimal places

src/__swaps__/safe-math/__tests__/SafeMath.test.ts

@@ -32,14 +32,16 @@ const RESULTS = {
   floor: '1243425',
   toScaledInteger: '57464009350560633',
   negativePow: '0.001',
+  negativeExp: '6.0895415516156',
 };
 
 const VALUE_A = '1243425.345';
 const VALUE_B = '3819.24';
 const VALUE_C = '2';
 const VALUE_D = '1243425.745';
 const VALUE_E = '0.057464009350560633';
-const VALUE_F = '0.001';
+const VALUE_F = '147887324';
+const VALUE_G = '4.11769e-8';
 const NEGATIVE_VALUE = '-2412.12';
 const ZERO = '0';
 const ONE = '1';
@@ -80,6 +82,7 @@ describe('SafeMath', () => {
     expect(mulWorklet(VALUE_A, VALUE_B)).toBe(RESULTS.mul);
     expect(mulWorklet(Number(VALUE_A), VALUE_B)).toBe(RESULTS.mul);
     expect(mulWorklet(VALUE_A, Number(VALUE_B))).toBe(RESULTS.mul);
+    expect(mulWorklet(VALUE_F, VALUE_G)).toBe(RESULTS.negativeExp);
   });
 
   test('divWorklet', () => {

src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import React from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import { PixelRatio, StyleSheet, View, ViewStyle } from 'react-native';
 import { borders } from '@/styles';
 import { useTheme } from '@/theme';
 import Animated, { SharedValue, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
@@ -11,7 +11,9 @@ import { AnimatedChainImage } from './AnimatedChainImage';
 import { fadeConfig } from '../constants';
 import { SwapCoinIconTextFallback } from './SwapCoinIconTextFallback';
 import { Box } from '@/design-system';
-import { IS_ANDROID } from '@/env';
+import { IS_ANDROID, IS_IOS } from '@/env';
+
+const PIXEL_RATIO = PixelRatio.get();
 
 const fallbackIconStyle = {
   ...borders.buildCircleAsObject(32),
@@ -49,7 +51,7 @@ export const AnimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
     return {
       source: {
         ...DEFAULT_FASTER_IMAGE_CONFIG,
-        borderRadius: IS_ANDROID ? size / 2 : undefined,
+        borderRadius: IS_ANDROID ? (size / 2) * PIXEL_RATIO : undefined,
         transitionDuration: 0,
         url: asset.value?.icon_url ?? '',
       },
@@ -118,7 +120,7 @@ export const AnimatedSwapCoinIcon = React.memo(function FeedCoinIcon({
             style={[
               sx.coinIcon,
               {
-                borderRadius: size / 2,
+                borderRadius: IS_IOS ? size / 2 : undefined,
                 height: size,
                 width: size,
               },

src/__swaps__/screens/Swap/components/AnimatedSwitch.tsx

@@ -12,9 +12,10 @@ type AnimatedSwitchProps = {
   value: SharedValue<boolean>;
   activeLabel?: string;
   inactiveLabel?: string;
+  disabled?: boolean;
 } & Omit<GestureHandlerButtonProps, 'children'>;
 
-export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ...props }: AnimatedSwitchProps) {
+export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, disabled = false, ...props }: AnimatedSwitchProps) {
   const { isDarkMode } = useColorMode();
 
   const inactiveBg = useForegroundColor('fillSecondary');
@@ -27,6 +28,7 @@ export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ..
         ? withTiming(opacityWorklet(inactiveBg, 0.12), TIMING_CONFIGS.fadeConfig)
         : withTiming(opacityWorklet(activeBg, 0.64), TIMING_CONFIGS.fadeConfig),
       borderColor: opacityWorklet(border, 0.06),
+      opacity: disabled ? 0.4 : 1,
     };
   });
 
@@ -41,6 +43,8 @@ export function AnimatedSwitch({ value, onToggle, activeLabel, inactiveLabel, ..
   });
 
   const labelItem = useDerivedValue(() => {
+    if (disabled) return;
+
     if (!activeLabel && !inactiveLabel) {
       return;
     }