wip

dfinity · Dec 23, 2024 · 94104e9 · 94104e9
1 parent 169ccc6
commit 94104e9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/frontend/src/lib/components/portfolio/TotalAssetsCard.svelte b/frontend/src/lib/components/portfolio/TotalAssetsCard.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { IconAccountsPage } from "@dfinity/gix-components";
+  import UsdValueBanner from "../ui/UsdValueBanner.svelte";
+  import Card from "./Card.svelte";
+
+  const totalHoldings = 6660865;
+  const hasUnpricedTokens = true;
+</script>
+
+<Card>
+  <UsdValueBanner usdAmount={totalHoldings} {hasUnpricedTokens}>
+    <IconAccountsPage slot="icon" />
+  </UsdValueBanner>
+</Card>
diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import Card from "$lib/components/portfolio/Card.svelte";
   import LoginCard from "$lib/components/portfolio/LoginCard.svelte";
+  import TotalAssetsCard from "$lib/components/portfolio/TotalAssetsCard.svelte";
   import { authSignedInStore } from "$lib/derived/auth.derived";
 </script>
 
 <main>
-  <div class="top">
-    <Card>Card1</Card>
+  <div class="top" class:single-card={$authSignedInStore}>
+    <TotalAssetsCard />
     {#if !$authSignedInStore}
       <LoginCard />
     {/if}
@@ -28,7 +29,7 @@
 
     @include media.min-width(large) {
       display: grid;
-      grid-template-rows: auto 1fr;
+      grid-template-rows: 150px 1fr;
       gap: var(--padding-3x);
       padding: var(--padding-3x);
     }
@@ -40,15 +41,11 @@
 
       @include media.min-width(large) {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr 2fr;
 
-        &:has(:first-child:nth-last-child(1)) {
+        &.single-card {
           grid-template-columns: 1fr;
         }
-
-        &:has(:first-child:nth-last-child(2)) {
-          grid-template-columns: 1fr 2fr;
-        }
       }
     }