Merge pull request #15 from Web3Auth/feat/waas-integrate-features

responsive + openlogin details

src/components/CardHeading/CardHeading.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="flex items-center justify-between pb-6 border-b border-b-gray-300">
     <h1 class="text-lg sm:text-2xl text-gray-800 font-medium">{{ heading }}</h1>
-    <Button
-      v-if="showBtn"
-      variant="secondary"
-      size="sm"
-      @on-click="emits('onClick')"
-      class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 btn"
-    >
-      {{ btnLabel }} <Icon name="arrow-right-icon" />
-    </Button>
+    <div class="hidden md:flex">
+      <Button
+        v-if="showBtn"
+        variant="secondary"
+        size="sm"
+        @on-click="emits('onClick')"
+        class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800"
+      >
+        {{ btnLabel }} <Icon name="arrow-right-icon" />
+      </Button>
+    </div>
   </div>
 </template>
 
@@ -31,8 +33,4 @@ withDefaults(
 const emits = defineEmits(['onClick'])
 </script>
 
-<style scoped>
-.btn {
-  @apply hidden md:flex;
-}
-</style>
+<style scoped></style>

src/components/LoginDetails/LoginDetails.vue

@@ -1,29 +1,31 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { Avatar, Card, Icon, Button, Drawer } from '@toruslabs/vue-components'
 import { getCountryName, getBrowserName, getOSName, getTruncateString } from '@/utils/common'
 
 import CardHeading from '../CardHeading'
 import { useWeb3authStore } from '@/store/web3authStore'
+import { ROUTES } from '@/constants/common'
+import { useRouter } from 'vue-router'
 
 const web3Auth = useWeb3authStore()
+const router = useRouter()
 
 const openConsole = ref(false)
 const isCopied = ref(false)
-const countryName: any = ref(null)
-const browserName: any = ref(null)
-const osName: any = ref(null)
-const userInfo: any = ref(null)
-const account: any = ref(null)
+const countryName = ref('')
+const browserName = ref('')
+const osName = ref('')
+const userInfo = computed(() => web3Auth.userInfo)
+const account = ref('')
 
 onMounted(async () => {
-  countryName.value = await getCountryName()
+  countryName.value = (await getCountryName()) || ''
   browserName.value = getBrowserName()
   osName.value = getOSName()
 
   account.value = web3Auth.accounts[0].address
-  userInfo.value = web3Auth.userInfo
 })
 
 const handleConsoleBtn = async () => {
@@ -41,6 +43,10 @@ const handleCopyAddress = () => {
   }, 1000)
 }
 
