From feda4c4d7155748876debe3d899d396cb3e22f31 Mon Sep 17 00:00:00 2001
From: Christopher Cali <chris@consensusnetworks.com>
Date: Tue, 10 Oct 2023 13:44:54 -0400
Subject: [PATCH] Handle user logging in with a secondary address on another
 account

---
 .../web/src/components/ConnectWalletsFlow.vue | 148 ++++++++++-----
 apps/web/src/composables/auth.ts              |  60 +++---
 apps/web/src/composables/ethers.ts            |   1 +
 apps/web/src/layouts/default-layout.vue       | 173 +-----------------
 4 files changed, 142 insertions(+), 240 deletions(-)

diff --git a/apps/web/src/components/ConnectWalletsFlow.vue b/apps/web/src/components/ConnectWalletsFlow.vue
index 082700d4a..1341561ad 100644
--- a/apps/web/src/components/ConnectWalletsFlow.vue
+++ b/apps/web/src/components/ConnectWalletsFlow.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { CryptoAddress, Currency, LoginCredentials, ProviderString, UserAuthState } from '@casimir/types'
+import { CryptoAddress, Currency, LoginCredentials, ProviderString } from '@casimir/types'
 import VueFeather from 'vue-feather'
 import useAuth from '@/composables/auth'
-import useFormat from '@/composables/format'
-import useScreenDimensions from '@/composables/screenDimensions'
-import useUser from '@/composables/user'
 import useEthers from '@/composables/ethers'
+import useFormat from '@/composables/format'
 import useLedger from '@/composables/ledger'
 import useTrezor from '@/composables/trezor'
+import useUser from '@/composables/user'
 import useWalletConnect from '@/composables/walletConnectV2'
-import LoaderSpinner from '@/components/LoaderSpinner.vue'
 
