From 428a1f23cbb9811d22812909c2e6835b84f34f97 Mon Sep 17 00:00:00 2001
From: SuperBatata <khaledbattiche@gmail.com>
Date: Tue, 14 Jan 2025 17:50:44 +0100
Subject: [PATCH] feat: added new button for the sign & verify page

---
 .../wallet/[wallet]/settings/keys/index.vue   | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/waltid-applications/waltid-web-wallet/apps/waltid-dev-wallet/src/pages/wallet/[wallet]/settings/keys/index.vue b/waltid-applications/waltid-web-wallet/apps/waltid-dev-wallet/src/pages/wallet/[wallet]/settings/keys/index.vue
index 5adec9c45..b96627e4d 100644
--- a/waltid-applications/waltid-web-wallet/apps/waltid-dev-wallet/src/pages/wallet/[wallet]/settings/keys/index.vue
+++ b/waltid-applications/waltid-web-wallet/apps/waltid-dev-wallet/src/pages/wallet/[wallet]/settings/keys/index.vue
@@ -4,6 +4,16 @@
       <h1 class="text-lg font-semibold">Your keys:</h1>
 
       <div class="flex justify-between gap-2">
+        <button
+            class="inline-flex items-center bg-blue-500 hover:bg-blue-600 focus-visible:outline-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            @click="signAndverify"
+        >
+          <HashtagIcon
+              aria-hidden="true"
+              class="h-5 w-5 text-white mr-1"
+          />
+          <span>Sign & Verify</span>
+        </button>
         <button
           class="inline-flex items-center bg-blue-500 hover:bg-blue-600 focus-visible:outline-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
           @click="importKey"
@@ -91,13 +101,8 @@
 
 <script lang="ts" setup>
 import CenterMain from "@waltid-web-wallet/components/CenterMain.vue";
-import { useCurrentWallet } from "@waltid-web-wallet/composables/accountWallet.ts";
-import {
-  ArrowUturnLeftIcon,
-  CheckIcon,
-  InboxArrowDownIcon,
-  KeyIcon,
-} from "@heroicons/vue/24/outline";
+import {useCurrentWallet} from "@waltid-web-wallet/composables/accountWallet.ts";
+import {ArrowUturnLeftIcon, CheckIcon, HashtagIcon, InboxArrowDownIcon, KeyIcon} from "@heroicons/vue/24/outline";
 
 const currentWallet = useCurrentWallet();
 
@@ -114,6 +119,10 @@ function importKey() {
   navigateTo("keys/import");
 }
 
+function signAndverify() {
+  navigateTo("keys/sign-verify");
+}
+
 useHead({
   title: "Keys - walt.id",
 });