Feature complete

src/components/ProgressBar.tsx

@@ -1,13 +1,12 @@
 import { BoxProps } from '@shopify/restyle'
+import { Theme } from '@theme/theme'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { LayoutRectangle, LayoutChangeEvent } from 'react-native'
+import { LayoutChangeEvent, LayoutRectangle } from 'react-native'
 import {
-  Easing,
   useAnimatedStyle,
   useSharedValue,
-  withTiming,
+  withSpring,
 } from 'react-native-reanimated'
-import { Theme } from '@theme/theme'
 import { ReAnimatedBox } from './AnimatedBox'
 import Box from './Box'
 
@@ -16,7 +15,6 @@ const ProgressBar = ({
   ...rest
 }: BoxProps<Theme> & { progress: number }) => {
   const HEIGHT = 15
-  const DURATION = 1200
 
   const [progressRect, setProgressRect] = useState<LayoutRectangle>()
 
@@ -31,20 +29,16 @@ const ProgressBar = ({
     [progressRect],
   )
 
-  const translateX = useSharedValue(-PROGRESS_WIDTH * 1.25)
+  const width = useSharedValue(0)
 
   useEffect(() => {
     // withRepeat to repeat the animation
-    translateX.value = withTiming((progressIn / 100) * PROGRESS_WIDTH, {
-      // Set the bezier curve function as the timing animation easing
-      easing: Easing.inOut(Easing.ease),
-      duration: DURATION,
-    })
-  }, [PROGRESS_WIDTH, translateX, progressIn])
+    width.value = withSpring((progressIn / 100) * PROGRESS_WIDTH)
+  }, [PROGRESS_WIDTH, width, progressIn])
 
   const progress = useAnimatedStyle(() => {
     return {
-      transform: [{ translateX: translateX.value - PROGRESS_WIDTH * 0.5 }],
+      width: width.value,
     }
   })
 
