fix: types

app/components/home/stacking-card.tsx

@@ -5,7 +5,7 @@ import BigNumber from 'bignumber.js';
 
 import { RootState } from '@store/index';
 import { formatPoxAddressToNetwork } from '@utils/stacking';
-import { selectStackerInfo } from '@store/stacking/stacking.reducer';
+import { selectAccountBalanceLocked, selectStackerInfo } from '@store/stacking/stacking.reducer';
 import stackingImg from '@assets/images/abstract-btc-stx-bar-chart.svg';
 import {
   InfoCard,
@@ -24,6 +24,7 @@ export const StackingCard: FC = () => {
   const { stackerInfo } = useSelector((state: RootState) => ({
     stackerInfo: selectStackerInfo(state),
   }));
+  const accountBalanceLocked = useSelector((state: RootState) => selectAccountBalanceLocked(state));
 
   if (!stackerInfo?.isCurrentlyStacking) return null;
 
@@ -41,7 +42,7 @@ export const StackingCard: FC = () => {
           fontFamily="Open Sauce"
           letterSpacing="-0.02em"
         >
-          {toHumanReadableStx(stackerInfo.details.amount_microstx)}
+          {accountBalanceLocked !== null && toHumanReadableStx(Number(accountBalanceLocked))}
         </Text>
       </Flex>
       <Hr />

app/components/info-card.tsx

@@ -14,14 +14,21 @@ export const InfoCard: FC<FlexProps> = props => (
   />
 );
 
-export const InfoCardGroup: FC<BoxProps> = ({ children, ...props }) => {
+type ChildProps = BoxProps;
+
+type TChild = React.ReactElement<ChildProps>;
+
+interface Props extends BoxProps {
+  children: TChild | TChild[];
+}
+export const InfoCardGroup = ({ children, ...props }: Props) => {
   const parsedChildren = Array.isArray(children) ? children : [children];
   const infoGroup = parsedChildren.flatMap((child, index) => {
     if (!isValidElement(child)) return null;
     return [
       cloneElement(child, {
         key: index,
-        mb: index === parsedChildren.length ? '280px' : null,
+        mb: index === parsedChildren.length ? '280px' : undefined,
       }),
       index !== parsedChildren.length - 1 && <Hr my="loose" key={index.toString() + '-hr'} />,
     ];

app/hooks/use-decrypt-wallet.ts

@@ -31,7 +31,7 @@ export function useDecryptWallet() {
       );
       setIsDecrypting(false);
       if (error) throw error;
-      return decryptedSoftwareWallet as NonNullable<typeof decryptedSoftwareWallet>;
+      return decryptedSoftwareWallet;
     },
     [encryptedMnemonic, salt]
   );

app/hooks/use-global-polling.ts

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { DEFAULT_POLLING_INTERVAL } from '@constants/index';
 import { selectAddress } from '@store/keys';
 import {
+  fetchAccountBalanceLocked,
   fetchBlockTimeInfo,
   fetchCoreDetails,
   fetchStackerInfo,
@@ -24,12 +25,14 @@ export function useGlobalAppPolling() {
     if (!address) return;
     dispatch(getAddressTransactions(address));
     dispatch(getAddressDetails(address));
+    dispatch(fetchAccountBalanceLocked(address));
   }, [address, dispatch]);
 
   const refreshWalletDetailsWithoutLoader = useCallback(() => {
     if (!address) return;
     dispatch(getAddressTransactions(address, { displayLoading: false }));
     dispatch(getAddressDetails(address));
+    dispatch(fetchAccountBalanceLocked(address));
   }, [address, dispatch]);
 
   useNavigatorOnline({ onReconnect: initAppWithStxAddressInfo });
@@ -43,13 +46,15 @@ export function useGlobalAppPolling() {
       dispatch(fetchCoreDetails());
       dispatch(fetchBlockTimeInfo());
       dispatch(fetchStackerInfo(address));
+      dispatch(fetchAccountBalanceLocked(address));
     }
   }, [address, api, initAppWithStxAddressInfo, dispatch]);
 
   useInterval(() => {
     if (address) {
       dispatch(fetchStackerInfo(address));
       dispatch(fetchStackingInfo());
+      dispatch(fetchAccountBalanceLocked(address));
     }
     dispatch(fetchCoreDetails());
   }, 20_000);

app/hooks/use-watch-stacking-tx.ts

@@ -11,6 +11,7 @@ import {
   selectPoxInfo,
   fetchStackerInfo,
   removeStackingTx,
+  fetchAccountBalanceLocked,
 } from '@store/stacking';
 
 export function useWatchStackingTx() {
@@ -28,6 +29,7 @@ export function useWatchStackingTx() {
       if (!activeStackingTx || !address) return;
       await safeAwait(watchContractExecution({ nodeUrl: api.baseUrl, txId: activeStackingTx }));
       dispatch(fetchStackerInfo(address));
+      dispatch(fetchAccountBalanceLocked(address));
       setTimeout(() => dispatch(removeStackingTx()), 2000);
     }
     void run();

app/modals/delegated-stacking/delegated-stacking-modal.tsx

@@ -49,8 +49,9 @@ export const DelegatedStackingModal: FC<StackingModalProps> = props => {
     poxInfo: selectPoxInfo(state),
   }));
 
-  const [nodeResponseError, setNodeResponseError] =
-    useState<PostCoreNodeTransactionsError | null>(null);
+  const [nodeResponseError, setNodeResponseError] = useState<PostCoreNodeTransactionsError | null>(
+    null
+  );
 
   const delegationTxOptions = useMemo((): ContractCallOptions => {
     if (!poxInfo) throw new Error('`poxInfo` undefined');

app/modals/receive-stx/components/reveal-stx-address-ledger.tsx

@@ -18,8 +18,9 @@ export const RevealStxAddressLedger: FC = () => {
 
   const [ledgerAddress, setLedgerAddress] = useState<null | string>(null);
   const [success, setSuccess] = useState(false);
-  const [pendingLedgerAction, setPendingLedgerAction] =
-    useState<'idle' | 'pending' | 'complete'>('idle');
+  const [pendingLedgerAction, setPendingLedgerAction] = useState<'idle' | 'pending' | 'complete'>(
+    'idle'
+  );
 
   const { address: persistedAddress } = useSelector((state: RootState) => ({
     address: selectAddress(state),

app/modals/revoke-delegation/revoke-delegation-modal.tsx

@@ -30,8 +30,9 @@ export const RevokeDelegationModal: FC = () => {
   const calcFee = useCalculateFee();
   const poxInfo = useSelector(selectPoxInfo);
 
-  const [nodeResponseError, setNodeResponseError] =
-    useState<PostCoreNodeTransactionsError | null>(null);
+  const [nodeResponseError, setNodeResponseError] = useState<PostCoreNodeTransactionsError | null>(
+    null
+  );
 
   const revocationTxOptions = useMemo((): ContractCallOptions => {
     if (!poxInfo) throw new Error('`poxInfo` undefined');

app/modals/send-stx/send-stx-modal.tsx

@@ -73,8 +73,9 @@ export const SendStxModal: FC<TxModalProps> = ({ address, isOpen }) => {
 
   const [feeEstimateError, setFeeEstimateError] = useState<string | null>(null);
 
-  const [nodeResponseError, setNodeResponseError] =
-    useState<PostCoreNodeTransactionsError | null>(null);
+  const [nodeResponseError, setNodeResponseError] = useState<PostCoreNodeTransactionsError | null>(
+    null
+  );
   const [loading, setLoading] = useState(false);
   const { nonce } = useLatestNonce();
 

app/modals/stacking/stacking-modal.tsx

@@ -42,8 +42,9 @@ export const StackingModal: FC<StackingModalProps> = props => {
     coreNodeInfo: selectCoreNodeInfo(state),
   }));
 
-  const [nodeResponseError, setNodeResponseError] =
-    useState<PostCoreNodeTransactionsError | null>(null);
+  const [nodeResponseError, setNodeResponseError] = useState<PostCoreNodeTransactionsError | null>(
+    null
+  );
   const stackingTxOptions = useMemo(() => {
     if (!poxInfo) throw new Error('poxInfo not defined');
     if (!coreNodeInfo) throw new Error('Stacking requires coreNodeInfo');

app/pages/stacking/components/stacking-form-container.tsx

@@ -1,10 +1,21 @@
-import React, { cloneElement, FC, isValidElement } from 'react';
+import React, { cloneElement, isValidElement } from 'react';
 import { Box } from '@stacks/ui';
 import { Hr } from '@components/hr';
 
 import { increment } from '@utils/mutate-numbers';
+import { BoxProps } from '@stacks/ui-core';
 
-export const StackingFormContainer: FC = ({ children }) => {
+interface ChildProps extends BoxProps {
+  step: number;
+}
+
+type TChild = React.ReactElement<ChildProps>;
+
+interface Props {
+  children: TChild | TChild[];
+}
+
+export const StackingFormContainer = ({ children }: Props) => {
   const parsedChildren = Array.isArray(children) ? children : [children];
   const parsedFormSteps = parsedChildren.flatMap((child, index) => {
     if (!isValidElement(child)) return null;
@@ -13,7 +24,7 @@ export const StackingFormContainer: FC = ({ children }) => {
       cloneElement(child, {
         key: index,
         step: increment(index),
-        mb: increment(index) === parsedChildren.length ? '280px' : null,
+        mb: increment(index) === parsedChildren.length ? '280px' : undefined,
       }),
     ];
   });

app/store/address/address.actions.ts

@@ -29,5 +29,6 @@ export function getAddressDetails(address: string) {
   };
 }
 
-export const updateAddressBalance =
-  createAction<{ address: string; balance: string }>('address/update-balance');
+export const updateAddressBalance = createAction<{ address: string; balance: string }>(
+  'address/update-balance'
+);

app/store/keys/keys.actions.ts

@@ -61,7 +61,7 @@ interface SetPasswordSuccess {
 export const setPasswordSuccess = createAction<SetPasswordSuccess>('keys/set-password-success');
 
 export function onboardingMnemonicGenerationStep({ stepDelayMs }: { stepDelayMs: number }) {
-  return async (dispatch: Dispatch) => {
+  return (dispatch: Dispatch) => {
     const plaintextMnemonic = generateSecretKey(MNEMONIC_ENTROPY);
     dispatch(persistMnemonicSafe(plaintextMnemonic));
     setTimeout(() => dispatch(push(routes.SECRET_KEY)), stepDelayMs);

app/store/stacking/stacking.actions.ts

@@ -48,6 +48,19 @@ export const fetchStackerInfo = createAsyncThunk(
   }
 );
 
+export const fetchAccountBalanceLocked = createAsyncThunk(
+  'stacking/balance-locked',
+  async (address: string, thunkApi) => {
+    const state = thunkApi.getState() as RootState;
+    const network = selectActiveStacksNetwork(state);
+    const stackingClient = new StackingClient(address, network);
+    const [error, resp] = await safeAwait(stackingClient.getAccountBalanceLocked());
+    if (resp !== undefined) return resp;
+    if (error) return { error };
+    throw new Error();
+  }
+);
+
 export const activeStackingTx = createAction<{ txId: string }>(
   'stacking/call-stacking-contract-tx'
 );

app/store/stacking/stacking.reducer.ts

@@ -18,6 +18,7 @@ import {
   fetchStackerInfo,
   activeStackingTx,
   removeStackingTx,
+  fetchAccountBalanceLocked,
 } from './stacking.actions';
 import { stxToMicroStx } from '@utils/unit-convert';
 import { StackerInfo as StackerInfoFromClient } from '@stacks/stacking';
@@ -41,10 +42,13 @@ type StackerInfo = StackerInfoFromClient | StackerInfoFail;
 
 export interface StackingState {
   initialRequestsComplete: Record<
-    'poxInfo' | 'coreNodeInfo' | 'blockTimeInfo' | 'stackerInfo',
+    'poxInfo' | 'coreNodeInfo' | 'blockTimeInfo' | 'stackerInfo' | 'accountBalanceLocked',
+    boolean
+  >;
+  errors: Record<
+    'poxInfo' | 'coreNodeInfo' | 'blockTimeInfo' | 'stackerInfo' | 'accountBalanceLocked',
     boolean
   >;
-  errors: Record<'poxInfo' | 'coreNodeInfo' | 'blockTimeInfo' | 'stackerInfo', boolean>;
   contractCallTx: string | null;
   poxInfo: CoreNodePoxResponse | null;
   coreNodeInfo: CoreNodeInfoResponse | null;
@@ -56,11 +60,12 @@ export interface StackingState {
       lock_period: number;
       unlock_height: number;
       pox_address: {
-        version: Buffer;
-        hashbytes: Buffer;
+        version: Uint8Array;
+        hashbytes: Uint8Array;
       };
     };
   } | null;
+  accountBalanceLocked: bigint | null;
 }
 
 const initialState: StackingState = {
@@ -69,25 +74,38 @@ const initialState: StackingState = {
     coreNodeInfo: false,
     blockTimeInfo: false,
     stackerInfo: false,
+    accountBalanceLocked: false,
   },
   errors: {
     poxInfo: false,
     coreNodeInfo: false,
     blockTimeInfo: false,
     stackerInfo: false,
+    accountBalanceLocked: false,
   },
   contractCallTx: null,
   poxInfo: null,
   coreNodeInfo: null,
   blockTimeInfo: null,
   stackerInfo: null,
+  accountBalanceLocked: null,
 };
 
 export const stackingSlice = createSlice({
   name: 'stacking',
   initialState,
   reducers: {},
   extraReducers: {
+    [fetchAccountBalanceLocked.fulfilled.toString()]: (state, action: PayloadAction<bigint>) => {
+      state.initialRequestsComplete.accountBalanceLocked = true;
+      state.errors.accountBalanceLocked = false;
+      state.accountBalanceLocked = action.payload;
+    },
+    [fetchAccountBalanceLocked.rejected.toString()]: state => {
+      if (!state.initialRequestsComplete.accountBalanceLocked) {
+        state.errors.accountBalanceLocked = true;
+      }
+    },
     [fetchStackingInfo.fulfilled.toString()]: (
       state,
       action: PayloadAction<CoreNodePoxResponse>
@@ -155,6 +173,10 @@ export const stackingActions = stackingSlice.actions;
 
 export const selectStackingState = (state: RootState) => state.stacking;
 export const selectCoreNodeInfo = createSelector(selectStackingState, state => state.coreNodeInfo);
+export const selectAccountBalanceLocked = createSelector(
+  selectStackingState,
+  state => state.accountBalanceLocked
+);
 export const selectBlockTimeInfo = createSelector(
   selectStackingState,
   state => state.blockTimeInfo