Staking Page Refactor Part I #4467

SorinC6 · 2025-12-16T11:48:46Z

Layout and Summary Card

Tasks:

Note

Introduces the revamp Staking dashboard with rewards summary/graphs, new routing/context, query key factories, and supporting icons/utilities.

Staking (revamp):
- Add StakingPage and layout under UI/pages/Staking/*, StakingRoot with RewardsSummaryCard and placeholder PoolList.
- New StakingContextProvider with graph/data helpers (common/helpers/graph.ts), types, and i18n strings.
- Implement reward history chart (RewardHistoryGraph, RewardGraphClean) and WithdrawButton flow.
Routing/Navigation:
- Add ROUTES.STAKING_REVAMP.ROOT (/staking-revamp) and wrap with StakingSubpages (StakingContextProvider).
- Show dev-only sidebar entry for staking revamp; wire route in Routes.js.
Queries:
- Introduce React Query factories poolQueryKeys for pool list/info.
Icons:
- Add Icon.StakingActive and Icon.TotalDelegated and export in icons/index.tsx.
Governance:
- Simplify GovernanceContextProvider by removing pricing/formatting props and helpers.
Common:
- Add HIDDEN_AMOUNT constant.
Dependencies:
- Add @yoroi/api to package.json.

^{Written by Cursor Bugbot for commit 7e4e9af. This will update automatically on new commits. Configure here.}

packages/yoroi-extension/app/Routes.js

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/RewardsSummaryCard.tsx

packages/yoroi-extension/app/UI/features/staking/module/StakingContextProvider.tsx

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/RewardsSummaryCard.tsx

packages/yoroi-extension/app/UI/common/helpers/formatters.ts

packages/yoroi-extension/app/UI/features/staking/StakingRoot.tsx

SorinC6

/check

SorinC6

/check

packages/yoroi-extension/app/UI/features/staking/module/StakingContextProvider.tsx

loxator

Some constants are typed as null | undefined, but usually its only checked for if(x == null), why not use something like if(!x) so it takes care of both cases?

Just some small comments as I am not versed with the business logic too much, better to get a review from @yushih too!

loxator · 2025-12-17T08:44:27Z

packages/yoroi-extension/app/UI/features/staking/module/StakingContextProvider.tsx

+    [initialState]
+  );
+
+  React.useEffect(() => {}, [stores]);


empty useEffect?

fixed in the next PR

loxator · 2025-12-17T08:46:22Z

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/RewardHistoryGraph.tsx

+        <Box>
+          <Box display="block">
+            <Typography component="div" color="var(--yoroi-palette-gray-600)">
+              Stake Pool


should this come from useStrings()?

fixed in the next PR

loxator · 2025-12-17T08:47:58Z

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/RewardHistoryGraph.tsx

+/* ---------- Styled components ---------- */
+
+const Accordion = styled((props: MuiAccordionProps) => (
+  <MuiAccordion TransitionProps={{ timeout: { exit: 500 } }} disableGutters elevation={0} square {...props} />
+))(() => ({
+  borderBottom: `1px solid var(--yoroi-palette-gray-50)`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+  paddingBottom: '16px',
+  marginBottom: '16px',
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(() => ({
+  marginTop: '24px',
+  padding: 0,
+}));
+
+const AvatarImg = styled('img')({
+  width: '100%',
+  background: 'white',
+  objectFit: 'scale-down',
+});
+
+const AvatarWrapper = styled(Box)({
+  width: '24px',
+  height: '24px',
+  minWidth: '24px',
+  marginRight: '12px',
+  borderRadius: '20px',
+  overflow: 'hidden',
+});
+
+const ExpandMoreIcon: React.FC = () => (
+  <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z"
+      fill="#6B7384"
+    />
+  </svg>
+);
+
+const AccordionSummary = styled((props: MuiAccordionSummaryProps) => (
+  <MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
+))(() => ({
+  padding: 0,
+  '.MuiAccordionSummary-content': {
+    margin: 0,
+  },
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(180deg)',
+  },
+  '& .MuiCollapse-vertical': {
+    transitionDuration: '0.5s',
+  },
+}));
+
+const RewardHistoryGraph: React.FC<RewardHistoryGraphProps> = ({ graphData, onOpenRewardList }) => {
+  const strings = useStrings();
+  const { rewardsGraphData } = graphData;
+  const rewardList = rewardsGraphData.items?.perEpochRewards;
+  const title = strings.rewardHistoryLabel;
+
+  return (
+    <Box
+      p="24px"
+      sx={{
+        display: 'flex',
+        flexFlow: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          width: '100%',
+        }}
+      >
+        <Typography component="div" variant="body1" fontWeight={500} color="ds.text_gray_medium">
+          {title}
+        </Typography>
+        <Button
+          // @ts-ignore
+          variant="primary"
+          size="medium"
+          onClick={onOpenRewardList}
+          sx={{ lineHeight: '21px' }}
+        >
+          {title}
+        </Button>
+      </Box>
+
+      {rewardsGraphData.error && !rewardsGraphData.items && (
+        <div>
+          <Typography variant="body2" color="ds.text_error">
+            {strings.errorLabel}
+          </Typography>
+        </div>
+      )}
+
+      {!Array.isArray(rewardList) ? (
+        <CircularProgress />
+      ) : (
+        <Box ml="-50px">
+          <RewardGraphClean
+            epochTitle={strings.epochLabel}
+            stakepoolNameTitle={strings.stakepoolNameLabel}
+            xAxisLabel={strings.epochLabel}
+            yAxisLabel={strings.rewardValue}
+            primaryBarLabel={strings.rewardsLabel}
+            data={rewardList}
+            hideYAxis={rewardsGraphData.hideYAxis}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+


maybe better to import these from another local components file, just to clean up a bit and make component smaller, nothing major

SorinC6

/check

cursor · 2025-12-17T14:24:58Z

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/WithdrawButton.tsx

+      return;
+    }
+    return createWithdrawalTx();
+  };


Bug: Governance participation check treats unknown as true

isParticipatingToGovernance uses stores.delegation.governanceStatus?.drepDelegation !== null, which becomes true when governanceStatus is null/undefined (because undefined !== null). This can incorrectly skip GovernanceParticipateDialog and proceed to withdrawal flow before governance status is actually available.

packages/yoroi-extension/app/stores/stateless/sidebarCategories.js

packages/yoroi-extension/app/UI/features/staking/module/StakingContextProvider.tsx

cursor · 2025-12-17T15:18:32Z

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/WithdrawButton.tsx

+      return;
+    }
+    return createWithdrawalTx();
+  };


Bug: Withdraw uses stale governance status

isParticipatingToGovernance is derived from stores.delegation.governanceStatus inside WithdrawButton, but the component isn’t observer-wrapped and doesn’t subscribe to that observable via state. If governance status changes after render, the click handler can use a stale value and incorrectly open GovernanceParticipateDialog even when the user is already participating.

cursor · 2025-12-17T15:59:11Z

packages/yoroi-extension/app/UI/features/staking/module/StakingContextProvider.tsx

+    delegationRequests,
+    isWalletWithNoFunds,
+    currentlyDelegating,
+  };


Bug: Reward history button does nothing

RewardsSummaryCard consumes onOpenRewardList from useStaking, but StakingContextProvider never sets it, so it stays the default no-op from defaultStakingState. As a result, the “Reward History” action won’t open anything when clicked.

Additional Locations (1)

packages/yoroi-extension/app/UI/features/staking/module/state.ts#L3-L15

cursor · 2025-12-17T16:22:01Z

packages/yoroi-extension/app/UI/features/staking/useCases/RewardsSummary/RewardsSummaryCard.tsx

+        {truncateToken(tokenInfo?.assetName || '', 12)}
+      </>
+    );
+  };


