feat(swaps): add dropdown network filter

locales/base/translation.json

@@ -1926,7 +1926,7 @@
       "myTokens": "My tokens",
       "popular": "Popular",
       "recentlySwapped": "Recently swapped",
-      "network": "{{networkName}} Network"
+      "network": "Network"
     }
   },
   "homeActions": {

src/analytics/Events.tsx

@@ -591,6 +591,7 @@ export enum TokenBottomSheetEvents {
   search_token = 'search_token',
   token_selected = 'token_selected',
   toggle_tokens_filter = 'toggle_tokens_filter',
+  network_filter_updated = 'network_filter_updated',
 }
 
 export enum AssetsEvents {

src/analytics/Properties.tsx

@@ -32,6 +32,7 @@ import {
   OnboardingEvents,
   PerformanceEvents,
   PhoneVerificationEvents,
+  PointsEvents,
   QrScreenEvents,
   RewardsEvents,
   SendEvents,
@@ -42,7 +43,6 @@ import {
   TransactionEvents,
   WalletConnectEvents,
   WebViewEvents,
-  PointsEvents,
 } from 'src/analytics/Events'
 import {
   BackQuizProgress,
@@ -67,13 +67,13 @@ import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { NftOrigin } from 'src/nfts/types'
 import { NotificationReceiveState } from 'src/notifications/types'
 import { AdventureCardName } from 'src/onboarding/types'
+import { PointsActivity } from 'src/points/types'
 import { RecipientType } from 'src/recipients/recipient'
 import { QrCode } from 'src/send/types'
 import { Field } from 'src/swap/types'
 import { TokenDetailsActionName } from 'src/tokens/types'
 import { NetworkId, TokenTransactionTypeV2, TransactionStatus } from 'src/transactions/types'
 import { Currency } from 'src/utils/currencies'
-import { PointsActivity } from 'src/points/types'
 
 type Web3LibraryProps = { web3Library: 'contract-kit' | 'viem' }
 
@@ -1361,6 +1361,9 @@ interface TokenBottomSheetEventsProperties {
     isRemoving: boolean
     isPreSelected: boolean
   }
+  [TokenBottomSheetEvents.network_filter_updated]: {
+    selectedNetworkIds: NetworkId[]
+  }
   [TokenBottomSheetEvents.token_selected]: {
     origin: TokenPickerOrigin
     tokenId: string

src/analytics/docs.ts

@@ -5,9 +5,9 @@ import {
   AssetsEvents,
   AuthenticationEvents,
   BuilderHooksEvents,
+  CICOEvents,
   CeloExchangeEvents,
   CeloNewsEvents,
-  CICOEvents,
   CoinbasePayEvents,
   ContractKitEvents,
   DappExplorerEvents,
@@ -26,6 +26,7 @@ import {
   OnboardingEvents,
   PerformanceEvents,
   PhoneVerificationEvents,
+  PointsEvents,
   QrScreenEvents,
   RewardsEvents,
   SendEvents,
@@ -36,7 +37,6 @@ import {
   TransactionEvents,
   WalletConnectEvents,
   WebViewEvents,
-  PointsEvents,
 } from 'src/analytics/Events'
 
 /**
@@ -542,6 +542,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [TokenBottomSheetEvents.search_token]: `When a user searches a token using the token bottom sheet search box`,
   [TokenBottomSheetEvents.token_selected]: `A token was selected in TokenBottomSheet.`,
   [TokenBottomSheetEvents.toggle_tokens_filter]: `A filter was selected in the TokenBottomSheet.`,
+  [TokenBottomSheetEvents.network_filter_updated]: `The network filter was updated and the multiselect UI closed in the TokenBottomSheet.`,
   [AssetsEvents.show_asset_balance_info]: `When a user taps on the info icon`,
   [AssetsEvents.view_wallet_assets]: `When a user taps on the "Wallet Assets" segmented control or "Assets" tab`,
   [AssetsEvents.view_collectibles]: `When a user taps on the "Collectibles" tab`,

src/components/FilterChipsCarousel.tsx

@@ -2,16 +2,32 @@ import React from 'react'
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import Touchable from 'src/components/Touchable'
+import DownArrowIcon from 'src/icons/DownArrowIcon'
 import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
+import { NetworkId } from 'src/transactions/types'
 
-export interface FilterChip<T> {
+interface BaseFilterChip {
   id: string
   name: string
-  filterFn: (t: T) => boolean
   isSelected: boolean
 }
+export interface BooleanFilterChip<T> extends BaseFilterChip {
+  filterFn: (t: T) => boolean
+}
+
+export interface NetworkFilterChip<T> extends BaseFilterChip {
+  filterFn: (t: T, n: NetworkId[]) => boolean
+  allNetworkIds: NetworkId[]
+  selectedNetworkIds: NetworkId[]
+}
+
+export function isNetworkChip<T>(chip: FilterChip<T>): chip is NetworkFilterChip<T> {
+  return 'allNetworkIds' in chip
+}
+
+export type FilterChip<T> = BooleanFilterChip<T> | NetworkFilterChip<T>
 
 interface Props<T> {
   chips: FilterChip<T>[]
@@ -58,14 +74,24 @@ function FilterChipsCarousel<T>({
               }}
               style={styles.filterChip}
             >
-              <Text
-                style={[
-                  styles.filterChipText,
-                  chip.isSelected ? { color: secondaryColor } : { color: primaryColor },
-                ]}
-              >
-                {chip.name}
-              </Text>
+              <View style={styles.filterChipTextWrapper}>
+                <Text
+                  style={[
+                    styles.filterChipText,
+                    chip.isSelected ? { color: secondaryColor } : { color: primaryColor },
+                  ]}
+                >
+                  {chip.name}
+                </Text>
+                {isNetworkChip(chip) && (
+                  <DownArrowIcon
+                    color={chip.isSelected ? secondaryColor : primaryColor}
+                    strokeWidth={2}
+                    height={Spacing.Regular16}
+                    style={{ marginBottom: 2, marginLeft: 4 }}
+                  />
+                )}
+              </View>
             </Touchable>
           </View>
         )
@@ -97,6 +123,11 @@ const styles = StyleSheet.create({
   filterChipText: {
     ...typeScale.labelXSmall,
   },
+  filterChipTextWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 })
 
 export default FilterChipsCarousel