Skip to content

Commit 77c99f2

Browse files
foodakafoodaka
committed
fix: remove sgho from safety module and fix looading states
1 parent 7c87f4c commit 77c99f2

File tree

3 files changed

+113
-15
lines changed

3 files changed

+113
-15
lines changed

‎pages/safety-module.page.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { useUserStakeUiData } from 'src/hooks/stake/useUserStakeUiData';
1818
import { useModalContext } from 'src/hooks/useModal';
1919
import { MainLayout } from 'src/layouts/MainLayout';
2020
import { GetABPToken } from 'src/modules/staking/GetABPToken';
21-
import { GhoStakingPanel } from 'src/modules/staking/GhoStakingPanel';
21+
// import { GhoStakingPanel } from 'src/modules/staking/GhoStakingPanel';
2222
import { StakingHeader } from 'src/modules/staking/StakingHeader';
2323
import { StakingPanel } from 'src/modules/staking/StakingPanel';
2424
import { useRootStore } from 'src/store/root';
@@ -81,10 +81,9 @@ export default function Staking() {
8181

8282
let stkAaveUserData: StakeUIUserData | undefined;
8383
let stkBptUserData: StakeUIUserData | undefined;
84-
let stkGhoUserData: StakeUIUserData | undefined;
8584
let stkBptV2UserData: StakeUIUserData | undefined;
8685
if (stakeUserResult && Array.isArray(stakeUserResult)) {
87-
[stkAaveUserData, stkBptUserData, stkGhoUserData, stkBptV2UserData] = stakeUserResult;
86+
[stkAaveUserData, stkBptUserData, , stkBptV2UserData] = stakeUserResult;
8887
}
8988

9089
const {
@@ -94,8 +93,8 @@ export default function Staking() {
9493
openStakeRewardsClaim,
9594
openStakeRewardsRestakeClaim,
9695
openStakingMigrate,
97-
openSavingsGhoDeposit,
98-
openSavingsGhoWithdraw,
96+
// openSavingsGhoDeposit,
97+
// openSavingsGhoWithdraw,
9998
} = useModalContext();
10099

101100
const [mode, setMode] = useState<Stake>(Stake.aave);
@@ -125,7 +124,7 @@ export default function Staking() {
125124
);
126125

127126
const isStakeAAVE = mode === 'aave';
128-
const isStkGho = mode === 'gho';
127+
// const isStkGho = mode === 'gho';
129128
const isStkBpt = mode === 'bpt';
130129

131130
const showAbptPanel =
@@ -233,7 +232,7 @@ export default function Staking() {
233232
}}
234233
/>
235234
</Grid>
236-
<Grid
235+
{/* <Grid
237236
item
238237
xs={12}
239238
lg={6}
@@ -280,7 +279,7 @@ export default function Staking() {
280279
openStakeRewardsClaim(Stake.gho, 'AAVE');
281280
}}
282281
/>
283-
</Grid>
282+
</Grid> */}
284283

285284
<Grid
286285
item

‎src/locales/en/messages.po‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1354,6 +1354,7 @@ msgstr "No voting power"
13541354
msgid "Can be collateral"
13551355
msgstr "Can be collateral"
13561356

1357+
#: src/modules/sGho/SGhoDepositPanel.tsx
13571358
#: src/modules/staking/GhoStakingPanel.tsx
13581359
#: src/modules/staking/StakingPanel.tsx
13591360
msgid "Claimable AAVE"
@@ -2586,6 +2587,7 @@ msgid "There was some error. Please try changing the parameters or <0><1>copy th
25862587
msgstr "There was some error. Please try changing the parameters or <0><1>copy the error</1></0>"
25872588

25882589
#: src/modules/dashboard/DashboardTopPanel.tsx
2590+
#: src/modules/sGho/SGhoDepositPanel.tsx
25892591
#: src/modules/staking/GhoStakingPanel.tsx
25902592
#: src/modules/staking/StakingPanel.tsx
25912593
#: src/modules/umbrella/UmbrellaClaimActions.tsx

‎src/modules/sGho/SGhoDepositPanel.tsx‎

Lines changed: 104 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChainId } from '@aave/contract-helpers';
1+
import { ChainId, Stake } from '@aave/contract-helpers';
22
import { GetUserStakeUIDataHumanized } from '@aave/contract-helpers/dist/esm/V3-uiStakeDataProvider-contract/types';
33
import { RefreshIcon } from '@heroicons/react/outline';
44
import { Trans } from '@lingui/macro';
@@ -32,7 +32,8 @@ import {
3232
} from 'src/hooks/useSGhoApyHistory';
3333
import { useStakeTokenAPR } from 'src/hooks/useStakeTokenAPR';
3434
import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
35-
import { GENERAL } from 'src/utils/events';
35+
import { useRootStore } from 'src/store/root';
36+
import { GENERAL, SAFETY_MODULE } from 'src/utils/events';
3637

3738
import { MeritApyGraphContainer } from '../reserve-overview/graphs/MeritApyGraphContainer';
3839
import { ESupportedTimeRanges, TimeRangeSelector } from '../reserve-overview/TimeRangeSelector';
@@ -65,8 +66,9 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
6566
const { breakpoints } = useTheme();
6667
const xsm = useMediaQuery(breakpoints.up('xsm'));
6768
const now = useCurrentTimestamp(1);
68-
const { openSwitch } = useModalContext();
69+
const { openSwitch, openStakeRewardsClaim } = useModalContext();
6970
const { currentAccount } = useWeb3Context();
71+
const trackEvent = useRootStore((store) => store.trackEvent);
7072

