From fcf215f3e20395f0eba72fe0aeee561f6650ecb9 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Mon, 17 Mar 2025 13:17:07 +0100
Subject: [PATCH] Add onboarding wallet button install addon
---
.../onboarding/OnboardingWalletButton.vue | 38 +++++++++++++++----
src/components/onboarding/SelectWallet.vue | 6 +--
.../wallets/metamask/MetamaskConnect.vue | 2 +-
3 files changed, 34 insertions(+), 12 deletions(-)
diff --git a/src/components/onboarding/OnboardingWalletButton.vue b/src/components/onboarding/OnboardingWalletButton.vue
index d865e23..c23034c 100644
--- a/src/components/onboarding/OnboardingWalletButton.vue
+++ b/src/components/onboarding/OnboardingWalletButton.vue
@@ -1,23 +1,45 @@
<script setup lang="ts">
import { Button } from "@/components/ui/button";
-import { cn } from '@/lib/utils'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { mdiDownload } from "@mdi/js";
const props = defineProps<{
class?: string;
logoUrl: string;
name: string;
description: string;
+ disabled?: boolean;
+ downloadUrl: string;
}>();
+
+const emit = defineEmits(['click']);
</script>
<template>
- <Button variant="outline" size="lg" :class="cn('w-full justify-start px-5 py-8', props.class)">
- <img :src="props.logoUrl" class="w-[35px] mr-3" />
- <div class="inline-flex flex-col text-left">
- <span class="text-lg/6">{{ props.name }}</span>
- <span class="text-xs text-description">{{ props.description }}</span>
- </div>
- </Button>
+ <div class="relative">
+ <Button :disabled="disabled" @click="emit('click')" variant="outline" size="lg" :class="cn('w-full justify-start px-5 py-8', props.class)">
+ <img :src="props.logoUrl" class="w-[35px] mr-3" />
+ <div class="inline-flex flex-col text-left">
+ <span class="text-lg/6">{{ props.name }}</span>
+ <span class="text-xs text-description">{{ props.description }}</span>
+ </div>
+ </Button>
+ <TooltipProvider :delayDuration="200" disableHoverableContent>
+ <Tooltip>
+ <TooltipTrigger class="absolute right-4 top-1/2 transform -translate-y-1/2 w-8 h-8">
+ <a :href="props.downloadUrl" v-if="props.disabled" target="_blank">
+ <Button variant="ghost" class="w-8 h-8 p-0">
+ <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsl(var(--foreground))" :d="mdiDownload"/></svg>
+ </Button>
+ </a>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>Install {{ props.name }} extension</p>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ </div>
</template>
<style scoped>
diff --git a/src/components/onboarding/SelectWallet.vue b/src/components/onboarding/SelectWallet.vue
index d4e0362..ebb956b 100644
--- a/src/components/onboarding/SelectWallet.vue
+++ b/src/components/onboarding/SelectWallet.vue
@@ -44,9 +44,9 @@ const useWallet = (type: UsedWallet) => {
<CardDescription>We support multiple on-chain wallets</CardDescription>
</CardHeader>
<CardContent class="space-y-2">
- <OnboardingButton :disabled="!hasMetamask" @click="useWallet(UsedWallet.METAMASK)" :logoUrl="getWalletIcon(UsedWallet.METAMASK)" name="Metamask" description="Use your derived keys"/>
- <OnboardingButton :disabled="!hasKeychain" @click="useWallet(UsedWallet.KEYCHAIN)" :logoUrl="getWalletIcon(UsedWallet.KEYCHAIN)" name="Keychain" description="Use already imported accounts"/>
- <OnboardingButton :disabled="!hasPeakVault" @click="useWallet(UsedWallet.PEAKVAULT)" :logoUrl="getWalletIcon(UsedWallet.PEAKVAULT)" name="PeakVault" description="Use already imported accounts"/>
+ <OnboardingButton downloadUrl="https://docs.metamask.io/snaps/get-started/install-flask/" :disabled="!hasMetamask" @click="useWallet(UsedWallet.METAMASK)" :logoUrl="getWalletIcon(UsedWallet.METAMASK)" name="Metamask" description="Use your derived keys"/>
+ <OnboardingButton downloadUrl="https://hive-keychain.com/" :disabled="!hasKeychain" @click="useWallet(UsedWallet.KEYCHAIN)" :logoUrl="getWalletIcon(UsedWallet.KEYCHAIN)" name="Keychain" description="Use already imported accounts"/>
+ <OnboardingButton downloadUrl="https://vault.peakd.com/peakvault/guide.html#installation" :disabled="!hasPeakVault" @click="useWallet(UsedWallet.PEAKVAULT)" :logoUrl="getWalletIcon(UsedWallet.PEAKVAULT)" name="PeakVault" description="Use already imported accounts"/>
</CardContent>
<CardFooter></CardFooter>
</Card>
diff --git a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
index cc2039b..a12d232 100644
--- a/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
+++ b/src/components/onboarding/wallets/metamask/MetamaskConnect.vue
@@ -189,7 +189,7 @@ const updateAccountName = (value: string | any) => {
</Button>
</div>
</CardTitle>
- <CardDescription>Follow these instructions to connect to Metamask</CardDescription>
+ <CardDescription>Follow these instructions to connect Metamask wallet to your Hive account</CardDescription>
</CardHeader>
<CardContent class="text-sm">
<div v-if="!isMetamaskConnected" class="space-y-4">
--
GitLab