WIP

frontend/src/lib/components/portfolio/Card.svelte

@@ -15,5 +15,6 @@
       color var(--animation-time-normal),
       box-shadow var(--animation-time-normal);
     border-radius: var(--border-radius-2x);
+    overflow: hidden;
   }
 </style>

frontend/src/lib/components/portfolio/IcpExchangeRate.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import IC_LOGO_ROUNDED from "$lib/assets/icp-rounded.svg";
+  import TooltipIcon from "$lib/components/ui/TooltipIcon.svelte";
+  import { LEDGER_CANISTER_ID } from "$lib/constants/canister-ids.constants";
+  import { PRICE_NOT_AVAILABLE_PLACEHOLDER } from "$lib/constants/constants";
+  import { icpSwapUsdPricesStore } from "$lib/derived/icp-swap.derived";
+  import { i18n } from "$lib/stores/i18n";
+  import { formatNumber } from "$lib/utils/format.utils";
+  import { isNullish, nonNullish } from "@dfinity/utils";
+
+  export let hasError: boolean;
+
+  let icpPrice: number | undefined;
+  $: icpPrice =
+    isNullish($icpSwapUsdPricesStore) || $icpSwapUsdPricesStore === "error"
+      ? undefined
+      : $icpSwapUsdPricesStore[LEDGER_CANISTER_ID.toText()];
+
+  let icpPriceFormatted: string;
+  $: icpPriceFormatted = nonNullish(icpPrice)
+    ? formatNumber(icpPrice)
+    : PRICE_NOT_AVAILABLE_PLACEHOLDER;
+</script>
+
+<div class="exchange-rate">
+  <img
+    src={IC_LOGO_ROUNDED}
+    alt={$i18n.auth.ic_logo}
+    class="icp-icon desktop-only"
+  />
+  <span class="desktop-only">
+    1 {$i18n.core.icp} = $<span data-tid="icp-price">{icpPriceFormatted}</span>
+  </span>
+  <TooltipIcon>
+    {#if hasError}
+      {$i18n.accounts.token_price_error}
+    {:else}
+      <div class="mobile-only">
+        1 {$i18n.core.icp} = ${icpPriceFormatted}
+      </div><div>
+        {$i18n.accounts.token_price_source}
+      </div>
+    {/if}
+  </TooltipIcon>
+</div>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  .exchange-rate {
+    display: flex;
+    align-items: center;
+    gap: var(--padding-0_5x);
+
+    .icp-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  @include media.min-width(medium) {
+    .desktop-only {
+      display: initial;
+    }
+    .mobile-only {
+      display: none;
+    }
+  }
+</style>

frontend/src/lib/components/portfolio/LoginCard.svelte

@@ -12,7 +12,7 @@
     </div>
     <div class="content">
       <h2>{$i18n.portfolio.login_title}</h2>
-      <p>{$i18n.portfolio.login_description}</p>
+      <p class="description">{$i18n.portfolio.login_description}</p>
     </div>
     <div class="action">
       <SignIn />
@@ -30,6 +30,7 @@
       "action action";
     gap: var(--padding-2x);
     padding: var(--padding-2x);
+    background-color: var(--card-background-tint);
 
     @include media.min-width(medium) {
       grid-template-areas:

frontend/src/lib/components/portfolio/NoNeuronsCard.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Card from "$lib/components/portfolio/Card.svelte";
+  import { i18n } from "$lib/stores/i18n";
+  import { IconNeuronsPage } from "@dfinity/gix-components";
+
+  export let primaryCard = false;
+  const href = "/neurons";
+</script>
+
+<Card testId="no-neurons-card">
+  <div class="wrapper">
+    <div class="icon">
+      <IconNeuronsPage />
+    </div>
+    <div class="text">
+      <p>{$i18n.portfolio.no_neurons_card_description}</p>
+    </div>
+    <a {href} class={`button ${primaryCard ? "primary" : "secondary"}`}
+      >{$i18n.portfolio.no_neurons_card_button}</a
+    >
+  </div>
+</Card>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  .wrapper {
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--padding-2x);
+
+    padding: var(--padding-2x);
+    margin: 0 auto;
+    height: 100%;
+    text-align: center;
+
+    @include media.min-width(medium) {
+      gap: var(--padding-4x);
+      padding: var(--padding-6x) var(--padding-4x);
+      max-width: 400px;
+    }
+
+    .icon {
+      width: 80px;
+      height: 80px;
+
+      @include media.min-width(medium) {
+        width: 144px;
+        height: 144px;
+      }
+    }
+
+    .text {
+      color: var(--text-description);
+      p {
+        margin: 0;
+      }
+    }
+  }
+</style>

frontend/src/lib/components/portfolio/NoTokensCard.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import Card from "$lib/components/portfolio/Card.svelte";
+  import { i18n } from "$lib/stores/i18n";
+  import { IconAccountsPage } from "@dfinity/gix-components";
+
+  const href = "/tokens";
+</script>
+
+<Card testId="no-tokens-card">
+  <div class="wrapper">
+    <div class="icon">
+      <IconAccountsPage />
+    </div>
+    <div class="text">
+      <h5>{$i18n.portfolio.no_tokens_card_title}</h5>
+      <p>{$i18n.portfolio.no_tokens_card_description}</p>
+    </div>
+    <a {href} class="button primary">{$i18n.portfolio.no_tokens_card_button}</a>
+  </div>
+</Card>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  .wrapper {
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--padding-2x);
+
+    padding: var(--padding-3x) var(--padding-2x);
+    margin: 0 auto;
+    height: 100%;
+    text-align: center;
+
+    @include media.min-width(medium) {
+      gap: var(--padding-4x);
+      padding: var(--padding-6x) var(--padding-4x);
+      max-width: 450px;
+    }
+
+    .icon {
+      width: 80px;
+      height: 80px;
+
+      @include media.min-width(medium) {
+        width: 144px;
+        height: 144px;
+      }
+    }
+
+    .text {
+      text-align: center;
+      color: var(--text-description);
+
+      h5,
+      p {
+        margin: 0;
+        text-wrap: pretty;
+      }
+      h5 {
+        color: inherit;
+        font-weight: bold;
+      }
+      p {
+        margin-top: var(--padding);
+      }
+    }
+  }
+</style>

frontend/src/lib/components/portfolio/TotalAssetsCard.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import Card from "$lib/components/portfolio/Card.svelte";
+  import IcpExchangeRate from "$lib/components/portfolio/IcpExchangeRate.svelte";
+  import TooltipIcon from "$lib/components/ui/TooltipIcon.svelte";
+  import { LEDGER_CANISTER_ID } from "$lib/constants/canister-ids.constants";
+  import { PRICE_NOT_AVAILABLE_PLACEHOLDER } from "$lib/constants/constants";
+  import { icpSwapUsdPricesStore } from "$lib/derived/icp-swap.derived";
+  import { i18n } from "$lib/stores/i18n";
+  import { formatNumber } from "$lib/utils/format.utils";
+  import { isNullish, nonNullish } from "@dfinity/utils";
+
+  export let usdAmount: number | undefined;
+  export let hasUnpricedTokens: boolean = false;
+
+  let hasError: boolean;
+  $: hasError = $icpSwapUsdPricesStore === "error";
+
+  let hasPrices: boolean;
+  $: hasPrices = !hasError && nonNullish($icpSwapUsdPricesStore);
+
+  let usdAmountFormatted: string;
+  $: usdAmountFormatted =
+    nonNullish(usdAmount) && hasPrices
+      ? formatNumber(usdAmount)
+      : PRICE_NOT_AVAILABLE_PLACEHOLDER;
+
+  let icpPrice: number | undefined;
+  $: icpPrice =
+    isNullish($icpSwapUsdPricesStore) || $icpSwapUsdPricesStore === "error"
+      ? undefined
+      : $icpSwapUsdPricesStore[LEDGER_CANISTER_ID.toText()];
+
+  let icpAmount: number | undefined;
+  $: icpAmount = icpPrice && usdAmount && usdAmount / icpPrice;
+
+  let icpAmountFormatted: string;
+  $: icpAmountFormatted = nonNullish(icpAmount)
+    ? formatNumber(icpAmount)
+    : PRICE_NOT_AVAILABLE_PLACEHOLDER;
+</script>
+
+<Card testId="total-assets-card">
+  <div class="wrapper">
+    <h3>{$i18n.portfolio.total_assets_title}</h3>
+
+    <div class="pricing">
+      <div class="totals">
+        <div class="primary-amount-row">
+          <span class="primary-amount" data-tid="primary-amount">
+            ${usdAmountFormatted}
+          </span>
+          {#if hasPrices && hasUnpricedTokens}
+            <TooltipIcon>
+              {$i18n.accounts.unpriced_tokens_warning}
+            </TooltipIcon>
+          {/if}
+        </div>
+        <div class="secondary-amount" data-tid="secondary-amount">
+          {icpAmountFormatted}
+          {$i18n.core.icp}
+        </div>
+      </div>
+      <IcpExchangeRate {hasError} />
+    </div>
+  </div>
+</Card>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding);
+    box-sizing: border-box;
+
+    height: 100%;
+    padding: var(--padding-2x);
+    background-color: var(--card-background-tint);
+
+    @include media.min-width(medium) {
+      gap: var(--padding-2x);
+      padding: var(--padding-3x);
+    }
+
+    h3 {
+      margin: 0;
+    }
+
+    .pricing {
+      display: flex;
+      justify-content: space-between;
+      align-content: center;
+
+      .totals {
+        display: flex;
+        flex-direction: column;
+
+        .primary-amount {
+          font-size: 1.875rem; // 32px
+
+          @include media.min-width(medium) {
+            font-size: 2.5rem; // 40px
+          }
+        }
+        .secondary-amount {
+          color: var(--text-description);
+        }
+      }
+    }
+  }
+</style>

