diff --git a/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/assets.ts b/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/assets.ts new file mode 100644 index 0000000..7f37895 --- /dev/null +++ b/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; diff --git a/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/index.tsx b/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/index.tsx index fdbb483..ab587f2 100644 --- a/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/index.tsx +++ b/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/index.tsx @@ -3,24 +3,20 @@ 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 ASSETS from './assets'; +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 ( @@ -28,10 +24,10 @@ export default function DefaultPaymentTokenScreen() { Default payment token - + dispatch(setSearchText(text))} /> - {ASSETS.map(asset => ( + {filteredAssets.map(asset => ( } diff --git a/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/useFilteredAssets.ts b/react-native-expo/components/ProfileScreen/DefaultPaymentTokenScreen/useFilteredAssets.ts new file mode 100644 index 0000000..1ce0ca7 --- /dev/null +++ b/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; +} diff --git a/react-native-expo/store/defaultPaymentTokenScreen.ts b/react-native-expo/store/defaultPaymentTokenScreen.ts new file mode 100644 index 0000000..2adc73a --- /dev/null +++ b/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) => { + state.searchText = action.payload; + }, + }, +}); + +export const { setSearchText } = defaultPaymentTokenScreenSlice.actions; + +export default defaultPaymentTokenScreenSlice.reducer; diff --git a/react-native-expo/store/rootReducer.ts b/react-native-expo/store/rootReducer.ts index 29eb91d..7f24b0a 100644 --- a/react-native-expo/store/rootReducer.ts +++ b/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,