Merge branch 'main' into renovate/react-native-masked-view-masked-vie…

…w-0.x

src/analytics/Properties.tsx

@@ -571,7 +571,7 @@ interface SendEventsProperties {
         localCurrencyExchangeRate?: string | null
         localCurrency: LocalCurrencyCode
         localCurrencyAmount: string | null
-        underlyingTokenAddress: string
+        underlyingTokenAddress: string | null
         underlyingTokenSymbol: string
         underlyingAmount: string | null
         amountInUsd: string | null
@@ -639,18 +639,26 @@ interface SendEventsProperties {
     error: string
   }
   [SendEvents.token_dropdown_opened]: {
-    currentTokenAddress: string
+    currentTokenId: string
+    currentTokenAddress: string | null
+    currentNetworkId: NetworkId | null
   }
   [SendEvents.token_selected]: {
     origin: TokenPickerOrigin
-    tokenAddress: string
+    tokenId: string
+    tokenAddress: string | null
+    networkId: NetworkId | null
   }
   [SendEvents.max_pressed]: {
-    tokenAddress: string
+    tokenId: string
+    tokenAddress: string | null
+    networkId: NetworkId | null
   }
   [SendEvents.swap_input_pressed]: {
-    tokenAddress: string
     swapToLocalAmount: boolean
+    tokenId: string
+    tokenAddress: string | null
+    networkId: NetworkId | null
   }
   [SendEvents.check_account_alert_shown]: undefined
   [SendEvents.check_account_do_not_ask_selected]: undefined
@@ -682,7 +690,7 @@ interface RequestEventsProperties {
         localCurrencyExchangeRate?: string | null
         localCurrency: LocalCurrencyCode
         localCurrencyAmount: string | null
-        underlyingTokenAddress: string
+        underlyingTokenAddress: string | null
         underlyingTokenSymbol: string
         underlyingAmount: string | null
         amountInUsd: string | null

src/components/BackButton.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native'
 import BackChevron, { Props as BackChevronProps } from 'src/icons/BackChevron'
 import { navigateBack } from 'src/navigator/NavigationService'
 import { TopBarIconButton, TopBarIconButtonProps } from 'src/navigator/TopBarButton'
+import { Spacing } from 'src/styles/styles'
 
 type Props = Omit<TopBarIconButtonProps, 'icon'> & BackChevronProps
 
@@ -11,6 +12,7 @@ function BackButton(props: Props) {
     <View style={[styles.container, props.style]}>
       <TopBarIconButton
         {...props}
+        style={styles.button}
         icon={<BackChevron color={props.color} height={props.height} />}
       />
     </View>
@@ -26,6 +28,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  button: {
+    // Quick hack to workaround hitSlop set for the internal Touchable component not working
+    // I tried removing the parent view, but it didn't help either
+    paddingHorizontal: Spacing.Regular16,
+    paddingVertical: Spacing.Small12, // vertical padding slightly smaller so the ripple effect isn't cut off
+    left: -Spacing.Regular16,
+  },
 })
 
 export default BackButton

src/components/LegacyTokenDisplay.test.tsx

@@ -4,20 +4,20 @@ import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
 import LegacyTokenDisplay from 'src/components/LegacyTokenDisplay'
+import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { RootState } from 'src/redux/reducers'
+import { NetworkId } from 'src/transactions/types'
 import { Currency } from 'src/utils/currencies'
 import { createMockStore, getElementText, RecursivePartial } from 'test/utils'
-import { NetworkId } from 'src/transactions/types'
 import {
-  mockCusdTokenId,
-  mockCusdAddress,
-  mockCeurTokenId,
-  mockCeurAddress,
-  mockCeloTokenId,
   mockCeloAddress,
+  mockCeloTokenId,
+  mockCeurAddress,
+  mockCeurTokenId,
+  mockCusdAddress,
+  mockCusdTokenId,
 } from 'test/values'
-import { formatValueToDisplay } from 'src/components/TokenDisplay'
 jest.mock('src/statsig', () => ({
   getFeatureGate: jest.fn(() => false),
 }))

src/components/LegacyTokenDisplay.tsx

@@ -1,10 +1,10 @@
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import { StyleProp, TextStyle } from 'react-native'
+import TokenDisplay from 'src/components/TokenDisplay'
 import { useTokenInfoByAddress, useTokenInfoWithAddressBySymbol } from 'src/tokens/hooks'
 import { LocalAmount } from 'src/transactions/types'
 import { Currency } from 'src/utils/currencies'
-import TokenDisplay from 'src/components/TokenDisplay'
 
 interface Props {
   amount: BigNumber.Value

src/components/TokenBalance.test.tsx

@@ -10,7 +10,7 @@ import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { getDynamicConfigParams, getFeatureGate } from 'src/statsig'
-import * as tokenUtils from 'src/tokens/utils'
+import { StatsigFeatureGates } from 'src/statsig/types'
 import { NetworkId } from 'src/transactions/types'
 import { ONE_DAY_IN_MILLIS } from 'src/utils/time'
 import { createMockStore, getElementText } from 'test/utils'
@@ -48,17 +48,18 @@ const defaultStore = {
   },
 }
 
-jest.mocked(getFeatureGate).mockReturnValue(true)
 jest.mocked(getDynamicConfigParams).mockReturnValue({
   showBalances: [NetworkId['celo-alfajores']],
 })
 
 describe('FiatExchangeTokenBalance and HomeTokenBalance', () => {
-  const showAssetDetailsScreenSpy = jest.spyOn(tokenUtils, 'showAssetDetailsScreen')
-
   beforeEach(() => {
-    showAssetDetailsScreenSpy.mockReturnValue(false)
     jest.clearAllMocks()
+    jest
+      .mocked(getFeatureGate)
+      .mockImplementation(
+        (featureGate) => featureGate !== StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN
+      )
   })
 
   it.each([HomeTokenBalance, FiatExchangeTokenBalance])(
@@ -153,7 +154,6 @@ describe('FiatExchangeTokenBalance and HomeTokenBalance', () => {
   it.each([HomeTokenBalance, FiatExchangeTokenBalance])(
     'navigates to Assets screen on View Balances tap if AssetDetails feature gate is true',
     async (TokenBalanceComponent) => {
-      showAssetDetailsScreenSpy.mockReturnValue(true)
       const store = createMockStore({
         ...defaultStore,
         tokens: {
@@ -181,6 +181,8 @@ describe('FiatExchangeTokenBalance and HomeTokenBalance', () => {
         },
       })
 
+      jest.mocked(getFeatureGate).mockReturnValue(true)
+
       const { getByTestId } = render(
         <Provider store={store}>
           <TokenBalanceComponent />
@@ -217,7 +219,6 @@ describe('FiatExchangeTokenBalance and HomeTokenBalance', () => {
   )
 
   it('HomeTokenBalance shows View Assets link if balance is zero and feature gate is true', async () => {
-    showAssetDetailsScreenSpy.mockReturnValue(true)
     const store = createMockStore({
       ...defaultStore,
       tokens: {
@@ -228,6 +229,8 @@ describe('FiatExchangeTokenBalance and HomeTokenBalance', () => {
       },
     })
 
+    jest.mocked(getFeatureGate).mockReturnValue(true)
+
     const tree = render(
       <Provider store={store}>
         <HomeTokenBalance />

src/components/TokenBalance.tsx

@@ -17,6 +17,7 @@ import { hideAlert, showToast } from 'src/alert/actions'
 import { AssetsEvents, FiatExchangeEvents, HomeEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import Dialog from 'src/components/Dialog'
+import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import { useShowOrHideAnimation } from 'src/components/useShowOrHideAnimation'
 import { refreshAllBalances } from 'src/home/actions'
 import InfoIcon from 'src/icons/InfoIcon'
@@ -29,6 +30,8 @@ import {
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { totalPositionsBalanceUsdSelector } from 'src/positions/selectors'
+import { getFeatureGate } from 'src/statsig'
+import { StatsigFeatureGates } from 'src/statsig/types'
 import Colors from 'src/styles/colors'
 import fontStyles, { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
@@ -41,8 +44,7 @@ import {
   useTotalTokenBalance,
 } from 'src/tokens/hooks'
 import { tokenFetchErrorSelector, tokenFetchLoadingSelector } from 'src/tokens/selectors'
-import { formatValueToDisplay } from 'src/components/TokenDisplay'
-import { getSupportedNetworkIdsForTokenBalances, showAssetDetailsScreen } from 'src/tokens/utils'
+import { getSupportedNetworkIdsForTokenBalances } from 'src/tokens/utils'
 
 function TokenBalance({
   style = styles.balance,
@@ -183,7 +185,11 @@ export function AssetsTokenBalance({ showInfo }: { showInfo: boolean }) {
           )}
         </View>
         <TokenBalance
-          style={showAssetDetailsScreen() ? styles.totalBalance : styles.balance}
+          style={
+            getFeatureGate(StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN)
+              ? styles.totalBalance
+              : styles.balance
+          }
           singleTokenViewEnabled={false}
         />
 
@@ -209,7 +215,11 @@ export function HomeTokenBalance() {
     ValoraAnalytics.track(HomeEvents.view_token_balances, {
       totalBalance: totalBalance?.toString(),
     })
-    navigate(showAssetDetailsScreen() ? Screens.Assets : Screens.TokenBalances)
+    navigate(
+      getFeatureGate(StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN)
+        ? Screens.Assets
+        : Screens.TokenBalances
+    )
   }
 
   const onCloseDialog = () => {
@@ -239,14 +249,21 @@ export function HomeTokenBalance() {
         >
           {t('whatTotalValue.body')}
         </Dialog>
-        {(showAssetDetailsScreen() || tokenBalances.length >= 1) && (
+        {(getFeatureGate(StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN) ||
+          tokenBalances.length >= 1) && (
           <TouchableOpacity style={styles.row} onPress={onViewBalances} testID="ViewBalances">
             <Text style={styles.viewBalances}>{t('viewBalances')}</Text>
             <ProgressArrow style={styles.arrow} color={Colors.greenUI} />
           </TouchableOpacity>
         )}
       </View>
-      <TokenBalance style={showAssetDetailsScreen() ? styles.totalBalance : styles.balance} />
+      <TokenBalance
+        style={
+          getFeatureGate(StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN)
+            ? styles.totalBalance
+            : styles.balance
+        }
+      />
     </View>
   )
 }
@@ -260,7 +277,11 @@ export function FiatExchangeTokenBalance() {
     ValoraAnalytics.track(FiatExchangeEvents.cico_landing_token_balance, {
       totalBalance: totalBalance?.toString(),
     })
-    navigate(showAssetDetailsScreen() ? Screens.Assets : Screens.TokenBalances)
+    navigate(
+      getFeatureGate(StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN)
+        ? Screens.Assets
+        : Screens.TokenBalances
+    )
   }
 
   return (

src/components/TokenBottomSheet.test.tsx

@@ -8,7 +8,7 @@ import TokenBottomSheet, {
   DEBOUCE_WAIT_TIME,
   TokenPickerOrigin,
 } from 'src/components/TokenBottomSheet'
-import { TokenBalanceWithAddress } from 'src/tokens/slice'
+import { TokenBalance } from 'src/tokens/slice'
 import { NetworkId } from 'src/transactions/types'
 import { createMockStore } from 'test/utils'
 import {
@@ -22,7 +22,7 @@ import {
 
 jest.mock('src/analytics/ValoraAnalytics')
 
-const tokens: TokenBalanceWithAddress[] = [
+const tokens: TokenBalance[] = [
   {
     balance: new BigNumber('10'),
     priceUsd: new BigNumber('1'),
@@ -140,13 +140,19 @@ describe('TokenBottomSheet', () => {
     const { getByTestId } = renderBottomSheet()
 
     fireEvent.press(getByTestId('cUSDTouchable'))
-    expect(onTokenSelectedMock).toHaveBeenLastCalledWith(mockCusdAddress)
+    expect(onTokenSelectedMock).toHaveBeenLastCalledWith(
+      tokens.find((token) => token.tokenId === mockCusdTokenId)
+    )
 
     fireEvent.press(getByTestId('cEURTouchable'))
-    expect(onTokenSelectedMock).toHaveBeenLastCalledWith(mockCeurAddress)
+    expect(onTokenSelectedMock).toHaveBeenLastCalledWith(
+      tokens.find((token) => token.tokenId === mockCeurTokenId)
+    )
 
     fireEvent.press(getByTestId('TTTouchable'))
-    expect(onTokenSelectedMock).toHaveBeenLastCalledWith(mockTestTokenAddress)
+    expect(onTokenSelectedMock).toHaveBeenLastCalledWith(
+      tokens.find((token) => token.tokenId === mockTestTokenTokenId)
+    )
   })
 
   it('renders and behaves correctly when the search is enabled', () => {