Dev main merge

src/components/OTPInput.vue

@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import useArcanaAuth from "@/use/arcanaAuth";
+import useLoaderStore from "@/stores/loader";
+import { computed, defineAsyncComponent, ref } from "vue";
+
+const AppOverlay = defineAsyncComponent(
+  () => import("@/components/overlay.vue")
+);
+
+const emit = defineEmits<{
+  (e: "dismiss"): void;
+  (e: "resend"): void;
+  (e: "success"): void;
+}>();
+
+const otpLength = 6;
+const attemptsUsed = ref(0);
+const totalAttemptsAllowed = 3;
+const resendCounter = ref(30);
+
+const otp = ref("");
+const otpInputs = ref<HTMLInputElement[]>([]);
+const arcanaAuth = useArcanaAuth();
+const loader = useLoaderStore();
+const hasOTPError = ref(false);
+startOTPCounterTimer();
+
+function startOTPCounterTimer() {
+  resendCounter.value = 30;
+  const interval = setInterval(() => {
+    --resendCounter.value;
+    if (resendCounter.value === 0) {
+      clearInterval(interval);
+    }
+  }, 1000);
+}
+
+function handlePaste(event: ClipboardEvent) {
+  hasOTPError.value = false;
+  if (!event.clipboardData) return;
+  const paste = event.clipboardData.getData("text/plain");
+  if (paste.startsWith("0x") || isNaN(Number(paste))) return;
+  if (paste.length === otpLength) {
+    otp.value = paste;
+  }
+}
+
+function focusInput(index: number) {
+  otpInputs.value[index]?.focus();
+}
+
+const isValidOTP = computed(
+  () => otp.value.length === otpLength && !isNaN(Number(otp.value))
+);
+
+function handleKeyDown(event: KeyboardEvent, index: number) {
+  hasOTPError.value = false;
+  if ([event.code, event.key].includes("Backspace")) {
+    event.preventDefault();
+    otp.value = otp.value.slice(0, index) + otp.value.slice(index + 1);
+    focusInput(index - 1);
+  } else if (event.code === "Delete") {
+    event.preventDefault();
+    otp.value = otp.value.slice(0, index) + otp.value.slice(index + 1);
+  } else if (event.code === "ArrowLeft") {
+    event.preventDefault();
+    if (index !== 0) focusInput(index - 1);
+  } else if (event.code === "ArrowRight") {
+    event.preventDefault();
+    if (index !== 5) focusInput(index + 1);
+  } else if (
+    event.code === "Spacebar" ||
+    event.code === "Space" ||
+    event.code === "ArrowUp" ||
+    event.code === "ArrowDown"
+  ) {
+    event.preventDefault();
+  } else if (!isNaN(Number(event.key))) {
+    event.preventDefault();
+    otp.value =
+      otp.value.slice(0, index) + event.key + otp.value.slice(index + 1);
+    focusInput(index + 1);
+  }
+}
+
+async function submitOTP() {
+  hasOTPError.value = false;
+  try {
+    loader.showLoader("Verifying the OTP...");
+    console.log(arcanaAuth.getAuthInstance());
+    await arcanaAuth.getAuthInstance().loginWithOTPComplete(otp.value);
+    emit("success");
+    emit("dismiss");
+  } catch (error) {
+    console.error(error);
+    hasOTPError.value = true;
+  } finally {
+    loader.hideLoader();
+  }
+}
+
+async function resendOTP() {
+  emit("resend");
+  startOTPCounterTimer();
+}
+</script>
+
+<template>
+  <AppOverlay>
+    <div
+      class="max-w-[360px] w-screen bg-eerie-black rounded-[10px] border-1 border-jet flex flex-col relative p-[1.75rem] gap-4"
+      role="dialog"
+    >
+      <button class="absolute right-4 top-4" @click="emit('dismiss')">
+        <img src="@/assets/images/close.svg" alt="Close" />
+      </button>
+      <div class="flex flex-col items-center justify-center gap-3 text-center">
+        <h2 class="text-[2rem] font-bold">Verification</h2>
+        <span class="text-sm text-secondary-400"
+          >Please enter the OTP that was sent to your email address</span
+        >
+      </div>
+      <form
+        class="relative isolate flex w-full flex-col gap-5"
+        @submit.prevent="submitOTP"
+      >
+        <div
+          class="relative z-10 flex gap-2 w-full items-center justify-between"
+        >
+          <input
+            v-for="i in otpLength"
+            v-model="otp[i - 1]"
+            :key="`otp-input-${i}`"
+            type="number"
+            step="1"
+            min="0"
+            max="9"
+            pattern="\d*"
+            maxlength="1"
+            autocomplete="off"
+            ref="otpInputs"
+            @input="void 0"
+            @keydown="handleKeyDown($event, i - 1)"
+            @paste.prevent="handlePaste"
+            class="input flex flex-grow justify-center items-center text-center"
+          />
+        </div>
+        <span
+          :class="[
+            'relative z-0 -mt-3 ml-2 text-start text-xs text-tertiary-500 transition-all duration-200 ease-in-out',
+            hasOTPError
+              ? 'translate-y-0 opacity-100'
+              : '-translate-y-8 opacity-0',
+          ]"
+          >{{
+            attemptsUsed === totalAttemptsAllowed
+              ? "The OTP attempts have been exceeded."
+              : "The entered OTP is either invalid or already used."
+          }}</span
+        >
+        <button
+          :disabled="!isValidOTP"
+          :title="!isValidOTP ? 'Please enter a valid OTP' : ''"
+          class="btn btn-submit disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Verify OTP
+        </button>
+        <div class="flex items-center justify-center">
+          <button
+            class="text-sm font-bold"
+            v-if="resendCounter === 0"
+            type="button"
+            @click.stop="resendOTP"
+          >
+            Resend OTP
+          </button>
+          <span class="text-sm" v-else>{{
+            `Resend OTP in ${resendCounter} seconds`
+          }}</span>
+        </div>
+      </form>
+    </div>
+  </AppOverlay>
+</template>
+
+<style scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>

