feat(earn): Add Claiming Reward line item on enter amount screen

locales/base/translation.json

@@ -2559,6 +2559,7 @@
       "fees": "Fees",
       "available": "Available",
       "swap": "Swap",
+      "claimingReward": "Claiming Reward",
       "earnUpToLabel": "You could earn up to:",
       "rateLabel": "Rate (est.)",
       "earnUpTo": "~{{fiatSymbol}}{{amount}} / yr",

src/earn/EarnEnterAmount.test.tsx

@@ -10,6 +10,8 @@ import { usePrepareTransactions } from 'src/earn/prepareTransactions'
 import { CICOFlow } from 'src/fiatExchanges/utils'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
+import { getFeatureGate } from 'src/statsig'
+import { StatsigFeatureGates } from 'src/statsig/types'
 import { SwapTransaction } from 'src/swap/types'
 import { TokenBalance } from 'src/tokens/slice'
 import { NetworkId } from 'src/transactions/types'
@@ -27,13 +29,18 @@ import {
   mockArbEthTokenId,
   mockArbUsdcTokenId,
   mockEarnPositions,
+  mockPositions,
+  mockRewardsPositions,
   mockTokenBalances,
   mockUSDCAddress,
 } from 'test/values'
 
 jest.mock('src/earn/prepareTransactions')
 jest.mock('react-native-localize')
 jest.mock('src/statsig') // statsig isn't used directly but the hooksApiSelector uses it
+jest
+  .mocked(getFeatureGate)
+  .mockImplementation((featureGateName) => featureGateName === StatsigFeatureGates.SHOW_POSITIONS)
 
 const mockPreparedTransaction: PreparedTransactionsPossible = {
   type: 'possible' as const,
@@ -132,6 +139,9 @@ const store = createMockStore({
       },
     },
   },
+  positions: {
+    positions: [...mockPositions, ...mockRewardsPositions],
+  },
 })
 
 const params = {
@@ -523,7 +533,28 @@ describe('EarnEnterAmount', () => {
       expect(getByTestId('EarnEnterAmount/Continue')).toBeDisabled()
     })
 
-    it('should show the the Withdrawing and Claiming card if withdrawalIncludesClaim is true', async () => {
+    it('should show the Claiming Reward line item if withdrawalIncludesClaim is true and user has rewards', async () => {
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <MockedNavigator
+            component={EarnEnterAmount}
+            params={{
+              pool: {
+                ...mockEarnPositions[0],
+                dataProps: { ...mockEarnPositions[0].dataProps, withdrawalIncludesClaim: true },
+              },
+              mode: 'withdraw',
+            }}
+          />
+        </Provider>
+      )
+
+      expect(getByTestId('LabelWithInfo/ClaimingReward-0')).toBeTruthy()
+      expect(getByTestId('EarnEnterAmount/Reward-0')).toHaveTextContent('₱0.016')
+      expect(getByTestId('EarnEnterAmount/Reward-0-crypto')).toHaveTextContent('0.01 ARB')
+    })
+
+    it('should show the  Withdrawing and Claiming card if withdrawalIncludesClaim is true', async () => {
       const { getByTestId } = render(
         <Provider store={store}>
           <MockedNavigator

src/earn/EarnEnterAmount.tsx

@@ -31,8 +31,8 @@ import { getLocalCurrencySymbol } from 'src/localCurrency/selectors'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
-import { hooksApiUrlSelector } from 'src/positions/selectors'
-import { EarnPosition } from 'src/positions/types'
+import { hooksApiUrlSelector, positionsWithBalanceSelector } from 'src/positions/selectors'
+import { EarnPosition, Position } from 'src/positions/types'
 import { useSelector } from 'src/redux/hooks'
 import { AmountInput } from 'src/send/EnterAmount'
 import { AmountEnteredIn } from 'src/send/types'
@@ -286,6 +286,16 @@ function EarnEnterAmount({ route }: Props) {
     prepareTransactionsResult.type === 'possible' &&
     prepareTransactionsResult.transactions.length > 0
 
+  const allRewardsPositions = useSelector(positionsWithBalanceSelector)
+
+  const rewardsPositions = useMemo(
+    () =>
+      allRewardsPositions.filter((position) =>
+        pool.dataProps.rewardsPositionIds?.includes(position.positionId)
+      ),
+    [allRewardsPositions, pool.dataProps.rewardsPositionIds]
+  )
+
   const disabled =
     // Should disable if the user enters 0, has enough balance but the transaction is not possible, or does not have enough balance
     !!tokenAmount?.isZero() || !transactionIsPossible
@@ -450,6 +460,7 @@ function EarnEnterAmount({ route }: Props) {
               prepareTransactionsResult={prepareTransactionsResult}
               feeDetailsBottomSheetRef={feeDetailsBottomSheetRef}
               balanceInInputToken={balanceInInputToken}
+              rewardsPositions={rewardsPositions}
             />
           )}
         </View>
@@ -507,7 +518,7 @@ function EarnEnterAmount({ route }: Props) {
             testID="EarnEnterAmount/PrepareTransactionError"
           />
         )}
-        {isWithdrawal && pool.dataProps.withdrawalIncludesClaim && (
+        {isWithdrawal && pool.dataProps.withdrawalIncludesClaim && rewardsPositions.length > 0 && (
           <InLineNotification
             variant={NotificationVariant.Info}
             title={t('earnFlow.enterAmount.withdrawingAndClaimingCard.title')}
@@ -582,12 +593,14 @@ function TransactionWithdrawDetails({
   prepareTransactionsResult,
   feeDetailsBottomSheetRef,
   balanceInInputToken,
+  rewardsPositions,
 }: {
   pool: EarnPosition
   token: TokenBalance
   prepareTransactionsResult?: PreparedTransactionsResult
   feeDetailsBottomSheetRef: React.RefObject<BottomSheetModalRefType>
   balanceInInputToken: BigNumber
+  rewardsPositions: Position[]
 }) {
   const { t } = useTranslation()
   const { maxFeeAmount, feeCurrency } = getFeeCurrencyAndAmounts(prepareTransactionsResult)
@@ -619,6 +632,33 @@ function TransactionWithdrawDetails({
           </Text>
         </View>
       </View>
+      {pool.dataProps.withdrawalIncludesClaim &&
+        rewardsPositions.map((position, index) => (
+          <View key={index} style={styles.txDetailsLineItem}>
+            <LabelWithInfo
+              label={t('earnFlow.enterAmount.claimingReward')}
+              testID={`LabelWithInfo/ClaimingReward-${index}`}
+            />
+            <View style={{ ...styles.txDetailsValue, flex: 1 }}>
+              <TokenDisplay
+                testID={`EarnEnterAmount/Reward-${index}`}
+                tokenId={position.tokens[0].tokenId}
+                amount={position.tokens[0].balance.toString()}
+                style={styles.txDetailsValueText}
+              />
+              <Text style={[styles.txDetailsValueText, styles.gray4]}>
+                {'('}
+                <TokenDisplay
+                  testID={`EarnEnterAmount/Reward-${index}-crypto`}
+                  tokenId={position.tokens[0].tokenId}
+                  amount={position.tokens[0].balance.toString()}
+                  showLocalAmount={false}
+                />
+                {')'}
+              </Text>
+            </View>
+          </View>
+        ))}
       {feeCurrency && maxFeeAmount && (
         <View style={styles.txDetailsLineItem}>
           <LabelWithInfo