fix: feedback

Author: foodaka

src/locales/el/messages.js

@@ -37,6 +37,10 @@ msgstr "Save with sGHO"
 msgid "Aave Labs does not guarantee the program and accepts no liability."
 msgstr "Aave Labs does not guarantee the program and accepts no liability."
 
+#: src/modules/reserve-overview/AddTokenDropdown.tsx
+msgid "Savings GHO token"
+msgstr "Savings GHO token"
+
 #: src/modules/sGho/SavingsGhoCard.tsx
 msgid "Deposit GHO and earn up to <0>{0}%</0> APR"
 msgstr "Deposit GHO and earn up to <0>{0}%</0> APR"

src/locales/en/messages.js

@@ -165,7 +165,7 @@ export const SavingsGhoBanner = ({ reserve }: GhoBannerProps) => {
           variant="contained"
           component={Link}
           size="medium"
-          href={ROUTES.reserveOverview(reserve?.underlyingAsset || '', currentMarket)}
+          href={ROUTES.sGHO}
           sx={{
             mr: 8,
             ml: isMd2 ? 12 : 0,

src/locales/en/messages.po

@@ -18,6 +18,8 @@ interface AddTokenDropdownProps {
   currentChainId: number;
   connectedChainId: number;
   hideAToken?: boolean;
+  isSGHO?: boolean;
+  sGHOTokenAddress?: string;
 }
 
 export const AddTokenDropdown = ({
@@ -28,11 +30,14 @@ export const AddTokenDropdown = ({
   currentChainId,
   connectedChainId,
   hideAToken,
+  isSGHO,
+  sGHOTokenAddress,
 }: AddTokenDropdownProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [changingNetwork, setChangingNetwork] = useState(false);
   const [underlyingBase64, setUnderlyingBase64] = useState('');
   const [aTokenBase64, setATokenBase64] = useState('');
+  const [sGHOBase64, setSGHOBase64] = useState('');
   const open = Boolean(anchorEl);
   const trackEvent = useRootStore((store) => store.trackEvent);
 
@@ -87,6 +92,7 @@ export const AddTokenDropdown = ({
               aToken={true}
             />
           )}
+          {isSGHO && <Base64Token symbol="sgho" onImageGenerated={setSGHOBase64} aToken={false} />}
         </>
       )}
       <Box onClick={handleClick}>
@@ -197,6 +203,45 @@ export const AddTokenDropdown = ({
             </MenuItem>
           </Box>
         )}
+        {isSGHO && sGHOTokenAddress && (
+          <Box>
+            <Box sx={{ px: 4, pt: 3, pb: 2 }}>
+              <Typography variant="secondary12" color="text.secondary">
+                <Trans>Savings GHO token</Trans>
+              </Typography>
+            </Box>
+            <MenuItem
+              key="sgho"
+              value="sgho"
+              onClick={() => {
+                if (currentChainId !== connectedChainId) {
+                  switchNetwork(currentChainId).then(() => {
+                    setChangingNetwork(true);
+                  });
+                } else {
+                  trackEvent(RESERVE_DETAILS.ADD_TO_WALLET, {
+                    type: 'Savings GHO token',
+                    asset: sGHOTokenAddress,
+                    assetName: 'sGHO',
+                  });
+
+                  addERC20Token({
+                    address: sGHOTokenAddress,
+                    decimals: poolReserve.decimals,
+                    symbol: `stkGHO`, // TODO: change to sGHO when upgraded contract is deployed
+                    image: sGHOBase64,
+                  });
+                }
+                handleClose();
+              }}
+            >
+              <TokenIcon symbol="sgho" sx={{ fontSize: '20px' }} />
+              <Typography variant="subheader1" sx={{ ml: 3 }} noWrap data-cy={`assetName`}>
+                sGHO
+              </Typography>
+            </MenuItem>
+          </Box>
+        )}
       </Menu>
     </>
   );

src/locales/es/messages.js

@@ -15,12 +15,14 @@ interface TokenLinkDropdownProps {
   poolReserve: ComputedReserveData;
   downToSM: boolean;
   hideAToken?: boolean;
+  hideVariableDebtToken?: boolean;
 }
 
 export const TokenLinkDropdown = ({
   poolReserve,
   downToSM,
   hideAToken,
+  hideVariableDebtToken,
 }: TokenLinkDropdownProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -48,7 +50,8 @@ export const TokenLinkDropdown = ({
   }
 
   const showVariableDebtToken =
-    poolReserve.borrowingEnabled || Number(poolReserve.totalVariableDebt) > 0;
+    !hideVariableDebtToken &&
+    (poolReserve.borrowingEnabled || Number(poolReserve.totalVariableDebt) > 0);
 
   return (
     <>

src/locales/fr/messages.js

@@ -1,18 +1,23 @@
+import { AaveSafetyModule } from '@bgd-labs/aave-address-book';
 import { Trans } from '@lingui/macro';
 import { Box, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useEffect } from 'react';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
 import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel';
+import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { StakeTokenFormatted, useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
 import { useStakeTokenAPR } from 'src/hooks/useStakeTokenAPR';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
 import { MarketDataType } from 'src/ui-config/marketsConfig';
 import { GENERAL } from 'src/utils/events';
 import { useShallow } from 'zustand/shallow';
 
 import { Link } from '../../components/primitives/Link';
 import { TopInfoPanelItem } from '../../components/TopInfoPanel/TopInfoPanelItem';
+import { AddTokenDropdown } from '../reserve-overview/AddTokenDropdown';
+import { TokenLinkDropdown } from '../reserve-overview/TokenLinkDropdown';
 
 export const SGHOHeader: React.FC = () => {
   const theme = useTheme();
@@ -107,6 +112,19 @@ const SGhoHeaderUserDetails = ({
   stkGho: StakeTokenFormatted;
 }) => {
   const { data: stakeAPR, isLoading: isLoadingStakeAPR } = useStakeTokenAPR();
+  const { reserves } = useAppDataContext();
+
+  const {
+    addERC20Token,
+    switchNetwork,
+    chainId: connectedChainId,
+    currentAccount,
+  } = useWeb3Context();
+  const poolReserve = reserves.find((reserve) => reserve.symbol === 'GHO');
+  const theme = useTheme();
+  const [currentChainId] = useRootStore(useShallow((state) => [state.currentChainId]));
+
+  const downToSM = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
     <>
@@ -156,6 +174,32 @@ const SGhoHeaderUserDetails = ({
           visibleDecimals={2}
         />
       </TopInfoPanelItem>
+
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', height: '40px' }}>
+        {poolReserve && (
+          <>
+            <TokenLinkDropdown
+              poolReserve={poolReserve}
+              downToSM={downToSM}
+              hideAToken={true}
+              hideVariableDebtToken={true}
+            />
+            {currentAccount && (
+              <AddTokenDropdown
+                poolReserve={poolReserve}
+                downToSM={downToSM}
+                switchNetwork={switchNetwork}
+                addERC20Token={addERC20Token}
+                currentChainId={currentChainId}
+                connectedChainId={connectedChainId}
+                hideAToken={true}
+                isSGHO={true}
+                sGHOTokenAddress={AaveSafetyModule.STK_GHO}
+              />
+            )}
+          </>
+        )}
+      </Box>
     </>
   );
 };