+const onViewSteps = () => {
+  router.push({ name: ROUTES.STEPS })
+}
+
 const returnAvatarLetter = (name: string) => {
   if (!name) return 'W3A'
   if (name.includes('@')) {
@@ -61,54 +67,14 @@ const returnAvatarLetter = (name: string) => {
       :show-btn="false"
     />
     <div class="w-full min-[800px]:w-[80%] mx-auto mt-8 flex flex-col items-center justify-center">
-      <!-- <h2 class="text-base text-gray-700">Time taken to login</h2>
-      <h1 class="text-5xl sm:text-7xl font-bold text-blue-600 mt-4">1.010s</h1> -->
-      <!-- Mobile -->
-      <!-- <div
-        class="w-full sm:auto px-5 py-4 border border-gray-300 rounded-2xl flex min-[800px]:hidden gap-4 mt-6 justify-center"
-      >
-        <div class="text-xs font-normal text-gray-400 text-center">
-          <p>Average</p>
-          <p class="text-xl font-bold text-gray-600">1.006s</p>
-        </div>
-        <div class="w-[1px] h-auto bg-gray-300" />
-        <div class="text-xs font-normal text-gray-400 text-center">
-          <p>50 Percentile</p>
-          <p class="text-xl font-bold text-gray-600">0.910s</p>
-        </div>
-        <div class="w-[1px] h-auto bg-gray-300" />
-        <div class="text-xs font-normal text-gray-400 text-center">
-          <p>90 Percentile</p>
-          <p class="text-xl font-bold text-gray-600">1.780s</p>
-        </div>
-      </div> -->
-
-      <Button
+      <!-- <Button
         variant="secondary"
         size="sm"
         class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 flex min-[800px]:!hidden mt-4"
         block
       >
         See how we scale for you <Icon name="arrow-right-icon" />
-      </Button>
-      <!-- Desktop -->
-      <!-- <div class="mt-8 items-center justify-between gap-8 w-full hidden min-[800px]:flex">
-        <Card class="flex flex-col flex-1 p-5 !rounded-2xl">
-          <img src="@/assets/images/median-logo.svg" class="h-12 w-12 mb-4" />
-          <p class="text-lg text-gray-400 font-normal mb-1">Median</p>
-          <p class="text-2xl text-gray-600 font-bold">1.006s</p>
-        </Card>
-        <Card class="flex flex-col flex-1 p-5 !rounded-2xl">
-          <img src="@/assets/images/fifty-percent-logo.svg" class="h-12 w-12 mb-4" />
-          <p class="text-lg text-gray-400 font-normal mb-1">50th Percentile</p>
-          <p class="text-2xl text-gray-600 font-bold">0.91s</p>
-        </Card>
-        <Card class="flex flex-col flex-1 p-5 !rounded-2xl">
-          <img src="@/assets/images/high-logo.svg" class="h-12 w-12 mb-4" />
-          <p class="text-lg text-gray-400 font-normal mb-1">95th Percentile</p>
-          <p class="text-2xl text-gray-600 font-bold">1.780s</p>
-        </Card>
-      </div> -->
+      </Button> -->
       <Card class="mt-4 min-[800px]:mt-10 w-full p-4 sm:p-6 !rounded-2xl">
         <div class="flex items-center w-full gap-3 sm:gap-5 mb-4 sm:mb-6">
           <Avatar
@@ -208,9 +174,9 @@ const returnAvatarLetter = (name: string) => {
           </div>
         </div>
       </div>
-      <!-- <Button pill block class="mt-10 flex xl:!hidden" @on-click="emits('onViewSteps')"
+      <Button pill block class="mt-10 flex xl:!hidden" @on-click="onViewSteps"
         >View next steps</Button
-      > -->
+      >
     </div>
   </div>
   <Drawer

src/components/Navbar/Navbar.vue

@@ -24,9 +24,9 @@ const getStepLogo = (url: string) => {
   return new URL(`../../assets/images/${url}.svg`, import.meta.url).href
 }
 
-const handleMenuClick = (index: number) => {
+const handleMenuClick = (route: string) => {
   isMenuOpen.value = false
-  emits('onMenuClick', index)
+  router.push({ name: route })
 }
 
 const logout = async () => {
@@ -68,7 +68,7 @@ const isLoggedIn = computed(() => web3Auth.isLoggedIn)
     </div>
     <div
       v-show="isMenuOpen && isLoggedIn"
-      class="block xl:hidden absolute bg-white px-10 py-7 w-full rounded-b-2xl shadow-2xl z-10"
+      class="block xl:hidden absolute bg-app-white px-10 py-7 w-full rounded-b-2xl shadow-2xl z-10"
     >
       <Button variant="text" class="!text-black !justify-start" @on-click="isMenuOpen = false">
         <Icon name="chevron-left-solid-icon" class="-ml-2" /> Back
@@ -78,8 +78,8 @@ const isLoggedIn = computed(() => web3Auth.isLoggedIn)
         <li
           v-for="(item, idx) in StepItems"
           :key="idx"
-          class="flex items-center gap-4"
-          @click="handleMenuClick(idx)"
+          class="flex items-center gap-4 cursor-pointer"
+          @click="handleMenuClick(item.route)"
         >
           <img :src="getStepLogo(item?.img)" class="w-7 h-7" />
           <h1 class="text-sm font-bold">{{ item?.heading1 || '' }} {{ item?.heading2 || '' }}</h1>

src/components/OpenloginDetails/OpenloginDetails.vue

@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue'
+
+import { Button, Card, Icon } from '@toruslabs/vue-components'
+
+import CardHeading from '../CardHeading'
+import { getBrowserName, getBrowserVersion } from '@/utils/common'
+import { useWeb3authStore } from '@/store/web3authStore'
+
+const web3Auth = useWeb3authStore()
+
+const browserName = ref<string>('')
+const browserVersion = ref<string>('')
+const userInfo = computed(() => web3Auth.userInfo)
+
+onBeforeMount(() => {
+  browserName.value = getBrowserName()
+  browserVersion.value = getBrowserVersion()
+})
+
+const handleHeadingBtnClick = () => {
+  window.open('https://web3auth.io/docs/pnp/features/mfa', '_blank')
+}
+</script>
+
 <template>
   <div>
     <CardHeading
@@ -110,31 +135,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { inject, onMounted, ref, type Ref } from 'vue'
-
-import type { UserInfo } from '@web3auth/ws-embed'
-
-import { Button, Card, Icon } from '@toruslabs/vue-components'
-
-import CardHeading from '../CardHeading'
-import { getBrowserName, getBrowserVersion } from '@/utils/common'
-
-const browserName: any = ref(null)
-const browserVersion: any = ref(null)
-
-const userInfo = inject<Ref<UserInfo & { typeOfLogin: string }>>('userInfo')
-
-onMounted(() => {
-  browserName.value = getBrowserName()
-  browserVersion.value = getBrowserVersion()
-})
-
-const handleHeadingBtnClick = () => {
-  window.open('https://web3auth.io/docs/pnp/features/mfa', '_blank')
-}
-</script>
-
 <style scoped>
 .container-height {
   margin-top: 24px;

src/components/Steps/Steps.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="w-[380px] lg:w-[480px] bg-white shadow-xl rounded-2xl p-6 flex flex-col items-center container-height h-auto overflow-auto"
-  >
+  <div class="w-full xl:w-[480px] flex-col items-center container-height h-auto overflow-auto">
     <p class="text-xl font-bold flex self-start">Next Steps</p>
     <StepsButton v-for="(item, idx) in StepItems" :key="idx" :item="item" />
   </div>

src/components/TopupDetails/TopupDetails.vue

@@ -67,7 +67,7 @@ const initiateTopUpPlugin = () => {
       <div
         class="flex flex-col sm:flex-row sm:items-center justify-between gap-6 w-full text-pt-height"
       >
-        <div class="flex flex-col flex-1 pr-6 sm:border-r border-gray-200">
+        <div class="flex flex-col flex-1 pr-6 border-gray-200">
           <Icon name="plus-circle-solid-icon" class="!w-8 !h-8 text-gray-400" />
           <h4 class="text-xl text-gray-900 font-semibold mt-4">Experience Onramp</h4>
           <p class="text-sm font-normal text-gray-500 mb-4">

src/components/WalletConnectDetails/WalletConnectDetails.vue

@@ -13,6 +13,7 @@ const openWalletConnect = () => {
   web3Auth.initiateWalletConnect()
 }
 </script>
+
 <template>
   <div>
     <CardHeading