Bugfix/modal insufficient funds (#1013)

* fix: wire up insufficient SOL balance warning in governance modals

Compare estimated SOL fee from prepare() against wallet SOL balance
so users see a warning before submitting instead of a server error.

* docs: add governance modal fixes design

* fix: simplify ClaimingRewardsModal, remove dead progress tracking

* fix: hide Change/Renew Delegation actions on decayed positions

* fix modal and fully decayed options

* fix: remove accidental compiled JS artifacts

Author: bryzettler

src/features/governance/ClaimingRewardsModal.tsx

@@ -9,29 +9,12 @@ import { Edge } from 'react-native-safe-area-context'
 import AccountIcon from '@components/AccountIcon'
 import { useTranslation } from 'react-i18next'
 import { useAccountStorage } from '@storage/AccountStorageProvider'
-import { Status } from '@helium/spl-utils'
-import ProgressBar from '@components/ProgressBar'
 import { Platform } from 'react-native'
 
-export const ClaimingRewardsModal = ({ status }: { status?: Status }) => {
+export const ClaimingRewardsModal = () => {
   const { t } = useTranslation()
   const { currentAccount } = useAccountStorage()
   const edges = useMemo(() => ['bottom'] as Edge[], [])
-  const { helpText, percent } = useMemo(() => {
-    if (!status) return { helpText: 'Preparing Transactions...', percent: 0 }
-    const { totalTxs, totalProgress, currentBatchSize } = status
-
-    const remainingTxs = totalTxs - totalProgress
-    const actualBatchSize =
-      totalTxs < currentBatchSize ? totalTxs : currentBatchSize
-
-    return {
-      helpText: `Sending batch of ${actualBatchSize} transactions.\n${remainingTxs} total transaction${
-        remainingTxs > 1 ? 's' : ''
-      } remaining.`,
-      percent: (totalProgress * 100) / totalTxs,
-    }
-  }, [status])
 
   return (
     <Portal hostName="GovernancePortalHost">
@@ -95,20 +78,6 @@ export const ClaimingRewardsModal = ({ status }: { status?: Status }) => {
                 {t('gov.claiming.multiple')}
               </Text>
             </Box>
-
-            <Box alignItems="center" marginTop="m">
-              <Box flexDirection="row">
-                <ProgressBar progress={percent} />
-              </Box>
-              <Text
-                variant="body2"
-                color="secondaryText"
-                marginTop="s"
-                textAlign="center"
-              >
-                {helpText}
-              </Text>
-            </Box>
           </Box>
         </SafeAreaBox>
       </ReAnimatedBlurBox>

src/features/governance/PositionCard.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-shadow */
+import type { TokenAmountOutput } from '@helium/blockchain-api'
 import { ReAnimatedBox } from '@components/AnimatedBox'
 import BlurActionSheet from '@components/BlurActionSheet'
 import Box from '@components/Box'
@@ -9,7 +10,11 @@ import Text from '@components/Text'
 import TokenIcon from '@components/TokenIcon'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { TASK_QUEUE, useDelegationClaimBot } from '@helium/automation-hooks'
-import { useMint, useSolanaUnixNow } from '@helium/helium-react-hooks'
+import {
+  useMint,
+  useOwnedAmount,
+  useSolanaUnixNow,
+} from '@helium/helium-react-hooks'
 import { EPOCH_LENGTH, delegatedPositionKey } from '@helium/helium-sub-daos-sdk'
 import { delegationClaimBotKey } from '@helium/hpl-crons-sdk'
 import { organizationKey } from '@helium/organization-sdk'
@@ -22,9 +27,11 @@ import {
   useRegistrar,
 } from '@helium/voter-stake-registry-hooks'
 import useAlert from '@hooks/useAlert'
+import { useCurrentWallet } from '@hooks/useCurrentWallet'
 import { useMetaplexMetadata } from '@hooks/useMetaplexMetadata'
 import { useNavigation } from '@react-navigation/native'
 import { BoxProps } from '@shopify/restyle'
+import { NATIVE_MINT } from '@solana/spl-token'
 import { PublicKey } from '@solana/web3.js'
 import { useGovernance } from '@storage/GovernanceProvider'
 import { Theme } from '@theme/theme'
@@ -69,7 +76,9 @@ export const PositionCard = ({
   ...boxProps
 }: IPositionCardProps) => {
   const { t } = useTranslation()
+  const wallet = useCurrentWallet()
   const unixNow = useSolanaUnixNow(60 * 5 * 1000) || 0
+  const { amount: solBalance } = useOwnedAmount(wallet, NATIVE_MINT)
   const { showOKAlert } = useAlert()
   const extendMutation = useExtendPositionMutation()
   const splitMutation = useSplitPositionMutation()
@@ -232,6 +241,13 @@ export const PositionCard = ({
   const maxActionableAmount = mintAcc
     ? toNumber(position.amountDepositedNative, mintAcc)
     : 0
+  const isInsufficientSol = useCallback(
+    (fee: TokenAmountOutput | null) => {
+      if (!fee || typeof solBalance === 'undefined') return false
+      return BigInt(fee.amount) > solBalance
+    },
+    [solBalance],
+  )
   const canDelegate = votingMint.mint.equals(HNT_MINT)
 
   const { info: registrar = null } = useRegistrar(position.registrar)
@@ -542,7 +558,7 @@ export const PositionCard = ({
               selected={false}
               hasPressedState={false}
             />
-            {canDelegate && (
+            {canDelegate && !isDecayed && (
               <>
                 {(showDelegationExpiringWarning ||
                   showDelegationExpiredWarning) && (
@@ -1019,7 +1035,9 @@ export const PositionCard = ({
           </BlurActionSheet>
           {isExtendModalOpen && (
             <LockTokensModal
-              insufficientBalance={false}
+              insufficientBalance={isInsufficientSol(
+                extendMutation.estimatedSolFee,
+              )}
               mint={mint}
               mode="extend"
               minLockupTimeInDays={
@@ -1052,7 +1070,9 @@ export const PositionCard = ({
           )}
           {isSplitModalOpen && (
             <LockTokensModal
-              insufficientBalance={false}
+              insufficientBalance={isInsufficientSol(
+                splitMutation.estimatedSolFee,
+              )}
               mint={mint}
               mode="split"
               minLockupTimeInDays={
@@ -1099,7 +1119,9 @@ export const PositionCard = ({
               onClose={() => setIsDelegateModalOpen(false)}
               onSubmit={handleDelegateTokens}
               estimatedSolFee={delegateMutation.estimatedSolFee?.uiAmountString}
-              insufficientBalance={false}
+              insufficientBalance={isInsufficientSol(
+                delegateMutation.estimatedSolFee,
+              )}
               subDao={subDao}
               setSubDao={setSubDao}
             />

src/features/governance/PositionsScreen.tsx

@@ -4,8 +4,10 @@ import ButtonPressable from '@components/ButtonPressable'
 import Dot from '@components/Dot'
 import ListItem from '@components/ListItem'
 import Text from '@components/Text'
+import type { TokenAmountOutput } from '@helium/blockchain-api'
 import { useOwnedAmount, useSolanaUnixNow } from '@helium/helium-react-hooks'
 import { HNT_MINT, humanReadable, toBN, toNumber } from '@helium/spl-utils'
+import { NATIVE_MINT } from '@solana/spl-token'
 import {
   SubDaoWithMeta,
   calcLockupMultiplier,
@@ -47,6 +49,7 @@ export const PositionsScreen = () => {
   } = useGovernance()
   const { symbol } = useMetaplexMetadata(mint)
   const { amount: ownedAmount, decimals } = useOwnedAmount(wallet, mint)
+  const { amount: solBalance } = useOwnedAmount(wallet, NATIVE_MINT)
   const createPositionMutation = useCreatePositionMutation()
   const claimRewardsMutation = useClaimRewardsMutation()
   const delegateAllMutation = useDelegatePositionMutation()
@@ -72,6 +75,14 @@ export const PositionsScreen = () => {
     if (transactionError) return transactionError
   }, [transactionError])
 
+  const isInsufficientSol = useCallback(
+    (fee: TokenAmountOutput | null) => {
+      if (!fee || typeof solBalance === 'undefined') return false
+      return BigInt(fee.amount) > solBalance
+    },
+    [solBalance],
+  )
+
   const maxLockupAmount =
     ownedAmount && decimals
       ? toNumber(new BN(ownedAmount.toString()), decimals)
@@ -420,12 +431,12 @@ export const PositionsScreen = () => {
             </Box>
           )}
         </Box>
-        {claimRewardsMutation.isPending && (
-          <ClaimingRewardsModal status={undefined} />
-        )}
+        {claimRewardsMutation.isPending && <ClaimingRewardsModal />}
         {isLockModalOpen && (
           <LockTokensModal
-            insufficientBalance={false}
+            insufficientBalance={isInsufficientSol(
+              createPositionMutation.estimatedSolFee,
+            )}
             mint={mint}
             maxLockupAmount={maxLockupAmount}
             calcMultiplierFn={handleCalcLockupMultiplier}
@@ -448,7 +459,9 @@ export const PositionsScreen = () => {
             estimatedSolFee={
               delegateAllMutation.estimatedSolFee?.uiAmountString
             }
-            insufficientBalance={false}
+            insufficientBalance={isInsufficientSol(
+              delegateAllMutation.estimatedSolFee,
+            )}
             subDao={delegateAllSubDao}
             setSubDao={setDelegateAllSubDao}
           />