feat: umbrella (#2321)

Co-authored-by: Mark Grothe <[email protected]>
Co-authored-by: Joaquin Battilana <[email protected]>

Author: 3 people

cypress/e2e/3-stake-governance/stake.cy.ts

@@ -10,14 +10,6 @@ import {
 } from '../../support/steps/stake.steps';
 
 const testCases = [
-  {
-    asset: assets.staking.GHO,
-    amount: 5,
-    checkAmount: '5.00',
-    checkAmountFinal: '10.00',
-    tabValue: 'gho',
-    changeApproval: false,
-  },
   {
     asset: assets.staking.AAVE,
     amount: 5,
@@ -26,14 +18,6 @@ const testCases = [
     tabValue: 'aave',
     changeApproval: true,
   },
-  // {
-  //   asset: assets.staking.ABPT,
-  //   amount: 5,
-  //   checkAmount: '5.00',
-  //   checkAmountFinal: '10.00',
-  //   tabValue: 'bpt',
-  //   changeApproval: false,
-  // },
 ];
 
 testCases.forEach(

package.json

@@ -31,8 +31,8 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.33.3",
-    "@aave/math-utils": "1.33.3",
+    "@aave/contract-helpers": "1.34.0",
+    "@aave/math-utils": "1.34.0",
     "@amplitude/analytics-browser": "^2.13.0",
     "@bgd-labs/aave-address-book": "^4.22.1",
     "@cowprotocol/app-data": "^3.1.0",

pages/reserve-overview.page.tsx

@@ -1,5 +1,6 @@
 import { Trans } from '@lingui/macro';
 import { Box, Typography } from '@mui/material';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import StyledToggleButton from 'src/components/StyledToggleButton';
@@ -17,6 +18,30 @@ import { useRootStore } from 'src/store/root';
 
 import { ContentContainer } from '../src/components/ContentContainer';
 
+const SavingsGhoDepositModal = dynamic(() =>
+  import('../src/components/transactions/SavingsGho/SavingsGhoDepositModal').then(
+    (module) => module.SavingsGhoDepositModal
+  )
+);
+const SavingsGhoWithdrawModal = dynamic(() =>
+  import('../src/components/transactions/SavingsGho/SavingsGhoWithdrawModal').then(
+    (module) => module.SavingsGhoWithdrawModal
+  )
+);
+const StakeModal = dynamic(() =>
+  import('../src/components/transactions/Stake/StakeModal').then((module) => module.StakeModal)
+);
+const StakeCooldownModal = dynamic(() =>
+  import('../src/components/transactions/StakeCooldown/StakeCooldownModal').then(
+    (module) => module.StakeCooldownModal
+  )
+);
+const UnStakeModal = dynamic(() =>
+  import('../src/components/transactions/UnStake/UnStakeModal').then(
+    (module) => module.UnStakeModal
+  )
+);
+
 export default function ReserveOverview() {
   const router = useRouter();
   const { reserves } = useAppDataContext();
@@ -104,5 +129,14 @@ export default function ReserveOverview() {
 }
 
 ReserveOverview.getLayout = function getLayout(page: React.ReactElement) {
-  return <MainLayout>{page}</MainLayout>;
+  return (
+    <MainLayout>
+      {page}
+      <StakeModal />
+      <StakeCooldownModal />
+      <UnStakeModal />
+      <SavingsGhoDepositModal />
+      <SavingsGhoWithdrawModal />
+    </MainLayout>
+  );
 };

pages/staking.staking.tsx renamed to pages/safety-module.page.tsx

@@ -19,6 +19,7 @@ import { useModalContext } from 'src/hooks/useModal';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { GetABPToken } from 'src/modules/staking/GetABPToken';
 import { GhoDiscountProgram } from 'src/modules/staking/GhoDiscountProgram';
+import { GhoStakingPanel } from 'src/modules/staking/GhoStakingPanel';
 import { StakingHeader } from 'src/modules/staking/StakingHeader';
 import { StakingPanel } from 'src/modules/staking/StakingPanel';
 import { useRootStore } from 'src/store/root';
@@ -49,6 +50,16 @@ const UnStakeModal = dynamic(() =>
     (module) => module.UnStakeModal
   )
 );
+const SavingsGhoDepositModal = dynamic(() =>
+  import('../src/components/transactions/SavingsGho/SavingsGhoDepositModal').then(
+    (module) => module.SavingsGhoDepositModal
+  )
+);
+const SavingsGhoWithdrawModal = dynamic(() =>
+  import('../src/components/transactions/SavingsGho/SavingsGhoWithdrawModal').then(
+    (module) => module.SavingsGhoWithdrawModal
+  )
+);
 
 export default function Staking() {
   const { currentAccount } = useWeb3Context();
@@ -83,6 +94,8 @@ export default function Staking() {
     openStakeRewardsClaim,
     openStakeRewardsRestakeClaim,
     openStakingMigrate,
+    openSavingsGhoDeposit,
+    openSavingsGhoWithdraw,
   } = useModalContext();
 
   const [mode, setMode] = useState<Stake>(Stake.aave);
@@ -97,7 +110,7 @@ export default function Staking() {
 
   const tvl = {
     'Staked Aave': Number(stkAave?.totalSupplyUSDFormatted || '0'),
-    'Staked GHO': Number(stkGho?.totalSupplyUSDFormatted || '0'),
+    // 'Staked GHO': Number(stkGho?.totalSupplyUSDFormatted || '0'),
     'Staked ABPT': Number(stkBpt?.totalSupplyUSDFormatted || '0'),
     'Staked ABPT V2': Number(stkBptV2?.totalSupplyUSDFormatted || '0'),
   };
@@ -149,7 +162,7 @@ export default function Staking() {
                 </StyledToggleButton>
                 <StyledToggleButton value="gho" disabled={mode === 'gho'}>
                   <Typography variant="subheader1">
-                    <Trans>Stake GHO</Trans>
+                    <Trans>sGHO</Trans>
                   </Typography>
                 </StyledToggleButton>
                 <StyledToggleButton value="bpt" disabled={mode === 'bpt'}>
@@ -213,16 +226,16 @@ export default function Staking() {
                 lg={6}
                 sx={{ display: { xs: !isStkGho ? 'none' : 'block', lg: 'block' } }}
               >
-                <StakingPanel
-                  stakeTitle="GHO"
+                <GhoStakingPanel
+                  stakeTitle="sGHO (formerly stkGHO)"
                   stakedToken="GHO"
+                  icon="sgho"
                   maxSlash={stkGho?.maxSlashablePercentageFormatted || '0'}
-                  icon="gho"
                   stakeData={stkGho}
                   stakeUserData={stkGhoUserData}
-                  onStakeAction={() => openStake(Stake.gho, 'GHO')}
-                  onCooldownAction={() => openStakeCooldown(Stake.gho, 'GHO')}
-                  onUnstakeAction={() => openUnstake(Stake.gho, 'GHO')}
+                  onStakeAction={() => openSavingsGhoDeposit()}
+                  onCooldownAction={() => openSavingsGhoWithdraw()}
+                  onUnstakeAction={() => openSavingsGhoWithdraw()}
                   onStakeRewardClaimAction={() => openStakeRewardsClaim(Stake.gho, 'AAVE')}
                 />
               </Grid>
@@ -344,6 +357,8 @@ Staking.getLayout = function getLayout(page: React.ReactElement) {
       <UnStakeModal />
       <StakeRewardClaimModal />
       <StakeRewardClaimRestakeModal />
+      <SavingsGhoDepositModal />
+      <SavingsGhoWithdrawModal />
       {/** End of modals */}
     </MainLayout>
   );

pages/staking.page.tsx

@@ -0,0 +1,60 @@
+import dynamic from 'next/dynamic';
+import { ContentContainer } from 'src/components/ContentContainer';
+import { MainLayout } from 'src/layouts/MainLayout';
+import { UmbrellaAssetsListContainer } from 'src/modules/umbrella/StakeAssets/UmbrellaAssetsListContainer';
+import { UmrellaAssetsDefaultListContainer } from 'src/modules/umbrella/UmbrellaAssetsDefault';
+import { UmbrellaHeader } from 'src/modules/umbrella/UmbrellaHeader';
+
+import { useWeb3Context } from '../src/libs/hooks/useWeb3Context';
+
+const UmbrellaStakeModal = dynamic(() =>
+  import('../src/modules/umbrella/UmbrellaModal').then((module) => module.UmbrellaModal)
+);
+const StakeCooldownModal = dynamic(() =>
+  import('../src/modules/umbrella/StakeCooldownModal').then((module) => module.StakeCooldownModal)
+);
+const StakeRewardClaimModal = dynamic(() =>
+  import('../src/components/transactions/StakeRewardClaim/StakeRewardClaimModal').then(
+    (module) => module.StakeRewardClaimModal
+  )
+);
+const StakeRewardClaimRestakeModal = dynamic(() =>
+  import(
+    '../src/components/transactions/StakeRewardClaimRestake/StakeRewardClaimRestakeModal'
+  ).then((module) => module.StakeRewardClaimRestakeModal)
+);
+const UnStakeModal = dynamic(() =>
+  import('../src/modules/umbrella/UnstakeModal').then((module) => module.UnStakeModal)
+);
+const UmbrellaClaimModal = dynamic(() =>
+  import('../src/modules/umbrella/UmbrellaClaimModal').then((module) => module.UmbrellaClaimModal)
+);
+
+export default function UmbrellaStaking() {
+  const { currentAccount } = useWeb3Context();
+
+  return (
+    <>
+      <UmbrellaHeader />
+      <ContentContainer>
+        {currentAccount ? <UmbrellaAssetsListContainer /> : <UmrellaAssetsDefaultListContainer />}
+      </ContentContainer>
+    </>
+  );
+}
+
+UmbrellaStaking.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <MainLayout>
+      {page}
+      {/** Modals */}
+      <UmbrellaStakeModal />
+      <StakeCooldownModal />
+      <UnStakeModal />
+      <StakeRewardClaimModal />
+      <StakeRewardClaimRestakeModal />
+      <UmbrellaClaimModal />
+      {/** End of modals */}
+    </MainLayout>
+  );
+};

public/icons/tokens/sgho.svg

@@ -0,0 +1,37 @@
+import { Trans } from '@lingui/macro';
+
+function secondsToDHMS(seconds: number) {
+  const d = Math.floor(seconds / (3600 * 24));
+  const h = Math.floor((seconds % (3600 * 24)) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  return { d, h, m, s };
+}
+
+export function SecondsToString({ seconds }: { seconds: number }) {
+  const { d, h, m, s } = secondsToDHMS(seconds);
+  return (
+    <>
+      {d !== 0 && (
+        <span>
+          <Trans>{d}d</Trans>
+        </span>
+      )}
+      {h !== 0 && (
+        <span>
+          <Trans>{h}h</Trans>
+        </span>
+      )}
+      {m !== 0 && (
+        <span>
+          <Trans>{m}m</Trans>
+        </span>
+      )}
+      {s !== 0 && (
+        <span>
+          <Trans>{s}s</Trans>
+        </span>
+      )}
+    </>
+  );
+}

public/icons/tokens/stkgho.svg

@@ -5,8 +5,13 @@ import { GENERAL } from 'src/utils/events';
 
 import { Link } from '../primitives/Link';
 import { Warning } from '../primitives/Warning';
+import { SecondsToString } from '../SecondsToString';
+
+const TWENTY_DAYS = 20 * 24 * 60 * 60;
+
+export const CooldownWarning = ({ cooldownSeconds }: { cooldownSeconds?: number }) => {
+  const cooldownTime = cooldownSeconds || TWENTY_DAYS;
 
-export const CooldownWarning = () => {
   const trackEvent = useRootStore((store) => store.trackEvent);
   return (
     <Warning severity="warning" sx={{ '.MuiAlert-message': { p: 0 }, mb: 6 }}>
@@ -15,9 +20,10 @@ export const CooldownWarning = () => {
       </Typography>
       <Typography variant="caption">
         <Trans>
-          The cooldown period is the time required prior to unstaking your tokens (20 days). You can
-          only withdraw your assets from the Security Module after the cooldown period and within
-          the unstake window.
+          The cooldown period is the time required prior to unstaking your tokens (
+          <SecondsToString seconds={cooldownTime} />
+          ). You can only withdraw your assets from the Security Module after the cooldown period
+          and within the unstake window.{' '}
           <Link
             href="https://docs.aave.com/faq/migration-and-staking"
             fontWeight={500}