-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Namadillo: Phase 2 - Claim Rewards + useTransaction (#1100)
* feat(namadillo): creating useBalances hook * feat(namadillo): separating colors and other props from tailwind config * feat(components): adding label property to PieChart * feat: refactoring balance props to be reused between staking and overview * feat(namadillo): fixing overview chart * feat(namadillo): adding mocks for useBalance * feat(namadillo): adding tests for NamBalanceContainer * feat(namadillo): adding footer to AccountOverview * feat(namadillo): replacing by Panel component * feat(namadillo): claim rewards component * feat(namadillo): enabling staking rewards * temp: claiming rewards wip * feat(namadillo): adding useTransaction hook and refactoring claim rewards * refactor(namadillo): applying useTransaction to IncrementBonding * feat(namadillo): adding useTransaction on Unstake flow * feat(namadillo): applying useTransaction to redelegate * chore: fixing some merge conflicts * feat(namadillo): applying useTransaction to Withdraw * feat(namadillo): writing tests for StakingRewardsPanel * feat(namadillo): adding claim and stake * feat(namadillo): writing tests for StakingRewards * fix(namadillo): fixing staking rewards not updating
- Loading branch information
1 parent
94b6ec6
commit 89b2ece
Showing
42 changed files
with
1,562 additions
and
634 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 43 additions & 16 deletions
59
apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { Stack } from "@namada/components"; | ||
| import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary"; | ||
| import { BalanceChart } from "App/Common/BalanceChart"; | ||
| import { NamCurrency } from "App/Common/NamCurrency"; | ||
| import BigNumber from "bignumber.js"; | ||
| import { useBalances } from "hooks/useBalances"; | ||
| import { colors } from "theme"; | ||
|
|
||
| type NamBalanceListItemProps = { | ||
| title: string; | ||
| color: string; | ||
| amount: BigNumber; | ||
| }; | ||
|
|
||
| const NamBalanceListItem = ({ | ||
| title, | ||
| color, | ||
| amount, | ||
| }: NamBalanceListItemProps): JSX.Element => { | ||
| return ( | ||
| <li | ||
| className="leading-5 bg-neutral-900 px-4 py-3 rounded-sm min-w-[165px]" | ||
| aria-description={`${title} amount is ${amount.toString()} NAM`} | ||
| > | ||
| <span className="flex items-center text-xs gap-1.5"> | ||
| <i className="w-2 h-2 rounded-full" style={{ background: color }} /> | ||
| {title} | ||
| </span> | ||
| <NamCurrency | ||
| amount={amount} | ||
| className="text-lg pl-3.5" | ||
| currencySignClassName="hidden" | ||
| /> | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export const NamBalanceContainer = (): JSX.Element => { | ||
| const { | ||
| balanceQuery, | ||
| stakeQuery, | ||
| isLoading, | ||
| isSuccess, | ||
| availableAmount, | ||
| bondedAmount, | ||
| shieldedAmount, | ||
| unbondedAmount, | ||
| withdrawableAmount, | ||
| totalAmount, | ||
| } = useBalances(); | ||
|
|
||
| return ( | ||
| <div className="flex gap-4 text-white"> | ||
| <AtomErrorBoundary | ||
| result={[balanceQuery, stakeQuery]} | ||
| niceError="Unable to load balances" | ||
| > | ||
| <div className="flex items-center w-full"> | ||
| <BalanceChart | ||
| view="total" | ||
| isLoading={isLoading} | ||
| isSuccess={isSuccess} | ||
| availableAmount={availableAmount} | ||
| bondedAmount={bondedAmount} | ||
| shieldedAmount={shieldedAmount} | ||
| unbondedAmount={unbondedAmount} | ||
| withdrawableAmount={withdrawableAmount} | ||
| totalAmount={totalAmount} | ||
| /> | ||
| <Stack gap={2} as="ul"> | ||
| <NamBalanceListItem | ||
| title="Available NAM" | ||
| color={colors.balance} | ||
| amount={availableAmount} | ||
| /> | ||
| <NamBalanceListItem | ||
| title="Staked NAM" | ||
| color={colors.bond} | ||
| amount={bondedAmount} | ||
| /> | ||
| <NamBalanceListItem | ||
| title="Unbonded NAM" | ||
| color={colors.unbond} | ||
| amount={unbondedAmount.plus(withdrawableAmount)} | ||
| /> | ||
| </Stack> | ||
| </div> | ||
| </AtomErrorBoundary> | ||
| </div> | ||
| ); | ||
| }; |
68 changes: 68 additions & 0 deletions
68
apps/namadillo/src/App/AccountOverview/__tests__/NamBalanceContainer.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { cleanup, render, screen } from "@testing-library/react"; | ||
| import BigNumber from "bignumber.js"; | ||
| import { mockUseBalances } from "hooks/__mocks__/mockUseBalance"; | ||
| import { AtomWithQueryResult } from "jotai-tanstack-query"; | ||
| import { NamBalanceContainer } from "../NamBalanceContainer"; | ||
|
|
||
| jest.mock("hooks/useBalances", () => ({ | ||
| useBalances: jest.fn(), | ||
| })); | ||
|
|
||
| describe("Component: NamBalanceContainer", () => { | ||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| test("renders error boundary when queries fail", () => { | ||
| // Check if the error message from AtomErrorBoundary is displayed | ||
| const execute = ( | ||
| balanceQueryError: boolean, | ||
| stakeQueryError: boolean | ||
| ): void => { | ||
| mockUseBalances({ | ||
| balanceQuery: { isError: balanceQueryError } as AtomWithQueryResult, | ||
| stakeQuery: { isError: stakeQueryError } as AtomWithQueryResult, | ||
| isLoading: false, | ||
| isSuccess: false, | ||
| }); | ||
| render(<NamBalanceContainer />); | ||
| expect(screen.getByText(/Unable to load balances/i)).toBeInTheDocument(); | ||
| cleanup(); | ||
| jest.clearAllMocks(); | ||
| }; | ||
|
|
||
| execute(true, true); | ||
| execute(false, true); | ||
| execute(true, false); | ||
| }); | ||
|
|
||
| test("renders balance items when data is loaded", () => { | ||
| mockUseBalances({ | ||
| availableAmount: new BigNumber(100), | ||
| bondedAmount: new BigNumber(50), | ||
| unbondedAmount: new BigNumber(30), | ||
| withdrawableAmount: new BigNumber(25), | ||
| totalAmount: new BigNumber(200), | ||
| }); | ||
|
|
||
| render(<NamBalanceContainer />); | ||
|
|
||
| // Check if the list items for each balance type are rendered | ||
| expect(screen.getByText(/Available NAM/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/Staked NAM/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/Unbonded NAM/i)).toBeInTheDocument(); | ||
|
|
||
| // Check if the amounts are displayed correctly | ||
|
|
||
| // Available: | ||
| expect(screen.getByText("100 NAM")).toBeInTheDocument(); | ||
|
|
||
| // Bonded / Staked | ||
| expect(screen.getByText("50 NAM")).toBeInTheDocument(); | ||
|
|
||
| // Unbonded + Withdraw | ||
| expect(screen.queryByText("30 NAM")).toBeNull(); | ||
| expect(screen.queryByText("25 NAM")).toBeNull(); | ||
| expect(screen.getByText("55 NAM")).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
89b2eceThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://namada-interface-dev.netlify.app as production
🚀 Deployed on https://66e5453656c80c0f157ec913--namada-interface-dev.netlify.app