fix(wallet, wallet-dashboard): Allow accessing active stakes at all times (#6796)

## Links to any relevant issues

fixes #6784

---------

Co-authored-by: Marc Espin <[email protected]>

Author: KeitoTadashi

apps/core/src/hooks/stake/useNewUnstakeTransaction.ts

@@ -15,7 +15,6 @@ export function useNewUnstakeTransaction(senderAddress: string, unstakeIotaId: s
         queryFn: async () => {
             const transaction = createUnstakeTransaction(unstakeIotaId);
             transaction.setSender(senderAddress);
-            await transaction.build({ client });
             const txBytes = await transaction.build({ client });
             const txDryRun = await client.dryRunTransactionBlock({
                 transactionBlock: txBytes,

apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeView.tsx

@@ -21,9 +21,12 @@ import {
     useNewUnstakeTransaction,
     Validator,
     toast,
+    NOT_ENOUGH_BALANCE_ID,
+    GAS_BUDGET_ERROR_MESSAGES,
+    GAS_BALANCE_TOO_LOW_ID,
 } from '@iota/core';
 import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
-import { Warning } from '@iota/apps-ui-icons';
+import { Warning, Info } from '@iota/apps-ui-icons';
 import { StakeRewardsPanel, ValidatorStakingData } from '@/components';
 import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
 
@@ -46,10 +49,11 @@ export function UnstakeView({
     showActiveStatus,
 }: UnstakeDialogProps): JSX.Element {
     const activeAddress = useCurrentAccount()?.address ?? '';
-    const { data: unstakeData, isPending: isUnstakeTxPending } = useNewUnstakeTransaction(
-        activeAddress,
-        extendedStake.stakedIotaId,
-    );
+    const {
+        data: unstakeData,
+        isPending: isUnstakeTxPending,
+        error,
+    } = useNewUnstakeTransaction(activeAddress, extendedStake.stakedIotaId);
     const [gasFormatted] = useFormatCoin({
         balance: unstakeData?.gasSummary?.totalGas,
         format: CoinFormat.FULL,
@@ -74,7 +78,10 @@ export function UnstakeView({
     } = delegatedStakeDataResult;
 
     const delegationId = extendedStake?.stakedIotaId;
-    const isPreparingUnstake = !unstakeData || isUnstakeTxPending;
+    const isNotEnoughGas =
+        error &&
+        (error.message.includes(NOT_ENOUGH_BALANCE_ID) ||
+            error.message.includes(GAS_BALANCE_TOO_LOW_ID));
 
     async function handleUnstake(): Promise<void> {
         if (!unstakeData) return;
@@ -156,14 +163,30 @@ export function UnstakeView({
             </DialogLayoutBody>
 
             <DialogLayoutFooter>
+                {isNotEnoughGas && (
+                    <div className="pt-sm">
+                        <InfoBox
+                            supportingText={GAS_BUDGET_ERROR_MESSAGES[GAS_BALANCE_TOO_LOW_ID]}
+                            icon={<Info />}
+                            type={InfoBoxType.Error}
+                            style={InfoBoxStyle.Elevated}
+                        />
+                    </div>
+                )}
                 <Button
                     type={ButtonType.Secondary}
                     fullWidth
                     onClick={handleUnstake}
-                    disabled={isPreparingUnstake || isTransactionPending || !delegationId}
+                    disabled={
+                        !unstakeData ||
+                        isUnstakeTxPending ||
+                        isTransactionPending ||
+                        isNotEnoughGas ||
+                        !delegationId
+                    }
                     text="Unstake"
                     icon={
-                        isPreparingUnstake ? (
+                        isUnstakeTxPending || isTransactionPending ? (
                             <LoadingIndicator data-testid="loading-indicator" />
                         ) : null
                     }

apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx

@@ -28,7 +28,7 @@ export function TokenStakingOverview({
     disabled,
 }: {
     accountAddress: string;
-    disabled: boolean;
+    disabled?: boolean;
 }) {
     const navigate = useNavigate();
     const { data: delegatedStake, isPending } = useGetDelegatedStake({

apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx

@@ -250,7 +250,6 @@ export function TokenDetails() {
                                 <div className="flex w-full flex-col items-center gap-xs">
                                     {accountHasIota || delegatedStake?.length ? (
                                         <TokenStakingOverview
-                                            disabled={!tokenBalance}
                                             accountAddress={activeAccountAddress}
                                         />
                                     ) : null}

apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx

@@ -17,6 +17,9 @@ import {
     getDelegationDataByStakeId,
     Validator,
     toast,
+    GAS_BUDGET_ERROR_MESSAGES,
+    NOT_ENOUGH_BALANCE_ID,
+    GAS_BALANCE_TOO_LOW_ID,
 } from '@iota/core';
 import { useMemo } from 'react';
 import { useActiveAccount, useSigner } from '_hooks';
@@ -79,6 +82,7 @@ export function UnStakeForm({ stakedIotaId, validatorAddress, epoch, onSuccess }
         data: unstakeData,
         isLoading: isUnstakeTokenTransactionLoading,
         isError,
+        error,
     } = useNewUnstakeTransaction(activeAddress, stakedIotaId);
     const transaction = unstakeData?.transaction;
 
@@ -154,6 +158,10 @@ export function UnStakeForm({ stakedIotaId, validatorAddress, epoch, onSuccess }
     const isLoading =
         isPending || isUnstakeTokenTransactionPending || isUnstakeTokenTransactionLoading;
 
+    const isNotEnoughGas =
+        error &&
+        (error.message.includes(NOT_ENOUGH_BALANCE_ID) ||
+            error.message.includes(GAS_BALANCE_TOO_LOW_ID));
     return (
         <>
             <div className="flex flex-1 flex-col flex-nowrap gap-y-md overflow-auto">
@@ -209,6 +217,16 @@ export function UnStakeForm({ stakedIotaId, validatorAddress, epoch, onSuccess }
                     />
                 </div>
             )}
+            {isNotEnoughGas && (
+                <div className="pt-sm">
+                    <InfoBox
+                        supportingText={GAS_BUDGET_ERROR_MESSAGES[GAS_BALANCE_TOO_LOW_ID]}
+                        icon={<Info />}
+                        type={InfoBoxType.Error}
+                        style={InfoBoxStyle.Elevated}
+                    />
+                </div>
+            )}
             <div className="pt-sm">
                 <Button
                     type={ButtonType.Primary}
@@ -217,7 +235,7 @@ export function UnStakeForm({ stakedIotaId, validatorAddress, epoch, onSuccess }
                     disabled={isError || isLoading}
                     text="Unstake"
                     icon={
-                        isLoading ? (
+                        isLoading && !isError ? (
                             <Loader className="animate-spin" data-testid="loading-indicator" />
                         ) : null
                     }