wallet-stack 1.0.0-alpha.134 → 1.0.0-alpha.135

package/package.json

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

package/src/send/EnterAmount.tsx

@@ -10,7 +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 { FilterChip, isNetworkChip } from 'src/components/FilterChipsCarousel'
 import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
 import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
 import { ReviewDetailsItem } from 'src/components/ReviewTransaction'
@@ -34,6 +34,7 @@ import { Spacing } from 'src/styles/styles'
 import { feeCurrenciesSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
 import { PreparedTransactionsResult } from 'src/viem/prepareTransactions'
+import networkConfig from 'src/web3/networkConfig'
 
 export interface ProceedArgs {
   tokenAmount: BigNumber
@@ -113,9 +114,20 @@ export default function EnterAmount({
 }: Props) {
   const { t } = useTranslation()
   const insets = useSafeAreaInsets()
-  const [token, setToken] = useState<TokenBalance>(() => defaultToken ?? tokens[0])
+  const [token, setToken] = useState<TokenBalance | undefined>(() => {
+    if (defaultToken) return defaultToken
+    const activeFilters = filterChips?.filter((chip) => chip.isSelected) ?? []
+    const selectableTokens = tokens.filter((t) =>
+      activeFilters.every((filter) =>
+        isNetworkChip(filter) ? filter.filterFn(t, filter.selectedNetworkIds) : filter.filterFn(t)
+      )
+    )
+    return selectableTokens[0]
+  })
   const [selectedPercentage, setSelectedPercentage] = useState<number | null>(null)
-  const feeCurrencies = useSelector((state) => feeCurrenciesSelector(state, token.networkId))
+  const feeCurrencies = useSelector((state) =>
+    feeCurrenciesSelector(state, token?.networkId ?? networkConfig.defaultNetworkId)
+  )
   const networkFee = useNetworkFee(prepareTransactionsResult)
   const localCurrencySymbol = useSelector(getLocalCurrencySymbol) ?? LocalCurrencySymbol.USD
 
@@ -142,6 +154,8 @@ export default function EnterAmount({
   useEffect(() => {
     onClearPreparedTransactions()
 
+    if (!token) return
+
     const canRefresh =
       processedAmounts.token.bignum &&
       processedAmounts.token.bignum.gt(0) &&
@@ -158,9 +172,9 @@ export default function EnterAmount({
   const onOpenTokenPicker = () => {
     tokenBottomSheetRef.current?.snapToIndex(0)
     AppAnalytics.track(SendEvents.token_dropdown_opened, {
-      currentTokenId: token.tokenId,
-      currentTokenAddress: token.address,
-      currentNetworkId: token.networkId,
+      currentTokenId: token?.tokenId ?? '',
+      currentTokenAddress: token?.address ?? null,
+      currentNetworkId: token?.networkId ?? null,
     })
   }
 
@@ -174,6 +188,7 @@ export default function EnterAmount({
   }
 
   const onSelectPercentageAmount = (percentage: number) => {
+    if (!token) return
     handleSelectPercentageAmount(percentage)
     setSelectedPercentage(percentage)
 
@@ -187,6 +202,7 @@ export default function EnterAmount({
   }
 
   const showLowerAmountError =
+    token &&
     processedAmounts.token.bignum &&
     !processedAmounts.token.bignum.lte(token.balance) &&
     !disableBalanceCheck
@@ -205,6 +221,7 @@ export default function EnterAmount({
     prepareTransactionsResult.transactions.length > 0
 
   const disabled =
+    !token ||
     disableProceed ||
     (disableBalanceCheck ? !!processedAmounts.token.bignum?.isZero() : !transactionIsPossible)
 
@@ -236,89 +253,95 @@ export default function EnterAmount({
             onOpenTokenPicker={tokenSelectionDisabled ? undefined : onOpenTokenPicker}
           />
 
-          {prepareTransactionsResult?.type !== 'not-enough-balance-for-gas' && !!networkFee && (
-            <View style={styles.feeContainer}>
-              <ReviewDetailsItem
-                approx
-                testID="SendEnterAmount/NetworkFee"
-                type="token-amount"
-                label={t('networkFee')}
-                tokenAmount={networkFee.amount}
-                localAmount={networkFee.localAmount}
-                tokenInfo={networkFee.token}
-                localCurrencySymbol={localCurrencySymbol}
-                onInfoPress={() => feeInfoBottomSheetRef.current?.snapToIndex(0)}
-              />
+          {token &&
+            prepareTransactionsResult?.type !== 'not-enough-balance-for-gas' &&
+            !!networkFee && (
+              <View style={styles.feeContainer}>
+                <ReviewDetailsItem
+                  approx
+                  testID="SendEnterAmount/NetworkFee"
+                  type="token-amount"
+                  label={t('networkFee')}
+                  tokenAmount={networkFee.amount}
+                  localAmount={networkFee.localAmount}
+                  tokenInfo={networkFee.token}
+                  localCurrencySymbol={localCurrencySymbol}
+                  onInfoPress={() => feeInfoBottomSheetRef.current?.snapToIndex(0)}
+                />
 
-              <FeeInfoBottomSheet forwardedRef={feeInfoBottomSheetRef} networkFee={networkFee} />
-            </View>
-          )}
+                <FeeInfoBottomSheet forwardedRef={feeInfoBottomSheetRef} networkFee={networkFee} />
+              </View>
+            )}
         </View>
 
-        {showLowerAmountError && (
-          <InLineNotification
-            variant={NotificationVariant.Warning}
-            title={t('sendEnterAmountScreen.insufficientBalanceWarning.title', {
-              tokenSymbol: token.symbol,
-            })}
-            description={t('sendEnterAmountScreen.insufficientBalanceWarning.description', {
-              tokenSymbol: token.symbol,
-            })}
-            style={styles.warning}
-            testID="SendEnterAmount/NotEnoughBalanceWarning"
-          />
-        )}
-        {showMaxAmountWarning && (
-          <InLineNotification
-            variant={NotificationVariant.Warning}
-            title={t('sendEnterAmountScreen.maxAmountWarning.title')}
-            description={t('sendEnterAmountScreen.maxAmountWarning.description', {
-              feeTokenSymbol: prepareTransactionsResult.feeCurrency.symbol,
-            })}
-            style={styles.warning}
-            testID="SendEnterAmount/MaxAmountWarning"
-          />
-        )}
-        {showNotEnoughBalanceForGasWarning && (
-          <InLineNotification
-            variant={NotificationVariant.Warning}
-            title={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.title', {
-              feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
-            })}
-            description={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.description', {
-              feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
-            })}
-            style={styles.warning}
-            testID="SendEnterAmount/NotEnoughForGasWarning"
-          />
-        )}
-        {prepareTransactionError && (
-          <InLineNotification
-            variant={NotificationVariant.Error}
-            title={t('sendEnterAmountScreen.prepareTransactionError.title')}
-            description={t('sendEnterAmountScreen.prepareTransactionError.description')}
-            style={styles.warning}
-            testID="SendEnterAmount/PrepareTransactionError"
-          />
-        )}
+        {token && (
+          <>
+            {showLowerAmountError && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('sendEnterAmountScreen.insufficientBalanceWarning.title', {
+                  tokenSymbol: token.symbol,
+                })}
+                description={t('sendEnterAmountScreen.insufficientBalanceWarning.description', {
+                  tokenSymbol: token.symbol,
+                })}
+                style={styles.warning}
+                testID="SendEnterAmount/NotEnoughBalanceWarning"
+              />
+            )}
+            {showMaxAmountWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('sendEnterAmountScreen.maxAmountWarning.title')}
+                description={t('sendEnterAmountScreen.maxAmountWarning.description', {
+                  feeTokenSymbol: prepareTransactionsResult.feeCurrency.symbol,
+                })}
+                style={styles.warning}
+                testID="SendEnterAmount/MaxAmountWarning"
+              />
+            )}
+            {showNotEnoughBalanceForGasWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.title', {
+                  feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+                })}
+                description={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.description', {
+                  feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+                })}
+                style={styles.warning}
+                testID="SendEnterAmount/NotEnoughForGasWarning"
+              />
+            )}
+            {prepareTransactionError && (
+              <InLineNotification
+                variant={NotificationVariant.Error}
+                title={t('sendEnterAmountScreen.prepareTransactionError.title')}
+                description={t('sendEnterAmountScreen.prepareTransactionError.description')}
+                style={styles.warning}
+                testID="SendEnterAmount/PrepareTransactionError"
+              />
+            )}
 
-        {children}
+            {children}
 
-        <EnterAmountOptions
-          onPressAmount={onSelectPercentageAmount}
-          selectedAmount={selectedPercentage}
-          testID="SendEnterAmount/AmountOptions"
-        />
+            <EnterAmountOptions
+              onPressAmount={onSelectPercentageAmount}
+              selectedAmount={selectedPercentage}
+              testID="SendEnterAmount/AmountOptions"
+            />
 
-        <ProceedComponent
-          tokenAmount={processedAmounts.token.bignum}
-          localAmount={processedAmounts.local.bignum}
-          token={token}
-          amountEnteredIn={amountType}
-          onPressProceed={onPressProceed}
-          disabled={disabled}
-          showLoading={prepareTransactionsLoading}
-        />
+            <ProceedComponent
+              tokenAmount={processedAmounts.token.bignum}
+              localAmount={processedAmounts.local.bignum}
+              token={token}
+              amountEnteredIn={amountType}
+              onPressProceed={onPressProceed}
+              disabled={disabled}
+              showLoading={prepareTransactionsLoading}
+            />
+          </>
+        )}
       </KeyboardAwareScrollView>
       <TokenBottomSheet
         forwardedRef={tokenBottomSheetRef}

package/src/send/SendEnterAmount.test.tsx

@@ -308,6 +308,33 @@ describe('SendEnterAmount', () => {
       expect(queryByText('sendEnterAmountScreen.miniPayFilterChip')).toBeFalsy()
     })
 
+    it('should not select a default token when isMiniPayRecipient is true and user has no MiniPay tokens', () => {
+      jest.mocked(getDynamicConfigParams).mockReturnValue({
+        miniPayTokenIds: ['celo-alfajores:0xNOT_HELD_BY_USER'],
+      })
+
+      const { getByText, queryByTestId, getByTestId } = render(
+        <Provider store={store}>
+          <MockedNavigator
+            component={SendEnterAmount}
+            params={{ ...params, isMiniPayRecipient: true }}
+          />
+        </Provider>
+      )
+
+      // "Select token" placeholder is rendered in place of the selected token
+      expect(getByText('tokenEnterAmount.selectToken')).toBeTruthy()
+      // Amount input, percentage options, and Review button are not rendered
+      expect(queryByTestId('SendEnterAmount/TokenAmountInput')).toBeNull()
+      expect(queryByTestId('SendEnterAmount/AmountOptions')).toBeNull()
+      expect(queryByTestId('SendEnterAmount/ReviewButton')).toBeNull()
+      // MiniPay filter chip is still present (inside the token picker)
+      expect(getByText('sendEnterAmountScreen.miniPayFilterChip')).toBeTruthy()
+      // Tapping the token row opens the picker
+      fireEvent.press(getByTestId('SendEnterAmount/TokenSelect'))
+      expect(getByTestId('TokenBottomSheet')).toBeTruthy()
+    })
+
     it('should include isMiniPayRecipient in send_amount_continue analytics', async () => {
       jest.mocked(usePrepareSendTransactions).mockReturnValue({
         prepareTransactionsResult: mockPrepareTransactionsResultPossible,