Feature/KYC levels and Link color change

package.json

@@ -1,6 +1,6 @@
 {
   "name": "host-console",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "private": true,
   "homepage": "https://holo-host.github.io/host-console-ui/",
   "scripts": {

src/components/MobileTopNav.vue

@@ -2,10 +2,13 @@
 import { ref } from 'vue'
 import MenuIcon from '@/components/icons/MenuIcon.vue'
 import TheSidebar from '@/components/sidebar/TheSidebar.vue'
+import TopNav from '@/components/TopNav.vue'
 import TopNavMenu from '@/components/TopNavMenu.vue'
+import { EUserKycLevel } from '@/types/types'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    kycLevel: EUserKycLevel
     nickname: string
     agentAddress?: typeof Uint8Array | null
   }>(),
@@ -22,9 +25,10 @@ const isMobileSidebarVisible = ref(false)
     <MenuIcon @click="isMobileSidebarVisible = !isMobileSidebarVisible" />
 
     <TopNavMenu
-      :nickname="nickname"
+      :kyc-level="props.kycLevel"
+      :nickname="props.nickname"
       :white="true"
-      :agent-address="agentAddress"
+      :agent-address="props.agentAddress"
     />
 
     <TheSidebar v-if="isMobileSidebarVisible" />

src/components/PrimaryLayout.vue

@@ -100,11 +100,13 @@ onMounted(async () => {
       class="main-column"
     >
       <MobileTopNav
+        :kyc-level="userStore.kycLevel"
         :nickname="nickname"
         :agent-address="agentAddress"
       />
 
       <TopNav
+        :kyc-level="userStore.kycLevel"
         :breadcrumbs="breadcrumbsOrTitle"
         :nickname="nickname"
         :agent-address="agentAddress"

src/components/TopNav.vue

@@ -3,9 +3,11 @@ import { computed } from 'vue'
 import RightChevronIcon from '@/components/icons/RightChevronIcon.vue'
 import TopNavMenu from '@/components/TopNavMenu.vue'
 import type { BreadCrumb } from '@/types/types'
+import { EUserKycLevel } from '@/types/types'
 
 const props = withDefaults(
   defineProps<{
+    kycLevel: EUserKycLevel
     breadcrumbs: BreadCrumb[]
     agentAddress?: typeof Uint8Array | null
     nickname: string
@@ -61,8 +63,9 @@ const isSubtitleVisible = computed(
     </div>
 
     <TopNavMenu
-      :nickname="nickname"
-      :agent-address="agentAddress"
+      :kyc-level="props.kycLevel"
+      :nickname="props.nickname"
+      :agent-address="props.agentAddress"
       data-test-top-nav-menu
     />
 

src/components/TopNavMenu.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import Identicon from '@uicommon/components/Identicon.vue'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import DownTriangleIcon from '@/components/icons/DownTriangleIcon.vue'
 import { useGoToHoloFuel } from '@/composables/useGoToHoloFuel'
 import { kAuthTokenLSKey } from '@/constants.ts'
 import { kRoutes } from '@/router'
+import { EUserKycLevel } from '@/types/types'
 
 const { goToHoloFuel } = useGoToHoloFuel()
 
 const router = useRouter()
+const { t } = useI18n()
 
 const props = withDefaults(
   defineProps<{
+    kycLevel: EUserKycLevel
     nickname: string
     agentAddress?: typeof Uint8Array | null
     white?: boolean
@@ -25,6 +29,8 @@ const props = withDefaults(
 
 const isMenuOpen = ref(false)
 
+const currentLevel = computed((): number => (props.kycLevel === EUserKycLevel.one ? 1 : 2))
+
 function toggleMenu(): void {
   isMenuOpen.value = !isMenuOpen.value
 }
@@ -63,7 +69,7 @@ async function openSettingsAndCloseMenu(): Promise<void> {
         <div class="display-name">
           {{ nickname }}
           <span class="verification-status">
-            {{ $t('settings.verification.verified') }}
+            {{ t('settings.verification.current_level', { level: currentLevel }) }}
           </span>
         </div>
         <DownTriangleIcon
@@ -134,8 +140,8 @@ async function openSettingsAndCloseMenu(): Promise<void> {
 .display-name {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  text-align: right;
+  align-items: flex-start;
+  text-align: left;
   margin-left: 12px;
 }
 

src/components/dashboard/HoloFuelCard.vue

@@ -144,6 +144,7 @@ const items = computed((): DashboardCardItem[] => [
 .springboard-link {
   font-weight: bold;
   cursor: pointer;
+  color: #b0ecf0;
   text-decoration: underline;
   text-underline-offset: 4px;
 }

src/components/earnings/RedeemableHoloFuelCard.vue

@@ -130,6 +130,7 @@ const canRedeem = computed((): boolean => !isKycLevelOne.value && Number(props.r
 .springboard-link {
   font-weight: bold;
   cursor: pointer;
+  color: #b0ecf0;
   text-decoration: underline;
   text-underline-offset: 4px;
 }

src/components/settings/SettingsHolofuelSection.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
   defineProps<{
     nickname: string
     agentAddress?: Uint8Array | null
-    kycLevel: number
+    kycLevel: EUserKycLevel
   }>(),
   {
     agentAddress: null

src/locales/en.ts

@@ -173,7 +173,7 @@ export default {
     ssh_access: 'Access for HoloPort support (SSH)',
     header: 'Account Settings',
     verification: {
-      current_level: 'Verified to Level {level}',
+      current_level: 'Level {level} Verified',
       description:
         'Level 2 verification is required for transactions larger than ~10,000 GBP and other special uses of HoloFuel.',
       holo_kyc_1: 'Level 1',
@@ -182,8 +182,7 @@ export default {
       link: 'Complete level {level} verification',
       next_level_descriptions: {
         two: 'As a level 1 user, you are limited to <500 GBP of transactions per month. update your KYC to make more transactions.'
-      },
-      verified: 'Verified'
+      }
     }
   },
   sidebar: {