From 69f2749f115e90621c553c8d401566212c7003b1 Mon Sep 17 00:00:00 2001
From: Lionell Briones <llenoil@gmail.com>
Date: Wed, 31 Jan 2024 12:29:02 +0800
Subject: [PATCH 1/2] responsive + openlogin details

---
 src/components/CardHeading/CardHeading.vue    | 26 +++---
 src/components/LoginDetails/LoginDetails.vue  | 55 +++---------
 src/components/LoginForm/LoginForm.vue        | 68 --------------
 src/components/LoginForm/index.ts             |  1 -
 src/components/Navbar/Navbar.vue              | 10 +--
 .../OpenloginDetails/OpenloginDetails.vue     | 51 +++++------
 src/components/Steps/Steps.vue                |  4 +-
 src/components/TopupDetails/TopupDetails.vue  |  2 +-
 .../WalletConnectDetails.vue                  |  1 +
 src/constants/common.ts                       | 89 +------------------
 src/routes.ts                                 | 18 ++--
 src/views/Home.vue                            | 42 ++++++---
 src/views/Steps.vue                           |  7 ++
 13 files changed, 109 insertions(+), 265 deletions(-)
 delete mode 100644 src/components/LoginForm/LoginForm.vue
 delete mode 100644 src/components/LoginForm/index.ts
 create mode 100644 src/views/Steps.vue

diff --git a/src/components/CardHeading/CardHeading.vue b/src/components/CardHeading/CardHeading.vue
index 88e2613..315f0e3 100644
--- a/src/components/CardHeading/CardHeading.vue
+++ b/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>
diff --git a/src/components/LoginDetails/LoginDetails.vue b/src/components/LoginDetails/LoginDetails.vue
index 331d702..20e79bc 100644
--- a/src/components/LoginDetails/LoginDetails.vue
+++ b/src/components/LoginDetails/LoginDetails.vue
@@ -6,8 +6,11 @@ import { getCountryName, getBrowserName, getOSName, getTruncateString } from '@/
 
 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)
@@ -41,6 +44,10 @@ const handleCopyAddress = () => {
   }, 1000)
 }
 