Bug: Token label blank in summary

formatTokenEntry renders the token label using truncateToken(tokenInfo?.assetName || '', 12), but getTokenInfo returns a TokenRow where the display name/ticker isn’t exposed as assetName. This can render an empty token label (eg, missing “ADA”) in the rewards summary amounts.

Nebyt

/check

SorinC6 added 2 commits December 10, 2025 16:34

wip

7564015

add new staking card

ce2cea8

cursor bot reviewed Dec 16, 2025

View reviewed changes

fix format

d5dfbc9

Nebyt added this to the 5.20.0 milestone Dec 16, 2025

SorinC6 added 2 commits December 16, 2025 13:58

fix warnings

a0bb65b

Merge branch 'develop' into chore/YW-172/staking-revamp-layout

ed37e79

SorinC6 commented Dec 16, 2025

View reviewed changes

SorinC6 changed the title ~~Staking Page Refactor~~ Staking Page Refactor Part I Dec 16, 2025

SorinC6 added 2 commits December 16, 2025 14:19

fix prop

c17b241

fix eslint

c84ca43

SorinC6 commented Dec 16, 2025

View reviewed changes

fix prop

267bcc7

cursor bot reviewed Dec 16, 2025

View reviewed changes

packages/yoroi-extension/app/UI/features/staking/module/StakingContextProvider.tsx Show resolved Hide resolved

loxator reviewed Dec 17, 2025

View reviewed changes

SorinC6 commented Dec 17, 2025

View reviewed changes

remobe unused

97e1867

cursor bot reviewed Dec 17, 2025

View reviewed changes

fixed tsc

1afe176

SorinC6 requested a review from Nebyt December 17, 2025 15:10

cursor bot reviewed Dec 17, 2025

View reviewed changes

add import

f476fb7

cursor bot reviewed Dec 17, 2025

View reviewed changes

Merge branch 'develop' into chore/YW-172/staking-revamp-layout

7e4e9af

Nebyt approved these changes Dec 17, 2025

View reviewed changes

cursor bot reviewed Dec 17, 2025

View reviewed changes

Nebyt approved these changes Dec 17, 2025

View reviewed changes

Nebyt merged commit 26fb657 into develop Dec 17, 2025
47 of 48 checks passed

Nebyt deleted the chore/YW-172/staking-revamp-layout branch December 17, 2025 16:32

Staking Page Refactor Part I #4467

Staking Page Refactor Part I #4467

Conversation

SorinC6 commented Dec 16, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tasks:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SorinC6 left a comment

Choose a reason for hiding this comment

Uh oh!

SorinC6 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

loxator left a comment

Choose a reason for hiding this comment

Uh oh!

loxator Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

SorinC6 Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

loxator Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

SorinC6 Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

loxator Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

SorinC6 left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Dec 17, 2025

Choose a reason for hiding this comment

Bug: Governance participation check treats unknown as true

Uh oh!

Uh oh!

Uh oh!

cursor bot Dec 17, 2025

Choose a reason for hiding this comment

Bug: Withdraw uses stale governance status

Uh oh!

cursor bot Dec 17, 2025

Choose a reason for hiding this comment

Bug: Reward history button does nothing

Uh oh!

cursor bot Dec 17, 2025

Choose a reason for hiding this comment

Bug: Token label blank in summary

Uh oh!

Nebyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SorinC6 commented Dec 16, 2025 •

edited by cursor bot

Loading