wallet-stack 1.0.0-alpha.128 → 1.0.0-alpha.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-stack",
-  "version": "1.0.0-alpha.128",
+  "version": "1.0.0-alpha.129",
   "author": "Valora Inc",
   "license": "Apache-2.0",
   "repository": {

package/src/analytics/Properties.tsx

@@ -493,6 +493,7 @@ interface SendEventsProperties {
     amountEnteredIn: AmountEnteredIn
     tokenId: string | null
     networkId: string | null
+    isMiniPayRecipient: boolean
   }
   [SendEvents.send_confirm_back]: undefined
   [SendEvents.send_confirm_send]:

package/src/fiatExchanges/ExternalExchanges.tsx

@@ -1,7 +1,8 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { FiatExchangeEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import BackButton from 'src/components/BackButton'
@@ -55,7 +56,7 @@ function ExternalExchanges({ route }: Props) {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['bottom']}>
       <Text style={styles.pleaseSelectExchange}>
         {t('youCanTransferOut', {
           digitalAsset: tokenInfo?.symbol,

package/src/fiatExchanges/Spend.tsx

@@ -1,7 +1,8 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { FiatExchangeEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
@@ -54,7 +55,7 @@ function Spend(props: Props) {
 
   return (
     <ScrollView style={styles.container}>
-      <SafeAreaView>
+      <SafeAreaView edges={['bottom']}>
         <Text style={styles.pleaseSelectProvider}>{t('useBalanceWithMerchants')}</Text>
         <View>
           {merchants

package/src/fiatconnect/LinkAccountScreen.tsx

@@ -3,7 +3,8 @@ import { RouteProp } from '@react-navigation/native'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { SafeAreaView, StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { FiatExchangeEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
@@ -105,7 +106,7 @@ function LinkAccountSection(props: {
   }
 
   return (
-    <SafeAreaView style={styles.content}>
+    <SafeAreaView style={styles.content} edges={['bottom']}>
       <Text style={styles.title}>{t(bodyTitle)}</Text>
       <Text testID="descriptionText" style={styles.description}>
         <Trans i18nKey={description} values={{ providerName: quote.getProviderName() }}>

package/src/fiatconnect/ReviewScreen.tsx

@@ -5,7 +5,8 @@ import BigNumber from 'bignumber.js'
 import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { useAsync } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
-import { ActivityIndicator, BackHandler, SafeAreaView, StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, BackHandler, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { FiatExchangeEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
@@ -251,7 +252,7 @@ export default function FiatConnectReviewScreen({ route, navigation }: Props) {
   }
 
   return (
-    <SafeAreaView style={styles.content}>
+    <SafeAreaView style={styles.content} edges={['bottom']}>
       <Dialog
         testID="expiredQuoteDialog"
         isVisible={showingExpiredQuoteDialog}

package/src/fiatconnect/TransferStatusScreen.tsx

@@ -1,7 +1,8 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useEffect, useState, type JSX } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ActivityIndicator, SafeAreaView, StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { FiatExchangeEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
@@ -269,7 +270,7 @@ export default function FiatConnectTransferStatusScreen({ route, navigation }: P
         ),
       })
       return (
-        <SafeAreaView style={styles.content}>
+        <SafeAreaView style={styles.content} edges={['bottom']}>
           <FailureSection flow={flow} normalizedQuote={normalizedQuote} fiatAccount={fiatAccount} />
         </SafeAreaView>
       )
@@ -282,7 +283,7 @@ export default function FiatConnectTransferStatusScreen({ route, navigation }: P
     // intentionally falls thru since TxProcessing and Completed use the same component
     case SendingTransferStatus.TxProcessing:
       return (
-        <SafeAreaView style={styles.content}>
+        <SafeAreaView style={styles.content} edges={['bottom']}>
           <SuccessOrProcessingSection
             status={fiatConnectTransfer.status}
             flow={flow}

package/src/keylessBackup/KeylessBackupIntro.tsx

@@ -1,7 +1,8 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { KeylessBackupEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
@@ -33,7 +34,7 @@ function KeylessBackupIntro({ route }: Props) {
   const { t } = useTranslation()
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['bottom']}>
       <ScrollView style={styles.scrollContainer}>
         {isSetup && <Text style={styles.title}>{t('keylessBackupIntro.setup.title')}</Text>}
         <Text

package/src/navigator/types.tsx

@@ -42,6 +42,7 @@ type SendEnterAmountParams = {
   origin: SendOrigin
   forceTokenId?: boolean
   defaultTokenIdOverride?: string
+  isMiniPayRecipient?: boolean
 }
 
 interface ValidateRecipientParams {

package/src/nfts/NftsLoadError.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { NftEvents } from 'src/analytics/Events'
 import Touchable from 'src/components/Touchable'
@@ -31,7 +32,7 @@ export default function NftsLoadError({ testID }: Props) {
   }, [])
 
   return (
-    <SafeAreaView style={styles.safeArea} testID={testID}>
+    <SafeAreaView style={styles.safeArea} testID={testID} edges={['bottom']}>
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.scrollContainer}

package/src/send/EnterAmount.tsx

@@ -10,6 +10,7 @@ import BackButton from 'src/components/BackButton'
 import { BottomSheetModalRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes } from 'src/components/Button'
 import FeeInfoBottomSheet from 'src/components/FeeInfoBottomSheet'
+import { FilterChip } from 'src/components/FilterChipsCarousel'
 import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
 import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
 import { ReviewDetailsItem } from 'src/components/ReviewTransaction'
@@ -66,6 +67,7 @@ interface Props {
   children?: React.ReactNode
   ProceedComponent: ComponentType<ProceedComponentProps>
   disableBalanceCheck?: boolean
+  filterChips?: FilterChip<TokenBalance>[]
 }
 
 export const SendProceed = ({
@@ -107,6 +109,7 @@ export default function EnterAmount({
   children,
   ProceedComponent,
   disableBalanceCheck = false,
+  filterChips,
 }: Props) {
   const { t } = useTranslation()
   const insets = useSafeAreaInsets()
@@ -325,6 +328,7 @@ export default function EnterAmount({
         tokens={tokens}
         title={t('sendEnterAmountScreen.selectToken')}
         titleStyle={styles.title}
+        filterChips={filterChips}
       />
     </SafeAreaView>
   )

package/src/send/SendEnterAmount.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react-native'
+import { fireEvent, render, waitFor, within } from '@testing-library/react-native'
 import BigNumber from 'bignumber.js'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -10,6 +10,7 @@ import { Screens } from 'src/navigator/Screens'
 import { RecipientType } from 'src/recipients/recipient'
 import SendEnterAmount from 'src/send/SendEnterAmount'
 import { usePrepareSendTransactions } from 'src/send/usePrepareSendTransactions'
+import { getDynamicConfigParams } from 'src/statsig'
 import { getSerializablePreparedTransactionsPossible } from 'src/viem/preparedTransactionSerialization'
 import { PreparedTransactionsPossible } from 'src/viem/prepareTransactions'
 import MockedNavigator from 'test/MockedNavigator'
@@ -29,6 +30,10 @@ import {
 jest.mock('src/statsig')
 jest.mock('src/send/usePrepareSendTransactions')
 
+jest.mocked(getDynamicConfigParams).mockReturnValue({
+  miniPayTokenIds: [],
+})
+
 const mockPrepareTransactionsResultPossible: PreparedTransactionsPossible = {
   type: 'possible',
   transactions: [
@@ -164,6 +169,7 @@ describe('SendEnterAmount', () => {
       underlyingTokenAddress: mockCeloAddress,
       underlyingTokenSymbol: 'CELO',
       amountEnteredIn: 'token',
+      isMiniPayRecipient: false,
     })
     expect(navigate).toHaveBeenCalledWith(Screens.SendConfirmation, {
       origin: params.origin,
@@ -232,4 +238,105 @@ describe('SendEnterAmount', () => {
     expect(getByTestId('SendEnterAmount/TokenSelect')).toHaveTextContent('cUSD', { exact: false })
     expect(getByTestId('SendEnterAmount/TokenSelect')).toBeDisabled()
   })
+
+  describe('MiniPay filter', () => {
+    const miniPayTokenIds = [mockCusdTokenId, mockUSDCTokenId]
+
+    beforeEach(() => {
+      jest.mocked(getDynamicConfigParams).mockReturnValue({
+        miniPayTokenIds,
+      })
+    })
+
+    it('should show MiniPay chip pre-selected and only MiniPay tokens when isMiniPayRecipient is true', () => {
+      const { getAllByTestId, getByText } = render(
+        <Provider store={store}>
+          <MockedNavigator
+            component={SendEnterAmount}
+            params={{ ...params, isMiniPayRecipient: true }}
+          />
+        </Provider>
+      )
+
+      expect(getByText('MiniPay')).toBeTruthy()
+
+      const tokenBottomSheet = getAllByTestId('TokenBottomSheet')[0]
+      const tokens = within(tokenBottomSheet).getAllByTestId('TokenBalanceItem')
+      // only cUSD visible (USDC is on a different network and filtered by selector)
+      expect(tokens).toHaveLength(1)
+      expect(tokens[0]).toHaveTextContent('cUSD', { exact: false })
+    })
+
+    it('should select default token from MiniPay list', () => {
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <MockedNavigator
+            component={SendEnterAmount}
+            params={{ ...params, isMiniPayRecipient: true }}
+          />
+        </Provider>
+      )
+
+      // cUSD is the only MiniPay token with balance, not CELO (which is excluded)
+      expect(getByTestId('SendEnterAmount/TokenSelect')).toHaveTextContent('cUSD', { exact: false })
+    })
+
+    it('should show all tokens when MiniPay chip is toggled off', () => {
+      const { getAllByTestId, getByText } = render(
+        <Provider store={store}>
+          <MockedNavigator
+            component={SendEnterAmount}
+            params={{ ...params, isMiniPayRecipient: true }}
+          />
+        </Provider>
+      )
+
+      fireEvent.press(getByText('MiniPay'))
+
+      const tokenBottomSheet = getAllByTestId('TokenBottomSheet')[0]
+      const tokens = within(tokenBottomSheet).getAllByTestId('TokenBalanceItem')
+      expect(tokens).toHaveLength(3)
+    })
+
+    it('should not show MiniPay chip when isMiniPayRecipient is not set', () => {
+      const { queryByText } = render(
+        <Provider store={store}>
+          <MockedNavigator component={SendEnterAmount} params={params} />
+        </Provider>
+      )
+
+      expect(queryByText('MiniPay')).toBeFalsy()
+    })
+
+    it('should include isMiniPayRecipient in send_amount_continue analytics', async () => {
+      jest.mocked(usePrepareSendTransactions).mockReturnValue({
+        prepareTransactionsResult: mockPrepareTransactionsResultPossible,
+        prepareTransactionLoading: false,
+        refreshPreparedTransactions: jest.fn(),
+        clearPreparedTransactions: jest.fn(),
+        prepareTransactionError: undefined,
+      })
+      const { getByTestId, getByText } = render(
+        <Provider store={store}>
+          <MockedNavigator
+            component={SendEnterAmount}
+            params={{ ...params, isMiniPayRecipient: true }}
+          />
+        </Provider>
+      )
+
+      fireEvent.changeText(getByTestId('SendEnterAmount/TokenAmountInput'), '8')
+
+      await waitFor(() => expect(getByText('review')).not.toBeDisabled())
+      fireEvent.press(getByText('review'))
+
+      await waitFor(() => expect(AppAnalytics.track).toHaveBeenCalledTimes(1))
+      expect(AppAnalytics.track).toHaveBeenCalledWith(
+        SendEvents.send_amount_continue,
+        expect.objectContaining({
+          isMiniPayRecipient: true,
+        })
+      )
+    })
+  })
 })

package/src/send/SendEnterAmount.tsx

@@ -1,6 +1,6 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import BigNumber from 'bignumber.js'
-import React, { useMemo } from 'react'
+import React from 'react'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { SendEvents } from 'src/analytics/Events'
 import { getLocalCurrencyCode, usdToLocalCurrencyRateSelector } from 'src/localCurrency/selectors'
@@ -11,6 +11,7 @@ import { useSelector } from 'src/redux/hooks'
 import EnterAmount, { ProceedArgs, SendProceed } from 'src/send/EnterAmount'
 import { lastUsedTokenIdSelector } from 'src/send/selectors'
 import { usePrepareSendTransactions } from 'src/send/usePrepareSendTransactions'
+import useSendFilterChips from 'src/send/useSendFilterChips'
 import { sortedTokensWithBalanceOrShowZeroBalanceSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
 import Logger from 'src/utils/Logger'
@@ -22,18 +23,24 @@ type Props = NativeStackScreenProps<StackParamList, Screens.SendEnterAmount>
 const TAG = 'SendEnterAmount'
 
 function SendEnterAmount({ route }: Props) {
-  const { defaultTokenIdOverride, origin, recipient, isFromScan, forceTokenId } = route.params
+  const {
+    defaultTokenIdOverride,
+    origin,
+    recipient,
+    isFromScan,
+    forceTokenId,
+    isMiniPayRecipient,
+  } = route.params
   // explicitly allow zero state tokens to be shown for exploration purposes for
   // new users with no balance
   const tokens = useSelector(sortedTokensWithBalanceOrShowZeroBalanceSelector)
   const lastUsedTokenId = useSelector(lastUsedTokenIdSelector)
-
-  const defaultToken = useMemo(() => {
-    const defaultToken = tokens.find((token) => token.tokenId === defaultTokenIdOverride)
-    const lastUsedToken = tokens.find((token) => token.tokenId === lastUsedTokenId)
-
-    return defaultToken ?? lastUsedToken ?? tokens[0]
-  }, [tokens, defaultTokenIdOverride, lastUsedTokenId])
+  const { filterChips, defaultToken } = useSendFilterChips({
+    isMiniPayRecipient,
+    tokens,
+    defaultTokenIdOverride,
+    lastUsedTokenId,
+  })
 
   const localCurrencyCode = useSelector(getLocalCurrencyCode)
   const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector)
@@ -72,6 +79,7 @@ function SendEnterAmount({ route }: Props) {
       amountEnteredIn,
       tokenId: token.tokenId,
       networkId: token.networkId,
+      isMiniPayRecipient: isMiniPayRecipient ?? false,
     })
   }
 
@@ -116,6 +124,7 @@ function SendEnterAmount({ route }: Props) {
       tokenSelectionDisabled={!!forceTokenId}
       onPressProceed={handleReviewSend}
       ProceedComponent={SendProceed}
+      filterChips={filterChips}
     />
   )
 }

package/src/send/useSendFilterChips.ts

@@ -0,0 +1,46 @@
+import { BooleanFilterChip } from 'src/components/FilterChipsCarousel'
+import { getDynamicConfigParams } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
+import { TokenBalance } from 'src/tokens/slice'
+
+export default function useSendFilterChips({
+  isMiniPayRecipient,
+  tokens,
+  defaultTokenIdOverride,
+  lastUsedTokenId,
+}: {
+  isMiniPayRecipient?: boolean
+  tokens: TokenBalance[]
+  defaultTokenIdOverride?: string
+  lastUsedTokenId?: string | null
+}): {
+  filterChips: BooleanFilterChip<TokenBalance>[]
+  defaultToken: TokenBalance | undefined
+} {
+  const { miniPayTokenIds: configTokenIds } = getDynamicConfigParams(
+    DynamicConfigs[StatsigDynamicConfigs.SEND_CONFIG]
+  )
+  const miniPayTokenIds = isMiniPayRecipient && configTokenIds.length > 0 ? configTokenIds : null
+
+  const filterChips: BooleanFilterChip<TokenBalance>[] = miniPayTokenIds
+    ? [
+        {
+          id: 'minipay',
+          name: 'MiniPay',
+          filterFn: (token: TokenBalance) => miniPayTokenIds.includes(token.tokenId),
+          isSelected: true,
+        },
+      ]
+    : []
+
+  const eligibleTokens = miniPayTokenIds
+    ? tokens.filter((token) => miniPayTokenIds.includes(token.tokenId))
+    : tokens
+  const defaultToken =
+    eligibleTokens.find((token) => token.tokenId === defaultTokenIdOverride) ??
+    eligibleTokens.find((token) => token.tokenId === lastUsedTokenId) ??
+    eligibleTokens[0]
+
+  return { filterChips, defaultToken }
+}

package/src/statsig/constants.ts

@@ -164,6 +164,12 @@ export const DynamicConfigs = {
       inviteRewardsVersion: 'none',
     },
   },
+  [StatsigDynamicConfigs.SEND_CONFIG]: {
+    configName: StatsigDynamicConfigs.SEND_CONFIG,
+    defaultValues: {
+      miniPayTokenIds: [] as string[],
+    },
+  },
 } satisfies {
   [key in StatsigDynamicConfigs]: {
     configName: key

package/src/statsig/types.ts

@@ -11,6 +11,7 @@ export enum StatsigDynamicConfigs {
   DEMO_MODE_CONFIG = 'demo_mode_config',
   FIAT_CONNECT_CONFIG = 'fiat_connect_config',
   INVITE_REWARDS_CONFIG = 'invite_rewards_config',
+  SEND_CONFIG = 'send_config',
 }
 
 export enum StatsigFeatureGates {