Fix refresh control and transfer assets

package.json

@@ -66,6 +66,7 @@
     "@ledgerhq/react-native-hw-transport-ble": "6.29.5",
     "@ledgerhq/types-devices": "^6.22.4",
     "@maplibre/maplibre-react-native": "^9.1.0",
+    "@metaplex-foundation/js": "^0.19.5",
     "@metaplex-foundation/mpl-bubblegum": "0.6.0",
     "@metaplex-foundation/mpl-token-metadata": "2.10.0",
     "@novalabsxyz/mobile-theme": "2.0.0-y.25",

src/components/BackScreen.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { useNavigation } from '@react-navigation/native'
 import { BoxProps } from '@shopify/restyle'
-import React, { memo, useMemo } from 'react'
+import React, { memo, useCallback, useMemo } from 'react'
 import { LayoutChangeEvent, Platform } from 'react-native'
 import { Edge } from 'react-native-safe-area-context'
 import { SvgProps } from 'react-native-svg'
@@ -32,6 +32,7 @@ type Props = BoxProps<Theme> & {
   onTrailingIconPress?: () => void
   headerTopMargin?: Spacing
   rootBackgroundColor?: Color
+  onBack?: () => void
 }
 
 const BackScreen = ({
@@ -51,13 +52,22 @@ const BackScreen = ({
   onTrailingIconPress,
   headerTopMargin,
   rootBackgroundColor,
+  onBack,
   ...rest
 }: Props) => {
   const navigation = useNavigation()
   const hitSlop = useHitSlop('6')
   const colors = useColors()
   const isAndroid = useMemo(() => Platform.OS === 'android', [])
 
+  const onBackHandler = useCallback(() => {
+    if (onBack) {
+      onBack()
+    } else {
+      navigation.goBack()
+    }
+  }, [navigation, onBack])
+
   return (
     <Box flex={1} backgroundColor={rootBackgroundColor}>
       <SafeAreaBox edges={edges || undefined} onLayout={onLayout} flex={1}>
@@ -85,7 +95,7 @@ const BackScreen = ({
             <BackButton
               marginHorizontal="-3"
               paddingHorizontal="0"
-              onPress={navigation.goBack}
+              onPress={onBackHandler}
             />
           )}
           <Box flex={1} />

src/components/ConfirmPinScreen.tsx

@@ -3,24 +3,24 @@ import { useTranslation } from 'react-i18next'
 import { RouteProp, useRoute, useNavigation } from '@react-navigation/native'
 import { useAsync } from 'react-async-hook'
 import * as LocalAuthentication from 'expo-local-authentication'
-import { WalletServiceNavigationProp } from '@services/WalletService'
 import { WalletStackParamList } from '@services/WalletService/pages/WalletPage/WalletPageNavigator'
+import { SendNavigationProp } from '@services/WalletService/pages/SendPage/SentPageNavigator'
 import ConfirmPinView from './ConfirmPinView'
 import { useAppStorage } from '../storage/AppStorageProvider'
 
 type Route = RouteProp<WalletStackParamList, 'ConfirmPin'>
 
 const ConfirmPinScreen = () => {
   const route = useRoute<Route>()
-  const navigation = useNavigation<WalletServiceNavigationProp>()
+  const navigation = useNavigation<SendNavigationProp>()
   const { params } = route
   const { t } = useTranslation()
   const { pin } = useAppStorage()
 
   const pinSuccess = useCallback(async () => {
     switch (params.action) {
       case 'payment':
-        navigation.navigate('Send', {})
+        navigation.navigate('PaymentScreen')
         break
     }
   }, [navigation, params.action])

src/features/account/AccountManageTokenListScreen.tsx

@@ -168,18 +168,19 @@ const AccountManageTokenListScreen: React.FC = () => {
   }, [])
 
   return (
-    <ScrollBox>
+    <ScrollBox
+      refreshControl={
+        <RefreshControl
+          enabled
+          refreshing={refetchingTokens}
+          onRefresh={refetchTokens}
+          title=""
+          tintColor={colors.primaryText}
+        />
+      }
+    >
       <BackScreen edges={[]} headerTopMargin="6xl">
         <FlatList
-          refreshControl={
-            <RefreshControl
-              enabled
-              refreshing={refetchingTokens}
-              onRefresh={refetchTokens}
-              title=""
-              tintColor={colors.primaryText}
-            />
-          }
           data={mints}
           renderItem={renderItem}
           keyExtractor={keyExtractor}

src/features/activity/ActivityScreen.tsx

@@ -161,7 +161,18 @@ const ActivityScreen = () => {
   const keyExtractor = useCallback((item, index) => item.signature + index, [])
 
   return (
-    <ScrollBox backgroundColor="primaryBackground">
+    <ScrollBox
+      backgroundColor="primaryBackground"
+      refreshControl={
+        <RefreshControl
+          enabled
+          refreshing={loading}
+          onRefresh={refresh}
+          title=""
+          tintColor={colors.primaryText}
+        />
+      }
+    >
       <SectionList
         style={{
           backgroundColor: colors.primaryBackground,
@@ -172,15 +183,6 @@ const ActivityScreen = () => {
         renderItem={renderItem}
         renderSectionHeader={renderSectionHeader}
         ListHeaderComponent={renderHeader}
-        refreshControl={
-          <RefreshControl
-            enabled
-            refreshing={loading}
-            onRefresh={refresh}
-            title=""
-            tintColor={colors.primaryText}
-          />
-        }
         stickySectionHeadersEnabled={false}
         onEndReachedThreshold={0.05}
         // onEndReached={fetchMore}

src/features/collectables/HotspotList.tsx

@@ -244,7 +244,17 @@ const HotspotList = () => {
 
   return (
     <>
-      <ScrollBox>
+      <ScrollBox
+        refreshControl={
+          <RefreshControl
+            enabled
+            refreshing={loadingHotspots}
+            onRefresh={handleRefresh}
+            title=""
+            tintColor={primaryText}
+          />
+        }
+      >
         <FlatList
           data={hotspotsWithMeta}
           numColumns={2}
@@ -255,15 +265,6 @@ const HotspotList = () => {
             flexDirection: 'column',
           }}
           ListHeaderComponent={renderHeader}
-          refreshControl={
-            <RefreshControl
-              enabled
-              refreshing={loadingHotspots}
-              onRefresh={handleRefresh}
-              title=""
-              tintColor={primaryText}
-            />
-          }
           renderItem={renderCollectable}
           ListEmptyComponent={renderEmptyComponent}
           onEndReachedThreshold={0.001}

src/features/collectables/ManageCollectables.tsx

@@ -10,9 +10,11 @@ import { useAsync } from 'react-async-hook'
 import { FlatList, RefreshControl } from 'react-native'
 import { useSelector } from 'react-redux'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTranslation } from 'react-i18next'
 import CollectionItem, { Collection } from './CollectionItem'
 
 const ManageCollectables = () => {
+  const { t } = useTranslation()
   const { bottom } = useSafeAreaInsets()
   const colors = useColors()
   const { fetchAllCollectablesByGroup } = useCollectables()
@@ -95,22 +97,23 @@ const ManageCollectables = () => {
   }, [])
 
   return (
-    <ScrollBox>
+    <ScrollBox
+      refreshControl={
+        <RefreshControl
+          enabled
+          refreshing={loading}
+          onRefresh={execute}
+          title=""
+          tintColor={colors.primaryText}
+        />
+      }
+    >
       <BackScreen
-        title="Manage collectable list"
+        title={t('manageCollectables.title')}
         edges={[]}
         headerTopMargin="6xl"
       >
         <FlatList
-          refreshControl={
-            <RefreshControl
-              enabled
-              refreshing={loading}
-              onRefresh={execute}
-              title=""
-              tintColor={colors.primaryText}
-            />
-          }
           data={collectables}
           renderItem={renderItem}
           keyExtractor={keyExtractor}

src/features/collectables/NftList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { times } from 'lodash'
 import { FlatList } from 'react-native-gesture-handler'
 import { RefreshControl } from 'react-native'
@@ -13,12 +13,17 @@ import Config from '@assets/images/config.svg'
 import Text from '@components/Text'
 import { WalletNavigationProp } from '@services/WalletService/pages/WalletPage/WalletPageNavigator'
 import ScrollBox from '@components/ScrollBox'
+import { useSelector } from 'react-redux'
+import { RootState } from '@store/rootReducer'
 import NFTListItem, { NFTSkeleton } from './NftListItem'
 
 const NftList = () => {
   const spacing = useSpacing()
   const { bottom } = useSafeAreaInsets()
   const navigation = useNavigation<WalletNavigationProp>()
+  const approvedCollections = useSelector(
+    (state: RootState) => state.collectables.approvedCollections,
+  )
 
   const {
     collectables,
@@ -27,6 +32,12 @@ const NftList = () => {
   } = useCollectables()
   const { primaryText } = useColors()
 
+  useEffect(() => {
+    if (approvedCollections.length > 0) {
+      refresh()
+    }
+  }, [refresh, approvedCollections])
+
   const flatListItems = useMemo(() => {
     // always return an even number of items, if odd add an empty string
     if (Object.keys(collectables || []).length % 2 === 0) {
@@ -107,19 +118,20 @@ const NftList = () => {
   )
 
   return (
-    <ScrollBox>
+    <ScrollBox
+      refreshControl={
+        <RefreshControl
+          refreshing={loadingCollectables}
+          onRefresh={refresh}
+          title=""
+          tintColor={primaryText}
+        />
+      }
+    >
       <FlatList
         enabled
         data={flatListItems}
         numColumns={2}
-        refreshControl={
-          <RefreshControl
-            refreshing={loadingCollectables}
-            onRefresh={refresh}
-            title=""
-            tintColor={primaryText}
-          />
-        }
         columnWrapperStyle={{
           flexDirection: 'row',
           gap: spacing[4],

src/features/collectables/TransferCollectableScreen.tsx

@@ -1,5 +1,4 @@
 import ArrowRight from '@assets/images/arrowRight.svg'
-import Menu from '@assets/images/menu.svg'
 import AddressBookSelector, {
   AddressBookRef,
 } from '@components/AddressBookSelector'
@@ -27,15 +26,15 @@ import 'text-encoding-polyfill'
 import ScrollBox from '@components/ScrollBox'
 import { Asset } from '@helium/spl-utils'
 import { NavBarHeight } from '@components/ServiceNavBar'
+import TouchableOpacityBox from '@components/TouchableOpacityBox'
+import AddressIcon from '@assets/images/addressIcon.svg'
+import { WalletNavigationProp } from '@services/WalletService/pages/WalletPage/WalletPageNavigator'
 import useSubmitTxn from '../../hooks/useSubmitTxn'
 import { CSAccount } from '../../storage/cloudStorage'
 import { solAddressIsValid } from '../../utils/accountUtils'
 import { ww } from '../../utils/layout'
 import * as Logger from '../../utils/logger'
-import {
-  CollectableNavigationProp,
-  CollectableStackParamList,
-} from './collectablesTypes'
+import { CollectableStackParamList } from './collectablesTypes'
 
 LogBox.ignoreLogs([
   'Non-serializable values were found in the navigation state',
@@ -45,7 +44,7 @@ type Route = RouteProp<CollectableStackParamList, 'TransferCollectableScreen'>
 
 const TransferCollectableScreen = () => {
   const route = useRoute<Route>()
-  const navigation = useNavigation<CollectableNavigationProp>()
+  const navigation = useNavigation<WalletNavigationProp>()
   const COLLECTABLE_HEIGHT = ww
   const { bottom } = useSafeAreaInsets()
   const { t } = useTranslation()
@@ -185,18 +184,19 @@ const TransferCollectableScreen = () => {
                   backgroundColor="cardBackground"
                   borderRadius="xl"
                   marginBottom="2"
+                  flexDirection="row"
+                  alignItems="center"
+                  padding="4"
+                  paddingHorizontal="1"
                 >
                   <TextInput
                     floatingLabel={`${t(
                       'collectablesScreen.transferTo',
                     )} ${recipientName}`}
-                    variant="thickBlur"
-                    height={80}
-                    width="100%"
+                    variant="transparentSmall"
                     textColor="primaryText"
                     fontSize={15}
-                    TrailingIcon={Menu}
-                    onTrailingIconPress={handleAddressBookSelected}
+                    flex={1}
                     textInputProps={{
                       placeholder: t('generic.solanaAddress'),
                       placeholderTextColor: colors.secondaryText,
@@ -207,6 +207,12 @@ const TransferCollectableScreen = () => {
                       value: recipient,
                     }}
                   />
+                  <TouchableOpacityBox
+                    marginEnd="6"
+                    onPress={handleAddressBookSelected}
+                  >
+                    <AddressIcon />
+                  </TouchableOpacityBox>
                 </Box>
                 <Text
                   opacity={hasError || networkError ? 100 : 0}