@@ -57,10 +51,11 @@ const ProgressBar = ({
       height={HEIGHT}
       backgroundColor="transparent10"
       overflow="hidden"
+      flexDirection="row"
+      justifyContent="flex-start"
     >
       <ReAnimatedBox style={progress}>
         <Box
-          width={PROGRESS_WIDTH / 2}
           height={HEIGHT - 1}
           borderRadius="round"
           backgroundColor="lightGrey"

src/features/collectables/ClaimAllRewardsScreen.tsx

@@ -6,23 +6,69 @@ import CircleLoader from '@components/CircleLoader'
 import { DelayedFadeIn } from '@components/FadeInOut'
 import RewardItem from '@components/RewardItem'
 import Text from '@components/Text'
+import {
+  IOT_MINT,
+  MOBILE_MINT,
+  sendAndConfirmWithRetry,
+  toNumber,
+} from '@helium/spl-utils'
+import useAlert from '@hooks/useAlert'
+import { useHntSolConvert } from '@hooks/useHntSolConvert'
 import useHotspots from '@hooks/useHotspots'
 import useSubmitTxn from '@hooks/useSubmitTxn'
 import { useNavigation } from '@react-navigation/native'
 import { IOT_LAZY_KEY, MOBILE_LAZY_KEY } from '@utils/constants'
 import BN from 'bn.js'
 import React, { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { IOT_MINT, MOBILE_MINT, toNumber } from '@helium/spl-utils'
-import { CollectableNavigationProp } from './collectablesTypes'
+import { useSolana } from '../../solana/SolanaProvider'
 import { BalanceChange } from '../../solana/walletSignBottomSheetTypes'
+import { CollectableNavigationProp } from './collectablesTypes'
 
 const ClaimAllRewardsScreen = () => {
   const { t } = useTranslation()
   const navigation = useNavigation<CollectableNavigationProp>()
   const [redeeming, setRedeeming] = useState(false)
   const [claimError, setClaimError] = useState<string | undefined>()
   const { submitClaimAllRewards } = useSubmitTxn()
+  const {
+    hntEstimateLoading,
+    hntSolConvertTransaction,
+    hntEstimate,
+    hasEnoughSol,
+  } = useHntSolConvert()
+  const { showOKCancelAlert } = useAlert()
+  const { anchorProvider } = useSolana()
+  const showHNTConversionAlert = useCallback(async () => {
+    if (!anchorProvider || !hntSolConvertTransaction) return
+
+    const decision = await showOKCancelAlert({
+      title: t('browserScreen.insufficientSolToPayForFees'),
+      message: t('browserScreen.wouldYouLikeToConvert', {
+        amount: hntEstimate,
+        ticker: 'HNT',
+      }),
+    })
+
+    if (!decision) return
+    const signed = await anchorProvider.wallet.signTransaction(
+      hntSolConvertTransaction,
+    )
+    await sendAndConfirmWithRetry(
+      anchorProvider.connection,
+      signed.serialize(),
+      {
+        skipPreflight: true,
+      },
+      'confirmed',
+    )
+  }, [
+    anchorProvider,
+    hntSolConvertTransaction,
+    showOKCancelAlert,
+    t,
+    hntEstimate,
+  ])
 
   const {
     hotspots,
@@ -45,6 +91,9 @@ const ClaimAllRewardsScreen = () => {
     try {
       setClaimError(undefined)
       setRedeeming(true)
+      if (!hasEnoughSol) {
+        await showHNTConversionAlert()
+      }
 
       const balanceChanges: BalanceChange[] = []
 
@@ -78,11 +127,13 @@ const ClaimAllRewardsScreen = () => {
       setRedeeming(false)
     }
   }, [
-    navigation,
+    hasEnoughSol,
+    pendingIotRewards,
+    pendingMobileRewards,
     submitClaimAllRewards,
     hotspotsWithMeta,
-    pendingMobileRewards,
-    pendingIotRewards,
+    navigation,
+    showHNTConversionAlert,
   ])
 
   const addAllToAccountDisabled = useMemo(() => {
@@ -161,7 +212,9 @@ const ClaimAllRewardsScreen = () => {
             titleColor="black"
             marginHorizontal="l"
             onPress={onClaimRewards}
-            disabled={addAllToAccountDisabled || redeeming}
+            disabled={
+              addAllToAccountDisabled || redeeming || hntEstimateLoading
+            }
             TrailingComponent={
               redeeming ? (
                 <CircleLoader loaderSize={20} color="white" />

src/features/collectables/ClaimingRewardsScreen.tsx

@@ -193,10 +193,23 @@ const ClaimingRewardsScreen = () => {
               </Text>
               <Box flexDirection="row" marginHorizontal="xxl" marginTop="m">
                 {typeof solanaPayment.progress !== 'undefined' ? (
-                  <ProgressBar
-                    progress={solanaPayment.progress}
-                    paddingHorizontal="l"
-                  />
+                  <Box
+                    width="100%"
+                    flexDirection="column"
+                    alignContent="stretch"
+                    alignItems="stretch"
+                  >
+                    <ProgressBar progress={solanaPayment.progress.percent} />
+                    <Text
+                      textAlign="center"
+                      variant="body2"
+                      color="secondaryText"
+                      marginTop="s"
+                      numberOfLines={2}
+                    >
+                      {solanaPayment.progress.text}
+                    </Text>
+                  </Box>
                 ) : (
                   <IndeterminateProgressBar paddingHorizontal="l" />
                 )}

src/features/collectables/CollectablesTopTabs.tsx

@@ -31,6 +31,7 @@ const CollectablesTopTabs = () => {
   const screenOpts = useCallback(
     ({ route }: { route: RouteProp<CollectablesTabParamList> }) =>
       ({
+        lazy: true,
         headerShown: false,
         tabBarLabelStyle: {
           fontFamily: Font.medium,

src/features/collectables/HotspotList.tsx

@@ -183,12 +183,12 @@ const HotspotList = () => {
           hasPressedState={false}
         />
         <ListItem
-          key="show-all"
-          title={t('collectablesScreen.hotspots.all')}
+          key="show-1000"
+          title={t('collectablesScreen.hotspots.thousand')}
           subtitle={t('collectablesScreen.hotspots.showAllHotspotsWarning')}
           // Set an unrealistically high amount
-          onPress={handleSetPageAmount(10000)}
-          selected={pageAmount === 10000}
+          onPress={handleSetPageAmount(1000)}
+          selected={pageAmount === 1000}
           hasPressedState={false}
           subtitleColor="orange500"
         />

src/hooks/useEntityKey.ts

@@ -1,14 +1,9 @@
-import { useEffect, useState } from 'react'
+import { decodeEntityKey } from '@helium/helium-entity-manager-sdk'
 import { HotspotWithPendingRewards } from '../types/solana'
+import { useKeyToAsset } from './useKeyToAsset'
 
 export const useEntityKey = (hotspot: HotspotWithPendingRewards) => {
-  const [entityKey, setEntityKey] = useState<string>()
+  const { info: kta } = useKeyToAsset(hotspot?.id)
 
-  useEffect(() => {
-    if (hotspot) {
-      setEntityKey(hotspot.content.json_uri.split('/').slice(-1)[0])
-    }
-  }, [hotspot, setEntityKey])
-
-  return entityKey
+  return kta ? decodeEntityKey(kta.entityKey, kta.keySerialization) : undefined
 }

src/hooks/useHntSolConvert.ts

@@ -41,11 +41,11 @@ export function useHntSolConvert() {
   }, [baseUrl])
 
   const hasEnoughSol = useMemo(() => {
-    if (!hntBalance || !solBalance || !hntEstimate) return true
+    if (!hntBalance || !hntEstimate) return true
 
     if (hntBalance.lt(hntEstimate)) return true
 
-    return solBalance.gt(new BN(0.02 * LAMPORTS_PER_SOL))
+    return (solBalance || new BN(0)).gt(new BN(0.02 * LAMPORTS_PER_SOL))
   }, [hntBalance, solBalance, hntEstimate])
 
   const {

src/hooks/useMetaplexMetadata.ts

@@ -16,7 +16,7 @@ const MPL_PID = new PublicKey('metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s')
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const cache: Record<string, Promise<any>> = {}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getMetadata(uri: string | undefined): Promise<any | undefined> {
+export function getMetadata(uri: string | undefined): Promise<any | undefined> {
   if (uri) {
     if (!cache[uri]) {
       cache[uri] = fetch(uri).then((res) => res.json())

src/hooks/useSubmitTxn.ts

@@ -310,29 +310,6 @@ export default () => {
         throw new Error(t('errors.account'))
       }
 
-      const txns = await solUtils.claimAllRewardsTxns(
-        anchorProvider,
-        lazyDistributors,
-        hotspots,
-      )
-
-      const serializedTxs = txns.map((txn) =>
-        txn.serialize({
-          requireAllSignatures: false,
-        }),
-      )
-
-      const decision = await walletSignBottomSheetRef.show({
-        type: WalletStandardMessageTypes.signTransaction,
-        url: '',
-        additionalMessage: t('transactions.signClaimAllRewardsTxn'),
-        serializedTxs: serializedTxs.map(Buffer.from),
-      })
-
-      if (!decision) {
-        throw new Error('User rejected transaction')
-      }
-
       dispatch(
         claimAllRewards({
           account: currentAccount,

src/locales/en.ts

@@ -176,7 +176,7 @@ export default {
     claimingRewardsBody:
       'You can exit this screen while you wait. We’ll update your Wallet momentarily.',
     claimComplete: 'Rewards Claimed!',
-    claimCompleteBody: 'We’ve added your tokens to your wallet.',
+    claimCompleteBody: 'Your tokens have been added to your wallet.',
     claimError: 'Claim failed. Please try again later.',
     transferCollectableAlertTitle:
       'Are you sure you will like to transfer your collectable?',
@@ -219,7 +219,7 @@ export default {
         'Warning: Load times may be affected when showing all hotspots per page.',
       twenty: '20',
       fifty: '50',
-      all: 'All',
+      thousand: '1000',
       copyEccCompact: 'Copy Hotspot Key',
       assertLocation: 'Assert Location',
       antennaSetup: 'Antenna Setup',
@@ -332,7 +332,7 @@ export default {
     chooseTokenToSwap: 'Choose a token to swap',
     chooseTokenToReceive: 'Choose a token to receive',
     swapComplete: 'Tokens swapped!',
-    swapCompleteBody: 'We’ve updated the tokens on your wallet.',
+    swapCompleteBody: 'The tokens in your wallet have been updated.',
     swappingTokens: 'Swapping your tokens...',
     swappingTokensBody:
       'You can exit this screen while you wait. We’ll update your Wallet momentarily.',

src/navigation/TabBarNavigator.tsx

@@ -201,6 +201,7 @@ const TabBarNavigator = () => {
         tabBar={(props: BottomTabBarProps) => <MyTabBar {...props} />}
         screenOptions={{
           headerShown: false,
+          lazy: true,
         }}
         sceneContainerStyle={{
           paddingBottom: NavBarHeight + bottom,

src/solana/SolanaProvider.tsx

@@ -5,7 +5,14 @@ import { init as initHem } from '@helium/helium-entity-manager-sdk'
 import { init as initHsd } from '@helium/helium-sub-daos-sdk'
 import { init as initLazy } from '@helium/lazy-distributor-sdk'
 import { DC_MINT, HNT_MINT } from '@helium/spl-utils'
-import { Cluster, Transaction } from '@solana/web3.js'
+import {
+  AccountInfo,
+  Cluster,
+  Commitment,
+  PublicKey,
+  RpcResponseAndContext,
+  Transaction,
+} from '@solana/web3.js'
 import React, {
   ReactNode,
   createContext,
@@ -85,13 +92,40 @@ const useSolanaHook = () => {
   const cache = useMemo(() => {
     if (!connection) return
 
-    return new AccountFetchCache({
+    const c = new AccountFetchCache({
       connection,
       delay: 100,
       commitment: 'confirmed',
       missingRefetchDelay: 60 * 1000,
       extendConnection: true,
     })
+    const oldGetAccountinfoAndContext =
+      connection.getAccountInfoAndContext.bind(connection)
+
+    // Anchor uses this call on .fetch and .fetchNullable even though it doesn't actually need the context. Add caching.
+    connection.getAccountInfoAndContext = async (
+      publicKey: PublicKey,
+      com?: Commitment,
+    ): Promise<RpcResponseAndContext<AccountInfo<Buffer> | null>> => {
+      if (
+        (com || connection.commitment) === 'confirmed' ||
+        typeof (com || connection.commitment) === 'undefined'
+      ) {
+        const [result, dispose] = await c.searchAndWatch(publicKey)
+        setTimeout(dispose, 30 * 1000) // cache for 30s
+        return {
+          value: result?.account || null,
+          context: {
+            slot: 0,
+          },
+        }
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return oldGetAccountinfoAndContext!(publicKey, com)
+    }
+
+    return c
   }, [connection])
   useEffect(() => {
     // Don't sub to hnt or dc they change a bunch