Merge pull request #381 from 0xProject/hotfix/not-enough-eth

[Hotfix] Not Enough ETH

Author: lyaunzbe

ts/pages/account/dashboard.tsx

@@ -28,6 +28,7 @@ import {
     AccountSelfVotingPowerOverview,
     AccountVotingPowerOverview,
 } from 'ts/pages/account/account_voting_power_overview';
+import { ErrorModal } from 'ts/pages/governance/error_modal';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
 import { colors } from 'ts/style/colors';
@@ -122,6 +123,7 @@ export const Account: React.FC<AccountProps> = () => {
     // NOTE: not yet implemented but left in for future reference
     const voteHistory: VoteHistory[] = [];
 
+    const [stakingError, setStakingError] = React.useState<Error | undefined>(undefined);
     const [isApplyModalOpen, toggleApplyModal] = React.useState(false);
     const [changePoolDetails, setChangePoolDetails] = React.useState<PoolDetails | undefined>(undefined);
     const [removeStakePoolDetails, setRemoveStakePoolDetails] = React.useState<PoolDetails | undefined>(undefined);
@@ -147,10 +149,15 @@ export const Account: React.FC<AccountProps> = () => {
     const [pendingUnstakePoolSet, setPendingUnstakePoolSet] = React.useState<Set<string>>(new Set());
 
     const apiClient = useAPIClient(networkId);
-    const { stakingContract, unstake, withdrawStake, withdrawRewards, moveStake, currentEpochRewards } = useStake(
-        networkId,
-        providerState,
-    );
+    const {
+        stakingContract,
+        unstake,
+        withdrawStake,
+        withdrawRewards,
+        moveStake,
+        currentEpochRewards,
+        error: useStakeError,
+    } = useStake(networkId, providerState);
 
     const hasDataLoaded = () => Boolean(delegatorData && poolWithStatsMap && availableRewardsMap);
     const hasRewards = () => Boolean(allTimeRewards.isGreaterThan(0) || expectedCurrentEpochRewards.isGreaterThan(0));
@@ -389,6 +396,12 @@ export const Account: React.FC<AccountProps> = () => {
         );
     }, [currentEpochStakeMap, nextEpochStakeMap, delegatorData]);
 
+    React.useEffect(() => {
+        if (useStakeError) {
+            setStakingError(useStakeError);
+        }
+    }, [useStakeError]);
+
     const accountLoaded = account && account.address;
 
     if (!accountLoaded) {
@@ -424,7 +437,6 @@ export const Account: React.FC<AccountProps> = () => {
     }
 
     const nextEpochStart = nextEpochStats && new Date(nextEpochStats.epochStart.timestamp);
-
     return (
         <StakingPageLayout title="0x Staking | Account">
             <HeaderWrapper>
@@ -770,6 +782,16 @@ export const Account: React.FC<AccountProps> = () => {
                     });
                 }}
             />
+            <ErrorModal
+                isOpen={Boolean(stakingError)}
+                text={'More ETH is required to complete this transaction. Fund your wallet and try again.'}
+                heading={'Insufficient ETH'}
+                buttonText={'Dismiss'}
+                onClose={() => {
+                    setStakingError(undefined);
+                }}
+            />
+
             <DialogOverlay
                 style={{ background: 'rgba(0, 0, 0, 0.75)', zIndex: 30 }}
                 isOpen={shouldOpenStakeDecisionModal}

ts/pages/governance/error_modal.tsx

@@ -46,7 +46,7 @@ ErrorModal.defaultProps = {
 };
 
 const Wrapper = styled.div<ErrorModalProps>`
-    position: absolute;
+    position: fixed;
     background-color: rgba(0, 0, 0, 0.75);
     display: flex;
     top: 0;
@@ -55,6 +55,7 @@ const Wrapper = styled.div<ErrorModalProps>`
     bottom: 0;
     opacity: 0;
     visibility: hidden;
+    z-index: 30;
 
     ${(props) =>
         props.isOpen &&
@@ -69,7 +70,6 @@ const Inner = styled.div`
     background-color: #f6f6f6;
     padding: 30px 30px;
     width: 440px;
-    height: 440px;
     text-align: center;
 `;
 
@@ -79,7 +79,6 @@ const ErrorBox = styled.div`
     padding: 18px 30px;
     margin-bottom: 30px;
     overflow: auto;
-    max-height: 95px;
 `;
 
 const Text = styled(Paragraph).attrs({