repurposing governance error modal (interim) for not enough eth error

Author: lyaunzbe

ts/pages/account/dashboard.tsx

@@ -10,6 +10,7 @@ import styled from 'styled-components';
 import { Button } from 'ts/components/button';
 import { CallToAction } from 'ts/components/call_to_action';
 import { ChangePoolDialog } from 'ts/components/staking/change_pool_dialog';
+import { ErrorModal } from 'ts/pages/governance/error_modal';
 import { StakingPageLayout } from 'ts/components/staking/layout/staking_page_layout';
 import { RemoveStakeDialog } from 'ts/components/staking/remove_stake_dialog';
 import { Heading, Paragraph } from 'ts/components/text';
@@ -122,6 +123,8 @@ export const Account: React.FC<AccountProps> = () => {
     // NOTE: not yet implemented but left in for future reference
     const voteHistory: VoteHistory[] = [];
 
+    const [isErrorModalOpen, setErrorModalOpen] = React.useState(false);
+    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,7 +150,7 @@ 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(
+    const { stakingContract, unstake, withdrawStake, withdrawRewards, moveStake, currentEpochRewards, error: useStakeError } = useStake(
         networkId,
         providerState,
     );
@@ -389,6 +392,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 +433,6 @@ export const Account: React.FC<AccountProps> = () => {
     }
 
     const nextEpochStart = nextEpochStats && new Date(nextEpochStats.epochStart.timestamp);
-
     return (
         <StakingPageLayout title="0x Staking | Account">
             <HeaderWrapper>
@@ -770,6 +778,10 @@ 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({