Connect your account

src/components/utilcards/AccountDetails.vue → src/components/utilcards/AccountDetailsCard.vue

 <script setup lang="ts">
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { mdiAccountBadgeOutline, mdiOpenInNew } from '@mdi/js';
 import { useSettingsStore } from '@/stores/settings.store';
-import { computed } from 'vue';
 import { useUserStore } from '@/stores/user.store';
-import { useWalletStore } from '@/stores/wallet.store';
 
 const settingsStore = useSettingsStore();
-const hasUser = computed(() => settingsStore.settings.account !== undefined);
-
-const walletStore = useWalletStore();
 
 const userStore = useUserStore();
 </script>
@@ -27,7 +21,7 @@ const userStore = useUserStore();
       <CardDescription class="mr-8">Account description parsed from the metadata</CardDescription>
     </CardHeader>
     <CardContent>
-      <div class="space-y-4" v-if="hasUser">
+      <div class="space-y-4">
         <div class="flex space-x-1">
           <div>
             <Avatar v-if="userStore.isReady" shape="square" class="border rounded-xl w-20 h-20 mr-2">
@@ -55,11 +49,6 @@ const userStore = useUserStore();
           </div>
         </div>
       </div>
-      <div v-else>
-        <Button @click="walletStore.openWalletSelectModal()" class="w-full font-bold">
-          Connect your wallet now
-        </Button>
-      </div>
     </CardContent>
   </Card>
 </template>
\ No newline at end of file

src/components/utilcards/ConnectWalletCard.vue

+<script setup lang="ts">
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { mdiAccountBadgeOutline } from '@mdi/js';
+import { useWalletStore } from '@/stores/wallet.store';
+
+const walletStore = useWalletStore();
+</script>
+
+<template>
+  <Card class="w-full">
+    <CardHeader>
+      <CardTitle class="inline-flex items-center justify-between">
+        <span>Connect your account</span>
+        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsla(var(--foreground) / 80%)" :d="mdiAccountBadgeOutline"/></svg>
+      </CardTitle>
+      <CardDescription class="mr-8">Connect to wallet of your choice in order to manage your account using Hive Bridge</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="space-y-4">
+        <Button @click="walletStore.openWalletSelectModal()" class="w-full font-bold">
+          Connect your wallet now
+        </Button>
+      </div>
+    </CardContent>
+  </Card>
+</template>
\ No newline at end of file

src/pages/index.vue

 <script setup lang="ts">
-import AccountDetails from '@/components/utilcards/AccountDetails.vue';
+import AccountDetails from '@/components/utilcards/AccountDetailsCard.vue';
+import ConnectWalletCard from '@/components/utilcards/ConnectWalletCard.vue';
+import { useSettingsStore } from '@/stores/settings.store';
+import { computed } from 'vue';
+
+const settingsStore = useSettingsStore();
+const hasUser = computed(() => settingsStore.settings.account !== undefined);
 </script>
 
 <template>
   <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 p-8">
-    <AccountDetails />
+    <div v-if="hasUser">
+      <AccountDetails />
+    </div>
+    <div v-else>
+      <ConnectWalletCard />
+    </div>
   </div>
 </template>

src/stores/wallet.store.ts

@@ -26,7 +26,7 @@ export const useWalletStore = defineStore('wallet', {
         const metamaskStore = useMetamaskStore();
 
         const checkForWallets = () => {
-          metamaskStore.connect().then(() => state._walletsStatus.metamask = true).catch(console.error);
+          metamaskStore.connect().then(() => state._walletsStatus.metamask = true).catch(() => {});
           state._walletsStatus.keychain = "hive_keychain" in window;
           state._walletsStatus.peakvault = "peakvault" in window;
         };