more reactivity fixes

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 () => {

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 = () => {

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 = {

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)