Switch to using Metadata

Author: jessepinho

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

@@ -7,7 +7,7 @@ import { setSearchText } from '@/store/defaultPaymentTokenScreen';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setDefaultPaymentToken } from '@/store/secureStore';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { Sx, Text, View } from 'dripsy';
+import { ScrollView, Sx, Text } from 'dripsy';
 import { Check, Search } from 'lucide-react-native';
 import useFilteredAssets from './useFilteredAssets';
 import TextInputIconStartAdornment from '@/components/TextInputIconStartAdornment';
@@ -20,7 +20,7 @@ export default function DefaultPaymentTokenScreen() {
   const { t } = useLingui();
 
   return (
-    <View sx={sx.root}>
+    <ScrollView contentContainerSx={sx.root}>
       <Text variant='h4'>
         <Trans>Default payment token</Trans>
       </Text>
@@ -49,7 +49,7 @@ export default function DefaultPaymentTokenScreen() {
           />
         ))}
       </List>
-    </View>
+    </ScrollView>
   );
 }
 

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

@@ -1,7 +1,14 @@
 import { useAppSelector } from '@/store/hooks';
-import ASSETS from './assets';
+import { PENUMBRA_CHAIN_ID } from '@/utils/constants';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { useMemo } from 'react';
 
+/**
+ * @todo: Use remote client? (To avoid having to update the app just to get the
+ * latest metadatas.)
+ */
+const ALL_METADATAS = new ChainRegistryClient().bundled.get(PENUMBRA_CHAIN_ID).getAllAssets();
+
 /**
  * Returns asset types filtered by the search text from state.
  *
@@ -14,11 +21,11 @@ export default function useFilteredAssets() {
 
   const filteredAssets = useMemo(
     () =>
-      ASSETS.filter(asset => {
+      ALL_METADATAS.filter(metadata => {
         const searchTextLowerCase = searchText.toLocaleLowerCase();
 
-        if (asset.name.toLocaleLowerCase().includes(searchTextLowerCase)) return true;
-        if (asset.symbol.toLocaleLowerCase().includes(searchTextLowerCase)) return true;
+        if (metadata.name.toLocaleLowerCase().includes(searchTextLowerCase)) return true;
+        if (metadata.symbol.toLocaleLowerCase().includes(searchTextLowerCase)) return true;
 
         return false;
       }),

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

@@ -0,0 +1 @@
+export const PENUMBRA_CHAIN_ID = 'penumbra-1';