src/components/landing/LandingDiscover.vue

@@ -1,38 +1,55 @@
 <template>
   <div id="how-does-it-work">
-    <div class="flex flex-col md:flex-row md:flex-nowrap md:justify-center md:items-center mt-[10%]">
+    <div
+      class="flex flex-col md:flex-row md:flex-nowrap md:justify-center md:items-center mt-[10%]"
+    >
       <div
-        class="w-full md:w-1/2 flex flex-col gap-1 md:gap-4 lg:gap-6 md:pl-[150px] md:-mt-20 items-center md:items-start">
-        <h3 class="discover-section-title md:pb-2">Discover How</h3>
-        <h3 class="discover-bold-section-title">SendIt
+        class="w-full md:w-1/2 flex flex-col gap-1 md:gap-2 lg:gap-4 md:pl-[150px] md:mt-[-5rem] items-center md:items-start"
+      >
+        <div>
+          <h3 class="discover-section-title md:pb-2">
+            How<span class="discover-bold-section-title"> It Works</span>
+          </h3>
           <span>
-            Works
-            <img src="@/assets/images/landing/how-does-it-work-vector-underline.svg"
-              class="md:w-[80px] lg:w-[120px] 2xl:w-[200px] lg:mt-2 xl:w-[175px] xl:mt-5 max-md:w-[47px] absolute md:left-[225px] lg:left-[275px] xl:left-[375px] 2xl:left-[475px] hide-below-768" />
+            <img
+              src="@/assets/images/landing/how-does-it-work-vector-underline.svg"
+              class="md:w-[80px] lg:w-[120px] 2xl:w-[200px] xl:w-[175px] max-md:w-[47px] absolute md:left-[225px] lg:left-[275px] xl:left-[375px] 2xl:left-[475px] hide-below-768"
+            />
           </span>
-        </h3>
+        </div>
+
         <br />
-        <p class="discover-section-description max-w-[500px] px-2 md:px-0 max-md:text-center">Discover the
-          straightforward
-          process of
-          sending cryptocurrency via email with SendIt.</p>
+        <p
+          class="discover-section-description max-w-[500px] px-2 md:px-0 max-md:text-center text-[#8d8d8d]"
+        >
+          Discover the easiest way to send crypto via email with SendIt.
+        </p>
         <br />
-        <a class="text-[0.75rem] xl:text-[1rem] 2xl:text-[1.5rem] text-black leading-[1rem] uppercase font-500 rounded-[25px] w-[150px] md:w-[150px] md:rounded-[25px] px-2 py-1 md:px-4 md:py-3 2xl:px-5 2xl:w-[225px] xl:w-[175px] 2xl:py-4 cursor-pointer bg-white  transition-colors duration-200 ease-in-out disabled:cursor-not-allowed text-center hide-below-768"
-          href="/app">
+        <a
+          class="text-[0.75rem] xl:text-[1rem] 2xl:text-[1.5rem] text-black leading-[1rem] uppercase font-500 rounded-[25px] w-[150px] md:w-[150px] md:rounded-[25px] px-2 py-1 md:px-4 md:py-3 2xl:px-5 2xl:w-[225px] xl:w-[175px] 2xl:py-4 cursor-pointer bg-white transition-colors duration-200 ease-in-out disabled:cursor-not-allowed text-center hide-below-768"
+          href="/app"
+        >
           <strong>Explore Now</strong>
         </a>
       </div>
       <div class="mt-8 md:mt-0">
