chore: display all pools and my pools on earn tab bar (#5812)

### Description Changes the pools tab titles and display from: - Open Pools & My Pools - All Pools & My Pools | iOS Before | iOS After | | ----- | ----- | | ![](https://github.com/user-attachments/assets/96f63a50-b492-47be-96ba-9411d37a182e "iOS Before") | ![](https://github.com/user-attachments/assets/c54f5aff-6d76-4330-aea9-9661ce6b08e3 "iOS After") | ### Test plan - [x] Tested locally on iOS - [x] Unit tests updated ### Related issues - Fixes ACT-1332 ### Backwards compatibility Yes ### Network scalability N/A
valora-inc · Aug 23, 2024 · 56ac748 · 56ac748
1 parent 4c4438d
commit 56ac748
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 27 deletions.
diff --git a/locales/base/translation.json b/locales/base/translation.json
@@ -2634,8 +2634,8 @@
       "depositAndEarnings": "Deposit & Earnings"
     },
     "poolFilters": {
-      "openPools": "Open Pools",
-      "myPools": "My Pools"
+      "myPools": "My Pools",
+      "allPools": "All Pools"
     }
   },
   "addFundsActions": {

diff --git a/src/earn/EarnHome.test.tsx b/src/earn/EarnHome.test.tsx
@@ -142,13 +142,13 @@ describe('EarnHome', () => {
 
     expect(getByText('earnFlow.home.noPoolsTitle')).toBeTruthy()
   })
-  it('renders open pools correctly', () => {
-    const { getByTestId, getAllByTestId } = render(
+  it('renders all pools correctly', () => {
+    const { getByTestId, queryAllByTestId } = render(
       <Provider store={getStore()}>
         <MockedNavigator
           component={EarnHome}
           params={{
-            activeEarnTab: EarnTabType.OpenPools,
+            activeEarnTab: EarnTabType.AllPools,
           }}
         />
       </Provider>
@@ -161,10 +161,10 @@ describe('EarnHome', () => {
       getByTestId('PoolCard/ethereum-sepolia:0xe50fa9b3c56ffb159cb0fca61f5c9d750e8128c8')
     ).toBeTruthy()
 
-    const tabItems = getAllByTestId('Earn/TabBarItem')
+    const tabItems = queryAllByTestId('Earn/TabBarItem')
     expect(tabItems).toHaveLength(2)
-    expect(tabItems[0]).toHaveTextContent('openPools')
-    expect(tabItems[1]).toHaveTextContent('myPools')
+    expect(tabItems[0]).toHaveTextContent('earnFlow.poolFilters.allPools')
+    expect(tabItems[1]).toHaveTextContent('earnFlow.poolFilters.myPools')
   })
 
   it('correctly shows pool under my pools if has balance', () => {
@@ -173,19 +173,27 @@ describe('EarnHome', () => {
         <MockedNavigator
           component={EarnHome}
           params={{
-            activeEarnTab: EarnTabType.OpenPools,
+            activeEarnTab: EarnTabType.AllPools,
           }}
         />
       </Provider>
     )
 
+    // All Pools
     expect(
       queryByTestId('PoolCard/arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216')
-    ).toBeFalsy()
+    ).toBeTruthy()
+    expect(
+      getByTestId('PoolCard/ethereum-sepolia:0xe50fa9b3c56ffb159cb0fca61f5c9d750e8128c8')
+    ).toBeTruthy()
     fireEvent.press(getByText('earnFlow.poolFilters.myPools'))
+    // My Pools
     expect(
       getByTestId('PoolCard/arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216')
     ).toBeTruthy()
+    expect(
+      queryByTestId('PoolCard/ethereum-sepolia:0xe50fa9b3c56ffb159cb0fca61f5c9d750e8128c8')
+    ).toBeFalsy()
   })
 
   it('correctly shows correct networks, tokens under filters', () => {
@@ -194,7 +202,7 @@ describe('EarnHome', () => {
         <MockedNavigator
           component={EarnHome}
           params={{
-            activeEarnTab: EarnTabType.OpenPools,
+            activeEarnTab: EarnTabType.AllPools,
           }}
         />
       </Provider>
@@ -213,7 +221,7 @@ describe('EarnHome', () => {
         <MockedNavigator
           component={EarnHome}
           params={{
-            activeEarnTab: EarnTabType.OpenPools,
+            activeEarnTab: EarnTabType.AllPools,
           }}
         />
       </Provider>
@@ -243,7 +251,7 @@ describe('EarnHome', () => {
         <MockedNavigator
           component={EarnHome}
           params={{
-            activeEarnTab: EarnTabType.OpenPools,
+            activeEarnTab: EarnTabType.AllPools,
           }}
         />
       </Provider>

diff --git a/src/earn/EarnHome.tsx b/src/earn/EarnHome.tsx
@@ -76,7 +76,7 @@ export default function EarnHome({ navigation, route }: Props) {
   const filterChipsCarouselRef = useRef<ScrollView>(null)
   const pools = useSelector(earnPositionsSelector)
 
-  const activeTab = route.params?.activeEarnTab ?? EarnTabType.OpenPools
+  const activeTab = route.params?.activeEarnTab ?? EarnTabType.AllPools
 
   const insets = useSafeAreaInsets()
 
@@ -235,11 +235,11 @@ export default function EarnHome({ navigation, route }: Props) {
   }
 
   const displayPools = useMemo(() => {
-    return pools.filter((pool) => {
-      const depositTokenInfo = allTokens[pool.dataProps.depositTokenId]
-      const isMyPool = new BigNumber(pool.balance).gt(0) && !!depositTokenInfo
-      return activeTab === EarnTabType.MyPools ? isMyPool : !isMyPool
-    })
+    return activeTab === EarnTabType.AllPools
+      ? pools
+      : pools.filter(
+          (pool) => new BigNumber(pool.balance).gt(0) && !!allTokens[pool.dataProps.depositTokenId]
+        )
   }, [pools, allTokens, activeTab])
 
   const onPressLearnMore = () => {

diff --git a/src/earn/EarnInfoScreen.tsx b/src/earn/EarnInfoScreen.tsx
@@ -104,7 +104,7 @@ export default function EarnInfoScreen() {
           onPress={() => {
             AppAnalytics.track(EarnEvents.earn_info_earn_press)
             showMultiplePools
-              ? navigate(Screens.EarnHome, { activeEarnTab: EarnTabType.OpenPools })
+              ? navigate(Screens.EarnHome, { activeEarnTab: EarnTabType.AllPools })
               : navigate(Screens.EarnEnterAmount, { tokenId: networkConfig.arbUsdcTokenId })
           }}
           text={t('earnFlow.earnInfo.action.earn')}

diff --git a/src/earn/EarnTabBar.test.tsx b/src/earn/EarnTabBar.test.tsx
@@ -13,22 +13,22 @@ describe('EarnTabBar', () => {
 
   it('renders all tab bar items', () => {
     const { getAllByTestId } = render(
-      <EarnTabBar activeTab={EarnTabType.OpenPools} onChange={onChange} />
+      <EarnTabBar activeTab={EarnTabType.AllPools} onChange={onChange} />
     )
 
     const tabItems = getAllByTestId('Earn/TabBarItem')
     expect(tabItems).toHaveLength(2)
-    expect(tabItems[0]).toHaveTextContent('openPools')
+    expect(tabItems[0]).toHaveTextContent('earnFlow.poolFilters.allPools')
     expect(tabItems[0].children[0]).toHaveStyle({ color: Colors.black })
-    expect(tabItems[1]).toHaveTextContent('myPools')
+    expect(tabItems[1]).toHaveTextContent('earnFlow.poolFilters.myPools')
     expect(tabItems[1].children[0]).toHaveStyle({ color: Colors.gray4 })
   })
 
-  it.each([{ tab: EarnTabType.OpenPools }, { tab: EarnTabType.MyPools }])(
+  it.each([{ tab: EarnTabType.AllPools }, { tab: EarnTabType.MyPools }])(
     'selecting tab $tab invokes on change',
     ({ tab }) => {
       const { getAllByTestId } = render(
-        <EarnTabBar activeTab={EarnTabType.OpenPools} onChange={onChange} />
+        <EarnTabBar activeTab={EarnTabType.AllPools} onChange={onChange} />
       )
 
       fireEvent.press(getAllByTestId('Earn/TabBarItem')[tab])

diff --git a/src/earn/EarnTabBar.tsx b/src/earn/EarnTabBar.tsx
@@ -17,7 +17,7 @@ export default function EarnTabBar({
 }) {
   const { t } = useTranslation()
 
-  const items = [t('earnFlow.poolFilters.openPools'), t('earnFlow.poolFilters.myPools')]
+  const items = [t('earnFlow.poolFilters.allPools'), t('earnFlow.poolFilters.myPools')]
 
   const handleSelectOption = (index: EarnTabType) => () => {
     onChange(index)

diff --git a/src/earn/types.ts b/src/earn/types.ts
@@ -33,7 +33,7 @@ export interface WithdrawInfo {
 }
 
 export enum EarnTabType {
-  OpenPools = 0,
+  AllPools = 0,
   MyPools = 1,
 }