From 3e591a7c330820b433d0ca24cfd66e8555d29455 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Wed, 15 Jan 2025 22:18:17 +0100 Subject: [PATCH 01/12] remove unnecessary parameter --- frontend/src/lib/utils/portfolio.utils.ts | 6 ++---- frontend/src/tests/lib/utils/portfolio.utils.spec.ts | 3 +-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/src/lib/utils/portfolio.utils.ts b/frontend/src/lib/utils/portfolio.utils.ts index 97d972f23b..3245811d7d 100644 --- a/frontend/src/lib/utils/portfolio.utils.ts +++ b/frontend/src/lib/utils/portfolio.utils.ts @@ -31,22 +31,20 @@ const compareTokens = mergeComparators([ * - Always prioritizes ICP token first * - Sorts remaining tokens by USD balance * - Sorts remaining tokens by importance - * - Limits the number of returned tokens to maxTokensToShow + * - Limits the number of returned tokens to MAX_NUMBER_OF_ITEMS * - When isSigned true, filters out tokens with zero balance as we show only tokens with guaranteed balance */ export const getTopTokens = ({ userTokens, - maxResults = MAX_NUMBER_OF_ITEMS, isSignedIn = false, }: { userTokens: UserToken[]; - maxResults?: number; isSignedIn?: boolean; }): UserTokenData[] => { const topTokens = userTokens .filter(isUserTokenData) .sort(compareTokens) - .slice(0, maxResults); + .slice(0, MAX_NUMBER_OF_ITEMS); if (!isSignedIn) return topTokens; diff --git a/frontend/src/tests/lib/utils/portfolio.utils.spec.ts b/frontend/src/tests/lib/utils/portfolio.utils.spec.ts index d83be681c2..95cb97d328 100644 --- a/frontend/src/tests/lib/utils/portfolio.utils.spec.ts +++ b/frontend/src/tests/lib/utils/portfolio.utils.spec.ts @@ -50,10 +50,9 @@ describe("Portfolio utils", () => { ]; const result = getTopTokens({ userTokens: tokens, - maxResults: 3, }); - expect(result).toHaveLength(3); + expect(result).toHaveLength(4); }); it("should order tokens: ICP first, then ckBTC/ckUSDC, then others", () => { From f7379f23d2a9e0dd6675d47773458ecd5d0a8844 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Wed, 15 Jan 2025 22:21:11 +0100 Subject: [PATCH 02/12] rename to userTokens --- frontend/src/lib/pages/Portfolio.svelte | 8 ++++---- .../routes/(app)/(nns)/portfolio/+page.svelte | 2 +- frontend/src/tests/lib/pages/Portfolio.spec.ts | 18 +++++++++--------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index 8a02e47431..9f4d007744 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -12,14 +12,14 @@ import { getTotalBalanceInUsd } from "$lib/utils/token.utils"; import { TokenAmountV2, isNullish } from "@dfinity/utils"; - export let userTokensData: UserToken[]; + export let userTokens: UserToken[]; export let tableProjects: TableProject[]; let totalTokensBalanceInUsd: number; - $: totalTokensBalanceInUsd = getTotalBalanceInUsd(userTokensData); + $: totalTokensBalanceInUsd = getTotalBalanceInUsd(userTokens); let hasUnpricedTokens: boolean; - $: hasUnpricedTokens = userTokensData.some( + $: hasUnpricedTokens = userTokens.some( (token) => token.balance instanceof TokenAmountV2 && token.balance.toUlps() > 0n && @@ -57,7 +57,7 @@ let topTokens: UserTokenData[]; $: topTokens = getTopTokens({ - userTokens: userTokensData, + userTokens: userTokens, isSignedIn: $authSignedInStore, }); diff --git a/frontend/src/routes/(app)/(nns)/portfolio/+page.svelte b/frontend/src/routes/(app)/(nns)/portfolio/+page.svelte index ff09e5d793..7ff722fc50 100644 --- a/frontend/src/routes/(app)/(nns)/portfolio/+page.svelte +++ b/frontend/src/routes/(app)/(nns)/portfolio/+page.svelte @@ -54,7 +54,7 @@ { const renderPage = ({ - userTokensData = [], + userTokens = [], tableProjects = [], - }: { userTokensData?: UserToken[]; tableProjects?: TableProject[] } = {}) => { + }: { userTokens?: UserToken[]; tableProjects?: TableProject[] } = {}) => { const { container } = render(Portfolio, { props: { - userTokensData, + userTokens, tableProjects, }, }); @@ -91,7 +91,7 @@ describe("Portfolio page", () => { universeId: principal(1), balanceInUsd: 2, }); - const po = renderPage({ userTokensData: [token] }); + const po = renderPage({ userTokens: [token] }); expect(await po.getNoTokensCard().isPresent()).toBe(false); expect(await po.getTokensCardPo().isPresent()).toBe(true); @@ -148,7 +148,7 @@ describe("Portfolio page", () => { it("should display the top four tokens by balanceInUsd", async () => { const po = renderPage({ - userTokensData: [token1, token2, token3, token4, token5], + userTokens: [token1, token2, token3, token4, token5], }); const tokensCardPo = po.getTokensCardPo(); @@ -182,7 +182,7 @@ describe("Portfolio page", () => { it("should display the information row when less then three tokens", async () => { const po = renderPage({ - userTokensData: [token1, token2], + userTokens: [token1, token2], }); const tokensCardPo = po.getTokensCardPo(); @@ -229,7 +229,7 @@ describe("Portfolio page", () => { universeId: principal(1), balanceInUsd: 2, }); - const po = renderPage({ userTokensData: [token] }); + const po = renderPage({ userTokens: [token] }); expect(await po.getNoNeuronsCarPo().isPresent()).toBe(true); expect(await po.getNoNeuronsCarPo().hasPrimaryAction()).toBe(true); @@ -277,7 +277,7 @@ describe("Portfolio page", () => { it("should display total assets", async () => { const po = renderPage({ - userTokensData: [token1, token2], + userTokens: [token1, token2], tableProjects: [tableProject1, tableProject2], }); @@ -295,7 +295,7 @@ describe("Portfolio page", () => { }); it("should ignore tokens with unknown balance in USD and display tooltip", async () => { - const po = renderPage({ userTokensData: [token1, token2, token3] }); + const po = renderPage({ userTokens: [token1, token2, token3] }); expect(await po.getUsdValueBannerPo().getPrimaryAmount()).toBe( "$12.00" From 26975e489cd3694ca0b3fcad7d807ad901d2db64 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Thu, 16 Jan 2025 14:30:14 +0100 Subject: [PATCH 03/12] rename variable to topHeldTokens --- .../components/portfolio/TokensCard.svelte | 21 ++++++++++++------- frontend/src/lib/pages/Portfolio.svelte | 6 +++--- .../components/portfolio/TokensCard.spec.ts | 16 +++++++------- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/frontend/src/lib/components/portfolio/TokensCard.svelte b/frontend/src/lib/components/portfolio/TokensCard.svelte index 26e87b336a..e611bddd41 100644 --- a/frontend/src/lib/components/portfolio/TokensCard.svelte +++ b/frontend/src/lib/components/portfolio/TokensCard.svelte @@ -10,7 +10,7 @@ import { formatNumber } from "$lib/utils/format.utils"; import { IconAccountsPage, IconRight } from "@dfinity/gix-components"; - export let topTokens: UserTokenData[]; + export let topHeldTokens: UserTokenData[]; export let usdAmount: number; const href = AppPath.Tokens; @@ -22,7 +22,7 @@ // TODO: This will also depend on the number of projects let showInfoRow: boolean; - $: showInfoRow = topTokens.length > 0 && topTokens.length < 3; + $: showInfoRow = topHeldTokens.length > 0 && topHeldTokens.length < 3; @@ -78,13 +78,18 @@
- {#each topTokens as token (token.domKey)} + {#each topHeldTokens as topHeldToken (topHeldToken.domKey)}
- +
- {token.title} + {topHeldToken.title}
- +
- ${formatNumber(token?.balanceInUsd ?? 0)} + ${formatNumber(topHeldToken?.balanceInUsd ?? 0)}
{/each} diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index 9f4d007744..554bee53be 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -55,8 +55,8 @@ let hasNoProjectsCardAPrimaryAction: boolean; $: hasNoProjectsCardAPrimaryAction = !showNoTokensCard; - let topTokens: UserTokenData[]; - $: topTokens = getTopTokens({ + let topHeldTokens: UserTokenData[]; + $: topHeldTokens = getTopTokens({ userTokens: userTokens, isSignedIn: $authSignedInStore, }); @@ -76,7 +76,7 @@ {#if showNoTokensCard} {:else} - + {/if} {#if showNoProjectsCard} diff --git a/frontend/src/tests/lib/components/portfolio/TokensCard.spec.ts b/frontend/src/tests/lib/components/portfolio/TokensCard.spec.ts index 3048149e96..218bb66a84 100644 --- a/frontend/src/tests/lib/components/portfolio/TokensCard.spec.ts +++ b/frontend/src/tests/lib/components/portfolio/TokensCard.spec.ts @@ -16,7 +16,7 @@ import { render } from "@testing-library/svelte"; describe("TokensCard", () => { const renderComponent = (props: { - topTokens: UserTokenData[]; + topHeldTokens: UserTokenData[]; usdAmount: number; }) => { const { container } = render(TokensCard, { @@ -43,7 +43,7 @@ describe("TokensCard", () => { it("should show placeholder balance", async () => { const po = renderComponent({ - topTokens: mockTokens, + topHeldTokens: mockTokens, usdAmount: 0, }); @@ -52,7 +52,7 @@ describe("TokensCard", () => { it("should show list of tokens with name and balance", async () => { const po = renderComponent({ - topTokens: mockTokens, + topHeldTokens: mockTokens, usdAmount: 0, }); const titles = await po.getTokensTitles(); @@ -100,7 +100,7 @@ describe("TokensCard", () => { it("should show the usd amount", async () => { const po = renderComponent({ - topTokens: mockTokens, + topHeldTokens: mockTokens, usdAmount: 600, }); @@ -109,7 +109,7 @@ describe("TokensCard", () => { it("should show all the tokens with their balance", async () => { const po = renderComponent({ - topTokens: mockTokens, + topHeldTokens: mockTokens, usdAmount: 600, }); const titles = await po.getTokensTitles(); @@ -132,7 +132,7 @@ describe("TokensCard", () => { it("should not show info row when tokens length is 3 or more", async () => { const po = renderComponent({ - topTokens: mockTokens.slice(0, 3), + topHeldTokens: mockTokens.slice(0, 3), usdAmount: 600, }); const titles = await po.getTokensTitles(); @@ -157,7 +157,7 @@ describe("TokensCard", () => { it("should show info row when tokens length is 1", async () => { const po = renderComponent({ - topTokens: mockTokens.slice(0, 1), + topHeldTokens: mockTokens.slice(0, 1), usdAmount: 100, }); @@ -179,7 +179,7 @@ describe("TokensCard", () => { it("should show info row when tokens length is 2", async () => { const po = renderComponent({ - topTokens: mockTokens.slice(0, 2), + topHeldTokens: mockTokens.slice(0, 2), usdAmount: 300, }); From 1fad50e1bbbf2aa92183df3cccf69d3e6f7f0e1e Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Thu, 16 Jan 2025 16:23:48 +0100 Subject: [PATCH 04/12] renames NoTokensCard to NoTokensHeldCard --- .../{NoTokensCard.svelte => NoTokensHeldCard.svelte} | 0 frontend/src/lib/pages/Portfolio.svelte | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename frontend/src/lib/components/portfolio/{NoTokensCard.svelte => NoTokensHeldCard.svelte} (100%) diff --git a/frontend/src/lib/components/portfolio/NoTokensCard.svelte b/frontend/src/lib/components/portfolio/NoTokensHeldCard.svelte similarity index 100% rename from frontend/src/lib/components/portfolio/NoTokensCard.svelte rename to frontend/src/lib/components/portfolio/NoTokensHeldCard.svelte diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index 554bee53be..26d2341176 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -1,7 +1,7 @@ - +
diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index b0b1d2e5e5..467824f55b 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -1,6 +1,6 @@ - +
diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index 467824f55b..92e02ca8af 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -1,7 +1,7 @@ - +
@@ -44,11 +44,11 @@
-
{$i18n.portfolio.projects_card_title}
+
{$i18n.portfolio.staked_tokens_card_title}

${usdAmountFormatted}

@@ -57,36 +57,36 @@ - {$i18n.portfolio.projects_card_link} + {$i18n.portfolio.staked_tokens_card_link}
{$i18n.portfolio.projects_card_list_first_column}{$i18n.portfolio.staked_tokens_card_list_first_column} {$i18n.portfolio.projects_card_list_second_column_mobile}{$i18n.portfolio.staked_tokens_card_list_second_column_mobile} {$i18n.portfolio.projects_card_list_second_column}{$i18n.portfolio.staked_tokens_card_list_second_column} {$i18n.portfolio.projects_card_list_third_column}{$i18n.portfolio.staked_tokens_card_list_third_column}
{#each topStakedTokens as stakedToken (stakedToken.domKey)} -
+
- {stakedToken.title} + {stakedToken.title}
-
+
{#if $authSignedInStore}
${formatNumber(stakedToken?.stakeInUsd ?? 0)}
@@ -140,7 +140,7 @@
- {$i18n.portfolio.projects_card_info_row} + {$i18n.portfolio.staked_tokens_card_info_row}
@@ -244,8 +244,8 @@ } .maturity, - .staked-usd, - .staked-native { + .stake-usd, + .stake-native { justify-self: end; text-align: right; } @@ -261,11 +261,11 @@ } } - .staked-usd { + .stake-usd { grid-area: usd; } - .staked-native { + .stake-native { display: none; grid-area: native; font-size: 0.875rem; diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json index d4ad630c79..c98b8b4210 100644 --- a/frontend/src/lib/i18n/en.json +++ b/frontend/src/lib/i18n/en.json @@ -1202,12 +1202,12 @@ "tokens_card_list_second_column": "Value Native", "tokens_card_list_third_column": "Value $", "tokens_card_info_row": "Store and transfer tokens securely in the NNS wallet — running 100% on the Internet Computer blockchain. Tokens allow you to participate in ICP's onchain governance systems.", - "projects_card_title": "Total Staking Balance", - "projects_card_link": "Stake neurons", - "projects_card_list_first_column": "Top Staked Neurons", - "projects_card_list_second_column_mobile": "Balance $/Maturity", - "projects_card_list_second_column": "Maturity", - "projects_card_list_third_column": "Staked", - "projects_card_info_row": "Optimize voting power and earn rewards by increasing your staked neurons." + "staked_tokens_card_title": "Total Staking Balance", + "staked_tokens_card_link": "Stake neurons", + "staked_tokens_card_list_first_column": "Top Staked Neurons", + "staked_tokens_card_list_second_column_mobile": "Balance $/Maturity", + "staked_tokens_card_list_second_column": "Maturity", + "staked_tokens_card_list_third_column": "Staked", + "staked_tokens_card_info_row": "Optimize voting power and earn rewards by increasing your staked neurons." } } diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts index fd507dedf0..79c2a3644d 100644 --- a/frontend/src/lib/types/i18n.d.ts +++ b/frontend/src/lib/types/i18n.d.ts @@ -1267,13 +1267,13 @@ interface I18nPortfolio { tokens_card_list_second_column: string; tokens_card_list_third_column: string; tokens_card_info_row: string; - projects_card_title: string; - projects_card_link: string; - projects_card_list_first_column: string; - projects_card_list_second_column_mobile: string; - projects_card_list_second_column: string; - projects_card_list_third_column: string; - projects_card_info_row: string; + staked_tokens_card_title: string; + staked_tokens_card_link: string; + staked_tokens_card_list_first_column: string; + staked_tokens_card_list_second_column_mobile: string; + staked_tokens_card_list_second_column: string; + staked_tokens_card_list_third_column: string; + staked_tokens_card_info_row: string; } interface I18nNeuron_state { diff --git a/frontend/src/tests/lib/components/portfolio/NoStakedTokensCard.spec.ts b/frontend/src/tests/lib/components/portfolio/NoStakedTokensCard.spec.ts index b30d95a1e4..c39b85d481 100644 --- a/frontend/src/tests/lib/components/portfolio/NoStakedTokensCard.spec.ts +++ b/frontend/src/tests/lib/components/portfolio/NoStakedTokensCard.spec.ts @@ -1,5 +1,5 @@ import NoStakedTokensCard from "$lib/components/portfolio/NoStakedTokensCard.svelte"; -import { NoStakedTokensCardPo } from "$tests/page-objects/NoProjectsCard.page-object"; +import { NoStakedTokensCardPo } from "$tests/page-objects/NoStakedTokensCard.page-object"; import { JestPageObjectElement } from "$tests/page-objects/jest.page-object"; import { render } from "@testing-library/svelte"; diff --git a/frontend/src/tests/lib/components/portfolio/ProjectsCard.spec.ts b/frontend/src/tests/lib/components/portfolio/StakedTokensCard.spec.ts similarity index 79% rename from frontend/src/tests/lib/components/portfolio/ProjectsCard.spec.ts rename to frontend/src/tests/lib/components/portfolio/StakedTokensCard.spec.ts index ff6011c3d4..b5d438ae4c 100644 --- a/frontend/src/tests/lib/components/portfolio/ProjectsCard.spec.ts +++ b/frontend/src/tests/lib/components/portfolio/StakedTokensCard.spec.ts @@ -1,16 +1,16 @@ -import ProjectsCard from "$lib/components/portfolio/ProjectsCard.svelte"; +import StakedTokensCard from "$lib/components/portfolio/StakedTokensCard.svelte"; import { NNS_TOKEN_DATA } from "$lib/constants/tokens.constants"; import type { TableProject } from "$lib/types/staking"; import { UnavailableTokenAmount } from "$lib/utils/token.utils"; import { resetIdentity, setNoIdentity } from "$tests/mocks/auth.store.mock"; import { mockToken } from "$tests/mocks/sns-projects.mock"; import { mockTableProject } from "$tests/mocks/staking.mock"; -import { ProjectsCardPo } from "$tests/page-objects/ProjectsCard.page-object"; +import { StakedTokensCardPo } from "$tests/page-objects/StakedTokensCard.page-object"; import { JestPageObjectElement } from "$tests/page-objects/jest.page-object"; import { ICPToken, TokenAmountV2 } from "@dfinity/utils"; import { render } from "@testing-library/svelte"; -describe("ProjectsCard", () => { +describe("StakedTokensCard", () => { const renderComponent = ({ topStakedTokens = [], usdAmount = 0, @@ -20,7 +20,7 @@ describe("ProjectsCard", () => { usdAmount?: number; numberOfTopHeldTokens?: number; } = {}) => { - const { container } = render(ProjectsCard, { + const { container } = render(StakedTokensCard, { props: { topStakedTokens, usdAmount, @@ -28,7 +28,7 @@ describe("ProjectsCard", () => { }, }); - return ProjectsCardPo.under(new JestPageObjectElement(container)); + return StakedTokensCardPo.under(new JestPageObjectElement(container)); }; describe("when not signed in", () => { @@ -61,7 +61,7 @@ describe("ProjectsCard", () => { stake: new UnavailableTokenAmount(mockToken), }; - const mockProjects: TableProject[] = [ + const mockStakedTokens: TableProject[] = [ icpProject, tableProject1, tableProject2, @@ -80,13 +80,13 @@ describe("ProjectsCard", () => { it("should list of tokens with placeholders", async () => { const po = renderComponent({ - topStakedTokens: mockProjects, + topStakedTokens: mockStakedTokens, }); - const titles = await po.getProjectsTitle(); - const maturities = await po.getProjectsMaturity(); - const stakesInUsd = await po.getProjectsStakeInUsd(); + const titles = await po.getStakedTokensTitle(); + const maturities = await po.getStakedTokensMaturity(); + const stakesInUsd = await po.getStakedTokensStakeInUsd(); const stakesInNativeCurrency = - await po.getProjectsStakeInNativeCurrency(); + await po.getStakedTokensStakeInNativeCurrency(); expect(titles.length).toBe(4); expect(titles).toEqual([ @@ -158,7 +158,7 @@ describe("ProjectsCard", () => { }), }; - const mockProjects: TableProject[] = [ + const mockStakedTokens: TableProject[] = [ icpProject, tableProject1, tableProject2, @@ -179,14 +179,14 @@ describe("ProjectsCard", () => { it("should show all the projects with their maturity, staked in usd and staked in native currency", async () => { const po = renderComponent({ - topStakedTokens: mockProjects, + topStakedTokens: mockStakedTokens, }); - const titles = await po.getProjectsTitle(); - const maturities = await po.getProjectsMaturity(); - const stakesInUsd = await po.getProjectsStakeInUsd(); + const titles = await po.getStakedTokensTitle(); + const maturities = await po.getStakedTokensMaturity(); + const stakesInUsd = await po.getStakedTokensStakeInUsd(); const stakesInNativeCurrency = - await po.getProjectsStakeInNativeCurrency(); + await po.getStakedTokensStakeInNativeCurrency(); expect(titles.length).toBe(4); expect(titles).toEqual([ @@ -213,15 +213,15 @@ describe("ProjectsCard", () => { it("should not show info row when numberOfTopHeldTokens is the same as the number of topStakedTokens", async () => { const po = renderComponent({ - topStakedTokens: mockProjects.slice(0, 3), + topStakedTokens: mockStakedTokens.slice(0, 3), numberOfTopHeldTokens: 3, }); - const titles = await po.getProjectsTitle(); - const maturities = await po.getProjectsMaturity(); - const stakesInUsd = await po.getProjectsStakeInUsd(); + const titles = await po.getStakedTokensTitle(); + const maturities = await po.getStakedTokensMaturity(); + const stakesInUsd = await po.getStakedTokensStakeInUsd(); const stakesInNativeCurrency = - await po.getProjectsStakeInNativeCurrency(); + await po.getStakedTokensStakeInNativeCurrency(); expect(titles.length).toBe(3); expect(titles).toEqual(["Internet Computer", "Project 1", "Project 2"]); @@ -244,15 +244,15 @@ describe("ProjectsCard", () => { it("should not show info row when the number of topStakedTokens is less than numberOfTopHeldTokens like 1", async () => { const po = renderComponent({ - topStakedTokens: mockProjects.slice(0, 2), + topStakedTokens: mockStakedTokens.slice(0, 2), numberOfTopHeldTokens: 4, }); - const titles = await po.getProjectsTitle(); - const maturities = await po.getProjectsMaturity(); - const stakesInUsd = await po.getProjectsStakeInUsd(); + const titles = await po.getStakedTokensTitle(); + const maturities = await po.getStakedTokensMaturity(); + const stakesInUsd = await po.getStakedTokensStakeInUsd(); const stakesInNativeCurrency = - await po.getProjectsStakeInNativeCurrency(); + await po.getStakedTokensStakeInNativeCurrency(); expect(titles.length).toBe(2); expect(titles).toEqual(["Internet Computer", "Project 1"]); @@ -271,15 +271,15 @@ describe("ProjectsCard", () => { it("should not show info row when the number of topStakedTokens is less than numberOfTopHeldTokens like 2", async () => { const po = renderComponent({ - topStakedTokens: mockProjects.slice(0, 1), + topStakedTokens: mockStakedTokens.slice(0, 1), numberOfTopHeldTokens: 3, }); - const titles = await po.getProjectsTitle(); - const maturities = await po.getProjectsMaturity(); - const stakesInUsd = await po.getProjectsStakeInUsd(); + const titles = await po.getStakedTokensTitle(); + const maturities = await po.getStakedTokensMaturity(); + const stakesInUsd = await po.getStakedTokensStakeInUsd(); const stakesInNativeCurrency = - await po.getProjectsStakeInNativeCurrency(); + await po.getStakedTokensStakeInNativeCurrency(); expect(titles.length).toBe(1); expect(titles).toEqual(["Internet Computer"]); diff --git a/frontend/src/tests/lib/pages/Portfolio.spec.ts b/frontend/src/tests/lib/pages/Portfolio.spec.ts index bf1fb88380..fd87a00d48 100644 --- a/frontend/src/tests/lib/pages/Portfolio.spec.ts +++ b/frontend/src/tests/lib/pages/Portfolio.spec.ts @@ -49,11 +49,11 @@ describe("Portfolio page", () => { expect(await tokensCardPo.getInfoRow().isPresent()).toBe(false); }); - it("should show the NoProjectsCardPo with secondary action", async () => { + it("should show the NoStakedTokensCard with secondary action", async () => { const po = renderPage(); expect(await po.getNoStakedTokensCarPo().isPresent()).toBe(true); - // TODO: This will change once the ProjectsCard is introduced + // TODO: This will change once the StakedTokensCard is introduced // expect(await po.getNoStakedTokensCarPo().hasSecondaryAction()).toBe(true); }); }); @@ -205,7 +205,7 @@ describe("Portfolio page", () => { }); }); - describe("NoProjectsCard", () => { + describe("NoStakedTokensCard", () => { it("should display the card when the total balance is zero", async () => { const po = renderPage(); diff --git a/frontend/src/tests/page-objects/NoProjectsCard.page-object.ts b/frontend/src/tests/page-objects/NoStakedTokensCard.page-object.ts similarity index 100% rename from frontend/src/tests/page-objects/NoProjectsCard.page-object.ts rename to frontend/src/tests/page-objects/NoStakedTokensCard.page-object.ts diff --git a/frontend/src/tests/page-objects/PortfolioPage.page-object.ts b/frontend/src/tests/page-objects/PortfolioPage.page-object.ts index 30003acbdb..cd0869ad8d 100644 --- a/frontend/src/tests/page-objects/PortfolioPage.page-object.ts +++ b/frontend/src/tests/page-objects/PortfolioPage.page-object.ts @@ -1,7 +1,7 @@ -import { NoStakedTokensCardPo } from "$tests/page-objects/NoProjectsCard.page-object"; import { UsdValueBannerPo } from "$tests/page-objects/UsdValueBanner.page-object"; import { BasePageObject } from "$tests/page-objects/base.page-object"; import type { PageObjectElement } from "$tests/types/page-object.types"; +import { NoStakedTokensCardPo } from "./NoStakedTokensCard.page-object"; import { TokensCardPo } from "./TokensCard.page-object"; export class PortfolioPagePo extends BasePageObject { diff --git a/frontend/src/tests/page-objects/ProjectsCard.page-object.ts b/frontend/src/tests/page-objects/ProjectsCard.page-object.ts deleted file mode 100644 index 628ca24713..0000000000 --- a/frontend/src/tests/page-objects/ProjectsCard.page-object.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { MaturityWithTooltipPo } from "$tests/page-objects/MaturityWithTooltip.page-object"; -import { BasePageObject } from "$tests/page-objects/base.page-object"; -import type { PageObjectElement } from "$tests/types/page-object.types"; -import { nonNullish } from "@dfinity/utils"; - -class ProjectsCardRoPo extends BasePageObject { - private static readonly TID = "project-card-row"; - - static async allUnder( - element: PageObjectElement - ): Promise { - const rows = await element.allByTestId(ProjectsCardRoPo.TID); - return rows.map((el) => new ProjectsCardRoPo(el)); - } - - getTokenTitle(): Promise { - return this.getText("project-title"); - } - - async getProjectMaturity(): Promise { - const maturityWithTooltipPo = MaturityWithTooltipPo.under(this.root); - const totalMaturity = await maturityWithTooltipPo.getTotalMaturity(); - - if (nonNullish(totalMaturity)) return totalMaturity; - return this.getText("project-maturity"); - } - - getProjectStakeInUsd(): Promise { - return this.getText("project-staked-usd"); - } - - getProjectStakeInNativeCurrency(): Promise { - return this.getText("project-staked-native"); - } -} - -export class ProjectsCardPo extends BasePageObject { - private static readonly TID = "projects-card"; - - static under(element: PageObjectElement): ProjectsCardPo { - return new ProjectsCardPo(element.byTestId(ProjectsCardPo.TID)); - } - - async getRows(): Promise { - return ProjectsCardRoPo.allUnder(this.root); - } - - getAmount(): Promise { - return this.getText("amount"); - } - - getInfoRow(): PageObjectElement { - return this.getElement("info-row"); - } - - async getProjectsTitle(): Promise { - const rowsPos = await this.getRows(); - return Promise.all(rowsPos.map((po) => po.getTokenTitle())); - } - - async getProjectsMaturity(): Promise { - const rows = await this.getRows(); - return Promise.all(rows.map((row) => row.getProjectMaturity())); - } - - async getProjectsStakeInUsd(): Promise { - const rows = await this.getRows(); - return Promise.all(rows.map((row) => row.getProjectStakeInUsd())); - } - - async getProjectsStakeInNativeCurrency(): Promise { - const rows = await this.getRows(); - return Promise.all( - rows.map((row) => row.getProjectStakeInNativeCurrency()) - ); - } -} diff --git a/frontend/src/tests/page-objects/StakedTokensCard.page-object.ts b/frontend/src/tests/page-objects/StakedTokensCard.page-object.ts new file mode 100644 index 0000000000..d1487abd8a --- /dev/null +++ b/frontend/src/tests/page-objects/StakedTokensCard.page-object.ts @@ -0,0 +1,77 @@ +import { MaturityWithTooltipPo } from "$tests/page-objects/MaturityWithTooltip.page-object"; +import { BasePageObject } from "$tests/page-objects/base.page-object"; +import type { PageObjectElement } from "$tests/types/page-object.types"; +import { nonNullish } from "@dfinity/utils"; + +class StakedTokensCardRowPo extends BasePageObject { + private static readonly TID = "staked-tokens-card-row"; + + static async allUnder( + element: PageObjectElement + ): Promise { + const rows = await element.allByTestId(StakedTokensCardRowPo.TID); + return rows.map((el) => new StakedTokensCardRowPo(el)); + } + + getStakedTokenTitle(): Promise { + return this.getText("title"); + } + + async getStakedTokenMaturity(): Promise { + const maturityWithTooltipPo = MaturityWithTooltipPo.under(this.root); + const totalMaturity = await maturityWithTooltipPo.getTotalMaturity(); + + if (nonNullish(totalMaturity)) return totalMaturity; + return this.getText("maturity"); + } + + getStakedTokenStakeInUsd(): Promise { + return this.getText("stake-in-usd"); + } + + getStakedTokenStakeInNativeCurrency(): Promise { + return this.getText("stake-in-native"); + } +} + +export class StakedTokensCardPo extends BasePageObject { + private static readonly TID = "staked-tokens-card"; + + static under(element: PageObjectElement): StakedTokensCardPo { + return new StakedTokensCardPo(element.byTestId(StakedTokensCardPo.TID)); + } + + async getRows(): Promise { + return StakedTokensCardRowPo.allUnder(this.root); + } + + getAmount(): Promise { + return this.getText("amount"); + } + + getInfoRow(): PageObjectElement { + return this.getElement("info-row"); + } + + async getStakedTokensTitle(): Promise { + const rowsPos = await this.getRows(); + return Promise.all(rowsPos.map((po) => po.getStakedTokenTitle())); + } + + async getStakedTokensMaturity(): Promise { + const rows = await this.getRows(); + return Promise.all(rows.map((row) => row.getStakedTokenMaturity())); + } + + async getStakedTokensStakeInUsd(): Promise { + const rows = await this.getRows(); + return Promise.all(rows.map((row) => row.getStakedTokenStakeInUsd())); + } + + async getStakedTokensStakeInNativeCurrency(): Promise { + const rows = await this.getRows(); + return Promise.all( + rows.map((row) => row.getStakedTokenStakeInNativeCurrency()) + ); + } +} From 39fc896a7523d4f99d33b6349b10e31e8426f546 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Thu, 16 Jan 2025 19:35:43 +0100 Subject: [PATCH 09/12] TokensCard to HeldTokensCard --- ...okensCard.svelte => HeldTokensCard.svelte} | 36 +++++------ frontend/src/lib/pages/Portfolio.svelte | 4 +- ...ensCard.spec.ts => HeldTokensCard.spec.ts} | 38 +++++------ .../src/tests/lib/pages/Portfolio.spec.ts | 24 +++---- .../HeldTokensCard.page-object.ts | 64 +++++++++++++++++++ .../page-objects/PortfolioPage.page-object.ts | 8 +-- .../page-objects/TokensCard.page-object.ts | 62 ------------------ .../tests/routes/app/portfolio/page.spec.ts | 9 +-- 8 files changed, 125 insertions(+), 120 deletions(-) rename frontend/src/lib/components/portfolio/{TokensCard.svelte => HeldTokensCard.svelte} (90%) rename frontend/src/tests/lib/components/portfolio/{TokensCard.spec.ts => HeldTokensCard.spec.ts} (80%) create mode 100644 frontend/src/tests/page-objects/HeldTokensCard.page-object.ts delete mode 100644 frontend/src/tests/page-objects/TokensCard.page-object.ts diff --git a/frontend/src/lib/components/portfolio/TokensCard.svelte b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte similarity index 90% rename from frontend/src/lib/components/portfolio/TokensCard.svelte rename to frontend/src/lib/components/portfolio/HeldTokensCard.svelte index e611bddd41..1e78f5ce99 100644 --- a/frontend/src/lib/components/portfolio/TokensCard.svelte +++ b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte @@ -25,7 +25,7 @@ $: showInfoRow = topHeldTokens.length > 0 && topHeldTokens.length < 3; - +
-
+
{$i18n.portfolio.tokens_card_list_first_column} @@ -77,10 +77,10 @@ >
-
+
{#each topHeldTokens as topHeldToken (topHeldToken.domKey)} -
-
+
+
- {topHeldToken.title} + {topHeldToken.title}
@@ -173,7 +173,7 @@ gap: var(--padding); flex-grow: 1; - .tokens-header { + .header { display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; @@ -187,13 +187,13 @@ } } - .tokens-list { + .list { display: flex; flex-direction: column; background-color: var(--card-background); flex-grow: 1; - .token-row { + .row { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: @@ -209,20 +209,20 @@ border-top: 1px solid var(--elements-divider); - .token-info { + .info { grid-area: info; display: flex; align-items: center; gap: var(--padding); } - .token-native-balance, - .token-usd-balance { + .native-balance, + .usd-balance { justify-self: end; text-align: right; } - .token-native-balance { + .native-balance { grid-area: balance; font-size: 0.75rem; @@ -231,7 +231,7 @@ } } - .token-usd-balance { + .usd-balance { grid-area: usd; } } diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index 92e02ca8af..c15bd3f928 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -1,8 +1,8 @@