From 2e9f73399c4150b980302052a837ebf2ea77436c Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Mon, 19 May 2025 16:56:19 +0200 Subject: [PATCH 1/3] migrate components --- .../portfolio/HeldTokensCard.svelte | 24 ++++++++++--------- .../portfolio/StakedTokensCard.svelte | 24 +++++++++++-------- .../portfolio/TokensCardHeader.svelte | 21 +++++++++------- 3 files changed, 40 insertions(+), 29 deletions(-) diff --git a/frontend/src/lib/components/portfolio/HeldTokensCard.svelte b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte index 38b43b47353..39f62cabce4 100644 --- a/frontend/src/lib/components/portfolio/HeldTokensCard.svelte +++ b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte @@ -13,20 +13,22 @@ import { IconAccountsPage, IconHeldTokens } from "@dfinity/gix-components"; import { TokenAmountV2 } from "@dfinity/utils"; - export let topHeldTokens: UserTokenData[]; - export let usdAmount: number; - export let numberOfTopStakedTokens: number; + type Props = { + topHeldTokens: UserTokenData[]; + usdAmount: number; + numberOfTopStakedTokens: number; + }; + const { topHeldTokens, usdAmount, numberOfTopStakedTokens }: Props = $props(); const href = AppPath.Tokens; - let numberOfTopHeldTokens: number; - $: numberOfTopHeldTokens = topHeldTokens.length; - - let showInfoRow: boolean; - $: showInfoRow = shouldShowInfoRow({ - currentCardNumberOfTokens: numberOfTopHeldTokens, - otherCardNumberOfTokens: numberOfTopStakedTokens, - }); + const numberOfTopHeldTokens = $derived(topHeldTokens.length); + const showInfoRow = $derived( + shouldShowInfoRow({ + currentCardNumberOfTokens: numberOfTopHeldTokens, + otherCardNumberOfTokens: numberOfTopStakedTokens, + }) + ); diff --git a/frontend/src/lib/components/portfolio/StakedTokensCard.svelte b/frontend/src/lib/components/portfolio/StakedTokensCard.svelte index 69523941dcf..4567c3c357e 100644 --- a/frontend/src/lib/components/portfolio/StakedTokensCard.svelte +++ b/frontend/src/lib/components/portfolio/StakedTokensCard.svelte @@ -14,20 +14,24 @@ import { IconNeuronsPage, IconStakedTokens } from "@dfinity/gix-components"; import { TokenAmountV2 } from "@dfinity/utils"; - export let topStakedTokens: TableProject[]; - export let usdAmount: number; - export let numberOfTopHeldTokens: number; + type Props = { + topStakedTokens: TableProject[]; + usdAmount: number; + numberOfTopHeldTokens: number; + }; + + const { topStakedTokens, usdAmount, numberOfTopHeldTokens }: Props = $props(); const href = AppPath.Staking; - let numberOfTopStakedTokens: number; - $: numberOfTopStakedTokens = topStakedTokens.length; + const numberOfTopStakedTokens = $derived(topStakedTokens.length); - let showInfoRow: boolean; - $: showInfoRow = shouldShowInfoRow({ - currentCardNumberOfTokens: numberOfTopStakedTokens, - otherCardNumberOfTokens: numberOfTopHeldTokens, - }); + const showInfoRow = $derived( + shouldShowInfoRow({ + currentCardNumberOfTokens: numberOfTopStakedTokens, + otherCardNumberOfTokens: numberOfTopHeldTokens, + }) + ); diff --git a/frontend/src/lib/components/portfolio/TokensCardHeader.svelte b/frontend/src/lib/components/portfolio/TokensCardHeader.svelte index 27c4bbe8cef..e60c66d3736 100644 --- a/frontend/src/lib/components/portfolio/TokensCardHeader.svelte +++ b/frontend/src/lib/components/portfolio/TokensCardHeader.svelte @@ -4,15 +4,20 @@ import { formatCurrencyNumber } from "$lib/utils/format.utils"; import { IconRight } from "@dfinity/gix-components"; - export let usdAmount: number; - export let href: string; - export let title: string; - export let linkText: string; + type Props = { + usdAmount: number; + href: string; + title: string; + linkText: string; + }; - let usdAmountFormatted: string; - $: usdAmountFormatted = $authSignedInStore - ? formatCurrencyNumber(usdAmount) - : PRICE_NOT_AVAILABLE_PLACEHOLDER; + const { usdAmount, href, title, linkText }: Props = $props(); + + const usdAmountFormatted = $derived( + $authSignedInStore + ? formatCurrencyNumber(usdAmount) + : PRICE_NOT_AVAILABLE_PLACEHOLDER + );
From a8a3e1c34c302d6b9180ceaf9ca96d29ac4ed64c Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Mon, 19 May 2025 17:06:52 +0200 Subject: [PATCH 2/3] migrate slots --- .../src/lib/components/portfolio/HeldTokensCard.svelte | 8 +++++--- .../src/lib/components/portfolio/StakedTokensCard.svelte | 4 ++-- .../src/lib/components/portfolio/TokensCardHeader.svelte | 6 ++++-- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/frontend/src/lib/components/portfolio/HeldTokensCard.svelte b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte index 39f62cabce4..e7219390f07 100644 --- a/frontend/src/lib/components/portfolio/HeldTokensCard.svelte +++ b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte @@ -17,8 +17,10 @@ topHeldTokens: UserTokenData[]; usdAmount: number; numberOfTopStakedTokens: number; + icon?: Component; }; - const { topHeldTokens, usdAmount, numberOfTopStakedTokens }: Props = $props(); + const { topHeldTokens, usdAmount, numberOfTopStakedTokens, icon }: Props = + $props(); const href = AppPath.Tokens; @@ -43,9 +45,9 @@ title={$i18n.portfolio.held_tokens_card_title} linkText={$i18n.portfolio.held_tokens_card_link} > - + {#snippet icon()} - + {/snippet}
diff --git a/frontend/src/lib/components/portfolio/StakedTokensCard.svelte b/frontend/src/lib/components/portfolio/StakedTokensCard.svelte index 4567c3c357e..d0066aea216 100644 --- a/frontend/src/lib/components/portfolio/StakedTokensCard.svelte +++ b/frontend/src/lib/components/portfolio/StakedTokensCard.svelte @@ -46,9 +46,9 @@ title={$i18n.portfolio.staked_tokens_card_title} linkText={$i18n.portfolio.staked_tokens_card_link} > - + {#snippet icon()} - + {/snippet}
diff --git a/frontend/src/lib/components/portfolio/TokensCardHeader.svelte b/frontend/src/lib/components/portfolio/TokensCardHeader.svelte index e60c66d3736..0e87382612d 100644 --- a/frontend/src/lib/components/portfolio/TokensCardHeader.svelte +++ b/frontend/src/lib/components/portfolio/TokensCardHeader.svelte @@ -3,15 +3,17 @@ import { authSignedInStore } from "$lib/derived/auth.derived"; import { formatCurrencyNumber } from "$lib/utils/format.utils"; import { IconRight } from "@dfinity/gix-components"; + import type { Snippet } from "svelte"; type Props = { usdAmount: number; href: string; title: string; linkText: string; + icon: Snippet; }; - const { usdAmount, href, title, linkText }: Props = $props(); + const { usdAmount, href, title, linkText, icon }: Props = $props(); const usdAmountFormatted = $derived( $authSignedInStore @@ -23,7 +25,7 @@
{title}
From f79c0c4f9f86ceb27fe952a5fe3085e2c9ac5715 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Mon, 19 May 2025 17:26:19 +0200 Subject: [PATCH 3/3] fix issue with slot --- frontend/src/lib/components/portfolio/HeldTokensCard.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/lib/components/portfolio/HeldTokensCard.svelte b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte index e7219390f07..8fcbc839d35 100644 --- a/frontend/src/lib/components/portfolio/HeldTokensCard.svelte +++ b/frontend/src/lib/components/portfolio/HeldTokensCard.svelte @@ -17,10 +17,8 @@ topHeldTokens: UserTokenData[]; usdAmount: number; numberOfTopStakedTokens: number; - icon?: Component; }; - const { topHeldTokens, usdAmount, numberOfTopStakedTokens, icon }: Props = - $props(); + const { topHeldTokens, usdAmount, numberOfTopStakedTokens }: Props = $props(); const href = AppPath.Tokens;