Re-enable login method for different providers and fix loader

consensusnetworks · Oct 3, 2023 · 50e7d49 · 50e7d49
1 parent 34b260a
commit 50e7d49
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/apps/web/src/composables/auth.ts b/apps/web/src/composables/auth.ts
@@ -2,18 +2,18 @@ import * as Session from 'supertokens-web-js/recipe/session'
 import { onMounted, onUnmounted, readonly, ref } from 'vue'
 import useEnvironment from '@/composables/environment'
 import useEthers from '@/composables/ethers'
-// import useLedger from '@/composables/ledger'
-// import useTrezor from '@/composables/trezor'
+import useLedger from '@/composables/ledger'
+import useTrezor from '@/composables/trezor'
 import useUser from '@/composables/user'
-// import useWalletConnect from '@/composables/walletConnectV2'
+import useWalletConnect from '@/composables/walletConnectV2'
 import { Account, ApiResponse, LoginCredentials, ProviderString, UserAuthState } from '@casimir/types'
 
 const { usersUrl } = useEnvironment()
 const { ethersProviderList, detectActiveWalletAddress, loginWithEthers } = useEthers()
-// const { loginWithLedger } = useLedger()
-// const { loginWithTrezor } = useTrezor()
+const { loginWithLedger } = useLedger()
+const { loginWithTrezor } = useTrezor()
 const { setUser, user } = useUser()
-// const { loginWithWalletConnectV2, initializeWalletConnect, uninitializeWalletConnect } = useWalletConnect()
+const { loginWithWalletConnectV2, /* initializeWalletConnect, uninitializeWalletConnect */ } = useWalletConnect()
 
 const initializedAuthComposable = ref(false)
 const loadingSessionLogin = ref(false)
@@ -103,7 +103,7 @@ export default function useAuth() {
         }
     }
 
-    async function newLogin(loginCredentials: LoginCredentials): Promise<UserAuthState> {
+    async function login(loginCredentials: LoginCredentials): Promise<UserAuthState> {
         const { address, provider } = loginCredentials
         try {
             if (user.value) {
@@ -139,7 +139,7 @@ export default function useAuth() {
                 const { data: { sameAddress, walletProvider } } = await checkIfPrimaryUserExists(provider as ProviderString, address)
                 console.log('sameAddress :>> ', sameAddress)
                 if (sameAddress) {
-                    await login(loginCredentials as LoginCredentials)
+                    await loginWithProvider(loginCredentials as LoginCredentials)
                     return 'Successfully logged in'
                 }
 
@@ -158,7 +158,7 @@ export default function useAuth() {
                 // Then check if address is the same as the one that is active in their wallet
                 const activeAddress = await detectActiveWalletAddress(provider as ProviderString)
                 if (activeAddress === address) {
-                    await login({ provider: provider as ProviderString, address, currency: 'ETH' })
+                    await loginWithProvider({ provider: provider as ProviderString, address, currency: 'ETH' })
                     return 'Successfully logged in'
                 } else {
                     alert(`The account you selected is not the same as the one that is active in your ${provider} wallet. Please open your browser extension and select the account that you want to log in with.`)
@@ -177,17 +177,17 @@ export default function useAuth() {
      * @param currency 
      * @returns 
      */
-    async function login(loginCredentials: LoginCredentials, pathIndex?: number) {
+    async function loginWithProvider(loginCredentials: LoginCredentials, pathIndex?: number) {
         const { provider } = loginCredentials
         try {
             if (ethersProviderList.includes(provider)) {
                 await loginWithEthers(loginCredentials)
             } else if (provider === 'Ledger') {
-                // await loginWithLedger(loginCredentials, JSON.stringify(pathIndex))
+                await loginWithLedger(loginCredentials, JSON.stringify(pathIndex))
             } else if (provider === 'Trezor') {
-                // await loginWithTrezor(loginCredentials, JSON.stringify(pathIndex))
+                await loginWithTrezor(loginCredentials, JSON.stringify(pathIndex))
             } else if (provider === 'WalletConnect'){
-                // await loginWithWalletConnectV2(loginCredentials)
+                await loginWithWalletConnectV2(loginCredentials)
             } else {
                 console.log('Sign up not yet supported for this wallet provider')
             }
@@ -215,7 +215,6 @@ export default function useAuth() {
 
     onMounted(async () => {
         if (!initializedAuthComposable.value) {
-            console.log('initializing auth composable')
             initializedAuthComposable.value = true
             // Loader
             try {
@@ -281,7 +280,7 @@ export default function useAuth() {
         loadingSessionLoginError: readonly(loadingSessionLoginError),
         loadingSessionLogout: readonly(loadingSessionLogout),
         loadingSessionLogoutError: readonly(loadingSessionLogoutError),
-        newLogin,
+        login,
         logout
     }
 }
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
@@ -14,7 +14,7 @@ import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
 import useWalletConnect from '@/composables/walletConnectV2'
 
-const { newLogin, logout } = useAuth()
+const { login, logout } = useAuth()
 const { ethersProviderList, getEthersAddressesWithBalances } = useEthers()
 const { screenWidth } = useScreenDimensions()
 const { convertString, trimAndLowercaseAddress } = useFormat()
@@ -55,10 +55,11 @@ function checkIfAddressIsUsed (account: CryptoAddress): boolean {
 async function selectAddress(address: string) {
   address = trimAndLowercaseAddress(address)
   const loginCredentials = { provider: selectedProvider.value as ProviderString, address, currency: 'ETH' }
-  const response = await newLogin(loginCredentials as LoginCredentials)
-  // if (response) {
-  //   userAuthState.value = response
-  // }
+  const response = await login(loginCredentials as LoginCredentials)
+  if (response) {
+    userAuthState.value = response
+    console.log('userAuthState.value :>> ', userAuthState.value)
+  }
 }
 
 /**

diff --git a/apps/web/src/pages/overview/Overview.vue b/apps/web/src/pages/overview/Overview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import Staking from './components/Staking.vue'
 import StakingAvg from './components/StakingAvg.vue'
 import BreakdownChart from './components/BreakdownChart.vue'
@@ -17,6 +17,14 @@ const { loadingInitializeOperators } = useOperators()
 
 const showSkeleton = ref(true)
 
+onMounted(() => {
+  setTimeout(() => {
+    if(loadingSessionLogin || loadingInitializeBreakdownMetrics || loadingInitializeAnalytics || loadingInitializeOperators){
+      showSkeleton.value = false
+    }
+  }, 500)
+})
+
 watch([loadingSessionLogin, loadingInitializeBreakdownMetrics, loadingInitializeAnalytics, loadingInitializeOperators], () =>{
   setTimeout(() => {
     if(loadingSessionLogin || loadingInitializeBreakdownMetrics || loadingInitializeAnalytics || loadingInitializeOperators){