-        <img src="@/assets/gifs/Discover.gif" class="w-[100%] h-auto" />
+        <img
+          src="@/assets/gifs/Discover.gif"
+          class="w-[100%] h-auto lg:h-screen"
+        />
       </div>
     </div>
   </div>
   <img
-    class="absolute z-[-1] top-[165%] -left-[30px] md:left-0 h-[300px] md:h-[200px] max-md:hidden go-to-linear-animation"
-    src="@/assets/images/landing/cloud-how.png" loading="lazy" />
+    class="absolute z-[-1] top-[165%] -left-[30px] md:-left-[150px] h-[300px] max-md:hidden go-to-linear-animation"
+    src="@/assets/images/landing/cloud-how2.webp"
+    loading="lazy"
+  />
   <div class="flex justify-center">
-    <a class="text-[0.75rem] text-black leading-[1rem] uppercase font-500 rounded-[25px] w-[150px] px-5 py-5 cursor-pointer bg-white  transition-colors duration-200 ease-in-out disabled:cursor-not-allowed text-center hide-above-768"
-      href="/app">
+    <a
+      class="text-[0.75rem] text-black leading-[1rem] uppercase font-500 rounded-[25px] w-[150px] px-5 py-5 cursor-pointer bg-white transition-colors duration-200 ease-in-out disabled:cursor-not-allowed text-center hide-above-768"
+      href="/app"
+    >
       <strong>Explore Now</strong>
     </a>
   </div>
@@ -44,7 +61,6 @@
     display: none;
   }
 }
-
 @media (min-width: 767px) {
   .hide-above-768 {
     display: none;

src/components/landing/LandingEarnXP.vue

@@ -3,8 +3,13 @@
     <div class="flex justify-center">
       <h3 class="max-md:hidden flex">
         <div class="relative">
-          <span class="earn-section-title"><span class="font-bold-onest">Earn XP&nbsp;</span></span>
-          <img src="@/assets/images/landing/faq-underlined.png" class="absolute top-full pt-3" />
+          <span class="earn-section-title"
+            ><span class="font-bold-onest">Earn XP&nbsp;</span></span
+          >
+          <img
+            src="@/assets/images/landing/faq-underlined.webp"
+            class="absolute top-full pt-3"
+          />
         </div>
         <span class="earn-section-title">for Using SendIt</span>
       </h3>
@@ -13,23 +18,33 @@
       </h3>
     </div>
     <div class="flex max-md:flex-col-reverse items-center">
-      <div class="flex flex-col gap-4 mt-5 md:mt-[-5rem] ">
-        <h4 class="text-[1rem] md:text-[1.5rem] md:ml-5 lg:text-[2rem] max-md:text-center">
+      <div class="flex flex-col gap-4 mt-5 md:mt-[-5rem]">
+        <h4
+          class="text-[1rem] md:text-[1.5rem] md:ml-5 lg:text-[2rem] max-md:text-center"
+        >
           Convenience, and Rewards!
         </h4>
-        <p class="faq-section-description md:ml-5 max-w-[500px] md:text-[1rem] lg:text-[1.5rem] max-md:text-center">
+        <p
+          class="faq-section-description md:ml-5 max-w-[500px] md:text-[1rem] lg:text-[1.5rem] max-md:text-center"
+        >
           Your ultimate solution for hassle-free crypto transfers. Earn points
           with every transaction while contributing to crypto's mainstream
           adoption. Share SendIt with friends on socials for even more points.
           Win weekly leaderboard challenges for a big airdrops! Also, tune into
           our socials for updates on rewards that will melt faces! 🤑🤑🤑
         </p>
       </div>
-      <img src="@/assets/images/landing/earn-xp-horse-300w.png" srcset="
-          @/assets/images/landing/earn-xp-horse-300w.png 300w,
-          @/assets/images/landing/earn-xp-horse-836w.png 836w
-        " sizes="(max-width: 767px) 300px, 836px" loading="lazy" alt="Earn XP for using SendIt"
-        class="md:-mr-[20px]" />
+      <img
+        src="@/assets/images/landing/earn-xp-horse-300w.webp"
+        srcset="
+          @/assets/images/landing/earn-xp-horse-300w.webp 300w,
+          @/assets/images/landing/earn-xp-horse-836w.webp 836w
+        "
+        sizes="(max-width: 767px) 300px, 836px"
+        loading="lazy"
+        alt="Earn XP for using SendIt"
+        class="md:-mr-[20px]"
+      />
     </div>
   </div>
 </template>