add staking banner and fixed epoch est date

Author: lyaunzbe

ts/components/banner.tsx

@@ -16,6 +16,8 @@ interface Props {
     mainCta?: CTAButton;
     secondaryCta?: CTAButton;
     theme?: IThemeInterface;
+    padding?: string;
+    mainCtaCentered?: boolean;
 }
 
 interface CTAButton {
@@ -30,13 +32,15 @@ interface BorderProps {
 }
 
 export const Banner: React.StatelessComponent<Props> = (props: Props) => {
-    const { heading, subline, mainCta, secondaryCta, customCta } = props;
+    const { heading, subline, mainCta, secondaryCta, customCta, padding, mainCtaCentered } = props;
+    console.log(padding);
     return (
         <CustomSection
             bgColor={colors.brandDark}
             isFlex={true}
             flexBreakpoint="900px"
-            paddingMobile="120px 0"
+            padding={`${padding ? padding : '120px'} 0`}
+            paddingMobile={`${padding ? padding : '120px'} 0`}
             alignItems="center"
         >
             <Border />
@@ -52,10 +56,23 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                 )}
             </Column>
             <ColumnCta>
+                {mainCta && mainCtaCentered && (
+                    <ButtonWrapCentered>
+                        <Button
+                            color={colors.white}
+                            isTransparent={false}
+                            href={mainCta.href}
+                            onClick={mainCta.onClick}
+                            target={mainCta.shouldOpenInNewTab ? '_blank' : ''}
+                        >
+                            {mainCta.text}
+                        </Button>
+                    </ButtonWrapCentered>
+                )}
                 <ButtonWrap>
                     {customCta}
 
-                    {mainCta && (
+                    {mainCta && !mainCtaCentered && (
                         <Button
                             color={colors.white}
                             isTransparent={false}
@@ -106,6 +123,7 @@ const CustomSection = styled(Section)`
 
 const ColumnCta = styled(Column)`
     flex-shrink: 0;
+    display: flex;
 `;
 
 const CustomHeading = styled.h2`
@@ -141,6 +159,28 @@ const ButtonWrap = styled.div`
     }
 `;
 
+const ButtonWrapCentered = styled.div`
+    align-self: center;
+
+    @media (min-width: 768px) {
+        * + * {
+            margin-left: 15px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        a,
+        button {
+            display: block;
+            width: 220px;
+        }
+
+        * + * {
+            margin-top: 15px;
+        }
+    }
+`;
+
 // Note let's refactor this
 // is it absolutely necessary to have a stateless component
 // to pass props down into the styled icon?

ts/components/staking/current_epoch_overview.tsx

@@ -71,8 +71,8 @@ export const CurrentEpochOverview: React.FC<CurrentEpochOverviewProps> = ({
                 <Explanation>ZRX Staked</Explanation>
             </OverviewItem>
             <OverviewItem>
-                <Metric>{stakingUtils.getTimeToEpochDate(nextEpochStartDate)}</Metric>
-                <Explanation>Epoch ends</Explanation>
+                <Metric>{stakingUtils.getTimeToEpochDate(new Date(1621357200 * 1000))}</Metric>
+                <Explanation>Epoch ends (est)</Explanation>
             </OverviewItem>
             <OverviewItem>
                 <Metric>{currentEpochRewards ? formatEther(currentEpochRewards, { decimals: 2 }).full : '-'}</Metric>

ts/pages/account/dashboard.tsx

@@ -1,4 +1,6 @@
 import { BigNumber, hexUtils, logUtils } from '@0x/utils';
+import { Banner } from 'ts/components/banner';
+
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { DialogContent, DialogOverlay } from '@reach/dialog';
 import '@reach/dialog/styles.css';
@@ -446,6 +448,22 @@ export const Account: React.FC<AccountProps> = () => {
     return (
         <StakingPageLayout title="0x Staking | Account">
             <HeaderWrapper>
+                <BannerWrapper>
+                    <Banner
+                        mainCtaCentered={true}
+                        padding={'50px'}
+                        heading={`Staking Notice`}
+                        subline="The staking system is currently paused until an issue with the finalization logic is resolved. All user funds are safe. Thank you!"
+                        mainCta={{
+                            text: 'Learn More',
+                            onClick: () => {
+                                window.location.href =
+                                    'https://gov.0x.org/t/0x-staking-system-epoch-67-finalization/882';
+                            },
+                        }}
+                    />
+                </BannerWrapper>
+
                 <Inner>
                     {account && account.address && <AccountDetail userEthAddress={account.address} />}
                     <Figures>
@@ -924,3 +942,7 @@ const StyledDialogContent = styled(DialogContent)`
 const StyledParagraph = styled(Paragraph)`
     margin-top: 50px;
 `;
+
+const BannerWrapper = styled.div`
+    margin-bottom: 50px;
+`;

ts/pages/staking/home.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 import { State } from 'ts/redux/reducer';
+import { Banner } from 'ts/components/banner';
 
 import { Button } from 'ts/components/button';
 import { CFLMetrics } from 'ts/pages/cfl/cfl_metrics';
@@ -109,6 +110,18 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
 
     return (
         <StakingPageLayout isHome={true} title="0x Staking">
+            <Banner
+                mainCtaCentered={true}
+                padding={'50px'}
+                heading={`Staking Notice`}
+                subline="The staking system is currently paused until an issue with the finalization logic is resolved. All user funds are safe. Thank you!"
+                mainCta={{
+                    text: 'Learn More',
+                    onClick: () => {
+                        window.location.href = 'https://gov.0x.org/t/0x-staking-system-epoch-67-finalization/882';
+                    },
+                }}
+            />
             <StakingHero
                 title={
                     <div>