Merge pull request #113 from Holo-Host/feature/kyc-level-two

Feature/kyc level two

src/App.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import TheBanner from '@uicommon/components/TheBanner.vue'
 import TheOverlay from '@uicommon/components/TheOverlay.vue'
+import TheErrorModal from '@/components/ErrorModal.vue'
 </script>
 
 <template>
   <TheBanner />
   <TheOverlay />
+  <TheErrorModal />
   <router-view />
 </template>

src/components/BaseTooltip.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+defineProps<{
+  isVisible: boolean
+}>()
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="isVisible"
+      class="holo-tooltip"
+    >
+      <slot />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.holo-tooltip {
+  position: absolute;
+  z-index: 50;
+  right: 12px;
+  top: 20px;
+  background: var(--grey-color);
+  border-radius: 2px;
+  font-size: 14px;
+  line-height: 19px;
+  color: var(--white-color);
+  margin-top: 1px;
+  padding: 8px 12px;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+
+.holo-tooltip::before {
+  position: absolute;
+  right: 7px;
+  top: -5px;
+  content: '';
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--grey-color) transparent;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease 0.5s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/ErrorModal.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
+import { useModals } from '@uicommon/composables/useModals'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseModal from '@uicommon/components/BaseModal.vue'
+import { EModal } from '@/constants/ui'
+
+const { t } = useI18n()
+
+const title = ref('')
+const description = ref('')
+const { visibleModal, hideModal } = useModals()
+
+function close() {
+  hideModal()
+}
+</script>
+
+<template>
+  <BaseModal
+    :is-visible="visibleModal === EModal.error_modal"
+    @close="close"
+  >
+		<div class="error-modal">
+      <p class="error-modal__title">
+        <ExclamationTriangleIcon class="error-modal__icon" />
+        <span class="mt-4">{{ t('$.errors.unexpected') }}</span>
+      </p>
+      <div class="error-modal__description">
+        <p>We are sorry but something went wrong on our side.</p>
+        <p>
+          Please try again, and if the problem persists, contact our support at
+          <a href="mailto:[email protected]?subject=Springboard support&body=">[email protected]</a>.
+        </p>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<style scoped lang="scss">
+.error-modal {
+	&__title {
+		display: flex;
+		align-items: center;
+		margin-top: 6px;
+		font-size: 26px;
+		font-weight: 600;
+		text-align: center;
+	}
+
+	&__icon {
+		width: 50px;
+		height: 50px;
+		margin-right: 8px;
+		color: #F87171;
+	}
+
+	&__description {
+		margin-top: 40px;
+		padding: 0 46px;
+	}
+}
+</style>

src/components/TopNavMenu.vue

@@ -63,7 +63,7 @@ async function openSettingsAndCloseMenu(): Promise<void> {
         <div class="display-name">
           {{ nickname }}
           <span class="verification-status">
-            Unverified
+            {{ $t('settings.verification.verified') }}
           </span>
         </div>
         <DownTriangleIcon

src/components/dashboard/HoloFuelCard.vue

@@ -1,29 +1,33 @@
 <script setup lang="ts">
 import BaseCard from '@uicommon/components/BaseCard.vue'
 import { formatCurrency } from '@uicommon/utils/numbers'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import BaseTooltip from '@/components/BaseTooltip.vue'
+import RightArrowIcon from '@/components/icons/FatArrowIcon.vue'
 import router, { kRoutes } from '@/router'
 import { isError as isErrorPredicate } from '@/types/predicates'
-import type { DashboardCardItem } from '@/types/types'
+import type { DashboardCardItem, HoloFuelCardData, Error } from '@/types/types'
+import { EUserKycLevel } from '@/types/types'
 
 const { t } = useI18n()
 
 const props = defineProps<{
-  data: Data | { error: unknown }
+  data: HoloFuelCardData | Error
   isLoading: boolean
 }>()
 
 const isError = computed((): boolean => isErrorPredicate(props.data) && !!props.data.error)
 
 const emit = defineEmits(['try-again-clicked'])
 
-interface Data {
-  available: string
-  redeemable: string
-}
+const isKycLevelOne = computed((): boolean => props.data.kycLevel === EUserKycLevel.one)
+
+const canRedeem = computed(
+  (): boolean => !isError.value && !isKycLevelOne.value && Number(props.data.redeemable) > 0
+)
 
-const canRedeem = computed((): boolean => !isError.value && Number(props.data.redeemable) > 0)
+const isRedeemHoloFuelTooltipVisible = ref(false)
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call */
 const items = computed((): DashboardCardItem[] => [
@@ -70,20 +74,38 @@ const items = computed((): DashboardCardItem[] => [
       </span>
     </div>
 
-    <button
-      :disabled="!canRedeem"
-      class="redeem-button"
-      @click="router.push({ name: kRoutes.redeemHoloFuel.name })"
+    <div
+      class="redeem-button-wrapper"
+      @mouseover="() => isKycLevelOne ? isRedeemHoloFuelTooltipVisible = true : null"
+      @mouseleave="() => isKycLevelOne ? isRedeemHoloFuelTooltipVisible = false: null"
+      @click="() => isKycLevelOne ? isRedeemHoloFuelTooltipVisible = true: null"
     >
-      {{ $t('holofuel.redeem_holofuel') }}
-    </button>
+      <button
+        :disabled="!canRedeem"
+        class="redeem-button"
+        @click="router.push({ name: kRoutes.redeemHoloFuel.name })"
+      >
+        {{ $t('holofuel.redeem_holofuel') }}
+      </button>
+
+      <BaseTooltip
+        class="redeem-button__tooltip"
+        :is-visible="isRedeemHoloFuelTooltipVisible"
+      >
+        {{ $t('redemption.redeem_holofuel.kyc_level_one_notice') }}
+      </BaseTooltip>
+    </div>
   </BaseCard>
 </template>
 
 <style scoped lang="scss">
+.redeem-button-wrapper {
+  position: relative;
+  align-self: center;
+}
+
 .redeem-button {
   margin-top: 10px;
-  align-self: center;
   border: none;
   color: white;
   font-size: 12px;
@@ -99,6 +121,12 @@ const items = computed((): DashboardCardItem[] => [
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  &__tooltip {
+    top: 48px;
+    right: 55px;
+    width: 260px;
+  }
 }
 
 .margin-bottom {

src/components/earnings/RedeemableHoloFuelCard.vue

@@ -2,28 +2,37 @@
 import BaseCard from '@uicommon/components/BaseCard.vue'
 import BaseLinkButton from '@uicommon/components/BaseLinkButton.vue'
 import { formatCurrency } from '@uicommon/utils/numbers'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import BaseTooltip from '@/components/BaseTooltip.vue'
 import CardHeader from '@/components/earnings/CardHeader.vue'
 import RightArrowIcon from '@/components/icons/FatArrowIcon.vue'
 import RedemptionHistoryIcon from '@/components/icons/RedemptionHistoryIcon.vue'
 import TransferIcon from '@/components/icons/TransferIcon.vue'
 import { useGoToHoloFuel } from '@/composables/useGoToHoloFuel'
 import { kRoutes } from '@/router'
+import { EUserKycLevel } from '@/types/types'
 
 const emit = defineEmits(['try-again-clicked'])
 
 const { goToHoloFuel } = useGoToHoloFuel()
 
 const props = defineProps<{
-  data: number
+  redeemableValue: number
+  kycLevel: EUserKycLevel
   isLoading: boolean
   isError: boolean
 }>()
 
+const isRedeemHoloFuelTooltipVisible = ref(false)
+
 const redeemableHoloFuel = computed((): number =>
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return
-  formatCurrency(Number(props.data) || 0)
+  formatCurrency(Number(props.redeemableValue) || 0)
 )
+
+const isKycLevelOne = computed((): boolean => props.kycLevel === EUserKycLevel.one)
+
+const canRedeem = computed((): boolean => !isKycLevelOne.value && Number(props.redeemableValue) > 0)
 </script>
 
 <template>
@@ -47,13 +56,27 @@ const redeemableHoloFuel = computed((): number =>
         class="redeemable-holofuel__link"
       />
 
-      <BaseLinkButton
-        :is-disabled="props.data === 0"
-        :to="kRoutes.redeemHoloFuel.path"
-        :icon="RightArrowIcon"
-        :label="$t('earnings.redeem_holofuel')"
-        class="redeemable-holofuel__link"
-      />
+      <div
+        class="redeemable-holofuel__redeem-button"
+        @mouseover="() => isKycLevelOne ? isRedeemHoloFuelTooltipVisible = true : null"
+        @mouseleave="() => isKycLevelOne ? isRedeemHoloFuelTooltipVisible = false: null"
+        @click="() => isKycLevelOne ? isRedeemHoloFuelTooltipVisible = true: null"
+      >
+        <BaseLinkButton
+          :is-disabled="!canRedeem"
+          :to="kRoutes.redeemHoloFuel.path"
+          :icon="RightArrowIcon"
+          :label="$t('earnings.redeem_holofuel')"
+          class="redeemable-holofuel__link"
+        />
+
+        <BaseTooltip
+          class="redeemable-holofuel__redeem-button-tooltip"
+          :is-visible="isRedeemHoloFuelTooltipVisible"
+        >
+          {{ $t('redemption.redeem_holofuel.kyc_level_one_notice') }}
+        </BaseTooltip>
+      </div>
 
       <BaseLinkButton
         to=""
@@ -84,6 +107,16 @@ const redeemableHoloFuel = computed((): number =>
     margin-right: 30px;
     padding-right: 40px;
   }
+
+  &__redeem-button {
+    position: relative;
+
+    &-tooltip {
+      top: 48px;
+      right: 80px;
+      width: 260px;
+    }
+  }
 }
 
 @media screen and (max-width: 1050px) {

src/components/settings/SettingsHolofuelSection.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import HoloFuelAddress from './HoloFuelAddress.vue'
 import SettingsRow from './SettingsRow.vue'
 import SettingsSection from './SettingsSection.vue'
 import LeaveSiteIcon from '@/components/icons/LeaveSiteIcon.vue'
 import { useGoToSpringboard } from '@/composables/useGoToSpringboard'
+import { EUserKycLevel } from '@/types/types'
 
 const { goToSpringboard } = useGoToSpringboard()
 
@@ -14,13 +16,15 @@ const props = withDefaults(
   defineProps<{
     nickname: string
     agentAddress?: Uint8Array | null
-    currentLevel?: number
+    kycLevel: number
   }>(),
   {
-    agentAddress: null,
-    currentLevel: 1
+    agentAddress: null
   }
 )
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+const currentLevel = computed((): number => (props.kycLevel === EUserKycLevel.one ? 1 : 2))
 </script>
 
 <template>
@@ -44,17 +48,21 @@ const props = withDefaults(
       :label="t('settings.verification.label')"
     >
       <div class="flex flex-col">
-        <span>{{ t('settings.verification.current_level', { level: props.currentLevel }) }}</span>
-        <p class="verification__description">
-          {{ t('settings.verification.description') }}
+        <span>{{ t('settings.verification.current_level', { level: currentLevel }) }}</span>
+        <p
+          v-if="currentLevel === 1"
+          class="verification__description"
+        >
+          {{ t('settings.verification.next_level_descriptions.two') }}
         </p>
         <p
+          v-if="currentLevel === 1"
           class="springboard-link"
           @click="goToSpringboard"
         >
           <LeaveSiteIcon />
           <span class="holofuel-address__link-label">
-            {{ t('settings.verification.link', { level: props.currentLevel + 1 }) }}
+            {{ t('settings.verification.link', { level: currentLevel + 1 }) }}
           </span>
         </p>
       </div>