-const activeWallets = [
+type UserAuthFlowState = 'select_provider' | 'select_address' | 'loading' | 'success' | 'add_account' | 'confirm_signage_with_existing_secondary'
+
+const supportedWalletProviders = [
   'MetaMask',
   'CoinbaseWallet',
   'WalletConnect',
@@ -22,30 +22,33 @@ const activeWallets = [
   // 'IoPay',
 ] as ProviderString[]
 
+const { login, loginWithSecondaryAddress } = useAuth()
+const { ethersProviderList, getEthersAddressesWithBalances } = useEthers()
+const { convertString, trimAndLowercaseAddress } = useFormat()
+const { getLedgerAddress } = useLedger()
+const { getTrezorAddress } = useTrezor()
+const { user } = useUser()
+const { connectWalletConnectV2 } = useWalletConnect()
+
 // eslint-disable-next-line no-undef
 const props = defineProps({
   toggleModal: {
     type: Function,
     required: true,
   },
+  openWalletsModal: {
+    type: Boolean,
+    require: true
+  }
 })
 
-const flowState = ref('select_provider')
+const flowState = ref<UserAuthFlowState>('select_provider')
 const errorMessage = ref(false)
+const errorMassageText = ref('Something went wrong, please try again later.')
 const walletProviderAddresses = ref([] as CryptoAddress[])
-
+const selectProviderLoading = ref(false)
 const selectedProvider = ref(null as ProviderString | null)
-
-
-const { login, logout } = useAuth()
-const { ethersProviderList, getEthersAddressesWithBalances } = useEthers()
-const { screenWidth } = useScreenDimensions()
-const { convertString, trimAndLowercaseAddress } = useFormat()
-const { getLedgerAddress } = useLedger()
-const { getTrezorAddress } = useTrezor()
-const { user } = useUser()
-const { connectWalletConnectV2 } = useWalletConnect()
-
+const selectedAddress = ref(null as string | null)
 
 function checkIfAddressIsUsed(account: CryptoAddress): boolean {
   const { address } = account
@@ -56,28 +59,58 @@ function checkIfAddressIsUsed(account: CryptoAddress): boolean {
   return false
 }
 
+async function handleConfirmCreateAccountWithExistingSecondary() {
+  flowState.value = 'loading'
+  const loginCredentials: LoginCredentials = { provider: selectedProvider.value as ProviderString, address: selectedAddress.value as string, currency: 'ETH', pathIndex: 0 }
+  const response = await loginWithSecondaryAddress(loginCredentials)
+  if (response === 'Successfully created account and logged in') {
+    flowState.value = 'success'
+    setTimeout(() => {
+      props.toggleModal(false)
+      flowState.value = 'select_provider'
+    }, 1000)
+  } else if (response === 'Selected address is not active address in wallet') {
+    flowState.value = 'select_address'
+    errorMessage.value = true
+    errorMassageText.value = 'Address selected is not active.'
+  } else {
+    errorMessage.value = true
+    errorMassageText.value = 'Something went wrong, please try again later.'
+  }
+  console.log('logging response => handle animnation here:', response)
+}
+
 /**
  * Checks if user is adding an account or logging in
  * @param address 
 */
 async function selectAddress(address: string, pathIndex: number): Promise<void> {
+  selectedAddress.value = address
   flowState.value = 'loading'
   const loginCredentials: LoginCredentials = { provider: selectedProvider.value as ProviderString, address, currency: 'ETH', pathIndex }
   const response = await login(loginCredentials)
-  if (response === 'Successfully logged in') {
+  if (response === 'Successfully logged in' || response === 'Successfully added account to user') {
     flowState.value = 'success'
     setTimeout(() => {
       props.toggleModal(false)
       flowState.value = 'select_provider'
     }, 1000)
-  } else {
+  } else if (
+    response === 'Address already exists as a primary address on another account' || 
+    response === 'Address already exists as a secondary address on another account'
+  ){
+    flowState.value = 'confirm_signage_with_existing_secondary'
+  } else if (response === 'Selected address is not active address in wallet'){
     flowState.value = 'select_address'
     errorMessage.value = true
+    errorMassageText.value = 'Address selected is not active.'
+  } else {
+    errorMessage.value = true
+    errorMassageText.value = 'Something went wrong, please try again later.'
   }
   console.log('loging response => handle animnation here:', response)
 }
 
-
 /**
  * Sets the selected provider and returns the set of addresses available for the selected provider
  * @param provider 
@@ -86,6 +119,8 @@ async function selectAddress(address: string, pathIndex: number): Promise<void>
 async function selectProvider(provider: ProviderString, currency: Currency = 'ETH'): Promise<void> {
   console.clear()
   try {
+    selectedProvider.value = provider
+    selectProviderLoading.value = true
     if (provider === 'WalletConnect') {
       // TODO: Clarify this.
       walletProviderAddresses.value = await connectWalletConnectV2('5') as CryptoAddress[]
@@ -98,18 +133,18 @@ async function selectProvider(provider: ProviderString, currency: Currency = 'ET
     } else {
       throw new Error('Provider not supported')
     }
-
+    selectProviderLoading.value = false
     flowState.value = 'select_address'
   } catch (error: any) {
     errorMessage.value = true
+    errorMassageText.value = 'Something went wrong, please try again later.'
+    selectProviderLoading.value = false
     throw new Error(`Error selecting provider: ${error.message}`)
   }
 }
 
-watch(user, () => {
-  if (user.value && flowState.value === 'select_provider') {
-    flowState.value = 'add_account'
-  }
+watch(props, () => {
+  if (user.value) flowState.value = 'add_account'
 })
 
 
@@ -152,21 +187,24 @@ onMounted(() => {
 
       <div class="mt-15">
         <div
-          v-for="wallet in activeWallets"
-          :key="wallet"
+          v-for="walletProvider in supportedWalletProviders"
+          :key="walletProvider"
           class="flex items-center gap-5"
         >
           <button
-            class="connect_wallet_btn"
-            @click="selectProvider(wallet, 'ETH')"
+            class="connect_wallet_btn relative"
+            @click="selectProvider(walletProvider, 'ETH')"
           >
+            <div 
+              :class="selectedProvider === walletProvider && selectProviderLoading? 'loading' : 'hidden'"
+            />
             <img
-              :src="`/${wallet.toLowerCase()}.svg`"
-              :alt="`${wallet} logo`"
+              :src="`/${walletProvider.toLowerCase()}.svg`"
+              :alt="`${walletProvider} logo`"
               class=""
             >
             <h6>
-              {{ wallet }}
+              {{ walletProvider }}
             </h6>
           </button>
           <!-- TODO: @Chris need a way to find out if the extenstion is not downloaded -->
@@ -213,7 +251,7 @@ onMounted(() => {
         </p>
       </div>
 
-      <div class="mt-15 h-[250px] overflow-y-auto overflow-x-hidden">
+      <div class="mt-15 h-[240px] overflow-y-auto overflow-x-hidden">
         <div
           v-if="walletProviderAddresses.length === 0"
           class="text-[16px] font-[500]"
@@ -262,7 +300,7 @@ onMounted(() => {
           </div>
           <button
             class="connect_wallet_btn"
-            :disable="checkIfAddressIsUsed(act)"
+            :disabled="checkIfAddressIsUsed(act)"
             @click="selectAddress(trimAndLowercaseAddress(act.address), pathIndex)"
           >
             <div>
@@ -277,7 +315,7 @@ onMounted(() => {
 
       <div class="h-15 w-full text-[11px] font-[500] mb-5 text-decline">
         <span v-show="errorMessage">
-          Something went wrong, please try again later.
+          {{ errorMassageText }}
         </span>
       </div>
       <div>
@@ -289,8 +327,6 @@ onMounted(() => {
       </div>
     </section>
 
-
-
     <!-- SECTION: LOADING -->
     <section
       v-else-if="flowState === 'loading'"
@@ -308,7 +344,6 @@ onMounted(() => {
       </div>
     </section>
 
-
     <!-- SECTION: SUCCESS -->
     <section
       v-else-if="flowState === 'success'"
@@ -335,19 +370,25 @@ onMounted(() => {
           Confirm Signage
         </h1>
         <p class="">
-          The current wallet you are trying to connect exists under another primary wallet.
+          The current wallet you are trying to connect exists under another primary wallet or is a primary account.
         </p>
       </div>
 
-      <div class="mt-15 h-[230px] w-full flex items-center justify-center gap-5">
-        <button class="action_button_cancel flex items-center justify-center gap-5 w-full">
+      <div class="mt-15 h-[220px] w-full flex items-center justify-center gap-5">
+        <button
+          class="action_button_cancel flex items-center justify-center gap-5 w-full"
+          @click="flowState = 'select_address'"
+        >
           <vue-feather
             type="arrow-left-circle"
             class="icon w-[16px] h-min"
           />
           Back
         </button>
-        <button class="action_button w-full">
+        <button
+          class="action_button w-full"
+          @click="handleConfirmCreateAccountWithExistingSecondary"
+        >
           Confirm
         </button>
       </div>
@@ -367,6 +408,25 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.loading {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+      background-position: -200% 0;
+  }
+  100% {
+      background-position: 200% 0;
+  }
+}
 .action_button_cancel {
   background-color: #f3f5f8;
   border: 1px solid #ebebed;
diff --git a/apps/web/src/composables/auth.ts b/apps/web/src/composables/auth.ts
index 47eec092c..2d42c2b45 100644
--- a/apps/web/src/composables/auth.ts
+++ b/apps/web/src/composables/auth.ts
@@ -140,8 +140,7 @@ export default function useAuth() {
         const addressExistsOnUser = user.value?.accounts?.some(
           (account: Account | any) => account?.address === address
         )
-        if (addressExistsOnUser)
-          return 'Address already exists on this account'
+        if (addressExistsOnUser) return 'Address already exists on this account'
 
         // Check if it exists as a primary address of a different user
         const {
@@ -149,27 +148,16 @@ export default function useAuth() {
         } = await checkIfPrimaryUserExists(provider as ProviderString, address)
         // If yes, ask user if they want to add it as a secondary to this account or if they want to log in with that account
         if (sameAddress) {
-          alert(
-            `${address} already exists as a primary address that used this provider: ${JSON.stringify(
-              walletProvider
-            )}`
-          )
           return 'Address already exists as a primary address on another account'
           // If they want to add to account, addAccountToUser
           // If they don't want to add to their account, cancel (or log them out and log in with other account)
         } else {
           // If no, check if it exists as a secondary address of a different user
-          const { data: accountsIfSecondaryAddress } =
-            await checkIfSecondaryAddress(address)
+          const { data: accountsIfSecondaryAddress } = await checkIfSecondaryAddress(address)
           // If yes, alert user that it already exists as a secondary address on another account and ask if they want to add it as a secondary to this account
           if (accountsIfSecondaryAddress.length) {
-            console.log(
-              'accountsIfSecondaryAddress :>> ',
-              accountsIfSecondaryAddress
-            )
+            console.log('accountsIfSecondaryAddress :>> ', accountsIfSecondaryAddress)
             return 'Address already exists as a secondary address on another account'
-            // If yes, addAccountToUser
-            // If no, cancel (or log them out and log in with other account)
           } else {
             // If no, addAccountToUser
             await addAccountToUser(loginCredentials)
@@ -178,9 +166,7 @@ export default function useAuth() {
         }
       } else {
         // Check if address is a primary address and log in if so
-        const {
-          data: { sameAddress, walletProvider },
-        } = await checkIfPrimaryUserExists(provider as ProviderString, address)
+        const { data: { sameAddress, walletProvider } } = await checkIfPrimaryUserExists(provider as ProviderString, address)
         if (sameAddress) {
           await loginWithProvider(loginCredentials as LoginCredentials)
           return 'Successfully logged in'
@@ -189,16 +175,8 @@ export default function useAuth() {
         // Then check if address is being used as a secondary account by another user
         const { data: accountsIfSecondaryAddress } =
           await checkIfSecondaryAddress(address)
-        console.log(
-          'accountsIfSecondaryAddress :>> ',
-          accountsIfSecondaryAddress
-        )
+        console.log('accountsIfSecondaryAddress :>> ', accountsIfSecondaryAddress)
         if (accountsIfSecondaryAddress.length) {
-          alert(
-            `${address} already exists as a secondary address on this/these account(s): ${JSON.stringify(
-              accountsIfSecondaryAddress
-            )}`
-          )
           return 'Address already exists as a secondary address on another account'
         }
 
@@ -226,9 +204,6 @@ export default function useAuth() {
             })
             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.`
-            )
             return 'Selected address is not active address in wallet'
           }
         } else {
@@ -241,6 +216,29 @@ export default function useAuth() {
     }
   }
 
+  async function loginWithSecondaryAddress(loginCredentials: LoginCredentials) {
+    const { address, provider } = loginCredentials
+    try {
+      const hardwareWallet = provider === 'Ledger' || provider === 'Trezor'
+      const browserWallet = ethersProviderList.includes(provider as ProviderString)
+      if (hardwareWallet) {
+        await loginWithProvider(loginCredentials as LoginCredentials)
+        await getUser()
+        return 'Successfully created account and logged in'
+      } else if (browserWallet) {
+        const activeAddress = await detectActiveWalletAddress(provider as ProviderString)
+        if (activeAddress === address) {
+          await loginWithProvider({ provider: provider as ProviderString, address,currency: 'ETH' })
+          return 'Successfully created account and logged in'
+        } else {
+          return 'Selected address is not active address in wallet'
+        }
+      }
+    } catch(err) {
+      return 'Error in userAuthState'
+    }
+  }
+
   async function checkIfSecondaryAddress(
     address: string
   ): Promise<ApiResponse> {
@@ -272,6 +270,7 @@ export default function useAuth() {
    */
   async function loginWithProvider(loginCredentials: LoginCredentials) {
     const { provider } = loginCredentials
+    console.log('loginCredentials in loginWithProvider :>> ', loginCredentials)
     try {
       if (ethersProviderList.includes(provider)) {
         await loginWithEthers(loginCredentials)
@@ -378,6 +377,7 @@ export default function useAuth() {
     loadingSessionLogout: readonly(loadingSessionLogout),
     loadingSessionLogoutError: readonly(loadingSessionLogoutError),
     login,
+    loginWithSecondaryAddress,
     logout,
   }
 }
diff --git a/apps/web/src/composables/ethers.ts b/apps/web/src/composables/ethers.ts
index b98351852..e47b2e0df 100644
--- a/apps/web/src/composables/ethers.ts
+++ b/apps/web/src/composables/ethers.ts
@@ -172,6 +172,7 @@ export default function useEthers() {
 
   async function loginWithEthers(loginCredentials: LoginCredentials): Promise<void>{
     const { provider, address, currency } = loginCredentials
+    console.log('address in loginWithEthers :>> ', address)
     const browserProvider = getBrowserProvider(provider)
     const web3Provider: ethers.providers.Web3Provider = new ethers.providers.Web3Provider(browserProvider as EthersProvider)
     try {
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index 6c45b6c63..c52976996 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -1,88 +1,20 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import Carousel from '@/components/Carousel.vue'
-import Slide from '@/components/Slide.vue'
 import router from '@/composables/router'
 import VueFeather from 'vue-feather'
 import useAuth from '@/composables/auth'
-import useFormat from '@/composables/format'
 import useScreenDimensions from '@/composables/screenDimensions'
 import useUser from '@/composables/user'
-import { CryptoAddress, Currency, LoginCredentials, ProviderString, UserAuthState } from '@casimir/types'
-import useEthers from '@/composables/ethers'
-import useLedger from '@/composables/ledger'
-import useTrezor from '@/composables/trezor'
-import useWalletConnect from '@/composables/walletConnectV2'
 
 import ConnectWalletsFlow from '@/components/ConnectWalletsFlow.vue'
 
-const { login, logout } = useAuth()
-const { ethersProviderList, getEthersAddressesWithBalances } = useEthers()
 const { screenWidth } = useScreenDimensions()
-const { convertString, trimAndLowercaseAddress } = useFormat()
-const { getLedgerAddress } = useLedger()
-const { getTrezorAddress } = useTrezor()
+const { logout } = useAuth()
 const { user } = useUser()
-const { connectWalletConnectV2 } = useWalletConnect()
-
-const activeWallets = [
-  'MetaMask',
-  'CoinbaseWallet',
-  'WalletConnect',
-  'Trezor',
-  'Ledger',
-  'TrustWallet',
-  // 'IoPay',
-] as ProviderString[]
+
 const authFlowCardNumber = ref(1)
-const selectedProvider = ref(null as ProviderString | null)
 const openRouterMenu = ref(false)
 const openWalletsModal = ref(false)
-const userAuthState = ref<UserAuthState>('default')
-const walletProviderAddresses = ref([] as CryptoAddress[])
-
-// function checkIfAddressIsUsed(account: CryptoAddress): boolean {
-//   const { address } = account
-//   if (user.value?.accounts) {
-//     const accountAddresses = user.value.accounts.map((account: any) => account.address)
-//     if (accountAddresses.includes(address)) return true
-//   }
-//   return false
-// }
-
-/**
- * Checks if user is adding an account or logging in
- * @param address 
-*/
-// async function selectAddress(address: string, pathIndex: number): Promise<void> {
-//   const loginCredentials: LoginCredentials = { provider: selectedProvider.value as ProviderString, address, currency: 'ETH', pathIndex }
-//   userAuthState.value = await login(loginCredentials)
-// }
-
-/**
- * Sets the selected provider and returns the set of addresses available for the selected provider
- * @param provider 
- * @param currency 
-*/
-async function selectProvider(provider: ProviderString, currency: Currency = 'ETH'): Promise<void> {
-  console.clear()
-  try {
-    if (provider === 'WalletConnect') {
-      // TODO: Clarify this.
-      walletProviderAddresses.value = await connectWalletConnectV2('5') as CryptoAddress[]
-    } else if (ethersProviderList.includes(provider)) {
-      walletProviderAddresses.value = await getEthersAddressesWithBalances(provider) as CryptoAddress[]
-    } else if (provider === 'Ledger') {
-      walletProviderAddresses.value = await getLedgerAddress[currency]() as CryptoAddress[]
-    } else if (provider === 'Trezor') {
-      walletProviderAddresses.value = await getTrezorAddress[currency]() as CryptoAddress[]
-    } else {
-      throw new Error('Provider not supported')
-    }
-  } catch (error: any) {
-    throw new Error(`Error selecting provider: ${error.message}`)
-  }
-}
 
 const show_setting_modal = ref(false)
 
@@ -254,36 +186,6 @@ const toggleModal = (showModal: boolean) => {
               Account
             </span>
           </button>
-          <!--<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <vue-feather
-              type="layers"
-              size="36"
-              class="icon w-[17px] h-min"
-            />
-            <span>
-              Chanelog
-            </span>
-          </button>
-          <button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <vue-feather
-              type="help-circle"
-              size="36"
-              class="icon w-[17px] h-min"
-            />
-            <span>
-              Support
-            </span>
-          </button>
-          <button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <vue-feather
-              type="code"
-              size="36"
-              class="icon w-[17px] h-min"
-            />
-            <span>
-              API
-            </span>
-          </button> -->
           <button
             class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full h-[41px]"
             :disabled="!user"
@@ -322,71 +224,10 @@ const toggleModal = (showModal: boolean) => {
       z-[20] top-0 left-0 flex items-center justify-center"
     >
       <div id="connect_wallet_card">
-        <ConnectWalletsFlow :toggle-modal="toggleModal" />
-        <!-- <Carousel v-slot="{ currentSlide }" :current-slide="authFlowCardNumber"
-          class="w-full h-full relative overflow-hidden">
-          <Slide class="w-full h-full ">
-            <div v-show="currentSlide === 1"
-              class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]">
-              <h6 class="nav_items">
-                Select Provider
-              </h6>
-              <div class="flex flex-wrap justify-around gap-[20px] w-full mt-[20px]">
-                <button
-                  v-for="walletProvider in activeWallets"
-                  :key="walletProvider"
-                  class="w-[140px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
-                  @click="selectProvider(walletProvider), authFlowCardNumber = 2, selectedProvider = walletProvider"
-                >
-                  <img
-                    :src="`/${walletProvider.toLowerCase()}.svg`"
-                    :alt="`${walletProvider} logo`"
-                    class="w-[32px] h-[32px] rounded-[999px] mb-[10px]"
-                  >
-                  <h6>
-                    {{ walletProvider }}
-                  </h6>
-                </button>
-              </div>
-            </div>
-          </Slide>
-          <Slide class="w-full h-full ">
-            <div v-show="currentSlide === 2"
-              class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]">
-              <h6 class="nav_items flex items-center mb-[20px] h-[29px]">
-                <button @click="authFlowCardNumber = 1, selectedProvider = null">
-                  <vue-feather type="chevron-left"
-                    class="icon w-[20px] h-min text-primary hover:text-blue_3 mr-[10px] mt-[5px]" />
-                </button>
-                Select Address
-              </h6>
-              <div v-if="walletProviderAddresses.length === 0" class="flex items-center justify-center h-[90%]">
-                <h6 class="nav_items">
-                  Waiting on {{ selectedProvider }}...
-                </h6>
-              </div>
-              <div v-else>
-                <button
-                  v-for="(act, pathIndex) in walletProviderAddresses"
-                  :key="act.address"
-                  class="w-full border rounded-[8px] px-[10px] py-[15px] flex flex-wrap gap-[10px] text-center items-center justify-between hover:border-blue_3 mb-[10px]"
-                  :disable="checkIfAddressIsUsed(act)"
-                  @click="selectAddress(trimAndLowercaseAddress(act.address), pathIndex), openWalletsModal = false, authFlowCardNumber = 1"
-                >
-                  <div>
-                    {{ convertString(act.address) }}
-                  </div>
-                  <div>
-                    {{ parseFloat(parseFloat(act.balance).toFixed(2)) }} ETH
-                  </div>
-                  <p v-if="checkIfAddressIsUsed(act)" class="text-decline text-[12px] font-[400]">
-                    Address in use.
-                  </p>
-                </button>
-              </div>
-            </div>
-          </Slide>
-        </Carousel> -->
+        <ConnectWalletsFlow
+          :toggle-modal="toggleModal"
+          :open-wallets-modal="openWalletsModal"
+        />
       </div>
     </div>
   </div>
@@ -470,4 +311,4 @@ const toggleModal = (showModal: boolean) => {
   background: black;
   height: 36px;
 }
-</style>@/composables/user
\ No newline at end of file
+</style>
\ No newline at end of file