frontend/src/lib/constants/constants.ts

@@ -23,3 +23,5 @@ export const DAYS_IN_NON_LEAP_YEAR = 365;
 
 export const NANO_SECONDS_IN_MILLISECOND = 1_000_000;
 export const NANO_SECONDS_IN_MINUTE = NANO_SECONDS_IN_MILLISECOND * 1_000 * 60;
+
+export const PRICE_NOT_AVAILABLE_PLACEHOLDER = "-/-";

frontend/src/lib/i18n/en.json

@@ -1192,6 +1192,12 @@
   },
   "portfolio": {
     "login_title": "Session expired",
-    "login_description": "Earn rewards, participate in governance and join the communities. Login to gain optimal access of the platform."
+    "login_description": "Earn rewards, participate in governance and join the communities. Login to gain optimal access of the platform.",
+    "total_assets_title": "Total Holdings",
+    "no_tokens_card_title": "Store tokens safely, invest and become part of shaping the Internet Computer",
+    "no_tokens_card_description": "Vote on project and protocol developments and earn rewards - Ready to get started?",
+    "no_neurons_card_description": "Take part of voting for development decisions on SNS projects and earn rewards - start staking your neurons",
+    "no_tokens_card_button": "Buy ICP",
+    "no_neurons_card_button": "Start Staking"
   }
 }