Skip to content

Commit

Permalink
refactor(portfolio): simplify getTopTokens and improve naming consist…
Browse files Browse the repository at this point in the history
…ency (#6167)

# Motivation

Simplifies code and maintains consistent naming conventions.

# Changes

- Removed an unnecessary parameter in `getTopTokens`.  
- Renamed `userTokensData` to `userTokens` for accuracy, as the type is
`UserToken`.
- Renamed `topTokens` to `topHeldTokens` to maintain consistency with
`topStakedTokens`.
- Renamed `TokensCard` and `NoTokensCard` to `HeldTokensCard` and
`NoHeldTokensCard`
 
# Tests

- The tests should pass as it did before.

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary
yhabib authored Jan 16, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 9c87203 commit e8f6469
Showing 21 changed files with 397 additions and 385 deletions.
Original file line number Diff line number Diff line change
@@ -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,26 +22,26 @@
// 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;
</script>

<Card testId="tokens-card">
<Card testId="held-tokens-card">
<div
class="wrapper"
role="region"
aria-label={$i18n.portfolio.tokens_card_title}
aria-label={$i18n.portfolio.held_tokens_card_title}
>
<div class="header">
<div class="header-wrapper">
<div class="icon" aria-hidden="true">
<IconAccountsPage />
</div>
<div class="text-content">
<h5 class="title">{$i18n.portfolio.tokens_card_title}</h5>
<h5 class="title">{$i18n.portfolio.held_tokens_card_title}</h5>
<p
class="amount"
data-tid="amount"
aria-label={`${$i18n.portfolio.tokens_card_title}: ${usdAmount}`}
aria-label={`${$i18n.portfolio.held_tokens_card_title}: ${usdAmount}`}
>
${usdAmountFormatted}
</p>
@@ -50,57 +50,62 @@
<a
{href}
class="button secondary"
aria-label={$i18n.portfolio.tokens_card_link}
aria-label={$i18n.portfolio.held_tokens_card_link}
>
<span class="mobile-only">
<IconRight />
</span>
<span class="tablet-up">
{$i18n.portfolio.tokens_card_link}
{$i18n.portfolio.held_tokens_card_link}
</span>
</a>
</div>
<div class="body" role="table">
<div class="tokens-header" role="row">
<div class="header" role="row">
<span role="columnheader"
>{$i18n.portfolio.tokens_card_list_first_column}</span
>{$i18n.portfolio.held_tokens_card_list_first_column}</span
>

<span class="mobile-only justify-end" role="columnheader"
>{$i18n.portfolio.tokens_card_list_second_column_mobile}</span
>{$i18n.portfolio.held_tokens_card_list_second_column_mobile}</span
>
<span class="tablet-up justify-end" role="columnheader"
>{$i18n.portfolio.tokens_card_list_second_column}</span
>{$i18n.portfolio.held_tokens_card_list_second_column}</span
>
<span class="tablet-up justify-end" role="columnheader"
>{$i18n.portfolio.tokens_card_list_third_column}</span
>{$i18n.portfolio.held_tokens_card_list_third_column}</span
>
</div>

<div class="tokens-list" role="rowgroup">
{#each topTokens as token (token.domKey)}
<div class="token-row" data-tid="token-card-row" role="row">
<div class="token-info" role="cell">
<div class="list" role="rowgroup">
{#each topHeldTokens as topHeldToken (topHeldToken.domKey)}
<div class="row" data-tid="held-token-card-row" role="row">
<div class="info" role="cell">
<div>
<Logo src={token.logo} alt={token.title} size="medium" framed />
<Logo
src={topHeldToken.logo}
alt={topHeldToken.title}
size="medium"
framed
/>
</div>
<span data-tid="token-title">{token.title}</span>
<span data-tid="title">{topHeldToken.title}</span>
</div>

<div
class="token-native-balance"
data-tid="token-native-balance"
class="balance-native"
data-tid="balance-in-native"
role="cell"
>
<AmountDisplay singleLine amount={token.balance} />
<AmountDisplay singleLine amount={topHeldToken.balance} />
</div>
<div
class="token-usd-balance"
data-tid="token-usd-balance"
class="balance-usd"
data-tid="balance-in-usd"
role="cell"
aria-label={`${token.title} USD: ${token?.balanceInUsd ?? 0}`}
aria-label={`${topHeldToken.title} USD: ${topHeldToken?.balanceInUsd ?? 0}`}
>
${formatNumber(token?.balanceInUsd ?? 0)}
${formatNumber(topHeldToken?.balanceInUsd ?? 0)}
</div>
</div>
{/each}
@@ -110,7 +115,7 @@
<IconAccountsPage />
</div>
<div class="message">
{$i18n.portfolio.tokens_card_info_row}
{$i18n.portfolio.held_tokens_card_info_row}
</div>
</div>
{/if}
@@ -168,7 +173,7 @@
gap: var(--padding);
flex-grow: 1;
.tokens-header {
.header {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-between;
@@ -182,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:
@@ -204,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 {
.balance-native,
.balance-usd {
justify-self: end;
text-align: right;
}
.token-native-balance {
.balance-native {
grid-area: balance;
font-size: 0.75rem;
@@ -226,7 +231,7 @@
}
}
.token-usd-balance {
.balance-usd {
grid-area: usd;
}
}
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
const href = buildAccountsUrl({ universe: OWN_CANISTER_ID_TEXT });
</script>

<Card testId="no-tokens-card">
<Card testId="no-held-tokens-card">
<div class="wrapper">
<div class="icon">
<IconAccountsPage />
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
const href = AppPath.Staking;
</script>

<Card testId="no-neurons-card">
<Card testId="no-staked-tokens-card">
<div class="wrapper">
<div class="icon">
<IconNeuronsPage />
Original file line number Diff line number Diff line change
@@ -25,30 +25,30 @@
let numberOfTopStakedTokens: number;
$: numberOfTopStakedTokens = topStakedTokens.length;
// Show an informational row when there are fewer projects than tokens.
// Show an informational row when there are fewer staked tokens than held tokens.
// This ensures both cards have consistent heights by filling empty space
// with a message instead of leaving blank space.
let showInfoRow: boolean;
$: showInfoRow = numberOfTopHeldTokens - numberOfTopStakedTokens > 0;
</script>

<Card testId="projects-card">
<Card testId="staked-tokens-card">
<div
class="wrapper"
role="region"
aria-label={$i18n.portfolio.projects_card_title}
aria-label={$i18n.portfolio.staked_tokens_card_title}
>
<div class="header">
<div class="header-wrapper">
<div class="icon" aria-hidden="true">
<IconNeuronsPage />
</div>
<div class="text-content">
<h5 class="title">{$i18n.portfolio.projects_card_title}</h5>
<h5 class="title">{$i18n.portfolio.staked_tokens_card_title}</h5>
<p
class="amount"
data-tid="amount"
aria-label={`${$i18n.portfolio.projects_card_title}: ${usdAmount}`}
aria-label={`${$i18n.portfolio.staked_tokens_card_title}: ${usdAmount}`}
>
${usdAmountFormatted}
</p>
@@ -57,36 +57,36 @@
<a
{href}
class="button secondary"
aria-label={$i18n.portfolio.projects_card_link}
aria-label={$i18n.portfolio.staked_tokens_card_link}
>
<span class="mobile-only">
<IconRight />
</span>
<span class="tablet-up">
{$i18n.portfolio.projects_card_link}
{$i18n.portfolio.staked_tokens_card_link}
</span>
</a>
</div>
<div class="body" role="table">
<div class="header" role="row">
<span role="columnheader"
>{$i18n.portfolio.projects_card_list_first_column}</span
>{$i18n.portfolio.staked_tokens_card_list_first_column}</span
>

<span class="mobile-only justify-end" role="columnheader"
>{$i18n.portfolio.projects_card_list_second_column_mobile}</span
>{$i18n.portfolio.staked_tokens_card_list_second_column_mobile}</span
>
<span class="tablet-up justify-end" role="columnheader"
>{$i18n.portfolio.projects_card_list_second_column}</span
>{$i18n.portfolio.staked_tokens_card_list_second_column}</span
>
<span class="tablet-up justify-end" role="columnheader"
>{$i18n.portfolio.projects_card_list_third_column}</span
>{$i18n.portfolio.staked_tokens_card_list_third_column}</span
>
</div>

<div class="list" role="rowgroup">
{#each topStakedTokens as stakedToken (stakedToken.domKey)}
<div class="row" data-tid="project-card-row" role="row">
<div class="row" data-tid="staked-tokens-card-row" role="row">
<div class="info" role="cell">
<div>
<Logo
@@ -96,10 +96,10 @@
framed
/>
</div>
<span data-tid="project-title">{stakedToken.title}</span>
<span data-tid="title">{stakedToken.title}</span>
</div>

<div class="maturity" data-tid="project-maturity" role="cell">
<div class="maturity" data-tid="maturity" role="cell">
{#if $authSignedInStore}
<MaturityWithTooltip
availableMaturity={stakedToken?.availableMaturity ?? 0n}
@@ -110,16 +110,16 @@
{/if}
</div>
<div
class="staked-usd"
data-tid="project-staked-usd"
class="stake-usd"
data-tid="stake-in-usd"
role="cell"
aria-label={`${stakedToken.title} USD: ${stakedToken?.stakeInUsd ?? 0}`}
>
${formatNumber(stakedToken?.stakeInUsd ?? 0)}
</div>
<div
class="staked-native"
data-tid="project-staked-native"
class="stake-native"
data-tid="stake-in-native"
role="cell"
aria-label={`${stakedToken.title} D: ${stakedToken?.stakeInUsd ?? 0}`}
>
@@ -140,7 +140,7 @@
<IconNeuronsPage />
</div>
<div class="message">
{$i18n.portfolio.projects_card_info_row}
{$i18n.portfolio.staked_tokens_card_info_row}
</div>
</div>
</div>
@@ -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;
28 changes: 14 additions & 14 deletions frontend/src/lib/i18n/en.json
Original file line number Diff line number Diff line change
@@ -1195,19 +1195,19 @@
"no_tokens_card_button": "Buy ICP",
"no_neurons_card_description": "Take part in voting for development decisions on SNS projects and earn rewards - start staking your neurons",
"no_neurons_card_button": "Start Staking",
"tokens_card_title": "Total Token Balance",
"tokens_card_link": "View tokens",
"tokens_card_list_first_column": "Top Tokens Held",
"tokens_card_list_second_column_mobile": "Balance",
"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."
"held_tokens_card_title": "Total Token Balance",
"held_tokens_card_link": "View tokens",
"held_tokens_card_list_first_column": "Top Tokens Held",
"held_tokens_card_list_second_column_mobile": "Balance",
"held_tokens_card_list_second_column": "Value Native",
"held_tokens_card_list_third_column": "Value $",
"held_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.",
"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."
}
}
Loading

0 comments on commit e8f6469

Please sign in to comment.