+const onViewSteps = () => {
+  router.push({ name: ROUTES.STEPS })
+}
+
 const returnAvatarLetter = (name: string) => {
   if (!name) return 'W3A'
   if (name.includes('@')) {
@@ -61,54 +68,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 +175,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
diff --git a/src/components/LoginForm/LoginForm.vue b/src/components/LoginForm/LoginForm.vue
deleted file mode 100644
index 260d419..0000000
--- a/src/components/LoginForm/LoginForm.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="w-full sm:w-[380px] shadow-xl rounded-2xl border border-gray-200 overflow-hidden bg-white"
-  >
-    <div class="p-8 pb-6">
-      <img src="@/assets/images/login-logo.svg" />
-      <h4 class="text-xl font-bold mt-4">Sign in</h4>
-      <p class="text-sm font-semibold text-gray-500 mt-2 mb-6">
-        Your blockchain wallet in one-click
-      </p>
-      <LoginForm
-        :social-logins="socialLogins"
-        pill
-        show-input
-        expand-label="View More"
-        collapse-label="View Less"
-        social-login-message=""
-        input-btn-label="Continue With Email"
-        :grid-cols="3"
-        primary-btn="input"
-        :input-expand-btn-props="{
-          pill: true,
-          size: 'xs'
-        }"
-        :input-props="{
-          placeholder: 'name@example.com',
-          onInput: (e: Event) => emits('handleEmailPasswordLess', e),
-          modelValue: emailLoginHint
-        }"
-        :input-btn-props="{
-          class: '!bg-indigo-600 disabled:!bg-indigo-400',
-          onClick: () => emits('onEmailLogin'),
-          disabled: !emailLoginHint
-        }"
-        :classes="{ expandBtn: '!text-indigo-600' }"
-        @on-social-login-click="(loginObj, index) => emits('onSocialLoginClick', loginObj, index)"
-      >
-        <template #formBody>
-          <p class="pb-4 text-center text-sm font-medium">or</p>
-        </template>
-      </LoginForm>
-      <p class="text-xs font-medium text-gray-500">
-        We do not store any data related to your social logins.
-      </p>
-    </div>
-    <div class="flex items-center justify-center mb-4">
-      <img
-        src="https://images.web3auth.io/ws-trademark-light.svg"
-        alt="web3auth logo"
-        class="block"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SOCIAL_LOGINS } from '@/constants/common'
-import { LoginForm } from '@toruslabs/vue-components'
-import { inject } from 'vue'
-
-const socialLogins = SOCIAL_LOGINS
-
-const emits = defineEmits(['onEmailLogin', 'onSocialLoginClick', 'handleEmailPasswordLess'])
-
-const emailLoginHint = inject<string>('emailLoginHint')
-</script>
-
-<style scoped></style>
diff --git a/src/components/LoginForm/index.ts b/src/components/LoginForm/index.ts
deleted file mode 100644
index 53ce3c7..0000000
--- a/src/components/LoginForm/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LoginForm.vue'
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index 1cbc37a..18fe23d 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/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>
diff --git a/src/components/OpenloginDetails/OpenloginDetails.vue b/src/components/OpenloginDetails/OpenloginDetails.vue
index f3fb7c5..5959af5 100644
--- a/src/components/OpenloginDetails/OpenloginDetails.vue
+++ b/src/components/OpenloginDetails/OpenloginDetails.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { onMounted, 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: any = ref(null)
+const browserVersion: any = ref(null)
+const userInfo: any = ref(null)
+
+onMounted(async () => {
+  browserName.value = await getBrowserName()
+  browserVersion.value = await getBrowserVersion()
+  userInfo.value = web3Auth.userInfo
+})
+
+const handleHeadingBtnClick = () => {
+  window.open('https://web3auth.io/docs/pnp/features/mfa', '_blank')
+}
+</script>
+
 <template>
   <div>
     <CardHeading
@@ -110,31 +136,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;
diff --git a/src/components/Steps/Steps.vue b/src/components/Steps/Steps.vue
index f8fec4c..14c9342 100644
--- a/src/components/Steps/Steps.vue
+++ b/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>
diff --git a/src/components/TopupDetails/TopupDetails.vue b/src/components/TopupDetails/TopupDetails.vue
index 2969a6f..e35d61e 100644
--- a/src/components/TopupDetails/TopupDetails.vue
+++ b/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">
diff --git a/src/components/WalletConnectDetails/WalletConnectDetails.vue b/src/components/WalletConnectDetails/WalletConnectDetails.vue
index 0e2d32b..9a517a9 100644
--- a/src/components/WalletConnectDetails/WalletConnectDetails.vue
+++ b/src/components/WalletConnectDetails/WalletConnectDetails.vue
@@ -13,6 +13,7 @@ const openWalletConnect = () => {
   web3Auth.initiateWalletConnect()
 }
 </script>
+
 <template>
   <div>
     <CardHeading
diff --git a/src/constants/common.ts b/src/constants/common.ts
index e24d6c8..17b2130 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -1,74 +1,11 @@
-export const SOCIAL_LOGINS = [
-  {
-    icon: 'google',
-    label: 'google',
-    verifier: 'google',
-    description: 'Continue with Google'
-  },
-  {
-    icon: 'github',
-    label: 'github',
-    verifier: 'torus-auth0-github'
-  },
-  {
-    icon: 'twitter',
-    label: 'twitter',
-    verifier: 'torus-auth0-twitter'
-  },
-  {
-    icon: 'discord',
-    label: 'discord',
-    verifier: 'discord'
-  },
-  {
-    icon: 'facebook',
-    label: 'facebook',
-    verifier: 'facebook'
-  },
-  {
-    icon: 'line',
-    label: 'line',
-    verifier: 'torus-auth0-line'
-  },
-  {
-    icon: 'reddit',
-    label: 'reddit',
-    verifier: 'reddit'
-  },
-  {
-    icon: 'apple',
-    label: 'apple',
-    verifier: 'torus-auth0-apple'
-  },
-  {
-    icon: 'twitch',
-    label: 'twitch',
-    verifier: 'twitch'
-  },
-  {
-    icon: 'linkedin',
-    label: 'linkedin',
-    verifier: 'torus-auth0-linkedin'
-  },
-  {
-    icon: 'wechat',
-    label: 'wechat',
-    verifier: 'torus-auth0-wechat'
-  },
-  {
-    icon: 'kakao',
-    label: 'kakao',
-    verifier: 'torus-auth0-kakao'
-  }
-]
-
 export const ROUTES = {
   LOGIN: 'Login',
   WELCOME: 'Welcome',
   MPC: 'Mpc',
   WALLET_UI: 'WalletUi',
   ON_RAMP: 'OnRamp',
-  WALLET_CONNECT: 'WalletConnect'
+  WALLET_CONNECT: 'WalletConnect',
+  STEPS: 'Steps'
 }
 
 export const STEP_DETAILS = [
@@ -101,25 +38,3 @@ export const STEP_DETAILS = [
     route: ROUTES.WALLET_CONNECT
   }
 ]
-
-export const CLIENT_ID =
-  'BEglQSgt4cUWcj6SKRdu5QkOXTsePmMcusG5EAoyjyOYKlVRjIF1iCNnMOTfpzCiunHRrMui8TIwQPXdkQ8Yxuk'
-
-export const MAINNET_CHAIN_ID = '0x1'
-
-export const CHAINS = {
-  MAINNET: 'mainnet'
-}
-
-export const SUPPORTED_NETWORKS = {
-  [CHAINS.MAINNET]: {
-    blockExplorerUrl: 'https://etherscan.io',
-    chainId: MAINNET_CHAIN_ID,
-    displayName: 'Main Ethereum Network',
-    logo: 'eth.svg',
-    rpcTarget: 'https://rpc.ankr.com/eth',
-    ticker: 'ETH',
-    tickerName: 'Ethereum',
-    type: CHAINS.MAINNET
-  }
-}
diff --git a/src/routes.ts b/src/routes.ts
index 709c955..456ec19 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,11 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { ROUTES } from './constants/common'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'Login',
+      name: ROUTES.LOGIN,
       component: () => import('./views/Login.vue')
     },
     {
@@ -18,28 +19,33 @@ const router = createRouter({
         },
         {
           path: 'welcome',
-          name: 'Welcome',
+          name: ROUTES.WELCOME,
           component: () => import('./views/Welcome.vue')
         },
         {
           path: 'mpc',
-          name: 'Mpc',
+          name: ROUTES.MPC,
           component: () => import('./views/Mpc.vue')
         },
         {
           path: 'wallet-ui',
-          name: 'WalletUi',
+          name: ROUTES.WALLET_UI,
           component: () => import('./views/WalletUi.vue')
         },
         {
           path: 'on-ramp',
-          name: 'OnRamp',
+          name: ROUTES.ON_RAMP,
           component: () => import('./views/OnRamp.vue')
         },
         {
           path: 'wallet-connect',
-          name: 'WalletConnect',
+          name: ROUTES.WALLET_CONNECT,
           component: () => import('./views/WalletConnect.vue')
+        },
+        {
+          path: 'steps',
+          name: ROUTES.STEPS,
+          component: () => import('./views/Steps.vue')
         }
       ]
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b8e389b..82c30c3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,26 +1,46 @@
-<template>
-  <div class="flex flex-1 p-6 pt-0 gap-6">
-    <Steps />
-    <div class="flex flex-col flex-1 bg-white px-8 py-6 rounded-2xl shadow-lg overflow-auto">
-      <router-view />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
+import { Button } from '@toruslabs/vue-components'
 import Steps from '@/components/Steps'
 import { ROUTES } from '@/constants/common'
 import { useWeb3authStore } from '@/store/web3authStore'
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const web3Auth = useWeb3authStore()
 const router = useRouter()
 
-// we wait for login to finish
+function goToSteps() {
+  router.push({ name: ROUTES.STEPS })
+}
+
+const showBackButton = computed(() => {
+  return ![ROUTES.STEPS, ROUTES.WELCOME].includes(router.currentRoute.value.name as string)
+})
+
 onMounted(() => {
   if (!web3Auth.isLoggedIn) {
     router.push({ name: ROUTES.LOGIN })
   }
 })
 </script>
+
+<template>
+  <div class="flex-1 p-6 pt-0">
+    <div v-if="showBackButton" class="!flex xl:!hidden">
+      <Button
+        variant="text"
+        :pill="true"
+        class="!text-gray-400 !px-6"
+        @on-click="goToSteps"
+      >
+        <Icon name="chevron-left-solid-icon" /> Back to next steps
+      </Button>
+    </div>
+    <div class="flex gap-6">
+      <Steps class="hidden xl:flex bg-white shadow-xl rounded-2xl p-6" />
+      <div class="flex flex-col flex-1 bg-white px-8 py-6 rounded-2xl shadow-lg overflow-auto">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/Steps.vue b/src/views/Steps.vue
new file mode 100644
index 0000000..032b546
--- /dev/null
+++ b/src/views/Steps.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Steps from '@/components/Steps'
+</script>
+
+<template>
+  <Steps class="flex" />
+</template>

From 47af0955a10978b8d5954067d432c3f092e144ff Mon Sep 17 00:00:00 2001
From: Chaitanya Potti <chaitanya.potti@gmail.com>
Date: Wed, 31 Jan 2024 13:35:55 +0800
Subject: [PATCH 2/2] more reactivity fixes

---
 src/components/LoginDetails/LoginDetails.vue      | 15 +++++++--------
 .../OpenloginDetails/OpenloginDetails.vue         | 15 +++++++--------
 src/store/web3authStore.ts                        |  6 +++---
 src/utils/common.ts                               |  2 +-
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/LoginDetails/LoginDetails.vue b/src/components/LoginDetails/LoginDetails.vue
index 20e79bc..e46b68d 100644
--- a/src/components/LoginDetails/LoginDetails.vue
+++ b/src/components/LoginDetails/LoginDetails.vue
@@ -1,5 +1,5 @@
 <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'
@@ -14,19 +14,18 @@ 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 () => {
diff --git a/src/components/OpenloginDetails/OpenloginDetails.vue b/src/components/OpenloginDetails/OpenloginDetails.vue
index 5959af5..7290034 100644
--- a/src/components/OpenloginDetails/OpenloginDetails.vue
+++ b/src/components/OpenloginDetails/OpenloginDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onBeforeMount, ref } from 'vue'
 
 import { Button, Card, Icon } from '@toruslabs/vue-components'
 
@@ -9,14 +9,13 @@ import { useWeb3authStore } from '@/store/web3authStore'
 
 const web3Auth = useWeb3authStore()
 
-const browserName: any = ref(null)
-const browserVersion: any = ref(null)
-const userInfo: any = ref(null)
+const browserName = ref<string>('')
+const browserVersion = ref<string>('')
+const userInfo = computed(() => web3Auth.userInfo)
 
-onMounted(async () => {
-  browserName.value = await getBrowserName()
-  browserVersion.value = await getBrowserVersion()
-  userInfo.value = web3Auth.userInfo
+onBeforeMount(() => {
+  browserName.value = getBrowserName()
+  browserVersion.value = getBrowserVersion()
 })
 
 const handleHeadingBtnClick = () => {
diff --git a/src/store/web3authStore.ts b/src/store/web3authStore.ts
index 60d1149..d4c375e 100644
--- a/src/store/web3authStore.ts
+++ b/src/store/web3authStore.ts
@@ -7,7 +7,7 @@ import { ref, shallowRef, type Ref, triggerRef, computed } from 'vue'
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import { WalletServicesPlugin } from '@web3auth/wallet-services-plugin'
 import { WALLET_ADAPTERS } from '@web3auth/base'
-import type { OpenloginAdapter } from '@web3auth/openlogin-adapter'
+import type { OpenloginAdapter, OpenloginUserInfo } from '@web3auth/openlogin-adapter'
 import { useRouter } from 'vue-router'
 import { ROUTES } from '@/constants/common'
 
@@ -18,8 +18,8 @@ export const useWeb3authStore = defineStore('web3auth', () => {
 
   const router = useRouter()
 
-  const accounts: Ref<JsonRpcSigner[]> = ref([])
-  const userInfo: Ref<any> = ref(null)
+  const accounts = ref<JsonRpcSigner[]>([])
+  const userInfo = ref<Partial<OpenloginUserInfo> | null>(null)
 
   async function initializeWeb3Auth() {
     const chainConfig = {
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 275e53c..93dd18b 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -24,7 +24,7 @@ export const precisionDisplay = (value: string, precision = 3) => {
 }
 
 export const getCountryName = async () => {
-  const response: any = await fetch('https://lrc.admin.openlogin.com/api/v2/user/location')
+  const response = await fetch('https://lrc.admin.openlogin.com/api/v2/user/location')
   const { data } = await response.json()
   const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
   return regionNames.of(data.country)