Add onboarding wallet button install addon

src/components/onboarding/OnboardingWalletButton.vue

 <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>

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>

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">