HIP-138: Add HNT claimable rewards to 2.10.2 wallet app

ios/Podfile.lock

@@ -1984,4 +1984,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d44dfed27ca86fe0b1eb67aab0856b7cc9e24ff7
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

src/features/collectables/ChangeRewardsRecipientScreen.tsx

@@ -27,7 +27,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native'
 import { Edge } from 'react-native-safe-area-context'
-import { IOT_LAZY_KEY, MOBILE_LAZY_KEY } from '@utils/constants'
+import { IOT_LAZY_KEY, MOBILE_LAZY_KEY, HNT_LAZY_KEY } from '@utils/constants'
 import { PublicKey } from '@solana/web3.js'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { useCurrentWallet } from '@hooks/useCurrentWallet'
@@ -139,7 +139,7 @@ const ChangeRewardsRecipientScreen = () => {
     setUpdating(true)
     try {
       await submitUpdateRewardsDestination({
-        lazyDistributors: [IOT_LAZY_KEY, MOBILE_LAZY_KEY],
+        lazyDistributors: [HNT_LAZY_KEY, IOT_LAZY_KEY, MOBILE_LAZY_KEY],
         destination: recipient,
         assetId: hotspot.id,
       })
@@ -157,7 +157,7 @@ const ChangeRewardsRecipientScreen = () => {
     setRemoving(true)
     try {
       await submitUpdateRewardsDestination({
-        lazyDistributors: [IOT_LAZY_KEY, MOBILE_LAZY_KEY],
+        lazyDistributors: [HNT_LAZY_KEY, IOT_LAZY_KEY, MOBILE_LAZY_KEY],
         destination: PublicKey.default.toBase58(),
         assetId: hotspot.id,
       })

src/features/collectables/ClaimAllRewardsScreen.tsx

@@ -7,14 +7,15 @@ import { DelayedFadeIn } from '@components/FadeInOut'
 import RewardItem from '@components/RewardItem'
 import Text from '@components/Text'
 import { useSolOwnedAmount } from '@helium/helium-react-hooks'
-import { IOT_MINT, MOBILE_MINT } from '@helium/spl-utils'
+import { HNT_MINT, IOT_MINT, MOBILE_MINT } from '@helium/spl-utils'
 import { useBN } from '@hooks/useBN'
 import { useCurrentWallet } from '@hooks/useCurrentWallet'
 import useHotspots from '@hooks/useHotspots'
 import useSubmitTxn from '@hooks/useSubmitTxn'
 import { useNavigation } from '@react-navigation/native'
 import { useModal } from '@storage/ModalsProvider'
 import {
+  HNT_LAZY_KEY,
   IOT_LAZY_KEY,
   MIN_BALANCE_THRESHOLD,
   MOBILE_LAZY_KEY,
@@ -23,6 +24,7 @@ import BN from 'bn.js'
 import React, { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CollectableNavigationProp } from './collectablesTypes'
+import { ScrollView } from 'react-native'
 
 const ClaimAllRewardsScreen = () => {
   const { t } = useTranslation()
@@ -39,6 +41,7 @@ const ClaimAllRewardsScreen = () => {
     hotspotsWithMeta,
     pendingIotRewards,
     pendingMobileRewards,
+    pendingHntRewards,
     totalHotspots,
   } = useHotspots()
 
@@ -61,7 +64,7 @@ const ClaimAllRewardsScreen = () => {
       setRedeeming(true)
       const claim = async () => {
         await submitClaimAllRewards(
-          [IOT_LAZY_KEY, MOBILE_LAZY_KEY],
+          [HNT_LAZY_KEY, IOT_LAZY_KEY, MOBILE_LAZY_KEY],
           hotspotsWithMeta,
           totalHotspots,
         )
@@ -115,12 +118,22 @@ const ClaimAllRewardsScreen = () => {
               {t('collectablesScreen.hotspots.hotspotsClaimMessage')}
             </Text>
           </Box>
-          <Box
-            flexGrow={1}
-            alignItems="center"
+          <ScrollView horizontal>
+            <Box
+              flexGrow={1}
+              alignItems="center"
             justifyContent="center"
             flexDirection="row"
           >
+            {hasMore ||
+            (pendingHntRewards && pendingHntRewards.gt(new BN(0))) ? (
+              <RewardItem
+                mint={HNT_MINT}
+                amount={pendingHntRewards || new BN(0)}
+                marginEnd="s"
+                hasMore={hasMore}
+              />
+            ) : null}
             {hasMore ||
             (pendingMobileRewards && pendingMobileRewards.gt(new BN(0))) ? (
               <RewardItem
@@ -135,11 +148,11 @@ const ClaimAllRewardsScreen = () => {
               <RewardItem
                 mint={IOT_MINT}
                 amount={pendingIotRewards || new BN(0)}
-                marginStart="s"
                 hasMore={hasMore}
               />
-            ) : null}
-          </Box>
+              ) : null}
+            </Box>
+          </ScrollView>
           {claimError && (
             <Box>
               <Text

src/features/collectables/ClaimRewardsScreen.tsx

@@ -6,7 +6,7 @@ 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 } from '@helium/spl-utils'
+import { HNT_MINT, IOT_MINT, MOBILE_MINT } from '@helium/spl-utils'
 import { useHotspot } from '@hooks/useHotspot'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { PublicKey, VersionedTransaction } from '@solana/web3.js'
@@ -33,7 +33,7 @@ const ClaimRewardsScreen = () => {
   const mint = useMemo(() => new PublicKey(hotspot.id), [hotspot.id])
   const { submitClaimRewards } = useSubmitTxn()
 
-  const { createClaimMobileTx, createClaimIotTx } = useHotspot(mint)
+  const { createClaimHntTx, createClaimMobileTx, createClaimIotTx } = useHotspot(mint)
 
   const pendingIotRewards = useMemo(
     () =>
@@ -51,6 +51,14 @@ const ClaimRewardsScreen = () => {
     [hotspot],
   )
 
+  const pendingHntRewards = useMemo(
+    () =>
+      hotspot &&
+      hotspot.pendingRewards &&
+      new BN(hotspot.pendingRewards[Mints.HNT]),
+    [hotspot],
+  )
+
   const title = useMemo(() => {
     return t('collectablesScreen.hotspots.claimRewards')
   }, [t])
@@ -73,6 +81,10 @@ const ClaimRewardsScreen = () => {
         pendingMobileRewards && !pendingMobileRewards.eq(new BN(0))
           ? await createClaimMobileTx()
           : undefined
+      const claimHntTx =
+        pendingHntRewards && !pendingHntRewards.eq(new BN(0))
+          ? await createClaimHntTx()
+          : undefined
       const transactions: VersionedTransaction[] = []
 
       if (claimIotTx && pendingIotRewards) {
@@ -83,6 +95,10 @@ const ClaimRewardsScreen = () => {
         transactions.push(claimMobileTx)
       }
 
+      if (claimHntTx && pendingHntRewards) {
+        transactions.push(claimHntTx)
+      }
+
       if (transactions.length > 0) {
         await submitClaimRewards(transactions)
         nav.push('ClaimingRewardsScreen')
@@ -103,9 +119,11 @@ const ClaimRewardsScreen = () => {
       pendingIotRewards &&
       pendingIotRewards.eq(new BN(0)) &&
       pendingMobileRewards &&
-      pendingMobileRewards.eq(new BN(0))
+      pendingMobileRewards.eq(new BN(0)) &&
+      pendingHntRewards &&
+      pendingHntRewards.eq(new BN(0))
     )
-  }, [pendingIotRewards, pendingMobileRewards])
+  }, [pendingIotRewards, pendingMobileRewards, pendingHntRewards])
 
   const safeEdges = useMemo(() => ['top'] as Edge[], [])
 
@@ -134,6 +152,14 @@ const ClaimRewardsScreen = () => {
             justifyContent="center"
             flexDirection="row"
           >
+            {!!pendingHntRewards && pendingHntRewards.gt(new BN(0)) && (
+              <RewardItem
+                mint={HNT_MINT}
+                amount={pendingHntRewards}
+                marginStart="s"
+                hasMore={false}
+              />
+            )}
             {!!pendingMobileRewards && pendingMobileRewards.gt(new BN(0)) && (
               <RewardItem
                 mint={MOBILE_MINT}

src/features/collectables/ClaimingRewardsScreen.tsx

@@ -39,16 +39,19 @@ const ClaimingRewardsScreen = () => {
   const solanaPayment = useSelector(
     (reduxState: RootState) => reduxState.solana.payment,
   )
-  const { pendingIotRewards, pendingMobileRewards } = useHotspots()
+  const { pendingIotRewards, pendingMobileRewards, pendingHntRewards } = useHotspots()
   const pendingIotRewardsNum = pendingIotRewards
     ? toNumber(pendingIotRewards, 6)
     : 0
   const pendingMobileRewardsNum = pendingMobileRewards
     ? toNumber(pendingMobileRewards, 6)
     : 0
+  const pendingHntRewardsNum = pendingHntRewards
+    ? toNumber(pendingHntRewards, 8)
+    : 0
 
   const video =
-    pendingIotRewardsNum && pendingMobileRewardsNum
+    (pendingIotRewardsNum && pendingMobileRewardsNum) || pendingHntRewardsNum
       ? iotMobileTokens
       : pendingMobileRewardsNum
       ? mobileTokens

src/features/collectables/HotspotCompressedListItem.tsx

@@ -1,12 +1,13 @@
 import IotSymbol from '@assets/images/iotSymbol.svg'
 import MobileSymbol from '@assets/images/mobileSymbol.svg'
+import HntSymbol from '@assets/images/hnt.svg'
 import { ReAnimatedBox } from '@components/AnimatedBox'
 import Box from '@components/Box'
 import ImageBox from '@components/ImageBox'
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { useMint } from '@helium/helium-react-hooks'
-import { IOT_MINT, MOBILE_MINT, toNumber } from '@helium/spl-utils'
+import { HNT_MINT, IOT_MINT, MOBILE_MINT, toNumber } from '@helium/spl-utils'
 import { useHotspotAddress } from '@hooks/useHotspotAddress'
 import { BoxProps } from '@shopify/restyle'
 import { Theme } from '@theme/theme'
@@ -44,7 +45,7 @@ const HotspotListItem = ({
 
   const { info: iotMint } = useMint(IOT_MINT)
   const { info: mobileMint } = useMint(MOBILE_MINT)
-
+  const { info: hntMint } = useMint(HNT_MINT)
   const pendingIotRewards = useMemo(
     () => hotspot.pendingRewards && new BN(hotspot.pendingRewards[Mints.IOT]),
     [hotspot],
@@ -65,6 +66,12 @@ const HotspotListItem = ({
     [hotspot.pendingRewards],
   )
 
+  const pendingHntRewards = useMemo(
+    () =>
+      hotspot.pendingRewards && new BN(hotspot.pendingRewards[Mints.HNT]),
+    [hotspot.pendingRewards],
+  )
+
   const pendingMobileRewardsString = useMemo(() => {
     if (!hotspot.pendingRewards) return
     const num = toNumber(
@@ -74,6 +81,15 @@ const HotspotListItem = ({
     return formatLargeNumber(new BigNumber(num))
   }, [hotspot, mobileMint])
 
+  const pendingHntRewardsString = useMemo(() => {
+    if (!hotspot.pendingRewards) return
+    const num = toNumber(
+      new BN(hotspot.pendingRewards[Mints.HNT]),
+      hntMint?.decimals || 8,
+    )
+    return formatLargeNumber(new BigNumber(num))
+  }, [hotspot, hntMint])
+
   const eccCompact = useMemo(() => {
     if (!metadata || !metadata?.attributes?.length) {
       return undefined
@@ -92,6 +108,10 @@ const HotspotListItem = ({
     () => pendingMobileRewards && pendingMobileRewards.gt(new BN(0)),
     [pendingMobileRewards],
   )
+  const hasHntRewards = useMemo(
+    () => pendingHntRewards && pendingHntRewards.gt(new BN(0)),
+    [pendingHntRewards],
+  )
 
   const mobileRecipient = useMemo(
     () => hotspot?.rewardRecipients?.[Mints.MOBILE],
@@ -103,6 +123,11 @@ const HotspotListItem = ({
     [hotspot],
   )
 
+  const hntRecipient = useMemo(
+    () => hotspot?.rewardRecipients?.[Mints.HNT],
+    [hotspot],
+  )
+
   const hasIotRecipient = useMemo(
     () =>
       iotRecipient?.destination &&
@@ -121,9 +146,18 @@ const HotspotListItem = ({
     [mobileRecipient, wallet],
   )
 
+  const hasHntRecipient = useMemo(
+    () =>
+      hntRecipient?.destination &&
+      wallet &&
+      !new PublicKey(hntRecipient.destination).equals(wallet) &&
+      !new PublicKey(hntRecipient.destination).equals(PublicKey.default),
+    [hntRecipient, wallet],
+  )
+
   const hasRecipientSet = useMemo(
-    () => hasIotRecipient || hasMobileRecipient,
-    [hasIotRecipient, hasMobileRecipient],
+    () => hasIotRecipient || hasMobileRecipient || hasHntRecipient,
+    [hasIotRecipient, hasMobileRecipient, hasHntRecipient],
   )
 
   return (
@@ -198,6 +232,24 @@ const HotspotListItem = ({
             </Text>
           </Box>
           <Box marginLeft="ms">
+            {!!hasHntRewards && (
+              <Box
+                flexDirection="row"
+                justifyContent="space-between"
+                alignItems="center"
+                backgroundColor="hntDarkBlue"
+                borderRadius="m"
+                paddingVertical="xs"
+                paddingLeft="xs"
+                paddingRight="s"
+                marginBottom="xs"
+              >
+                <HntSymbol color={colors.hntBlue} width={20} height={20} />
+                <Text variant="body3Medium" marginLeft="xs" color="hntBlue">
+                  {pendingHntRewardsString}
+                </Text>
+              </Box>
+            )}
             {!!hasMobileRewards && (
               <Box
                 flexDirection="row"

src/features/collectables/HotspotList.tsx

@@ -6,7 +6,7 @@ import CircleLoader from '@components/CircleLoader'
 import Text from '@components/Text'
 import TokenIcon from '@components/TokenIcon'
 import { useMint } from '@helium/helium-react-hooks'
-import { IOT_MINT, MOBILE_MINT, toNumber } from '@helium/spl-utils'
+import { HNT_MINT, IOT_MINT, MOBILE_MINT, toNumber } from '@helium/spl-utils'
 import useHaptic from '@hooks/useHaptic'
 import useHotspots from '@hooks/useHotspots'
 import { useMetaplexMetadata } from '@hooks/useMetaplexMetadata'
@@ -82,6 +82,7 @@ const HotspotList = () => {
     fetchingMore,
     pendingIotRewards,
     pendingMobileRewards,
+    pendingHntRewards,
     onEndReached,
     totalHotspots,
   } = useHotspots()
@@ -264,6 +265,11 @@ const HotspotList = () => {
         p="m"
       >
         <Box flexDirection="row" justifyContent="space-evenly">
+          <RewardItem
+            mint={HNT_MINT}
+            amount={pendingHntRewards}
+            hasMore={hotspots.length < (totalHotspots || 0)}
+          />
           <RewardItem
             mint={MOBILE_MINT}
             amount={pendingMobileRewards}
@@ -291,6 +297,8 @@ const HotspotList = () => {
               pendingIotRewards.eq(new BN('0')) &&
               pendingMobileRewards &&
               pendingMobileRewards.eq(new BN('0')) &&
+              pendingHntRewards &&
+              pendingHntRewards.eq(new BN('0')) &&
               hotspotsWithMeta.length === (totalHotspots || 0)) ||
             hotspotsWithMeta?.length === 0
           }