Listen to staking loading states for success page UI

Author: shad-k

ts/components/governance/wizard_flow.tsx

@@ -1,12 +1,15 @@
+import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
 import React from 'react';
 import styled from 'styled-components';
 
 import { Button } from 'ts/components/button';
 import { ChangePoolDialog } from 'ts/components/staking/change_pool_dialog';
+import { ErrorButton } from 'ts/components/staking/wizard/wizard_flow';
 import { generateUniqueId, Jazzicon } from 'ts/components/ui/jazzicon';
+import { UseStakeHookResult } from 'ts/hooks/use_stake';
 import { colors } from 'ts/style/colors';
-import { PoolWithStats } from 'ts/types';
+import { PoolWithStats, TransactionLoadingState } from 'ts/types';
 import { DEFAULT_POOL_ID } from 'ts/utils/configs';
 
 interface IVotingPowerInputProps {
@@ -20,6 +23,8 @@ interface IVotingPowerInputProps {
 
 interface IRegistrationSuccess {
     nextEpochStart: Date;
+    stake: UseStakeHookResult;
+    retryFlowZRXAmount: number;
 }
 
 const ConnectWalletButton = styled(Button)``;
@@ -270,23 +275,53 @@ const MessageList = styled.ul`
     }
 `;
 
-export const RegistrationSuccess: React.FC<IRegistrationSuccess> = ({ nextEpochStart }) => {
+const LoaderWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const RegistrationSuccess: React.FC<IRegistrationSuccess> = ({ nextEpochStart, stake, retryFlowZRXAmount }) => {
     const nextEpochMoment = moment(nextEpochStart);
     const todayMoment = moment();
     const daysToNextEpoch = nextEpochMoment.diff(todayMoment, 'days');
     return (
         <SuccessContainer>
-            <Header>Your voting power is now registered</Header>
-            <MessageList>
-                <li>
-                    <strong>Your tokens are now locked.</strong>
-                    Unlocking will be available in {daysToNextEpoch} days
-                </li>
-                <li>
-                    <strong>Additional tip</strong>
-                    Unlocking will be available in {daysToNextEpoch} days
-                </li>
-            </MessageList>
+            {stake.loadingState === TransactionLoadingState.Success ? (
+                <>
+                    <Header>Your voting power is now registered</Header>
+                    <MessageList>
+                        <li>
+                            <strong>Your tokens are now locked.</strong>
+                            Unlocking will be available in {daysToNextEpoch} days
+                        </li>
+                        <li>
+                            <strong>Additional tip</strong>
+                            Unlocking will be available in {daysToNextEpoch} days
+                        </li>
+                    </MessageList>
+                </>
+            ) : stake.loadingState === TransactionLoadingState.Failed ? (
+                <ErrorButton
+                    message={'Transaction aborted'}
+                    secondaryButtonText={'Retry'}
+                    onClose={() => {
+                        /*noop*/
+                    }}
+                    onSecondaryClick={() =>
+                        stake.depositAndStake([
+                            {
+                                poolId: DEFAULT_POOL_ID,
+                                zrxAmount: retryFlowZRXAmount,
+                            },
+                        ])
+                    }
+                />
+            ) : (
+                <LoaderWrapper>
+                    <CircularProgress size={40} thickness={2} color={colors.brandLight} />
+                </LoaderWrapper>
+            )}
         </SuccessContainer>
     );
 };

ts/components/staking/wizard/wizard_flow.tsx

@@ -201,7 +201,7 @@ const NumberRound = styled.span`
     border: 1px solid #f6f6f6;
 `;
 
-const ErrorButton: React.FC<ErrorButtonProps> = (props) => {
+export const ErrorButton: React.FC<ErrorButtonProps> = (props) => {
     const { onSecondaryClick, message, secondaryButtonText } = props;
     return (
         <ErrorButtonContainer>

ts/pages/governance/register.tsx

@@ -46,6 +46,7 @@ export const RegisterWizard: React.FC<IRegisterWizardProps> = (props) => {
         pool: undefined,
         zrxAmount: undefined,
     });
+    const [retryFlowZRXAmount, setRetryFlowZRXAmount] = React.useState<number>();
     const [nextEpochStats, setNextEpochStats] = React.useState<Epoch | undefined>(undefined);
     const stake = useStake(networkId, providerState);
     const [shouldShowDecisionScreen, setShowDecisionScreen] = React.useState<boolean>(true);
@@ -90,6 +91,7 @@ export const RegisterWizard: React.FC<IRegisterWizardProps> = (props) => {
                     zrxAmount,
                 },
             ]);
+            setRetryFlowZRXAmount(zrxAmount);
             next(RegisterRouterSteps.Success);
         }
     };
@@ -139,7 +141,11 @@ export const RegisterWizard: React.FC<IRegisterWizardProps> = (props) => {
                                     />
                                 )}
                                 {currentStep === RegisterRouterSteps.Success && (
-                                    <RegistrationSuccess nextEpochStart={nextEpochStart} />
+                                    <RegistrationSuccess
+                                        nextEpochStart={nextEpochStart}
+                                        stake={stake}
+                                        retryFlowZRXAmount={retryFlowZRXAmount}
+                                    />
                                 )}
                             </>
                         }