Add token search functionality

Author: jessepinho

react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/assets.ts

@@ -0,0 +1,11 @@
+import Asset from '@/types/Asset';
+
+const ASSETS: Asset[] = [
+  { name: 'USD Coin', symbol: 'USDC' },
+  { name: 'Penumbra', symbol: 'UM' },
+  { name: 'Cosmo', symbol: 'ATOM' },
+  { name: 'Ethereum', symbol: 'ETH' },
+  { name: 'Osmosis', symbol: 'OSMO' },
+];
+
+export default ASSETS;

react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/index.tsx

@@ -3,35 +3,30 @@ import List from '@/components/List';
 import ListItem from '@/components/ListItem';
 import ListItemIconSuffix from '@/components/ListItemIconSuffix';
 import TextInput from '@/components/TextInput';
+import { setSearchText } from '@/store/defaultPaymentTokenScreen';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setDefaultPaymentToken } from '@/store/secureStore';
-import Asset from '@/types/Asset';
 import { Trans } from '@lingui/react/macro';
 import { Sx, Text, View } from 'dripsy';
 import { Check } from 'lucide-react-native';
-
-const ASSETS: Asset[] = [
-  { name: 'USD Coin', symbol: 'USDC' },
-  { name: 'Penumbra', symbol: 'UM' },
-  { name: 'Cosmo', symbol: 'ATOM' },
-  { name: 'Ethereum', symbol: 'ETH' },
-  { name: 'Osmosis', symbol: 'OSMO' },
-];
+import useFilteredAssets from './useFilteredAssets';
 
 export default function DefaultPaymentTokenScreen() {
   const defaultPaymentToken = useAppSelector(state => state.secureStore.defaultPaymentToken);
   const dispatch = useAppDispatch();
+  const searchText = useAppSelector(state => state.defaultPaymentTokenScreen.searchText);
+  const filteredAssets = useFilteredAssets();
 
   return (
     <View sx={sx.root}>
       <Text variant='h4'>
         <Trans>Default payment token</Trans>
       </Text>
 
-      <TextInput />
+      <TextInput value={searchText} onChangeText={text => dispatch(setSearchText(text))} />
 
       <List>
-        {ASSETS.map(asset => (
+        {filteredAssets.map(asset => (
           <ListItem
             key={asset.symbol}
             avatar={<AssetIcon />}

react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/useFilteredAssets.ts

@@ -0,0 +1,22 @@
+import { useAppSelector } from '@/store/hooks';
+import ASSETS from './assets';
+import { useMemo } from 'react';
+
+export default function useFilteredAssets() {
+  const searchText = useAppSelector(state => state.defaultPaymentTokenScreen.searchText);
+
+  const filteredTokens = useMemo(
+    () =>
+      ASSETS.filter(asset => {
+        const searchTextLowerCase = searchText.toLocaleLowerCase();
+
+        if (asset.name.toLocaleLowerCase().includes(searchTextLowerCase)) return true;
+        if (asset.symbol.toLocaleLowerCase().includes(searchTextLowerCase)) return true;
+
+        return false;
+      }),
+    [searchText],
+  );
+
+  return filteredTokens;
+}

react-native-expo/store/defaultPaymentTokenScreen.ts

@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+/** State specific to `DefaultPaymentTokenScreen`. */
+export interface DefaultPaymentTokenScreenState {
+  searchText: string;
+}
+
+const initialState: DefaultPaymentTokenScreenState = {
+  searchText: '',
+};
+
+export const defaultPaymentTokenScreenSlice = createSlice({
+  name: 'portfolioScreen',
+  initialState,
+  reducers: {
+    setSearchText: (state, action: PayloadAction<string>) => {
+      state.searchText = action.payload;
+    },
+  },
+});
+
+export const { setSearchText } = defaultPaymentTokenScreenSlice.actions;
+
+export default defaultPaymentTokenScreenSlice.reducer;

react-native-expo/store/rootReducer.ts

@@ -1,6 +1,7 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
 import balances from './balances';
+import defaultPaymentTokenScreen from './defaultPaymentTokenScreen';
 import depositFlow from './depositFlow';
 import portfolioScreen from './portfolioScreen';
 import secureStore from './secureStore';
@@ -14,6 +15,7 @@ import transactions from './transactions';
  */
 const rootReducer = combineReducers({
   balances,
+  defaultPaymentTokenScreen,
   depositFlow,
   portfolioScreen,
   secureStore,