Feat/sgho

.gitignore

@@ -44,6 +44,9 @@ package-lock.json
 .eslintcache
 .yarn-cache
 
+# TypeScript incremental build cache
+tsconfig.tsbuildinfo
+
 # IDE specific
 .idea
 .vscode

package.json

@@ -37,9 +37,9 @@
   "dependencies": {
     "@aave-dao/aave-address-book": "^4.49.3",
     "@aave/contract-helpers": "1.38.0",
-    "@aave/graphql": "^0.11.0",
+    "@aave/graphql": "0.12.0",
     "@aave/math-utils": "1.38.0",
-    "@aave/react": "^0.8.2",
+    "@aave/react": "0.9.0",
     "@amplitude/analytics-browser": "^2.13.0",
     "@cowprotocol/cow-sdk": "7.3.4",
     "@cowprotocol/sdk-ethers-v5-adapter": "0.3.5",

pages/sgho.page.tsx

@@ -1,26 +1,17 @@
-import { StakeUIUserData } from '@aave/contract-helpers/dist/esm/V3-uiStakeDataProvider-contract/types';
-import { AaveV3Ethereum } from '@aave-dao/aave-address-book';
-import { Trans } from '@lingui/macro';
-import { Box, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { useEffect } from 'react';
 import { ContentContainer } from 'src/components/ContentContainer';
-import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton';
-import { useWalletBalances } from 'src/hooks/app-data-provider/useWalletBalances';
-import { StakeTokenFormatted, useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
-import { useUserStakeUiData } from 'src/hooks/stake/useUserStakeUiData';
-import { useModalContext } from 'src/hooks/useModal';
+import { useSavingsMarketData } from 'src/hooks/useSavingsMarketData';
 import { MainLayout } from 'src/layouts/MainLayout';
-import { WalletBalance } from 'src/modules/reserve-overview/ReserveActions';
-import { SGHODepositPanel } from 'src/modules/sGho/SGhoDepositPanel';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
+import { SGhoCard } from 'src/modules/sGho/SGhoCard';
 import { SGHOHeader } from 'src/modules/sGho/SGhoHeader';
+import { YourInfoSidebar } from 'src/modules/sGho/YourInfoSidebar';
+import { StkGhoCard } from 'src/modules/stkGho/StkGhoCard';
 import { useRootStore } from 'src/store/root';
-import { CustomMarket } from 'src/ui-config/marketsConfig';
-import { SAFETY_MODULE } from 'src/utils/events';
 import { useShallow } from 'zustand/shallow';
 
-import { useWeb3Context } from '../src/libs/hooks/useWeb3Context';
-
 const SavingsGhoDepositModal = dynamic(() =>
   import('../src/components/transactions/SavingsGho/SavingsGhoDepositModal').then(
     (module) => module.SavingsGhoDepositModal
@@ -36,180 +27,60 @@ const StakeRewardClaimModal = dynamic(() =>
     (module) => module.StakeRewardClaimModal
   )
 );
+const SGhoVaultDepositModal = dynamic(() =>
+  import('../src/components/transactions/SGhoVault/SGhoVaultDepositModal').then(
+    (module) => module.SGhoVaultDepositModal
+  )
+);
+const SGhoVaultWithdrawModal = dynamic(() =>
+  import('../src/components/transactions/SGhoVault/SGhoVaultWithdrawModal').then(
+    (module) => module.SGhoVaultWithdrawModal
+  )
+);
 
 export default function SavingsGho() {
-  const { openSavingsGhoDeposit, openSavingsGhoWithdraw } = useModalContext();
-  const { currentAccount } = useWeb3Context();
   const [trackEvent, currentMarket, setCurrentMarket] = useRootStore(
     useShallow((store) => [store.trackEvent, store.currentMarket, store.setCurrentMarket])
   );
-  const currentMarketData = useRootStore((store) => store.currentMarketData);
-  const { breakpoints } = useTheme();
-  const downToXsm = useMediaQuery(breakpoints.down('xsm'));
-  const { data: stakeUserResult } = useUserStakeUiData(currentMarketData);
-
-  const { data: stakeGeneralResult } = useGeneralStakeUiData(currentMarketData);
+  const { marketKey } = useSavingsMarketData();
+  const { currentAccount } = useWeb3Context();
+  const isConnected = !!currentAccount;
 
-  // Automatically switch to mainnet if not already on mainnet
-  // since sGHO only exists on Ethereum mainnet
+  // Keep the global currentMarket in sync with the savings target so the rest
+  // of the app (wallet network checks, wallet balances, etc.) lines up with
+  // the chain our data hooks are querying.
   useEffect(() => {
-    if (currentMarket !== CustomMarket.proto_mainnet_v3) {
-      setCurrentMarket(CustomMarket.proto_mainnet_v3);
+    if (currentMarket !== marketKey) {
+      setCurrentMarket(marketKey);
     }
-  }, [currentMarket, setCurrentMarket]);
+  }, [currentMarket, marketKey, setCurrentMarket]);
 
   useEffect(() => {
     trackEvent('Page Viewed', {
       'Page Name': 'sGHO',
     });
   }, [trackEvent]);
 
-  let stkGho: StakeTokenFormatted | undefined;
-
-  if (stakeGeneralResult && Array.isArray(stakeGeneralResult)) {
-    [, , stkGho] = stakeGeneralResult;
-  }
-
-  let stkGhoUserData: StakeUIUserData | undefined;
-  if (stakeUserResult && Array.isArray(stakeUserResult)) {
-    [, , stkGhoUserData] = stakeUserResult;
-  }
-
   return (
     <>
       <SGHOHeader />
       <ContentContainer>
         <Box
           sx={{
             display: 'flex',
-            flexDirection: { xs: 'column', md: 'row' },
-            gap: { xs: 3, md: 0 },
-            alignItems: { xs: 'stretch', md: 'flex-start' },
+            flexDirection: { xs: 'column', mdlg: 'row' },
+            gap: 4,
+            alignItems: 'flex-start',
           }}
         >
-          <Paper
-            sx={{
-              pt: 4,
-              pb: { xs: 6, md: 20 },
-              px: downToXsm ? 4 : 6,
-              flex: 1,
-              width: { xs: '100%', md: 'auto' },
-            }}
-          >
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 6,
-                flexWrap: 'wrap',
-                mb: { xs: 4, md: 6 },
-              }}
-            >
-              <Box
-                sx={{
-                  mb: { xs: 4, md: 8 },
-                }}
-              >
-                <Typography variant="h3">
-                  <Trans>Savings GHO (sGHO)</Trans>
-                </Typography>
-              </Box>
-
-              <SGHODepositPanel
-                stakedToken="GHO"
-                stakeData={stkGho}
-                stakeUserData={stkGhoUserData}
-                onStakeAction={() => {
-                  trackEvent(SAFETY_MODULE.STAKE_SAFETY_MODULE, {
-                    action: SAFETY_MODULE.OPEN_STAKE_MODAL,
-                    asset: 'GHO',
-                    stakeType: 'Safety Module',
-                  });
-                  openSavingsGhoDeposit();
-                }}
-                onCooldownAction={() => {
-                  trackEvent(SAFETY_MODULE.STAKE_SAFETY_MODULE, {
-                    action: SAFETY_MODULE.OPEN_WITHDRAW_MODAL,
-                    asset: 'GHO',
-                    stakeType: 'Safety Module',
-                  });
-                  openSavingsGhoWithdraw();
-                }}
-                onUnstakeAction={() => {
-                  trackEvent(SAFETY_MODULE.STAKE_SAFETY_MODULE, {
-                    action: SAFETY_MODULE.OPEN_WITHDRAW_MODAL,
-                    asset: 'GHO',
-                    stakeType: 'Safety Module',
-                  });
-                  openSavingsGhoWithdraw();
-                }}
-              />
-            </Box>
-          </Paper>
-          {currentAccount ? <YourInfoGhoSection /> : <ConnectWallet />}
+          <SGhoCard />
+          {isConnected ? <StkGhoCard /> : <YourInfoSidebar />}
         </Box>
       </ContentContainer>
     </>
   );
 }
 
-const YourInfoGhoSection = () => {
-  const currentMarketData = useRootStore((store) => store.currentMarketData);
-  const { walletBalances } = useWalletBalances(currentMarketData);
-
-  const GHO_ADDRESS = AaveV3Ethereum.ASSETS.GHO.UNDERLYING;
-
-  const userGhoBalance = GHO_ADDRESS
-    ? walletBalances[GHO_ADDRESS.toLowerCase()] || { amount: '0', amountUSD: '0' }
-    : { amount: '0', amountUSD: '0' };
-
-  return (
-    <Paper
-      sx={{
-        pt: 4,
-        pb: { xs: 4, xsm: 6 },
-        px: { xs: 4, xsm: 6 },
-        minWidth: { md: '300px' },
-        ml: { md: 4 },
-        height: { md: '180px' },
-        display: { xs: 'none', md: 'block' },
-      }}
-    >
-      <Typography variant="h3" sx={{ mb: 6 }}>
-        Your Info
-      </Typography>
-      <WalletBalance balance={userGhoBalance.amount} symbol="GHO" marketTitle="GHO" />
-    </Paper>
-  );
-};
-
-const ConnectWallet = () => {
-  return (
-    <Paper
-      sx={{
-        pt: 4,
-        pb: { xs: 4, xsm: 6 },
-        px: { xs: 4, xsm: 6 },
-        minWidth: { xs: '100%', md: '300px' },
-        ml: { xs: 0, md: 4 },
-        height: { xs: 'auto', md: '180px' },
-        width: { xs: '100%', md: 'auto' },
-      }}
-    >
-      <>
-        <Typography variant="h3" sx={{ mb: { xs: 6, xsm: 10 } }}>
-          <Trans>Your info</Trans>
-        </Typography>
-        <Typography sx={{ mb: 6 }} color="text.secondary">
-          <Trans>Please connect a wallet to view your balance here.</Trans>
-        </Typography>
-        {}
-        <ConnectWalletButton />
-      </>
-    </Paper>
-  );
-};
-
 SavingsGho.getLayout = function getLayout(page: React.ReactElement) {
   return (
     <MainLayout>
@@ -218,6 +89,8 @@ SavingsGho.getLayout = function getLayout(page: React.ReactElement) {
       <SavingsGhoDepositModal />
       <SavingsGhoWithdrawModal />
       <StakeRewardClaimModal />
+      <SGhoVaultDepositModal />
+      <SGhoVaultWithdrawModal />
       {/** End of modals */}
     </MainLayout>
   );

src/components/SavingsCardSkeleton.tsx

@@ -0,0 +1,37 @@
+import { Box, Grid, Skeleton, Stack } from '@mui/material';
+
+interface SavingsCardSkeletonProps {
+  hasAccount?: boolean;
+}
+
+export const SavingsCardSkeleton = ({ hasAccount }: SavingsCardSkeletonProps) => {
+  return (
+    <Grid container spacing={{ xs: 1, md: 2 }} sx={{ mb: 4, minHeight: '600px' }}>
+      <Grid item xs={12}>
+        {hasAccount && (
+          <Box
+            sx={(theme) => ({
+              borderRadius: { xs: '8px', xsm: '6px' },
+              border: `1px solid ${theme.palette.divider}`,
+              p: 4,
+              mb: 4,
+              background: theme.palette.background.paper,
+            })}
+          >
+            <Stack spacing={3}>
+              <Skeleton variant="rectangular" width="100%" height={60} />
+            </Stack>
+          </Box>
+        )}
+
+        <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
+          <Skeleton variant="rectangular" width="100%" height={120} sx={{ borderRadius: 1 }} />
+        </Stack>
+
+        <Box sx={{ mt: 4 }}>
+          <Skeleton variant="rectangular" width="100%" height={200} sx={{ borderRadius: 1 }} />
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};