no assets cards

dfinity · Dec 27, 2024 · 9318d21 · 9318d21
1 parent 4ffea32
commit 9318d21
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 3 deletions.
diff --git a/frontend/src/lib/components/portfolio/NoNeuronsCard.svelte b/frontend/src/lib/components/portfolio/NoNeuronsCard.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import { IconAccountsPage } from "@dfinity/gix-components";
+  import Card from "./Card.svelte";
+
+  export let primaryCard = false;
+  const href = "/neurons";
+</script>
+
+<Card testId="no-neurons-card">
+  <div class="wrapper">
+    <div class="icon">
+      <IconAccountsPage />
+    </div>
+    <div class="text">
+      <p class="description">{$i18n.portfolio.no_neurons_card_description}</p>
+    </div>
+    <a
+      {href}
+      class="button"
+      class:primary={primaryCard}
+      class:secondary={!primaryCard}>{$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: center;
+    align-items: center;
+    gap: var(--padding-4x);
+
+    padding: var(--padding-3x);
+    margin: 0 auto;
+    max-width: 400px;
+    height: 100%;
+    text-align: center;
+
+    .icon {
+      width: 80px;
+      height: 80px;
+
+      @include media.min-width(medium) {
+        width: 144px;
+        height: 144px;
+      }
+    }
+    .text {
+      p {
+        margin: 0;
+        margin-top: var(--padding);
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/lib/components/portfolio/NoTokensCard.svelte b/frontend/src/lib/components/portfolio/NoTokensCard.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import { IconAccountsPage } from "@dfinity/gix-components";
+  import Card from "./Card.svelte";
+
+  const href = "/tokens";
+</script>
+
+<Card testId="no-tokens-card">
+  <div class="wrapper">
+    <div class="icon">
+      <IconAccountsPage />
+    </div>
+    <div class="text">
+      <h4>{$i18n.portfolio.no_tokens_card_title}</h4>
+      <p class="description">{$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: center;
+    align-items: center;
+    gap: var(--padding-4x);
+
+    padding: var(--padding-3x);
+    margin: 0 auto;
+    max-width: 450px;
+    height: 100%;
+    text-align: center;
+
+    .icon {
+      width: 80px;
+      height: 80px;
+
+      @include media.min-width(medium) {
+        width: 144px;
+        height: 144px;
+      }
+    }
+
+    .text {
+      text-align: center;
+      h4,
+      p {
+        margin: 0;
+        text-wrap: pretty;
+      }
+      p {
+        margin-top: var(--padding);
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
@@ -1192,6 +1192,11 @@
   },
   "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.",
+    "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"
   }
 }
diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import Card from "$lib/components/portfolio/Card.svelte";
   import LoginCard from "$lib/components/portfolio/LoginCard.svelte";
+  import NoNeuronsCard from "$lib/components/portfolio/NoNeuronsCard.svelte";
+  import NoTokensCard from "$lib/components/portfolio/NoTokensCard.svelte";
   import { authSignedInStore } from "$lib/derived/auth.derived";
 </script>
 
@@ -12,8 +14,8 @@
     <Card>Card1</Card>
   </div>
   <div class="content">
-    <Card>Card3</Card>
-    <Card>Card4</Card>
+    <NoTokensCard />
+    <NoNeuronsCard />
   </div>
 </main>
 
@@ -55,6 +57,7 @@
     .content {
       display: grid;
       grid-template-columns: 1fr;
+      grid-template-rows: auto;
       gap: var(--padding-2x);
 
       @include media.min-width(large) {

diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
@@ -1258,6 +1258,11 @@ interface I18nImport_token {
 interface I18nPortfolio {
   login_title: string;
   login_description: string;
+  no_tokens_card_title: string;
+  no_tokens_card_description: string;
+  no_neurons_card_description: string;
+  no_tokens_card_button: string;
+  no_neurons_card_button: string;
 }
 
 interface I18nNeuron_state {