Add multi-wallet tab on dashboard page

apps/web/src/layouts/default-layout.vue

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import useUsers from '@/composables/users'
+import useWallet from '@/composables/wallet'
 
+const { connectWallet, logout, loadingUserWallets } = useWallet()
 const { user } = useUsers()
+
+const openWalletConnect = ref(false)
 </script>
 
 <template>
@@ -10,8 +15,9 @@ const { user } = useUsers()
     w-[100vw] flex justify-center items-start py-45 overflow-y-auto"
   >
     <div class="max-w-[1448px] h-full w-full px-[140px]">
+      <!-- TD: change !user -> user -->
       <div
-        v-if="user"
+        v-if="!user"
         class="flex justify-between items-center gap-45 w-full pb-[60px]"
       >
         <div class="flex items-center gap-50">
@@ -30,11 +36,90 @@ const { user } = useUsers()
             </h6>
           </div>
         </div>
-        <div class="text-grey_3">
-          Connect Wallet
+        <div 
+          class="text-grey_3 border border-border rounded-[5px]
+           p-10 w-[200px] relative hover:border-grey_4"
+          @mouseenter="openWalletConnect = true"
+          @mouseleave="openWalletConnect = false"
+        >
+          <div class="text-body font-bold flex items-center justify-between text-grey w-full">
+            <div
+              v-if="!user"
+              class="flex items-center gap-10"
+            >
+              <img
+                src="/metamask.svg"
+                alt="MetaMask SVG"
+                class="w-[16px]"
+              >
+              MetaMask 
+            </div>
+            <i
+              :class="!openWalletConnect ? 'iconoir-nav-arrow-down text-[16px]' : 'iconoir-nav-arrow-up text-[16px]'"
+            />
+          </div>
+          <div
+            v-show="openWalletConnect"
+            class="absolute top-[100% - 1px] right-[-1px] w-[200px] border-x border-b text-grey_3 border-border rounded-b-[5px]
+            hover:border-grey_4 bg-white expand_height "
+          >
+            <div 
+              class="w-full h-full flex flex-col justify-between "
+              :class="openWalletConnect? 'delay_show opacity-[1]' : 'opacity-0'"
+            >
+              <div class="h-full px-10 pt-10">
+                <div class="w-full h-full border-t border-border ">
+                  content
+                </div>
+              </div>
+              <button
+                class="border-t border-decline w-full flex items-center justify-center 
+                gap-10 py-12 font-bold text-body text-decline hover:bg-decline 
+                hover:text-white"
+                @click="logout"
+              >
+                Disconnect
+                <i class="iconoir-log-out" />
+              </button>
+            </div>
+          </div>
         </div>
       </div>
       <slot />
     </div>
   </div>
-</template>
+</template>
+
+<style scoped>
+.expand_height{
+  animation: grow_height 0.25s forwards;
+  transition: all 0.05s ease;
+  overflow: hidden;
+}
+
+@keyframes grow_height {
+  from {
+    height: 0px;
+  }
+  to {
+    height: 300px;
+  }
+}
+
+.delay_show{
+  opacity: 0;
+  animation: opacity_show 0.05s forwards;
+  animation-delay: 0.05s;
+  transition: all 0.05s ease;
+  transition-delay: 0.05s;
+}
+
+@keyframes opacity_show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>

apps/web/src/pages/auth/Auth.vue

@@ -2,6 +2,9 @@
 import { ref } from 'vue'
 import useWallet from '@/composables/wallet'
 import { ProviderString } from '@casimir/types'
+import useUsers from '@/composables/users'
+
+const { user } = useUsers()
 
 const { connectWallet } = useWallet()
 
@@ -36,9 +39,10 @@ const wallets = ref([
           </div>
           <div>
             <p class="text-caption font-medium text-grey_5 mb-10">
-              New user? Connect any wallet to create an account with wallet.
-              Once wallet is connected, you can connect more wallets on the dashboard page with the 
-              Multi-Wallet tab in the top right of the page. 
+              New user? Connect any wallet to create an account.
+              Once wallet is connected, you can connect more wallets in the dashboard page with the 
+              Multi-Wallet tab in the top right of the page. Wallets connected will go under your 
+              sign-in wallet. On sign in all connected wallets will be populating the dashboard.
             </p>
             <p class="text-caption font-medium text-grey_5">
               By connecting your wallets you agree to 
@@ -52,7 +56,7 @@ const wallets = ref([
           <button
             v-for="wallet in wallets"
             :key="wallet"
-            class="flex justify-between items-center border-[1.5px] border-[#b2bacb] 
+            class="flex justify-between items-center border-[1px] border-[#b2bacb] 
             rounded-[5px] mb-[10px] px-10 py-5 w-full hover:border-blue_3"
             @click="connectWallet(wallet)"
           >

apps/web/src/pages/dashboard/Dashboard.vue

@@ -22,8 +22,8 @@
         </h6>
       </div>
     </div>
-    <div class="col-span-8 border h-[300px]">
-      <div>
+    <div class="col-span-8 h-[300px] pb-45">
+      <div class="w-full h-full border">
         <h6 class="font-bold text-[#727476]">
           Table
         </h6>

apps/web/tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
                 'secondary': '#C1D3F8',
                 'white': '#fff',
                 'shade': '#615959',
-                'grey' : '#E4E4E7',
+                'grey' : '#727476',
 
                 // Blues
                 'blue_1': '#E5EEFF',
@@ -45,7 +45,7 @@ module.exports = {
                 'warning': '#FBBD84',
                 'approve': '#7BE198',
                 'decline': '#FF8080',
-                'borders': '#E4E4E7',
+                'border': '#B2BACB',
             },
             spacing: {
                 'gutter': '16px',