From 4fdf51b39bf9de82a77698bfa323fee4a784852c Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Wed, 19 Mar 2025 14:28:38 +0100
Subject: [PATCH] Connect your account
---
...ountDetails.vue => AccountDetailsCard.vue} | 13 +--------
.../utilcards/ConnectWalletCard.vue | 27 +++++++++++++++++++
src/pages/index.vue | 15 +++++++++--
src/stores/wallet.store.ts | 2 +-
4 files changed, 42 insertions(+), 15 deletions(-)
rename src/components/utilcards/{AccountDetails.vue => AccountDetailsCard.vue} (84%)
create mode 100644 src/components/utilcards/ConnectWalletCard.vue
diff --git a/src/components/utilcards/AccountDetails.vue b/src/components/utilcards/AccountDetailsCard.vue
similarity index 84%
rename from src/components/utilcards/AccountDetails.vue
rename to src/components/utilcards/AccountDetailsCard.vue
index 96d33ec..6d026c2 100644
--- a/src/components/utilcards/AccountDetails.vue
+++ b/src/components/utilcards/AccountDetailsCard.vue
@@ -1,18 +1,12 @@
<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
diff --git a/src/components/utilcards/ConnectWalletCard.vue b/src/components/utilcards/ConnectWalletCard.vue
new file mode 100644
index 0000000..ffd032d
--- /dev/null
+++ b/src/components/utilcards/ConnectWalletCard.vue
@@ -0,0 +1,27 @@
+<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
diff --git a/src/pages/index.vue b/src/pages/index.vue
index d944bda..a30d985 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,9 +1,20 @@
<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>
diff --git a/src/stores/wallet.store.ts b/src/stores/wallet.store.ts
index 7fc8079..72b87d6 100644
--- a/src/stores/wallet.store.ts
+++ b/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;
};
--
GitLab