7173
const [selectedTimeRange, setSelectedTimeRange] = useState<SGhoTimeRange>(
7274
ESupportedTimeRanges.OneWeek
@@ -80,12 +82,52 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
8082
} = useSGhoApyHistory({ timeRange: selectedTimeRange });
8183
const { data: stakeAPR } = useStakeTokenAPR();
8284

83-
// Handle different states properly
8485
if (!stakeData) {
85-
// TODO: Do we want to use a skeleton here?
86-
return <Skeleton variant="rectangular" width={'100%'} height={600} />;
86+
return (
87+
<Grid container spacing={{ xs: 1, md: 2 }} sx={{ mb: 4, minHeight: '600px' }}>
88+
<Grid item xs={12} md={2}>
89+
<Box sx={{ mb: { xs: 2, md: 2 } }}>
90+
<Skeleton variant="rectangular" width={150} height={32} />
91+
</Box>
92+
</Grid>
93+
94+
<Grid item xs={12} md={10}>
95+
<Box sx={{ mb: { xs: 3, md: 0 } }}>
96+
<Skeleton variant="rectangular" width={'100%'} height={24} sx={{ mb: 2 }} />
97+
</Box>
98+
99+
{/* Main content box skeleton */}
100+
{currentAccount && (
101+
<Box
102+
sx={(theme) => ({
103+
borderRadius: { xs: '8px', xsm: '6px' },
104+
border: `1px solid ${theme.palette.divider}`,
105+
p: { xs: 3, xsm: 4 },
106+
marginBottom: 4,
107+
background: theme.palette.background.paper,
108+
boxShadow: { xs: '0 2px 8px rgba(0,0,0,0.04)', xsm: 'none' },
109+
})}
110+
>
111+
<Stack spacing={3}>
112+
<Skeleton variant="rectangular" width={'100%'} height={60} />
113+
<Skeleton variant="rectangular" width={'100%'} height={80} />
114+
</Stack>
115+
</Box>
116+
)}
87117

88-
return null;
118+
{/* Action boxes skeleton */}
119+
<Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
120+
<Skeleton variant="rectangular" width={'100%'} height={120} sx={{ borderRadius: 1 }} />
121+
<Skeleton variant="rectangular" width={'100%'} height={120} sx={{ borderRadius: 1 }} />
122+
</Stack>
123+
124+
{/* Graph skeleton */}
125+
<Box sx={{ mt: 4 }}>
126+
<Skeleton variant="rectangular" width={'100%'} height={200} sx={{ borderRadius: 1 }} />
127+
</Box>
128+
</Grid>
129+
</Grid>
130+
);
89131
}
90132

91133
const handleSwitchClick = () => {
@@ -122,6 +164,25 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
122164
18 + 8 // userBalance (18), stakedTokenPriceUSD (8)
123165
);
124166

167+
const claimableUSD = formatUnits(
168+
BigNumber.from(stakeUserData?.userIncentivesToClaim || '0').mul(
169+
stakeData?.rewardTokenPriceUSD || '0'
170+
),
171+
18 + 8 // incentivesBalance (18), rewardTokenPriceUSD (8)
172+
);
173+
174+
const onStakeRewardClaimAction = () => {
175+
trackEvent(SAFETY_MODULE.STAKE_SAFETY_MODULE, {
176+
action: SAFETY_MODULE.OPEN_CLAIM_MODAL,
177+
asset: 'GHO',
178+
stakeType: 'Safety Module',
179+
rewardType: 'Claim',
180+
});
181+
openStakeRewardsClaim(Stake.gho, 'AAVE');
182+
};
183+
184+
console.log('stakeUserData?.userIncentivesToClaim', stakeUserData?.userIncentivesToClaim);
185+
125186
return (
126187
<>
127188
{currentAccount && (
@@ -449,6 +510,42 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
449510
</Button>
450511
)}
451512
</StakeActionBox>
513+
514+
{stakeUserData?.userIncentivesToClaim &&
515+
parseFloat(stakeUserData?.userIncentivesToClaim) > 0 && (
516+
<Box sx={{ mt: 4 }}>
517+
<StakeActionBox
518+
title={<Trans>Claimable AAVE</Trans>}
519+
value={formatEther(stakeUserData?.userIncentivesToClaim || '0')}
520+
valueUSD={claimableUSD}
521+
bottomLineTitle={<></>}
522+
dataCy={`rewardBox_${stakedToken}`}
523+
bottomLineComponent={<Box sx={{ height: '19px' }} />}
524+
>
525+
<Box
526+
sx={{
527+
display: 'flex',
528+
flexDirection: { sm: 'row', xs: 'column' },
529+
justifyContent: 'space-between',
530+
}}
531+
>
532+
<Button
533+
variant="contained"
534+
onClick={onStakeRewardClaimAction}
535+
disabled={stakeUserData?.userIncentivesToClaim === '0'}
536+
data-cy={`claimBtn_${stakedToken}`}
537+
sx={{
538+
flex: 1,
539+
mb: { xs: 2, sm: 0 },
540+
mr: { xs: 0, sm: 1 },
541+
}}
542+
>
543+
<Trans>Claim</Trans>
544+
</Button>
545+
</Box>
546+
</StakeActionBox>
547+
</Box>
548+
)}
452549
</Box>
453550
</Grid>
454551
</Grid>

0 commit comments

Comments
 (0)