feat(dapps): Redesign discover tab and dapps screen (#5569)

### Description
 
For
[RET-1089](https://linear.app/valora/issue/RET-1089/[wallet]-implement-explore-dapps-section-on-discover-page).
Redesigns the Discover tab and moves the primary dapp section back to
its own screen.

### Test plan

Manual and unit tested. See video below.



https://github.com/valora-inc/wallet/assets/569401/7a7ef68c-d177-4c36-837f-ba901fd6e346


### Related issues

- Fixes
[RET-1089](https://linear.app/valora/issue/RET-1089/[wallet]-implement-explore-dapps-section-on-discover-page).

### Backwards compatibility

Yes.

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [x] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

e2e/src/Discover.spec.js

@@ -1,4 +1,4 @@
-import { quickOnboarding, waitForElementByIdAndTap } from './utils/utils'
+import { quickOnboarding, waitForElementByIdAndTap, scrollIntoView } from './utils/utils'
 import { launchApp } from './utils/retries'
 import DappListDisplay from './usecases/DappListDisplay'
 
@@ -12,6 +12,11 @@ describe('Discover tab', () => {
       permissions: { notifications: 'YES', contacts: 'YES', camera: 'YES' },
     })
     await waitForElementByIdAndTap('Tab/Discover')
+
+    await scrollIntoView('Explore All', 'DappsExplorerScrollView')
+    await element(by.text('Explore All')).tap()
+
+    await waitFor(element(by.id(`DappsScreen/DappsList`)))
   })
 
   describe('Dapp List Display', DappListDisplay)

e2e/src/usecases/DappListDisplay.js

@@ -17,8 +17,9 @@ export default DappListDisplay = () => {
   })
 
   it('should open internal webview with correct dapp when dapp opened', async () => {
-    await scrollIntoView(dappToTest.dapp.name, 'DAppsExplorerScreen/DappsList')
+    await scrollIntoView(dappToTest.dapp.name, 'DappsScreen/DappsList')
     await element(by.text(dappToTest.dapp.name)).tap()
+
     await waitFor(element(by.id(`WebViewScreen/${dappToTest.dapp.name}`)))
       .toBeVisible()
       .withTimeout(10 * 1000)
@@ -32,7 +33,7 @@ export default DappListDisplay = () => {
 
   it(':ios: should correctly filter dapp list based on user agent', async () => {
     const iOSDappList = await fetchDappList('Valora/1.0.0 (iOS 15.0; iPhone)')
-    const dappCards = await getElementTextList('DAppsExplorerScreen/AllSection/DappCard')
+    const dappCards = await getElementTextList('DappsScreen/AllSection/DappCard')
     jestExpect(dappCards.length).toEqual(iOSDappList.applications.length)
   })
 }

locales/base/translation.json

@@ -1440,11 +1440,14 @@
   "dappsScreen": {
     "title": "Dapps",
     "titleDiscover": "Discover",
+    "exploreDapps": "Explore Dapps",
+    "exploreAll": "Explore All",
     "message": "Explore ways to use your assets",
     "errorMessage": "There was an error loading dapps",
     "featuredDapp": "Featured",
     "allDapps": "All",
     "favoriteDapps": "My Favorites",
+    "mostPopularDapps": "Most Popular",
     "favoriteDappsAndAll": "My Favorites & All",
     "searchPlaceHolder": "Search dapps",
     "noFavorites": {

src/analytics/Events.tsx

@@ -543,6 +543,7 @@ export enum DappExplorerEvents {
   dapp_unfavorite = 'dapp_unfavorite',
   dapp_filter = 'dapp_filter',
   dapp_rankings_open = 'dapp_rankings_open',
+  dapp_explore_all = 'dapp_explore_all',
 }
 
 export enum WebViewEvents {

src/analytics/Properties.tsx

@@ -5,6 +5,7 @@ import {
   KycStatus as FiatConnectKycStatus,
 } from '@fiatconnect/fiatconnect-types'
 import { ShareAction } from 'react-native'
+import { Screens } from 'src/navigator/Screens'
 import { PermissionStatus } from 'react-native-permissions'
 import {
   AppEvents,
@@ -1129,6 +1130,7 @@ interface DappExplorerEventsProperties {
     activeFilter?: string
     activeSearchTerm?: string
     position?: number
+    fromScreen?: Screens
   }
   [DappExplorerEvents.dapp_close]: DappEventProperties
   [DappExplorerEvents.dapp_screen_open]: undefined
@@ -1140,6 +1142,7 @@ interface DappExplorerEventsProperties {
     remove: boolean
   }
   [DappExplorerEvents.dapp_rankings_open]: undefined
+  [DappExplorerEvents.dapp_explore_all]: undefined
 }
 
 interface WebViewEventsProperties {

src/analytics/docs.ts

@@ -535,6 +535,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [DappExplorerEvents.dapp_unfavorite]: `when user unfavorites a dapp`,
   [DappExplorerEvents.dapp_filter]: `when a user taps on a filter`,
   [DappExplorerEvents.dapp_rankings_open]: `when a user taps on the dapp rankings card`,
+  [DappExplorerEvents.dapp_explore_all]: `when a user taps on the explore all button`,
   [WebViewEvents.webview_more_options]: `when user taps "triple dot icon" from the webview`,
   [WebViewEvents.webview_open_in_browser]: `when user taps "Open in External Browser" from the webview options`,
   [CoinbasePayEvents.coinbase_pay_flow_start]: `When user is navigated to Coinbase Pay experience`,