fix(stacking): missing stacking error state, closes #416

app/components/home/stacking-error-card.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { Flex, Text } from '@blockstack/ui';
+
+export const StackingError: FC = () => (
+  <Flex
+    flexDirection="column"
+    flex={1}
+    justifyContent="center"
+    textAlign="center"
+    alignItems="center"
+    mt="extra-loose"
+    borderRadius="8px"
+    boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
+    border="1px solid #F0F0F5"
+    px="loose"
+    minHeight="180px"
+  >
+    <Flex>
+      <Text display="block" textStyle="body.small" color="ink.600" width="100%">
+        Unable to fetch stacking details
+      </Text>
+    </Flex>
+  </Flex>
+);

app/pages/home/home.tsx

@@ -44,6 +44,7 @@ import { TransactionListItemPending } from '@components/home/transaction-list/tr
 import { StackingCard } from '@components/home/stacking-card';
 import { StackingLoading } from '@components/home/stacking-loading';
 import { StackingBeginsSoonCard } from '@components/home/stacking-begins-soon-card';
+import { StackingError } from '@components/home/stacking-error-card';
 
 import { HomeLayout } from './home-layout';
 
@@ -168,6 +169,7 @@ export const Home: FC = () => {
       <StackingBeginsSoonCard blocksTillNextCycle={nextCycleInfo?.blocksToNextCycle} />
     ),
     [HomeCardState.StackingActive]: <StackingCard />,
+    [HomeCardState.StackingError]: <StackingError error="sldkjfslfd" />,
     [HomeCardState.PostStacking]: <></>,
   };
 

app/store/home/home.reducer.ts

@@ -6,6 +6,7 @@ import {
   selectLoadingStacking,
   selectPoxInfo,
   selectStackerInfo,
+  selectStackingError,
 } from '@store/stacking';
 import BigNumber from 'bignumber.js';
 
@@ -50,6 +51,7 @@ export enum HomeCardState {
   StackingPreCycle,
   StackingActive,
   PostStacking,
+  StackingError,
 }
 
 const selectLoadingCardResources = createSelector(
@@ -67,13 +69,27 @@ const selectMeetsMinStackingThreshold = createSelector(
   }
 );
 
+const selectShowErrorCard = createSelector(selectStackingError, state => {
+  const errorToCheck = [state.blockTimeInfo, state.coreNodeInfo, state.poxInfo];
+  return errorToCheck.some(val => val === true);
+});
+
 export const selectHomeCardState = createSelector(
   selectLoadingCardResources,
   selectActiveStackingTxId,
   selectMeetsMinStackingThreshold,
   selectIsStackingCallPending,
   selectStackerInfo,
-  (loadingResources, activeStackingTxId, meetsMinThreshold, stackingCallPending, stackerInfo) => {
+  selectShowErrorCard,
+  (
+    loadingResources,
+    activeStackingTxId,
+    meetsMinThreshold,
+    stackingCallPending,
+    stackerInfo,
+    stackingErr
+  ) => {
+    if (stackingErr) return HomeCardState.StackingError;
     if (loadingResources) return HomeCardState.LoadingResources;
     if (!meetsMinThreshold) return HomeCardState.NotEnoughStx;
     if (stackingCallPending || typeof activeStackingTxId === 'string')

app/store/stacking/stacking.reducer.ts

@@ -39,7 +39,7 @@ export interface StackingState {
     'poxInfo' | 'coreNodeInfo' | 'blockTimeInfo' | 'stackerInfo',
     boolean
   >;
-  error: string | null;
+  errors: Record<'poxInfo' | 'coreNodeInfo' | 'blockTimeInfo' | 'stackerInfo', boolean>;
   contractCallTx: string | null;
   poxInfo: CoreNodePoxResponse | null;
   coreNodeInfo: CoreNodeInfoResponse | null;
@@ -54,7 +54,12 @@ const initialState: StackingState = {
     blockTimeInfo: false,
     stackerInfo: false,
   },
-  error: null,
+  errors: {
+    poxInfo: false,
+    coreNodeInfo: false,
+    blockTimeInfo: false,
+    stackerInfo: false,
+  },
   contractCallTx: null,
   poxInfo: null,
   coreNodeInfo: null,
@@ -79,33 +84,44 @@ export const stackingSlice = createSlice({
       action: PayloadAction<CoreNodeInfoResponse>
     ) => {
       state.initialRequestsComplete.coreNodeInfo = true;
+      state.errors.coreNodeInfo = false;
       state.coreNodeInfo = action.payload;
     },
+    [fetchCoreDetails.rejected.toString()]: state => {
+      state.errors.coreNodeInfo = true;
+    },
     [fetchBlockTimeInfo.fulfilled.toString()]: (
       state,
       action: PayloadAction<NetworkBlockTimesResponse>
     ) => {
+      state.errors.blockTimeInfo = false;
       state.initialRequestsComplete.blockTimeInfo = true;
       state.blockTimeInfo = action.payload;
     },
+    [fetchBlockTimeInfo.rejected.toString()]: state => {
+      state.errors.blockTimeInfo = true;
+    },
     [fetchStackerInfo.fulfilled.toString()]: (
       state,
       action: PayloadAction<Required<StackerInfo>>
     ) => {
       state.initialRequestsComplete.stackerInfo = true;
       if ('error' in action.payload || !action.payload.stacked) {
-        state.error = 'There was an error stacking';
+        state.errors.stackerInfo = true;
         return;
       }
       state.stackerInfo = action.payload.details;
-      state.error = null;
+      state.errors.stackerInfo = false;
     },
     [fetchStackerInfo.rejected.toString()]: state => {
       state.initialRequestsComplete.stackerInfo = true;
     },
     [activeStackingTx.toString()]: (state, action: PayloadAction<{ txId: string }>) => {
       state.contractCallTx = action.payload.txId;
     },
+    // [activeStackingTx]: (state, action: PayloadAction<{ txId: string }>) => {
+    //   state.contractCallTx = action.payload.txId;
+    // },
     [removeStackingTx.toString()]: state => {
       state.contractCallTx = null;
     },
@@ -121,7 +137,7 @@ export const selectBlockTimeInfo = createSelector(
   state => state.blockTimeInfo
 );
 
-export const selectStackingError = createSelector(selectStackingState, state => state.error);
+export const selectStackingError = createSelector(selectStackingState, state => state.errors);
 
 export const selectLoadingStacking = createSelector(
   selectStackingState,